:root{
  --bg:#071018;
  --bg2:#0b1722;
  --card:#111d28cc;
  --card2:#0f1a24;
  --text:#f4f7f1;
  --muted:#b9c2b6;
  --green:#9be042;
  --green2:#72bd23;
  --orange:#ff8a1f;
  --line:#263847;
  --shadow:0 28px 80px rgba(0,0,0,.45);
  --max:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:radial-gradient(circle at 70% 10%,rgba(109,189,35,.18),transparent 32rem),linear-gradient(180deg,#050b12 0%,var(--bg) 45%,#071018 100%);color:var(--text);line-height:1.55;min-height:100vh;overflow-x:hidden}
body:before{content:"";position:fixed;inset:0;background-image:radial-gradient(rgba(155,224,66,.18) 1px,transparent 1px);background-size:28px 28px;mask-image:linear-gradient(90deg,transparent,black 55%,transparent);opacity:.24;pointer-events:none}
a{color:inherit;text-decoration:none}.section-shell{width:min(var(--max),calc(100% - 48px));margin-inline:auto}.skip-link{position:absolute;left:16px;top:-80px;background:var(--green);color:#071018;padding:10px 14px;border-radius:10px;z-index:99}.skip-link:focus{top:16px}.site-header{width:min(var(--max),calc(100% - 48px));margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:26px;padding:24px 0 16px;position:relative;z-index:3}.brand{display:flex;align-items:center;gap:12px}.brand-mark{width:42px;height:42px;background:linear-gradient(135deg,var(--green),var(--green2));clip-path:polygon(0 0,55% 0,55% 24%,78% 24%,78% 48%,55% 48%,55% 72%,100% 72%,100% 100%,0 100%);display:grid;place-items:center;color:transparent;filter:drop-shadow(0 0 18px rgba(155,224,66,.3))}.brand-text{display:flex;flex-direction:column;line-height:1.05}.brand-text strong{font-size:1.55rem;letter-spacing:-.04em}.brand-text small{color:var(--green);font-weight:700}.nav{display:flex;gap:34px;color:#f7f7f7;font-weight:650}.nav a{opacity:.92}.nav a:hover{color:var(--green)}.header-cta,.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;border-radius:10px;font-weight:800;min-height:48px;padding:0 22px;border:1px solid transparent}.header-cta,.btn.primary{background:linear-gradient(135deg,var(--green),var(--green2));color:#071018;box-shadow:0 12px 32px rgba(114,189,35,.24)}.btn.ghost{background:transparent;border-color:rgba(244,247,241,.38);color:var(--text)}.btn.ghost:hover{border-color:var(--green);color:var(--green)}.hero{display:grid;grid-template-columns:1fr .98fr;gap:50px;align-items:center;padding:64px 0 46px;min-height:610px;position:relative}.eyebrow,.section-kicker{color:var(--green);text-transform:uppercase;font-weight:900;letter-spacing:.055em;font-size:.86rem}.hero h1{font-size:clamp(3.1rem,7vw,5.2rem);line-height:1.04;margin:18px 0 22px;letter-spacing:-.06em;max-width:760px}.hero h1 span{color:var(--green)}.hero-text{max-width:560px;font-size:1.16rem;color:#d5ddd0;margin:0 0 30px}.actions{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:28px}.benefit-row{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;max-width:700px}.benefit-row div{display:grid;grid-template-columns:auto 1fr;column-gap:11px}.benefit-row .mini-icon{grid-row:span 2;color:var(--green);border:1px solid var(--green);border-radius:99px;width:27px;height:27px;display:grid;place-items:center;font-weight:900}.benefit-row strong{font-size:1rem}.benefit-row small{color:var(--muted)}.hero-art{position:relative;min-height:520px}.mascot{position:absolute;right:-32px;bottom:-8px;width:min(42vw,380px);height:auto;filter:drop-shadow(0 28px 42px rgba(0,0,0,.45));z-index:2}.hero-art:after{content:"";position:absolute;right:-60px;bottom:0;width:540px;height:120px;background:linear-gradient(180deg,rgba(255,138,31,.08),rgba(0,0,0,.25));border-radius:50%;filter:blur(12px)}.workflow-map{position:absolute;inset:10px 60px 80px 0;border-radius:26px;background:radial-gradient(circle at 45% 45%,rgba(155,224,66,.18),transparent 13rem);opacity:.95}.node{position:absolute;width:155px;min-height:86px;padding:12px 13px;border:1px solid rgba(155,224,66,.42);background:linear-gradient(180deg,rgba(17,29,40,.88),rgba(8,18,27,.72));box-shadow:0 0 35px rgba(155,224,66,.14);border-radius:13px;color:var(--text);font-size:.8rem}.node b{color:var(--green);font-size:1.35rem;display:block}.node span{font-weight:850;display:block}.node small{color:var(--muted)}.node-mail{left:80px;top:0}.node-ai{left:210px;top:130px;width:180px;min-height:115px;text-align:center}.node-task{right:15px;top:60px}.node-data{left:40px;bottom:105px}.node-result{right:60px;bottom:85px}.line{position:absolute;background:rgba(155,224,66,.35);height:2px;transform-origin:left}.line-a{left:220px;top:95px;width:120px;transform:rotate(42deg)}.line-b{left:145px;top:290px;width:120px;transform:rotate(-28deg)}.line-c{left:390px;top:180px;width:120px;transform:rotate(-32deg)}.line-d{left:375px;top:255px;width:115px;transform:rotate(28deg)}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;padding:18px 0 42px}.card{position:relative;background:linear-gradient(180deg,rgba(19,31,43,.92),rgba(9,18,28,.86));border:1px solid rgba(244,247,241,.12);border-bottom-color:rgba(155,224,66,.46);border-radius:15px;padding:34px 32px 30px;min-height:190px;box-shadow:var(--shadow)}.card-icon{width:78px;height:78px;border-radius:999px;background:rgba(255,255,255,.04);border:1px solid rgba(155,224,66,.22);color:var(--green);display:grid;place-items:center;font-size:2.4rem;margin-bottom:18px}.card h3{font-size:1.38rem;margin:0 0 8px}.card p{color:var(--muted);margin:0;max-width:280px}.card a{position:absolute;right:26px;bottom:28px;color:var(--green);font-size:1.5rem}.process{padding:28px 0 42px;text-align:center}.process h2{font-size:clamp(1.9rem,4vw,2.55rem);line-height:1.1;margin:8px 0 28px;letter-spacing:-.03em}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;text-align:left}.steps article{position:relative;display:grid;grid-template-columns:auto 1fr;gap:0 18px;align-items:start}.steps article:not(:last-child):after{content:"→";position:absolute;right:-20px;top:22px;color:rgba(255,255,255,.42);font-size:2rem}.steps span{grid-row:span 3;width:44px;height:44px;border-radius:99px;background:#182331;border:1px solid rgba(255,255,255,.12);color:var(--green);display:grid;place-items:center;font-size:1.35rem;font-weight:900}.steps h3{margin:0 0 6px;font-size:1.2rem}.steps p{margin:0;color:var(--muted)}.industries{display:grid;grid-template-columns:.9fr 1fr;gap:40px;align-items:center;margin-top:10px;padding:38px;border:1px solid rgba(255,255,255,.12);border-radius:18px;background:linear-gradient(135deg,rgba(17,29,40,.84),rgba(7,16,24,.4))}.industries h2{font-size:clamp(1.8rem,3vw,2.5rem);line-height:1.12;margin:8px 0 12px}.industries p{color:var(--muted);max-width:560px}.industries ul{display:grid;gap:13px;margin:0;padding:0;list-style:none}.industries li{background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:14px 16px}.industries li:before{content:"✓";color:var(--green);font-weight:900;margin-right:10px}.final-cta{margin-top:42px;margin-bottom:24px;padding:34px 38px;border:1px solid rgba(155,224,66,.25);border-radius:18px;background:linear-gradient(90deg,rgba(33,70,30,.64),rgba(12,25,34,.86));display:flex;align-items:center;justify-content:space-between;gap:30px;box-shadow:var(--shadow);position:relative;overflow:hidden}.final-cta:before{content:"";position:absolute;left:0;top:28px;height:82px;width:3px;background:var(--green)}.final-cta h2{font-size:clamp(1.8rem,3vw,2.45rem);line-height:1.08;margin:0 0 8px}.final-cta p{margin:0;color:#d9e1d3}.site-footer{display:flex;justify-content:space-between;gap:20px;padding:22px 0 36px;color:#9da89a;font-size:.92rem}.site-footer a:hover{color:var(--green)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media (max-width:980px){.site-header{align-items:flex-start}.nav{display:none}.hero{grid-template-columns:1fr;padding-top:36px}.hero-art{min-height:430px}.mascot{right:0;width:min(58vw,360px)}.workflow-map{inset:0 10px 70px 0}.cards,.steps,.industries{grid-template-columns:1fr}.steps article:not(:last-child):after{display:none}.benefit-row{grid-template-columns:1fr}.final-cta{flex-direction:column;align-items:flex-start}.header-cta{display:none}}
@media (max-width:620px){.section-shell,.site-header{width:min(100% - 28px,var(--max))}.brand-text strong{font-size:1.25rem}.hero h1{font-size:2.65rem}.actions{display:grid}.btn{width:100%}.hero-art{min-height:360px}.workflow-map{display:none}.mascot{left:50%;right:auto;transform:translateX(-50%);width:min(78vw,310px);opacity:.95}.cards{gap:16px}.card{padding:26px 22px}.site-footer{flex-direction:column}.industries,.final-cta{padding:26px 22px}}

/* PIXEL-FISCHI HERO BACKGROUND FINAL 20260707_235533 */

body {
  background: #050b12 !important;
}

body::before {
  opacity: .12 !important;
}

.hero,
.hero-final-layout {
  position: relative !important;
  display: block !important;
  min-height: 650px !important;
  padding: 72px 0 72px !important;
  overflow: hidden !important;
  isolation: isolate !important;
  background-color: #050b12 !important;
  background-image:
    linear-gradient(90deg,
      rgba(5,11,18,.98) 0%,
      rgba(5,11,18,.94) 25%,
      rgba(5,11,18,.72) 43%,
      rgba(5,11,18,.22) 62%,
      rgba(5,11,18,.08) 100%
    ),
    radial-gradient(circle at 74% 42%, rgba(155,224,66,.12), transparent 34rem),
    url("assets/Pixel-Hero.png?v=20260707_235533") !important;
  background-repeat: no-repeat, no-repeat, no-repeat !important;
  background-size: cover, cover, auto 112% !important;
  background-position: center, center, right center !important;
  border-radius: 0 !important;
}

.hero::after,
.hero-final-layout::after {
  content: "" !important;
  position: absolute !important;
  inset: auto 0 0 0 !important;
  height: 140px !important;
  background: linear-gradient(180deg, rgba(5,11,18,0), #050b12 86%) !important;
  z-index: -1 !important;
  pointer-events: none !important;
}

.hero-copy {
  position: relative !important;
  z-index: 2 !important;
  max-width: 690px !important;
  padding: 0 !important;
}

.hero h1 {
  font-size: clamp(3.4rem, 5.6vw, 5.45rem) !important;
  line-height: 1.02 !important;
  letter-spacing: -0.06em !important;
  max-width: 720px !important;
}

.hero-text {
  max-width: 560px !important;
  font-size: 1.18rem !important;
}

.benefit-row {
  max-width: 650px !important;
}

/* rechter Bildcontainer wird nicht mehr gebraucht, weil Bild jetzt Hintergrund ist */
.hero-art,
.hero-art-final,
.hero-visual,
.workflow-map,
.node,
.line,
.mascot,
.hero-final-img,
.hero-pixel-image {
  display: none !important;
}

.cards {
  margin-top: 0 !important;
  padding-top: 26px !important;
}

@media (max-width: 980px) {
  .hero,
  .hero-final-layout {
    min-height: auto !important;
    padding: 54px 0 420px !important;
    background-image:
      linear-gradient(180deg,
        rgba(5,11,18,.98) 0%,
        rgba(5,11,18,.94) 46%,
        rgba(5,11,18,.55) 70%,
        rgba(5,11,18,.15) 100%
      ),
      url("assets/Pixel-Hero.png?v=20260707_235533") !important;
    background-size: cover, 760px auto !important;
    background-position: center, center bottom !important;
  }

  .hero-copy {
    max-width: 820px !important;
  }
}

@media (max-width: 620px) {
  .hero,
  .hero-final-layout {
    padding: 42px 0 330px !important;
    background-size: cover, 620px auto !important;
    background-position: center, center bottom !important;
  }

  .hero h1 {
    font-size: 2.7rem !important;
    line-height: 1.06 !important;
  }

  .benefit-row {
    grid-template-columns: 1fr !important;
  }
}


/* PIXEL-FISCHI WIDE COMPACT LAYOUT 20260707_235954 */

/* Grundbreite deutlich näher ans Mockup */
:root {
  --max: 1480px !important;
}

body {
  background:
    radial-gradient(circle at 78% 18%, rgba(155,224,66,.14), transparent 34rem),
    radial-gradient(circle at 22% 80%, rgba(255,138,31,.06), transparent 30rem),
    linear-gradient(180deg, #050b12 0%, #071018 48%, #050b12 100%) !important;
}

.section-shell,
.site-header {
  width: min(var(--max), calc(100% - 96px)) !important;
  margin-inline: auto !important;
}

/* Header kompakter und breiter */
.site-header {
  padding: 22px 0 10px !important;
}

.brand-mark {
  width: 42px !important;
  height: 42px !important;
}

.brand-text strong {
  font-size: 1.45rem !important;
}

.brand-text small {
  font-size: .78rem !important;
}

.nav {
  gap: 42px !important;
  font-size: .96rem !important;
}

.header-cta {
  min-height: 46px !important;
  padding-inline: 24px !important;
}

/* Hero als breite Fläche, Bild hinten/rechts, Text auf eigener Ebene */
.hero,
.hero-final-layout {
  position: relative !important;
  display: block !important;
  min-height: 560px !important;
  padding: 48px 0 42px !important;
  overflow: hidden !important;
  isolation: isolate !important;
  background-color: #050b12 !important;
  background-image:
    linear-gradient(90deg,
      rgba(5,11,18,.98) 0%,
      rgba(5,11,18,.94) 25%,
      rgba(5,11,18,.70) 43%,
      rgba(5,11,18,.22) 59%,
      rgba(5,11,18,.02) 100%
    ),
    url("assets/Pixel-Hero.png?v=20260707_235954") !important;
  background-repeat: no-repeat, no-repeat !important;
  background-size: cover, auto 104% !important;
  background-position: center, right center !important;
  border-radius: 0 !important;
}

.hero-copy {
  position: relative !important;
  z-index: 2 !important;
  max-width: 660px !important;
  padding: 0 !important;
}

.eyebrow {
  font-size: .82rem !important;
  margin-bottom: 0 !important;
}

.hero h1 {
  font-size: clamp(2.85rem, 4.55vw, 4.85rem) !important;
  line-height: 1.04 !important;
  letter-spacing: -0.055em !important;
  max-width: 670px !important;
  margin: 18px 0 20px !important;
}

.hero-text {
  max-width: 555px !important;
  font-size: 1.08rem !important;
  line-height: 1.55 !important;
  margin-bottom: 26px !important;
}

.actions {
  margin-bottom: 24px !important;
}

.btn {
  min-height: 48px !important;
  padding: 0 24px !important;
}

.benefit-row {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 28px !important;
  max-width: 660px !important;
}

.benefit-row strong {
  font-size: .98rem !important;
}

.benefit-row small {
  font-size: .88rem !important;
  line-height: 1.35 !important;
}

/* Rechte alten Container komplett weg, Bild ist Hero-Hintergrund */
.hero-art,
.hero-art-final,
.hero-visual,
.workflow-map,
.node,
.line,
.mascot,
.hero-final-img,
.hero-pixel-image {
  display: none !important;
}

/* Leistungs-Karten kleiner und näher ans Mockup */
.cards {
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 24px !important;
  padding: 28px 0 34px !important;
}

.card {
  min-height: 155px !important;
  padding: 28px 30px 24px !important;
  border-radius: 14px !important;
}

.card-icon {
  width: 66px !important;
  height: 66px !important;
  font-size: 2rem !important;
  margin-bottom: 14px !important;
}

.card h3 {
  font-size: 1.25rem !important;
  margin-bottom: 6px !important;
}

.card p {
  font-size: .96rem !important;
  line-height: 1.45 !important;
}

/* Ablauf kompakter */
.process {
  padding: 20px 0 34px !important;
}

.process h2 {
  font-size: clamp(1.75rem, 2.8vw, 2.25rem) !important;
  margin-bottom: 24px !important;
}

.steps {
  gap: 42px !important;
}

.steps h3 {
  font-size: 1.08rem !important;
}

.steps p {
  font-size: .92rem !important;
  line-height: 1.42 !important;
}

/* Untere Boxen kompakter */
.industries {
  padding: 32px !important;
  margin-top: 8px !important;
}

.final-cta {
  margin-top: 34px !important;
  padding: 30px 34px !important;
}

.final-cta h2 {
  font-size: clamp(1.6rem, 2.8vw, 2.25rem) !important;
}

/* Bei mittleren Bildschirmen nicht wieder kaputtquetschen */
@media (max-width: 1200px) {
  .section-shell,
  .site-header {
    width: min(var(--max), calc(100% - 56px)) !important;
  }

  .hero,
  .hero-final-layout {
    min-height: 560px !important;
    background-size: cover, auto 94% !important;
    background-position: center, right center !important;
  }

  .hero-copy {
    max-width: 620px !important;
  }

  .hero h1 {
    font-size: clamp(2.8rem, 5vw, 4.3rem) !important;
    max-width: 610px !important;
  }
}

@media (max-width: 980px) {
  .hero,
  .hero-final-layout {
    min-height: auto !important;
    padding: 44px 0 390px !important;
    background-image:
      linear-gradient(180deg,
        rgba(5,11,18,.98) 0%,
        rgba(5,11,18,.94) 45%,
        rgba(5,11,18,.55) 72%,
        rgba(5,11,18,.12) 100%
      ),
      url("assets/Pixel-Hero.png?v=20260707_235954") !important;
    background-size: cover, 720px auto !important;
    background-position: center, center bottom !important;
  }

  .cards {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 620px) {
  .section-shell,
  .site-header {
    width: min(100% - 28px, var(--max)) !important;
  }

  .hero,
  .hero-final-layout {
    padding: 38px 0 320px !important;
    background-size: cover, 600px auto !important;
  }

  .hero h1 {
    font-size: 2.55rem !important;
    line-height: 1.06 !important;
  }

  .benefit-row {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
}


/* PIXEL-FISCHI HERO HEIGHT COMPACT 20260708_000625 */

/* Header weniger hoch */
.site-header {
  padding-top: 14px !important;
  padding-bottom: 6px !important;
}

/* Hero deutlich flacher */
.hero,
.hero-final-layout {
  min-height: 455px !important;
  height: 455px !important;
  padding-top: 28px !important;
  padding-bottom: 24px !important;
  background-size: cover, auto 102% !important;
  background-position: center, right center !important;
}

/* Textblock kompakter */
.hero-copy {
  max-width: 650px !important;
}

.eyebrow {
  font-size: .76rem !important;
  margin: 0 0 10px !important;
}

.hero h1 {
  font-size: clamp(2.65rem, 4.2vw, 4.25rem) !important;
  line-height: 1.02 !important;
  margin: 0 0 16px !important;
  max-width: 660px !important;
}

.hero-text {
  font-size: 1.02rem !important;
  line-height: 1.45 !important;
  max-width: 540px !important;
  margin-bottom: 20px !important;
}

.actions {
  margin-bottom: 18px !important;
}

.btn {
  min-height: 42px !important;
  padding: 0 20px !important;
  font-size: .94rem !important;
}

.benefit-row {
  gap: 20px !important;
  max-width: 610px !important;
}

.benefit-row .mini-icon {
  width: 24px !important;
  height: 24px !important;
  font-size: .82rem !important;
}

.benefit-row strong {
  font-size: .9rem !important;
}

.benefit-row small {
  font-size: .8rem !important;
  line-height: 1.25 !important;
}

/* Karten direkt näher an den Hero */
.cards {
  padding-top: 14px !important;
  padding-bottom: 28px !important;
}

.card {
  min-height: 140px !important;
  padding: 24px 26px 22px !important;
}

.card-icon {
  width: 58px !important;
  height: 58px !important;
  font-size: 1.75rem !important;
  margin-bottom: 10px !important;
}

.card h3 {
  font-size: 1.15rem !important;
}

.card p {
  font-size: .9rem !important;
}

/* Ablauf auch etwas kompakter */
.process {
  padding-top: 14px !important;
}

@media (max-width: 980px) {
  .hero,
  .hero-final-layout {
    height: auto !important;
    min-height: auto !important;
    padding: 36px 0 340px !important;
    background-size: cover, 650px auto !important;
    background-position: center, center bottom !important;
  }
}

@media (max-width: 620px) {
  .hero,
  .hero-final-layout {
    padding: 34px 0 285px !important;
    background-size: cover, 540px auto !important;
  }

  .hero h1 {
    font-size: 2.35rem !important;
  }
}


/* PIXEL-FISCHI WIDE FLAT HERO 20260708_001051 */

/* Seite fast volle Breite, damit links/rechts nicht so viel leer ist */
:root {
  --max: 1680px !important;
}

.section-shell,
.site-header {
  width: min(var(--max), calc(100% - 44px)) !important;
}

/* Header noch kompakter */
.site-header {
  padding-top: 12px !important;
  padding-bottom: 4px !important;
}

.brand-mark {
  width: 38px !important;
  height: 38px !important;
}

.brand-text strong {
  font-size: 1.34rem !important;
}

.brand-text small {
  font-size: .72rem !important;
}

.nav {
  gap: 38px !important;
  font-size: .9rem !important;
}

.header-cta {
  min-height: 42px !important;
  padding: 0 22px !important;
  font-size: .9rem !important;
}

/* Hero als breites, flaches Banner */
.hero,
.hero-final-layout {
  min-height: 390px !important;
  height: 390px !important;
  padding-top: 18px !important;
  padding-bottom: 16px !important;

  background-image:
    linear-gradient(90deg,
      rgba(5,11,18,.99) 0%,
      rgba(5,11,18,.95) 23%,
      rgba(5,11,18,.66) 40%,
      rgba(5,11,18,.16) 58%,
      rgba(5,11,18,0) 100%
    ),
    url("assets/Pixel-Hero.png?v=20260708_001051") !important;

  background-repeat: no-repeat, no-repeat !important;
  background-size: cover, auto 108% !important;
  background-position: center, right center !important;
  overflow: hidden !important;
}

/* Textblock kompakter, weiter links nutzbar */
.hero-copy {
  max-width: 620px !important;
}

.eyebrow {
  font-size: .7rem !important;
  margin: 0 0 8px !important;
  letter-spacing: .07em !important;
}

.hero h1 {
  font-size: clamp(2.35rem, 3.55vw, 3.85rem) !important;
  line-height: 1.02 !important;
  max-width: 610px !important;
  margin: 0 0 12px !important;
  letter-spacing: -0.055em !important;
}

.hero-text {
  max-width: 505px !important;
  font-size: .94rem !important;
  line-height: 1.42 !important;
  margin-bottom: 16px !important;
}

.actions {
  gap: 12px !important;
  margin-bottom: 14px !important;
}

.btn {
  min-height: 38px !important;
  padding: 0 18px !important;
  font-size: .86rem !important;
  border-radius: 9px !important;
}

.benefit-row {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  max-width: 580px !important;
  gap: 14px !important;
}

.benefit-row div {
  column-gap: 8px !important;
}

.benefit-row .mini-icon {
  width: 22px !important;
  height: 22px !important;
  font-size: .76rem !important;
}

.benefit-row strong {
  font-size: .82rem !important;
}

.benefit-row small {
  font-size: .72rem !important;
  line-height: 1.2 !important;
}

/* Keine separate rechte Grafik mehr */
.hero-art,
.hero-art-final,
.hero-visual,
.workflow-map,
.node,
.line,
.mascot,
.hero-final-img,
.hero-pixel-image {
  display: none !important;
}

/* Karten kleiner, damit direkt darunter mehr sichtbar ist */
.cards {
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 18px !important;
  padding-top: 12px !important;
  padding-bottom: 24px !important;
}

.card {
  min-height: 120px !important;
  padding: 20px 22px 18px !important;
  border-radius: 13px !important;
}

.card-icon {
  width: 48px !important;
  height: 48px !important;
  font-size: 1.45rem !important;
  margin-bottom: 8px !important;
}

.card h3 {
  font-size: 1.02rem !important;
  margin-bottom: 4px !important;
}

.card p {
  font-size: .82rem !important;
  line-height: 1.34 !important;
}

.card a {
  right: 20px !important;
  bottom: 18px !important;
  font-size: 1.2rem !important;
}

/* Ablauf auch flacher */
.process {
  padding-top: 8px !important;
  padding-bottom: 24px !important;
}

.process h2 {
  font-size: clamp(1.55rem, 2.3vw, 2rem) !important;
  margin-bottom: 18px !important;
}

.steps {
  gap: 32px !important;
}

.steps span {
  width: 36px !important;
  height: 36px !important;
  font-size: 1.05rem !important;
}

.steps h3 {
  font-size: .98rem !important;
}

.steps p {
  font-size: .82rem !important;
  line-height: 1.34 !important;
}

/* Zusatzbereiche kompakter */
.industries {
  padding: 26px !important;
}

.final-cta {
  margin-top: 26px !important;
  padding: 24px 28px !important;
}

.final-cta h2 {
  font-size: clamp(1.45rem, 2.3vw, 2rem) !important;
}

.site-footer {
  padding-top: 16px !important;
  padding-bottom: 24px !important;
}

/* Mittelgroße Bildschirme */
@media (max-width: 1200px) {
  .section-shell,
  .site-header {
    width: min(var(--max), calc(100% - 32px)) !important;
  }

  .hero,
  .hero-final-layout {
    height: 410px !important;
    min-height: 410px !important;
    background-size: cover, auto 104% !important;
    background-position: center, right center !important;
  }

  .hero h1 {
    font-size: clamp(2.3rem, 4.4vw, 3.55rem) !important;
    max-width: 560px !important;
  }
}

/* Tablet/Handy wieder untereinander */
@media (max-width: 980px) {
  .hero,
  .hero-final-layout {
    height: auto !important;
    min-height: auto !important;
    padding: 34px 0 300px !important;
    background-image:
      linear-gradient(180deg,
        rgba(5,11,18,.99) 0%,
        rgba(5,11,18,.95) 46%,
        rgba(5,11,18,.55) 72%,
        rgba(5,11,18,.08) 100%
      ),
      url("assets/Pixel-Hero.png?v=20260708_001051") !important;
    background-size: cover, 620px auto !important;
    background-position: center, center bottom !important;
  }

  .cards {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 620px) {
  .section-shell,
  .site-header {
    width: min(100% - 22px, var(--max)) !important;
  }

  .hero,
  .hero-final-layout {
    padding: 30px 0 260px !important;
    background-size: cover, 520px auto !important;
  }

  .hero h1 {
    font-size: 2.18rem !important;
  }

  .benefit-row {
    grid-template-columns: 1fr !important;
  }
}


/* PIXEL-FISCHI HERO BLACK BACKGROUND 20260708_001356 */

/* Gesamte Seite ruhiger und dunkler */
body {
  background: #000000 !important;
}

body::before,
body::after {
  opacity: 0 !important;
  display: none !important;
}

/* Seite weiter breit lassen */
:root {
  --max: 1680px !important;
}

.section-shell,
.site-header {
  width: min(var(--max), calc(100% - 44px)) !important;
}

/* HERO: Bild rechts, links fast schwarzer Verlauf */
.hero,
.hero-final-layout {
  min-height: 390px !important;
  height: 390px !important;
  padding-top: 18px !important;
  padding-bottom: 16px !important;
  background-color: #000 !important;
  background-image:
    linear-gradient(90deg,
      rgba(0,0,0,1) 0%,
      rgba(0,0,0,0.98) 22%,
      rgba(0,0,0,0.93) 38%,
      rgba(0,0,0,0.78) 50%,
      rgba(0,0,0,0.42) 61%,
      rgba(0,0,0,0.10) 73%,
      rgba(0,0,0,0.00) 100%
    ),
    url("assets/Pixel-Hero.png?v=20260708_001356") !important;
  background-repeat: no-repeat, no-repeat !important;
  background-size: cover, auto 108% !important;
  background-position: center, right center !important;
  overflow: hidden !important;
  border-radius: 0 !important;
}

/* Textblock auf schwarzem Untergrund lesbarer machen */
.hero-copy {
  max-width: 615px !important;
}

.eyebrow {
  font-size: .7rem !important;
  margin: 0 0 8px !important;
  color: #a6ea3d !important;
  letter-spacing: .07em !important;
}

.hero h1 {
  font-size: clamp(2.35rem, 3.55vw, 3.85rem) !important;
  line-height: 1.02 !important;
  max-width: 610px !important;
  margin: 0 0 12px !important;
  letter-spacing: -0.055em !important;
  color: #f5f7fa !important;
  text-shadow: 0 2px 18px rgba(0,0,0,.45) !important;
}

.hero h1 span {
  color: #9be042 !important;
}

.hero-text {
  max-width: 505px !important;
  font-size: .95rem !important;
  line-height: 1.45 !important;
  margin-bottom: 16px !important;
  color: rgba(255,255,255,.86) !important;
}

.actions {
  gap: 12px !important;
  margin-bottom: 14px !important;
}

.btn {
  min-height: 38px !important;
  padding: 0 18px !important;
  font-size: .86rem !important;
  border-radius: 9px !important;
}

.btn.ghost {
  border-color: rgba(255,255,255,.24) !important;
  color: #f3f6f8 !important;
  background: rgba(255,255,255,.02) !important;
}

.benefit-row {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  max-width: 580px !important;
  gap: 14px !important;
}

.benefit-row strong {
  color: #f3f6f8 !important;
  font-size: .82rem !important;
}

.benefit-row small {
  color: rgba(255,255,255,.68) !important;
  font-size: .72rem !important;
  line-height: 1.2 !important;
}

.benefit-row .mini-icon {
  border-color: rgba(155,224,66,.55) !important;
  color: #9be042 !important;
  background: rgba(155,224,66,.04) !important;
}

/* Rechte alten Container komplett ausblenden */
.hero-art,
.hero-art-final,
.hero-visual,
.workflow-map,
.node,
.line,
.mascot,
.hero-final-img,
.hero-pixel-image {
  display: none !important;
}

/* Karten darunter etwas dunkler/ruhiger */
.card,
.industries,
.final-cta {
  background: linear-gradient(180deg, rgba(9,17,26,.92), rgba(6,12,18,.96)) !important;
}

.process h2,
.card h3,
.industries h2,
.final-cta h2 {
  color: #f3f6f8 !important;
}

.card p,
.steps p,
.industries p,
.final-cta p {
  color: rgba(255,255,255,.72) !important;
}

/* Tablet */
@media (max-width: 1200px) {
  .hero,
  .hero-final-layout {
    height: 410px !important;
    min-height: 410px !important;
    background-size: cover, auto 104% !important;
    background-position: center, right center !important;
  }
}

/* Mobile */
@media (max-width: 980px) {
  .hero,
  .hero-final-layout {
    height: auto !important;
    min-height: auto !important;
    padding: 34px 0 300px !important;
    background-image:
      linear-gradient(180deg,
        rgba(0,0,0,1) 0%,
        rgba(0,0,0,.97) 42%,
        rgba(0,0,0,.62) 70%,
        rgba(0,0,0,.10) 100%
      ),
      url("assets/Pixel-Hero.png?v=20260708_001356") !important;
    background-size: cover, 620px auto !important;
    background-position: center, center bottom !important;
  }
}

@media (max-width: 620px) {
  .section-shell,
  .site-header {
    width: min(100% - 22px, var(--max)) !important;
  }

  .hero,
  .hero-final-layout {
    padding: 30px 0 260px !important;
    background-size: cover, 520px auto !important;
  }

  .hero h1 {
    font-size: 2.18rem !important;
  }

  .benefit-row {
    grid-template-columns: 1fr !important;
  }
}


/* PIXEL-FISCHI MATCH IMAGE + FLAT CARDS 20260708_001601 */

/* Grundton passend zum Hero-Bild: sehr dunkles Blau, nicht hart schwarz */
:root {
  --bg: #030912 !important;
  --bg2: #06111b !important;
  --card: #0b1620 !important;
  --card2: #0a141e !important;
  --line: rgba(155,224,66,.22) !important;
}

body {
  background: #030912 !important;
}

body::before,
body::after {
  display: none !important;
  opacity: 0 !important;
}

/* Header/Seite breit lassen */
:root {
  --max: 1680px !important;
}

.section-shell,
.site-header {
  width: min(var(--max), calc(100% - 44px)) !important;
}

/* Hero: keine wilden Radial-Verläufe mehr, nur Bild + ruhiger Lesbarkeitsverlauf */
.hero,
.hero-final-layout {
  min-height: 390px !important;
  height: 390px !important;
  padding-top: 18px !important;
  padding-bottom: 16px !important;
  overflow: hidden !important;
  background-color: #030912 !important;
  background-image:
    linear-gradient(90deg,
      rgba(3,9,18,.98) 0%,
      rgba(3,9,18,.95) 24%,
      rgba(3,9,18,.78) 42%,
      rgba(3,9,18,.34) 58%,
      rgba(3,9,18,.04) 78%,
      rgba(3,9,18,0) 100%
    ),
    url("assets/Pixel-Hero.png?v=20260708_001601") !important;
  background-repeat: no-repeat, no-repeat !important;
  background-size: cover, auto 108% !important;
  background-position: center, right center !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Text bleibt klar, aber nicht übertrieben groß */
.hero-copy {
  max-width: 620px !important;
}

.hero h1 {
  font-size: clamp(2.35rem, 3.55vw, 3.85rem) !important;
  line-height: 1.02 !important;
  max-width: 610px !important;
  margin: 0 0 12px !important;
  color: #f4f7f1 !important;
  text-shadow: none !important;
}

.hero h1 span {
  color: #9be042 !important;
}

.hero-text {
  max-width: 505px !important;
  font-size: .95rem !important;
  line-height: 1.45 !important;
  color: rgba(244,247,241,.82) !important;
  margin-bottom: 16px !important;
}

.eyebrow {
  color: #9be042 !important;
  font-size: .7rem !important;
  margin: 0 0 8px !important;
}

.actions {
  margin-bottom: 14px !important;
}

.btn {
  min-height: 38px !important;
  padding: 0 18px !important;
  font-size: .86rem !important;
}

.benefit-row {
  max-width: 580px !important;
  gap: 14px !important;
}

.benefit-row strong {
  color: #f4f7f1 !important;
  font-size: .82rem !important;
}

.benefit-row small {
  color: rgba(244,247,241,.62) !important;
  font-size: .72rem !important;
}

/* alte rechte Bildcontainer aus */
.hero-art,
.hero-art-final,
.hero-visual,
.workflow-map,
.node,
.line,
.mascot,
.hero-final-img,
.hero-pixel-image {
  display: none !important;
}

/* KACHELN: flach, kein komischer Verlauf */
.card {
  background: #0b1620 !important;
  border: 1px solid rgba(155,224,66,.18) !important;
  border-bottom: 1px solid rgba(155,224,66,.38) !important;
  box-shadow: 0 18px 44px rgba(0,0,0,.22) !important;
}

.card-icon {
  background: #101d28 !important;
  border: 1px solid rgba(155,224,66,.26) !important;
  box-shadow: none !important;
}

.industries {
  background: #0b1620 !important;
  border: 1px solid rgba(155,224,66,.16) !important;
  box-shadow: none !important;
}

.industries li {
  background: #101d28 !important;
  border: 1px solid rgba(255,255,255,.08) !important;
}

.final-cta {
  background: #0b1620 !important;
  border: 1px solid rgba(155,224,66,.28) !important;
  box-shadow: 0 18px 44px rgba(0,0,0,.22) !important;
}

.final-cta::before {
  background: #9be042 !important;
}

/* Der grüne Glow unten in der CTA-Kachel raus */
.final-cta::after {
  display: none !important;
  content: none !important;
}

.process h2,
.card h3,
.industries h2,
.final-cta h2 {
  color: #f4f7f1 !important;
}

.card p,
.steps p,
.industries p,
.final-cta p {
  color: rgba(244,247,241,.68) !important;
}

@media (max-width: 980px) {
  .hero,
  .hero-final-layout {
    height: auto !important;
    min-height: auto !important;
    padding: 34px 0 300px !important;
    background-image:
      linear-gradient(180deg,
        rgba(3,9,18,.98) 0%,
        rgba(3,9,18,.96) 42%,
        rgba(3,9,18,.62) 72%,
        rgba(3,9,18,.08) 100%
      ),
      url("assets/Pixel-Hero.png?v=20260708_001601") !important;
    background-size: cover, 620px auto !important;
    background-position: center, center bottom !important;
  }
}

@media (max-width: 620px) {
  .section-shell,
  .site-header {
    width: min(100% - 22px, var(--max)) !important;
  }

  .hero,
  .hero-final-layout {
    padding: 30px 0 260px !important;
    background-size: cover, 520px auto !important;
  }

  .hero h1 {
    font-size: 2.18rem !important;
  }

  .benefit-row {
    grid-template-columns: 1fr !important;
  }
}


/* PIXEL-FISCHI EXACT HERO BACKGROUND COLOR 20260708_001830 */
/* Gemessener Randwert aus Pixel-Hero.png: #00030C */

:root {
  --bg: #00030c !important;
  --bg2: #00030c !important;
  --card: #030a12 !important;
  --card2: #030a12 !important;
}

html,
body {
  background: #00030c !important;
}

body::before,
body::after {
  display: none !important;
  opacity: 0 !important;
}

.hero,
.hero-final-layout {
  background-color: #00030c !important;
  background-image:
    linear-gradient(90deg,
      rgba(0,3,12,1) 0%,
      rgba(0,3,12,.98) 22%,
      rgba(0,3,12,.88) 40%,
      rgba(0,3,12,.42) 58%,
      rgba(0,3,12,.06) 78%,
      rgba(0,3,12,0) 100%
    ),
    url("assets/Pixel-Hero.png?v=20260708_001830") !important;
  background-repeat: no-repeat, no-repeat !important;
  background-size: cover, auto 108% !important;
  background-position: center, right center !important;
}

.card {
  background: #030a12 !important;
  border: 1px solid rgba(155,224,66,.16) !important;
  border-bottom-color: rgba(155,224,66,.34) !important;
  box-shadow: 0 18px 44px rgba(0,0,0,.32) !important;
}

.card-icon {
  background: #06101a !important;
}

.industries,
.final-cta {
  background: #030a12 !important;
}

.final-cta {
  border-color: rgba(155,224,66,.24) !important;
}

@media (max-width: 980px) {
  .hero,
  .hero-final-layout {
    background-image:
      linear-gradient(180deg,
        rgba(0,3,12,1) 0%,
        rgba(0,3,12,.96) 42%,
        rgba(0,3,12,.62) 72%,
        rgba(0,3,12,.08) 100%
      ),
      url("assets/Pixel-Hero.png?v=20260708_001830") !important;
  }
}


/* PIXEL-FISCHI REMOVE HERO BOTTOM EDGE 20260708_002025 */

/* sichtbare Schatten-/Kanten-Effekte am unteren Hero-Rand entfernen */
.hero::after,
.hero-final-layout::after,
.hero::before,
.hero-final-layout::before {
  display: none !important;
  content: none !important;
  opacity: 0 !important;
}

/* Hero und Seite exakt gleiche Grundfarbe */
html,
body,
.hero,
.hero-final-layout {
  background-color: #00030c !important;
}

/* Hero-Bild etwas höher/sauberer setzen, damit keine harte untere Bildkante auffällt */
.hero,
.hero-final-layout {
  box-shadow: none !important;
  border-bottom: 0 !important;
  outline: 0 !important;
  background-image:
    linear-gradient(90deg,
      rgba(0,3,12,1) 0%,
      rgba(0,3,12,.98) 22%,
      rgba(0,3,12,.88) 40%,
      rgba(0,3,12,.42) 58%,
      rgba(0,3,12,.06) 78%,
      rgba(0,3,12,0) 100%
    ),
    linear-gradient(180deg,
      rgba(0,3,12,0) 0%,
      rgba(0,3,12,0) 82%,
      rgba(0,3,12,1) 100%
    ),
    url("assets/Pixel-Hero.png?v=20260708_002025") !important;
  background-repeat: no-repeat, no-repeat, no-repeat !important;
  background-size: cover, cover, auto 112% !important;
  background-position: center, center, right 48% !important;
}

/* Falls die erste Kartenreihe optisch direkt an den Hero stößt */
.cards {
  background: #00030c !important;
  margin-top: 0 !important;
  padding-top: 18px !important;
}

/* Kachel-Verlauf weiterhin flach halten */
.card {
  background: #030a12 !important;
  box-shadow: 0 14px 36px rgba(0,0,0,.28) !important;
}

@media (max-width: 980px) {
  .hero,
  .hero-final-layout {
    background-image:
      linear-gradient(180deg,
        rgba(0,3,12,1) 0%,
        rgba(0,3,12,.96) 42%,
        rgba(0,3,12,.62) 72%,
        rgba(0,3,12,.08) 100%
      ),
      linear-gradient(180deg,
        rgba(0,3,12,0) 0%,
        rgba(0,3,12,0) 82%,
        rgba(0,3,12,1) 100%
      ),
      url("assets/Pixel-Hero.png?v=20260708_002025") !important;
    background-repeat: no-repeat, no-repeat, no-repeat !important;
    background-size: cover, cover, 620px auto !important;
    background-position: center, center, center bottom !important;
  }
}


/* PIXEL-FISCHI FIX VISIBLE HERO IMAGE EDGE 20260708_002321 */

/* Grundfarbe exakt dunkel halten */
html,
body {
  background: #00030c !important;
}

/* Hero bleibt dunkel, Bild rechts */
.hero,
.hero-final-layout {
  position: relative !important;
  isolation: isolate !important;
  background-color: #00030c !important;
  overflow: hidden !important;
  background-image:
    linear-gradient(90deg,
      rgba(0,3,12,1) 0%,
      rgba(0,3,12,.98) 20%,
      rgba(0,3,12,.88) 36%,
      rgba(0,3,12,.55) 49%,
      rgba(0,3,12,.18) 63%,
      rgba(0,3,12,0) 78%
    ),
    url("assets/Pixel-Hero.png?v=20260708_002321") !important;
  background-repeat: no-repeat, no-repeat !important;
  background-size: cover, auto 108% !important;
  background-position: center, right center !important;
}

/* Das ist der wichtige Teil:
   weicher schwarzer Schleier genau über der sichtbaren linken Bildkante */
.hero::before,
.hero-final-layout::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  left: 42% !important;
  width: 24% !important;
  z-index: 1 !important;
  pointer-events: none !important;
  background: linear-gradient(
    90deg,
    rgba(0,3,12,1) 0%,
    rgba(0,3,12,.96) 18%,
    rgba(0,3,12,.72) 42%,
    rgba(0,3,12,.32) 70%,
    rgba(0,3,12,0) 100%
  ) !important;
}

/* Unten keine harte Kante */
.hero::after,
.hero-final-layout::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: 90px !important;
  z-index: 1 !important;
  pointer-events: none !important;
  background: linear-gradient(
    180deg,
    rgba(0,3,12,0) 0%,
    rgba(0,3,12,.55) 72%,
    rgba(0,3,12,1) 100%
  ) !important;
}

/* Text muss über den Überblendungen liegen */
.hero-copy {
  position: relative !important;
  z-index: 3 !important;
}

/* Alte rechte Einzelgrafiken bleiben aus */
.hero-art,
.hero-art-final,
.hero-visual,
.workflow-map,
.node,
.line,
.mascot,
.hero-final-img,
.hero-pixel-image {
  display: none !important;
}

@media (max-width: 980px) {
  .hero::before,
  .hero-final-layout::before {
    display: none !important;
  }
}


/* PIXEL-FISCHI HERO IMAGE LAYER NO GLOW 20260708_002454 */

/* Alles auf den gemessenen Bild-Randton setzen */
html,
body {
  background: #00030c !important;
}

body::before,
body::after {
  display: none !important;
  opacity: 0 !important;
  content: none !important;
}

/* Hero selbst: keine Hintergrundbilder, keine grünen Glows */
.hero,
.hero-final-layout {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  height: 390px !important;
  min-height: 390px !important;
  padding-top: 18px !important;
  padding-bottom: 16px !important;
  background: #00030c !important;
  background-image: none !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* Alle Pseudo-Verläufe/Glows weg */
.hero::before,
.hero::after,
.hero-final-layout::before,
.hero-final-layout::after {
  display: none !important;
  content: none !important;
  opacity: 0 !important;
}

/* Das eigentliche Hero-Bild als Ebene hinter dem Text */
.hero-bg-img {
  display: block !important;
  position: absolute !important;
  z-index: 0 !important;
  top: 50% !important;
  right: 0 !important;
  height: 108% !important;
  width: auto !important;
  max-width: none !important;
  transform: translateY(-50%) !important;
  object-fit: contain !important;
  pointer-events: none !important;
  user-select: none !important;

  /* linke Bildkante weich ausblenden, ohne grünen Glow */
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0,0,0,.05) 7%,
    rgba(0,0,0,.35) 15%,
    black 28%,
    black 100%
  ) !important;
  mask-image: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0,0,0,.05) 7%,
    rgba(0,0,0,.35) 15%,
    black 28%,
    black 100%
  ) !important;
}

/* Text liegt über dem Bild */
.hero-copy {
  position: relative !important;
  z-index: 2 !important;
  max-width: 620px !important;
}

/* Lesbarkeit links durch dunkle Textfläche, aber ohne sichtbare Kante */
.hero-copy::before {
  content: "" !important;
  position: absolute !important;
  z-index: -1 !important;
  inset: -28px -120px -26px -24px !important;
  background: linear-gradient(
    90deg,
    rgba(0,3,12,1) 0%,
    rgba(0,3,12,.98) 55%,
    rgba(0,3,12,.75) 78%,
    rgba(0,3,12,0) 100%
  ) !important;
  pointer-events: none !important;
}

.hero h1 {
  font-size: clamp(2.35rem, 3.55vw, 3.85rem) !important;
  line-height: 1.02 !important;
  max-width: 610px !important;
  margin: 0 0 12px !important;
}

.hero-text {
  max-width: 505px !important;
  font-size: .95rem !important;
  line-height: 1.45 !important;
  margin-bottom: 16px !important;
}

/* Alte rechte Elemente komplett aus */
.hero-art,
.hero-art-final,
.hero-visual,
.workflow-map,
.node,
.line,
.mascot,
.hero-final-img,
.hero-pixel-image {
  display: none !important;
}

/* Karten flach, kein komischer Verlauf */
.card {
  background: #030a12 !important;
  border: 1px solid rgba(155,224,66,.16) !important;
  border-bottom-color: rgba(155,224,66,.34) !important;
  box-shadow: 0 14px 36px rgba(0,0,0,.28) !important;
}

.industries,
.final-cta {
  background: #030a12 !important;
}

@media (max-width: 980px) {
  .hero,
  .hero-final-layout {
    height: auto !important;
    min-height: auto !important;
    padding: 34px 0 300px !important;
  }

  .hero-bg-img {
    top: auto !important;
    bottom: 0 !important;
    right: 50% !important;
    height: auto !important;
    width: 620px !important;
    transform: translateX(50%) !important;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, black 16%, black 100%) !important;
    mask-image: linear-gradient(180deg, transparent 0%, black 16%, black 100%) !important;
  }

  .hero-copy::before {
    inset: -20px -30px -20px -20px !important;
    background: rgba(0,3,12,.92) !important;
    border-radius: 18px !important;
  }
}


/* PIXEL-FISCHI NARROWER HERO TRANSITION 20260708_002624 */

/* Bild links weniger stark ausblenden = schmalerer Übergang */
.hero-bg-img {
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0,0,0,.08) 3%,
    rgba(0,0,0,.45) 8%,
    black 14%,
    black 100%
  ) !important;
  mask-image: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0,0,0,.08) 3%,
    rgba(0,0,0,.45) 8%,
    black 14%,
    black 100%
  ) !important;
}

