/* =========
   Baseline
   ========= */
*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: dark light; }
body{
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  line-height: 1.55;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  background: var(--bg-0);
  color: var(--text-0);
}
img, svg { max-width: 100%; height: auto; }
a { color: inherit; }

:root{
  --bg-0: #0b0e14;
  --bg-1: #0f1420;
  --surface: rgba(255,255,255,0.06);
  --surface-2: rgba(255,255,255,0.10);
  --border: rgba(255,255,255,0.12);
  --text-0: rgba(255,255,255,0.92);
  --text-1: rgba(255,255,255,0.72);
  --text-2: rgba(255,255,255,0.58);

  --accent-0: #5eead4;
  --accent-1: #818cf8;

  --shadow: 0 18px 60px rgba(0,0,0,0.45);
  --shadow2: 0 28px 80px rgba(0,0,0,0.32);
  --radius-xl: 22px;
  --radius-lg: 16px;
  --radius-md: 12px;
  --radius: 20px;
  --radius2: 28px;
  --card: color-mix(in srgb, var(--bg-1), transparent 8%);
  --card2: color-mix(in srgb, var(--bg-1), transparent 3%);
  --muted: var(--text-2);
  --a1: var(--accent-0);
  --a2: var(--accent-1);
  --teal: color-mix(in srgb, var(--accent-0), transparent 64%);
  --lav: color-mix(in srgb, var(--accent-1), transparent 70%);
  --softShadow: 0 22px 70px rgba(0,0,0,.35);

  --container: min(1120px, calc(100% - 2rem));

  /* Scroll-Glow Variablen (werden per JS gesetzt) */
  --g1x: 18%;
  --g1y: 12%;
  --g2x: 82%;
  --g2y: 24%;
  --g3x: 30%;
  --g3y: 86%;
  --glow-opacity: .95;
  --glow-sat: 1.08;
  --glow-blur: 0px;
}

html[data-theme="light"]{
  --bg-0: #f7f7fb;
  --bg-1: #ffffff;
  --surface: rgba(0,0,0,0.04);
  --surface-2: rgba(0,0,0,0.06);
  --border: rgba(0,0,0,0.10);
  --text-0: rgba(0,0,0,0.90);
  --text-1: rgba(0,0,0,0.70);
  --text-2: rgba(0,0,0,0.56);
  --shadow: 0 18px 70px rgba(0,0,0,0.12);
  --shadow2: 0 26px 72px rgba(16,24,40,0.16);
  --card: rgba(255,255,255,0.82);
  --card2: rgba(255,255,255,0.92);
  --softShadow: 0 20px 55px rgba(16,24,40,.12);
  --glow-opacity: .98;
  --glow-sat: 1.18;
  --glow-blur: 10px;
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

:focus-visible{
  outline: 2px solid color-mix(in srgb, var(--accent-0), var(--accent-1));
  outline-offset: 3px;
  border-radius: 10px;
}

.container{ width: var(--container); margin: 0 auto; }

.skip-link{
  position: absolute;
  left: -999px;
  top: .75rem;
  padding: .75rem 1rem;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 12px;
  z-index: 9999;
}
.skip-link:focus{ left: .75rem; }

.page{ position: relative; z-index: 1; }
.icon-sprite{
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* =========
   Scroll Glow Background (scroll-getrieben, ruhig)
   ========= */
.scroll-glow{
  position: fixed;
  inset: -12% -12% -12% -12%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(900px 680px at var(--g1x) var(--g1y),
      color-mix(in srgb, var(--accent-0), transparent 80%),
      transparent 60%),
    radial-gradient(980px 740px at var(--g2x) var(--g2y),
      color-mix(in srgb, var(--accent-1), transparent 82%),
      transparent 62%),
    radial-gradient(760px 560px at var(--g3x) var(--g3y),
      color-mix(in srgb, rgba(255,255,255,0.10), transparent 30%),
      transparent 66%),
    linear-gradient(180deg, var(--bg-0), var(--bg-1));
  filter: saturate(var(--glow-sat)) blur(var(--glow-blur));
  transform: translateZ(0);
  opacity: var(--glow-opacity);
}
html[data-theme="light"] .scroll-glow{
  background:
    radial-gradient(980px 720px at var(--g1x) var(--g1y),
      color-mix(in srgb, var(--accent-0), transparent 68%),
      transparent 58%),
    radial-gradient(1040px 760px at var(--g2x) var(--g2y),
      color-mix(in srgb, var(--accent-1), transparent 72%),
      transparent 60%),
    radial-gradient(820px 620px at var(--g3x) var(--g3y),
      rgba(16,24,40,.10),
      transparent 67%),
    linear-gradient(180deg, #fbfbff, #f3f5fb 62%, #eef2fa 100%);
}

/* =========
   Header / Nav
   ========= */
.site-header{
  position: sticky;
  top: 0;
  z-index: 1000;
  background: color-mix(in srgb, var(--bg-0), transparent 20%);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid color-mix(in srgb, var(--border), transparent 20%);
}
@supports not (backdrop-filter: blur(14px)){
  .site-header{ background: var(--bg-0); }
}

.navbar{
  width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: .75rem;
  align-items: center;
  padding: .85rem 0;
}

.brand{
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  text-decoration: none;
  user-select: none;
}
.brand-mark{
  width: 34px;
  height: 34px;
  display: inline-grid;
  place-items: center;
  border-radius: 12px;
  background:
    radial-gradient(90% 90% at 20% 20%, var(--accent-0), transparent 60%),
    radial-gradient(90% 90% at 80% 80%, var(--accent-1), transparent 60%),
    color-mix(in srgb, var(--surface-2), transparent 0%);
  border: 1px solid var(--border);
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  color: var(--text-0);
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .04em;
  line-height: 1;
  text-transform: uppercase;
}
.brand-text{
  font-weight: 650;
  letter-spacing: -0.02em;
  color: var(--text-0);
}

.theme-toggle, .nav-toggle{
  appearance: none;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-0);
  border-radius: 14px;
  padding: .55rem .65rem;
  cursor: pointer;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.theme-toggle:hover, .nav-toggle:hover{
  transform: translateY(-1px);
  background: color-mix(in srgb, var(--surface-2), transparent 10%);
  border-color: color-mix(in srgb, var(--border), var(--accent-0) 20%);
}

.bars{
  width: 20px; height: 14px; display: inline-block; position: relative;
}
.bars::before, .bars::after, .bars span{
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  background: var(--text-0);
  border-radius: 999px;
  opacity: .9;
}
.bars::before{ top: 0; }
.bars span{ top: 6px; }
.bars::after{ bottom: 0; }

nav.nav{ justify-self: end; }
.nav-menu{
  list-style: none;
  display: flex;
  gap: .25rem;
  margin: 0;
  padding: 0;
  align-items: center;
}
.nav-menu a{
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: var(--text-1);
  padding: .55rem .75rem;
  border-radius: 14px;
  border: 1px solid transparent;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
  font-weight: 520;
}
.nav-menu a:hover{
  background: var(--surface);
  color: var(--text-0);
  border-color: color-mix(in srgb, var(--border), transparent 30%);
}
.nav-menu a.active{
  background:
    radial-gradient(180% 180% at 20% 30%, color-mix(in srgb, var(--accent-0), transparent 82%), transparent 55%),
    radial-gradient(180% 180% at 80% 70%, color-mix(in srgb, var(--accent-1), transparent 82%), transparent 55%),
    var(--surface);
  border-color: color-mix(in srgb, var(--border), var(--accent-0) 20%);
  color: var(--text-0);
}
.nav-menu a.cta-link{
  border-color: color-mix(in srgb, var(--border), var(--accent-0) 25%);
  color: var(--text-0);
}

.scroll-progress{
  height: 3px;
  width: 100%;
  transform-origin: left;
  transform: scaleX(0);
  background: linear-gradient(90deg, var(--accent-0), var(--accent-1));
  opacity: .9;
}

/* =========
   Typography / Sections
   ========= */
section{ scroll-margin-top: 84px; }
.section{ padding: clamp(64px, 8vw, 120px) 0; }
.section-head{ max-width: 900px; margin-bottom: 2.25rem; }

.eyebrow{
  display: inline-flex;
  gap: .5rem;
  align-items: center;
  margin: 0 0 .75rem 0;
  color: var(--text-2);
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: .82rem;
}

main h1{
  margin: 0 0 1rem 0;
  font-size: clamp(2.05rem, 3.6vw, 3.35rem);
  line-height: 1.05;
  letter-spacing: -0.04em;
}
main h2{
  margin: 0 0 .75rem 0;
  font-size: clamp(1.55rem, 2.4vw, 2.2rem);
  letter-spacing: -0.03em;
  line-height: 1.15;
}
main h3{
  margin: 0 0 .5rem 0;
  font-size: 1.1rem;
  letter-spacing: -0.01em;
}
p{ margin: 0 0 1rem 0; color: var(--text-1); max-width: 78ch; }
.lead{ font-size: clamp(1.05rem, 1.2vw, 1.2rem); color: var(--text-1); }
.muted{ color: var(--text-2); }
.mt{ margin-top: .75rem; }
.mt-sm{ margin-top: .45rem; }

.mini-icon{
  width: 16px; height: 16px;
  color: color-mix(in srgb, var(--text-0), var(--accent-0) 12%);
}

/* =========
   Hero
   ========= */
.hero{
  position: relative;
  padding: clamp(60px, 7vw, 110px) 0 clamp(42px, 5vw, 70px);
  overflow: clip;
}

.hero-grid{
  display: grid;
  grid-template-columns: 1.12fr .88fr;
  gap: clamp(1.25rem, 3vw, 3rem);
  align-items: center;
}

/* FIX: Headline immer in 3 festen Zeilen (auch wenn irgendwo flex/nowrap gesetzt ist) */
.hero .hero-title{
  margin: 0;
}

.hero .hero-title .hero-line{
  display: block;
  white-space: nowrap;     /* verhindert Umbruch innerhalb der Zeile */
}

/* Buttons */
.hero-actions{
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin: 1.25rem 0 1.25rem;
}

.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: .85rem 1.05rem;
  border-radius: 16px;
  border: 1px solid var(--border);
  text-decoration: none;
  font-weight: 650;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
  user-select: none;
}
.btn:hover{ transform: translateY(-1px); }
.btn.primary{
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--accent-0), transparent 25%),
    color-mix(in srgb, var(--accent-1), transparent 25%));
  color: #081016;
  border-color: color-mix(in srgb, var(--border), var(--accent-0) 25%);
}
.btn.ghost{
  background: var(--surface);
  color: var(--text-0);
}

.hero-highlights{
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.hero-highlights li{
  padding: .45rem .65rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface), transparent 10%);
  color: var(--text-1);
  font-size: .92rem;
  white-space: nowrap;
}
/* =========
   Hero Chips (Neu_1 Look & Feel) - scoped, damit andere .chip Elemente nicht betroffen sind
   Einfügen direkt nach .hero-highlights li (nach Zeile ~367)
   ========= */

.hero-chips{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin: 0;
  padding: 0;
}

/* CHIP BASE (nur im Hero!) */
.hero-chips .chip{
  position:relative;
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 14px;
  border-radius:999px;

  /* Border/Background sind theme-kompatibel (Light/Dark via bestehende Variablen) */
  border: 1px solid color-mix(in srgb, var(--text-0) 10%, transparent);
  background: color-mix(in srgb, var(--bg-1) 72%, transparent);

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  box-shadow: 0 8px 22px rgba(2,6,23,.06);
  overflow:hidden;
  cursor:pointer;
  user-select:none;
  outline:none;

  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

/* Focus sichtbar + hochwertig */
.hero-chips .chip:focus-visible{
  box-shadow: 0 0 0 4px rgba(134,168,255,.25), 0 12px 32px rgba(2,6,23,.10);
}

/* GRADIENT BORDER (on hover/focus) */
.hero-chips .chip::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:999px;
  background: linear-gradient(90deg,
    rgba(86,224,195,0),
    rgba(86,224,195,.55),
    rgba(134,168,255,.55),
    rgba(245,167,255,.45),
    rgba(245,167,255,0)
  );
  opacity:0;
  transition: opacity .18s ease;
  pointer-events:none;
}
.hero-chips .chip > *{position:relative; z-index:1}

/* ICON + GLOW */
.hero-chips .iconBadge{
  width:34px;height:34px;
  border-radius:12px;
  display:grid;place-items:center;
  border: 1px solid color-mix(in srgb, var(--text-0) 8%, transparent);
  background:
    radial-gradient(14px 14px at 30% 30%, rgba(86,224,195,.75), transparent 60%),
    radial-gradient(14px 14px at 70% 70%, rgba(134,168,255,.55), transparent 60%),
    color-mix(in srgb, var(--bg-1) 60%, transparent);
  transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
  flex:0 0 auto;
}
.hero-chips .iconBadge svg{width:18px;height:18px;opacity:.85}

/* Badge-Variationen (statt inline styles) */
.hero-chips .iconBadge--alt1{
  background:
    radial-gradient(14px 14px at 30% 30%, rgba(134,168,255,.65), transparent 60%),
    radial-gradient(14px 14px at 70% 70%, rgba(245,167,255,.45), transparent 60%),
    color-mix(in srgb, var(--bg-1) 60%, transparent);
}
.hero-chips .iconBadge--alt2{
  background:
    radial-gradient(14px 14px at 30% 30%, rgba(86,224,195,.65), transparent 60%),
    radial-gradient(14px 14px at 70% 70%, rgba(134,168,255,.55), transparent 60%),
    color-mix(in srgb, var(--bg-1) 60%, transparent);
}

/* CONTENT */
.hero-chips .title{
  font-weight:700;
  color: var(--text-0);
  white-space:nowrap;
}

.hero-chips .tags{
  display:flex;
  gap:8px;
  margin-left:10px;
  opacity:0;
  transform: translateX(10px);
  transition: opacity .18s ease, transform .18s ease;
  flex-wrap:wrap;
}

.hero-chips .tag{
  font-size:12px;
  color: var(--text-2);
  padding:3px 9px;
  border-radius:999px;
  border: 1px solid color-mix(in srgb, var(--text-0) 10%, transparent);
  background: color-mix(in srgb, var(--bg-1) 60%, transparent);
  white-space:nowrap;
}

.hero-chips .hint{
  margin-left:auto;
  color: var(--text-2);
  font-size:12.5px;
  white-space:nowrap;
  opacity:.85;
  transition: opacity .18s ease, transform .18s ease;
}

/* HOVER STATE = Gradient Border + Icon Glow + Inline Tags */
.hero-chips .chip:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 40px rgba(2,6,23,.12);
  background: color-mix(in srgb, var(--bg-1) 86%, transparent);
}
.hero-chips .chip:hover::before{opacity:1}
.hero-chips .chip:hover .iconBadge{
  box-shadow: 0 0 0 6px rgba(86,224,195,.14);
  border-color: rgba(86,224,195,.55);
  transform: scale(1.03);
}
.hero-chips .chip:hover .tags{
  opacity:1;
  transform: translateX(0);
}
.hero-chips .chip:hover .hint{
  opacity:.55;
  transform: translateX(-4px);
}

