/* Satoshi — dieselbe Schrift wie ProjectOne.
   Lizenz: Fontshare / ITF Free Font License, kommerziell nutzbar.
   Selbst gehostet: kein Aufruf an fremde Server (DSGVO). */
@font-face{
  font-family:'Satoshi'; font-style:normal; font-weight:400; font-display:swap;
  src:url('../fonts/satoshi-400.woff2') format('woff2');
}
@font-face{
  font-family:'Satoshi'; font-style:normal; font-weight:500; font-display:swap;
  src:url('../fonts/satoshi-500.woff2') format('woff2');
}
@font-face{
  font-family:'Satoshi'; font-style:normal; font-weight:700; font-display:swap;
  src:url('../fonts/satoshi-700.woff2') format('woff2');
}

/* ============================================================
   Business Innovation AI — Design System
   Farben aus dem CI (Logo-SVGs): #00CCCC / #001B14 / #F8F8F8
   ============================================================ */

:root{
  /* Marke */
  --brand:        #00CCCC;
  --brand-deep:   #00A8A8;
  --brand-soft:   #E6FAFA;
  --brand-glow:   rgba(0,204,204,.28);

  /* Neutral */
  --ink:          #001B14;
  --ink-soft:     #0E2A24;
  --muted:        #5E7370;
  --line:         rgba(0,27,20,.10);
  --line-strong:  rgba(0,27,20,.18);
  --bg:           #FFFFFF;
  --surface:      #F8F8F8;
  --surface-2:    #F0F0F0;

  /* Form */
  --r-card:       22px;
  --r-lg:         28px;
  --r-pill:       999px;

  --shadow-sm:    0 1px 2px rgba(0,27,20,.05), 0 4px 12px rgba(0,27,20,.05);
  --shadow-md:    0 2px 4px rgba(0,27,20,.04), 0 12px 32px rgba(0,27,20,.08);
  --shadow-lg:    0 4px 8px rgba(0,27,20,.04), 0 24px 60px rgba(0,27,20,.12);

  /* Raster */
  --container:    1240px;
  --gutter:       clamp(20px, 5vw, 48px);
  --section-y:    clamp(72px, 11vw, 152px);

  /* Bewegung */
  --ease:         cubic-bezier(.22,.61,.36,1);
  --ease-out:     cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; scroll-padding-top:96px; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:'Satoshi',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:clamp(16px,1.05vw,17px);
  line-height:1.65;
  font-feature-settings:'kern','liga','cv11';
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3,h4,.font-display{
  font-family:'Satoshi',sans-serif;
  font-weight:500;
  letter-spacing:-.02em;
  line-height:1.1;
  margin:0;
  text-wrap:balance;
}

h1{ font-size:clamp(2.4rem,6.6vw,5.1rem); font-weight:700; letter-spacing:-.032em; line-height:1.04; }
h2{ font-size:clamp(1.9rem,4.2vw,3.2rem); }
h3{ font-size:clamp(1.15rem,1.8vw,1.5rem); line-height:1.25; }

p{ margin:0; text-wrap:pretty; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; height:auto; display:block; }
ul{ margin:0; padding:0; list-style:none; }
button{ font:inherit; color:inherit; border:0; background:none; cursor:pointer; }

/* --- Layout-Bausteine --- */
.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter); }
.section{ padding-block:var(--section-y); position:relative; }
.section--surface{ background:var(--surface); }
.section--ink{ background:var(--ink); color:#fff; }
.section--ink h2,.section--ink h3{ color:#fff; }

.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:'Satoshi',sans-serif; font-size:.75rem; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
  margin-bottom:18px;
}
.eyebrow::before{ content:''; width:22px; height:1px; background:var(--brand); }
.section--ink .eyebrow{ color:rgba(255,255,255,.55); }

.lead{ font-size:clamp(1.02rem,1.35vw,1.18rem); color:var(--muted); max-width:56ch; }
.section--ink .lead{ color:rgba(255,255,255,.66); }

.section-head{ max-width:720px; margin-bottom:clamp(40px,5vw,72px); }
.section-head .lead{ margin-top:20px; }

/* --- Buttons --- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 26px; border-radius:var(--r-pill);
  font-family:'Satoshi',sans-serif; font-weight:500; font-size:.95rem;
  letter-spacing:.01em; white-space:nowrap;
  transition:transform .3s var(--ease), background-color .3s var(--ease),
             color .3s var(--ease), box-shadow .3s var(--ease);
}
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }
.btn:focus-visible{ outline:2px solid var(--brand); outline-offset:3px; }

.btn--primary{ background:var(--ink); color:#fff; box-shadow:var(--shadow-sm); }
.btn--primary:hover{ background:var(--brand); color:var(--ink); box-shadow:0 8px 28px var(--brand-glow); }

.btn--brand{ background:var(--brand); color:var(--ink); font-weight:700; }
.btn--brand:hover{ background:var(--brand-deep); color:#fff; box-shadow:0 8px 28px var(--brand-glow); }

.btn--ghost{ background:transparent; color:var(--ink); box-shadow:inset 0 0 0 1px var(--line-strong); }
.btn--ghost:hover{ box-shadow:inset 0 0 0 1px var(--ink); }
.section--ink .btn--ghost{ color:#fff; box-shadow:inset 0 0 0 1px rgba(255,255,255,.24); }
.section--ink .btn--ghost:hover{ box-shadow:inset 0 0 0 1px #fff; }

.btn__arrow{
  width:24px; height:24px; flex:0 0 24px; border-radius:50%;
  background:var(--brand); color:var(--ink);
  display:grid; place-items:center; font-size:11px;
  transition:transform .3s var(--ease), background-color .3s var(--ease);
}
.btn--primary:hover .btn__arrow{ background:var(--ink); color:var(--brand); transform:translateX(2px); }

/* --- Scroll-Reveal --- */
.js-an .reveal{
  opacity:0; transform:translateY(30px);
  transition:opacity .8s var(--ease-out), transform .8s var(--ease-out);
  transition-delay:calc(var(--i, 0) * 90ms);
  will-change:opacity, transform;
}
.js-an .reveal.is-in{ opacity:1; transform:none; }

/* ============================================================
   HEADER  —  sticky Pill-Navigation
   ============================================================ */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:100;
  padding:18px var(--gutter);
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  transition:padding .4s var(--ease), background-color .4s var(--ease),
             box-shadow .4s var(--ease), backdrop-filter .4s var(--ease);
}
.site-header.is-scrolled{
  padding-block:11px;
  background:rgba(255,255,255,.78);
  backdrop-filter:blur(16px) saturate(1.5);
  -webkit-backdrop-filter:blur(16px) saturate(1.5);
  box-shadow:0 1px 0 var(--line);
}

.brand{ display:flex; align-items:center; gap:10px; flex:0 0 auto; }
/* Das Zeichen steht auf einem tuerkisen Feld statt frei auf Weiss —
   so wie in der Logodatei BI_tuerkis_ohneText. Als CSS statt als Bild:
   bleibt scharf, braucht keinen zusaetzlichen Ladevorgang und faerbt
   sich automatisch mit, falls die Markenfarbe je geaendert wird. */
/* Das offizielle Zeichen als Bilddatei — es bringt die tuerkise Flaeche
   bereits mit, deshalb hier kein Hintergrund und keine Innenabstaende. */
/* Vektorfassung statt Bilddatei: BI_weiss.png ist randlos beschnitten
   (Inhalt beruehrt alle vier Kanten), dadurch wirkte das Rufzeichen unten
   abgeschnitten. Das Feld kommt aus dem CSS, der Abstand ist frei waehlbar. */
.brand__mark{
  width:46px; height:46px; flex:0 0 46px; display:block;
  background:var(--brand); border-radius:13px;
  color:#fff;
  box-shadow:0 3px 12px var(--brand-glow);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.brand:hover .brand__mark{ transform:rotate(-4deg) scale(1.05); box-shadow:0 6px 20px var(--brand-glow); }
.site-footer .brand__mark{ box-shadow:none; }
/* Der Schriftzug folgt der Typografie des Logos: leichter Schnitt,
   offene Laufweite. Vorher stand er halbfett mit enger Laufweite und
   einer tuerkisen "AI"-Kachel — das war nachempfunden, nicht eure Marke. */
.brand__text{
  font-family:'Satoshi',sans-serif; font-weight:400; font-size:1.1rem;
  letter-spacing:.005em; white-space:nowrap;
}


.nav-cluster{ display:flex; align-items:center; gap:10px; }

.nav{
  display:flex; align-items:center; gap:4px;
  background:var(--surface-2); border-radius:var(--r-pill); padding:5px;
}
.nav a{
  font-family:'Satoshi',sans-serif; font-size:.76rem; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink);
  padding:9px 17px; border-radius:var(--r-pill);
  transition:background-color .28s var(--ease), color .28s var(--ease);
}
.nav a:hover,.nav a.is-active{ background:#fff; box-shadow:var(--shadow-sm); }

.nav-cta{
  display:inline-flex; align-items:center; gap:9px;
  background:var(--ink); color:#fff;
  font-family:'Satoshi',sans-serif; font-size:.76rem; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase;
  padding:11px 12px 11px 20px; border-radius:var(--r-pill);
  transition:background-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
}
.nav-cta:hover{ background:var(--brand); color:var(--ink); transform:translateY(-2px); box-shadow:0 8px 24px var(--brand-glow); }
.nav-cta span{
  width:22px; height:22px; border-radius:50%; background:var(--brand); color:var(--ink);
  display:grid; place-items:center; font-size:10px;
  transition:background-color .3s var(--ease), color .3s var(--ease);
}
.nav-cta:hover span{ background:var(--ink); color:var(--brand); }

/* Burger */
/* Zuvor ein blasser grauer Kreis mit duennen Strichen — wirkte unfertig.
   Jetzt weisser Kreis mit feiner Kontur, kraeftigere Striche, und beim
   Antippen faerbt sich die Kontur tuerkis. */
.burger{
  display:none; width:44px; height:44px; border-radius:50%;
  background:#fff; box-shadow:inset 0 0 0 1px var(--line-strong), var(--shadow-sm);
  place-items:center;
  transition:box-shadow .3s var(--ease), transform .3s var(--ease);
}
.burger:hover,
.burger:active{ box-shadow:inset 0 0 0 1.5px var(--brand), 0 6px 18px var(--brand-glow); }
.burger i{
  display:block; width:18px; height:1.5px; background:var(--ink); border-radius:2px;
  transition:transform .35s var(--ease), opacity .25s var(--ease);
}
.burger i + i{ margin-top:2px; }
body.menu-open .burger{ box-shadow:inset 0 0 0 1.5px var(--brand), var(--shadow-sm); }
body.menu-open .burger i:nth-child(1){ transform:translateY(3.5px) rotate(45deg); }
body.menu-open .burger i:nth-child(2){ opacity:0; }
body.menu-open .burger i:nth-child(3){ transform:translateY(-3.5px) rotate(-45deg); }

/* Mobile-Overlay */
.mobile-nav{
  position:fixed; inset:0; z-index:99; background:#fff;
  padding:96px var(--gutter) 40px;
  display:flex; flex-direction:column; gap:4px;
  overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
  opacity:0; visibility:hidden; transform:translateY(-12px);
  transition:opacity .4s var(--ease), transform .4s var(--ease), visibility .4s;
}
body.menu-open .mobile-nav{ opacity:1; visibility:visible; transform:none; }
.mobile-nav a{
  font-family:'Satoshi',sans-serif; font-size:1.3rem; font-weight:500;
  letter-spacing:-.01em; padding:13px 0; border-bottom:1px solid var(--line);
  opacity:0; transform:translateY(16px);
  transition:opacity .5s var(--ease) calc(var(--i)*60ms), transform .5s var(--ease) calc(var(--i)*60ms);
}
body.menu-open .mobile-nav a{ opacity:1; transform:none; }
.mobile-nav .btn{
  margin-top:24px; justify-content:center;
  font-size:1rem; padding:15px 22px; line-height:1.2;
  border-bottom:none; letter-spacing:0;
}

/* ============================================================
   HERO  —  schwebende, rotierte Karten um den Claim
   ============================================================ */
.hero{
  position:relative; min-height:100svh;
  display:grid; place-items:center;
  padding:140px var(--gutter) 90px;
  overflow:hidden;
}
.hero__halo{
  position:absolute; left:50%; top:50%; translate:-50% -50%;
  width:min(78vw,860px); aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle at 50% 45%, var(--surface) 0%, var(--surface) 55%, rgba(248,248,248,0) 72%);
  z-index:0; pointer-events:none;
}
.hero__halo::after{
  content:''; position:absolute; inset:22%; border-radius:50%;
  background:radial-gradient(circle, var(--brand-glow) 0%, rgba(0,204,204,0) 68%);
  opacity:.5; filter:blur(28px);
}