/* Auch die dunkle Text-Überlagerung etwas schmaler machen */
.hero-copy::before {
  inset: -24px -70px -22px -20px !important;
  background: linear-gradient(
    90deg,
    rgba(0,3,12,1) 0%,
    rgba(0,3,12,.98) 60%,
    rgba(0,3,12,.58) 82%,
    rgba(0,3,12,0) 100%
  ) !important;
}

@media (max-width: 980px) {
  .hero-bg-img {
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, black 10%, black 100%) !important;
    mask-image: linear-gradient(180deg, transparent 0%, black 10%, black 100%) !important;
  }

  .hero-copy::before {
    inset: -18px -20px -18px -18px !important;
  }
}


/* PIXEL-FISCHI HEADLINE FINAL 20260708_003016 */
.hero-title {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  max-width: 720px !important;
  margin: 0 0 14px !important;
  line-height: .98 !important;
  letter-spacing: -0.055em !important;
}

.hero-title-white {
  display: block !important;
  color: #f4f7f1 !important;
  font-size: clamp(2.45rem, 3.75vw, 4.05rem) !important;
  white-space: nowrap !important;
}

.hero-title-green {
  display: block !important;
  color: #9be042 !important;
  font-size: clamp(2.15rem, 3.25vw, 3.48rem) !important;
  white-space: nowrap !important;
}