/* Accessibility-Upgrade (matching Neu_1 Verhalten, aber auch mit Tastatur sichtbar):
   Beim Keyboard-Fokus zeigen wir die gleichen Effekte wie beim Hover. */
.hero-chips .chip:focus-visible::before{ opacity: 1; }
.hero-chips .chip:focus-visible .iconBadge{
  box-shadow: 0 0 0 6px rgba(86,224,195,.14);
  border-color: rgba(86,224,195,.55);
  transform: scale(1.03);
}
.hero-chips .chip:focus-visible .tags{
  opacity:1;
  transform: translateX(0);
}
.hero-chips .chip:focus-visible .hint{
  opacity:.55;
  transform: translateX(-4px);
}

/* Mobile: Titel darf umbrechen, damit nichts "quetscht" */
@media (max-width: 520px){
  .hero-chips .title{ white-space: normal; }
}

/* prefers-reduced-motion: dein globaler Block greift bereits,
   aber hier extra (falls du global mal änderst) */
@media (prefers-reduced-motion: reduce){
  .hero-chips .chip,
  .hero-chips .chip::before,
  .hero-chips .iconBadge,
  .hero-chips .tags,
  .hero-chips .hint{transition:none}
  .hero-chips .chip:hover{transform:none}
}

.hero-visual{
  border-radius: var(--radius-xl);
  border: 1px solid var(--border);
  background:
    radial-gradient(120% 120% at 10% 20%, color-mix(in srgb, var(--accent-0), transparent 84%), transparent 50%),
    radial-gradient(120% 120% at 90% 80%, color-mix(in srgb, var(--accent-1), transparent 84%), transparent 55%),
    color-mix(in srgb, var(--surface-2), transparent 0%);
  box-shadow: var(--shadow);
  aspect-ratio: 4 / 3.2;
  position: relative;
  overflow: hidden;
  min-height: 320px;
}
.hero-visual svg{
  position:absolute; inset: 0;
  width: 100%; height: 100%;
  opacity: .92;
}
/* =========
   Hero Globe (ersetzt Linien-Visual)
   ========= */
.hero-visual--globe svg{
  /* optional: Globe minimal klarer als das Linien-Visual */
  opacity: 0.98;
}

.hero-visual--globe .hero-globe{
  /* auch wenn wir per JS das SVG-transform-Attribut setzen:
     will-change ist trotzdem ein gutes Hint für smoothness */
  will-change: transform;
}

/* =========
   Services Cards (3D Tilt + Orbs, ruhig)
   ========= */
.cards{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1rem;
  perspective: 950px; /* subtiler 3D-Look ohne Mouse-Tracking */
}
.card{
  grid-column: span 6;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: var(--radius-xl);
  padding: 1.15rem 1.15rem 1.05rem;
  box-shadow: 0 12px 45px rgba(0,0,0,0.18);
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
  position: relative;
  overflow: hidden;
  transform-style: preserve-3d;
}
.card::before{
  content:"";
  position:absolute;
  inset: -2px;
  background:
    radial-gradient(210px 210px at 18% 20%, color-mix(in srgb, var(--accent-0), transparent 78%), transparent 62%),
    radial-gradient(210px 210px at 82% 78%, color-mix(in srgb, var(--accent-1), transparent 78%), transparent 62%);
  opacity: .26;
  pointer-events: none;
  transition: opacity .24s ease;
}
.card::after{
  content:"";
  position:absolute;
  inset: -60px;
  background:
    radial-gradient(240px 240px at 20% 35%, color-mix(in srgb, var(--accent-0), transparent 88%), transparent 60%),
    radial-gradient(260px 260px at 78% 68%, color-mix(in srgb, var(--accent-1), transparent 88%), transparent 62%);
  opacity: 0;
  pointer-events: none;
  filter: blur(10px);
  transition: opacity .24s ease;
}
.card:hover, .card:focus-within{
  transform: translateY(-4px) rotateX(1.2deg) rotateY(-1.2deg);
  border-color: color-mix(in srgb, var(--border), var(--accent-0) 16%);
  background: color-mix(in srgb, var(--surface-2), transparent 0%);
}
.card:hover::before, .card:focus-within::before{ opacity: .36; }
.card:hover::after, .card:focus-within::after{
  opacity: .55;
  animation: orbDrift 10s ease-in-out infinite;
}
@keyframes orbDrift{
  0%{ transform: translate3d(-8px, 6px, 0) scale(1); }
  50%{ transform: translate3d(10px, -8px, 0) scale(1.04); }
  100%{ transform: translate3d(-8px, 6px, 0) scale(1); }
}
.card > *{ position: relative; z-index: 1; }

.card-sub{ margin: .25rem 0 .85rem 0; color: var(--text-2); }

.card-list{
  margin: 0;
  padding-left: 1.1rem;
  color: var(--text-1);
}
.card-list li{ margin: .32rem 0; }

.card-actions{
  display:flex;
  align-items:center;
  gap: .75rem;
  margin-top: 1rem;
}

.cards--services .service-card--wide{ grid-column: span 12; }

.card-top{
  display:flex;
  gap: .85rem;
  align-items: flex-start;
}
/* =========
   Leistungen (Neu_1 Kacheln) - scoped: .services-grid / .svc-*
   ========= */

.services-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-top: 1.25rem;
}
@media (min-width: 900px){
  .services-grid{ grid-template-columns: 1fr 1fr; }
}

.svc-card{
  position: relative;
  display:flex;
  flex-direction:column;
  border-radius: var(--radius-xl);
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg-1), transparent 12%);
  box-shadow: 0 12px 45px rgba(0,0,0,0.18);
  padding: 1.15rem 1.15rem 1.05rem;
  overflow: hidden;
  cursor: pointer;

  transform-style: preserve-3d;
  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
html[data-theme="light"] .svc-card{
  box-shadow: 0 16px 55px rgba(0,0,0,0.10);
  background: color-mix(in srgb, var(--bg-1), transparent 0%);
}

.svc-card:focus-visible{
  outline: 2px solid color-mix(in srgb, var(--accent-0), var(--accent-1));
  outline-offset: 3px;
}

/* "Video"-Feeling: animierte Orbs + Sheen (nur auf Hover/Fokus) */
.svc-orbs{
  position:absolute;
  inset:-60px;
  opacity:0;
  transition: opacity .22s ease;
  pointer-events:none;
  filter: blur(10px);
}
.svc-orbs::before,
.svc-orbs::after{
  content:"";
  position:absolute;
  width: 340px;
  height: 340px;
  border-radius: 999px;
  opacity: .55;
  filter: blur(34px);
  will-change: transform;
}
.svc-orbs::before{
  left:-140px; top:-170px;
  background: color-mix(in srgb, var(--accent-0), transparent 55%);
}
.svc-orbs::after{
  right:-160px; bottom:-190px;
  background: color-mix(in srgb, var(--accent-1), transparent 62%);
}

.svc-sheen{
  position:absolute;
  inset:0;
  opacity:0;
  transition: opacity .22s ease;
  pointer-events:none;
  background: radial-gradient(520px 240px at 28% 20%, rgba(255,255,255,.22), rgba(255,255,255,0) 62%);
}

.svc-top{
  display:flex;
  align-items:flex-start;
  gap: .85rem;
  margin-bottom: .65rem;
  transform: translateZ(10px);
}

.svc-badge{
  width: 44px; height: 44px;
  border-radius: 14px;
  display:grid; place-items:center;
  border: 1px solid color-mix(in srgb, var(--border), transparent 20%);
  background:
    radial-gradient(16px 16px at 30% 30%, color-mix(in srgb, var(--accent-0), transparent 10%), transparent 60%),
    radial-gradient(16px 16px at 70% 70%, color-mix(in srgb, var(--accent-1), transparent 18%), transparent 60%),
    var(--surface);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  flex: 0 0 auto;
}
.svc-badge .icon{ width: 20px; height: 20px; opacity: .9; }

.svc-badge--b{
  background:
    radial-gradient(16px 16px at 30% 30%, color-mix(in srgb, var(--accent-1), transparent 10%), transparent 60%),
    radial-gradient(16px 16px at 70% 70%, rgba(245,167,255,.28), transparent 60%),
    var(--surface);
}
.svc-badge--c{
  background:
    radial-gradient(16px 16px at 30% 30%, rgba(245,167,255,.26), transparent 60%),
    radial-gradient(16px 16px at 70% 70%, color-mix(in srgb, var(--accent-0), transparent 18%), transparent 60%),
    var(--surface);
}
.svc-badge--d{
  background:
    radial-gradient(16px 16px at 30% 30%, color-mix(in srgb, var(--accent-1), transparent 18%), transparent 60%),
    radial-gradient(16px 16px at 70% 70%, rgba(245,167,255,.22), transparent 60%),
    var(--surface);
}
.svc-badge--e{ /* tools */
  background:
    radial-gradient(16px 16px at 30% 30%, color-mix(in srgb, var(--accent-0), transparent 18%), transparent 60%),
    radial-gradient(16px 16px at 70% 70%, color-mix(in srgb, var(--accent-1), transparent 18%), transparent 60%),
    var(--surface);
}
.svc-badge--f{ /* web */
  background:
    radial-gradient(16px 16px at 30% 30%, color-mix(in srgb, var(--accent-1), transparent 16%), transparent 60%),
    radial-gradient(16px 16px at 70% 70%, rgba(245,167,255,.24), transparent 60%),
    var(--surface);
}

.svc-title{
  margin: 0 0 .35rem 0;
  letter-spacing: -0.01em;
}
.svc-lead{
  margin: 0;
  color: var(--text-0);
  opacity: .82;
  font-weight: 650;
  line-height: 1.35;
}

.svc-desc{
  margin: .55rem 0 .75rem;
  color: var(--text-1);
  transform: translateZ(8px);
}

.svc-list{
  margin: 0;
  padding-left: 1.05rem;
  color: var(--text-0);
  opacity: .90;
  line-height: 1.55;
  transform: translateZ(8px);
}
.svc-list li{ margin: .25rem 0; }

.svc-goal{
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid color-mix(in srgb, var(--border), transparent 10%);
  color: var(--text-0);
  opacity: .86;
  font-weight: 650;
  line-height: 1.35;
  transform: translateZ(8px);
}
.svc-goal span{
  color: var(--text-2);
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: .75rem;
  margin-right: .45rem;
}

/* Hover / Focus = subtiler 3D Tilt + Orbs "alive" */
.svc-card:hover,
.svc-card:focus-within{
  transform: translateY(-6px) rotateX(1.6deg) rotateY(-1.6deg);
  border-color: color-mix(in srgb, var(--border), var(--accent-0) 22%);
  background: color-mix(in srgb, var(--surface-2), transparent 0%);
  box-shadow: 0 18px 68px rgba(0,0,0,0.28);
}
.svc-card:hover .svc-orbs,
.svc-card:focus-within .svc-orbs{ opacity: 1; }
.svc-card:hover .svc-sheen,
.svc-card:focus-within .svc-sheen{ opacity: 1; }

.svc-card:hover .svc-orbs::before,
.svc-card:focus-within .svc-orbs::before{ animation: svcFloat1 2.8s ease-in-out infinite; }
.svc-card:hover .svc-orbs::after,
.svc-card:focus-within .svc-orbs::after{ animation: svcFloat2 3.1s ease-in-out infinite; }

.svc-card:hover .svc-badge,
.svc-card:focus-within .svc-badge{
  box-shadow: 0 0 0 9px color-mix(in srgb, var(--accent-0), transparent 86%);
  border-color: color-mix(in srgb, var(--accent-0), transparent 40%);
  transform: scale(1.04);
}

@keyframes svcFloat1{
  0%,100%{ transform: translate(0,0); }
  50%{ transform: translate(18px, 12px); }
}
@keyframes svcFloat2{
  0%,100%{ transform: translate(0,0); }
  50%{ transform: translate(-16px, -10px); }
}

@media (prefers-reduced-motion: reduce){
  .svc-card,
  .svc-orbs,
  .svc-sheen,
  .svc-badge{ transition:none !important; }
  .svc-card:hover{ transform:none; }
  .svc-card:hover .svc-orbs::before,
  .svc-card:hover .svc-orbs::after{ animation:none; }
}
.icon-badge{
  width: 44px; height: 44px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background:
    radial-gradient(90% 90% at 20% 20%, color-mix(in srgb, var(--accent-0), transparent 60%), transparent 55%),
    radial-gradient(90% 90% at 80% 80%, color-mix(in srgb, var(--accent-1), transparent 60%), transparent 55%),
    var(--surface);
  display:grid; place-items:center;
  flex: 0 0 auto;
  box-shadow: 0 12px 40px rgba(0,0,0,0.22);
}
.icon{
  width: 20px; height: 20px;
  color: var(--text-0);
}

/* Chips */
.chip{
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface), transparent 5%);
  color: var(--text-0);
  border-radius: 999px;
  padding: .5rem .75rem;
  cursor: pointer;
  font-weight: 600;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.chip:hover{
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--border), var(--accent-1) 20%);
  background: color-mix(in srgb, var(--surface-2), transparent 0%);
}

/* =========
   Methodik Pills (Hover darf "aus dem Feld heraus")
   ========= */
.method-panel{
  border: 1px solid var(--border);
  background:
    radial-gradient(140% 140% at 10% 10%, color-mix(in srgb, var(--accent-0), transparent 88%), transparent 55%),
    radial-gradient(140% 140% at 90% 90%, color-mix(in srgb, var(--accent-1), transparent 90%), transparent 60%),
    var(--surface);
  border-radius: var(--radius-xl);
  padding: 1.15rem;
}
.pills{
  display:flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-top: .85rem;
  overflow: visible;
}
.framework-pill{
  position: relative;
  display:inline-flex;
  align-items:center;
  gap: .5rem;
  padding: .55rem .72rem;
  border-radius: 999px;
  border: 1px solid transparent;
  background:
    linear-gradient(var(--bg-1), var(--bg-1)) padding-box,
    linear-gradient(90deg,
      color-mix(in srgb, var(--accent-0), transparent 30%),
      color-mix(in srgb, var(--accent-1), transparent 30%)) border-box;
  color: var(--text-1);
  font-weight: 650;
  letter-spacing: -0.01em;
  transition: transform .18s ease, color .18s ease, filter .18s ease;
}
.framework-pill::after{
  content:"";
  position:absolute;
  inset: -10px;
  border-radius: 999px;
  background:
    radial-gradient(120px 120px at 30% 40%, color-mix(in srgb, var(--accent-0), transparent 78%), transparent 60%),
    radial-gradient(140px 140px at 70% 60%, color-mix(in srgb, var(--accent-1), transparent 80%), transparent 62%);
  opacity: 0;
  filter: blur(10px);
  transition: opacity .18s ease;
  pointer-events:none;
}
.framework-pill:hover{
  transform: translateY(-2px);
  color: var(--text-0);
  filter: saturate(1.05);
}
.framework-pill:hover::after{ opacity: .65; }
.method-note{ margin-top: 1rem; color: var(--text-2); }
/* =========
   Methodik (Neu_1 Pills + FX) - scoped
   ========= */