/* Die Breite folgt dem Sichtfeld: Die Karten stehen prozentual am Rand,
   deshalb muss die Textspalte auf schmalen Desktops mitschrumpfen —
   sonst laeuft der Fliesstext in die Karten hinein. */
.hero__inner{ position:relative; z-index:3; text-align:center; max-width:min(740px, 52vw); }
.hero__badge{
  display:inline-flex; align-items:center; gap:9px; text-wrap:balance;
  background:#fff; box-shadow:var(--shadow-sm);
  border:1px solid var(--line); border-radius:var(--r-pill);
  padding:7px 16px 7px 9px; margin-bottom:26px;
  font-size:.83rem; color:var(--muted);
}
.hero__badge b{ color:var(--ink); font-weight:700; }
.hero__dot{ display:block; flex:0 0 auto; width:7px; height:7px; min-width:7px; min-height:7px; aspect-ratio:1/1; border-radius:50%; background:var(--brand); box-shadow:0 0 0 4px var(--brand-glow); animation:pulse 2.4s var(--ease) infinite; }
@keyframes pulse{ 0%,100%{ box-shadow:0 0 0 3px var(--brand-glow); } 50%{ box-shadow:0 0 0 8px rgba(0,204,204,0); } }

.hero h1 .accent{ color:var(--brand); }
.hero__sub{ margin:30px auto 0; font-size:clamp(1rem,1.35vw,1.12rem); color:var(--muted); max-width:42ch; }
.hero__actions{ margin-top:40px; display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.hero__note{ margin-top:20px; font-size:.83rem; color:var(--muted); }

/* Karten-Szene */
.hero__scene{
  position:absolute; top:0; bottom:0; left:50%; transform:translateX(-50%);
  width:100%; max-width:1560px;
  z-index:1; pointer-events:none;
}

.hcard{
  position:absolute;
  left:var(--l,auto); top:var(--t,auto);
  width:var(--w,190px);
  background:#fff; border-radius:18px; padding:14px;
  box-shadow:var(--shadow-md);
  border:1px solid var(--line);
  transform:
    translate3d(var(--px,0px), calc(var(--py,0px) + var(--enter-y,60px)), 0)
    rotate(var(--r,0deg))
    scale(var(--sc,.86));
  opacity:0;
  transition:opacity .9s var(--ease-out) var(--d,0ms), transform 1.1s var(--ease-out) var(--d,0ms);
  will-change:transform;
}
.hero.is-ready .hcard{ opacity:1; --enter-y:0px; --sc:1; }
/* nach dem Eintritt übernimmt JS die Parallaxe — kurze Transition, damit es folgt statt schleppt */
.hero.is-live .hcard{ transition:transform .45s var(--ease), opacity .4s var(--ease); }

.hcard__label{
  display:block;
  font-family:'Satoshi',sans-serif; font-size:.8rem; font-weight:500;
  letter-spacing:-.01em; line-height:1.3; color:var(--ink);
  /* Lange Fachwoerter (Dokumentenverarbeitung …) brechen mit Trennstrich
     um statt ueber die Kachel zu laufen; overflow-wrap als Notanker fuer
     Browser ohne deutsche Silbentrennung. */
  hyphens:manual; -webkit-hyphens:manual; overflow-wrap:break-word;
}
/* display:block ist hier Pflicht — als Inline-Element liefe der Zusatz
   in dieselbe Zeile wie die Beschriftung und margin-top bliebe wirkungslos. */
.hcard__meta{ display:block; font-size:.68rem; color:var(--muted); margin-top:3px; }
.hcard__thumb{
  border-radius:11px; overflow:hidden; margin-bottom:11px;
  aspect-ratio:4/3; background:var(--surface-2);
}
.hcard__thumb img{ width:100%; height:100%; object-fit:cover; }

/* Text-only Karte im ProjectOne-Stil: Label vertikal an der Kante */
.hcard--plain{ aspect-ratio:1/1.04; display:grid; align-items:end; background:var(--surface); }
.hcard--plain .hcard__label{
  writing-mode:vertical-rl; transform:rotate(180deg);
  justify-self:start; align-self:end; padding:0 0 2px 2px;
  letter-spacing:.02em;
}
.hcard--brand{ background:var(--brand); border-color:transparent; }
.hcard--brand .hcard__label{ color:var(--ink); font-weight:700; }
.hcard--ink{ background:var(--ink); border-color:transparent; }
.hcard--ink .hcard__label{ color:#fff; }
.hcard--ink .hcard__meta{ color:rgba(255,255,255,.5); }

/* Die Mobile-Variante (Karten als Band) steht im Responsive-Block weiter unten. */

/* ============================================================
   PROBLEM  —  "Kennen Sie das?"
   ============================================================ */
.pain-grid{ display:grid; gap:14px; grid-template-columns:repeat(3,1fr); }
.pain{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-card);
  padding:28px 26px 30px; position:relative; overflow:hidden;
  transition:transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease);
}
.pain:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:transparent; }
.pain__num{
  font-family:'Satoshi',sans-serif; font-size:.72rem; font-weight:500; letter-spacing:.12em;
  color:var(--brand); display:block; margin-bottom:14px;
}
.pain h3{ margin-bottom:9px; }
.pain p{ font-size:.94rem; color:var(--muted); }
.pain::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:var(--brand); transform:scaleX(0); transform-origin:left;
  transition:transform .5s var(--ease);
}
.pain:hover::after{ transform:scaleX(1); }

.pain-cta{
  margin-top:46px; display:flex; align-items:center; justify-content:space-between;
  gap:28px; flex-wrap:wrap;
  background:var(--ink); color:#fff; border-radius:var(--r-lg); padding:34px 38px;
}
.pain-cta p{ font-family:'Satoshi',sans-serif; font-size:clamp(1.15rem,2vw,1.6rem); max-width:30ch; }
.pain-cta .accent{ color:var(--brand); }

/* ============================================================
   PROZESS  —  5 Schritte
   ============================================================ */
.steps{ position:relative; display:grid; grid-template-columns:repeat(5,1fr); gap:20px; }
.steps__line{
  position:absolute; left:0; right:0; top:27px; height:1px; background:var(--line-strong);
  transform:scaleX(0); transform-origin:left;
  transition:transform 1.4s var(--ease-out) .2s;
}
.steps.is-in .steps__line{ transform:scaleX(1); }

.step{ position:relative; z-index:2; }
.step__dot{
  width:54px; height:54px; border-radius:50%;
  background:#fff; border:1px solid var(--line-strong);
  display:grid; place-items:center; margin-bottom:22px; position:relative; z-index:2;
  font-family:'Satoshi',sans-serif; font-weight:500; font-size:1.05rem;
  transition:background-color .4s var(--ease), color .4s var(--ease),
             border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.step:hover .step__dot{ background:var(--brand); border-color:var(--brand); box-shadow:0 6px 22px var(--brand-glow); }
.step h3{ font-size:1.08rem; margin-bottom:8px; }
.step p{ font-size:.9rem; color:var(--muted); }
.step__time{
  display:inline-block; margin-top:12px; font-size:.72rem; letter-spacing:.06em;
  text-transform:uppercase; color:var(--brand-deep); font-family:'Satoshi',sans-serif;
}

/* ============================================================
   LEISTUNGEN
   ============================================================ */
.services{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.service{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:34px 32px 36px; display:flex; flex-direction:column; gap:16px;
  position:relative; overflow:hidden;
  transition:transform .5s var(--ease), box-shadow .5s var(--ease);
}
.service:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); }
.service__glow{
  position:absolute; right:-60px; top:-60px; width:200px; height:200px; border-radius:50%;
  background:radial-gradient(circle,var(--brand-glow),rgba(0,204,204,0) 70%);
  opacity:0; transition:opacity .6s var(--ease); pointer-events:none;
}
.service:hover .service__glow{ opacity:1; }
.service__icon{
  width:46px; height:46px; border-radius:13px; background:var(--brand-soft);
  display:grid; place-items:center; color:var(--brand-deep);
  transition:background-color .4s var(--ease), color .4s var(--ease), transform .4s var(--ease);
}
.service:hover .service__icon{ background:var(--brand); color:var(--ink); transform:rotate(-6deg) scale(1.06); }
.service p{ color:var(--muted); font-size:.95rem; }
.service__list{ display:flex; flex-direction:column; gap:8px; margin-top:4px; }
.service__list li{ font-size:.88rem; color:var(--ink-soft); display:flex; gap:9px; align-items:flex-start; }
.service__list li::before{ content:''; width:5px; height:5px; border-radius:50%; background:var(--brand); margin-top:8px; flex:0 0 5px; }
.service__link{
  margin-top:auto; padding-top:8px; font-family:'Satoshi',sans-serif; font-size:.88rem;
  color:var(--ink); display:inline-flex; align-items:center; gap:7px;
}
.service__link i{ transition:transform .35s var(--ease); font-style:normal; color:var(--brand-deep); }
.service:hover .service__link i{ transform:translateX(5px); }

/* ============================================================
   REFERENZEN  —  Logo-Laufband + Kennzahlen
   ============================================================ */
.marquee{ position:relative; overflow:hidden; padding-block:8px; -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent); mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent); }
.marquee__track{
  display:flex; width:max-content;
  /* --start wird per Skript gesetzt: die Reihe beginnt in der Bildmitte */
  animation:marquee var(--tempo, 150s) linear infinite;
  will-change:transform;
}
.marquee:hover .marquee__track{ animation-play-state:paused; }
/* Drei Kopien im Band -> ein Durchlauf entspricht einem Drittel. */
@keyframes marquee{ to{ transform:translateX(-33.3333%); } }

/* Zwei getrennte Ebenen: aussen der statische Versatz, innen die Bewegung.
   var() in @keyframes waere nicht zuverlaessig interpolierbar. */
.marquee__shift{ display:block; will-change:transform; }
.marquee__item{
  flex:0 0 auto; width:clamp(140px,15vw,190px); height:76px;
  display:grid; place-items:center; padding:0 22px;
}
.marquee__item img{
  max-height:44px; width:auto; object-fit:contain;
  filter:grayscale(1); opacity:.5;
  transition:filter .4s var(--ease), opacity .4s var(--ease);
}
.marquee__item:hover img{ filter:none; opacity:1; }

.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:clamp(48px,6vw,84px); }
.stat{ border-left:1px solid var(--line-strong); padding-left:22px; }
.stat__num{ font-family:'Satoshi',sans-serif; font-size:clamp(2.1rem,4vw,3rem); font-weight:500; letter-spacing:-.03em; line-height:1; }
.stat__num .unit{ color:var(--brand); }
.stat__label{ font-size:.86rem; color:var(--muted); margin-top:10px; }

/* Use-Cases */
.cases{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:clamp(48px,6vw,80px); }
.case{
  border-radius:var(--r-lg); overflow:hidden; background:#fff;
  border:1px solid var(--line); display:flex; flex-direction:column;
  transition:transform .5s var(--ease), box-shadow .5s var(--ease);
}
.case:hover{ transform:translateY(-5px); box-shadow:var(--shadow-lg); }
.case__img{ aspect-ratio:16/11; overflow:hidden; background:var(--surface-2); }
.case__img img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }
.case:hover .case__img img{ transform:scale(1.05); }
.case__body{ padding:24px 24px 28px; display:flex; flex-direction:column; gap:10px; flex:1; }
.case__tag{ font-family:'Satoshi',sans-serif; font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--brand-deep); }
.case p{ font-size:.92rem; color:var(--muted); }
.case__result{
  margin-top:auto; padding-top:16px; border-top:1px solid var(--line);
  font-family:'Satoshi',sans-serif; font-size:.95rem;
}
.case__result b{ color:var(--brand-deep); font-weight:700; }

/* ============================================================
   ÜBER UNS
   ============================================================ */
.about{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,72px); align-items:center; }
.about__media{ position:relative; }
/* Nur direkte Kinder — sonst erbt jedes Bild im Bildfeld (auch Portraits
   in runden Rahmen) dieses Seitenverhaeltnis und wird gestaucht. */
.about__media > img{ border-radius:var(--r-lg); width:100%; aspect-ratio:4/5; object-fit:cover; }
/* Steht unter der Karte, nicht darauf. Als dort noch ein Foto lag, war das
   Ueberlappen gewollt; auf einer Karte mit Standortpunkt und Beschriftung
   verdeckt es den Inhalt. */
.about__badge{
  margin:18px 0 0; background:#fff; border-radius:18px;
  padding:18px 22px; box-shadow:var(--shadow-md);
  display:flex; align-items:center; gap:14px;
  border:1px solid var(--line);
}
.about__badge .icon{ width:38px; height:38px; border-radius:11px; background:var(--brand); display:grid; place-items:center; flex:0 0 38px; }
.about__badge b{ font-family:'Satoshi',sans-serif; font-size:.92rem; display:block; }
.about__badge span{ font-size:.76rem; color:var(--muted); }