@media (max-width: 980px) {
  .hero-title-white,
  .hero-title-green {
    white-space: normal !important;
  }

  .hero-title-white {
    font-size: clamp(2.5rem, 7vw, 4rem) !important;
  }

  .hero-title-green {
    font-size: clamp(2.25rem, 6.2vw, 3.45rem) !important;
  }
}

@media (max-width: 620px) {
  .hero-title-white {
    font-size: 2.25rem !important;
  }

  .hero-title-green {
    font-size: 1.95rem !important;
  }
}


/* PIXEL-FISCHI HEADLINE SIZE COLOR FIX 20260708_003218 */

.hero-title {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  max-width: 760px !important;
  margin: 0 0 14px !important;
  line-height: .98 !important;
  letter-spacing: -0.055em !important;
}

.hero-title-white {
  display: block !important;
  color: #ffffff !important;
  font-weight: 900 !important;
  font-size: clamp(2.75rem, 4.15vw, 4.45rem) !important;
  line-height: .98 !important;
  white-space: nowrap !important;
  text-shadow: 0 2px 18px rgba(0,0,0,.32) !important;
}

.hero-title-green {
  display: block !important;
  color: #9be042 !important;
  font-weight: 900 !important;
  font-size: clamp(1.85rem, 2.75vw, 2.95rem) !important;
  line-height: 1.02 !important;
  white-space: nowrap !important;
  text-shadow: 0 2px 18px rgba(0,0,0,.28) !important;
}

