/* Funnel visual layer: full-width hero images + 2030 statement bands */

body.pg-page {
  --funnel-hero-image: url("/assets/images/funnels/cloud-data-vault.webp");
  --funnel-hero-position: center center;
  --funnel-veil-strong: rgba(6, 9, 13, 0.9);
  --funnel-veil-soft: rgba(6, 9, 13, 0.32);
}

html[data-theme="light"] body.pg-page {
  --funnel-veil-strong: rgba(246, 249, 246, 0.92);
  --funnel-veil-soft: rgba(246, 249, 246, 0.46);
}

.fn-hero.funnel-hero {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 100svh;
  width: 100%;
  padding: clamp(6.5rem, 13vh, 9rem) 0 clamp(5rem, 11vh, 8rem);
  overflow: hidden;
  isolation: isolate;
}

.fn-hero.funnel-hero::before,
.fn-hero.funnel-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.fn-hero.funnel-hero::before {
  z-index: -2;
  background-image: var(--funnel-hero-image);
  background-size: cover;
  background-position: var(--funnel-hero-position);
  transform: scale(1.04);
  filter: saturate(1.08) contrast(1.04) brightness(0.82);
}

.fn-hero.funnel-hero::after {
  z-index: -1;
  background:
    radial-gradient(circle at 72% 35%, rgba(52, 211, 153, 0.14), transparent 30%),
    linear-gradient(90deg, var(--funnel-veil-strong) 0%, rgba(6, 9, 13, 0.68) 38%, var(--funnel-veil-soft) 72%, rgba(6, 9, 13, 0.74) 100%),
    linear-gradient(180deg, rgba(6, 9, 13, 0.18) 0%, rgba(6, 9, 13, 0.3) 58%, rgba(6, 9, 13, 0.96) 100%);
}

html[data-theme="light"] .fn-hero.funnel-hero::before {
  filter: saturate(0.98) contrast(0.96) brightness(1.02);
}

html[data-theme="light"] .fn-hero.funnel-hero::after {
  background:
    linear-gradient(90deg, rgba(255,255,255,.94) 0%, rgba(255,255,255,.72) 38%, rgba(255,255,255,.34) 72%, rgba(255,255,255,.78) 100%),
    linear-gradient(180deg, rgba(255,255,255,.1) 0%, rgba(255,255,255,.28) 58%, rgba(255,255,255,.95) 100%);
}

.fn-hero.funnel-hero .pg-section__inner {
  position: relative;
  z-index: 2;
}

.funnel-parallax {
  position: relative;
  min-height: clamp(18rem, 42svh, 32rem);
  overflow: hidden;
  display: grid;
  place-items: center start;
  padding: clamp(3.5rem, 8vw, 6rem) clamp(1rem, 7vw, 6rem);
  isolation: isolate;
  background:
    linear-gradient(135deg, rgba(255,255,255,.055), rgba(255,255,255,.018) 46%, rgba(255,255,255,.04)),
    linear-gradient(90deg, rgba(6,9,13,.96), rgba(6,9,13,.86));
  border-top: 1px solid rgba(255,255,255,.075);
  border-bottom: 1px solid rgba(255,255,255,.075);
}

.funnel-parallax::before,
.funnel-parallax::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.funnel-parallax::before {
  z-index: -2;
  background:
    linear-gradient(120deg, color-mix(in srgb, var(--wa) 18%, transparent), transparent 36%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.045) 0 1px, transparent 1px 120px);
  opacity: .6;
}

.funnel-parallax::after {
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(255,255,255,.035), transparent 48%, rgba(0,0,0,.18)),
    radial-gradient(ellipse at 72% 50%, color-mix(in srgb, var(--wa) 24%, transparent), transparent 46%);
  opacity: .82;
}

.funnel-parallax__copy {
  width: min(940px, 100%);
  margin: 0;
  color: #f4fff9;
  text-shadow: 0 1px 28px rgba(0,0,0,.42);
}