.method-panel--fx{
  overflow: visible;
}

.m-pills{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  margin-top: .85rem;
  overflow: visible; /* FX darf raus */
}

.m-pill{
  position: relative;
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 999px;
  cursor: default;
  user-select:none;
  border: 1px solid transparent;

  /* Gradient Border wie Neu_1 / premium */
  background:
    linear-gradient(var(--bg-1), var(--bg-1)) padding-box,
    linear-gradient(90deg,
      color-mix(in srgb, var(--accent-0), transparent 30%),
      color-mix(in srgb, var(--accent-1), transparent 30%)) border-box;

  box-shadow: 0 10px 28px rgba(0,0,0,0.12);
  color: var(--text-1);
  font-weight: 650;
  letter-spacing: -.01em;

  transform-origin: center;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease, background .18s ease;
  isolation: isolate;
  overflow: visible;
}

.m-pill:focus-visible{
  outline: none;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-1), transparent 75%), 0 16px 36px rgba(0,0,0,0.14);
  transform: translateY(-1px) scale(1.02);
}

.m-pill:hover{
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 18px 44px rgba(0,0,0,0.18);
  filter: saturate(1.05);
}

.m-ico{
  width: 30px;
  height: 30px;
  border-radius: 12px;
  display:grid;
  place-items:center;
  border: 1px solid color-mix(in srgb, var(--text-0), transparent 88%);
  background:
    radial-gradient(14px 14px at 30% 30%, color-mix(in srgb, var(--accent-0), transparent 20%), transparent 60%),
    radial-gradient(16px 16px at 70% 70%, color-mix(in srgb, var(--accent-1), transparent 20%), transparent 60%),
    color-mix(in srgb, var(--surface), transparent 0%);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.m-pill:hover .m-ico{
  transform: scale(1.03);
  border-color: color-mix(in srgb, var(--accent-0), transparent 55%);
  box-shadow: 0 0 0 7px color-mix(in srgb, var(--accent-0), transparent 86%);
}

.m-label{
  white-space: nowrap;
  font-size: 13px;
}

@media (max-width: 520px){
  .m-label{ white-space: normal; }
}

/* subtle glow behind pill */
.m-glow{
  position:absolute;
  inset:-14px;
  border-radius: 999px;
  background:
    radial-gradient(120px 120px at 25% 45%, color-mix(in srgb, var(--accent-0), transparent 78%), transparent 62%),
    radial-gradient(140px 140px at 75% 55%, color-mix(in srgb, var(--accent-1), transparent 80%), transparent 65%);
  opacity: 0;
  filter: blur(12px);
  transition: opacity .14s ease;
  pointer-events:none;
  z-index: 0;
}
.m-pill > *{ position: relative; z-index: 1; }
.m-pill:hover .m-glow{ opacity: .85; }

/* =========
   FX LAYER (Neu_1-style, out-of-box)
   ========= */
.m-fx{
  position:absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  pointer-events:none;
  opacity: 0;
  transition: opacity .12s ease;
  filter: drop-shadow(0 12px 28px rgba(0,0,0,0.22));
  z-index: 5;
}
.m-pill:hover .m-fx{ opacity: 1; }

/* ===== Scrum: Ring + Runner ===== */
.m-fx--scrum{
  width: 160px;
  height: 160px;
}
.scrum-arc{
  position:absolute;
  inset:0;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--text-0), transparent 35%);
  border-top-color: transparent;
  transform: rotate(-22deg);
  transition: transform .22s ease, border-top-color .18s ease;
}
.scrum-runner{
  position:absolute;
  left:50%;
  top:50%;
  width:10px;
  height:10px;
  border-radius:50%;
  border: 1px solid color-mix(in srgb, var(--text-0), transparent 72%);
  background: color-mix(in srgb, var(--accent-0), transparent 15%);
  opacity: 0;
}
.m-pill:hover .scrum-arc{
  border-top-color: color-mix(in srgb, var(--text-0), transparent 20%);
  transform: rotate(0deg);
}
.m-pill:hover .scrum-runner{
  opacity: 1;
  animation: scrumRun 1.05s ease-in-out infinite;
}
@keyframes scrumRun{
  0%   { transform: translate(-50%,-50%) rotate(0deg) translateX(78px); }
  100% { transform: translate(-50%,-50%) rotate(360deg) translateX(78px); }
}

/* ===== Hybrid: Linie + Punkte -> rotierender Kreis ===== */
.m-fx--hybrid{
  width: 280px;
  height: 120px;
}
.hy-line{
  position:absolute;
  left: 18px;
  right: 84px;
  top: 50%;
  height: 2px;
  transform: translateY(-50%);
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--accent-0), transparent 20%),
    color-mix(in srgb, var(--accent-1), transparent 20%));
  opacity: .9;
}
.hy-dots{
  position:absolute;
  left: 110px;
  top: 50%;
  transform: translateY(-50%);
  display:flex;
  gap: 7px;
}
.hy-dots span{
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text-0), transparent 35%);
  opacity: .55;
}
.m-pill:hover .hy-dots span{
  animation: hyDot 1.1s ease-in-out infinite;
}
.m-pill:hover .hy-dots span:nth-child(2){ animation-delay: .08s; }
.m-pill:hover .hy-dots span:nth-child(3){ animation-delay: .16s; }
.m-pill:hover .hy-dots span:nth-child(4){ animation-delay: .24s; }
.m-pill:hover .hy-dots span:nth-child(5){ animation-delay: .32s; }

@keyframes hyDot{
  0%,100%{ transform: translateY(0); opacity: .55; }
  50%{ transform: translateY(-4px); opacity: .95; }
}

.hy-orbit{
  position:absolute;
  right: 18px;
  top: 50%;
  width: 64px;
  height: 64px;
  transform: translateY(-50%);
}
.hy-ring{
  position:absolute;
  inset:0;
  border-radius:50%;
  border: 2px solid color-mix(in srgb, var(--text-0), transparent 40%);
  background:
    radial-gradient(28px 28px at 30% 30%, color-mix(in srgb, var(--accent-0), transparent 78%), transparent 60%),
    radial-gradient(32px 32px at 70% 70%, color-mix(in srgb, var(--accent-1), transparent 78%), transparent 62%);
  opacity: .95;
}
.hy-dot{
  position:absolute;
  left:50%;
  top:50%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent-1), transparent 10%);
  border: 1px solid color-mix(in srgb, var(--text-0), transparent 72%);
  opacity: 0;
}
.m-pill:hover .hy-dot{
  opacity: 1;
  animation: hyOrbit 1.25s linear infinite;
}
@keyframes hyOrbit{
  0%{ transform: translate(-50%,-50%) rotate(0deg) translateX(30px); }
  100%{ transform: translate(-50%,-50%) rotate(360deg) translateX(30px); }
}

/* ===== Kanban: 3 Spalten "shimmer slide" ===== */
.m-fx--kanban{
  width: 180px;
  height: 70px;
  display:flex;
  gap: 10px;
  align-items:center;
  justify-content:center;
}
.kb-col{
  width: 20px;
  height: 54px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--text-0), transparent 78%);
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--accent-0), transparent 78%),
      color-mix(in srgb, var(--accent-1), transparent 82%));
  opacity: .9;
}
.m-pill:hover .kb-col{
  animation: kbPulse 1.1s ease-in-out infinite;
}
.m-pill:hover .kb-col:nth-child(2){ animation-delay: .1s; }
.m-pill:hover .kb-col:nth-child(3){ animation-delay: .2s; }
@keyframes kbPulse{
  0%,100%{ transform: translateY(0); opacity: .75; }
  50%{ transform: translateY(-6px); opacity: 1; }
}

/* ===== SAFe: Nodes + Link "flow" ===== */
.m-fx--safe{
  width: 170px;
  height: 90px;
}
.sf-node{
  position:absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent-0), transparent 15%);
  border: 1px solid color-mix(in srgb, var(--text-0), transparent 72%);
}
.sf-node:nth-child(1){ left: 18px; top: 40px; }
.sf-node:nth-child(2){ left: 78px; top: 20px; }
.sf-node:nth-child(3){ left: 138px; top: 48px; }

.sf-link{
  position:absolute;
  left: 26px;
  top: 44px;
  width: 118px;
  height: 2px;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--accent-0), transparent 15%),
    color-mix(in srgb, var(--accent-1), transparent 15%));
  transform-origin: left center;
  opacity: .9;
}
.m-pill:hover .sf-link{
  animation: sfFlow 1.2s ease-in-out infinite;
}
@keyframes sfFlow{
  0%,100%{ transform: scaleX(.92); opacity: .7; }
  50%{ transform: scaleX(1.06); opacity: 1; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .m-pill, .m-ico, .m-glow, .m-fx{ transition:none !important; }
  .m-pill:hover{ transform:none; }
  .m-pill:hover .scrum-runner,
  .m-pill:hover .hy-dot,
  .m-pill:hover .hy-dots span,
  .m-pill:hover .kb-col,
  .m-pill:hover .sf-link{ animation:none !important; }
}
/* =========================================================
   Neu_1 - Methodik Pills (EXAKTER Look & Hover-FX, scoped)
   ========================================================= */
.method-panel--neu1{
  /* dein bestehendes method-panel kann bleiben - wir "übernehmen" innen die Neu_1 Card */
  background: transparent;
  border: 0;
  padding: 0;
}

.method-panel--neu1 h3{
  /* bleibt wie bei dir - falls du Neu_1-Look exakt willst, kannst du das hier anpassen */
  margin-bottom: .85rem;
}

.method-panel--neu1 .neu1-card{
  --page-bg:#f6f7fb;
  --text:#101828;
  --muted:#667085;

  --card-border: rgba(16,24,40,.10);
  --card-bg-top: rgba(200, 232, 230, .55);
  --card-bg-mid: rgba(200, 232, 230, .20);
  --card-bg-bot: rgba(232, 236, 255, .55);

  --pill-bg:#e9ecef;
  --pill-border: rgba(16,24,40,.14);
  --pill-text: rgba(16,24,40,.84);

  --shadow: 0 14px 40px rgba(16,24,40,.10);
  --shadow-2: 0 18px 50px rgba(16,24,40,.14);
  --r: 16px;

  --fx-ink: rgba(16,24,40,.20);
  --fx-fill: rgba(255,255,255,.86);
  --fx-shadow: 0 22px 65px rgba(16,24,40,.18);

  border: 1px solid var(--card-border);
  border-radius: var(--r);
  background: linear-gradient(180deg, var(--card-bg-top) 0%, var(--card-bg-mid) 42%, var(--card-bg-bot) 100%);
  box-shadow: var(--shadow);
  padding: 18px 18px 14px;
  position: relative;
  overflow: visible;
}

.method-panel--neu1 .neu1-pills{
  display:flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  overflow: visible;
}

.method-panel--neu1 .pill{
  position: relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 999px;
  background: var(--pill-bg);
  border: 1px solid var(--pill-border);
  color: var(--pill-text);
  font-weight: 650;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  user-select: none;

  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
  overflow: visible; /* wichtig: Hover-FX darf raus */
}

.method-panel--neu1 .pill:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
  filter: saturate(1.02);
}

/* Hover-Pop container (kommt "aus dem Feld heraus") */
.method-panel--neu1 .fx{
  position:absolute;
  left: 50%;
  top: calc(100% + 10px);
  transform: translateX(-50%) translateY(10px) scale(.98);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
  filter: drop-shadow(var(--fx-shadow));
}

.method-panel--neu1 .pill:hover .fx{
  opacity: 1;
  transform: translateX(-50%) translateY(0) scale(1);
}

/* Grundform "Pop" */
.method-panel--neu1 .pop{
  border-radius: 18px;
}

/* ========== Scrum FX ========== */
.method-panel--neu1 .fx.scrum{ width: 210px; height: 110px; }
.method-panel--neu1 .fx.scrum .arc{
  position:absolute; inset: 10px;
  border-radius: 999px;
  border: 2px solid var(--fx-ink);
  border-top-color: transparent;
  transform: rotate(-25deg);
  background: radial-gradient(circle at 35% 35%, rgba(16,24,40,.06), transparent 60%);
}
.method-panel--neu1 .fx.scrum .runner{
  position:absolute;
  width: 10px; height: 10px;
  border-radius: 50%;
  border: 1px solid rgba(16,24,40,.22);
  background: rgba(255,255,255,.88);
  left: 50%; top: 50%;
  transform: translate(-50%,-50%) translateX(70px);
  opacity: 0;
}
.method-panel--neu1 .pill:hover .fx.scrum .runner{
  opacity: 1;
  animation: scrumRun 1.2s ease-in-out infinite;
}
@keyframes scrumRun{
  0%{ transform: translate(-50%,-50%) rotate(0deg) translateX(70px); }
  100%{ transform: translate(-50%,-50%) rotate(360deg) translateX(70px); }
}

/* ========== Hybrid FX (dein Wunsch: Linie + Punkte -> Kreis) ========== */
.method-panel--neu1 .fx.hybrid{ width: 300px; height: 110px; }
.method-panel--neu1 .fx.hybrid .block{
  position:absolute; inset:0;
  border-radius: 18px;
  border: 1px solid rgba(16,24,40,.10);
  background: rgba(255,255,255,.55);
  backdrop-filter: blur(6px);
  overflow:hidden;
}
.method-panel--neu1 .fx.hybrid .line{
  position:absolute;
  left: 18px;
  right: 98px;
  top: 55px;
  height: 2px;
  background: rgba(16,24,40,.18);
  transform-origin:left;
  transform: scaleX(0);
}
.method-panel--neu1 .fx.hybrid .dots{
  position:absolute;
  left: 26px;
  top: 49px;
  display:flex;
  gap: 18px;
  opacity: 0;
}
.method-panel--neu1 .fx.hybrid .dot{
  width: 9px; height: 9px;
  border-radius: 50%;
  border: 1px solid rgba(16,24,40,.20);
  background: rgba(255,255,255,.86);
}
.method-panel--neu1 .fx.hybrid .loop{
  position:absolute;
  right: 18px;
  top: 55px;
  width: 64px; height: 64px;
  border-radius: 50%;
  border: 2px solid rgba(16,24,40,.16);
  border-top-color: transparent;
  transform: translateY(-50%) rotate(-18deg);
  opacity: .92;
}
.method-panel--neu1 .fx.hybrid .runner{
  position:absolute;
  right: 18px;
  top: 55px;
  width: 9px; height: 9px;
  border-radius: 50%;
  border: 1px solid rgba(16,24,40,.22);
  background: rgba(255,255,255,.88);
  transform: translate(-32px, -50%);
  opacity: 0;
}
.method-panel--neu1 .pill:hover .fx.hybrid .line{ animation: drawLine .55s ease forwards; }
.method-panel--neu1 .pill:hover .fx.hybrid .dots{ opacity: 1; animation: fadeIn .22s ease forwards .08s; }
.method-panel--neu1 .pill:hover .fx.hybrid .loop{ border-top-color: rgba(16,24,40,.16); animation: loopSpin 1.2s ease-in-out infinite; }
.method-panel--neu1 .pill:hover .fx.hybrid .runner{ opacity: 1; animation: loopRun 1.2s ease-in-out infinite; }

