/* ============================================================================
   DESIGN V2 — heller Hero mit Aurora, dunkle Glow-Sektionen, Bento-Grid,
   magnetische Buttons, Parallax. Lädt nach style.css.
   ============================================================================ */
:root {
  --c-navy:        #132547;
  --c-navy-deep:   #0b1730;
  --c-blue:        #2155a3;
  --c-teal:        #15c0d8;
  --c-teal-deep:   #0a7488;
  --c-ink:         #132547;
  --c-text:        #1b2435;
  --c-muted:       #4a5468;
  --c-line:        #d4dbe6;
  --c-line-strong: #b4c0d2;
  --c-bg-soft:     #eef3f8;
  --c-bg-tint:     #e3edf4;
  --c-focus:       #0a7488;

  --cyan:   #22d3ee;
  --dark:   #0b1730;
  --dark-2: #101f3d;
  --on-dark:       #e9eef7;
  --on-dark-muted: #9fb0cc;
  --grad: linear-gradient(120deg, #0a7488 0%, #1d4fa0 100%);
  --grad-text: linear-gradient(100deg, #0891b2 0%, #2b59e0 100%);
  --r-lg: 20px;
}

/* ---------------------------------------------------------------- Header */
.site-header {
  background: rgba(255,255,255,.78);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid rgba(19,37,71,.08);
}

/* ---------------------------------------------------------------- Buttons */
.btn { border-radius: 12px; font-weight: 700; }
.btn--primary {
  background: var(--grad);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 10px 26px -12px rgba(29,79,160,.7);
  transition: box-shadow .2s ease, filter .2s ease, transform .15s ease;
}
.btn--primary:hover {
  background: var(--grad);
  color: #fff;
  filter: brightness(1.08);
  box-shadow: 0 14px 34px -12px rgba(10,116,136,.85);
}
.btn--secondary {
  background: #fff;
  border: 1.5px solid var(--c-navy);
  color: var(--c-navy);
}
.btn--secondary:hover { background: var(--c-navy); color: #fff; }
/* Kopfzeilen-Button bleibt ruhig dunkel */
.nav-cta.btn--primary { background: var(--c-navy); box-shadow: none; }
.nav-cta.btn--primary:hover { background: var(--c-navy-deep); }

/* ---------------------------------------------------------------- Eyebrow */
.eyebrow { color: var(--c-teal-deep); }
.eyebrow { padding-left: 0; letter-spacing: .14em; }
.eyebrow::before { content: none; display: none; }

/* ============================================================ HERO + AURORA */
.hero { position: relative; overflow: hidden; background: #fff; isolation: isolate; }
.hero__glow { display: none; }
.aurora { position: absolute; inset: -10% -5% auto; height: 120%; z-index: -1; pointer-events: none; }
.aurora__blob {
  position: absolute; border-radius: 50%;
  filter: blur(70px); opacity: .55; will-change: transform;
}
.aurora__blob--1 { width: 520px; height: 520px; right: 4%;  top: -6%;  background: #7ee6f4; }
.aurora__blob--2 { width: 440px; height: 440px; right: 28%; top: 30%;  background: #9db8ff; opacity: .45; }
.aurora__blob--3 { width: 380px; height: 380px; left: -6%;  bottom: 0;  background: #b8f0f7; opacity: .5; }
@media (prefers-reduced-motion: no-preference) {
  .aurora__blob--1 { animation: drift1 16s ease-in-out infinite alternate; }
  .aurora__blob--2 { animation: drift2 19s ease-in-out infinite alternate; }
  .aurora__blob--3 { animation: drift3 22s ease-in-out infinite alternate; }
}
@keyframes drift1 { to { transform: translate(-90px, 70px) scale(1.12); } }
@keyframes drift2 { to { transform: translate(110px, -60px) scale(.9); } }
@keyframes drift3 { to { transform: translate(80px, -50px) scale(1.15); } }
.grad-text {
  background: var(--grad-text);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
/* Porträt mit Verlaufsrahmen und schwebenden Chips */
.hero__media { position: relative; }
.hero .portrait {
  border: none; border-radius: 24px; padding: 6px;
  background: linear-gradient(140deg, var(--cyan), #2155a3);
  box-shadow: 0 30px 60px -28px rgba(19,37,71,.55);
}
.hero .portrait img { border-radius: 19px; }
.chip {
  position: absolute; z-index: 2;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 14px; border-radius: 14px;
  background: #fff;
  border: 1px solid rgba(19,37,71,.08);
  box-shadow: 0 12px 28px -14px rgba(19,37,71,.45);
  font-size: var(--fs-sm); font-weight: 700; color: var(--c-navy);
  white-space: nowrap;
}
.chip--a { left: -28px; top: 14%; }
.chip--b { right: -20px; bottom: 12%; }
.chip svg { width: 18px; height: 18px; color: var(--c-teal-deep); }

/* ============================================================ DUNKLE SEKTION */
.section--dark {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--dark);
  color: var(--on-dark);
  border: none;
}
.section--dark::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(40% 50% at 85% 0%, rgba(34,211,238,.18), transparent 70%),
    radial-gradient(45% 55% at 0% 100%, rgba(33,85,163,.30), transparent 70%);
}
.section--dark h2, .section--dark h3 { color: #fff; }
.section--dark .lede, .section--dark p { color: var(--on-dark-muted); }
.section--dark .eyebrow { color: var(--cyan); }

/* ============================================================ BENTO-GRID */
.bento {
  display: grid; gap: 16px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-areas:
    "sw sw web web"
    "sw sw shop mkt"
    "seo seo gr stat";
}
.tile {
  --mx: 50%; --my: 50%;
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  padding: 28px;
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.025));
  border: 1px solid rgba(255,255,255,.09);
  color: var(--on-dark);
  text-decoration: none;
  transition: border-color .25s ease, transform .25s ease;
}
/* Leuchten folgt der Maus */
.tile::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(380px circle at var(--mx) var(--my), rgba(34,211,238,.11), transparent 45%);
  opacity: 0; transition: opacity .3s ease;
}
.tile:hover { border-color: rgba(34,211,238,.45); transform: translateY(-3px); text-decoration: none; }
.tile:hover::before { opacity: 1; }
.tile h3 { font-size: 1.45rem; margin: 0 0 10px; color: #fff; letter-spacing: -.01em; }
.tile p { margin: 0; font-size: var(--fs-sm); line-height: 1.6; color: var(--on-dark-muted); }
.tile__more {
  margin-top: auto; padding-top: 18px;
  font-size: var(--fs-sm); font-weight: 700; color: var(--cyan);
  display: inline-flex; align-items: center; gap: 6px;
}
.tile__more::after { content: "→"; transition: transform .2s ease; }
.tile:hover .tile__more::after { transform: translateX(4px); }

.tile--sw  { grid-area: sw; padding-right: 0; padding-bottom: 0;
  background:
    radial-gradient(70% 60% at 100% 100%, rgba(34,211,238,.20), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.025));
  border-color: rgba(34,211,238,.30);
}
.tile--web { grid-area: web; }
.tile--shop{ grid-area: shop; }
.tile--mkt { grid-area: mkt; }
.tile--seo { grid-area: seo; }
.tile--gr  { grid-area: gr; }
.tile--stat{ grid-area: stat; justify-content: center;
  background: var(--grad); border-color: transparent;
}
.tile--stat:hover { border-color: transparent; }
.tile__big { font-size: clamp(2.6rem, 4vw, 3.4rem); font-weight: 800; line-height: 1; color: #fff; letter-spacing: -.03em; }
.tile--stat p { color: rgba(255,255,255,.88); margin-top: 8px; }

.tile--sw h3 { font-size: clamp(1.6rem, 2.4vw, 2rem); }
.tile--sw p { font-size: 1rem; max-width: 34ch; }
.tile--sw .tile__body { padding-right: 28px; }
.tile__shot {
  margin-top: 24px; align-self: flex-end;
  width: min(62%, 300px);
  border-radius: 18px 0 0 0;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.14); border-right: 0; border-bottom: 0;
  box-shadow: 0 -10px 40px -10px rgba(0,0,0,.5);
  transform: translateY(10px);
  transition: transform .35s ease;
}
.tile--sw:hover .tile__shot { transform: translateY(0); }
.tile__shot img { display: block; width: 100%; height: auto; }
.tile--sw .tile__row { display: flex; gap: 20px; align-items: stretch; flex: 1; }
.tile--sw .tile__body { display: flex; flex-direction: column; padding-bottom: 28px; flex: 1; min-width: 0; }
.tile--sw .tile__shot { align-self: flex-end; flex: 0 0 210px; width: 210px; }

@media (max-width: 960px) {
  .bento {
    grid-template-columns: repeat(2, minmax(0,1fr));
    grid-template-areas:
      "sw sw" "web web" "shop mkt" "seo seo" "gr stat";
  }
}
@media (max-width: 620px) {
  .bento { grid-template-columns: 1fr;
    grid-template-areas: "sw" "web" "shop" "mkt" "seo" "gr" "stat"; }
  .tile { padding: 22px; }
  .tile--sw .tile__row { flex-direction: column; align-items: stretch; }
  .tile--sw .tile__body { flex: none; padding-bottom: 0; }
  .tile--sw .tile__row { gap: 0; }
  .tile--sw .tile__shot { flex: none; width: 72%; margin-top: 22px; }
}

/* ============================================================ ABLAUF */
.steps > li::before {
  background: var(--grad); color: #fff; border: none;
  box-shadow: 0 6px 16px -6px rgba(29,79,160,.6);
}

/* Kasten "Das höre ich immer wieder" / card--flat mit Verlaufskante */
.card--flat {
  position: relative; border: 1px solid var(--c-line); border-radius: var(--r-lg);
  background: #fff; box-shadow: 0 18px 40px -26px rgba(19,37,71,.35);
}

/* weißer statt grauer Wechsel-Hintergrund, leicht bläulich */
.section--alt { background: var(--c-bg-soft); border: none; }

/* ============================================================ CTA + FOOTER */
.cta-band {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--dark);
  margin: 0; border-radius: 0;
  padding-block: clamp(4rem, 8vw, 6.5rem);
  color: var(--on-dark);
}
.cta-band::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(45% 80% at 90% 0%, rgba(34,211,238,.22), transparent 70%),
    radial-gradient(40% 70% at 5% 100%, rgba(33,85,163,.35), transparent 70%);
}
.cta-band::after { content: none; }
.cta-band h2 { color: #fff; font-size: clamp(2rem, 4.2vw, 3.2rem); max-width: 18ch; }
.cta-band p { color: var(--on-dark-muted); max-width: 56ch; }
.cta-band .btn--primary {
  background: var(--cyan); color: var(--dark);
  box-shadow: 0 0 0 0 rgba(34,211,238,.5), 0 14px 34px -12px rgba(34,211,238,.7);
}
.cta-band .btn--primary:hover { background: #5ee3f5; color: var(--dark); filter: none; }
.cta-band .btn--ghost { color: #fff; border-color: rgba(255,255,255,.35); }
.cta-band .btn--ghost:hover { border-color: #fff; background: rgba(255,255,255,.06); }

.site-footer {
  position: relative;
  background: var(--dark) !important;
  border-top: none;
}
.site-footer::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: min(1100px, 92%); height: 1px;
  background: linear-gradient(90deg, transparent, rgba(34,211,238,.6), transparent);
}

/* ============================================================ PARALLAX/MAGNET */
[data-parallax] { will-change: transform; }
.btn--magnetic { will-change: transform; }

@media (max-width: 960px) {
  .chip--a { left: 8px; top: 10px; }
  .chip--b { right: 8px; bottom: 10px; }
  .aurora__blob { filter: blur(60px); }
  .aurora__blob--1 { width: 340px; height: 340px; }
  .aurora__blob--2 { width: 280px; height: 280px; }
  .aurora__blob--3 { width: 260px; height: 260px; }
}
@media (prefers-reduced-motion: reduce) {
  .tile, .tile__shot, .btn--primary { transition: none; }
}

/* ============================================================ UNTERSEITEN-KOPF */
.page-hero { position: relative; overflow: hidden; isolation: isolate; background: #fff; }
.page-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(38% 90% at 92% 0%, rgba(126,230,244,.42), transparent 70%),
    radial-gradient(30% 70% at 70% 100%, rgba(157,184,255,.28), transparent 70%);
}

/* ============================================================ SOFTWARE-SHOWCASE DUNKEL */
.section--dark .produkt-karte {
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.025));
  border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--r-lg);
  transition: border-color .25s ease, transform .25s ease;
}
.section--dark .produkt-karte:hover { border-color: rgba(34,211,238,.45); transform: translateY(-3px); }
.section--dark .produkt-karte__branche { color: var(--cyan); }
.section--dark .produkt-karte__bild img { border-color: rgba(255,255,255,.14); }
.section--dark .list-check li { color: var(--on-dark); }
.section--dark .list-check li::before { border-color: var(--cyan); }
.section--dark .text-muted { color: var(--on-dark-muted); }
.section--dark .btn--primary {
  background: var(--cyan); color: var(--dark);
  box-shadow: 0 14px 34px -14px rgba(34,211,238,.7);
}
.section--dark .btn--primary:hover { background: #5ee3f5; color: var(--dark); filter: none; }
.section--dark .ph-phone {
  background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.18); color: var(--on-dark-muted);
}
.section--dark .ph-phone__label { color: #fff; }

/* ============================================================ ZWEI WEGE: schlichtes Label */
.weg-karte { padding-top: var(--sp-6); }
.weg-karte__nr {
  position: static; width: auto; height: auto; display: block;
  background: none; box-shadow: none; border-radius: 0;
  color: var(--c-teal-deep); font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; margin-bottom: 6px;
}
.weg-karte--akzent .weg-karte__nr { background: none; color: var(--c-blue); }
.weg-karte--akzent { border-color: var(--c-blue); box-shadow: 0 18px 40px -26px rgba(33,85,163,.55); }
.tile--stat .tile__more { color: #fff; }

/* ============================================================ GHOST-BUTTON EINHEITLICH
   Auf hellem Grund: umrandet wie Sekundär. Auf dunklem Grund: hell umrandet. */
.btn--ghost {
  background: transparent; color: var(--c-navy);
  border: 1.5px solid var(--c-navy); box-shadow: none;
}
.btn--ghost:hover { background: var(--c-navy); color: #fff; border-color: var(--c-navy); }
.cta-band .btn--ghost,
.section--dark .btn--ghost {
  background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.4);
}
.cta-band .btn--ghost:hover,
.section--dark .btn--ghost:hover { background: rgba(255,255,255,.08); border-color: #fff; color: #fff; }