.funnel-parallax__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--font-heading);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--wa);
  margin-bottom: .9rem;
}

.funnel-parallax__eyebrow::before {
  content: "";
  width: 2.6rem;
  height: 1px;
  background: currentColor;
  opacity: .75;
}

.funnel-parallax__quote {
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(1.55rem, 4vw, 3.35rem);
  line-height: 1.02;
  letter-spacing: -.035em;
  font-weight: 850;
  max-width: 18ch;
}

html[data-theme="light"] .funnel-parallax {
  background:
    linear-gradient(135deg, rgba(255,255,255,.86), rgba(255,255,255,.54) 46%, rgba(255,255,255,.72)),
    linear-gradient(90deg, rgba(246,249,246,.98), rgba(246,249,246,.9));
  border-color: rgba(0,0,0,.08);
}

html[data-theme="light"] .funnel-parallax__copy {
  color: #07120f;
  text-shadow: none;
}

.page-hero.funnel-local-hero {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  isolation: isolate;
}

.page-hero.funnel-local-hero .ph-media {
  display: none;
}

.page-hero.funnel-local-hero::before,
.page-hero.funnel-local-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.page-hero.funnel-local-hero::before {
  z-index: -2;
  background-image: var(--funnel-hero-image);
  background-size: cover;
  background-position: center center;
  filter: saturate(1.08) contrast(1.03) brightness(.78);
  transform: scale(1.035);
}

.page-hero.funnel-local-hero::after {
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(6,9,13,.92), rgba(6,9,13,.58) 42%, rgba(6,9,13,.2) 72%, rgba(6,9,13,.64)),
    linear-gradient(180deg, rgba(6,9,13,.08), rgba(6,9,13,.36) 68%, rgba(6,9,13,.96));
}

@media (max-width: 820px), (hover: none) {
  .fn-hero.funnel-hero {
    min-height: 86svh;
    padding-top: 6rem;
  }

  .funnel-parallax {
    min-height: auto;
    padding: 3rem 1rem;
  }

  .funnel-parallax__quote {
    max-width: 100%;
  }

  .page-hero.funnel-local-hero {
    min-height: 92svh;
  }
}

html[data-funnel="handwerk"] body {
  --funnel-hero-image: url("/assets/images/funnels/handwerk-mobile-it.webp");
  --funnel-hero-position: center center;
}

html[data-funnel="websites"] body,
html[data-funnel="website-handwerk"] body,
html[data-funnel="website-hausverwaltung"] body,
html[data-funnel="website-ohne-wordpress"] body {
  --funnel-hero-image: url("/assets/images/funnels/website-funnel-studio.webp");
  --funnel-hero-position: center center;
}

html[data-funnel="kundenportal"] body {
  --funnel-hero-image: url("/assets/images/funnels/customer-portal-workflow.webp");
  --funnel-hero-position: center center;
}

html[data-funnel="dateiablage"] body,
html[data-funnel="datenhoheit"] body,
html[data-funnel="eigene-cloud"] body,
html[data-funnel="nextcloud"] body {
  --funnel-hero-image: url("/assets/images/funnels/cloud-data-vault.webp");
  --funnel-hero-position: center center;
}

html[data-funnel="offline-ki"] body,
html[data-funnel="ki-wissensassistent"] body,
html[data-funnel="ki-mails-dokumente"] body,
html[data-funnel="ki-excel-csv"] body,
html[data-funnel="jemke-os"] body,
html[data-funnel="pilotmonat"] body,
html[data-funnel="tool-chaos"] body {
  --funnel-hero-image: url("/assets/images/funnels/local-ai-lab.webp");
  --funnel-hero-position: center center;
}

html[data-funnel="hausverwaltung"] body,
html[data-funnel="hoerakustiker"] body,
html[data-funnel="praxen"] body {
  --funnel-hero-image: url("/assets/images/funnels/professional-practice-it.webp");
  --funnel-hero-position: center center;
}