@keyframes drawLine{ to{ transform: scaleX(1);} }
@keyframes fadeIn{ to{ opacity:1;} }
@keyframes loopSpin{
  0%{ transform: translateY(-50%) rotate(0deg); }
  50%{ transform: translateY(-50%) rotate(140deg); }
  100%{ transform: translateY(-50%) rotate(280deg); }
}
@keyframes loopRun{
  0%{ transform: translate(-32px,-50%) rotate(0deg) translateX(32px); }
  100%{ transform: translate(-32px,-50%) rotate(360deg) translateX(32px); }
}

/* ========== Website HTML FX ========== */
.method-panel--neu1 .fx.webhtml{ width: 270px; height: 140px; }
.method-panel--neu1 .fx.webhtml .editor{
  position:absolute; inset:0;
  border-radius: 18px;
  border: 1px solid rgba(16,24,40,.10);
  background: rgba(255,255,255,.55);
  backdrop-filter: blur(6px);
  overflow:hidden;
}
.method-panel--neu1 .fx.webhtml .topbar{
  position:absolute; left:0; right:0; top:0;
  height: 26px;
  border-bottom: 1px solid rgba(16,24,40,.08);
  background: rgba(255,255,255,.45);
}
.method-panel--neu1 .fx.webhtml .dot{
  position:absolute; top: 8px;
  width: 8px; height: 8px; border-radius: 50%;
  border: 1px solid rgba(16,24,40,.14);
  background: rgba(255,255,255,.75);
  opacity:.9;
}
.method-panel--neu1 .fx.webhtml .dot.d1{ left: 12px; }
.method-panel--neu1 .fx.webhtml .dot.d2{ left: 24px; }
.method-panel--neu1 .fx.webhtml .dot.d3{ left: 36px; }

.method-panel--neu1 .fx.webhtml .lines{
  position:absolute; left: 14px; right: 14px;
  top: 40px; bottom: 38px;
  display:flex; flex-direction:column; gap: 8px;
}
.method-panel--neu1 .fx.webhtml .line{
  height: 8px;
  border-radius: 8px;
  background: rgba(16,24,40,.10);
  transform-origin: left;
  transform: scaleX(.25);
  opacity: .85;
  position:relative;
  overflow:hidden;
}
.method-panel--neu1 .fx.webhtml .line::after{
  content:"";
  position:absolute; top:0; bottom:0; left:-40%;
  width: 40%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.65), transparent);
  opacity:.55;
}

.method-panel--neu1 .fx.webhtml .cursor{
  position:absolute;
  width: 10px; height: 10px;
  border-radius: 3px;
  border: 1px solid rgba(16,24,40,.18);
  background: rgba(255,255,255,.9);
  left: 18px; top: 44px;
  opacity:.0;
}

.method-panel--neu1 .fx.webhtml .compile{
  position:absolute;
  left: 14px; right: 14px;
  bottom: 10px;
  height: 16px;
  border-radius: 999px;
  border: 1px solid rgba(16,24,40,.10);
  background: rgba(255,255,255,.55);
  overflow:hidden;
  opacity: 0;
  transform: translateY(6px);
}
.method-panel--neu1 .fx.webhtml .bar{
  position:absolute; left:0; top:0; bottom:0;
  width: 0%;
  background: rgba(16,24,40,.12);
}
.method-panel--neu1 .fx.webhtml .pulse{
  position:absolute; top:0; bottom:0; left:-30%;
  width: 30%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.7), transparent);
}

.method-panel--neu1 .pill:hover .fx.webhtml .line{
  animation: typeLine 1.25s ease-in-out infinite;
}
.method-panel--neu1 .pill:hover .fx.webhtml .line::after{
  animation: sheen 1.25s ease-in-out infinite;
}
.method-panel--neu1 .pill:hover .fx.webhtml .cursor{
  opacity: 1;
  animation: cursorMove 1.25s ease-in-out infinite;
}
.method-panel--neu1 .pill:hover .fx.webhtml .compile{
  opacity: 1;
  transform: translateY(0);
  animation: compileFade 1.25s ease-in-out infinite;
}
.method-panel--neu1 .pill:hover .fx.webhtml .bar{ animation: compileBar 1.25s ease-in-out infinite; }
.method-panel--neu1 .pill:hover .fx.webhtml .pulse{ animation: compilePulse 1.25s ease-in-out infinite; }

@keyframes typeLine{
  0%   { transform: scaleX(.18); opacity:.55; }
  28%  { transform: scaleX(1.0); opacity:.95; }
  72%  { transform: scaleX(1.0); opacity:.95; }
  100% { transform: scaleX(.18); opacity:.55; }
}
@keyframes sheen{ 0%{ left:-40%; } 35%{ left:110%; } 100%{ left:110%; } }
@keyframes cursorMove{
  0%   { transform: translate(0,0); }
  25%  { transform: translate(120px, 0); }
  50%  { transform: translate(40px, 26px); }
  75%  { transform: translate(170px, 52px); }
  100% { transform: translate(0,0); }
}
@keyframes compileFade{
  0%{ opacity:0; transform: translateY(6px); }
  22%{ opacity:1; transform: translateY(0); }
  78%{ opacity:1; transform: translateY(0); }
  100%{ opacity:0; transform: translateY(6px); }
}
@keyframes compileBar{
  0%{ width: 0%; }
  30%{ width: 72%; }
  65%{ width: 100%; }
  100%{ width: 0%; }
}
@keyframes compilePulse{ 0%{ left:-30%; } 35%{ left:110%; } 100%{ left:110%; } }

/* ========== ITIL FX ========== */
.method-panel--neu1 .fx.itil{ width: 150px; height: 150px; }
.method-panel--neu1 .fx.itil .ring,
.method-panel--neu1 .fx.itil .seg{ position:absolute; inset:0; border-radius:50%; }
.method-panel--neu1 .fx.itil .ring{
  border:2px solid var(--fx-ink);
  background: radial-gradient(circle at 50% 35%, rgba(16,24,40,.06), transparent 60%);
}
.method-panel--neu1 .fx.itil .seg{
  background: conic-gradient(
    transparent 0 12%,
    rgba(16,24,40,.22) 12% 15%,
    transparent 15% 30%,
    rgba(16,24,40,.22) 30% 33%,
    transparent 33% 50%,
    rgba(16,24,40,.22) 50% 53%,
    transparent 53% 70%,
    rgba(16,24,40,.22) 70% 73%,
    transparent 73% 100%
  );
  opacity:.92;
}
.method-panel--neu1 .pill:hover .fx.itil .seg{ animation: spin180 1.0s ease-in-out infinite; }
@keyframes spin180{ 0%{transform:rotate(0)} 100%{transform:rotate(180deg)} }

/* ========== Kanban FX ========== */
.method-panel--neu1 .fx.kanban{ width: 220px; height: 140px; }
.method-panel--neu1 .fx.kanban .board{
  position:absolute; inset:0;
  border-radius: 18px;
  border: 1px solid rgba(16,24,40,.10);
  background: rgba(255,255,255,.55);
  backdrop-filter: blur(6px);
  display:flex;
  gap: 10px;
  padding: 14px;
}
.method-panel--neu1 .fx.kanban .col{
  flex:1;
  border-radius: 12px;
  border: 1px solid rgba(16,24,40,.10);
  background: rgba(16,24,40,.05);
}
.method-panel--neu1 .fx.kanban .cardlet{
  position:absolute;
  left: 24px; top: 28px;
  width: 54px; height: 36px;
  border-radius: 10px;
  border: 1px solid rgba(16,24,40,.14);
  background: rgba(255,255,255,.82);
  opacity: 0;
}
.method-panel--neu1 .pill:hover .fx.kanban .cardlet{
  opacity: 1;
  animation: kanbanMove 1.1s ease-in-out infinite;
}
@keyframes kanbanMove{
  0%{ transform: translate(0,0); }
  33%{ transform: translate(70px, 0); }
  66%{ transform: translate(140px, 0); }
  100%{ transform: translate(0,0); }
}

/* ========== PRINCE2 FX ========== */
.method-panel--neu1 .fx.prince2{ width: 240px; height: 90px; }
.method-panel--neu1 .fx.prince2 .rail{
  position:absolute; left:12px; right:12px; top:50%;
  height:2px; background: rgba(16,24,40,.18);
  transform: translateY(-50%) scaleX(0);
  transform-origin:left;
}
.method-panel--neu1 .fx.prince2 .gate{
  position:absolute; top:50%;
  width:16px; height:16px; border-radius:50%;
  border:1px solid rgba(16,24,40,.22);
  background: rgba(255,255,255,.85);
  transform: translate(-50%,-50%) scale(.8);
  opacity:0;
}
.method-panel--neu1 .pill:hover .fx.prince2 .rail{ animation: draw .55s ease forwards; }
.method-panel--neu1 .pill:hover .fx.prince2 .gate{ animation: gateIn .35s ease forwards; }
.method-panel--neu1 .pill:hover .fx.prince2 .gate:nth-child(2){ animation-delay:.18s }
.method-panel--neu1 .pill:hover .fx.prince2 .gate:nth-child(3){ animation-delay:.28s }
.method-panel--neu1 .pill:hover .fx.prince2 .gate:nth-child(4){ animation-delay:.38s }
.method-panel--neu1 .pill:hover .fx.prince2 .gate:nth-child(5){ animation-delay:.48s }
@keyframes draw{ to{ transform: translateY(-50%) scaleX(1);} }
@keyframes gateIn{ to{ opacity:1; transform: translate(-50%,-50%) scale(1);} }

/* Note unter den Pills (Neu_1 like) */
.method-panel--neu1 .neu1-note{
  margin: 14px 0 0;
  font-size: 14.5px;
  color: rgba(16,24,40,.70);
  text-align:center;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .method-panel--neu1 *{ animation:none !important; transition:none !important; }
}

/* =========
   Warum wir - Circle Story (Neu_1 Effekt, scoped, Dark-Mode kompatibel)
   ========= */

section.whyCircle{
  padding: 0; /* wir steuern Abstand im Story-Container, damit die Story-Höhe sauber bleibt */
}

.whyCircleStory{
  position: relative;
  height: 260vh;
  padding: clamp(64px, 8vw, 120px) 0;
}

/* Sticky / pinned Layer */
.whyCirclePin{
  position: sticky;
  top: 96px;
  height: calc(100vh - 96px);
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 16px;
  align-items: start;
  justify-items: center;
  overflow: visible;
}

/* Glow liegt im pinned Layer -> bleibt beim Scrollen stabil */
.whyCircleGlow{
  position: absolute;
  inset: -140px;
  background:
    radial-gradient(900px 420px at 25% 10%,
      color-mix(in srgb, var(--accent-0), transparent 70%),
      transparent 60%),
    radial-gradient(820px 380px at 80% 20%,
      color-mix(in srgb, var(--accent-1), transparent 74%),
      transparent 55%);
  opacity: 0;
  transition: opacity .65s ease;
  pointer-events: none;
  z-index: 0;
}

.whyCircleStory.is-in .whyCircleGlow{ opacity: .55; }
.whyCircleStory.show-circle .whyCircleGlow{ opacity: .70; }
.whyCircleStory.is-locked .whyCircleGlow{ opacity: .70 !important; }

/* Headline */
.whyCircleHeadline{
  width: min(920px, 92vw);
  padding: 0 18px;
  z-index: 2;

  opacity: 0;
  transform: translateX(-40px);
  filter: blur(12px);
  transition: opacity .65s ease, transform .65s ease, filter .65s ease;
  text-align: center;
}
.whyCircleHeadline .eyebrow{
  justify-content: center;
}
.whyCircleStory.is-in .whyCircleHeadline{
  opacity: 1;
  transform: translateX(0);
  filter: blur(0);
}
.whyCircleStory.is-locked .whyCircleHeadline{
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}

/* Stage */
.whyCircleStage{
  position: relative;
  width: min(560px, 92vw);
  height: min(560px, 92vw);
  display: grid;
  place-items: center;
  z-index: 2;

  opacity: 0;
  transform: translateY(18px) scale(.99);
  filter: blur(12px);
  transition: opacity .65s ease, transform .65s ease, filter .65s ease;
  will-change: transform, opacity;
}
.whyCircleStory.show-circle .whyCircleStage{
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}
.whyCircleStory.is-locked .whyCircleStage{
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}

/* Ring SVG */
.whyCircleRing{
  position: absolute;
  inset: 12%;
  width: auto;
  height: auto;
  border-radius: 999px;
  filter: drop-shadow(0 14px 45px rgba(0,0,0,.18));
}
html[data-theme="light"] .whyCircleRing{
  filter: drop-shadow(0 14px 45px rgba(16,24,40,.10));
}

.whyCircleRingBg{
  fill: none;
  stroke: color-mix(in srgb, var(--border), transparent 10%);
  stroke-width: 7;
}

.whyCircleRingProg{
  fill: none;
  stroke: url(#whyCircleGrad);
  stroke-width: 7;
  stroke-linecap: round;

  /* wird in JS exakt gesetzt; fallback ist ok */
  stroke-dasharray: 260;
  stroke-dashoffset: 260;
  transition: stroke-dashoffset .22s ease;
}

/* Center label */
.whyCircleCenter{
  position: absolute;
  width: 40%;
  height: 40%;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--border), transparent 10%);
  background: color-mix(in srgb, var(--bg-1), transparent 12%);
  box-shadow: 0 16px 50px rgba(0,0,0,.18);
  display: grid;
  place-items: center;
  text-align: center;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
html[data-theme="light"] .whyCircleCenter{
  box-shadow: 0 16px 50px rgba(16,24,40,.10);
}

.whyCircleStep{
  font-weight: 850;
  letter-spacing: -0.03em;
  font-size: 1.05rem;
  color: var(--text-0);
}
.whyCircleSub{
  margin-top: .15rem;
  font-weight: 650;
  font-size: .86rem;
  color: var(--text-2);
}

/* Items */
.whyCircleItem{
  position: absolute;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--border), transparent 10%);
  background: color-mix(in srgb, var(--bg-1), transparent 10%);
  box-shadow: 0 16px 50px rgba(0,0,0,.18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  opacity: 0;
  transform: translate(-50%,-50%) scale(.92);
  filter: blur(10px);
  transition: opacity .55s ease, transform .55s ease, filter .55s ease;

  pointer-events: none;
  white-space: nowrap;
  z-index: 3;
}
html[data-theme="light"] .whyCircleItem{
  box-shadow: 0 16px 50px rgba(16,24,40,.10);
}

.whyCircleItem.shown{
  opacity: 1;
  transform: translate(-50%,-50%) scale(1);
  filter: blur(0);
}