.team{ display:grid; gap:14px; margin-top:34px; }
.team__person{ display:flex; gap:16px; align-items:flex-start; padding:18px 0; border-top:1px solid var(--line); }
.team__person b{ font-family:'Satoshi',sans-serif; font-size:1.02rem; font-weight:500; }
.team__person .role{ font-size:.86rem; color:var(--muted); display:block; margin-top:3px; }
.team__initials{
  width:44px; height:44px; flex:0 0 44px; border-radius:50%;
  background:var(--brand-soft); color:var(--brand-deep);
  display:grid; place-items:center; font-family:'Satoshi',sans-serif; font-weight:700; font-size:.9rem;
}

/* ============================================================
   KUNDENSTIMMEN
   ============================================================ */
.quotes{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.quote{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:32px 30px; display:flex; flex-direction:column; gap:18px;
  transition:transform .5s var(--ease), box-shadow .5s var(--ease);
}
.quote:hover{ transform:translateY(-5px); box-shadow:var(--shadow-md); }
.quote__mark{ font-family:'Satoshi',sans-serif; font-size:2.6rem; line-height:.6; color:var(--brand); }
.quote p{ font-size:.98rem; color:var(--ink-soft); }
.quote__who{ margin-top:auto; padding-top:18px; border-top:1px solid var(--line); display:flex; align-items:center; gap:13px; }
.quote__who b{ font-family:'Satoshi',sans-serif; font-weight:500; font-size:.92rem; display:block; }
.quote__who span{ font-size:.78rem; color:var(--muted); }
.quote__logo{ width:40px; height:40px; flex:0 0 40px; border-radius:10px; background:var(--surface); display:grid; place-items:center; padding:6px; }
.quote__logo img{ max-width:100%; max-height:100%; object-fit:contain; }

/* ============================================================
   FAQ  —  Akkordeon
   ============================================================ */
.faq{ max-width:820px; margin-inline:auto; }
.faq__item{ border-bottom:1px solid var(--line); }
.faq__q{
  width:100%; display:flex; align-items:flex-start; justify-content:space-between; gap:24px;
  padding:26px 0; text-align:left;
  font-family:'Satoshi',sans-serif; font-size:clamp(1.02rem,1.5vw,1.2rem); font-weight:500;
  letter-spacing:-.01em;
  transition:color .3s var(--ease);
}
.faq__q:hover{ color:var(--brand-deep); }
.faq__q:focus-visible{ outline:2px solid var(--brand); outline-offset:4px; border-radius:6px; }
.faq__icon{
  width:32px; height:32px; flex:0 0 32px; border-radius:50%; background:var(--surface-2);
  display:grid; place-items:center; position:relative; margin-top:-2px;
  transition:background-color .35s var(--ease), transform .45s var(--ease);
}
.faq__icon::before,.faq__icon::after{
  content:''; position:absolute; background:var(--ink); border-radius:2px;
  transition:transform .4s var(--ease), background-color .35s var(--ease);
}
.faq__icon::before{ width:12px; height:1.5px; }
.faq__icon::after{ width:1.5px; height:12px; }
.faq__item.is-open .faq__icon{ background:var(--brand); transform:rotate(180deg); }
.faq__item.is-open .faq__icon::after{ transform:scaleY(0); }
.faq__a{
  display:grid; grid-template-rows:0fr;
  transition:grid-template-rows .45s var(--ease);
}
.faq__item.is-open .faq__a{ grid-template-rows:1fr; }
.faq__a > div{ overflow:hidden; }
.faq__a p{
  color:var(--muted); font-size:.96rem; padding-bottom:28px; max-width:64ch;
  opacity:0; transform:translateY(-6px);
  transition:opacity .4s var(--ease) .08s, transform .4s var(--ease) .08s;
}
.faq__item.is-open .faq__a p{ opacity:1; transform:none; }

/* ============================================================
   VERTRAUEN  —  dunkle Sektion
   ============================================================ */
.trust{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,72px); align-items:center; }
.trust__list{ display:grid; gap:2px; }
.trust__item{
  display:flex; gap:18px; align-items:flex-start;
  padding:22px 0; border-top:1px solid rgba(255,255,255,.12);
}
.trust__item:last-child{ border-bottom:1px solid rgba(255,255,255,.12); }
.trust__check{
  width:26px; height:26px; flex:0 0 26px; border-radius:50%;
  background:var(--brand); color:var(--ink); display:grid; place-items:center; font-size:12px;
  margin-top:2px;
}
.trust__item b{ font-family:'Satoshi',sans-serif; font-weight:500; font-size:1.02rem; display:block; margin-bottom:5px; }
.trust__item span{ font-size:.9rem; color:rgba(255,255,255,.6); }

/* ============================================================
   KONTAKT
   ============================================================ */
.contact{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(32px,5vw,64px); align-items:start; }
.contact__aside .lead{ margin-top:20px; }
.contact__points{ margin-top:32px; display:grid; gap:14px; }
.contact__points li{ display:flex; gap:12px; align-items:center; font-size:.93rem; }
.contact__points .dot{ width:22px; height:22px; border-radius:50%; background:var(--brand-soft); color:var(--brand-deep); display:grid; place-items:center; font-size:11px; flex:0 0 22px; }

.form{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:clamp(26px,3.4vw,40px); box-shadow:var(--shadow-md);
  display:grid; gap:16px;
}
.form__row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.field{ display:grid; gap:7px; }
.field label{ font-family:'Satoshi',sans-serif; font-size:.82rem; font-weight:500; letter-spacing:.02em; }
.field input,.field textarea,.field select{
  font:inherit; font-size:.94rem; color:var(--ink);
  background:var(--surface); border:1px solid transparent; border-radius:13px;
  padding:13px 15px; width:100%;
  transition:border-color .3s var(--ease), background-color .3s var(--ease), box-shadow .3s var(--ease);
}
.field input::placeholder,.field textarea::placeholder{ color:#9AAAA7; }
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none; background:#fff; border-color:var(--brand); box-shadow:0 0 0 4px var(--brand-glow);
}
.field textarea{ min-height:118px; resize:vertical; }
.form__consent{ display:flex; gap:11px; align-items:flex-start; font-size:.8rem; color:var(--muted); }
.form__consent input{ width:17px; height:17px; flex:0 0 17px; margin-top:2px; accent-color:var(--brand); }
.form__consent a{ text-decoration:underline; text-underline-offset:2px; }
.form .btn{ justify-content:center; margin-top:4px; }
.form__ok{
  display:none; text-align:center; padding:14px; border-radius:13px;
  background:var(--brand-soft); color:var(--brand-deep); font-size:.9rem; font-weight:500;
}
.form.is-sent .form__ok{ display:block; }

/* ============================================================
   WEITERE THEMEN — interne Querverlinkung zwischen Landingpages
   ============================================================ */