.hero h1 span {
  color: inherit !important;
}

@media (max-width: 980px) {
  .hero-title-white,
  .hero-title-green {
    white-space: normal !important;
  }

  .hero-title-white {
    font-size: clamp(2.55rem, 7vw, 4rem) !important;
  }

  .hero-title-green {
    font-size: clamp(2rem, 5.5vw, 3rem) !important;
  }
}

@media (max-width: 620px) {
  .hero-title-white {
    font-size: 2.35rem !important;
  }

  .hero-title-green {
    font-size: 1.8rem !important;
  }
}


/* PIXEL-FISCHI FORCE GREEN HEADLINE 20260708_003334 */

.hero-title {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  max-width: 760px !important;
  margin: 0 0 14px !important;
  line-height: .98 !important;
  letter-spacing: -0.055em !important;
}

.hero h1.hero-title .hero-title-white,
.hero-title-white {
  display: block !important;
  color: #ffffff !important;
  font-weight: 900 !important;
  font-size: clamp(2.75rem, 4.15vw, 4.45rem) !important;
  line-height: .98 !important;
  white-space: nowrap !important;
}

.hero h1.hero-title .hero-title-green,
.hero-title-green {
  display: block !important;
  color: #9be042 !important;
  font-weight: 900 !important;
  font-size: clamp(1.7rem, 2.45vw, 2.65rem) !important;
  line-height: 1.02 !important;
  white-space: nowrap !important;
}