/* Optional: leichtes Schweben, nachdem sichtbar */
.whyCircleItem.float{ animation: whyCircleFloat 4.6s ease-in-out infinite; }
.whyCircleItem.float[data-i="1"]{ animation-delay: .22s; }
.whyCircleItem.float[data-i="2"]{ animation-delay: .45s; }
.whyCircleItem.float[data-i="3"]{ animation-delay: .70s; }

@keyframes whyCircleFloat{
  0%{ transform: translate(-50%,-50%) scale(1) translateY(0px); }
  50%{ transform: translate(-50%,-50%) scale(1) translateY(-6px); }
  100%{ transform: translate(-50%,-50%) scale(1) translateY(0px); }
}

/* Icon im Item */
.whyCircleIco{
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--border), transparent 10%);
  background:
    radial-gradient(14px 14px at 30% 30%, color-mix(in srgb, var(--accent-0), transparent 30%), transparent 60%),
    radial-gradient(14px 14px at 70% 70%, color-mix(in srgb, var(--accent-1), transparent 40%), transparent 60%),
    color-mix(in srgb, var(--bg-1), transparent 22%);
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}
.whyCircleIco .icon{
  width: 18px;
  height: 18px;
  opacity: .9;
}

/* Label */
.whyCircleLbl b{
  display: block;
  font-size: 13.5px;
  letter-spacing: -.01em;
  color: var(--text-0);
  line-height: 1.15;
}
.whyCircleLbl span{
  display: block;
  font-size: 12.5px;
  color: var(--text-2);
  line-height: 1.15;
  margin-top: 2px;
}

/* Positionen (wie in Neu_1) */
.wc-i0{ left: 78%; top: 22%; }
.wc-i1{ left: 86%; top: 62%; }
.wc-i2{ left: 32%; top: 88%; }
.wc-i3{ left: 18%; top: 44%; }

/* Hint */
.whyCircleHint{
  margin: 0;
  color: var(--text-2);
  text-align: center;
  z-index: 2;
}

/* Lock: alles sichtbar lassen */
.whyCircleStory.is-locked .whyCircleItem{
  opacity: 1 !important;
  filter: none !important;
  transform: translate(-50%,-50%) scale(1) !important;
}

/* Responsive Feinschliff */
@media (max-width: 820px){
  .whyCirclePin{ top: 86px; height: calc(100vh - 86px); gap: 14px; }
  .whyCircleItem{ padding: 9px 11px; }
  .whyCircleLbl b{ font-size: 13px; }
  .whyCircleLbl span{ font-size: 12px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .whyCircleStory *{
    transition: none !important;
    filter: none !important;
    animation: none !important;
  }
}


/* =========
   Vorgehen
   ========= */
.steps{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1rem;
}
.step{
  grid-column: span 6;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: var(--radius-xl);
  padding: 1.1rem;
  position: relative;
  overflow:hidden;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.step::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(220px 220px at 20% 20%, color-mix(in srgb, var(--accent-0), transparent 88%), transparent 62%),
    radial-gradient(240px 240px at 80% 70%, color-mix(in srgb, var(--accent-1), transparent 90%), transparent 64%);
  opacity: .16;
  pointer-events:none;
}
.step > *{ position: relative; z-index:1; }
.step:hover{
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--border), var(--accent-1) 16%);
  background: color-mix(in srgb, var(--surface-2), transparent 0%);
}
.step-top{
  display:flex;
  align-items:center;
  gap:.85rem;
}
.step p{ margin: .35rem 0 0; color: var(--text-1); }

.cta-band{
  margin-top: 2rem;
  border: 1px solid var(--border);
  background:
    radial-gradient(140% 140% at 10% 10%, color-mix(in srgb, var(--accent-0), transparent 85%), transparent 55%),
    radial-gradient(140% 140% at 90% 90%, color-mix(in srgb, var(--accent-1), transparent 85%), transparent 60%),
    var(--surface);
  border-radius: var(--radius-xl);
  padding: 1.25rem;
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 1rem;
  align-items: center;
}
.cta-band h3{ margin:0 0 .25rem 0; }
.cta-band p{ margin:0; color: var(--text-1); }
.cta-band .btn{ justify-self: end; }

/* =========
   Contact / Forms
   ========= */
.quickcheck{
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: var(--radius-xl);
  padding: 1.15rem;
  margin: 1.25rem 0 1.25rem;
}
.quickcheck-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .75rem;
  margin-top: .85rem;
}
label{ display:block; font-weight: 650; color: var(--text-0); }
select, input, textarea{
  width: 100%;
  margin-top: .35rem;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface), transparent 5%);
  color: var(--text-0);
  padding: .7rem .75rem;
  font: inherit;
  outline: none;
}
textarea{ min-height: 130px; resize: vertical; }

.quickcheck-out{
  margin: .85rem 0 0;
  color: var(--text-1);
  padding: .75rem .85rem;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--border), transparent 25%);
  background: color-mix(in srgb, var(--surface-2), transparent 0%);
  white-space: pre-wrap;
}

.contact-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  align-items: start;
  margin-top: 1.5rem;
}
.contact-card{
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: var(--radius-xl);
  padding: 1.15rem;
}
.form-actions{
  display:flex;
  gap:.75rem;
  flex-wrap:wrap;
  margin-top: 1rem;
}
.meta-row{
  display:flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: .75rem;
}
.pill{
  border: 1px solid var(--border);
  background: var(--surface);
  padding: .48rem .68rem;
  border-radius: 999px;
  color: var(--text-1);
  font-weight: 650;
  letter-spacing: -0.01em;
}
.mini-btn{
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface), transparent 5%);
  color: var(--text-0);
  border-radius: 999px;
  padding: .45rem .7rem;
  cursor: pointer;
  font-weight: 650;
}

/* =========
   Footer
   ========= */
footer{ padding: 2.5rem 0; color: var(--text-2); }
.footer-row{
  display:flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  border-top: 1px solid var(--border);
  padding-top: 1.25rem;
}
.footer-row a{
  color: var(--text-2);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.footer-row .footer-link{
  appearance: none;
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--text-2);
  font: inherit;
  cursor: pointer;
  border-bottom: 1px solid transparent;
}
.footer-row a:hover{
  color: var(--text-1);
  border-bottom-color: color-mix(in srgb, var(--border), transparent 35%);
}
.footer-row .footer-link:hover{
  color: var(--text-1);
  border-bottom-color: color-mix(in srgb, var(--border), transparent 35%);
}

/* =========
   Reveal
   ========= */
[data-reveal]{ opacity: 1; transform: none; }
html.js [data-reveal]{
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .5s ease, transform .5s ease;
}
html.js [data-reveal].is-visible{ opacity: 1; transform: none; }

/* =========
   Back to top
   ========= */
.to-top{
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 999;
  opacity: 0;
  pointer-events: none;
  transform: translateY(6px);
  transition: opacity .2s ease, transform .2s ease;
}
.to-top.is-visible{
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

/* =========
   Responsive
   ========= */
@media (max-width: 980px){
  .hero-grid{ grid-template-columns: 1fr; }
  .hero-visual{ min-height: 260px; }
  .card{ grid-column: span 12; }
  .step{ grid-column: span 12; }
  .why-grid{ grid-template-columns: 1fr; }
  .why-sticky{ position: relative; top: auto; }
  .cta-band{ grid-template-columns: 1fr; }
  .cta-band .btn{ justify-self: start; }
  .contact-grid{ grid-template-columns: 1fr; }
  .quickcheck-grid{ grid-template-columns: 1fr; }
  nav.nav{ display: none; }
  .nav-toggle{ display: inline-flex; align-items:center; justify-content:center; }
  .navbar{ grid-template-columns: 1fr auto auto; }
  .site-header.open nav.nav{
    display: block;
    grid-column: 1 / -1;
  }
  .site-header.open .nav-menu{
    flex-direction: column;
    align-items: stretch;
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: .5rem;
    background: var(--bg-1);
  }
}
@media (min-width: 981px){
  .nav-toggle{ display: none; }
}

/* =========
   Motion reduced
   ========= */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}
/* ===========================
   Neu_1 Methodik - BUGFIX PATCH
   (verhindert Klassennamen-Kollisionen + Text-Zentrierung)
   =========================== */

/* Button-Reset für .pill (weil wir jetzt <button> nutzen) */
.method-panel--neu1 .pill{
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid var(--pill-border);
}

/* FX muss immer über dem Card-Inhalt liegen */
.method-panel--neu1 .fx{ z-index: 20; }

/* Text in der Box wirklich mittig + keine geerbte max-width */
.method-panel--neu1 .neu1-text{
  margin: 14px 0 0;
  text-align: center;
  max-width: none;
  color: rgba(16,24,40,70);
  font-size: 14.5px;
}

/* ========== Scrum FX (renamed: .scrum-arc / .scrum-runner) ========== */
.method-panel--neu1 .fx.scrum{ width: 210px; height: 110px; }
.method-panel--neu1 .fx.scrum .scrum-arc{
  position:absolute; inset: 10px;
  border-radius: 999px;
  border: 2px solid var(--fx-ink);
  border-top-color: transparent;
  transform: rotate(-25deg);
  background: radial-gradient(circle at 35% 35%, rgba(16,24,40,06), transparent 60%);
}
.method-panel--neu1 .fx.scrum .scrum-runner{
  position:absolute;
  width: 10px; height: 10px;
  border-radius: 50%;
  border: 1px solid rgba(16,24,40,22);
  background: rgba(255,255,255,88);
  left: 50%; top: 50%;
  transform: translate(-50%,-50%) translateX(70px);
  opacity: 0;
}
.method-panel--neu1 .pill:hover .fx.scrum .scrum-runner{
  opacity: 1;
  animation: neu1ScrumRun 1.2s ease-in-out infinite;
}
@keyframes neu1ScrumRun{
  0%{ transform: translate(-50%,-50%) rotate(0deg) translateX(70px); }
  100%{ transform: translate(-50%,-50%) rotate(360deg) translateX(70px); }
}

/* ========== Hybrid FX (renamed + sauber auf einer Linie zentriert) ========== */
.method-panel--neu1 .fx.hybrid{ width: 300px; height: 110px; }

.method-panel--neu1 .fx.hybrid .hy-block{
  position:absolute; inset:0;
  border-radius: 18px;
  border: 1px solid rgba(16,24,40,10);
  background: rgba(255,255,255,55);
  backdrop-filter: blur(6px);
  overflow:hidden;
}

/* Linie exakt mittig */
.method-panel--neu1 .fx.hybrid .hy-line{
  position:absolute;
  left: 18px;
  right: 98px;
  top: 50%;
  height: 2px;
  transform: translateY(-50%) scaleX(0);
  transform-origin: left;
  background: rgba(16,24,40,18);
}

/* Dots exakt auf Linie */
.method-panel--neu1 .fx.hybrid .hy-dots{
  position:absolute;
  left: 26px;
  top: 50%;
  transform: translateY(-50%);
  display:flex;
  gap: 18px;
  opacity: 0;
}
.method-panel--neu1 .fx.hybrid .hy-dot{
  width: 9px; height: 9px;
  border-radius: 50%;
  border: 1px solid rgba(16,24,40,20);
  background: rgba(255,255,255,86);
}

/* Kreis exakt mit Linie verbunden (rechts) */
.method-panel--neu1 .fx.hybrid .hy-loop{
  position:absolute;
  right: 18px;
  top: 50%;
  width: 64px; height: 64px;
  border-radius: 50%;
  border: 2px solid rgba(16,24,40,16);
  border-top-color: transparent;
  transform: translateY(-50%) rotate(-18deg);
  opacity: .92;
}

/* Runner läuft im Kreis */
.method-panel--neu1 .fx.hybrid .hy-runner{
  position:absolute;
  right: 18px;
  top: 50%;
  width: 9px; height: 9px;
  border-radius: 50%;
  border: 1px solid rgba(16,24,40,22);
  background: rgba(255,255,255,88);
  transform: translate(-32px, -50%);
  opacity: 0;
}

/* Hover-Animationen */
.method-panel--neu1 .pill:hover .fx.hybrid .hy-line{
  animation: neu1DrawLine .55s ease forwards;
}
.method-panel--neu1 .pill:hover .fx.hybrid .hy-dots{
  opacity: 1;
  animation: neu1FadeIn .22s ease forwards .08s;
}
.method-panel--neu1 .pill:hover .fx.hybrid .hy-loop{
  animation: neu1Spin 1.05s ease-in-out infinite;
}
.method-panel--neu1 .pill:hover .fx.hybrid .hy-runner{
  opacity: 1;
  animation: neu1HybridRun 1.05s ease-in-out infinite;
}

@keyframes neu1DrawLine{ to{ transform: translateY(-50%) scaleX(1); } }
@keyframes neu1FadeIn{ to{ opacity: 1; } }
@keyframes neu1Spin{ 0%{ transform: translateY(-50%) rotate(0deg);} 100%{ transform: translateY(-50%) rotate(360deg);} }
@keyframes neu1HybridRun{
  0%{ transform: translate(-32px, -50%) rotate(0deg) translateX(32px); }
  100%{ transform: translate(-32px, -50%) rotate(360deg) translateX(32px); }
}

/* Website (HTML) - wline statt line (auch Kollisionsschutz) */
.method-panel--neu1 .fx.webhtml .wline{
  height: 8px;
  border-radius: 8px;
  background: rgba(16,24,40,10);
  transform-origin: left;
  transform: scaleX(.25);
  opacity: .85;
  position:relative;
  overflow:hidden;
}
.method-panel--neu1 .fx.webhtml .wline::after{
  content:"";
  position:absolute; top:0; bottom:0; left:-40%;
  width: 40%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,65), transparent);
  opacity:.55;
}
.method-panel--neu1 .pill:hover .fx.webhtml .wline{ animation: typeLine 1.25s ease-in-out infinite; }
.method-panel--neu1 .pill:hover .fx.webhtml .wline::after{ animation: sheen 1.25s ease-in-out infinite; }

/* ===== Methodik FIX (scoped, source-of-truth) ===== */

#methodik .mp-meth-skin{
  --card-border: color-mix(in srgb, var(--border), transparent 15%);
  --card-bg-top: color-mix(in srgb, var(--accent-0), transparent 88%);
  --card-bg-mid: color-mix(in srgb, var(--accent-0), transparent 93%);
  --card-bg-bot: color-mix(in srgb, var(--accent-1), transparent 88%);
  --pill-bg: color-mix(in srgb, var(--bg-1), var(--surface) 35%);
  --pill-border: color-mix(in srgb, var(--border), transparent 0%);
  --pill-text: var(--text-0);

  --shadow: 0 14px 40px color-mix(in srgb, rgba(0,0,0,.55), transparent 45%);
  --shadow-2: 0 18px 50px color-mix(in srgb, rgba(0,0,0,.65), transparent 45%);
  --r: 18px;

  --fx-ink: color-mix(in srgb, var(--text-0), transparent 76%);
  --fx-fill: color-mix(in srgb, var(--bg-1), transparent 0%);
  --fx-shadow: 0 22px 65px color-mix(in srgb, rgba(0,0,0,.75), transparent 40%);
}
html[data-theme="light"] #methodik .mp-meth-skin{
  --shadow: 0 14px 40px rgba(16,24,40,.10);
  --shadow-2: 0 18px 50px rgba(16,24,40,.14);
  --fx-shadow: 0 22px 65px rgba(16,24,40,.18);
}
#methodik .mp-meth-pill{ cursor: default; }