.weitere-themen__grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; }
.weitere-themen__karte{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:20px 22px; border-radius:var(--r-lg); background:#fff;
  border:1px solid var(--line); box-shadow:var(--shadow-sm);
  font-family:'Satoshi',sans-serif; font-weight:600; color:var(--ink);
  transition:transform .3s var(--ease), border-color .3s var(--ease);
}
.weitere-themen__karte:hover{ transform:translateY(-3px); border-color:var(--brand); }
.weitere-themen__karte i{ color:var(--brand); font-style:normal; font-size:1.1rem; flex:0 0 auto; }
@media (max-width:900px){
  .weitere-themen__grid{ grid-template-columns:1fr; }
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{ background:var(--ink); color:#fff; padding-block:clamp(56px,7vw,90px) 34px; }
/* 6 Bloecke (Marke + 5 Themenspalten): 3 Spuren, zwei sauber ausgerichtete
   Zeilen statt eines vierspurigen Rasters mit einem verwaisten 5./6. Feld. */
.footer__top{ display:grid; grid-template-columns:repeat(3, 1fr); gap:36px 28px; padding-bottom:44px; border-bottom:1px solid rgba(255,255,255,.12); }
.footer__brand .brand__text{ color:#fff; }
.site-footer .brand{ margin-bottom:18px; }
.footer__brand p{ font-size:.9rem; color:rgba(255,255,255,.6); max-width:34ch; }
.footer__col h4{ font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.45); margin-bottom:16px; font-weight:500; }
.footer__col li{ margin-bottom:10px; }
.footer__col a{ font-size:.92rem; color:rgba(255,255,255,.82); transition:color .3s var(--ease); }
.footer__col a:hover{ color:var(--brand); }
.footer__bottom{ padding-top:26px; display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; font-size:.82rem; color:rgba(255,255,255,.45); }
.footer__bottom a:hover{ color:var(--brand); }

/* ============================================================
   RESPONSIVE
   Breakpoints:  1180  (kleiner Desktop)
                 1024  (Tablet quer  — Hero-Karten reduziert)
                  860  (Tablet hoch  — Karten -> Band, Burger-Menue)
                  600  (Smartphone)
   ============================================================ */

@media (max-width:1180px){
  .stats{ grid-template-columns:repeat(2,1fr); row-gap:34px; }
  .steps{ grid-template-columns:repeat(3,1fr); row-gap:40px; }
  .steps__line{ display:none; }
}

/* Zwischenbereich 861-1100px: Logo, Navigation und Schaltflaeche passen
   nebeneinander nur knapp. Hier wird alles enger gesetzt, statt umzubrechen. */
@media (max-width:1100px){
  .site-header{ gap:12px; padding-inline:24px; }
  .brand__mark{ width:41px; height:41px; flex:0 0 41px; border-radius:11px; }
  .brand__text{ font-size:.94rem; }

  .nav{ padding:4px; }
  .nav a{ padding:8px 11px; font-size:.71rem; letter-spacing:.045em; }
  .nav-cta{ padding:10px 10px 10px 15px; font-size:.71rem; letter-spacing:.045em; }
  .nav-cta span{ width:20px; height:20px; }
}

@media (max-width:1200px){
  .hcard{ width:calc(var(--w) * .86); }
}

@media (max-width:1024px){
  .cases{ grid-template-columns:repeat(2,1fr); }
  .quotes{ grid-template-columns:1fr 1fr; }
  .quotes .quote:last-child{ display:none; }
  .contact{ grid-template-columns:1fr; }
  .about{ grid-template-columns:1fr; }
  .about__media > img{ aspect-ratio:16/10; }
  .trust{ grid-template-columns:1fr; }
}

/* Tablet quer: die Streuung wird auf vier Karten reduziert.
   Bewusst NUR in diesem Fenster — im Mobil-Band sollen wieder alle acht sichtbar sein. */
@media (max-width:1024px) and (min-width:861px){
  .hcard[data-tablet="hide"]{ display:none; }
}

@media (max-width:860px){
  .nav,.nav-cta{ display:none; }
  .burger{ display:flex; flex-direction:column; align-items:center; justify-content:center; }

  /* Die Karten-Szene wird vom absolut positionierten Streufeld
     zu einem horizontal scrollbaren Band unter dem Claim.
     Gleiches DOM, gleiche Inhalte — nur anderes Layout.
     Kein Overlap, kein Parallax, keine doppelte Pflege im Editor. */
  .hero{ min-height:auto; padding:118px var(--gutter) 56px; display:flex; flex-direction:column; align-items:center; }
  .hero__halo{ width:130vw; opacity:.7; }
  .hero__inner{ order:1; max-width:100%; }

  .hero__scene{
    position:static; inset:auto; order:2; pointer-events:auto;
    /* Desktop-Zentrierung neutralisieren — translateX(-50%) wirkt sonst
       auch hier und schiebt das Band zur Haelfte aus dem Bild */
    left:auto; transform:none; max-width:none; width:auto;
    align-self:stretch; display:flex; gap:12px;
    margin:44px calc(var(--gutter) * -1) 0;
    /* Luft nach oben und unten, damit gedrehte Karten und ihre Schatten
       nicht vom Scrollrahmen beschnitten werden */
    padding:20px var(--gutter) 34px;
    overflow-x:auto; overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory; scrollbar-width:none;
  }
  .hero__scene::-webkit-scrollbar{ display:none; }

  .hcard{
    position:static; flex:0 0 152px; width:152px; scroll-snap-align:center;
    opacity:1;
    /* nur noch angedeutete Rotation statt der grossen Streuung */
    transform:rotate(var(--rm,-2deg));
  }
  /* Schmale Kacheln im Band: Beschriftung eine Spur kleiner, damit auch
     die langen Begriffe zweizeilig sauber Platz finden. */
  .hcard__label{ font-size:.74rem; }
  .hcard__meta{ font-size:.63rem; }
  .hcard--plain{ aspect-ratio:1/1.05; }
  /* Im Scroll-Band zuerst die praegnantesten Karten zeigen — sonst
     stuende die dunkle Karte als achte ganz hinten und bliebe ungesehen. */
  .hero__scene > :nth-child(4){ order:-2; }
  .hero__scene > :nth-child(8){ order:-1; }
  /* Vertikaler Satz funktioniert nur im grossen Streufeld.
     Im schmalen Band wird der Text sonst abgeschnitten. */
  .hcard--plain .hcard__label{
    writing-mode:horizontal-tb; transform:none;
    justify-self:stretch; align-self:end; padding:0; font-size:.82rem;
  }

  .pain-grid{ grid-template-columns:1fr 1fr; }
  .services{ gap:14px; }
  .footer__top{ grid-template-columns:1fr 1fr; row-gap:34px; }
}

@media (max-width:600px){
  :root{ --section-y:64px; --r-lg:20px; --r-card:18px; }

  .hero__badge{ align-items:center; padding:9px 16px; line-height:1.45; }
  
  .site-header{ padding:14px var(--gutter); }
  .brand__text{ font-size:.98rem; }

  .hero h1{ font-size:clamp(2.1rem,9vw,2.9rem); }
  .hero__actions{ flex-direction:column; align-items:stretch; }
  .hero__actions .btn{ justify-content:center; }
  .hero__scene .hcard{ flex:0 0 136px; width:136px; }

  .pain-grid{ grid-template-columns:1fr; }
  .pain-cta{ padding:26px 24px; text-align:left; }
  .pain-cta .btn{ width:100%; justify-content:center; }

  .steps{ grid-template-columns:1fr; row-gap:8px; }
  .step{ display:grid; grid-template-columns:54px 1fr; gap:18px; align-items:start; padding-bottom:24px; }
  .step__dot{ margin-bottom:0; }
  .step__body{ padding-top:12px; }
  /* vertikale Timeline statt horizontaler Linie */
  .step:not(:last-child)::before{
    content:''; position:absolute; left:26px; top:58px; bottom:-8px; width:1px;
    background:var(--line-strong);
  }

  .services{ grid-template-columns:1fr; }
  .service{ padding:28px 24px 30px; }

  .stats{ grid-template-columns:1fr 1fr; gap:26px 16px; }
  .stat{ padding-left:16px; }

  .cases{ grid-template-columns:1fr; }
  .quotes{ grid-template-columns:1fr; }
  .quotes .quote:last-child{ display:flex; }

  .about__panel{ aspect-ratio:1/1; }
  .about__panel figcaption{ bottom:18px; }

  .form__row{ grid-template-columns:1fr; }
  .marquee__item{ width:100px; height:56px; padding:0 8px; }
  .marquee__track{ --tempo:110s; }

  .footer__top{ grid-template-columns:1fr; gap:28px; }
  .footer__bottom{ flex-direction:column; gap:10px; }
}

/* Sehr schmale Geraete (iPhone SE) */
@media (max-width:380px){
  :root{ --gutter:18px; }
  .hero__badge{ font-size:.76rem; }
}

/* ============================================================
   BARRIEREFREIHEIT
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .reveal{ opacity:1 !important; transform:none !important; }
  .hcard{ opacity:1 !important; --enter-y:0px; --sc:1; --px:0px; --py:0px; }
  .marquee__track{ animation:none; transform:none; }
  .steps__line{ transform:scaleX(1) !important; }
}

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--ink); color:#fff; padding:12px 20px; border-radius:0 0 12px 0;
}
.skip-link:focus{ left:0; }

:focus-visible{ outline:2px solid var(--brand); outline-offset:3px; border-radius:4px; }

@media print{
  .site-header,.hero__scene,.marquee,.burger,.mobile-nav{ display:none !important; }
}


/* ============================================================
   ZEIGER  —  tuerkiser Punkt statt Systemcursor
   Nur auf Geraeten mit echter Maus. Touch-Geraete und
   Tastaturbedienung bleiben unberuehrt.
   ============================================================ */
.cursor-dot{
  position:fixed; top:0; left:0; z-index:9999;
  /* Kein durchsichtiger Rand mehr: bei border-box blieben von 12px nur
     8px sichtbares Tuerkis uebrig — der Punkt wirkte blass. */
  width:15px; height:15px; border-radius:50%;
  background:var(--brand); border:0 solid var(--brand);
  pointer-events:none; opacity:0;
  transform:translate3d(calc(var(--cx,-100px) - 50%), calc(var(--cy,-100px) - 50%), 0);
  transition:width .28s var(--ease), height .28s var(--ease),
             background-color .28s var(--ease), border-color .28s var(--ease),
             opacity .2s var(--ease);
  will-change:transform;
}
.cursor-dot.is-visible{ opacity:1; }
/* ueber Links und Schaltflaechen: Punkt wird zum Ring */
.cursor-dot.is-active{
  width:38px; height:38px;
  background:transparent; border-width:2.5px;
}
/* Auf dunklem Grund bleibt der Punkt tuerkis — er bekommt nur einen
   feinen hellen Saum, damit er sich abhebt. Ihn weiss zu faerben liess
   ihn auf hellgrauen Flaechen grau erscheinen. */
.cursor-dot.is-inverted{ box-shadow:0 0 0 1.5px rgba(255,255,255,.7); }
.cursor-dot.is-inverted.is-active{ box-shadow:0 0 0 1.5px rgba(255,255,255,.45); }

@media (hover:hover) and (pointer:fine){
  body.has-dot-cursor,
  body.has-dot-cursor a,
  body.has-dot-cursor button,
  body.has-dot-cursor summary,
  body.has-dot-cursor .faq__q,
  body.has-dot-cursor [role="button"]{ cursor:none; }
  /* Formularfelder behalten den Systemcursor — sonst sieht man
     die Schreibmarke nicht und Textauswahl wird zum Ratespiel. */
  body.has-dot-cursor input,
  body.has-dot-cursor textarea,
  body.has-dot-cursor select{ cursor:auto; }
}

/* ============================================================
   SCROLL-DRAMATURGIE
   Der Aufbau folgt einem bewussten Wechsel aus Spannung und
   Entlastung: hell -> dunkel (Marke) -> grau (Problem) ->
   hell (Loesung) ... -> tuerkis (Abschluss).
   Dunkle Sektionen sind die Satzzeichen, Tuerkis die Belohnung.
   ============================================================ */

/* --- Lesefortschritt oben --- */
.progress{
  position:fixed; inset:0 0 auto 0; height:2px; z-index:200;
  background:var(--brand); transform-origin:left; transform:scaleX(0);
  will-change:transform; pointer-events:none;
}

/* --- Werbespruch-Band --- */
.slogan{
  color:#fff; text-align:center;
  padding-block:clamp(64px,9vw,120px); position:relative;
  overflow-x:clip; overflow-y:visible;
  background:
    radial-gradient(circle at 50% 50%, rgba(0,204,204,.16), rgba(0,204,204,0) 34%),
    var(--ink);
}
.slogan p{
  position:relative;
  font-size:clamp(1.6rem,4.6vw,3.4rem); font-weight:700;
  letter-spacing:-.03em; line-height:1.15; text-wrap:balance;
}
.slogan .accent{ color:var(--brand); }
.slogan p.slogan__sub{
  position:relative; margin-top:22px;
  font-size:clamp(.9rem,1.3vw,1.02rem); font-weight:400;
  letter-spacing:0; color:rgba(255,255,255,.55);
}

/* --- Abschluss-Sektion in Markenfarbe --- */
.section--brandsoft{ background:var(--brand-soft); }
.section--brandsoft .form{ box-shadow:var(--shadow-lg); }

/* --- Ueberschriften wortweise einblenden --- */
.split-word{
  display:inline-block;
  opacity:0; transform:translateY(.5em) rotate(1.5deg);
  transition:opacity .55s var(--ease-out), transform .55s var(--ease-out);
  transition-delay:calc(var(--w) * 45ms);
}
.is-in .split-word,
.split-ready.is-in .split-word{ opacity:1; transform:none; }

/* --- Bilder beim Hereinscrollen aufziehen --- */
/* Der Beschnitt darf NICHT auf dem beobachteten Element liegen:
   clip-path: inset(0 0 100%) macht es null Pixel hoch, und ein Element
   ohne Flaeche meldet dem IntersectionObserver nie eine Ueberschneidung —
   es koennte sich also nie oeffnen. Beobachtet wird der Rahmen (.reveal),
   beschnitten das Bild darin (.wipe). */
.wipe{ clip-path:inset(0 0 100% 0); transition:clip-path 1s var(--ease-out); }
.reveal.is-in .wipe,
.wipe.is-in{ clip-path:inset(0 0 0 0); }

/* --- Karten kippen leicht zum Zeiger (nur Maus) --- */
@media (hover:hover) and (pointer:fine){
  .tilt{ transform-style:preserve-3d; transition:transform .35s var(--ease); }
  .tilt-inner{ transform:translateZ(0); }
}

/* --- Magnetische Schaltflaechen --- */
.btn.magnetic{ will-change:transform; }

/* --- Aktiver Prozessschritt --- */
.step__dot{ position:relative; }
.step.is-current .step__dot{
  background:var(--brand); border-color:var(--brand); color:var(--ink);
  box-shadow:0 8px 26px var(--brand-glow);
  transform:scale(1.08);
}
.step.is-current h3{ color:var(--brand-deep); }
.steps__fill{
  position:absolute; left:0; top:27px; height:2px; background:var(--brand);
  transform-origin:left; transform:scaleX(0); width:100%;
  transition:transform .5s var(--ease); z-index:1;
}

/* --- Zahlen im Blick behalten --- */
.stat{ transition:border-color .4s var(--ease); }
.stat.is-in{ border-color:var(--brand); }

@media (prefers-reduced-motion:reduce){
  .split-word{ opacity:1 !important; transform:none !important; }
  .wipe{ clip-path:none !important; }
  .progress{ display:none; }
  .tilt{ transform:none !important; }
}

@media (max-width:1180px){
  .steps__fill{ display:none; }
}

/* ============================================================
   GEGENUEBERSTELLUNG  —  Branchenueblich vs. unser Weg
   ============================================================ */
.versus{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.versus__col{
  border-radius:var(--r-lg); padding:32px 30px 34px;
  border:1px solid rgba(255,255,255,.13);
  transition:transform .5s var(--ease), border-color .5s var(--ease);
}
.versus__col--them{ opacity:.62; }
.versus__col--us{
  border-color:var(--brand); background:rgba(0,204,204,.06);
  box-shadow:0 20px 60px rgba(0,204,204,.10);
}
.versus__col--us:hover{ transform:translateY(-4px); }
.versus__label{
  display:inline-block; margin-bottom:20px;
  font-size:.72rem; letter-spacing:.13em; text-transform:uppercase;
  color:rgba(255,255,255,.5);
}
.versus__col--us .versus__label{ color:var(--brand); }
.versus ul{ display:grid; gap:14px; }
.versus li{
  display:flex; gap:12px; align-items:flex-start;
  font-size:.95rem; line-height:1.5; color:rgba(255,255,255,.82);
}
.versus li::before{
  content:'\2715'; flex:0 0 18px; margin-top:2px;
  font-size:.72rem; color:rgba(255,255,255,.4);
}
.versus__col--us li::before{ content:'\2713'; color:var(--brand); font-size:.8rem; }
.versus__col--us li{ color:#fff; }

@media (max-width:860px){
  .versus{ grid-template-columns:1fr; gap:14px; }
  .versus__col{ padding:26px 24px 28px; }
  /* Am Handy zuerst der eigene Weg — die Gegenüberstellung
     funktioniert untereinander nur, wenn das Positive oben steht. */
  .versus__col--us{ order:-1; }
}

/* ============================================================
   UNTERSEITEN
   ============================================================ */
.subhero{
  position:relative; overflow:hidden;
  padding:clamp(130px,15vw,190px) var(--gutter) clamp(56px,7vw,88px);
  background:var(--surface);
}
.subhero::before{
  content:''; position:absolute; right:-8%; top:-30%;
  width:min(60vw,620px); aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle,var(--brand-glow),rgba(0,204,204,0) 68%);
  opacity:.55; filter:blur(30px); pointer-events:none;
}
.subhero__inner{ position:relative; max-width:var(--container); margin-inline:auto; }
.subhero h1{ max-width:16ch; font-size:clamp(2.1rem,5.2vw,3.9rem); }
.subhero .lead{ margin-top:22px; max-width:60ch; }
.subhero__actions{ margin-top:32px; display:flex; gap:12px; flex-wrap:wrap; }

.krumen{ display:flex; align-items:center; gap:9px; margin-bottom:20px; font-size:.8rem; color:var(--muted); }
.krumen a:hover{ color:var(--brand-deep); }
.krumen span{ opacity:.5; }

/* Leistungsumfang */
.umfang{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.umfang__item{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-card);
  padding:28px 26px 30px; display:flex; gap:16px; align-items:flex-start;
  transition:transform .45s var(--ease), box-shadow .45s var(--ease);
}
.umfang__item:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); }
.umfang__nr{
  width:34px; height:34px; flex:0 0 34px; border-radius:10px;
  background:var(--brand-soft); color:var(--brand-deep);
  display:grid; place-items:center; font-weight:700; font-size:.85rem;
}
.umfang__item h3{ font-size:1.05rem; margin-bottom:7px; }
.umfang__item p{ font-size:.93rem; color:var(--muted); }

/* Schlussaufruf */
.aufruf{
  background:var(--ink); color:#fff; border-radius:var(--r-lg);
  padding:clamp(34px,4.5vw,54px); text-align:center; position:relative; overflow:hidden;
}
.aufruf::before{
  content:''; position:absolute; left:50%; bottom:-60%; translate:-50% 0;
  width:min(70vw,640px); aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle,var(--brand-glow),rgba(0,204,204,0) 66%);
  opacity:.4; filter:blur(36px); pointer-events:none;
}
.aufruf h2{ position:relative; margin-bottom:16px; }
.aufruf p{ position:relative; color:rgba(255,255,255,.66); max-width:52ch; margin-inline:auto; }
.aufruf .btn{ position:relative; margin-top:28px; }