/* alte allgemeine span-Regeln überstimmen */
.hero h1 span.hero-title-white {
  color: #ffffff !important;
}

.hero h1 span.hero-title-green {
  color: #9be042 !important;
}

@media (max-width: 980px) {
  .hero-title-white,
  .hero-title-green {
    white-space: normal !important;
  }

  .hero-title-white {
    font-size: clamp(2.55rem, 7vw, 4rem) !important;
  }

  .hero-title-green {
    font-size: clamp(1.9rem, 5vw, 2.8rem) !important;
  }
}

@media (max-width: 620px) {
  .hero-title-white {
    font-size: 2.35rem !important;
  }

  .hero-title-green {
    font-size: 1.72rem !important;
  }
}


/* PATCH 20260708_004257 */


/* PIXEL-FISCHI BENEFIT SVG ICONS FINAL */
.benefit-row {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 18px !important;
  max-width: 620px !important;
  align-items: start !important;
}

.benefit-item {
  display: grid !important;
  grid-template-columns: 30px 1fr !important;
  gap: 10px !important;
  align-items: start !important;
}

.mini-badge {
  width: 26px !important;
  height: 26px !important;
  min-width: 26px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid rgba(155,224,66,.55) !important;
  background: rgba(155,224,66,.04) !important;
  box-shadow: none !important;
  margin-top: 1px !important;
}

.mini-badge svg {
  width: 14px !important;
  height: 14px !important;
  stroke: #9be042 !important;
  fill: none !important;
  stroke-width: 1.8 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  overflow: visible !important;
}