/* Variante A: Titel über der Card (Kicker) */
#methodik .mp-meth-kicker {
      margin: 0 2px 10px;
      font-weight: 750;
      font-size: 12px;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: rgba(16,24,40,.55);
    }

#methodik .mp-meth-card {
      border: 1px solid var(--card-border);
      border-radius: var(--r);
      background: linear-gradient(180deg, var(--card-bg-top) 0%, var(--card-bg-mid) 42%, var(--card-bg-bot) 100%);
      box-shadow: var(--shadow);
      padding: 18px 18px 16px;
      position: relative;
      overflow: visible;
    }

    /* (Optional: wird nicht mehr genutzt, kann bleiben) */
#methodik .card__title {
      font-weight: 700;
      font-size: 15px;
      margin: 0 0 12px;
    }

    /* Pills: jetzt zentriert */
#methodik .mp-meth-pills {
      display:flex;
      flex-wrap:wrap;
      gap: 10px;
      align-items:center;
      justify-content: center;
      margin-bottom: 14px;
      position: relative;
      z-index: 2;
    }

#methodik .mp-meth-pill {
      position: relative;
      display:inline-flex;
      align-items:center;
      padding: 8px 12px;
      border-radius: 999px;
      background: var(--pill-bg);
      border: 1px solid var(--pill-border);
      color: var(--pill-text);
      font-weight: 650;
      font-size: 13px;
      letter-spacing: .1px;
      cursor: default;
      user-select:none;
      transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
      transform-origin: center;
      isolation: isolate;
      text-align:center;
    }
#methodik .mp-meth-pill:hover {
      transform: scale(1.06);
      box-shadow: var(--shadow-2);
      border-color: rgba(16,24,40,.22);
      background: #eef1f4;
      z-index: 3;
    }

    /* FX */
#methodik .mp-meth-pill .mp-meth-fx {
      position:absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%,-50%);
      pointer-events:none;
      z-index: 999;
      opacity: 0;
      filter: drop-shadow(var(--fx-shadow));
      transition: opacity .12s ease;
    }
#methodik .mp-meth-pill:hover .mp-meth-fx { opacity: 1; }

#methodik .pop {
      transform-origin: 50% 65%;
      animation: popOut .22s ease forwards;
    }
    @keyframes popOut{
      from{ transform: translate(-50%,-50%) scale(.78); }
      to  { transform: translate(-50%,-50%) scale(1); }
    }

    /* ===== Scrum ===== */
#methodik .mp-meth-fx.scrum { width: 160px; height: 160px; }
#methodik .mp-meth-fx.scrum .mp-meth-arc {
      position:absolute; inset:0;
      border-radius:50%;
      border:2px solid var(--fx-ink);
      border-top-color: transparent;
      transform: rotate(-22deg);
      opacity:.95;
      transition: border-top-color .18s ease, transform .22s ease;
    }
#methodik .mp-meth-fx.scrum .mp-meth-runner {
      position:absolute; left:50%; top:50%;
      width:10px; height:10px; border-radius:50%;
      border:1px solid rgba(16,24,40,.26);
      background: var(--fx-fill);
      opacity:0;
    }
#methodik .mp-meth-pill:hover .mp-meth-fx.scrum .mp-meth-arc { border-top-color: var(--fx-ink); transform: rotate(0deg); }
#methodik .mp-meth-pill:hover .mp-meth-fx.scrum .mp-meth-runner { opacity:1; animation: scrumRun 1.05s ease-in-out infinite; }
    @keyframes scrumRun{
      0%   { transform: translate(-50%,-50%) rotate(0deg) translateX(78px); }
      100% { transform: translate(-50%,-50%) rotate(360deg) translateX(78px); }
    }

    /* ===== HYBRID ===== */
#methodik .mp-meth-fx.hybrid { width: 280px; height: 110px; }
#methodik .mp-meth-fx.hybrid .mp-meth-block {
      position:absolute; inset:0;
      border-radius: 18px;
      border: 1px solid rgba(16,24,40,.10);
      background: rgba(255,255,255,.55);
      backdrop-filter: blur(6px);
      overflow:hidden;
    }
#methodik .mp-meth-fx.hybrid .mp-meth-line {
      position:absolute;
      left: 18px;
      right: 98px;
      top: 55px;
      height: 2px;
      background: rgba(16,24,40,.18);
      transform-origin:left;
      transform: scaleX(0);
    }
#methodik .mp-meth-fx.hybrid .mp-meth-dots {
      position:absolute;
      left: 26px;
      top: 49px;
      display:flex;
      gap: 18px;
      opacity: 0;
    }
#methodik .mp-meth-fx.hybrid .mp-meth-dot {
      width: 9px; height: 9px;
      border-radius: 50%;
      border: 1px solid rgba(16,24,40,.20);
      background: rgba(255,255,255,.86);
    }
#methodik .mp-meth-fx.hybrid .mp-meth-loop {
      position:absolute;
      right: 18px;
      top: 55px;
      width: 64px; height: 64px;
      border-radius: 50%;
      border: 2px solid rgba(16,24,40,.16);
      border-top-color: transparent;
      transform: translateY(-50%) rotate(-18deg);
      opacity: .92;
    }
#methodik .mp-meth-fx.hybrid .mp-meth-runner {
      position:absolute;
      right: 18px;
      top: 55px;
      width: 9px; height: 9px;
      border-radius: 50%;
      border: 1px solid rgba(16,24,40,.22);
      background: rgba(255,255,255,.88);
      transform: translate(-32px, -50%);
      opacity: 0;
    }
#methodik .mp-meth-pill:hover .mp-meth-fx.hybrid .mp-meth-line { animation: drawLine .55s ease forwards; }
#methodik .mp-meth-pill:hover .mp-meth-fx.hybrid .mp-meth-dots { opacity: 1; animation: fadeIn .22s ease forwards .08s; }
#methodik .mp-meth-pill:hover .mp-meth-fx.hybrid .mp-meth-loop { border-top-color: rgba(16,24,40,.16); animation: loopSpin 1.2s ease-in-out infinite; }
#methodik .mp-meth-pill:hover .mp-meth-fx.hybrid .mp-meth-runner { opacity: 1; animation: loopRun 1.2s ease-in-out infinite; }
    @keyframes drawLine{ to{ transform: scaleX(1);} }
    @keyframes fadeIn{ to{ opacity:1;} }
    @keyframes loopSpin{
      0%{ transform: translateY(-50%) rotate(0deg); }
      50%{ transform: translateY(-50%) rotate(140deg); }
      100%{ transform: translateY(-50%) rotate(280deg); }
    }
    @keyframes loopRun{
      0%{ transform: translate(-32px,-50%) rotate(0deg) translateX(32px); }
      100%{ transform: translate(-32px,-50%) rotate(360deg) translateX(32px); }
    }

    /* ===== Website HTML (Coding FX) ===== */
#methodik .mp-meth-fx.webhtml { width: 270px; height: 140px; }
#methodik .mp-meth-fx.webhtml .editor {
      position:absolute; inset:0;
      border-radius: 18px;
      border: 1px solid rgba(16,24,40,.10);
      background: rgba(255,255,255,.55);
      backdrop-filter: blur(6px);
      overflow:hidden;
    }
#methodik .mp-meth-fx.webhtml .topbar {
      position:absolute; left:0; right:0; top:0;
      height: 26px;
      border-bottom: 1px solid rgba(16,24,40,.08);
      background: rgba(255,255,255,.45);
    }
#methodik .mp-meth-fx.webhtml .mp-meth-dot {
      position:absolute; top: 8px;
      width: 8px; height: 8px; border-radius: 50%;
      border: 1px solid rgba(16,24,40,.14);
      background: rgba(255,255,255,.75);
      opacity:.9;
    }
#methodik .mp-meth-fx.webhtml .mp-meth-dot.d1 { left: 12px; }
#methodik .mp-meth-fx.webhtml .mp-meth-dot.d2 { left: 24px; }
#methodik .mp-meth-fx.webhtml .mp-meth-dot.d3 { left: 36px; }

#methodik .mp-meth-fx.webhtml .lines {
      position:absolute; left: 14px; right: 14px;
      top: 40px; bottom: 38px;
      display:flex; flex-direction:column; gap: 8px;
    }
#methodik .mp-meth-fx.webhtml .mp-meth-line {
      height: 8px;
      border-radius: 8px;
      background: rgba(16,24,40,.10);
      transform-origin: left;
      transform: scaleX(.25);
      opacity: .85;
      position:relative;
      overflow:hidden;
    }
#methodik .mp-meth-fx.webhtml .mp-meth-line::after {
      content:"";
      position:absolute; left:-40%; top:0; bottom:0;
      width: 40%;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,.65), transparent);
      opacity: .7;
      transform: skewX(-18deg);
    }
#methodik .mp-meth-fx.webhtml .mp-meth-line.l1 { width: 72%; }
#methodik .mp-meth-fx.webhtml .mp-meth-line.l2 { width: 55%; }
#methodik .mp-meth-fx.webhtml .mp-meth-line.l3 { width: 80%; }
#methodik .mp-meth-fx.webhtml .mp-meth-line.l4 { width: 62%; }

#methodik .mp-meth-fx.webhtml .cursor {
      position:absolute;
      left: 18px;
      top: 44px;
      width: 10px; height: 18px;
      border-radius: 6px;
      border: 1px solid rgba(16,24,40,.18);
      background: rgba(255,255,255,.82);
      box-shadow: 0 10px 24px rgba(16,24,40,.12);
      opacity: 0;
    }
#methodik .mp-meth-fx.webhtml .cursor::after {
      content:"";
      position:absolute;
      right: -8px; top: 3px;
      width: 7px; height: 12px;
      border-radius: 999px;
      background: rgba(16,24,40,.16);
      opacity:.55;
    }

#methodik .mp-meth-fx.webhtml .compile {
      position:absolute;
      left: 14px; right: 14px; bottom: 12px;
      height: 14px;
      border-radius: 999px;
      border: 1px solid rgba(16,24,40,.12);
      background: rgba(255,255,255,.60);
      overflow:hidden;
      opacity: 0;
      transform: translateY(6px);
    }
#methodik .mp-meth-fx.webhtml .bar {
      position:absolute; left:0; top:0; bottom:0;
      width: 0%;
      background: linear-gradient(90deg, rgba(16,24,40,.10), rgba(16,24,40,.22), rgba(16,24,40,.10));
      border-radius: 999px;
      opacity:.9;
    }
#methodik .mp-meth-fx.webhtml .pulse {
      position:absolute; left:-30%; top:0; bottom:0;
      width: 30%;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,.65), transparent);
      transform: skewX(-18deg);
      opacity:.8;
    }

#methodik .mp-meth-pill:hover .mp-meth-fx.webhtml .cursor { opacity: 1; animation: cursorMove 1.25s ease-in-out infinite; }
#methodik .mp-meth-pill:hover .mp-meth-fx.webhtml .mp-meth-line { animation: typeLine 1.25s ease-in-out infinite; }
#methodik .mp-meth-pill:hover .mp-meth-fx.webhtml .mp-meth-line::after { animation: sheen 1.25s ease-in-out infinite; }
#methodik .mp-meth-pill:hover .mp-meth-fx.webhtml .mp-meth-line.l2 { animation-delay: .08s; }
#methodik .mp-meth-pill:hover .mp-meth-fx.webhtml .mp-meth-line.l3 { animation-delay: .16s; }
#methodik .mp-meth-pill:hover .mp-meth-fx.webhtml .mp-meth-line.l4 { animation-delay: .24s; }

#methodik .mp-meth-pill:hover .mp-meth-fx.webhtml .compile {
      opacity: 1;
      transform: translateY(0);
      animation: compileFade 1.25s ease-in-out infinite;
    }
#methodik .mp-meth-pill:hover .mp-meth-fx.webhtml .bar { animation: compileBar 1.25s ease-in-out infinite; }
#methodik .mp-meth-pill:hover .mp-meth-fx.webhtml .pulse { animation: compilePulse 1.25s ease-in-out infinite; }

    @keyframes typeLine{
      0%   { transform: scaleX(.18); opacity:.55; }
      28%  { transform: scaleX(1.0); opacity:.95; }
      72%  { transform: scaleX(1.0); opacity:.95; }
      100% { transform: scaleX(.18); opacity:.55; }
    }
    @keyframes sheen{ 0%{ left:-40%; } 35%{ left:110%; } 100%{ left:110%; } }
    @keyframes cursorMove{
      0%   { transform: translate(0,0); }
      25%  { transform: translate(120px, 0); }
      50%  { transform: translate(40px, 26px); }
      75%  { transform: translate(170px, 52px); }
      100% { transform: translate(0,0); }
    }
    @keyframes compileFade{
      0%{ opacity:0; transform: translateY(6px); }
      22%{ opacity:1; transform: translateY(0); }
      78%{ opacity:1; transform: translateY(0); }
      100%{ opacity:0; transform: translateY(6px); }
    }
    @keyframes compileBar{
      0%{ width: 0%; }
      30%{ width: 72%; }
      65%{ width: 100%; }
      100%{ width: 0%; }
    }
    @keyframes compilePulse{ 0%{ left:-30%; } 35%{ left:110%; } 100%{ left:110%; } }

    /* ===== ITIL ===== */
#methodik .mp-meth-fx.itil { width: 150px; height: 150px; }
#methodik .mp-meth-fx.itil .ring, #methodik .mp-meth-fx.itil .seg { position:absolute; inset:0; border-radius:50%; }
#methodik .mp-meth-fx.itil .ring {
      border:2px solid var(--fx-ink);
      background: radial-gradient(circle at 50% 35%, rgba(16,24,40,.06), transparent 60%);
    }
#methodik .mp-meth-fx.itil .seg {
      background: conic-gradient(
        transparent 0 12%,
        rgba(16,24,40,.22) 12% 15%,
        transparent 15% 30%,
        rgba(16,24,40,.22) 30% 33%,
        transparent 33% 50%,
        rgba(16,24,40,.22) 50% 53%,
        transparent 53% 70%,
        rgba(16,24,40,.22) 70% 73%,
        transparent 73% 100%
      );
      opacity:.92;
    }
#methodik .mp-meth-pill:hover .mp-meth-fx.itil .seg { animation: spin180 1.0s ease-in-out infinite; }
    @keyframes spin180{ 0%{transform:rotate(0)} 100%{transform:rotate(180deg)} }

    /* ===== Kanban ===== */