html[data-funnel="datenrettung"] body,
html[data-funnel="laptop-startet-nicht"] body,
html[data-funnel="notebook-langsam"] body,
html[data-funnel="smartphone-laedt-nicht"] body,
html[data-funnel="windows-10"] body {
  --funnel-hero-image: url("/assets/images/funnels/private-repair-bench.webp");
  --funnel-hero-position: center center;
}

html[data-funnel="vereine"] body,
html[data-funnel="vereins-app"] body {
  --funnel-hero-image: url("/assets/images/funnels/community-app-hall.webp");
  --funnel-hero-position: center center;
}

html[data-funnel="geraete-check"] body,
html[data-funnel="green-it-unternehmen"] body {
  --funnel-hero-image: url("/assets/images/funnels/green-device-check.webp");
  --funnel-hero-position: center center;
}

html[data-funnel="refurbished-iphone"] body,
html[data-funnel="refurbished-notebook"] body,
html[data-funnel="reparatur-statt-neukauf"] body {
  --funnel-hero-image: url("/assets/images/funnels/refurbished-device-counter.webp");
  --funnel-hero-position: center center;
}

html[data-funnel="weltreise"] body {
  --funnel-hero-image: url("/assets/images/funnels/smartphone-world-journey.webp");
  --funnel-hero-position: center center;
}

html[data-funnel="bornheim"] body,
html[data-funnel="fechenheim"] body,
html[data-funnel="ostend"] body {
  --funnel-hero-image: url("/assets/images/funnels/local-care-pickup-hero.webp");
  --funnel-hero-position: center center;
}

html[data-funnel="anleitung-wuenschen"] body,
html[data-funnel="jemke-plus"] body,
html[data-funnel="newsletter"] body {
  --funnel-hero-image: url("/assets/images/funnels/academy-knowledge-cockpit.webp");
  --funnel-hero-position: center center;
}

html[data-funnel="ai-journey"] body {
  --funnel-hero-image: url("/assets/images/funnels/local-ai-lab.webp");
  --funnel-hero-position: center center;
}


html[data-funnel="ai-journey"] .aj-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

html[data-funnel="ai-journey"] .aj-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: var(--funnel-hero-image);
  background-size: cover;
  background-position: center center;
  opacity: .48;
  filter: saturate(1.05) contrast(1.05) brightness(.72);
  transform: scale(1.03);
}

html[data-funnel="ai-journey"] .aj-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(6,9,13,.9), rgba(6,9,13,.6) 44%, rgba(6,9,13,.28) 70%, rgba(6,9,13,.72)),
    linear-gradient(180deg, rgba(6,9,13,.08), rgba(6,9,13,.4) 64%, rgba(6,9,13,.94));
}

html[data-funnel="geraete-check"] .gc-hero {
  min-height: 100svh;
  display: grid;
  align-items: center;
  isolation: isolate;
}

html[data-funnel="geraete-check"] .gc-hero-bg {
  background:
    linear-gradient(90deg, rgba(2,13,4,.9), rgba(2,13,4,.54) 44%, rgba(2,13,4,.26) 72%, rgba(2,13,4,.74)),
    linear-gradient(180deg, rgba(2,13,4,.06), rgba(2,13,4,.34) 62%, rgba(2,13,4,.94)),
    url("/assets/images/funnels/green-device-check.webp") center center / cover no-repeat;
  opacity: 1;
}

html[data-theme="light"][data-funnel="geraete-check"] .gc-hero-bg {
  background:
    linear-gradient(90deg, rgba(240,250,243,.92), rgba(240,250,243,.62) 48%, rgba(240,250,243,.32) 72%, rgba(240,250,243,.78)),
    linear-gradient(180deg, rgba(240,250,243,.08), rgba(240,250,243,.32) 62%, rgba(240,250,243,.94)),
    url("/assets/images/funnels/green-device-check.webp") center center / cover no-repeat;
}


html[data-funnel="weltreise"] .jw-hero {
  isolation: isolate;
}