.benefit-copy {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

.benefit-copy strong {
  display: block !important;
  color: #f4f7f1 !important;
  font-size: .82rem !important;
  line-height: 1.15 !important;
}

.benefit-copy small {
  display: block !important;
  color: rgba(244,247,241,.62) !important;
  font-size: .72rem !important;
  line-height: 1.25 !important;
}

.mini-icon {
  display: none !important;
}

@media (max-width: 980px) {
  .benefit-row {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    max-width: 100% !important;
  }
}


/* PIXEL-FISCHI BENEFITS BIGGER 20260708_004438 */

.benefit-row {
  max-width: 700px !important;
  gap: 24px !important;
  align-items: start !important;
}

.benefit-item {
  grid-template-columns: 40px 1fr !important;
  gap: 12px !important;
  align-items: start !important;
}

.mini-badge {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  margin-top: 0 !important;
  border-width: 1.5px !important;
  background: rgba(155,224,66,.055) !important;
}

.mini-badge svg {
  width: 19px !important;
  height: 19px !important;
  stroke-width: 2 !important;
}

.benefit-copy strong {
  font-size: .98rem !important;
  line-height: 1.15 !important;
  margin-top: 1px !important;
}

.benefit-copy small {
  font-size: .82rem !important;
  line-height: 1.28 !important;
  color: rgba(244,247,241,.68) !important;
}

@media (max-width: 620px) {
  .benefit-item {
    grid-template-columns: 38px 1fr !important;
  }

  .mini-badge {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
  }

  .mini-badge svg {
    width: 18px !important;
    height: 18px !important;
  }

  .benefit-copy strong {
    font-size: .95rem !important;
  }

  .benefit-copy small {
    font-size: .8rem !important;
  }
}


/* PIXEL-FISCHI HERO VERTICAL SPACING 20260708_004803 */

/* ca. eine Zeile Abstand zwischen Fließtext und Button-Reihe */
.hero-text {
  margin-bottom: 1.25em !important;
}

/* ca. eine Zeile Abstand zwischen Buttons und Benefit-Reihe */
.actions {
  margin-bottom: 1.25em !important;
}

/* Benefit-Reihe sauber oben ausrichten */
.benefit-row {
  margin-top: 0 !important;
}


/* PIXEL-FISCHI HERO SPACING MORE 20260708_004904 */

.hero-text {
  margin-bottom: 2.25em !important;
}

.actions {
  margin-bottom: 2.25em !important;
}


/* PIXEL-FISCHI EURO ICON FIX 20260708_005024 */

.mini-badge svg.euro-icon {
  width: 20px !important;
  height: 20px !important;
}

.mini-badge svg.euro-icon text {
  fill: #9be042 !important;
  stroke: none !important;
  font-size: 17px !important;
  font-weight: 800 !important;
  font-family: Arial, Helvetica, sans-serif !important;
  dominant-baseline: middle !important;
}


/* PIXEL-FISCHI BACK TO CARD ICON */
.benefit-item:nth-child(2) .mini-badge svg {
  width: 18px !important;
  height: 18px !important;
  stroke: #9be042 !important;
  fill: none !important;
  stroke-width: 1.8 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

.benefit-euro-svg,
.benefit-euro-svg text {
  display: none !important;
}


/* PIXEL-FISCHI BENEFIT ROW CLEAN RESET 20260708_005640 */

.benefit-row {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 24px !important;
  max-width: 700px !important;
  align-items: start !important;
  margin-top: 0 !important;
}

.benefit-item {
  display: grid !important;
  grid-template-columns: 40px 1fr !important;
  gap: 12px !important;
  align-items: start !important;
}

.mini-badge {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1.5px solid rgba(155,224,66,.55) !important;
  background: rgba(155,224,66,.055) !important;
  box-shadow: none !important;
  margin-top: 0 !important;
}

.mini-badge svg {
  width: 19px !important;
  height: 19px !important;
  stroke: #9be042 !important;
  fill: none !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  overflow: visible !important;
}

.benefit-copy {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

.benefit-copy strong {
  display: block !important;
  color: #f4f7f1 !important;
  font-size: .98rem !important;
  line-height: 1.15 !important;
  margin-top: 1px !important;
}

.benefit-copy small {
  display: block !important;
  color: rgba(244,247,241,.68) !important;
  font-size: .82rem !important;
  line-height: 1.28 !important;
}

.mini-icon,
.benefit-euro-svg {
  display: none !important;
}

@media (max-width: 980px) {
  .benefit-row {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    max-width: 100% !important;
  }
}


/* PIXEL-FISCHI HERO TEXT TWO LINES */
.hero-copy {
  max-width: 760px !important;
}

.hero-text {
  max-width: 735px !important;
  font-size: 1rem !important;
  line-height: 1.42 !important;
  margin-bottom: 2.25em !important;
}

@media (max-width: 980px) {
  .hero-copy {
    max-width: 100% !important;
  }

  .hero-text {
    max-width: 100% !important;
    font-size: .98rem !important;
  }
}


/* PIXEL-FISCHI BRAND PIXEL P SVG 20260708_214050 */

.brand-mark,
.brand-mark-p {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  background-image: none !important;
  clip-path: none !important;
  color: transparent !important;
  filter: drop-shadow(0 0 14px rgba(155,224,66,.28)) !important;
  overflow: visible !important;
}

.brand-mark-p svg {
  width: 38px !important;
  height: 38px !important;
  display: block !important;
  overflow: visible !important;
}

.brand-mark-p rect {
  fill: #9be042 !important;
  stroke: none !important;
  shape-rendering: crispEdges !important;
}

@media (max-width: 620px) {
  .brand-mark,
  .brand-mark-p {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
  }

  .brand-mark-p svg {
    width: 34px !important;
    height: 34px !important;
  }
}


/* PIXEL-FISCHI SERVICE CARDS V3 MIDDLE BRAIN CORRECT */
.service-cards-v3 {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 18px !important;
  padding-top: 18px !important;
  padding-bottom: 30px !important;
}

.service-card-v3 {
  min-height: 104px !important;
  padding: 16px 18px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(155,224,66,.24) !important;
  background: rgba(3,10,18,.96) !important;
  box-shadow: 0 12px 30px rgba(0,0,0,.18) !important;
  display: grid !important;
  grid-template-columns: 62px 1fr !important;
  gap: 16px !important;
  align-items: center !important;
  position: relative !important;
  overflow: hidden !important;
}

.service-card-v3::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: radial-gradient(circle at 12% 28%, rgba(155,224,66,.07), transparent 34%) !important;
  pointer-events: none !important;
}

.service-icon-v3 {
  width: 58px !important;
  height: 58px !important;
  min-width: 58px !important;
  border-radius: 15px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #9be042 !important;
  background: rgba(155,224,66,.055) !important;
  border: 1px solid rgba(155,224,66,.34) !important;
  box-shadow: inset 0 0 18px rgba(155,224,66,.045) !important;
  position: relative !important;
  z-index: 2 !important;
}

.service-icon-v3 svg {
  width: 44px !important;
  height: 44px !important;
  display: block !important;
  overflow: visible !important;
  opacity: 1 !important;
  filter: drop-shadow(0 0 7px rgba(155,224,66,.32)) !important;
}

.service-icon-v3 svg,
.service-icon-v3 svg * {
  stroke: #9be042 !important;
  fill: none !important;
  visibility: visible !important;
}

.service-icon-brainhybrid svg {
  width: 47px !important;
  height: 47px !important;
}

.service-text-v3 {
  position: relative !important;
  z-index: 2 !important;
}

.service-text-v3 h3 {
  margin: 0 0 7px !important;
  color: #f4f7f1 !important;
  font-size: 1.08rem !important;
  line-height: 1.15 !important;
  letter-spacing: -.02em !important;
}

.service-text-v3 p {
  margin: 0 !important;
  color: rgba(244,247,241,.68) !important;
  font-size: .88rem !important;
  line-height: 1.32 !important;
  max-width: 34ch !important;
}

/* alte Icons, Pfeile, Buttons ausblenden */
.card-icon,
.service-card-action,
.card > a,
.service-card-v3 > a {
  display: none !important;
}

@media (max-width: 980px) {
  .service-cards-v3 {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 620px) {
  .service-card-v3 {
    grid-template-columns: 54px 1fr !important;
    min-height: 96px !important;
    padding: 15px !important;
    gap: 14px !important;
  }

  .service-icon-v3 {
    width: 50px !important;
    height: 50px !important;
    min-width: 50px !important;
  }

  .service-icon-v3 svg,
  .service-icon-brainhybrid svg {
    width: 39px !important;
    height: 39px !important;
  }
}


/* PIXEL-FISCHI UI FEINSCHLIFF MIT ROLLBACK 20260708_230335 */

/* Hero-Text etwas ruhiger, aber nicht zu klein */
.hero-text {
  max-width: 720px !important;
  font-size: 1rem !important;
  line-height: 1.42 !important;
  color: rgba(244,247,241,.76) !important;
  margin-bottom: 2.25em !important;
}

/* Benefit-Zeile minimal kräftiger */
.benefit-row {
  max-width: 720px !important;
}

.benefit-copy strong {
  font-size: 1.02rem !important;
  line-height: 1.12 !important;
  color: #f8fbf4 !important;
  font-weight: 850 !important;
}

.benefit-copy small {
  font-size: .84rem !important;
  line-height: 1.25 !important;
  color: rgba(244,247,241,.72) !important;
}

.mini-badge {
  border-color: rgba(155,224,66,.62) !important;
  background: rgba(155,224,66,.065) !important;
}

/* Kacheltexte etwas sauberer und einheitlicher */
.service-text-v3 h3,
.service-card-text h3,
.service-text-v2 h3 {
  font-size: 1.1rem !important;
  line-height: 1.14 !important;
  color: #f8fbf4 !important;
}

.service-text-v3 p,
.service-card-text p,
.service-text-v2 p {
  font-size: .9rem !important;
  line-height: 1.32 !important;
  color: rgba(244,247,241,.72) !important;
  max-width: 36ch !important;
}

/* Kacheln bleiben schmal und ruhig */
.service-card-v3,
.service-card-slim,
.service-card-v2 {
  min-height: 104px !important;
}

@media (max-width: 980px) {
  .hero-text {
    max-width: 100% !important;
  }
}

@media (max-width: 620px) {
  .benefit-copy strong {
    font-size: .96rem !important;
  }

  .benefit-copy small {
    font-size: .8rem !important;
  }
}




/* PIXEL-FISCHI HERO DEPTH LAYER V1 20260708_231443 */

/* Hero als eigene Bühne */
.hero {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
}

/* Hero-Bild bleibt ganz hinten */
.hero-bg-img,
.hero-final-img,
.hero-art-final,
.hero-art {
  z-index: 0 !important;
}

/* neue Schein-/Verlaufsebene: über Bild, unter Schrift */
.hero-depth-layer {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;

  background:
    radial-gradient(
      ellipse at 22% 34%,
      rgba(155,224,66,.135) 0%,
      rgba(155,224,66,.07) 19%,
      rgba(155,224,66,.025) 39%,
      transparent 66%
    ),
    linear-gradient(
      90deg,
      rgba(0,3,12,.88) 0%,
      rgba(0,3,12,.66) 36%,
      rgba(0,3,12,.28) 58%,
      rgba(0,3,12,0) 82%
    ) !important;

  opacity: .95 !important;
}

/* Text und Buttons sicher über der Verlaufsebene */
.hero-copy,
.hero .actions,
.hero .benefit-row {
  position: relative !important;
  z-index: 2 !important;
}

/* vorhandene dunkle Textplatte etwas entschärfen, weil die neue Ebene übernimmt */
.hero-copy::before {
  opacity: .55 !important;
}




/* PIXEL-FISCHI HERO DEPTH LAYER BOTTOM STRONGER 20260708_231700 */

.hero-depth-layer {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;

  background:
    radial-gradient(
      ellipse at 28% 98%,
      rgba(155,224,66,.24) 0%,
      rgba(155,224,66,.14) 18%,
      rgba(155,224,66,.055) 38%,
      transparent 67%
    ),
    radial-gradient(
      ellipse at 50% 105%,
      rgba(42,82,105,.22) 0%,
      rgba(20,45,62,.12) 28%,
      transparent 66%
    ),
    linear-gradient(
      0deg,
      rgba(155,224,66,.115) 0%,
      rgba(155,224,66,.065) 18%,
      rgba(0,3,12,.32) 46%,
      rgba(0,3,12,.04) 82%,
      transparent 100%
    ),
    linear-gradient(
      90deg,
      rgba(0,3,12,.86) 0%,
      rgba(0,3,12,.62) 38%,
      rgba(0,3,12,.24) 61%,
      rgba(0,3,12,0) 84%
    ) !important;

  opacity: 1 !important;
}

/* Text bleibt vorne */
.hero-copy,
.hero .actions,
.hero .benefit-row {
  position: relative !important;
  z-index: 2 !important;
}

/* Die alte Textplatte nicht zu stark dagegen arbeiten lassen */
.hero-copy::before {
  opacity: .42 !important;
}




/* PIXEL-FISCHI HERO DEPTH VIEWPORT FIXED 20260708_232018 */

/*
  Verlauf ist jetzt am sichtbaren Browserfenster ausgerichtet.
  Die Hero-Section zeigt nur den Ausschnitt davon.
*/
.hero {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
}

.hero-depth-layer {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;

  background-image:
    radial-gradient(
      ellipse at 24vw 82vh,
      rgba(155,224,66,.28) 0%,
      rgba(155,224,66,.16) 16%,
      rgba(155,224,66,.065) 34%,
      transparent 62%
    ),
    radial-gradient(
      ellipse at 46vw 95vh,
      rgba(38,82,105,.24) 0%,
      rgba(20,44,62,.13) 28%,
      transparent 64%
    ),
    linear-gradient(
      0deg,
      rgba(155,224,66,.12) 0%,
      rgba(155,224,66,.065) 18%,
      rgba(0,3,12,.26) 48%,
      rgba(0,3,12,.04) 78%,
      transparent 100%
    ),
    linear-gradient(
      90deg,
      rgba(0,3,12,.84) 0%,
      rgba(0,3,12,.60) 38%,
      rgba(0,3,12,.22) 62%,
      rgba(0,3,12,0) 84%
    ) !important;

  background-attachment: fixed !important;
  background-size: 100vw 100vh !important;
  background-position: left top !important;
  background-repeat: no-repeat !important;

  opacity: 1 !important;
}

/* Schrift/Buttons bleiben über der Lichtebene */
.hero-copy,
.hero .actions,
.hero .benefit-row {
  position: relative !important;
  z-index: 2 !important;
}

/* alte Textplatte etwas schwächer, damit der Verlauf sichtbar bleibt */
.hero-copy::before {
  opacity: .38 !important;
}




/* PIXEL-FISCHI HERO DEPTH VIEWPORT FIXED 20260708_232101 */

/*
  Verlauf ist jetzt am sichtbaren Browserfenster ausgerichtet.
  Die Hero-Section zeigt nur den Ausschnitt davon.
*/
.hero {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
}

.hero-depth-layer {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;

  background-image:
    radial-gradient(
      ellipse at 24vw 82vh,
      rgba(155,224,66,.28) 0%,
      rgba(155,224,66,.16) 16%,
      rgba(155,224,66,.065) 34%,
      transparent 62%
    ),
    radial-gradient(
      ellipse at 46vw 95vh,
      rgba(38,82,105,.24) 0%,
      rgba(20,44,62,.13) 28%,
      transparent 64%
    ),
    linear-gradient(
      0deg,
      rgba(155,224,66,.12) 0%,
      rgba(155,224,66,.065) 18%,
      rgba(0,3,12,.26) 48%,
      rgba(0,3,12,.04) 78%,
      transparent 100%
    ),
    linear-gradient(
      90deg,
      rgba(0,3,12,.84) 0%,
      rgba(0,3,12,.60) 38%,
      rgba(0,3,12,.22) 62%,
      rgba(0,3,12,0) 84%
    ) !important;

  background-attachment: fixed !important;
  background-size: 100vw 100vh !important;
  background-position: left top !important;
  background-repeat: no-repeat !important;

  opacity: 1 !important;
}

/* Schrift/Buttons bleiben über der Lichtebene */
.hero-copy,
.hero .actions,
.hero .benefit-row {
  position: relative !important;
  z-index: 2 !important;
}

/* alte Textplatte etwas schwächer, damit der Verlauf sichtbar bleibt */
.hero-copy::before {
  opacity: .38 !important;
}




/* PIXEL-FISCHI HERO VIEWPORT LIGHT REAL 20260708_232327 */

/*
  Lichtfläche ist jetzt 100vh groß.
  Sie liegt im Hero, wird aber nach oben verschoben.
  Dadurch wirkt der Verlauf wie vom sichtbaren Monitorbereich,
  nicht wie vom kleinen Hero-Kasten.
*/

.hero {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
}

.hero-depth-layer {
  position: absolute !important;
  inset: auto !important;

  left: 0 !important;
  right: 0 !important;

  /* ungefähr Header-Höhe ausgleichen */
  top: -74px !important;

  height: 100vh !important;
  width: 100% !important;

  z-index: 1 !important;
  pointer-events: none !important;

  background:
    radial-gradient(
      ellipse at 24% 82%,
      rgba(155,224,66,.34) 0%,
      rgba(155,224,66,.20) 14%,
      rgba(155,224,66,.085) 30%,
      transparent 58%
    ),
    radial-gradient(
      ellipse at 48% 92%,
      rgba(45,95,120,.28) 0%,
      rgba(18,44,62,.15) 26%,
      transparent 62%
    ),
    linear-gradient(
      0deg,
      rgba(155,224,66,.13) 0%,
      rgba(155,224,66,.07) 18%,
      rgba(0,3,12,.22) 46%,
      rgba(0,3,12,.04) 74%,
      transparent 100%
    ),
    linear-gradient(
      90deg,
      rgba(0,3,12,.84) 0%,
      rgba(0,3,12,.58) 38%,
      rgba(0,3,12,.18) 64%,
      rgba(0,3,12,0) 88%
    ) !important;

  opacity: 1 !important;
  background-attachment: scroll !important;
  background-size: 100% 100% !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

.hero-copy,
.hero .actions,
.hero .benefit-row {
  position: relative !important;
  z-index: 2 !important;
}

.hero-copy::before {
  opacity: .32 !important;
}




/* PIXEL-FISCHI REMOVE HERO DEPTH LAYER CLEAN 20260708_232517 */

/* alle Hero-Licht-/Testebenen sicher abschalten */
.hero-depth-layer {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  background: none !important;
}

/* Hero wieder ruhig halten */
.hero {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
}

/* Textplatte wieder normal arbeiten lassen */
.hero-copy::before {
  opacity: .75 !important;
}

/* Inhalt bleibt vorne */
.hero-copy,
.hero .actions,
.hero .benefit-row {
  position: relative !important;
  z-index: 2 !important;
}




/* PIXEL-FISCHI HERO COPY DEPTH CLEAN 20260708_233146 */

/*
  Analyse-Ergebnis:
  Keine neue hero-depth-layer.
  Tiefe passiert nur über .hero-copy::before.
  Diese Ebene liegt unter Text/Buttons, aber über dem Hero-Bild.
*/

.hero-depth-layer {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  background: none !important;
}

.hero {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  background-color: #00030c !important;
}

.hero-bg-img {
  position: absolute !important;
  z-index: 0 !important;
}

.hero-copy {
  position: relative !important;
  z-index: 2 !important;
  isolation: isolate !important;
}

/* Die eigentliche neue Tiefe: unter der Schrift, nicht global */
.hero-copy::before {
  content: "" !important;
  position: absolute !important;
  z-index: -1 !important;

  /* bewusst größer als der reine Textblock */
  inset: -34px -190px -42px -30px !important;
  border-radius: 30px !important;
  pointer-events: none !important;

  background:
    radial-gradient(
      ellipse at 18% 94%,
      rgba(155,224,66,.20) 0%,
      rgba(155,224,66,.115) 20%,
      rgba(155,224,66,.045) 43%,
      transparent 70%
    ),
    radial-gradient(
      ellipse at 58% 108%,
      rgba(44,92,118,.18) 0%,
      rgba(22,48,67,.09) 34%,
      transparent 66%
    ),
    linear-gradient(
      0deg,
      rgba(155,224,66,.085) 0%,
      rgba(155,224,66,.045) 22%,
      rgba(0,3,12,.18) 48%,
      transparent 76%
    ),
    linear-gradient(
      90deg,
      rgba(0,3,12,1) 0%,
      rgba(0,3,12,.96) 45%,
      rgba(0,3,12,.62) 72%,
      rgba(0,3,12,.18) 90%,
      rgba(0,3,12,0) 100%
    ) !important;

  opacity: 1 !important;
  filter: none !important;
  box-shadow: none !important;
}

/* Schrift und Bedienelemente bleiben sicher vorne */
.hero-title,
.hero-text,
.eyebrow,
.actions,
.benefit-row {
  position: relative !important;
  z-index: 2 !important;
}

@media (max-width: 980px) {
  .hero-copy::before {
    inset: -26px -36px -34px -24px !important;
    background:
      radial-gradient(
        ellipse at 28% 100%,
        rgba(155,224,66,.16) 0%,
        rgba(155,224,66,.075) 30%,
        transparent 68%
      ),
      linear-gradient(
        180deg,
        rgba(0,3,12,.96) 0%,
        rgba(0,3,12,.86) 72%,
        rgba(0,3,12,.45) 100%
      ) !important;
  }
}




/* PIXEL-FISCHI HERO SCHEIN KILL CLEAN 20260708_234450 */

/* Alle kaputten Hero-Schein-/Testebenen abschalten */
.hero-depth-layer,
.hero::before,
.hero::after,
.hero-final-layout::before,
.hero-final-layout::after {
  content: none !important;
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  background: none !important;
  background-image: none !important;
  box-shadow: none !important;
  filter: none !important;
  pointer-events: none !important;
}

/* Hero selbst wieder neutral und passend dunkel */
.hero,
.hero-final-layout {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  background: #00030c !important;
  background-color: #00030c !important;
  background-image: none !important;
}

/* Hero-Bild sauber hinten */
.hero-bg-img {
  display: block !important;
  position: absolute !important;
  z-index: 0 !important;
  right: 0 !important;
  top: 50% !important;
  height: 108% !important;
  width: auto !important;
  max-width: none !important;
  transform: translateY(-50%) !important;
  object-fit: contain !important;
  object-position: right center !important;
  opacity: 1 !important;
  filter: none !important;
  box-shadow: none !important;
  pointer-events: none !important;

  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0,0,0,.08) 3%,
    rgba(0,0,0,.45) 8%,
    black 14%,
    black 100%
  ) !important;
  mask-image: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0,0,0,.08) 3%,
    rgba(0,0,0,.45) 8%,
    black 14%,
    black 100%
  ) !important;
}