#methodik .mp-meth-fx.kanban { width: 220px; height: 140px; }
#methodik .mp-meth-fx.kanban .board {
      position:absolute; inset:0;
      display:grid; grid-template-columns: repeat(3, 1fr);
      gap:10px; padding:10px;
      border-radius:18px;
      border:1px solid rgba(16,24,40,.10);
      background: rgba(255,255,255,.55);
      backdrop-filter: blur(6px);
    }
#methodik .mp-meth-fx.kanban .col {
      border-radius:14px;
      border:1px solid rgba(16,24,40,.12);
      background: rgba(255,255,255,.55);
      position:relative; overflow:hidden;
    }
#methodik .mp-meth-fx.kanban .col::before {
      content:""; position:absolute;
      left:10px; right:10px; top:10px;
      height:8px; border-radius:6px;
      background: rgba(16,24,40,.07);
      opacity:.75;
    }
#methodik .mp-meth-fx.kanban .cardlet {
      position:absolute;
      width:26%; height:24px;
      border-radius:10px;
      border:1px solid rgba(16,24,40,.16);
      background: rgba(255,255,255,.85);
      top:50%; left:14%;
      transform: translateY(-50%);
      opacity:0;
    }
#methodik .mp-meth-pill:hover .mp-meth-fx.kanban .cardlet { opacity:1; animation: kanbanFlow 1.25s ease-in-out infinite; }
    @keyframes kanbanFlow{
      0%{ left:14%; }
      42%{ left:44%; }
      62%{ left:44%; }
      100%{ left:72%; }
    }

    /* ===== PRINCE2 ===== */
#methodik .mp-meth-fx.prince2 { width: 240px; height: 90px; }
#methodik .mp-meth-fx.prince2 .mp-meth-rail {
      position:absolute; left:12px; right:12px; top:50%;
      height:2px; background: rgba(16,24,40,.18);
      transform: translateY(-50%) scaleX(0);
      transform-origin:left;
    }
#methodik .mp-meth-fx.prince2 .mp-meth-gate {
      position:absolute; top:50%;
      width:16px; height:16px; border-radius:50%;
      border:1px solid rgba(16,24,40,.22);
      background: rgba(255,255,255,.85);
      transform: translate(-50%,-50%) scale(.8);
      opacity:0;
    }
#methodik .mp-meth-pill:hover .mp-meth-fx.prince2 .mp-meth-rail { animation: draw .55s ease forwards; }
#methodik .mp-meth-pill:hover .mp-meth-fx.prince2 .mp-meth-gate { animation: gateIn .35s ease forwards; }
#methodik .mp-meth-pill:hover .mp-meth-fx.prince2 .mp-meth-gate:nth-child(2) { animation-delay:.18s }
#methodik .mp-meth-pill:hover .mp-meth-fx.prince2 .mp-meth-gate:nth-child(3) { animation-delay:.28s }
#methodik .mp-meth-pill:hover .mp-meth-fx.prince2 .mp-meth-gate:nth-child(4) { animation-delay:.38s }
#methodik .mp-meth-pill:hover .mp-meth-fx.prince2 .mp-meth-gate:nth-child(5) { animation-delay:.48s }
    @keyframes draw{ to{ transform: translateY(-50%) scaleX(1);} }
    @keyframes gateIn{ to{ opacity:1; transform: translate(-50%,-50%) scale(1);} }

    @media (prefers-reduced-motion: reduce){
      #methodik *{ animation:none !important; transition:none !important; }
    }
  

/* =========
   Closing Sections
   ========= */
#methodik .mp-meth-quote{
  margin: 0 auto;
  max-width: 92ch;
  text-align: center;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--text-2);
}

/* ===== Warum wir ===== */
#warum .container{ max-width: 1180px; }
#warum .mp-whyStory{
  --why-progress: 0;
  position: relative;
  min-height: 176vh;
}
#warum .mp-whyPin{
  position: sticky;
  top: max(88px, 10vh);
  min-height: 82vh;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: clamp(24px, 3vw, 36px);
  align-items: start;
}
#warum .mp-whyPinGlow{
  position: absolute;
  inset: -10% -12% auto;
  height: 72vh;
  background:
    radial-gradient(680px 280px at 18% 18%, var(--teal), transparent 68%),
    radial-gradient(760px 340px at 82% 22%, var(--lav), transparent 70%);
  opacity: calc(.24 + var(--why-progress) * .32);
  filter: blur(26px);
  pointer-events: none;
  z-index: 0;
}
#warum .mp-whyIntro,
#warum .mp-circleStage{
  position: relative;
  z-index: 1;
}
#warum .mp-whyIntro{
  max-width: 760px;
}
#warum .mp-whyKicker{
  margin: 0 0 .75rem;
  font-size: .78rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-2);
}
#warum .mp-whyIntro h2{
  margin: 0 0 .85rem;
  font-size: clamp(2rem, 4vw, 3.4rem);
  line-height: 1.05;
  letter-spacing: -.03em;
}
#warum .mp-whyLead{
  margin: 0;
  max-width: 62ch;
  color: var(--text-1);
}
#warum .mp-circleStage{
  width: 100%;
  min-height: min(760px, 82vh);
  display: grid;
  place-items: center;
}
#warum .mp-ring{
  position: relative;
  width: clamp(300px, 42vw, 520px);
  aspect-ratio: 1;
  filter: drop-shadow(var(--softShadow));
}
#warum .mp-ring svg{
  width: 100%;
  height: 100%;
  display: block;
  transform: rotate(-90deg);
}
#warum .mp-ring-track{
  stroke: color-mix(in srgb, var(--border), transparent 20%);
  stroke-width: 6;
}
#warum .mp-ring-progress{
  stroke: url(#ringGrad);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: calc(100 - (var(--why-progress) * 100));
}
#warum .mp-ring-core{
  position: absolute;
  inset: 25%;
  display: grid;
  place-items: center;
  gap: .3rem;
  padding: 1.55rem 1.35rem;
  text-align: center;
  border-radius: 50%;
  background:
    radial-gradient(120% 120% at 50% 20%, color-mix(in srgb, var(--accent-0), transparent 90%), transparent 58%),
    linear-gradient(180deg, color-mix(in srgb, var(--bg-1), transparent 6%), color-mix(in srgb, var(--bg-1), transparent 0%));
  border: 1px solid color-mix(in srgb, var(--border), transparent 12%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
#warum .mp-ring-core strong{
  font-size: clamp(1.35rem, 2vw, 1.85rem);
  letter-spacing: -.03em;
}
#warum .mp-ring-core-copy{
  font-size: .92rem;
  line-height: 1.45;
  color: var(--text-1);
}
#warum .mp-whyList{
  position: absolute;
  inset: 0;
}
#warum .mp-whyItem{
  position: absolute;
  width: clamp(190px, 19vw, 250px);
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 12px;
  align-items: center;
  padding: .95rem 1rem;
  border-radius: 22px;
  border: 1px solid color-mix(in srgb, var(--border), transparent 10%);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg-1), transparent 5%), color-mix(in srgb, var(--bg-1), transparent 0%));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 16px 45px rgba(0,0,0,.22);
  transform: translate(-50%, -50%) scale(.92);
  opacity: 0;
  filter: blur(10px);
  transition: opacity .35s ease, transform .35s ease, filter .35s ease, border-color .25s ease, box-shadow .25s ease;
}
#warum .mp-whyItem.is-visible{
  opacity: 1;
  filter: blur(0);
  transform: translate(-50%, -50%) scale(1);
}
#warum .mp-whyItem.is-active{
  border-color: color-mix(in srgb, var(--accent-0), var(--border) 55%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 24px 64px rgba(0,0,0,.28);
}
#warum .mp-whyIco{
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--border), transparent 18%);
  background:
    radial-gradient(90% 90% at 28% 28%, color-mix(in srgb, var(--accent-0), transparent 58%), transparent 72%),
    radial-gradient(90% 90% at 72% 72%, color-mix(in srgb, var(--accent-1), transparent 68%), transparent 72%),
    color-mix(in srgb, var(--surface-2), transparent 6%);
}
#warum .mp-whyIco svg{
  width: 20px;
  height: 20px;
  fill: none;
  stroke: var(--text-0);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#warum .mp-whyLbl b{
  display: block;
  margin-bottom: .2rem;
  font-size: .92rem;
  line-height: 1.2;
  letter-spacing: -.01em;
}
#warum .mp-whyLbl span{
  display: block;
  font-size: .82rem;
  line-height: 1.35;
  color: var(--text-2);
}
#warum .mp-i0{ left: 76%; top: 20%; }
#warum .mp-i1{ left: 88%; top: 58%; }
#warum .mp-i2{ left: 31%; top: 84%; }
#warum .mp-i3{ left: 14%; top: 42%; }

/* ===== Projekterfahrung ===== */
#projekterfahrung .mp-exp-kicker{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 1rem;
  padding: .55rem .9rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--border), transparent 12%);
  background: color-mix(in srgb, var(--surface), transparent 4%);
  color: var(--text-1);
  backdrop-filter: blur(10px);
}
#projekterfahrung .mp-exp-dot{
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-0), var(--accent-1));
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent-0), transparent 86%);
}
#projekterfahrung .mp-exp-head{ margin-bottom: 2rem; }
#projekterfahrung .sub{
  margin: 0;
  color: var(--text-1);
}
#projekterfahrung .mp-exp-panel{
  position: relative;
  overflow: hidden;
  border-radius: 30px;
  border: 1px solid color-mix(in srgb, var(--border), transparent 8%);
  background:
    radial-gradient(120% 140% at 12% 0%, color-mix(in srgb, var(--accent-0), transparent 88%), transparent 56%),
    radial-gradient(120% 140% at 88% 8%, color-mix(in srgb, var(--accent-1), transparent 88%), transparent 56%),
    linear-gradient(180deg, color-mix(in srgb, var(--bg-1), transparent 0%), color-mix(in srgb, var(--bg-1), transparent 3%));
  box-shadow: var(--shadow);
}
#projekterfahrung .mp-exp-panel-head{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 320px);
  align-items: start;
  gap: 1.5rem;
  padding: 1.6rem 1.6rem 1.25rem;
  border-bottom: 1px solid color-mix(in srgb, var(--border), transparent 14%);
}
#projekterfahrung .mp-exp-panel-head h3{
  margin: 0 0 .4rem;
  font-size: 1.1rem;
}
#projekterfahrung .mp-exp-panel-head p,
#projekterfahrung .mp-exp-panel-note{
  margin: 0;
  color: var(--text-2);
}
#projekterfahrung .mp-exp-panel-note{
  align-self: start;
  font-size: .95rem;
  max-width: 32ch;
  overflow-wrap: anywhere;
}
#projekterfahrung .mp-exp-grid{
  display: grid;
  gap: 1rem;
  padding: 1.3rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
}
#projekterfahrung .mp-exp-card{
  position: relative;
  min-height: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 24px;
  border: 1px solid color-mix(in srgb, var(--border), transparent 8%);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg-1), transparent 0%), color-mix(in srgb, var(--bg-1), transparent 7%));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 16px 34px rgba(0,0,0,.18);
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
#projekterfahrung .mp-exp-card::before{
  content: '';
  position: absolute;
  inset: 1px;
  border-radius: 23px;
  background: linear-gradient(180deg, rgba(255,255,255,.06), transparent 24%);
  pointer-events: none;
}
#projekterfahrung .mp-exp-card:hover{
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--accent-1), var(--border) 52%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 22px 46px rgba(0,0,0,.22);
}
#projekterfahrung .mp-exp-card-inner{
  position: relative;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: .95rem;
  height: 100%;
  min-width: 0;
  padding: 1.2rem;
}
#projekterfahrung .mp-exp-card-index{
  margin: 0;
  font-size: .76rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-2);
}
#projekterfahrung .mp-exp-meta{
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: .9rem;
  align-items: start;
}
#projekterfahrung .mp-exp-headline,
#projekterfahrung .mp-exp-panel-head > div{
  min-width: 0;
}
#projekterfahrung .mp-exp-icon{
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--border), transparent 14%);
  background:
    radial-gradient(120% 120% at 24% 26%, color-mix(in srgb, var(--accent-0), transparent 56%), transparent 68%),
    radial-gradient(120% 120% at 74% 74%, color-mix(in srgb, var(--accent-1), transparent 68%), transparent 68%),
    color-mix(in srgb, var(--surface-2), transparent 12%);
  box-shadow: 0 12px 28px rgba(0,0,0,.16);
}
#projekterfahrung .mp-exp-icon svg{
  width: 19px;
  height: 19px;
}
#projekterfahrung .mp-exp-title{
  margin: 0 0 .2rem;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.01em;
  overflow-wrap: anywhere;
}
#projekterfahrung .mp-exp-tagline{
  margin: 0;
  color: var(--text-2);
  font-size: .84rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
#projekterfahrung .mp-exp-bullets{
  display: grid;
  gap: .55rem;
  margin: 0;
  padding-left: 1.1rem;
  color: var(--text-1);
  min-width: 0;
}
#projekterfahrung .mp-exp-bullets li{
  margin: 0;
  overflow-wrap: anywhere;
}
#projekterfahrung .mp-exp-impact{
  padding: .85rem .95rem;
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--border), transparent 14%);
  background: color-mix(in srgb, var(--surface), transparent 10%);
  color: var(--text-1);
  overflow-wrap: anywhere;
}
#projekterfahrung .mp-exp-impact b{
  color: var(--text-0);
}

/* ===== Vorgehen ===== */
#vorgehen .mp-step-wrap{
  --step-progress: 0;
  max-width: 1100px;
  margin: .35rem auto 0;
}
#vorgehen .mp-step-grid{
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
}
#vorgehen .mp-step-note,
#vorgehen .mp-step-timeline{
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  border: 1px solid color-mix(in srgb, var(--border), transparent 10%);
  background:
    radial-gradient(130% 140% at 14% 10%, color-mix(in srgb, var(--accent-0), transparent 92%), transparent 50%),
    radial-gradient(120% 140% at 86% 10%, color-mix(in srgb, var(--accent-1), transparent 92%), transparent 54%),
    linear-gradient(180deg, color-mix(in srgb, var(--bg-1), transparent 0%), color-mix(in srgb, var(--bg-1), transparent 4%));
  box-shadow: var(--shadow);
}
#vorgehen .mp-step-note{
  position: sticky;
  top: 96px;
  padding: 1.35rem 1.35rem 1.2rem;
}
#vorgehen .mp-step-note-kicker{
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  margin: 0 0 1rem;
  font-size: .76rem;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--text-2);
}
#vorgehen .mp-step-note-dot{
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-0), var(--accent-1));
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent-0), transparent 86%);
}
#vorgehen .mp-step-note-title{
  margin: 0 0 .6rem;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -.02em;
}
#vorgehen .mp-step-note-text{
  margin: 0;
  color: var(--text-1);
}
#vorgehen .mp-step-note-cta{
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid color-mix(in srgb, var(--border), transparent 18%);
  color: var(--text-0);
}
#vorgehen .mp-step-timeline{
  padding: 1.35rem 1.3rem 1.15rem;
}
#vorgehen .mp-step-timeline-head{
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}
#vorgehen .mp-step-timeline-h{
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
}
#vorgehen .mp-step-timeline-sub{
  margin: 0;
  max-width: 28ch;
  font-size: .88rem;
  color: var(--text-2);
  text-align: right;
}
#vorgehen .mp-step-line{
  position: absolute;
  left: 34px;
  top: 92px;
  bottom: 26px;
  width: 3px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--border), transparent 22%);
  overflow: hidden;
}
#vorgehen .mp-step-line-progress{
  position: absolute;
  inset: 0;
  transform-origin: top;
  transform: scaleY(var(--step-progress));
  background: linear-gradient(180deg, var(--accent-0), var(--accent-1));
  border-radius: inherit;
}
#vorgehen .mp-step-steps{
  display: grid;
  gap: .95rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