@media (max-width:860px){
  .umfang{ grid-template-columns:1fr; }
  .subhero h1{ max-width:none; }
}

.service > div{ display:flex; flex-direction:column; gap:14px; flex:1; }

/* ============================================================
   FORMSPRACHE: KREIS
   Die Marke ist rund — die Schale des "b" und der Punkt des "!".
   Diese Rundung zieht sich jetzt durch das ganze Layout:
   als Trägerform für Symbole und als dezente Ringe im Hintergrund.
   Türkis bleibt bewusst zurückhaltend: viel Kontur, wenig Fläche.
   ============================================================ */

/* --- Dekorative Ringe hinter dem Inhalt --- */
.deko{
  position:absolute; inset:0; pointer-events:none; z-index:0;
  overflow-x:clip; overflow-y:visible;
}
.deko-ring{
  position:absolute; border-radius:50%;
  border:1px solid rgba(0,204,204,.30);
}
.deko-ring--fein{ border-color:rgba(0,27,20,.10); }
.deko-punkt{
  position:absolute; border-radius:50%;
  background:radial-gradient(circle, var(--brand-glow) 0%, rgba(0,204,204,0) 70%);
  opacity:.5;
}
.section--ink .deko-ring{ border-color:rgba(0,204,204,.22); }
.section--ink .deko-ring--fein{ border-color:rgba(255,255,255,.07); }
.section--brandsoft .deko-ring{ border-color:rgba(0,168,168,.20); }

/* Inhalt bleibt über der Dekoration */
.section > .container{ position:relative; z-index:1; }

/* --- Symbolträger werden rund --- */
.service__icon,
.umfang__nr,
.quote__logo,
.about__badge .icon{ border-radius:50%; }

/* --- Problemzähler: aus nackter Zahl wird ein türkiser Kreis --- */
.pain__num{
  width:34px; height:34px; border-radius:50%;
  background:var(--brand-soft); color:var(--brand-deep);
  display:inline-grid; place-items:center;
  font-size:.78rem; font-weight:700; letter-spacing:0;
  margin-bottom:16px;
  transition:background-color .4s var(--ease), color .4s var(--ease), transform .4s var(--ease);
}
.pain:hover .pain__num{ background:var(--brand); color:var(--ink); transform:scale(1.06); }

/* --- Schritte bekommen einen zarten türkisen Ring --- */
.step__dot{ border-color:rgba(0,204,204,.35); }
.step__dot::after{
  content:''; position:absolute; inset:-6px; border-radius:50%;
  border:1px solid rgba(0,204,204,.16);
  opacity:0; transition:opacity .4s var(--ease), inset .4s var(--ease);
}
.step:hover .step__dot::after,
.step.is-current .step__dot::after{ opacity:1; inset:-9px; }

/* --- Aufzählungen als Kreise statt Kreuze --- */
.versus li::before{
  width:18px; height:18px; border-radius:50%;
  display:grid; place-items:center; line-height:1;
  border:1px solid rgba(255,255,255,.22);
}
.versus__col--us li::before{ border-color:var(--brand); }

/* --- Türkis in kleinen, häufigen Dosen --- */
::selection{ background:var(--brand); color:var(--ink); }
html{ scrollbar-color:var(--brand-deep) transparent; }

.eyebrow::after{
  content:''; width:5px; height:5px; border-radius:50%;
  background:var(--brand); opacity:.55;
}
.pain:hover,
.case:hover,
.quote:hover{ border-color:rgba(0,204,204,.4); }
.stat{ border-left-color:rgba(0,204,204,.28); }
.faq__item:hover{ border-bottom-color:rgba(0,204,204,.35); }
.marquee__item:hover img{ filter:none; opacity:1; }
.team__initials{ box-shadow:0 0 0 1px rgba(0,204,204,.22); }

@media (prefers-reduced-motion:reduce){
  /* Kreise bleiben sichtbar — sie stehen nur still */
  .deko-ring, .deko-punkt{ animation:none; }
}

/* ============================================================
   TEAM-PORTRAITS
   ============================================================ */
/* Runder Rahmen mit frei verschiebbarem Bild.
   sips kann nur mittig beschneiden — deshalb wird der Ausschnitt hier
   im Layout gesetzt: --w skaliert, --l und --t verschieben.
   Alle Werte in Prozent, damit sie bei jeder Rahmengröße stimmen. */
.team__bild{
  position:relative; overflow:hidden; border-radius:50%;
  width:104px; height:104px; flex:0 0 104px;
  background:var(--surface-2);
  box-shadow:0 0 0 1px rgba(0,204,204,.3), var(--shadow-sm);
}
.team__bild img{
  position:absolute; inset:0; max-width:none;
  width:100%; height:100%; object-fit:cover;
  object-position:50% 32%;   /* Ausschnitt auf Gesichtshoehe */
}
.team__initials{ width:104px; height:104px; flex:0 0 104px; font-size:1.4rem; }
.team__person{ align-items:center; gap:22px; padding:22px 0; }
.team__person b{ font-size:1.08rem; }
.team__person .role{ font-size:.9rem; margin-top:5px; }

@media (max-width:600px){
  .team__bild,
  .team__initials{ width:76px; height:76px; flex-basis:76px; }
  .team__initials{ font-size:1.05rem; }
  .team__person{ gap:16px; }
}
.team__platzhalter{
  display:block; margin-top:4px; font-size:.72rem; color:var(--brand-deep);
}

/* --- Kleine Zeichnungen auf den Hero-Karten --- */
.hcard__viz{
  border-radius:11px; margin-bottom:11px; aspect-ratio:4/3;
  background:var(--surface); display:grid; place-items:center;
  padding:10px; overflow:hidden;
}
.hcard__viz svg{ width:100%; height:100%; display:block; }
.hcard--ink .hcard__viz{ background:rgba(255,255,255,.07); }
.hcard--brand .hcard__viz{ background:rgba(0,27,20,.08); }
.hcard__viz{ color:var(--brand-deep); }
.hcard--ink .hcard__viz{ color:var(--brand); }
.hcard--brand .hcard__viz{ color:var(--ink); }

/* ============================================================
   TÜRKISE TEXTMARKIERUNG
   Wischt beim Hereinscrollen von links nach rechts ein,
   wie ein Marker. box-decoration-break sorgt dafür, dass jede
   Zeile ihren eigenen Block bekommt statt eines durchgehenden.
   ============================================================ */
/* Die Ueberschrift bildet eine eigene Ebenen-Insel, in der die
   Markierung UNTER saemtlichen Buchstaben liegt — auch unter den
   Unterlaengen und Umlautpunkten der Nachbarzeilen. Text verdeckt
   die Farbe, nie umgekehrt. */
:is(h1, h2, h3):has(.mark){ isolation:isolate; }
/* Abschnittsueberschriften mit Markierung bekommen dieselbe Zeilenluft
   wie die Seitentitel: Die Farbbox bleibt auf Abstand zur Nachbarzeile
   statt an ihr zu kleben — besonders mobil, wo mehr Zeilen umbrechen. */
:is(h2, h3):has(.mark){ line-height:1.3; }
:is(h2, h3) .mark{ padding-top:.02em; padding-bottom:.14em; }
/* Beginnt die Markierung die Ueberschrift, fluchtet ihre Box auf der
   Inhaltslinie — der Auszieh-Ausgleich gilt nur mitten im Satz. */
:is(h1, h2, h3) > .mark:first-child{ margin-left:0; }
.mark{
  position:relative; z-index:-1;
  background-image:linear-gradient(var(--brand), var(--brand));
  background-repeat:no-repeat;
  background-size:0% 100%;
  background-position:left center;
  box-decoration-break:clone;
  -webkit-box-decoration-break:clone;
  padding:.04em .16em;
  margin-left:-.16em;
  border-radius:2px;
  color:var(--ink);
  transition:background-size .75s var(--ease-out) .28s;
}
.is-in .mark{ background-size:100% 100%; }

@media (prefers-reduced-motion:reduce){
  .mark{ background-size:100% 100%; transition:none; }
}

/* ============================================================
   ÜBER UNS — Bildspalte
   Kein Stockfoto: die drei echten Gesichter als Kreise.
   ============================================================ */
/* Neutraler Grund: Die Karte und der Standortpunkt tragen das Tuerkis.
   Eine zusaetzlich tuerkise Flaeche wuerde die Textmarkierung darunter
   erschlagen — Akzente wirken nur vor ruhigem Hintergrund. */
.about__panel{
  position:relative; border-radius:var(--r-lg); overflow:hidden;
  background:var(--surface);
  aspect-ratio:4/5; display:grid; place-items:center;
}
.about__panel::before,
.about__panel::after{
  content:''; position:absolute; border-radius:50%;
  border:1px solid rgba(0,168,168,.20);
}
.about__panel::before{ width:78%; aspect-ratio:1; }
.about__panel::after{ width:112%; aspect-ratio:1; border-color:rgba(0,168,168,.16); }

/* Keine Ueberlappung: Bei 132px Durchmesser hat der frueher gesetzte
   Versatz von 26px ein Fuenftel des Nachbarkreises verdeckt — und damit
   genau die Gesichtsmitte. Stattdessen Abstand und ein leichter
   Hoehenversatz, der die Gruppe lebendig macht, ohne etwas zu verdecken. */
.about__kreise{ position:relative; display:flex; align-items:center; gap:clamp(10px,1.4vw,18px); }
.about__kreise .team__bild,
.about__kreise .team__initials{
  width:clamp(88px,12vw,124px); height:clamp(88px,12vw,124px);
  flex-basis:clamp(88px,12vw,124px);
  box-shadow:0 0 0 4px var(--brand-soft), 0 10px 30px rgba(0,27,20,.16);
  transition:transform .45s var(--ease);
}
.about__kreise > *:nth-child(1){ transform:translateY(-14px); }
.about__kreise > *:nth-child(3){ transform:translateY(14px); }
.about__kreise > *:nth-child(1):hover{ transform:translateY(-22px) scale(1.05); z-index:2; }
.about__kreise > *:nth-child(2):hover{ transform:translateY(-8px) scale(1.05); z-index:2; }
.about__kreise > *:nth-child(3):hover{ transform:translateY(6px) scale(1.05); z-index:2; }
.about__panel figcaption{
  position:absolute; bottom:26px; left:0; right:0; text-align:center;
  font-size:.82rem; color:var(--muted);
}

@media (max-width:1024px){
  .about__panel{ aspect-ratio:16/9; }
}
@media (max-width:600px){
  .about__kreise{ gap:8px; }
  .about__kreise > *:nth-child(1){ transform:translateY(-9px); }
  .about__kreise > *:nth-child(3){ transform:translateY(9px); }
}

/* ============================================================
   RECHTSTEXTE  —  auf Lesbarkeit optimiert
   ============================================================ */