/* Alte doppelte Hero-Grafik weiter ausblenden */
.hero-art,
.hero-art-final,
.hero-final-img,
.hero-visual,
.workflow-map,
.node,
.line,
.mascot {
  display: none !important;
}

/* Textbereich vorne */
.hero-copy {
  position: relative !important;
  z-index: 2 !important;
  isolation: isolate !important;
}

/* Nur dunkle Lesbarkeitsfläche, KEIN grüner/Blauer Schein */
.hero-copy::before {
  content: "" !important;
  display: block !important;
  visibility: visible !important;
  position: absolute !important;
  z-index: -1 !important;
  pointer-events: none !important;

  inset: -24px -82px -24px -22px !important;
  border-radius: 0 !important;

  background: linear-gradient(
    90deg,
    rgba(0,3,12,1) 0%,
    rgba(0,3,12,.98) 58%,
    rgba(0,3,12,.64) 82%,
    rgba(0,3,12,0) 100%
  ) !important;

  opacity: 1 !important;
  filter: none !important;
  box-shadow: none !important;
}

/* Schrift/Button/Benefits sicher ganz vorne */
.hero-title,
.hero-title-white,
.hero-title-green,
.hero-text,
.eyebrow,
.actions,
.benefit-row {
  position: relative !important;
  z-index: 3 !important;
}

@media (max-width: 980px) {
  .hero-bg-img {
    top: auto !important;
    bottom: 0 !important;
    right: 50% !important;
    height: 340px !important;
    transform: translateX(50%) !important;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, black 10%, black 100%) !important;
    mask-image: linear-gradient(180deg, transparent 0%, black 10%, black 100%) !important;
  }

  .hero-copy::before {
    inset: -20px -20px -22px -20px !important;
    background: linear-gradient(
      180deg,
      rgba(0,3,12,.98) 0%,
      rgba(0,3,12,.90) 72%,
      rgba(0,3,12,.55) 100%
    ) !important;
  }
}

/* PIXEL-FISCHI ABLAUF ICONS V2 START */
#ablauf.process-v2 {
  padding: 34px 0 46px !important;
  text-align: center !important;
}

#ablauf.process-v2 .section-kicker {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 0 0 8px !important;
}

#ablauf.process-v2 .section-kicker::before,
#ablauf.process-v2 .section-kicker::after {
  content: "" !important;
  display: block !important;
  width: 34px !important;
  height: 1px !important;
  background: rgba(151,226,54,.34) !important;
}

#ablauf.process-v2 h2 {
  margin: 0 0 26px !important;
  color: #f4f7f1 !important;
  font-size: clamp(1.75rem, 2.55vw, 2.35rem) !important;
  line-height: 1.08 !important;
  letter-spacing: -.035em !important;
}

#ablauf .process-steps-v2 {
  width: 100% !important;
  max-width: none !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 18px !important;
  text-align: left !important;
}

#ablauf .process-steps-v2 article {
  position: relative !important;
  min-height: 98px !important;
  padding: 18px 24px !important;
  overflow: hidden !important;
  border-radius: 12px !important;
  background: linear-gradient(180deg, rgba(3,16,18,.96), rgba(3,10,16,.96)) !important;
  border: 1px solid rgba(151,226,54,.28) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    0 14px 32px rgba(0,0,0,.18) !important;
}

#ablauf .process-steps-v2 article:not(:last-child)::after {
  display: none !important;
  content: none !important;
}

/* echte Wasserzeichen-Zahlen: sichtbar, aber ruhig */
#ablauf .process-steps-v2 .step-watermark {
  position: absolute !important;
  right: 24px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 0 !important;

  font-size: 4.7rem !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  letter-spacing: -.06em !important;

  color: rgba(151,226,54,.13) !important;
  text-shadow: none !important;
  opacity: 1 !important;

  pointer-events: none !important;
  user-select: none !important;
}

#ablauf .process-steps-v2 .step-head {
  position: relative !important;
  z-index: 1 !important;
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  min-height: 62px !important;
}

/* Icon bekommt Mini-Kachel wie oben, aber kleiner */
#ablauf .process-steps-v2 .step-icon {
  width: 44px !important;
  height: 44px !important;
  flex: 0 0 44px !important;
  display: block !important;
  object-fit: contain !important;

  padding: 9px !important;
  box-sizing: border-box !important;

  border-radius: 12px !important;
  background:
    linear-gradient(180deg, rgba(151,226,54,.13), rgba(151,226,54,.045)) !important;
  border: 1px solid rgba(151,226,54,.36) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 10px 24px rgba(151,226,54,.06) !important;
}

#ablauf .process-steps-v2 .step-copy {
  min-width: 0 !important;
  padding-right: 92px !important;
}

#ablauf .process-steps-v2 h3 {
  margin: 0 0 6px !important;
  color: #f4f7f1 !important;
  font-size: 1.16rem !important;
  line-height: 1.1 !important;
  letter-spacing: -.015em !important;
}

#ablauf .process-steps-v2 p {
  margin: 0 !important;
  max-width: 42ch !important;
  color: rgba(244,247,241,.68) !important;
  font-size: .91rem !important;
  line-height: 1.42 !important;
}

@media (max-width: 980px) {
  #ablauf.process-v2 {
    padding: 24px 0 34px !important;
  }

  #ablauf .process-steps-v2 {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  #ablauf .process-steps-v2 article {
    min-height: 0 !important;
    padding: 16px 18px !important;
  }

  #ablauf .process-steps-v2 .step-head {
    min-height: 56px !important;
  }

  #ablauf .process-steps-v2 .step-icon {
    width: 42px !important;
    height: 42px !important;
    flex-basis: 42px !important;
    padding: 8px !important;
  }

  #ablauf .process-steps-v2 .step-copy {
    padding-right: 68px !important;
  }

  #ablauf .process-steps-v2 .step-watermark {
    font-size: 4rem !important;
    right: 12px !important;
    color: rgba(151,226,54,.12) !important;
  }
}
/* PIXEL-FISCHI ABLAUF ICONS V2 END */

/* PIXEL-FISCHI ABLAUF FINAL CLEAN OVERRIDE 20260710 */
#ablauf.process-v2 h2 {
  margin-bottom: 48px !important;
}

#ablauf .process-steps-v2 {
  margin-top: 0 !important;
}

#ablauf .process-steps-v2 .step-watermark {
  top: 16px !important;
  right: 22px !important;
  transform: none !important;

  width: auto !important;
  text-align: right !important;

  font-size: 4.15rem !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  letter-spacing: -.025em !important;

  color: rgba(151,226,54,.07) !important;
  opacity: 1 !important;

  background: none !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  padding: 0 !important;
}

#ablauf .process-steps-v2 .step-copy {
  padding-right: 118px !important;
}

@media (max-width: 980px) {
  #ablauf.process-v2 h2 {
    margin-bottom: 34px !important;
  }

  #ablauf .process-steps-v2 .step-watermark {
    top: 14px !important;
    right: 14px !important;
    font-size: 3.45rem !important;
    color: rgba(151,226,54,.065) !important;
  }

  #ablauf .process-steps-v2 .step-copy {
    padding-right: 82px !important;
  }
}

/* PIXEL-FISCHI REMOVE BRANCHEN COMPACT CTA START */
#ablauf.process-v2 {
  padding-bottom: 26px !important;
}

#kontakt.final-cta {
  margin-top: 26px !important;
  margin-bottom: 18px !important;
  padding: 26px 32px !important;
  min-height: 0 !important;
}

#kontakt.final-cta h2 {
  font-size: clamp(1.55rem, 2.35vw, 2.1rem) !important;
  margin-bottom: 7px !important;
}

#kontakt.final-cta p {
  max-width: 820px !important;
  font-size: .98rem !important;
  line-height: 1.42 !important;
  color: rgba(244,247,241,.76) !important;
}

@media (max-width: 980px) {
  #kontakt.final-cta {
    margin-top: 18px !important;
    padding: 22px 22px !important;
  }
}
/* PIXEL-FISCHI REMOVE BRANCHEN COMPACT CTA END */


/* PIXEL-FISCHI PAGE RHYTHM V1 START */

/*
  Ziel:
  - Ganze Seite kompakter und gleichmäßiger
  - CTA soll in der sichtbaren Gesamtansicht besser hochkommen
  - Hero-Bild/Einbettung nicht anfassen
*/

/* Hero unten minimal straffen, aber Bild/Layer unangetastet lassen */
.hero.section-shell {
  padding-bottom: 18px !important;
}

/* Benefit-Reihe etwas enger zu den Leistungskacheln */
.benefit-row {
  margin-bottom: 22px !important;
}

/* Leistungskacheln dichter an den Ablauf */
#leistungen.service-cards-v3,
.service-cards-v3 {
  padding-top: 0 !important;
  padding-bottom: 4px !important;
  margin-bottom: 0 !important;
}

/* Ablauf näher an die Leistungskacheln */
#ablauf.process-v2 {
  padding-top: 6px !important;
  padding-bottom: 8px !important;
}

/* Kicker/Headline im Ablauf kompakter */
#ablauf.process-v2 .section-kicker {
  margin-bottom: 6px !important;
}

#ablauf.process-v2 h2 {
  margin-top: 0 !important;
  margin-bottom: 24px !important;
}

/* Ablaufkarten unverändert breit/flach, aber ohne Extra-Luft */
#ablauf .process-steps-v2 {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* CTA näher an Ablauf und etwas flacher */
#kontakt.final-cta {
  margin-top: 8px !important;
  margin-bottom: 8px !important;
  padding-top: 18px !important;
  padding-bottom: 18px !important;
  min-height: 0 !important;
}

/* CTA-Inhalt kompakter */
#kontakt.final-cta h2 {
  margin-top: 0 !important;
  margin-bottom: 4px !important;
  line-height: 1.08 !important;
}

#kontakt.final-cta p {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  line-height: 1.28 !important;
  max-width: 760px !important;
}

/* Button in CTA nicht unnötig hoch wirken lassen */
#kontakt.final-cta .btn {
  min-height: 38px !important;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

/* Footer dichter an CTA */
.site-footer {
  padding-top: 8px !important;
  padding-bottom: 16px !important;
}

/* Menü-Link Branchen ausblenden, weil Block entfernt ist */
.site-nav a[href="#branchen"] {
  display: none !important;
}