#vorgehen .mp-step-step{
  position: relative;
  padding-left: 66px;
}
#vorgehen .mp-step-dot{
  position: absolute;
  left: 20px;
  top: 22px;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--border), transparent 12%);
  background: color-mix(in srgb, var(--card2), transparent 0%);
  box-shadow: 0 10px 28px rgba(0,0,0,.18);
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
#vorgehen .mp-step-dot::after{
  content: '';
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-0), var(--accent-1));
}
#vorgehen .mp-step-card{
  position: relative;
  padding: 1rem 1rem .95rem;
  border-radius: 22px;
  border: 1px solid color-mix(in srgb, var(--border), transparent 12%);
  background: color-mix(in srgb, var(--card2), transparent 0%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 14px 34px rgba(0,0,0,.18);
  opacity: .46;
  transform: translateY(12px) scale(.985);
  transition: opacity .25s ease, transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
#vorgehen .mp-step-card-inner{
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: .9rem;
  align-items: start;
}
#vorgehen .mp-step-ico{
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--border), transparent 16%);
  background:
    radial-gradient(120% 120% at 24% 26%, color-mix(in srgb, var(--accent-0), transparent 56%), transparent 68%),
    radial-gradient(120% 120% at 76% 76%, color-mix(in srgb, var(--accent-1), transparent 66%), transparent 68%),
    color-mix(in srgb, var(--surface-2), transparent 12%);
}
#vorgehen .mp-step-ico svg{
  width: 22px;
  height: 22px;
}
#vorgehen .mp-step-number{
  margin-bottom: .3rem;
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-2);
}
#vorgehen .mp-step-t{
  margin: 0 0 .25rem;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -.01em;
}
#vorgehen .mp-step-d{
  margin: 0;
  color: var(--text-1);
}
#vorgehen .mp-step-step.is-visible .mp-step-card{
  opacity: .78;
  transform: translateY(0) scale(1);
}
#vorgehen .mp-step-step.is-active .mp-step-card{
  opacity: 1;
  border-color: color-mix(in srgb, var(--accent-1), var(--border) 58%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 24px 58px rgba(0,0,0,.24);
}
#vorgehen .mp-step-step.is-active .mp-step-dot,
#vorgehen .mp-step-step.is-complete .mp-step-dot{
  border-color: color-mix(in srgb, var(--accent-0), var(--border) 58%);
  transform: scale(1.04);
  box-shadow: 0 14px 34px rgba(0,0,0,.22);
}
#vorgehen .mp-step-step:hover .mp-step-card{
  transform: translateY(-2px);
}

/* ===== Kontakt ===== */
#kontakt .mp-contact-shell{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 480px);
  gap: 1.4rem;
  padding: clamp(1.2rem, 3vw, 1.8rem);
  border-radius: 30px;
  border: 1px solid color-mix(in srgb, var(--border), transparent 10%);
  background:
    radial-gradient(130% 140% at 10% 10%, color-mix(in srgb, var(--accent-0), transparent 90%), transparent 52%),
    radial-gradient(120% 140% at 90% 14%, color-mix(in srgb, var(--accent-1), transparent 90%), transparent 54%),
    linear-gradient(180deg, color-mix(in srgb, var(--bg-1), transparent 0%), color-mix(in srgb, var(--bg-1), transparent 4%));
  box-shadow: var(--shadow);
}
#kontakt .mp-contact-kicker{
  margin: 0 0 .75rem;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--text-2);
}
#kontakt .mp-contact-copy h2{
  margin: 0 0 .8rem;
  font-size: clamp(2rem, 3vw, 2.8rem);
  line-height: 1.05;
  letter-spacing: -.03em;
}
#kontakt .mp-contact-lead{
  margin: 0 0 1rem;
  color: var(--text-1);
  max-width: 58ch;
}
#kontakt .mp-contact-points{
  display: grid;
  gap: .7rem;
  margin: 0;
  padding-left: 1.1rem;
  color: var(--text-1);
}
#kontakt .mp-contact-direct{
  margin-top: 1.2rem;
  max-width: 32rem;
  padding: 1rem 1.1rem;
  border-radius: 22px;
  border: 1px solid color-mix(in srgb, var(--border), transparent 12%);
  background: color-mix(in srgb, var(--card2), transparent 0%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
#kontakt .mp-contact-direct-kicker{
  margin: 0 0 .35rem;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--text-2);
}
#kontakt .mp-contact-direct-text{
  margin: 0 0 .4rem;
  color: var(--text-1);
}
#kontakt .mp-contact-direct-link{
  display: inline-flex;
  align-items: center;
  color: var(--text-0);
  text-decoration: none;
  font-weight: 650;
  border-bottom: 1px solid color-mix(in srgb, var(--border), transparent 35%);
}
#kontakt .mp-contact-form{
  display: grid;
  gap: 1.05rem;
  padding: 1.35rem;
  border-radius: 24px;
  border: 1px solid color-mix(in srgb, var(--border), transparent 14%);
  background: color-mix(in srgb, var(--card2), transparent 0%);
}
#kontakt .mp-contact-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
#kontakt .mp-contact-field{
  display: grid;
  gap: .45rem;
}
#kontakt .mp-contact-field label{
  font-size: .92rem;
  font-weight: 600;
  color: var(--text-1);
}
#kontakt .mp-contact-field input,
#kontakt .mp-contact-field textarea{
  width: 100%;
  min-height: 56px;
  padding: .98rem 1rem;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--border), transparent 12%);
  background: color-mix(in srgb, var(--bg-0), transparent 0%);
  color: var(--text-0);
  font: inherit;
  line-height: 1.45;
}
#kontakt .mp-contact-field textarea{
  resize: vertical;
  min-height: 190px;
}
#kontakt .mp-contact-consent{
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: .8rem;
  align-items: start;
  padding: .95rem 1rem;
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--border), transparent 10%);
  background: color-mix(in srgb, var(--surface), transparent 12%);
}
#kontakt .mp-contact-consent input{
  width: 18px;
  height: 18px;
  margin: .15rem 0 0;
  accent-color: var(--accent-0);
}
#kontakt .mp-contact-consent-copy{
  font-size: .86rem;
  line-height: 1.55;
  color: var(--text-2);
}
#kontakt .mp-contact-consent-copy a{
  color: var(--text-0);
  text-decoration-thickness: .08em;
  text-underline-offset: .16em;
}
#kontakt .mp-contact-note{
  margin: 0;
  font-size: .84rem;
  line-height: 1.55;
  color: var(--text-2);
}
#kontakt .mp-contact-form .btn{
  min-height: 56px;
  justify-content: center;
}

/* ===== Consent ===== */
.consent-shell{
  position: fixed;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  z-index: 1200;
}
.consent-banner{
  width: min(1120px, 100%);
  margin-left: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: end;
  padding: 1.15rem;
  border-radius: 28px;
  border: 1px solid color-mix(in srgb, var(--border), transparent 10%);
  background:
    radial-gradient(120% 150% at 8% 8%, color-mix(in srgb, var(--accent-0), transparent 90%), transparent 54%),
    radial-gradient(120% 150% at 90% 14%, color-mix(in srgb, var(--accent-1), transparent 90%), transparent 54%),
    color-mix(in srgb, var(--card2), transparent 0%);
  box-shadow: var(--shadow2);
  backdrop-filter: blur(16px);
}
.consent-copy h2{
  margin: 0 0 .45rem;
  font-size: clamp(1.2rem, 2vw, 1.55rem);
  line-height: 1.1;
}
.consent-copy p:last-child{
  margin-bottom: 0;
  max-width: 68ch;
  color: var(--text-1);
}
.consent-kicker{
  margin: 0 0 .45rem;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--text-2);
}
.consent-actions,
.consent-panel-actions{
  display: flex;
  gap: .7rem;
  flex-wrap: wrap;
}
.consent-modal{
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 1rem;
  z-index: 1210;
}
.consent-backdrop{
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(3, 6, 12, .58);
  backdrop-filter: blur(10px);
  cursor: pointer;
}
.consent-panel{
  position: relative;
  width: min(560px, 100%);
  padding: 1.25rem;
  border-radius: 28px;
  border: 1px solid color-mix(in srgb, var(--border), transparent 10%);
  background:
    radial-gradient(120% 150% at 8% 8%, color-mix(in srgb, var(--accent-0), transparent 90%), transparent 54%),
    radial-gradient(120% 150% at 90% 14%, color-mix(in srgb, var(--accent-1), transparent 90%), transparent 54%),
    color-mix(in srgb, var(--card2), transparent 0%);
  box-shadow: var(--shadow2);
}
.consent-panel h2{
  margin: 0 0 .45rem;
  font-size: clamp(1.35rem, 2vw, 1.8rem);
}
.consent-panel-copy{
  margin: 0 0 1rem;
  color: var(--text-1);
}
.consent-option{
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: start;
  padding: .95rem 1rem;
  margin-bottom: .85rem;
  border-radius: 20px;
  border: 1px solid color-mix(in srgb, var(--border), transparent 10%);
  background: color-mix(in srgb, var(--surface), transparent 10%);
}
.consent-option strong{
  display: block;
  margin-bottom: .3rem;
  color: var(--text-0);
}
.consent-option p{
  margin: 0;
  color: var(--text-2);
  font-size: .92rem;
}
.consent-option input{
  width: 18px;
  height: 18px;
  margin-top: .18rem;
  accent-color: var(--accent-0);
}
.consent-option.is-locked{
  opacity: .94;
}

/* ===== Rechtsseiten ===== */
.legal-shell{
  padding: clamp(72px, 10vw, 120px) 0;
}
.legal-hero{
  margin-bottom: 1.5rem;
  max-width: 760px;
}
.legal-hero p{
  margin: 0;
  color: var(--text-1);
}
.legal-grid{
  display: grid;
  gap: 1rem;
}
.legal-card{
  padding: 1.25rem;
  border-radius: 24px;
  border: 1px solid color-mix(in srgb, var(--border), transparent 12%);
  background: color-mix(in srgb, var(--card2), transparent 0%);
  box-shadow: var(--shadow);
}
.legal-card h2{
  margin-top: 0;
  margin-bottom: .65rem;
  font-size: 1.2rem;
}
.legal-card p,
.legal-card li{
  color: var(--text-1);
}
.legal-card a{
  color: var(--text-0);
  text-decoration-thickness: .08em;
  text-underline-offset: .16em;
  overflow-wrap: anywhere;
}
.legal-card strong{
  color: var(--text-0);
}
.legal-stack{
  margin-bottom: 1rem;
}
.legal-list{
  margin: 0 0 1rem 0;
  padding-left: 1.2rem;
}
.legal-list li{
  margin: 0 0 .55rem 0;
  overflow-wrap: anywhere;
}
.legal-card code{
  font: inherit;
  color: var(--text-0);
  background: color-mix(in srgb, var(--surface), transparent 8%);
  border: 1px solid color-mix(in srgb, var(--border), transparent 16%);
  border-radius: 10px;
  padding: .05rem .38rem;
  overflow-wrap: anywhere;
}
.legal-meta{
  margin-bottom: 0;
  padding-top: .35rem;
  color: var(--text-2);
}
.legal-placeholder{
  margin-top: .9rem;
  padding: .95rem 1rem;
  border-radius: 16px;
  border: 1px dashed color-mix(in srgb, var(--accent-0), var(--border) 56%);
  background: color-mix(in srgb, var(--surface), transparent 16%);
}
.legal-linkback{
  display: inline-flex;
  margin-top: 1rem;
  color: var(--text-0);
  text-decoration: none;
}

@media (max-width: 1100px){
  #projekterfahrung .mp-exp-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 980px){
  #warum .mp-whyStory{ min-height: 150vh; }
  #vorgehen .mp-step-grid,
  #kontakt .mp-contact-shell{
    grid-template-columns: 1fr;
  }
  #vorgehen .mp-step-note{ position: static; }
}

@media (max-width: 780px){
  #warum .mp-whyStory{ min-height: auto; }
  #warum .mp-whyPin{
    position: relative;
    top: auto;
    min-height: auto;
  }
  #warum .mp-circleStage{
    min-height: auto;
    gap: 1rem;
  }
  #warum .mp-ring{
    width: min(92vw, 420px);
    margin: 0 auto 1rem;
  }
  #warum .mp-whyList{
    position: relative;
    display: grid;
    gap: .8rem;
  }
  #warum .mp-whyItem{
    position: relative;
    left: auto;
    top: auto;
    width: auto;
    transform: translateY(10px) scale(.98);
  }
  #warum .mp-whyItem.is-visible,
  #warum .mp-whyItem.is-active{
    transform: translateY(0) scale(1);
  }
  #projekterfahrung .mp-exp-panel-head{
    grid-template-columns: 1fr;
  }
  #projekterfahrung .mp-exp-panel-note{
    max-width: none;
  }
  .consent-banner{
    grid-template-columns: 1fr;
    align-items: start;
  }
}

@media (max-width: 640px){
  #projekterfahrung .mp-exp-grid,
  #kontakt .mp-contact-grid{
    grid-template-columns: 1fr;
  }
  #kontakt .mp-contact-consent{
    grid-template-columns: 1fr;
  }
  #kontakt .mp-contact-consent input{
    margin-top: 0;
  }
  #vorgehen .mp-step-timeline-head{
    flex-direction: column;
    align-items: flex-start;
  }
  #vorgehen .mp-step-timeline-sub{
    text-align: left;
  }
  .consent-shell{
    left: .75rem;
    right: .75rem;
    bottom: .75rem;
  }
  .consent-actions,
  .consent-panel-actions{
    flex-direction: column;
  }
  .consent-actions .btn,
  .consent-panel-actions .btn{
    width: 100%;
    justify-content: center;
  }
  .consent-option{
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce){
  #warum .mp-whyItem,
  #vorgehen .mp-step-card,
  #vorgehen .mp-step-dot,
  #projekterfahrung .mp-exp-card{
    transition: none;
  }
  #warum .mp-whyItem{
    opacity: 1;
    filter: none;
  }
  #vorgehen .mp-step-card{
    opacity: 1;
    transform: none;
  }
  #vorgehen .mp-step-line-progress{
    transform: scaleY(1);
  }
}