.rechtstext{ max-width:760px; }
.rechtstext h2{
  font-size:clamp(1.1rem,1.7vw,1.35rem); margin-top:44px; margin-bottom:14px;
  padding-top:24px; border-top:1px solid var(--line);
}
.rechtstext h2:first-of-type{ margin-top:0; padding-top:0; border-top:0; }
.rechtstext p{ color:var(--ink-soft); margin-bottom:14px; font-size:.98rem; }
.rechtstext ul{ margin:0 0 18px; display:grid; gap:9px; }
.rechtstext li{
  display:flex; gap:11px; align-items:flex-start;
  font-size:.96rem; color:var(--ink-soft);
}
.rechtstext li::before{
  content:''; width:6px; height:6px; border-radius:50%;
  background:var(--brand); margin-top:9px; flex:0 0 6px;
}
.rechtstext a{ color:var(--brand-deep); text-decoration:underline; text-underline-offset:2px; }
.rechtstext dl{ display:grid; grid-template-columns:auto 1fr; gap:12px 26px; margin:0; }
.rechtstext dt{ font-weight:700; font-size:.94rem; }
.rechtstext dd{ margin:0; font-size:.96rem; color:var(--ink-soft); }
.rechtstext__stand{
  margin-top:44px; padding-top:22px; border-top:1px solid var(--line);
  font-size:.85rem; color:var(--muted);
}
.hinweis{
  background:var(--brand-soft); border-radius:var(--r-card);
  padding:20px 22px; margin-bottom:34px;
  font-size:.92rem; color:var(--ink-soft);
}
.hinweis b{ display:block; margin-bottom:5px; color:var(--brand-deep); }

@media (max-width:600px){
  .rechtstext dl{ grid-template-columns:1fr; gap:4px 0; }
  .rechtstext dt{ margin-top:10px; }
}

/* ============================================================
   KARTE  —  selbst gezeichnet, kein fremdes Kartenmaterial
   Damit entfaellt jede Lizenzfrage (OpenStreetMap verlangt
   Namensnennung, Google Maps hat eigene Bedingungen).
   ============================================================ */
.karte{ width:100%; height:100%; display:block; }
.karte__bloecke rect{ fill:rgba(0,168,168,.10); }
.karte__strassen path{ stroke:rgba(0,168,168,.22); stroke-width:2; fill:none; }
.karte__fluss{ stroke:rgba(0,168,168,.34); stroke-width:9; fill:none; stroke-linecap:round; }
.karte__ringe circle{ fill:none; stroke:rgba(0,168,168,.26); stroke-width:1.5; }
.karte__ringe circle:nth-child(2){ stroke-dasharray:5 7; }
.karte__ringe circle:nth-child(3){ stroke-dasharray:3 9; }
.karte__punkt circle{ fill:#fff; stroke:var(--brand); stroke-width:2.5; filter:drop-shadow(0 6px 16px rgba(0,27,20,.18)); }
.karte__punkt g{ fill:var(--brand); }
.karte__ort{
  fill:var(--brand-deep); font-family:'Satoshi',sans-serif; font-size:19px;
  font-weight:700; text-anchor:middle; letter-spacing:.01em;
}
/* Die Ringe atmen langsam nach aussen — deutet Reichweite an */
@media (prefers-reduced-motion:no-preference){
  .karte__ringe circle{ transform-origin:200px 250px; animation:pulsRing 6s var(--ease) infinite; }
  .karte__ringe circle:nth-child(2){ animation-delay:1.1s; }
  .karte__ringe circle:nth-child(3){ animation-delay:2.2s; }
}
@keyframes pulsRing{
  0%,100%{ transform:scale(1);    opacity:.9; }
  50%    { transform:scale(1.045); opacity:.5; }
}
.about__panel figcaption{
  font-family:'Satoshi',sans-serif; font-weight:500; letter-spacing:.06em;
}

/* ============================================================
   ANWENDUNGSFAELLE  —  gezeichnete Bilder statt Fotos
   ============================================================ */
.case__viz{
  aspect-ratio:16/11; background:var(--surface);
  display:grid; place-items:center; padding:22px 26px;
  color:var(--brand-deep); overflow:hidden;
}
.case__viz > span{ display:block; width:100%; height:100%; }
.case__viz svg{ width:100%; height:100%; display:block; }
.case:hover .case__viz{ background:var(--brand-soft); }
.case__viz{ transition:background-color .5s var(--ease); }

/* Vier Faelle: zwei Reihen zu zweit statt einer angebrochenen Dreierreihe */
@media (min-width:1025px){
  .cases{ grid-template-columns:repeat(2,1fr); }
}

/* ============================================================
   ANWENDUNGSFAELLE als Liste auf dunklem Grund
   Loest drei Dinge: kleinere Elemente, ein Farbbruch im langen
   hellen Verlauf, und mehr Leben durch schraege Sprechblasen.
   ============================================================ */
.faelle{ position:relative; }
.faelle__liste{ position:relative; display:grid; gap:10px; }

/* Die Zeilen erscheinen gestaffelt ueber die Liste, nicht einzeln beobachtet:
   ein einziges beobachtetes Element ist verlaesslicher als vier. */
.js-an .fall{
  opacity:0; transform:translateY(14px);
  transition:opacity .55s var(--ease-out), transform .55s var(--ease-out),
             background-color .4s var(--ease), border-color .4s var(--ease);
  transition-delay:calc(var(--i, 0) * 80ms);
  display:flex; align-items:center; gap:18px;
  padding:13px 20px; border-radius:15px;
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.09);
  transition:background-color .4s var(--ease), border-color .4s var(--ease), transform .4s var(--ease);
}
.faelle__liste.is-in .fall{ opacity:1; transform:none; }
.faelle__liste.is-in .fall:hover{ background:rgba(0,204,204,.10); border-color:rgba(0,204,204,.45); transform:translateX(4px); }

.fall__viz{
  width:44px; height:44px; flex:0 0 44px; border-radius:12px;
  background:rgba(0,204,204,.12); color:var(--brand);
  display:grid; place-items:center; padding:7px;
}
.fall__viz svg{ width:100%; height:100%; display:block; }