@media (max-width: 980px) {
  .hero.section-shell {
    padding-bottom: 14px !important;
  }

  .benefit-row {
    margin-bottom: 18px !important;
  }

  #ablauf.process-v2 {
    padding-top: 4px !important;
    padding-bottom: 6px !important;
  }

  #ablauf.process-v2 h2 {
    margin-bottom: 20px !important;
  }

  #kontakt.final-cta {
    margin-top: 6px !important;
    padding-top: 16px !important;
    padding-bottom: 16px !important;
  }

  #kontakt.final-cta p {
    line-height: 1.3 !important;
  }

  .site-footer {
    padding-top: 6px !important;
    padding-bottom: 14px !important;
  }
}

/* PIXEL-FISCHI PAGE RHYTHM V1 END */

/* PIXEL-FISCHI CTA TEXT ONELINE START */
#kontakt.final-cta > div {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

#kontakt.final-cta p {
  max-width: none !important;
  white-space: nowrap !important;
  font-size: .92rem !important;
  line-height: 1.25 !important;
  overflow: visible !important;
}

#kontakt.final-cta .btn {
  flex: 0 0 auto !important;
}

@media (max-width: 980px) {
  #kontakt.final-cta p {
    white-space: normal !important;
    font-size: .92rem !important;
  }
}
/* PIXEL-FISCHI CTA TEXT ONELINE END */

/* PIXEL-FISCHI FOOTER LIFT START */
#kontakt.final-cta {
  margin-bottom: 2px !important;
}

.site-footer {
  margin-top: -6px !important;
  padding-top: 0 !important;
  padding-bottom: 12px !important;
}
/* PIXEL-FISCHI FOOTER LIFT END */

/* PIXEL-FISCHI VIEWPORT FIT V1 START */

/*
  Ziel:
  - Desktop-Ansicht stärker in den sichtbaren Bereich bringen
  - nicht alles brutal skalieren
  - Hero-Bild/Einbettung nicht neu bauen
*/

@media (min-width: 1100px) {
  .site-header {
    padding-top: 10px !important;
    padding-bottom: 8px !important;
  }

  .hero.section-shell {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }

  .hero-title {
    font-size: clamp(3.6rem, 5.2vw, 5.35rem) !important;
    line-height: .94 !important;
    margin-bottom: 12px !important;
  }

  .hero-text {
    max-width: 760px !important;
    font-size: 1rem !important;
    line-height: 1.35 !important;
    margin-bottom: 18px !important;
  }

  .actions {
    margin-top: 18px !important;
    margin-bottom: 20px !important;
  }

  .benefit-row {
    margin-top: 18px !important;
    margin-bottom: 18px !important;
  }

  .benefit-row article,
  .benefit-row > * {
    min-height: 0 !important;
  }

  #leistungen.service-cards-v3,
  .service-cards-v3 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }

  #leistungen .card,
  #leistungen article,
  .service-cards-v3 article {
    min-height: 86px !important;
    padding-top: 16px !important;
    padding-bottom: 16px !important;
  }

  #ablauf.process-v2 {
    padding-top: 2px !important;
    padding-bottom: 6px !important;
  }

  #ablauf.process-v2 .section-kicker {
    margin-bottom: 4px !important;
  }

  #ablauf.process-v2 h2 {
    font-size: clamp(1.85rem, 2.45vw, 2.35rem) !important;
    margin-bottom: 22px !important;
  }

  #ablauf .process-steps-v2 article {
    min-height: 82px !important;
    padding-top: 14px !important;
    padding-bottom: 14px !important;
  }

  #ablauf .process-steps-v2 .step-head {
    min-height: 48px !important;
  }

  #kontakt.final-cta {
    margin-top: 8px !important;
    margin-bottom: 2px !important;
    padding-top: 16px !important;
    padding-bottom: 16px !important;
  }

  #kontakt.final-cta h2 {
    font-size: clamp(1.55rem, 2.2vw, 2rem) !important;
    margin-bottom: 4px !important;
  }

  #kontakt.final-cta p {
    font-size: .9rem !important;
    line-height: 1.24 !important;
  }

  .site-footer {
    margin-top: -4px !important;
    padding-top: 0 !important;
    padding-bottom: 10px !important;
    font-size: .86rem !important;
  }
}

/* Noch kompakter bei niedriger sichtbarer Höhe */
@media (min-width: 1100px) and (max-height: 900px) {
  .hero-title {
    font-size: clamp(3.35rem, 4.9vw, 5rem) !important;
  }

  .hero-text {
    margin-bottom: 14px !important;
  }

  .actions {
    margin-top: 14px !important;
    margin-bottom: 16px !important;
  }

  .benefit-row {
    margin-top: 14px !important;
    margin-bottom: 14px !important;
  }

  #ablauf.process-v2 h2 {
    margin-bottom: 18px !important;
  }

  #kontakt.final-cta {
    padding-top: 14px !important;
    padding-bottom: 14px !important;
  }
}

/* PIXEL-FISCHI VIEWPORT FIT V1 END */

/* PIXEL-FISCHI BOTTOM TRIM START */

/* echten Layout-Abstand unten minimieren */
main {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

#kontakt.final-cta {
  margin-bottom: 0 !important;
}

.site-footer {
  margin-top: 0 !important;
  padding-top: 6px !important;
  padding-bottom: 4px !important;
  min-height: 0 !important;
}

/* falls alte globale Shell-Abstände unten wirken */
.site-footer.section-shell {
  margin-bottom: 0 !important;
}

body {
  padding-bottom: 0 !important;
}

/* PIXEL-FISCHI BOTTOM TRIM END */


/* PIXEL-FISCHI CTA TEMPLATE STYLE START */

#kontakt.final-cta {
  position: relative !important;
  overflow: hidden !important;

  background:
    radial-gradient(circle at 52% 50%, rgba(151,226,54,.16), transparent 34%),
    radial-gradient(circle at 88% 50%, rgba(151,226,54,.09), transparent 25%),
    linear-gradient(180deg, rgba(5,17,20,.98), rgba(4,11,17,.98)) !important;

  border: 1px solid rgba(151,226,54,.30) !important;
  border-radius: 14px !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    inset 0 0 34px rgba(151,226,54,.045),
    0 18px 44px rgba(0,0,0,.22) !important;
}

/* sauberer grüner Balken links wie in der Vorlage */
#kontakt.final-cta::before {
  content: "" !important;
  position: absolute !important;
  left: 24px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;

  width: 4px !important;
  height: 58px !important;
  border-radius: 999px !important;

  background: #97E236 !important;
  box-shadow: 0 0 18px rgba(151,226,54,.32) !important;

  opacity: 1 !important;
  pointer-events: none !important;
}

/* dezenter Pixel-Fischi-Akzent rechts, wie Vorlage */
#kontakt.final-cta::after {
  content: "P" !important;
  position: absolute !important;
  right: 34px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;

  font-size: 5.8rem !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  letter-spacing: -.08em !important;

  color: rgba(151,226,54,.10) !important;
  text-shadow: 0 0 24px rgba(151,226,54,.08) !important;

  pointer-events: none !important;
  user-select: none !important;
}

/* Inhalt vom linken Balken wegschieben */
#kontakt.final-cta > div {
  position: relative !important;
  z-index: 1 !important;
  padding-left: 28px !important;
  min-width: 0 !important;
}

#kontakt.final-cta h2 {
  color: #f8fff2 !important;
}

#kontakt.final-cta p {
  color: rgba(244,247,241,.82) !important;
}

#kontakt.final-cta .btn {
  position: relative !important;
  z-index: 2 !important;
}

/* CTA-Text weiter einzeilig halten */
#kontakt.final-cta p {
  white-space: nowrap !important;
  max-width: none !important;
  font-size: .9rem !important;
}

@media (max-width: 980px) {
  #kontakt.final-cta::before {
    left: 18px !important;
    height: 48px !important;
  }

  #kontakt.final-cta::after {
    right: 18px !important;
    font-size: 4.2rem !important;
  }

  #kontakt.final-cta > div {
    padding-left: 22px !important;
  }

  #kontakt.final-cta p {
    white-space: normal !important;
  }
}

/* PIXEL-FISCHI CTA TEMPLATE STYLE END */

/* PIXEL-FISCHI GLOBAL DUNKEL FINAL START */

/*
  Einheitliches dunkles Schwarz für alle Seiten.
  Kein Glow und kein Hintergrundverlauf.
*/
:root {
  --pf-page-background: #00030c;
}

html,
body,
body.services-page {
  min-height: 100%;

  background: var(--pf-page-background) !important;
  background-color: var(--pf-page-background) !important;
  background-image: none !important;
}

/* Alte globale Licht-, Punkt- und Nebelebenen abschalten. */
body::before,
body::after {
  content: none !important;
  display: none !important;

  background: none !important;
  background-image: none !important;
}

/* Keine zweite abweichende Hintergrundfläche im Hero. */
.hero,
.hero-final-layout,
.services-hero,
body.services-page main {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* PIXEL-FISCHI GLOBAL DUNKEL FINAL END */

/* PIXEL-FISCHI SHARED WORKFLOW ICON SPRITE */
.pf-sprite-icon {
  background-image: url("assets/workflow-icons-grid.png") !important;
  background-repeat: no-repeat !important;
  background-size: 400% 400% !important;
  border: 0 !important;
  box-shadow: none !important;
}
.pf-sprite-icon > * { display: none !important; }
.pf-icon-automation { background-position: 33.333% 0 !important; }
.pf-icon-data { background-position: 100% 0 !important; }
.pf-icon-shop { background-position: 0 33.333% !important; }
.pf-icon-tools { background-position: 33.333% 33.333% !important; }
.pf-icon-plan { background-position: 66.667% 33.333% !important; }
.pf-icon-support { background-position: 100% 33.333% !important; }
.pf-icon-analysis { background-position: 0 66.667% !important; }
.pf-icon-problem { background-position: 33.333% 66.667% !important; }
.pf-icon-code { background-position: 100% 66.667% !important; }
.pf-icon-test { background-position: 0 100% !important; }
.pf-icon-improve { background-position: 0 0 !important; }
.pf-icon-integrate { background-position: 66.667% 100% !important; }
.pf-icon-result { background-position: 100% 100% !important; }

/* Die spezifische Ablauf-Kachel setzt sonst ihr Verlaufs-Background über das Sprite. */
#ablauf .process-steps-v2 .step-icon.pf-sprite-icon {
  padding: 0 !important;
  background-image: url("assets/workflow-icons-grid.png") !important;
  background-repeat: no-repeat !important;
  background-size: 400% 400% !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Eigene, eindeutige Prozess-Icons: quadratische Ausschnitte aus dem 2x2-Asset. */
.pf-process-icon {
  display: block;
  background-image: url("assets/workflow-process-icons-v2.png?v=20260901213500") !important;
  background-repeat: no-repeat !important;
  background-size: 300% 200% !important;
  border: 0 !important;
  box-shadow: none !important;
}
.pf-process-understand { background-position: 20% 0 !important; }
.pf-process-simplify { background-position: 78% 0 !important; }
.pf-process-implement { background-position: 20% 100% !important; }
.pf-process-data-check { background-position: 78% 100% !important; }

#ablauf .process-steps-v2 .step-icon.pf-process-icon,
.service-flow .flow-icon.pf-process-icon {
  padding: 0 !important;
  background-image: url("assets/workflow-process-icons-v2.png?v=20260901213500") !important;
  background-repeat: no-repeat !important;
  background-size: 300% 200% !important;
  border: 0 !important;
  box-shadow: none !important;
}

#ablauf .process-steps-v2 .step-icon.pf-process-understand,
.service-flow .flow-icon.pf-process-understand { background-position: 20% 0 !important; }
#ablauf .process-steps-v2 .step-icon.pf-process-simplify,
.service-flow .flow-icon.pf-process-simplify { background-position: 78% 0 !important; }
#ablauf .process-steps-v2 .step-icon.pf-process-implement,
.service-flow .flow-icon.pf-process-implement { background-position: 20% 100% !important; }
#ablauf .process-steps-v2 .step-icon.pf-process-data-check,
.service-flow .flow-icon.pf-process-data-check { background-position: 78% 100% !important; }

.nav a[aria-current="page"] { color: var(--green); }
/* Produktions-Finish: lange Hero-Zeilen dürfen auf kleinen Displays umbrechen. */
@media (max-width: 620px) {
  .hero h1.hero-title .hero-title-white,
  .hero h1.hero-title .hero-title-green {
    white-space: normal !important;
    overflow-wrap: normal !important;
  }
}