html[data-funnel="weltreise"] .jw-hero__bg::before {
  background:
    linear-gradient(90deg, rgba(2,12,4,.92), rgba(2,12,4,.62) 42%, rgba(2,12,4,.28) 72%, rgba(2,12,4,.7)),
    linear-gradient(180deg, rgba(2,12,4,.08), rgba(2,12,4,.38) 64%, rgba(2,12,4,.96)),
    url("/assets/images/funnels/smartphone-world-journey.webp") center center / cover no-repeat;
  filter: saturate(1.08) contrast(1.04) brightness(.84);
}

/* ============================================================
   TRUE EDGE-TO-EDGE — jede Bildschirmbreite, auch 4K
   ============================================================ */

/* 1. Das styles.css-Limit (1200px auf main) aufheben */
html[data-funnel] main,
html[data-funnel] .pg-main {
  width: 100% !important;
  max-width: 100% !important;
  margin-inline: 0 !important;
}

/* 2. Hero: wirklich full-bleed, Inhalt linksbündig mit Atemraum */
.fn-hero.funnel-hero {
  width: 100%;
}
.fn-hero.funnel-hero .pg-section__inner,
.fn-hero.funnel-hero .pg-section__inner--narrow {
  max-width: none !important;
  width: 100%;
  padding-inline: clamp(1.5rem, 8vw, 10rem);
  text-align: left;
}
.fn-hero.funnel-hero .pg-eyebrow { justify-content: flex-start }
.fn-hero.funnel-hero .fn-h1 {
  max-width: 18ch;
  margin: .6rem 0 1.1rem;
  font-size: clamp(2.3rem, 5vw, 5.5rem);
  line-height: 1.02;
  text-align: left;
}
.fn-hero.funnel-hero .fn-sub {
  max-width: 58ch;
  margin: 0 0 2.2rem;
  text-align: left;
  font-size: clamp(1.05rem, 1.4vw, 1.35rem);
}
.fn-hero.funnel-hero .fn-ctarow { justify-content: flex-start }

/* 3. Alle Sektionen: full-width, groß padden, Inhalt zentriert im Strom */
[data-funnel] .pg-section {
  padding-block: clamp(3.5rem, 7vw, 7rem);
  padding-inline: 0;
}
[data-funnel] .pg-section__inner {
  max-width: min(1440px, 88vw);
  margin-inline: auto;
}
[data-funnel] .pg-section__inner--narrow {
  max-width: min(960px, 86vw);
  margin-inline: auto;
}
[data-funnel] .fn-offer { max-width: min(960px, 86vw); margin-inline: auto; }
[data-funnel] .fn-prose { max-width: 72ch }
[data-funnel] .pg-section__head .pg-h2 { font-size: clamp(1.8rem, 3vw, 3rem) }
[data-funnel] .pg-section__head .pg-lead { font-size: clamp(1rem, 1.4vw, 1.25rem) }

/* 4. Statement-Band (funnel-parallax) auch edge-to-edge */
[data-funnel] .funnel-parallax {
  padding-inline: clamp(1.5rem, 8vw, 10rem);
}

/* 5. Karten + Grid luftiger auf großen Screens */
@media(min-width: 1440px) {
  [data-funnel] .pg-grid--3 { grid-template-columns: repeat(3,1fr); gap: 1.6rem }
  [data-funnel] .pg-grid--2 { gap: 2rem }
  [data-funnel] .pg-card { padding: 2rem 2.2rem }
  [data-funnel] .pg-card__title { font-size: 1.15rem }
  [data-funnel] .pg-card__body { font-size: .98rem }
}

/* Mobil: Padding wieder eng */
@media(max-width: 820px), (hover: none) {
  .fn-hero.funnel-hero .pg-section__inner,
  .fn-hero.funnel-hero .pg-section__inner--narrow {
    padding-inline: clamp(1.2rem, 5vw, 2rem);
  }
  [data-funnel] .pg-section { padding-block: clamp(2.5rem, 8vw, 4rem) }
}