.fall__text{ flex:1; min-width:0; }
.fall__tag{
  display:block; font-size:.65rem; letter-spacing:.13em; text-transform:uppercase;
  color:rgba(255,255,255,.42); margin-bottom:3px;
}
.fall__titel{ font-family:'Satoshi',sans-serif; font-weight:500; font-size:.98rem; color:#fff; }
.fall__was{ font-size:.88rem; color:rgba(255,255,255,.55); margin-top:5px; }

.fall__erg{
  flex:0 0 auto; text-align:right; font-family:'Satoshi',sans-serif;
  font-size:.86rem; color:var(--brand); font-weight:500; max-width:190px;
}

/* --- Zitatwand ---------------------------------------------------------
   Bewusst IM FLUSS statt schwebend: Frei positionierte Blasen haben auf
   dem Desktop die Listentexte ueberdeckt, und die Anmutung war zu nah am
   Vorbild. Als geschlossener Block ueber der Liste ist es eine eigene
   Komposition — und es kann nichts mehr verdecken.
   -------------------------------------------------------------------- */
.zitatwand{
  display:flex; flex-wrap:wrap; justify-content:flex-start; align-items:center;
  gap:10px 12px; max-width:860px; margin:0 0 40px;
}
.zitatwand__label{
  flex-basis:100%; text-align:left; margin-bottom:6px;
  font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(255,255,255,.42);
}
.blase{
  background:var(--brand); color:var(--ink);
  font-family:'Satoshi',sans-serif; font-weight:500; font-size:.88rem;
  padding:10px 18px; border-radius:999px;
  box-shadow:0 8px 22px rgba(0,27,20,.3);
  transform:translateY(var(--drift,0px)) rotate(var(--dreh,-2deg));
  opacity:0; transition:opacity .55s var(--ease) var(--verz,0ms);
  will-change:transform;
}
.zitatwand.is-in .blase,
.is-in .blase{ opacity:1; }
/* Jede zweite in der anderen Helligkeit — bricht die Gleichfoermigkeit */
.blase:nth-child(3n){ background:#fff; }
.blase:nth-child(4n){ background:rgba(0,204,204,.18); color:#fff; box-shadow:none; border:1px solid rgba(0,204,204,.5); }

@media (max-width:900px){
  .fall{ flex-wrap:wrap; gap:14px; padding:16px 18px; }
  /* Feste Mindesthoehe: Ohne sie waren Zeilen mit zweizeiligem Ergebnis
     27px hoeher als die uebrigen und die Liste wirkte ausgefranst. */
  .fall__erg{ flex-basis:100%; text-align:left; max-width:none;
              padding-left:62px; margin-top:-4px;
              line-height:1.45; min-height:2.9em; }   /* 2 Zeilen x 1.45 */
}

/* Antwort auf die Einwaende in den Sprechblasen */
.faelle__antwort{
  margin:36px 0 0;
  display:flex; gap:18px; align-items:flex-start;
  background:rgba(0,204,204,.09);
  border:1px solid rgba(0,204,204,.35);
  border-radius:18px; padding:24px 28px;
}
.faelle__antwort-zeichen{
  width:30px; height:30px; flex:0 0 30px; border-radius:50%;
  background:var(--brand); color:var(--ink);
  display:grid; place-items:center; font-size:14px; margin-top:1px;
}
.faelle__antwort p{ font-size:.98rem; color:rgba(255,255,255,.82); }
.faelle__antwort b{ color:#fff; font-weight:700; }

@media (max-width:600px){
  .faelle__antwort{ padding:20px 20px; gap:14px; }
}

/* ============================================================
   STOERER  —  gedrehtes Siegel am Human-in-the-Loop-Kasten
   ============================================================ */
.stoerer{
  position:absolute; top:-26px; right:22px; z-index:2;
  width:96px; height:96px; border-radius:50%;
  background:var(--brand); color:var(--ink);
  display:grid; place-items:center; text-align:center;
  font-family:'Satoshi',sans-serif; font-weight:700; font-size:.76rem; line-height:1.25;
  transform:rotate(-11deg);
  box-shadow:0 12px 30px rgba(0,27,20,.4);
  animation:stoererWippen 5s var(--ease) infinite;
}
.stoerer::before{
  content:''; position:absolute; inset:5px; border-radius:50%;
  border:1.5px dashed rgba(0,27,20,.35);
}
@keyframes stoererWippen{
  0%,100%{ transform:rotate(-11deg) scale(1); }
  50%    { transform:rotate(-7deg) scale(1.035); }
}
.faelle__antwort{ position:relative; }

@media (max-width:700px){
  .stoerer{ width:84px; height:84px; font-size:.63rem; top:-24px; right:12px; padding:13px; }
}
@media (prefers-reduced-motion:reduce){
  .stoerer{ animation:none; }
}

/* Abschlusskachel bei den Leistungen: gleiche Groesse wie die uebrigen,
   fuellt das Raster und bietet den naechsten Schritt an. */
.service--aufruf{
  background:var(--brand-soft);
  border-color:rgba(0,168,168,.3);
}
.service--aufruf .service__icon{ background:var(--brand); color:var(--ink); }
.service--aufruf .service__link{ color:var(--brand-deep); font-weight:700; }

/* Kacheln einer Reihe immer gleich hoch — ohne dies richtete sich jede
   Karte nach ihrem eigenen Inhalt und die Reihe wirkte ausgefranst. */
.services{ align-items:stretch; }
.services .service{ height:100%; }

/* Der Stoerer lag auf schmalen Bildschirmen ueber dem Text. Dort steht er
   deshalb im Fluss: Text umfliesst ihn, statt verdeckt zu werden. */
@media (max-width:700px){
  .faelle__antwort{ display:block; padding:22px 20px 20px; }
  .faelle__antwort-zeichen{ float:left; margin:3px 12px 8px 0; }
  .stoerer{
    position:static; float:right; margin:0 0 10px 14px;
    /* Etwas groesser plus Innenabstand: Der Text bleibt klar innerhalb
       des strichlierten Rings statt an ihm zu kleben. */
    width:84px; height:84px; font-size:.6rem; padding:13px;
    animation:none; transform:rotate(-8deg);
  }
  .faelle__antwort p{ overflow:hidden; }
}

/* Honigtopf: fuer Menschen unsichtbar und nicht anspringbar, fuer Bots
   ein ganz normales Feld. Bewusst NICHT display:none — manche Bots
   erkennen das und lassen solche Felder aus. */
.honigtopf{
  position:absolute; left:-9999px; top:auto;
  width:1px; height:1px; overflow:hidden;
}

/* ============================================================
   KOPFBEREICH AUF DUNKLEM GRUND
   Die Karten kehren sich mit um — helle Karten auf Dunkel
   wuerden wie Fremdkoerper wirken.
   ============================================================ */
.hero--dunkel{ background:var(--ink); color:#fff; }
.hero--dunkel h1{ color:#fff; }
.hero--dunkel .hero__sub{ color:rgba(255,255,255,.66); }
.hero--dunkel .hero__note{ color:rgba(255,255,255,.45); }
.hero--dunkel .hero__halo{
  background:radial-gradient(circle at 50% 45%, rgba(255,255,255,.055) 0%, rgba(255,255,255,0) 70%);
}
.hero--dunkel .hero__halo::after{ opacity:.7; }
.hero--dunkel .hero__badge{
  background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.16);
  color:rgba(255,255,255,.7); box-shadow:none;
}
.hero--dunkel .hero__badge b{ color:#fff; }
.hero--dunkel .btn--primary{ background:var(--brand); color:var(--ink); }
.hero--dunkel .btn--primary:hover{ background:#fff; }
.hero--dunkel .btn--primary .btn__arrow{ background:var(--ink); color:var(--brand); }
.hero--dunkel .btn--ghost{ color:#fff; box-shadow:inset 0 0 0 1px rgba(255,255,255,.26); }
.hero--dunkel .btn--ghost:hover{ box-shadow:inset 0 0 0 1px #fff; }

.hero--dunkel .hcard{
  background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.13);
  box-shadow:0 12px 34px rgba(0,0,0,.35);
}
.hero--dunkel .hcard__label{ color:#fff; }
.hero--dunkel .hcard__meta{ color:rgba(255,255,255,.5); }
.hero--dunkel .hcard--plain{ background:rgba(255,255,255,.04); }
.hero--dunkel .hcard__viz{ background:rgba(0,204,204,.10); color:var(--brand); }
.hero--dunkel .hcard--brand{ background:var(--brand); border-color:transparent; }
.hero--dunkel .hcard--brand .hcard__label{ color:var(--ink); }
.hero--dunkel .hcard--brand .hcard__viz{ background:rgba(0,27,20,.12); color:var(--ink); }
.hero--dunkel .hcard--ink{ background:#000; border-color:rgba(255,255,255,.14); }
.hero--dunkel .deko-ring{ border-color:rgba(0,204,204,.18); }

/* --- Überschrift dreizeilig, erste Zeile dominiert --- */
.hero h1{ line-height:1.02; }
.hero__stark, .hero__zeile{ display:block; }
.hero__stark{ font-size:1.14em; letter-spacing:-.035em; }
.hero__zeile{ font-size:.94em; }
.hero__zeile.accent{ color:var(--brand); }

/* ============================================================
   KOPFBEREICH: die Überschrift trägt die Seite
   Drei Mittel, die zusammenwirken — Größe, Farbe, Leuchten.
   Einzeln wirkt keines davon.
   ============================================================ */
.hero--dunkel h1{
  line-height:.94;
  letter-spacing:-.045em;
  margin-inline:auto;
}
.hero--dunkel .hero__stark{
  font-size:clamp(3.2rem, 9.5vw, 7.2rem);
  color:var(--brand);
  /* Gestaffeltes Leuchten: eng und kräftig innen, weit und zart außen */
  /* Zurueckgenommen: vorher .55/.34/.18 — das wirkte wie Neonreklame.
     Jetzt nur noch ein feiner Schein, der die Schrift traegt. */
  text-shadow:
    0 0 14px rgba(0,204,204,.26),
    0 0 44px rgba(0,204,204,.13);
}
.hero--dunkel .hero__zeile{
  font-size:clamp(2.3rem, 6.4vw, 4.8rem);
  color:#fff;
}
.hero--dunkel .hero__zeile.accent{ color:#fff; }

/* Lichtschein hinter der Überschrift, damit sie aus der Fläche heraustritt */
.hero--dunkel .hero__inner::before{
  content:''; position:absolute; left:50%; top:16%;
  translate:-50% 0; z-index:-1;
  width:min(76vw, 780px); height:min(38vh, 340px);
  background:radial-gradient(ellipse at center, rgba(0,204,204,.11) 0%, rgba(0,204,204,0) 68%);
  filter:blur(28px); pointer-events:none;
}
.hero--dunkel .hero__inner{ position:relative; }
.hero--dunkel .hero__sub{ margin-top:26px; font-size:clamp(1.02rem,1.4vw,1.18rem); }

@media (max-width:600px){
  .hero--dunkel h1{ line-height:.98; }
  .hero--dunkel .hero__stark{ font-size:clamp(2.9rem, 13vw, 4rem); }
  .hero--dunkel .hero__zeile{ font-size:clamp(2rem, 9.5vw, 3rem); }
}
@media (prefers-reduced-motion:reduce){
  .hero--dunkel .hero__stark{ text-shadow:0 0 18px rgba(0,204,204,.2); }
}

/* ============================================================
   BEWEGUNG BEIM SCROLLEN
   Die Drift kommt aus dem Skript und liegt VOR den Hover-Effekten,
   damit beides zusammen funktioniert statt sich zu ueberschreiben.
   ============================================================ */
.pain, .service, .fall, .quote, .umfang__item, .stat, .marquee__item{
  transform:translateY(var(--drift, 0px));
}
.step{ transform:translateY(calc(var(--drift, 0px) * .5)); }

/* Auf schmalen Bildschirmen laufen die Einblendungen aus groesserer
   Entfernung ein — dort faellt Bewegung sonst kaum auf. */
@media (max-width:900px){
  .reveal{ transform:translateY(38px); }
  .reveal.is-in{ transform:none; }
  .pain, .service, .fall, .quote, .umfang__item{
    transition:transform .5s var(--ease), background-color .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);
  }
}
@media (prefers-reduced-motion:reduce){
  .pain, .service, .fall, .quote, .umfang__item, .stat, .marquee__item, .step{ transform:none !important; }
}

/* Auf dunklem Kopfbereich tritt der Burger zurueck: keine weisse Flaeche,
   sondern feine helle Kontur mit hellen Strichen. Ein gefuellter weisser
   Kreis wirkte dort wie ein Fremdkoerper. */
.hero--dunkel ~ * .burger,
body:has(.hero--dunkel) .burger{
  background:transparent;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.26);
}
body:has(.hero--dunkel) .burger i{ background:#fff; }
body:has(.hero--dunkel) .burger:hover,
body:has(.hero--dunkel) .burger:active{
  box-shadow:inset 0 0 0 1.5px var(--brand);
}
body:has(.hero--dunkel) .burger:hover i{ background:var(--brand); }
/* Sobald der Kopfbereich beim Scrollen hinterlegt wird, gilt wieder Dunkel auf Hell */
body:has(.hero--dunkel) .site-header.is-scrolled .burger{
  background:#fff; box-shadow:inset 0 0 0 1px var(--line-strong), var(--shadow-sm);
}
body:has(.hero--dunkel) .site-header.is-scrolled .burger i{ background:var(--ink); }

/* Der Schriftzug im Kopfbereich muss auf Dunkel hell sein */
body:has(.hero--dunkel) .site-header:not(.is-scrolled) .brand__text{ color:#fff; }
body:has(.hero--dunkel) .site-header:not(.is-scrolled) .nav{ background:rgba(255,255,255,.08); }
body:has(.hero--dunkel) .site-header:not(.is-scrolled) .nav a{ color:#fff; }
body:has(.hero--dunkel) .site-header:not(.is-scrolled) .nav a:hover{ background:rgba(255,255,255,.14); box-shadow:none; }

/* Das Laufband steht still, bis es im Bild ist. Sonst waeren die ersten
   drei Logos bei jedem, der spaeter hinunterscrollt, schon vorbeigelaufen —
   und genau die sollen alle sehen. */
.marquee__track{ animation-play-state:paused; }
.marquee.laeuft .marquee__track{ animation-play-state:running; }
.marquee:hover .marquee__track{ animation-play-state:paused; }

/* ============================================================
   KOPF-ÜBERSCHRIFT IM STIL DER UNTERSEITEN — UND GRÖSSER
   Wie auf den Unterseiten: beide Zeilen gleich gross, ein Block.
   Aber der Titel ist das groesste Element der Seite und die
   tuerkise Zeile bekommt ihr feines Leuchten zurueck.
   ============================================================ */
.hero--dunkel .hero__stark,
.hero--dunkel .hero__zeile{
  font-size:clamp(2.8rem, 7vw, 5.15rem);
  letter-spacing:-.03em;
}
.hero--dunkel .hero__stark{
  text-shadow:
    0 0 14px rgba(0,204,204,.28),
    0 0 44px rgba(0,204,204,.14);
}
.hero--dunkel h1{ line-height:1.02; }

/* Der Hinweis oben ist Beiwerk, kein zweiter Titel */
.hero__badge{ font-size:.68rem; padding:4px 12px 4px 8px; gap:7px; margin-bottom:20px; }
.hero__badge b{ font-weight:600; }
.hero__dot{ width:5px; height:5px; }

@media (max-width:900px){
  .hero--dunkel .hero__stark,
  .hero--dunkel .hero__zeile{ font-size:clamp(2.2rem, 10.35vw, 3.6rem); }
  .hero--dunkel h1{ line-height:1.05; }
  .hero__badge{ font-size:.62rem; padding:4px 11px; line-height:1.4; }
  /* Ringe am Smartphone deutlicher, damit die Bewegung ankommt */
  .deko-ring{ border-color:rgba(0,204,204,.32); }
  .section--ink .deko-ring{ border-color:rgba(0,204,204,.34); }
}
@media (prefers-reduced-motion:reduce){
  .hero--dunkel .hero__stark{ text-shadow:0 0 18px rgba(0,204,204,.2); }
}

/* ============================================================
   LOGO-BAND ZUM SELBST WISCHEN
   Das Band ist jetzt ein echter Scrollbereich: Es laeuft von selbst
   gemaechlich weiter (uebernimmt das Skript), laesst sich aber jederzeit
   mit Finger oder Maus weiterschieben. Die CSS-Animation entfaellt.
   ============================================================ */
.marquee{
  overflow-x:auto; overflow-y:hidden;
  scrollbar-width:none; -ms-overflow-style:none;
  cursor:grab; -webkit-overflow-scrolling:touch;
}
.marquee::-webkit-scrollbar{ display:none; }
.marquee.zieht{ cursor:grabbing; }
.marquee.zieht .marquee__item img{ pointer-events:none; }
.marquee__track{ animation:none; width:max-content; }
.marquee__shift{ display:block; width:max-content; }

/* Handschriftlicher Hinweis unter dem Band */
@font-face{
  font-family:'Caveat';
  src:url('../fonts/Caveat-Variable.woff2') format('woff2');
  font-weight:400 700; font-display:swap;
}
.marquee-wink{
  display:flex; justify-content:center; align-items:center; gap:8px;
  margin-top:6px;
  font-family:'Caveat', 'Bradley Hand', cursive;
  font-size:1.45rem; font-weight:600; color:var(--brand);
  transform:rotate(-2deg);
}
.marquee-wink svg{ flex:0 0 auto; }
@media (max-width:900px){
  .marquee-wink{ font-size:1.3rem; margin-top:2px; }
}

/* ============================================================
   KARTEN WACHEN BEIM SCROLLEN AUF (Beruehr-Geraete)
   .is-im-blick vergibt das Skript an die Karte in der Bildschirmmitte —
   derselbe Zustand, den am Desktop das Hover ausloest.
   ============================================================ */
.service.is-im-blick{
  transform:translateY(calc(var(--drift, 0px) - 5px));
  box-shadow:var(--shadow-lg);
  border-color:rgba(0,204,204,.5);
}
.service.is-im-blick .service__glow{ opacity:1; }
.service.is-im-blick .service__icon{ background:var(--brand); color:var(--ink); transform:rotate(-6deg) scale(1.06); }
.service.is-im-blick .service__link i{ transform:translateX(5px); }

.pain.is-im-blick{
  transform:translateY(calc(var(--drift, 0px) - 4px));
  border-color:rgba(0,204,204,.5);
  box-shadow:var(--shadow-lg);
}
.fall.is-im-blick{ border-color:rgba(0,204,204,.4); }

/* ============================================================
   KOPF-TITEL: „Kaffee macht wach. / KI macht effizient."
   Zeile 1 ruhig in Weiss, Zeile 2 — die Aussage — tuerkis mit
   dem feinen Leuchten. Vorher war es umgekehrt.
   ============================================================ */
.hero--dunkel .hero__stark{ color:#fff; text-shadow:none; }
.hero--dunkel .hero__zeile{
  color:var(--brand);
  text-shadow:
    0 0 14px rgba(0,204,204,.28),
    0 0 44px rgba(0,204,204,.14);
}
@media (prefers-reduced-motion:reduce){
  .hero--dunkel .hero__stark{ text-shadow:none; }
  .hero--dunkel .hero__zeile{ text-shadow:0 0 18px rgba(0,204,204,.2); }
}

/* ============================================================
   HELLER KOPFBEREICH mit dem grossen Titel
   Dieselbe Groesse und Aufteilung wie in der dunklen Variante.
   Auf hellem Grund waere das reine Tuerkis zu blass — Zeile 2
   bekommt das tiefe Tuerkis, ohne Leuchten (Licht auf Hell wirkt
   schmutzig statt strahlend).
   ============================================================ */
.hero h1{ line-height:1.02; }
.hero .hero__stark,
.hero .hero__zeile{
  font-size:clamp(2.8rem, 7vw, 5.15rem);
  letter-spacing:-.03em;
}
.hero:not(.hero--dunkel) .hero__stark{ color:var(--ink); }
.hero:not(.hero--dunkel) h1:not(:has(.mark)) .hero__zeile{
  /* Wie das Hinterleger-Element der Seite (z.B. "Erst verstehen"):
     dunkle Schrift auf tuerkiser Flaeche. Die Zeile ist ein Block und
     damit automatisch genauso breit wie "Kaffee macht wach." darueber.
     Der Glanz liegt auf der Flaeche: ein schmaler Lichtstreif wandert
     alle paar Sekunden durch das Tuerkis. */
  color:var(--ink);
  margin-top:.1em;
  padding:.04em .18em .1em;
  border-radius:.12em;
  box-decoration-break:clone;
  background:linear-gradient(105deg,
    var(--brand) 0%, var(--brand) 43%,
    #8FF2EC 48.5%, #DCFDFB 50%, #8FF2EC 51.5%,
    var(--brand) 57%, var(--brand) 100%);
  background-size:300% 100%;
  background-position:150% 0;
  animation:zeilen-glanz 4.6s ease-in-out infinite;
}
@keyframes zeilen-glanz{
  0%   { background-position:150% 0; }
  45%  { background-position:-150% 0; }
  100% { background-position:-150% 0; }
}
/* Am grossen Bildschirm ist die Zeile breit — der Streif laeuft dort
   langsamer und heller, damit der Glanz nicht untergeht. */
@media (min-width:901px){
  .hero:not(.hero--dunkel) h1:not(:has(.mark)) .hero__zeile{
    animation-duration:6.5s;
    background:linear-gradient(105deg,
      var(--brand) 0%, var(--brand) 41%,
      #9FF4EE 47%, #F2FFFE 50%, #9FF4EE 53%,
      var(--brand) 59%, var(--brand) 100%);
    background-size:300% 100%;
  }
}
@media (prefers-reduced-motion:reduce){
  .hero:not(.hero--dunkel) h1:not(:has(.mark)) .hero__zeile{
    animation:none;
    background:var(--brand);
  }
}
@media (max-width:900px){
  .hero .hero__stark,
  .hero .hero__zeile{ font-size:clamp(2.2rem, 10.35vw, 3.6rem); }
  .hero h1{ line-height:1.05; }
}

/* ============================================================
   KREISE ATMEN
   Sanftes Pulsieren der Hintergrund-Ringe auf allen Geraeten.
   Wichtig: animiert wird die eigene scale-Eigenschaft, NICHT
   transform — dort schreibt die Scroll-Drift ihr translate3d hinein,
   beides zusammen funktioniert nur getrennt.
   ============================================================ */
/* Doppelschlag wie ein Herz: bum-bum ... Pause */
@keyframes deko-herz{
  0%   { scale: 1;     opacity: 1;   }
  7%   { scale: 1.055; opacity: .7;  }
  14%  { scale: 1;     opacity: 1;   }
  21%  { scale: 1.04;  opacity: .78; }
  30%  { scale: 1;     opacity: 1;   }
  100% { scale: 1;     opacity: 1;   }
}
.deko-ring{
  animation: deko-herz 2.6s ease-in-out infinite;
  will-change: opacity;
}
.deko-ring--fein{ animation-delay: -1.1s; }
.deko-punkt{ animation: deko-herz 2.6s ease-in-out infinite; animation-delay: -.6s; }

/* Hero-Band-Klone existieren nur fuer die Endlos-Schleife am Smartphone */
.hcard--klon{ display:none; }
@media (max-width:900px){
  .hero__scene.wandert .hcard--klon{ display:block; }
  /* Beim Wandern: kein Einrasten und keine CSS-Umordnung —
     die Reihenfolge stellt das Skript physisch her */
  .hero__scene.wandert{ scroll-snap-type:none; }
  .hero__scene.wandert > *{ order:0; }
}

/* Fester tuerkiser Lichtfleck hinter "Diese Unternehmen arbeiten mit uns"
   — trennt die Sektion weich vom Kopfbereich, auf jeder Bildschirmbreite.
   (Vorher kam er aus einer Jede-dritte-Sektion-Regel und verschwand,
   sobald sich die Reihenfolge der Bausteine aenderte.) */
#referenzen{ position:relative; overflow:hidden; }
#referenzen::before{
  content:''; position:absolute; left:50%; top:-140px;
  transform:translateX(-50%);
  width:min(72vw, 760px); aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle, var(--brand-glow), rgba(0,204,204,0) 68%);
  opacity:.6; filter:blur(30px); pointer-events:none;
}

/* Human-in-the-Loop-Kasten: am Desktop kompakter, und der Text laeuft
   nicht mehr unter das gedrehte Siegel */
.faelle__antwort p{ font-size:.95rem; line-height:1.6; margin:0; }
@media (min-width:701px){
  .faelle__antwort{ padding:20px 150px 20px 24px; }
}

/* ============================================================
   KREIS-FEINPLATZIERUNG MOBIL
   1) Team-Sektion: Der Zufalls-Ring ueberschnitt sich mit dem Kreis
      der Landkarte — wirkte wie ein Darstellungsfehler. Mobil raus.
   2) Dafuer bekommt "Das werden wir oft gefragt" einen eigenen,
      pulsierenden Ring.
   3) Leitspruch-Sektion: Der Ring ragte nur halb ins Bild und sah
      unfertig aus — mobil steht er jetzt ganz im Bild.
   ============================================================ */
/* Pulsierender Ring bei "Das werden wir oft gefragt" — auf allen Geraeten.
   Er ist dort der EINZIGE Kreis: die Zufalls-Ringe der Sektion entfallen. */
.section:has(.faq__item) > .deko{ display:none; }
.section:has(.faq__item){ position:relative; overflow:hidden; }
.section:has(.faq__item)::before{
  content:''; position:absolute; right:-60px; top:44px;
  width:210px; height:210px; border-radius:50%;
  border:1px solid rgba(0,204,204,.32);
  animation:deko-herz 2.6s ease-in-out infinite;
  pointer-events:none;
}
@media (min-width:901px){
  .section:has(.faq__item)::before{ width:300px; height:300px; right:-80px; top:60px; }
}
@media (prefers-reduced-motion:reduce){
  .section:has(.faq__item)::before{ animation:none; }
}

@media (max-width:900px){
  .section:has(.team__person) > .deko{ display:none; }
  /* Auf schmalen Bildschirmen genuegt EIN Deko-Element pro Sektion:
     kleine Begleit-Ringe und zusaetzliche Farbflecken entfallen mobil. */
  .deko-ring--fein,
  .deko-punkt{ display:none; }
}

/* ============================================================
   ANSPRECHPARTNER-FOTO bei den Erstgespraech-Aufrufen
   Ein Gesicht statt eines anonymen Knopfs — Martin, rund, mit
   tuerkisem Ring, darunter eine leise Zeile.
   ============================================================ */
.ansprech{
  position:relative; display:flex; flex-direction:column; align-items:center;
  gap:3px; margin-bottom:18px;
}
.ansprech img{ margin-bottom:7px; }
.ansprech__name{
  font-family:'Satoshi',sans-serif; font-weight:500; font-size:.98rem;
  letter-spacing:0; color:#fff;
}
.ansprech--hell .ansprech__name{ color:var(--ink); }
.ansprech img{
  width:84px; height:84px; border-radius:50%;
  object-fit:cover; object-position:50% 32%;
  box-shadow:0 0 0 3px var(--brand), 0 10px 26px rgba(0,0,0,.28);
}
.ansprech__zeile{
  font-size:.78rem; letter-spacing:.04em; color:rgba(255,255,255,.65);
}
/* Helle Umgebung (Kontaktblock): linksbuendig neben der Ueberschrift */
.ansprech--hell{ align-items:flex-start; }
.ansprech--hell img{ box-shadow:0 0 0 3px var(--brand), var(--shadow-md); }
.ansprech--hell .ansprech__zeile{ color:var(--muted); }


/* Ansprechpartner mobil: mittig als ruhige Visitenkarte, mit Abstand
   zum linksbuendigen Erstgespraech-Kapitel darunter */
@media (max-width:700px){
  .ansprech--hell{ align-items:center; text-align:center; margin:0 auto 26px; }
}

/* Tuerkis-Hinterlegung im Kopf-Titel: zieht beim Seitenaufbau von
   links auf — ohne auf einen Scroll-Beobachter zu warten. */
/* Titel MIT Hinterlegung brauchen Zeilenluft — sonst ragt die farbige
   Box in die Nachbarzeile. Titel ohne (Startseite) bleiben eng gesetzt. */
/* 1.26 statt 1.18: Die Farbbox der Folgezeile beginnt damit sicher
   UNTERHALB der tiefsten Unterlaenge (g, p, y) der Zeile darueber —
   unabhaengig davon, wie der Browser die Mal-Reihenfolge aufloest. */
.hero h1:has(.mark){ line-height:1.26; }
/* Box-Hoehe = Zeilenhoehe: Bricht eine Markierung um, schliessen die
   Teil-Boxen nahtlos aneinander — ein durchgehender Markerstrich statt
   zweier aneinanderstossender Kaestchen. */
/* Oben minimaler Aufschlag (beruehrt nie die Zeile darueber — auch nicht
   das eigene g der ersten Markierungszeile), unten kraeftiger: Die Boxen
   ueberlappen einander nach unten, wo der Text der Folgezeile ohnehin
   spaeter — also DARUEBER — gemalt wird. Nahtlos UND textsicher. */
.hero h1 .mark{ padding-top:.02em; padding-bottom:.16em; }
@media (max-width:900px){
  .hero h1:has(.mark){ line-height:1.3; }
  /* Markierte Titel eine Spur kleiner: So passt jede per | gesetzte
     Zeile sicher in die Breite und Markierungen brechen nicht mehr
     mitten im Begriff um. */
  .hero h1:has(.mark) :is(.hero__stark, .hero__zeile){
    font-size:clamp(1.9rem, 8.5vw, 3rem);
  }
  .hero h1 .mark{ padding-top:.02em; padding-bottom:.22em; }
}

@keyframes mark-ein{ from{ background-size:0% 100%; } to{ background-size:100% 100%; } }
.hero h1 .mark{
  color:var(--ink);
  animation:mark-ein .9s var(--ease-out) .45s both;
}
@media (prefers-reduced-motion:reduce){
  .hero h1 .mark{ animation:none; background-size:100% 100%; }
}

/* ============================================================
   GOOGLE-BEWERTUNGEN  —  schmale Leiste auf jeder Seite
   Kuratiert aus der Redaktion, keine fremden Skripte.
   ============================================================ */
.google-leiste{
  background:var(--surface); border-top:1px solid var(--line);
  padding:clamp(34px,5vw,56px) var(--gutter);
}
.google-leiste .container{ display:flex; flex-direction:column; gap:22px; }
.google-leiste__kopf{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  font-family:'Satoshi',sans-serif;
}
.google-leiste__kopf b{ font-size:1.02rem; font-weight:700; }
.google-leiste__kopf a{
  margin-left:auto; font-size:.88rem; color:var(--brand-deep); font-weight:500;
}
.google-leiste__kopf a:hover{ text-decoration:underline; }
.gstern{ display:inline-flex; gap:2px; }

.google-leiste__band{
  display:grid; grid-template-columns:repeat(5, 1fr); gap:14px;
}
.grez{
  background:#fff; border:1px solid var(--line); border-radius:14px;
  padding:16px 16px 14px; margin:0;
  display:flex; flex-direction:column; gap:9px;
}
.grez blockquote{
  margin:0; font-size:.86rem; line-height:1.55; color:var(--muted);
  display:-webkit-box; -webkit-line-clamp:5; -webkit-box-orient:vertical; overflow:hidden;
}
.grez figcaption{
  font-family:'Satoshi',sans-serif; font-size:.8rem; font-weight:500; color:var(--ink);
}

@media (max-width:1100px){
  .google-leiste__band{ grid-template-columns:repeat(3,1fr); }
  .grez:nth-child(n+4){ display:none; }
}
@media (max-width:700px){
  /* Mobil: wischbares Band, alle fuenf sichtbar */
  .google-leiste{ padding-inline:0; }
  .google-leiste .container{ padding-inline:var(--gutter); }
  .google-leiste__band{
    display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory;
    margin-inline:calc(var(--gutter) * -1); padding:2px var(--gutter) 10px;
    scrollbar-width:none;
  }
  .google-leiste__band::-webkit-scrollbar{ display:none; }
  .grez{ flex:0 0 240px; scroll-snap-align:start; display:flex !important; }
  .google-leiste__kopf a{ margin-left:0; flex-basis:100%; }
}