/* ============================================================
   FWN Media — main.css
   Quelle: Ressourcen/Design Kit/web-ui-kit.html + module-library.html
   Sektionen folgen der Module-Library m01–m20.
   ============================================================ */

/* ============ INTER VARIABLE FONT (self-hosted, SIL Open Font License) ============ */
@font-face {
  font-family: 'Inter';
  src: url('../fonts/InterVariable-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ============ TOKENS ============ */
:root {
  --green-200:#9ccf92;
  --green-300:#6ab775;
  --green-400:#4fb373;
  --green-500:#21874a;
  --green-700:#1f5014;

  --bg:#000;
  --bg-2:#0a0a0a;
  --surface:#0f0f0f;
  --surface-2:#161616;
  --line:rgba(255,255,255,.08);
  --line-2:rgba(255,255,255,.14);
  --fg:#f5f5f7;
  --fg-2:#a1a1a6;
  --fg-3:#6e6e73;

  --grad-brand: linear-gradient(110deg, #6ab775 0%, #4fb373 25%, #21874a 60%, #9ccf92 100%);

  --font: 'Inter', -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Arial, sans-serif;

  --ease: cubic-bezier(.4,0,.2,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}
html[data-theme="light"] {
  --bg:#fff;
  --bg-2:#fafafa;
  --surface:#fff;
  --surface-2:#f5f5f7;
  --line:rgba(0,0,0,.08);
  --line-2:rgba(0,0,0,.14);
  --fg:#1d1d1f;
  --fg-2:#6e6e73;
  --fg-3:#86868b;
}

/* ============ RESET ============ */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:72px;overflow-x:clip}
body{max-width:100%}

/* Mobile: hartes Clipping gegen horizontalen Overflow.
   Auf Desktop NICHT setzen, weil overflow:clip auf body die
   sticky-Positionierung der Process-Grafik bricht. */
@media (max-width: 900px){
  body{overflow-x:clip}
  /* iOS-Scroll-Sprünge: Overflow vom Root-Scroller (html) nehmen — body clippt
     horizontal bereits. Overflow auf html stört das native Ein-/Ausblenden der
     unteren Browser-Leiste und lässt die Scrollposition springen. */
  html{overflow-x:visible}
  /* Die fixe Frosted-Glass-Leiste mit backdrop-filter muss auf Mobile bei JEDEM
     Scroll-Frame neu komponiert werden → Ruckeln/Lag, das mit der dynamischen
     Browser-Leiste am unteren Rand mitspringt. Auf Mobile daher aus. */
  .fwn-blur-bar{display:none}

  /* HAUPTURSACHE des Scroll-Lags/Springens auf iOS: die FIXE Navigation hat
     backdrop-filter: blur(22px). Ein fixes Element mit Live-Blur zwingt iOS,
     bei jedem Scroll-Frame den gesamten Bereich dahinter neu zu rendern.
     Auf Mobile daher ohne Blur, mit (fast) solidem Hintergrund. */
  .topbar{
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
    background:color-mix(in oklab, var(--bg) 94%, transparent);
  }
  /* Custom-Cursor ist auf Mobile sinnlos (kein Mauszeiger) → aus.
     Der Firefly-Layer bleibt sichtbar (Wunsch), wird aber weiter unten in der
     Datei auf mix-blend-mode:normal gestellt — das teure screen-Blend war der
     eigentliche Lag-Verursacher, nicht der Layer selbst. */
  .fwn-cursor{display:none}
}

/* (Sticky Mobile CTA-Bar entfernt — User-Wunsch) */

/* ============ PRELOADER ============ */
#fwn-preloader{
  position:fixed;inset:0;background:#000;
  display:flex;justify-content:center;align-items:center;
  z-index:999999;opacity:1;
  transition:opacity .4s ease;
}
#fwn-preloader.fwn-preloader-hide{opacity:0;pointer-events:none}
.fwn-preloader-logo{
  width:220px;max-width:60vw;height:auto;
  opacity:0;transform:scale(.96);
  animation:fwn-logoFade .9s ease forwards;
}
@media (max-width:768px){.fwn-preloader-logo{width:140px}}
@keyframes fwn-logoFade{to{opacity:1;transform:scale(1)}}

/* ── Scrollbar ─────────────────────────────────────────────── */
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--green-500);border-radius:999px}
::-webkit-scrollbar-thumb:hover{background:var(--green-300)}
* { scrollbar-width:thin; scrollbar-color:var(--green-500) transparent }

/* ── Floating UI (Dark/Light + Scroll-to-top) ──────────────── */
.fui{
  position:fixed;bottom:28px;right:24px;z-index:200;
  display:flex;flex-direction:column;align-items:flex-end;gap:10px;
}

/* Scroll-to-top */
.fui-scroll{
  width:40px;height:40px;border-radius:50%;
  background:var(--surface);border:1px solid var(--line);
  color:var(--fg);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 20px rgba(0,0,0,.35);
  transition:opacity .3s var(--ease),transform .3s var(--ease),background .2s var(--ease);
  opacity:0;pointer-events:none;transform:translateY(8px);
}
html[data-theme="light"] .fui-scroll{box-shadow:0 4px 20px rgba(0,0,0,.12)}
.fui-scroll.visible{opacity:1;pointer-events:auto;transform:translateY(0)}
.fui-scroll:hover{background:var(--surface-2)}

/* Theme toggle pill */
.fui-theme{
  position:relative;
  display:flex;align-items:center;
  width:104px;height:36px;border-radius:999px;
  background:var(--surface);border:1px solid var(--line);
  padding:0;overflow:hidden;
  box-shadow:0 4px 20px rgba(0,0,0,.35);
  cursor:pointer;
}
html[data-theme="light"] .fui-theme{box-shadow:0 4px 20px rgba(0,0,0,.12)}
.fui-theme-dark,.fui-theme-light{
  flex:1;text-align:center;font-size:12px;font-weight:600;
  letter-spacing:.02em;position:relative;z-index:2;
  transition:color .3s var(--ease);line-height:36px;
  pointer-events:none;
}
/* Dark mode: "Dark" highlighted */
html[data-theme="dark"] .fui-theme-dark{color:var(--bg)}
html[data-theme="dark"] .fui-theme-light{color:var(--fg-2)}
/* Light mode: "Light" highlighted */
html[data-theme="light"] .fui-theme-dark{color:var(--fg-2)}
html[data-theme="light"] .fui-theme-light{color:var(--bg)}
/* Sliding thumb */
.fui-thumb{
  position:absolute;top:3px;bottom:3px;width:calc(50% - 3px);
  border-radius:999px;background:var(--fg);z-index:1;
  transition:transform .35s var(--ease-out);
  left:3px;
}
html[data-theme="light"] .fui-thumb{transform:translateX(calc(100% + 0px))}
@media (max-width:480px){
  .fui{bottom:20px;right:16px}
  .fui-theme{width:92px;height:32px}
  .fui-theme-dark,.fui-theme-light{line-height:32px;font-size:11px}
}
html,body{background:var(--bg);color:var(--fg);font-family:var(--font);-webkit-font-smoothing:antialiased;letter-spacing:-0.012em;font-feature-settings:'cv05' 1,'cv09' 1,'cv10' 1,'ss02' 1}
/* v7.1: kleinere Body-Schrift + tighter line-height für eleganteres Apple-Gefühl */
body{font-size:15px;line-height:1.5;transition:background .4s var(--ease), color .4s var(--ease)}
*,*::before,*::after{box-sizing:border-box}
img{max-width:100%;height:auto;vertical-align:middle}
a{color:inherit;text-decoration:none}
button{font-family:var(--font);background:none;border:0;color:inherit;cursor:pointer}
img{max-width:100%;display:block}

.wrap{max-width:1200px;margin:0 auto;padding:0 clamp(20px,4vw,40px)}
:root{--sec-pad-y:clamp(80px,12vh,160px)}
section, .l-hero, .k-hero, .l-final-cta, .l-problem, .l-usp, .l-proj-teaser, .l-process, .wp-badge-sec{padding-top:var(--sec-pad-y);padding-bottom:var(--sec-pad-y)}
/* Mobile: einheitlicher, ruhigerer Sektionsabstand überall */
@media (max-width:600px){:root{--sec-pad-y:clamp(56px,9vh,80px)}}
@media (max-width:720px){.wrap{padding:0 20px}}

section{padding:140px 0;position:relative}
@media (max-width:720px){section{padding:96px 0}}

/* ============ 01 — FLOATING PILL HEADER ============ */
.topbar{
  position:fixed;top:18px;left:50%;transform:translateX(-50%);z-index:100;
  width:min(1200px, calc(100% - 48px));
  background: color-mix(in oklab, var(--bg) 65%, transparent);
  backdrop-filter: saturate(180%) blur(22px);
  -webkit-backdrop-filter: saturate(180%) blur(22px);
  border:1px solid var(--line);
  border-radius:20px;
  padding:8px 12px 8px 22px;
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  box-shadow: 0 10px 30px -12px rgba(0,0,0,.5);
  transition: width .5s var(--ease-out), border-radius .5s var(--ease-out), background .3s var(--ease);
}
.topbar.tight{width:min(820px, calc(100% - 32px));border-radius:999px}
.brand{display:inline-flex;align-items:center;height:32px;flex-shrink:0;color:var(--fg)}
.brand .logo{height:24px;width:auto;display:block}
.brand .logo-light{display:none}
.brand-text{font-size:15px;font-weight:600;letter-spacing:-0.02em}
.brand-text b{font-weight:400;opacity:.65}
html[data-theme="light"] .brand .logo-dark{display:none}
html[data-theme="light"] .brand .logo-light{display:block}
.topnav{display:flex;align-items:center;gap:0}
.topnav a{
  font-size:12px;font-weight:400;color:var(--fg);opacity:.85;
  padding:6px 12px;border-radius:999px;
  transition:opacity .2s var(--ease),background .2s var(--ease);
  white-space:nowrap;
}
.topnav > a:hover,
.topnav .current-menu-item > a{opacity:1;background:color-mix(in oklab, var(--fg) 8%, transparent)}

/* ── Leistungen Dropdown ── */
.topnav-item{position:relative;display:flex;align-items:center;}
.topnav-item > a{opacity:.85;}
.topnav-item:hover > a{opacity:1;background:color-mix(in oklab, var(--fg) 8%, transparent)}

.topnav-drop{
  position:absolute;
  top:100%;
  left:50%;
  transform:translateX(-50%) translateY(-4px);
  opacity:0;
  pointer-events:none;
  transition:opacity .2s var(--ease),transform .22s var(--ease-out);
  /* padding-top bridget die Lücke zum Link — kein Hover-Gap mehr */
  padding-top:10px;
  min-width:190px;
  z-index:200;
}
.topnav-drop-inner{
  background:var(--surface-2);
  border:1px solid var(--line);
  border-radius:14px;
  padding:6px;
  box-shadow:0 20px 48px -12px rgba(0,0,0,.55);
  display:flex;flex-direction:column;gap:2px;
}
.topnav-item:hover .topnav-drop{
  opacity:1;
  pointer-events:auto;
  transform:translateX(-50%) translateY(0);
}
.topnav-drop a{
  padding:9px 13px;border-radius:9px;
  font-size:13px;font-weight:450;
  color:var(--fg-2);opacity:1;
  background:transparent;
  transition:background .15s var(--ease),color .15s var(--ease);
  white-space:nowrap;display:block;
}
.topnav-drop a:hover{
  background:color-mix(in oklab, var(--fg) 8%, transparent);
  color:var(--fg);
}

.top-cta{display:flex;align-items:center;gap:6px}
.theme-toggle{
  width:30px;height:30px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;font-size:13px;
  transition:background .2s var(--ease);
}
.theme-toggle:hover{background:color-mix(in oklab, var(--fg) 8%, transparent)}
@media (max-width:780px){.topnav{display:none}}

/* ============ MOBILE MENU ============ */

/* Hamburger-Button: nur mobil */
.mob-menu-btn{
  display:none;
  flex-direction:column;justify-content:center;align-items:center;
  gap:5px;width:36px;height:36px;border-radius:10px;padding:0;
  transition:background .2s var(--ease);
  flex-shrink:0;
}
.mob-menu-btn:hover{background:color-mix(in oklab, var(--fg) 8%, transparent)}
.mob-menu-btn span{
  display:block;width:18px;height:1.5px;
  background:var(--fg);border-radius:2px;
  transform-origin:center;
  transition:transform .4s var(--ease-out), opacity .3s var(--ease), width .3s var(--ease);
}

/* Geöffnet: Burger → X */
.mob-menu-btn.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.mob-menu-btn.open span:nth-child(2){opacity:0;transform:scaleX(0)}
.mob-menu-btn.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* "Anfragen" nur auf Desktop */
.top-cta-desk{display:inline-flex}

/* Desktop: Hamburger & Overlay-Icons niemals sichtbar */
@media (min-width:781px){
  .mob-menu-btn{display:none !important}
  .mob-menu{display:none !important}
}

/* Mobil: nur Toggle + Hamburger im Topbar */
@media (max-width:780px){
  .mob-menu-btn{display:flex}
  .top-cta-desk{display:none !important}
  .top-ig{display:none !important}
  .topnav{display:none !important}
}

/* Overlay: volle Höhe, schiebt von unten rein */
.mob-menu{
  position:fixed;inset:0;z-index:98;
  display:flex;flex-direction:column;
  background:var(--bg);
  transform:translateY(100%);
  transition:transform .56s var(--ease-out);
  overflow:hidden;
  /* Safe-Area für iPhone-Notch */
  padding-bottom:env(safe-area-inset-bottom);
}
html[data-theme="light"] .mob-menu{background:#fff}
.mob-menu.open{transform:translateY(0)}

/* Scrollbarer Inhaltsbereich */
.mob-menu-inner{
  display:flex;flex-direction:column;justify-content:space-between;
  flex:1;overflow-y:auto;
  padding:calc(18px + 56px + 20px) 28px 32px; /* 18px topbar-top + ~56px bar-height + gap */
}

/* ---- Haupt-Navigation ---- */
.mob-nav{display:flex;flex-direction:column}

.mob-link{
  display:flex;align-items:center;justify-content:space-between;
  width:100%;padding:13px 0;
  font-size:clamp(19px,5.5vw,26px);font-weight:500;letter-spacing:-0.02em;line-height:1.1;
  color:var(--fg-2);
  background:none;border:none;text-align:left;cursor:pointer;text-decoration:none;
  opacity:0;
  transform:translateX(-20px);
  transition:color .2s var(--ease), opacity .5s var(--ease-out), transform .5s var(--ease-out);
}
.mob-link:hover{color:var(--fg);}
html[data-theme="light"] .mob-link:hover{color:var(--fg);}

/* Pfeile entfernt */
.mob-arr{display:none}

/* Chevron für Leistungen-Toggle */
.mob-chevron{
  width:18px;height:18px;flex-shrink:0;color:var(--fg-3);
  transition:transform .3s var(--ease-out), color .2s var(--ease);
}
.mob-item-has-sub.open .mob-chevron{transform:rotate(180deg);color:var(--fg-2)}

/* Leistungen Untermenü */
.mob-item-has-sub{display:flex;flex-direction:column;}
.mob-sub{
  display:flex;flex-direction:column;gap:0;
  overflow:hidden;
  max-height:0;
  transition:max-height .35s var(--ease-out);
}
.mob-item-has-sub.open .mob-sub{max-height:320px;}
.mob-sub-link{
  padding:9px 0 9px 16px;
  font-size:clamp(15px,4.5vw,19px);font-weight:400;letter-spacing:-0.01em;
  color:var(--fg-3);text-decoration:none;
  transition:color .2s var(--ease);
  display:block;
}
.mob-sub-link:hover{color:var(--green-300);}
html[data-theme="light"] .mob-sub-link:hover{color:var(--green-500);}

/* Stagger-Animation: direkte Links + Toggle-Button in Wrapper */
.mob-menu.open .mob-nav > .mob-link,
.mob-menu.open .mob-nav > .mob-item-has-sub > .mob-link{opacity:1;transform:translateX(0)}

/* Staggered Slide-in, wenn open */
.mob-menu.open .mob-nav > .mob-item-has-sub:nth-child(1) > .mob-link{transition-delay:.08s}
.mob-menu.open .mob-nav > .mob-link:nth-child(2){transition-delay:.14s}
.mob-menu.open .mob-nav > .mob-link:nth-child(3){transition-delay:.20s}
.mob-menu.open .mob-nav > .mob-link:nth-child(4){transition-delay:.26s}
.mob-menu.open .mob-nav > .mob-link:nth-child(5){transition-delay:.32s}

/* ---- Direkter CTA im Menü ---- */
.mob-cta{
  display:flex;align-items:center;justify-content:center;gap:10px;
  margin:28px 0 0;padding:18px 24px;width:100%;
  border-radius:999px;background:var(--green-500);color:#fff;
  font-size:17px;font-weight:600;letter-spacing:-0.005em;text-decoration:none;
  box-shadow:0 12px 32px -10px rgba(33,135,74,.6);
  opacity:0;transform:translateY(12px);
  transition:opacity .5s var(--ease-out) .42s, transform .5s var(--ease-out) .42s, background .25s var(--ease);
}
.mob-cta:hover{background:var(--green-300)}
.mob-cta .arr{font-size:20px;line-height:1;transition:transform .25s var(--ease-out)}
.mob-cta:hover .arr{transform:translateX(3px)}
.mob-menu.open .mob-cta{opacity:1;transform:translateY(0)}

/* ---- Footer des Menüs ---- */
.mob-footer{
  display:flex;flex-direction:column;gap:20px;padding-top:32px;
  opacity:0;transform:translateY(12px);
  transition:opacity .5s var(--ease-out) .5s, transform .5s var(--ease-out) .5s;
}
.mob-menu.open .mob-footer{opacity:1;transform:translateY(0)}

.mob-meta{display:flex;gap:20px;flex-wrap:wrap}
.mob-meta-link{
  display:inline-flex;align-items:center;gap:7px;
  font-size:14px;color:var(--fg-2);
  transition:color .2s var(--ease);
}
.mob-meta-link:hover{color:var(--fg)}

.mob-ig{
  display:inline-flex;align-items:center;gap:9px;
  font-size:15px;font-weight:500;color:var(--fg-2);
  transition:color .2s var(--ease);
}
.mob-ig:hover{color:var(--fg)}
.mob-ig svg{flex-shrink:0}

.ms-success-sub{font-size:.85em;opacity:.65;margin-top:6px}

.mob-copy{font-size:12px;color:var(--fg-3)}

/* Verhindert Body-Scroll wenn Menü offen */
body.mob-open{overflow:hidden}

/* ============ HERO — Vollbild Parallax ============ */
.hero-full{
  position:relative;
  height:100svh;
  overflow:hidden;
  background:var(--bg);
  padding:0 !important; /* override section padding var */
}
html[data-theme="light"] .hero-full{background:#fff}
.hero-bg{position:absolute;inset:0;z-index:0}

/* v7: fwn.-Watermark hinter Team-Foto (gigantischer Brand-Schriftzug) */
.hero-watermark{
  position:absolute;left:0;right:0;top:38%;
  transform:translateY(-50%);
  display:flex;align-items:center;justify-content:center;
  z-index:1;pointer-events:none;
  user-select:none;
  opacity:0;
  animation: wm-intro 1.0s var(--ease-out) .1s forwards;
}
.hero-watermark-text{
  font-size:min(44vw,82vh);
  font-weight:800;letter-spacing:-0.07em;line-height:1;
  padding:0 0.06em; /* schützt vor Beschnitt der Punkt-Punktuation */
  background:linear-gradient(90deg,var(--green-700) 0%,var(--green-300) 100%);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
  opacity:.18;white-space:nowrap;
}
html[data-theme="light"] .hero-watermark-text{opacity:.12}

/* Headline-Block: z-index 2 — hinter dem Bild, JS übernimmt parallax */
.hero-content{
  position:absolute;
  top:clamp(90px, 17vh, 155px);left:0;right:0;
  z-index:2;
  text-align:center;
  padding:0 32px;
  will-change:transform,opacity;
}

/* Logo statt Eyebrow-Text */
.hero-logo-wrap{margin-bottom:20px;display:flex;justify-content:center;
  opacity:0;animation: rise .7s var(--ease-out) .05s forwards;}
.hero-logo{height:28px;width:auto;display:block}
.hero-logo-dark{display:block}
.hero-logo-light{display:none}
html[data-theme="light"] .hero-logo-dark{display:none}
html[data-theme="light"] .hero-logo-light{display:block}

/* Legacy eyebrow (Unterseiten) */
.hero-eyebrow{
  font-size:14px;font-weight:500;color:var(--green-300);
  letter-spacing:0.02em;display:block;margin-bottom:18px;
  opacity:0;animation: rise .8s var(--ease-out) .1s forwards;
}
.hero-headline{
  font-size:clamp(64px, 10.5vw, 138px);font-weight:700;line-height:1.0;
  letter-spacing:-0.048em;color:var(--fg);
  opacity:0;animation: rise 1s var(--ease-out) .2s forwards;
  will-change:transform,opacity;
}
.hero-digital{color:var(--fg)} /* weiß, kein Gradient */

/* Team-Foto: vertikal zentriert im Hero, z-index 3 — vor der Headline */
.hero-team{
  position:absolute;
  top:42%;left:50%;
  transform:translate(-50%, -54%);   /* nach oben verschoben: mehr schwarzer Bereich unter dem Bild */
  z-index:3;
  width:min(1200px, 100vw);
  pointer-events:none;
  opacity:0;
  animation: photo-fadein .5s var(--ease-out) .15s forwards;
}
.hero-team-img{width:100%;display:block;object-fit:contain}
.hero-team-dark{display:block}
.hero-team-light{display:none}
html[data-theme="light"] .hero-team-dark{display:none}
html[data-theme="light"] .hero-team-light{display:block}

/* Gradient am unteren Rand: macht den Untertitel lesbar */
.hero-bottom-fade{
  position:absolute;bottom:0;left:0;right:0;
  height:280px;
  z-index:3;                                       /* gleiche Ebene wie Bild */
  background:linear-gradient(to top,
    color-mix(in oklab, var(--bg) 95%, transparent) 0%,
    color-mix(in oklab, var(--bg) 50%, transparent) 55%,
    transparent 100%);
  pointer-events:none;
}

/* Untertitel + CTAs: ganz unten, vor Gradient + Bild */
.hero-bottom{
  position:absolute;
  bottom:0;left:0;right:0;
  z-index:4;                                       /* über allem */
  text-align:center;
  padding:0 32px clamp(52px,8vh,96px);
}
.hero-sub-title{
  font-size:clamp(20px,2.6vw,36px);font-weight:600;letter-spacing:-0.03em;
  color:var(--fg);margin-bottom:22px;
  opacity:0;animation: rise-blur .6s var(--ease-out) .4s forwards;
}
.hero-tagline{
  font-size:clamp(13px,1.1vw,16px);font-weight:400;letter-spacing:0.01em;
  color:var(--fg-2);margin-top:-14px;margin-bottom:22px;
  opacity:0;animation: rise .5s var(--ease-out) .55s forwards;
}
.hero-ctas{
  display:flex;gap:14px;flex-wrap:wrap;align-items:center;justify-content:center;
  opacity:0;animation: rise .5s var(--ease-out) .65s forwards;
}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@keyframes rise-blur{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}
@keyframes wm-intro{0%{opacity:0;transform:translateY(-28%) scale(1.09)}100%{opacity:1;transform:translateY(-50%) scale(1)}}
@keyframes photo-fadein{from{opacity:0}to{opacity:1}}

/* Mobile: Komposition höher/mittiger + fwn passend eingepasst */
@media (max-width:600px){
  /* Punkt weglassen → "fwn" ist schmaler, dadurch passen größere Glyphen rein.
     "fwn" ohne Punkt ≈ 1.9× font-size breit → 50vw füllt ~95vw mit Sicherheitsrand. */
  .hero-wm-dot{display:none}
  .hero-watermark-text{font-size:min(50vw,62vh);opacity:.18}
  html[data-theme="light"] .hero-watermark-text{opacity:.12}
  /* Schriftzug höher positioniert: ragt hinter/über den Köpfen heraus (top:40% statt 50%) */
  .hero-watermark{top:30%}
  /* Team-Foto höher positionieren */
  .hero-team{top:38%;transform:translate(-50%,-58%)}
  /* Text + Button: etwas weiter unten, aufgeweitet für mehr Fläche */
  .hero-bottom{bottom:auto;top:56%;transform:none;padding:0 28px}
  .hero-bottom-fade{height:70%}
  .hero-sub-title{font-size:clamp(22px,6.2vw,30px);line-height:1.15;margin-bottom:30px}
  .hero-tagline{margin-top:-4px;margin-bottom:30px}
  .btn.lg{padding:18px 36px;font-size:16px}
}

/* Legacy .hero (Unterseiten) */
.hero{padding:180px 0 80px}
.hero-inner{max-width:1200px;margin:0 auto;padding:0 32px}
.eye{font-size:13px;font-weight:500;color:var(--fg-2);margin-bottom:18px;display:inline-block;opacity:0;animation: rise .9s var(--ease-out) .1s forwards}
.hero h1{
  font-size:clamp(54px, 8vw, 104px);font-weight:700;line-height:1.04;letter-spacing:-0.045em;
  max-width:14ch;
  opacity:0;animation: rise 1s var(--ease-out) .25s forwards;
}
.hero h1 .grad, .grad{background: var(--grad-brand);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-sub{margin-top:22px;font-size:clamp(17px,1.6vw,21px);color:var(--fg-2);max-width:46ch;line-height:1.45;opacity:0;animation: rise 1s var(--ease-out) .4s forwards}

/* ============ SECTION HEAD ============ */
.sec-head{margin-bottom:56px}
.sec-eye{font-size:13px;font-weight:500;color:var(--fg-2);margin-bottom:14px;display:block;letter-spacing:0}
/* ── Globale Heading-Hierarchie ──────────────────────────────────────
   h2 (Sektions-Überschriften): immer gleich groß, klar größer als h3.
   h3 (Subsektions-/Element-Überschriften): immer gleich groß, immer < h2.
   Ausnahme: dekorative h3 (proc-stop, scroll-card) dürfen größer sein,
   müssen aber per Desktop-Wert trotzdem < h2-Maximum bleiben.
   ──────────────────────────────────────────────────────────────────── */
:root{
  --fwn-h2: clamp(28px, 3.2vw, 42px);   /* h2 Sektionen */
  --fwn-h3: clamp(17px, 1.8vw, 22px);   /* h3 Standard-Subsektionen */
}

.sec-title{
  font-size:var(--fwn-h2);font-weight:700;letter-spacing:-0.035em;line-height:1.08;
}
/* v7: plain-Variante (kein Gradient, reines fg) für minimalistische Heading-Einzeiler */
.sec-title-plain, .sec-title.sec-title-plain{color:var(--fg);background:none;-webkit-text-fill-color:initial}
.sec-title-plain .grad{background:none;-webkit-background-clip:initial;background-clip:initial;color:inherit;-webkit-text-fill-color:inherit}

/* ============ BUTTONS ============ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:11px 22px;border-radius:980px;font-size:14px;font-weight:500;letter-spacing:-0.005em;
  /* Ruhiger Hover wie die Projekte-Branchen-Tabs: kein Anheben, kein Schatten */
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
  white-space:nowrap;
}
.btn .arr{transition:transform .25s var(--ease);display:inline-block}
.btn:hover .arr{transform:translateX(3px)}
/* Solide Primär-Buttons: dezent abdunkeln statt anheben */
.btn.primary{background:var(--fg);color:var(--bg)}
.btn.primary:hover{background:color-mix(in oklab, var(--fg) 86%, var(--bg))}
/* Outline-Buttons: Hintergrund + Rahmen leicht aufhellen (wie die Tabs) */
.btn.outline{background:transparent;color:var(--fg);border:1px solid var(--line-2)}
.btn.outline:hover{background:color-mix(in oklab, var(--fg) 8%, transparent);border-color:var(--fg)}
.btn.green{background:var(--green-500);color:#fff}
.btn.green:hover{background:var(--green-400)}
.btn.lg{padding:14px 28px;font-size:15px}
.btn.sm{padding:8px 16px;font-size:13px}
.lnk{
  color:var(--green-300);font-size:14px;font-weight:400;display:inline-flex;align-items:center;gap:2px;
  transition:opacity .2s var(--ease);
}
html[data-theme="light"] .lnk{color:var(--green-500)}
.lnk::after{content:" ›";display:inline-block;margin-left:2px;transition:transform .25s var(--ease)}
.lnk:hover::after{transform:translateX(3px)}
.lnk.lg{font-size:15px}
/* ============ CARDS ============ */
.b-card{
  background:var(--surface);border-radius:24px;padding:36px 32px;
  display:flex;flex-direction:column;position:relative;overflow:hidden;
  transition: transform .4s var(--ease-out);
  border:1px solid var(--line);
}
.b-card:hover{transform:translateY(-3px)}
.b-card .b-title{font-size:22px;font-weight:600;letter-spacing:-0.02em;line-height:1.2;text-align:center;margin-top:auto;margin-bottom:8px}
.b-card .b-icon-wrap{flex:1;display:flex;align-items:center;justify-content:center;min-height:140px}
.b-card.wide{grid-column:span 2}
.b-card.wide .b-inner{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:center;height:100%}
.b-card.wide .b-title{text-align:left;margin:0 0 10px}
@media (max-width:600px){.b-card.wide{grid-column:span 1}.b-card.wide .b-inner{grid-template-columns:1fr;gap:20px}}
.b-icon-corner{
  position:absolute;top:28px;left:28px;width:44px;height:44px;border-radius:50%;
  border:1px solid var(--line-2);display:flex;align-items:center;justify-content:center;color:var(--fg-2);
}
.b-icon-corner svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}

/* ============ STATS ============ */
.num-wrap{position:relative;display:inline-block;padding:18px 38px}
.num{font-size:54px;font-weight:600;letter-spacing:-0.04em;line-height:1}
.ellipse{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.ellipse path{fill:none;stroke:var(--fg-2);stroke-width:1.4;opacity:.55;stroke-dasharray:480;stroke-dashoffset:480}
.reveal.in .ellipse path{animation: draw 2.4s var(--ease-out) .3s forwards}
@keyframes draw{to{stroke-dashoffset:0}}

.ts-body{font-size:17px;font-weight:400;line-height:1.5;letter-spacing:-0.012em}


/* ============ GALLERY SLIDER ============ */
.gal-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:40px;gap:32px;flex-wrap:wrap}
.gal-head .left{flex:1}
.gal-card{
  flex:0 0 360px;background:var(--surface);border:1px solid var(--line);
  border-radius:24px;overflow:hidden;display:flex;flex-direction:column;
  transition: transform .4s var(--ease-out), border-color .3s var(--ease);
}
.gal-card:hover{transform:translateY(-4px);border-color:var(--line-2)}
.gal-card .img{aspect-ratio:4/3;position:relative;background:linear-gradient(135deg, var(--surface-2), #000);overflow:hidden}
.gal-card .img img{width:100%;height:100%;object-fit:cover}
.gal-card .img .num{position:absolute;top:18px;left:20px;font-size:13px;font-weight:500;color:#fff;letter-spacing:-0.005em}
.gal-card .img .lbl{position:absolute;bottom:18px;left:20px;font-size:11px;font-weight:500;color:rgba(255,255,255,.7);letter-spacing:0.04em;text-transform:uppercase}
.gal-card .body{padding:24px;display:flex;flex-direction:column;gap:8px;flex:1}
.gal-card .body h4{font-size:20px;font-weight:600;letter-spacing:-0.02em;line-height:1.25}
.gal-card .body p{font-size:14px;color:var(--fg-2);line-height:1.45;margin-top:auto}

/* ============ FORM ============ */
.field{display:flex;flex-direction:column;gap:8px}
.field label{font-size:12px;color:var(--fg-2);font-weight:500}
.field input, .field textarea, .field select{
  background:transparent;border:0;border-bottom:1px solid var(--line-2);
  padding:10px 0;color:var(--fg);font-size:17px;font-family:var(--font);
  transition:border-color .25s var(--ease);
}
.field input:focus, .field textarea:focus, .field select:focus{outline:none;border-bottom-color:var(--fg)}
.field.full{grid-column:1 / -1}
.field textarea{resize:vertical;min-height:80px}
.field .help{font-size:12px;color:var(--fg-3)}
.field select{appearance:none}

/* ============ MULTI-STEP FORM ============ */
.ms-card{background:var(--surface);border:1px solid var(--line);border-radius:32px;padding:48px;overflow:hidden}
@media (max-width:720px){.ms-card{padding:28px}}
.ms-steps{display:flex;align-items:center;gap:14px;margin-bottom:48px}
.ms-step{display:flex;align-items:center;gap:10px;opacity:.4;transition:opacity .3s var(--ease);cursor:pointer}
.ms-step.active, .ms-step.done{opacity:1}
.ms-num{
  width:30px;height:30px;border-radius:50%;border:1px solid var(--line-2);
  display:inline-flex;align-items:center;justify-content:center;font-size:13px;font-weight:500;
  transition: background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
}
.ms-step.active .ms-num{background:var(--fg);color:var(--bg);border-color:transparent}
.ms-step.done .ms-num{background:var(--green-500);color:#fff;border-color:transparent}
.ms-label{font-size:13px;font-weight:500;letter-spacing:-0.005em}
.ms-line{flex:1;height:1px;background:var(--line)}
@media (max-width:720px){.ms-label{display:none}}
.ms-pane{display:none;animation: pane-in .5s var(--ease-out)}
.ms-pane.active{display:block}
@keyframes pane-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.ms-q{font-size:32px;font-weight:600;letter-spacing:-0.025em;margin-bottom:32px;line-height:1.2}
.ms-fields{display:grid;grid-template-columns:1fr 1fr;gap:24px}
@media (max-width:720px){.ms-fields{grid-template-columns:1fr}.ms-q{font-size:24px}}
.ms-chips{display:flex;gap:10px;flex-wrap:wrap}
.ms-chip{
  background:transparent;border:1px solid var(--line-2);color:var(--fg);
  padding:10px 18px;border-radius:999px;font-size:14px;font-weight:500;
  transition: all .2s var(--ease);
}
.ms-chip:hover{background:color-mix(in oklab, var(--fg) 6%, transparent)}
.ms-chip.on{background:var(--green-500);color:#fff;border-color:transparent}
.ms-check{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--fg-2);cursor:pointer}
.ms-check input{accent-color:var(--green-500);width:16px;height:16px}
.ms-footer{margin-top:48px;display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:24px}
.ms-progress{display:flex;flex-direction:column;gap:8px;flex:1;min-width:200px}
.ms-counter{font-size:12px;color:var(--fg-2);font-weight:500}
.ms-counter b{color:var(--fg);font-weight:600}
.ms-bar{height:3px;background:var(--line);border-radius:2px;overflow:hidden;width:200px;max-width:100%}
.ms-bar-fill{height:100%;background:var(--grad-brand);width:33%;transition:width .5s var(--ease-out)}
.ms-actions{display:flex;gap:10px}
.ms-success{text-align:center;padding:24px 0}
.ms-success h3{font-size:32px;font-weight:600;letter-spacing:-0.025em;margin-bottom:12px}
.ms-success p{color:var(--fg-2);font-size:15px}


/* ============ CTA ============ */
.cta-card{
  position:relative;background:var(--surface);border:1px solid var(--line);
  border-radius:24px;padding:clamp(48px,7vh,96px) clamp(28px,5vw,64px);text-align:left;overflow:hidden;
}

/* Dani & Ferdi Foto — nur Desktop */
.cta-photo{ display:none; }

@media (min-width:721px){
  /* Card wird zum Flex-Container: Text links, Bild rechts */
  .cta-card{
    display:flex;
    align-items:flex-end;
    gap:0;
    padding-right:0;        /* rechts kein Padding — Bild geht bis zum Rand */
    overflow:hidden;
  }
  .cta-card-content{
    flex:1 1 0;
    min-width:0;
    align-self:center;
    position:relative;z-index:2;
    padding-right:clamp(24px,4vw,56px); /* Abstand zum Bild */
  }
  .cta-photo{
    display:block;
    flex:0 0 42%;
    width:42%;
    height:auto;
    max-height:115%;
    object-fit:contain;
    object-position:bottom center;
    align-self:flex-end;
    pointer-events:none;
    user-select:none;
    transform:scale(1.28) translateX(-12%);
    transform-origin:bottom center;
    margin-bottom:calc(-1 * clamp(48px,7vh,96px));
  }
}
.cta-card::before{
  content:"";position:absolute;inset:0;
  background: radial-gradient(600px 400px at 50% 100%, rgba(33,135,74,.22), transparent 70%);
  pointer-events:none;
}
.cta-card > *{position:relative;z-index:1}
.cta-card-content{position:relative;z-index:2}
.cta-lead{font-size:15px;line-height:1.55;color:var(--fg-2);max-width:46ch;margin:18px 0 0}
.cta-sub{font-size:15px;line-height:1.55;color:var(--fg-2);max-width:46ch;margin:18px 0 0}
.cta-card-content{text-align:left}
.cta-card-content .cta-actions{justify-content:flex-start;margin-top:32px}
.cta-title{font-size:clamp(24px,3vw,40px);font-weight:700;letter-spacing:-0.035em;line-height:1.08;margin-top:0}
.cta-actions{margin-top:36px;display:flex;gap:18px;justify-content:center;align-items:center;flex-wrap:wrap}

/* Variante mit Hintergrundbild — heller Vordergrund, dunkler Overlay */
.cta-card-bg{
  background-size:cover;
  background-position:center 22%;   /* Gesichter im Bild sichtbar halten */
  background-repeat:no-repeat;
  border-color:transparent;
}
.cta-card-bg::before{
  background:radial-gradient(800px 500px at 50% 110%, rgba(33,135,74,.45), transparent 70%);
}
.cta-card-overlay{
  position:absolute;inset:0;
  background:
    linear-gradient(180deg, rgba(10,15,12,.55) 0%, rgba(10,15,12,.7) 55%, rgba(10,15,12,.85) 100%);
  z-index:1;
}
.cta-card-bg .cta-title{color:#fff;text-shadow:0 2px 24px rgba(0,0,0,.35)}
.cta-card-bg .cta-lead{color:rgba(255,255,255,.85)}
.cta-card-bg .eyebrow{color:var(--green-200)}

@media (max-width:720px){
  .cta-card{padding:56px 22px;border-radius:24px}
  .cta-title{font-size:clamp(32px,9vw,46px);letter-spacing:-0.035em;line-height:1.08}
  .cta-lead{font-size:14px;margin-top:18px}
  .cta-actions{margin-top:28px;width:100%}
  .cta-actions .btn{width:100%;justify-content:center}
}

/* ============ FOOTER ============ */
footer{padding:96px 0 48px;border-top:1px solid var(--line);text-align:left}
.ft-top{display:grid;grid-template-columns:1.4fr 2fr;gap:64px;padding-bottom:64px;border-bottom:1px solid var(--line)}
@media (max-width:820px){.ft-top{grid-template-columns:1fr;gap:48px}}
.ft-tag{font-size:14px;color:var(--fg-2);line-height:1.5;margin:18px 0 24px;max-width:32ch}
.ft-contact{display:flex;flex-direction:column;gap:6px;margin:0 0 24px;font-style:normal}
.ft-contact a,.ft-contact span{font-size:14px;color:var(--fg-2);line-height:1.5;text-decoration:none;transition:color .2s var(--ease)}
.ft-contact a:hover{color:var(--fg)}
.ft-social{display:flex;gap:8px}
.ft-social-btn{
  width:36px;height:36px;border-radius:50%;border:1px solid var(--line-2);
  display:inline-flex;align-items:center;justify-content:center;color:var(--fg-2);
  transition: all .2s var(--ease);
}
.ft-social-btn:hover{background:var(--surface);color:var(--fg);border-color:var(--fg-2)}
.ft-social-btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.ft-cols{display:grid;grid-template-columns:repeat(2,1fr);gap:32px}

/* SEO-Linkleiste — zwischen Hauptfooter und Copyright */
.ft-seo{padding:28px 0;border-top:1px solid var(--line)}
.ft-seo-grid{display:flex;flex-wrap:wrap;gap:5px 22px;list-style:none}
.ft-seo-grid li a{
  font-size:11.5px;color:var(--fg-2);opacity:.8; /* .5→.8: WCAG-AA-Kontrast (~5:1 auf Schwarz) */
  text-decoration:none;white-space:nowrap;
  transition:opacity .18s var(--ease);
}
.ft-seo-grid li a:hover{opacity:1}
/* Footer-Spalten-Titel: kein Heading-Tag mehr (kein SEO-Gewicht), aber selbes Styling */
.ft-col h5,.ft-col-head{font-size:12px;font-weight:600;letter-spacing:0.04em;text-transform:uppercase;color:var(--fg-2);margin-bottom:18px}
.ft-col ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.ft-col ul li{font-size:14px;color:var(--fg)}
.ft-col ul li a{color:inherit;opacity:.85;transition:opacity .2s var(--ease)}
.ft-col ul li a:hover{opacity:1}
.ft-bottom{padding-top:20px;border-top:1px solid var(--line);display:flex;justify-content:center;gap:8px;align-items:center;flex-wrap:wrap;font-size:12px;color:var(--fg-2)}
.ft-bottom .ft-dot{color:var(--line-2)}
.ft-bottom a{color:inherit;opacity:.85}
.ft-bottom a:hover{opacity:1}

/* ============ GEO: KI-Chat Tablet ============ */
.geo-chat-sec{padding:clamp(40px,6vh,80px) 0 0}
.geo-chat-sec + .l-problem{padding-top:clamp(20px,3vh,36px)}

/* Scroll-Track: genug Höhe für Tilt-Animation */
.geo-scroll-outer{position:relative;min-height:190vh}
.geo-scroll-inner{
  position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(18px,2.5vh,32px);
  padding:clamp(48px,7vh,88px) clamp(12px,3vw,40px) clamp(32px,4vh,56px);
}
/* Tablet-Stage: erhält den 3D-Transform via JS */
.geo-tablet-stage{
  width:100%;max-width:1100px;
  transform-origin:center top;
  will-change:transform;
  transform:perspective(1200px) rotateX(22deg) scale(.88); /* JS-Startposition */
}

/* Gerät-Rahmen */
.geo-tablet{
  background:#1a1a1a;
  border-radius:14px;
  overflow:hidden;
  box-shadow:
    0 0 0 1px #383838,
    0 24px 56px rgba(0,0,0,.75),
    0 8px 18px rgba(0,0,0,.5);
}

/* Browser-Leiste */
.geo-tablet-bar{
  background:#2b2b2b;
  height:40px;
  display:flex;
  align-items:center;
  padding:0 14px;
  gap:10px;
  border-bottom:1px solid #383838;
  flex-shrink:0;
}
.geo-tab-dots{display:flex;gap:6px;flex-shrink:0}
.geo-tab-dots i{display:block;width:11px;height:11px;border-radius:50%;background:#444}
.geo-tab-dots i:nth-child(1){background:#ff5f57}
.geo-tab-dots i:nth-child(2){background:#ffbd2e}
.geo-tab-dots i:nth-child(3){background:#28c840}
.geo-tab-url{
  flex:1;max-width:280px;margin:0 auto;
  background:#3a3a3a;border-radius:6px;
  height:26px;display:flex;align-items:center;
  padding:0 10px;gap:5px;
  font-size:11px;color:#999;letter-spacing:0;
  font-family:ui-monospace,monospace;
}
.geo-tab-url svg{width:11px;height:11px;flex-shrink:0;opacity:.6}
.geo-tab-spacer{flex-shrink:0;width:66px} /* Balance left/right */

/* Screen-Bereich */
.geo-tablet-screen{
  display:flex;
  height:clamp(420px,54vh,620px);
  overflow:hidden;
}

/* Sidebar (ChatGPT-Stil) */
.geo-chat-sidebar{
  width:220px;flex-shrink:0;
  background:#171717;
  border-right:1px solid #2a2a2a;
  display:flex;flex-direction:column;
  padding:12px 10px;
  gap:6px;
  overflow:hidden;
}
.geo-sidebar-model{
  display:flex;align-items:center;gap:8px;
  padding:8px 10px;border-radius:8px;
  font-size:13px;font-weight:600;color:#ececec;
  margin-bottom:4px;
}
.geo-sidebar-model svg{width:20px;height:20px;flex-shrink:0}
.geo-sidebar-new{
  display:flex;align-items:center;gap:8px;
  padding:8px 10px;border-radius:8px;
  font-size:12px;color:#aaa;cursor:pointer;
  background:transparent;
  border:1px solid #333;
  margin-bottom:8px;
}
.geo-sidebar-new svg{width:14px;height:14px;opacity:.7}
.geo-hist-label{font-size:10px;color:#666;padding:4px 10px;letter-spacing:.05em;text-transform:uppercase}
.geo-hist-item{
  padding:7px 10px;border-radius:8px;
  font-size:12px;color:#888;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  cursor:default;
}
.geo-hist-item.active{background:#2a2a2a;color:#ececec}

/* Haupt-Chat-Bereich */
.geo-chat-main{
  flex:1;background:#212121;
  display:flex;flex-direction:column;
  overflow:hidden;
}
.geo-chat-messages{
  flex:1;overflow-y:auto;
  padding:clamp(16px,2.5vh,28px) clamp(16px,3vw,32px);
  display:flex;flex-direction:column;
  gap:20px;
  scrollbar-width:thin;
  scrollbar-color:#383838 transparent;
}

/* User-Nachricht */
.geo-msg-user{display:flex;justify-content:flex-end}
.geo-msg-bubble{
  background:#2f2f2f;
  border-radius:18px 18px 4px 18px;
  padding:10px 15px;
  max-width:72%;
  font-size:13px;line-height:1.55;color:#ececec;
}

/* KI-Antwort */
.geo-msg-ai{display:flex;gap:10px;align-items:flex-start}
.geo-msg-avatar{
  width:26px;height:26px;border-radius:50%;
  background:linear-gradient(135deg,#19c37d,#0ea569);
  flex-shrink:0;margin-top:2px;
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:700;color:#fff;
  letter-spacing:-0.02em;
}
.geo-msg-content{
  flex:1;
  font-size:13px;line-height:1.65;color:#d4d4d4;
}
.geo-msg-content p{margin:0 0 8px}
.geo-msg-content p:last-child{margin:0}
.geo-msg-content strong{color:#ececec;font-weight:600}
.geo-msg-content ul{
  margin:6px 0 8px 0;padding:0;
  list-style:none;display:flex;flex-direction:column;gap:4px;
}
.geo-msg-content ul li{
  display:flex;gap:6px;align-items:flex-start;font-size:12px;
}
.geo-msg-content ul li::before{
  content:"";display:block;width:4px;height:4px;
  border-radius:50%;background:#19c37d;
  margin-top:6px;flex-shrink:0;
}
.geo-msg-content .geo-highlight{
  display:inline-block;
  background:rgba(25,195,125,.15);
  border:1px solid rgba(25,195,125,.35);
  border-radius:4px;
  padding:1px 5px;
  color:#19c37d;
  font-weight:700;font-size:inherit;
}
/* Blinkendes Cursor am Ende der KI-Antwort */
.geo-cursor{
  display:inline-block;width:2px;height:13px;
  background:#ececec;margin-left:2px;
  vertical-align:text-bottom;
  animation:geoBlink 1.1s step-end infinite;
}
@keyframes geoBlink{0%,100%{opacity:1}50%{opacity:0}}

/* Chat-Input-Leiste (dekorativ) */
.geo-chat-input{
  flex-shrink:0;
  margin:8px clamp(16px,3vw,32px) 12px;
  background:#2f2f2f;border-radius:12px;
  height:40px;display:flex;align-items:center;
  padding:0 14px;gap:10px;
  border:1px solid #3a3a3a;
}
.geo-chat-input span{font-size:12px;color:#555;flex:1}
.geo-chat-input svg{width:16px;height:16px;color:#555}

/* Responsive: Sidebar verstecken — Scroll-Tilt bleibt aktiv (wie Desktop) */
@media(max-width:760px){
  .geo-chat-sidebar{display:none}
  .geo-scroll-inner{padding:clamp(40px,8vh,64px) clamp(12px,4vw,24px) clamp(24px,4vh,40px)}
  .geo-tablet-screen{height:clamp(320px,72vw,440px)}
}
@media(max-width:480px){
  .geo-msg-bubble{max-width:88%}
}

/* ── Wartung & Pflege: Care-Monitoring-Dashboard (Tablet-Screen) ── */
.geo-tablet-screen.wp-dash{
  display:flex;flex-direction:column;gap:13px;
  background:#0e1411;
  height:clamp(460px,58vh,600px);
  padding:clamp(16px,2.4vh,26px) clamp(16px,3vw,30px);
}
.wpd-top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.wpd-title{display:flex;flex-direction:column;gap:7px}
.wpd-site{font-size:15px;font-weight:700;color:#fff;letter-spacing:-0.01em}
.wpd-status{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:#86dba8}
.wpd-pulse{width:8px;height:8px;border-radius:50%;background:#2fcf6f;flex-shrink:0;
  box-shadow:0 0 0 0 rgba(47,207,111,.55);animation:wpdPulse 2.1s ease-out infinite}
@keyframes wpdPulse{0%{box-shadow:0 0 0 0 rgba(47,207,111,.5)}70%{box-shadow:0 0 0 9px rgba(47,207,111,0)}100%{box-shadow:0 0 0 0 rgba(47,207,111,0)}}
@media(prefers-reduced-motion:reduce){.wpd-pulse{animation:none}}
.wpd-uptime{display:flex;flex-direction:column;gap:2px;text-align:right;flex-shrink:0}
.wpd-uptime-val{font-size:22px;font-weight:800;color:#fff;letter-spacing:-0.02em;line-height:1}
.wpd-uptime-lbl{font-size:10px;color:#7d8f84;text-transform:uppercase;letter-spacing:.06em}

.wpd-chart{background:#131b16;border:1px solid #213029;border-radius:12px;padding:11px 14px;display:flex;flex-direction:column;gap:9px}
.wpd-chart-head{display:flex;align-items:center;justify-content:space-between;font-size:11px;color:#9bb0a4}
.wpd-chart-badge{font-size:11px;font-weight:700;color:#08110b;border-radius:999px;padding:2px 9px;
  background:linear-gradient(90deg,#54d791,#2fb069)}
.wpd-spark{width:100%;height:58px;display:block}
.wpd-spark-fill{fill:rgba(47,207,111,.15)}
.wpd-spark-line{fill:none;stroke:#48d68d;stroke-width:2;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round}

.wpd-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.wpd-tile{background:#131b16;border:1px solid #213029;border-radius:11px;padding:11px 12px;display:flex;flex-direction:column;gap:3px}
.wpd-ic{width:28px;height:28px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;
  background:rgba(47,207,111,.14);color:#4fd68f;margin-bottom:4px}
.wpd-ic svg{width:16px;height:16px}
.wpd-tile b{font-size:12px;color:#eaf3ed;font-weight:600;letter-spacing:-0.01em}
.wpd-tile small{font-size:10px;color:#7d8f84}

.wpd-log{background:#131b16;border:1px solid #213029;border-radius:12px;padding:4px 14px 8px}
.wpd-log-head{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:#7d8f84;padding:11px 0 4px}
.wpd-log-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px solid #1b2620;font-size:12px;color:#cbd8d1}
.wpd-log-row i{width:7px;height:7px;border-radius:50%;background:#2fcf6f;flex-shrink:0}
.wpd-log-row time{margin-left:auto;font-size:10.5px;color:#728479;white-space:nowrap}

/* Light-Mode */
html[data-theme="light"] .geo-tablet-screen.wp-dash{background:#eef4f0}
html[data-theme="light"] .wpd-site,html[data-theme="light"] .wpd-uptime-val{color:#0e1f16}
html[data-theme="light"] .wpd-chart,
html[data-theme="light"] .wpd-tile,
html[data-theme="light"] .wpd-log{background:#fff;border-color:rgba(0,0,0,.07)}
html[data-theme="light"] .wpd-tile b{color:#16271d}
html[data-theme="light"] .wpd-log-row{color:#2c3a32;border-top-color:rgba(0,0,0,.06)}

@media(max-width:760px){
  .geo-tablet-screen.wp-dash{height:auto;min-height:0;gap:10px;padding:14px}
  .wpd-tiles{grid-template-columns:repeat(2,1fr)}
  .wpd-uptime-val{font-size:18px}
  .wpd-spark{height:46px}
  .wpd-site{font-size:14px}
}
/* Wartung & Pflege Mobile: Tilt-Animation bleibt, Dashboard kompakter */
@media(max-width:520px){
  /* Log-Einträge ausblenden – spart ~70px Höhe, Dashboard passt in 100vh */
  .wp-care-sec .wpd-log{display:none}
  /* Engere Innenabstände */
  .wp-care-sec .geo-tablet-screen.wp-dash{gap:8px;padding:12px}
  /* Mehr Top-Padding: der nach vorne gekippte obere Rand clippt sonst am Container */
  .wp-care-sec .geo-scroll-inner{padding-top:clamp(72px,12vh,96px);gap:12px}
}

/* ── Branding: Moodboard-Tablet (Scroll-Tilt, identisch zu GEO) ── */
.bm-tablet-sec{padding:clamp(40px,6vh,80px) 0 0}
.bm-tablet-sec + .l-problem{padding-top:clamp(20px,3vh,36px)}
.bm-scroll-outer{position:relative;min-height:190vh}
.bm-scroll-inner{
  position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(20px,3vh,36px);
  padding:clamp(48px,7vh,88px) clamp(12px,3vw,40px) clamp(32px,4vh,56px);
}
.bm-tablet-stage{
  width:100%;max-width:1100px;
  transform-origin:center top;
  will-change:transform;
  transform:perspective(1200px) rotateX(22deg) scale(.88);
}
/* Mobile: Scroll-Tilt bleibt aktiv (wie GEO) */
@media(max-width:680px){
  .bm-scroll-inner{padding:clamp(40px,8vh,64px) clamp(12px,4vw,24px) clamp(24px,4vh,40px)}
  .geo-tablet-screen.bm-screen{grid-template-columns:1fr;height:clamp(320px,72vw,440px)}
  .bm-sidebar{display:none}
}

/* Screen override: sidebar-panel + moodboard-canvas */
.geo-tablet-screen.bm-screen{
  display:grid;grid-template-columns:160px 1fr;
  height:clamp(380px,50vh,560px);
}

/* ── Figma-Style Sidebar ── */
.bm-sidebar{
  background:#111;border-right:1px solid #242424;
  padding:14px 12px;display:flex;flex-direction:column;gap:3px;
  overflow:hidden;
}
.bm-sb-logo{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.bm-logo-mark{
  display:inline-flex;align-items:center;justify-content:center;
  padding:5px 10px;border-radius:8px;
  background:linear-gradient(135deg,#1d5c35,#21874a);
}
.bm-logo-mark span{font-size:13px;font-weight:800;color:#fff;letter-spacing:-0.02em}
.bm-sb-check{
  width:20px;height:20px;border-radius:5px;
  background:rgba(47,207,111,.18);border:1px solid rgba(47,207,111,.35);
  display:flex;align-items:center;justify-content:center;color:#3fcf72;
}
.bm-sb-check svg{width:9px;height:9px}
.bm-section-label{
  font-size:9px;font-weight:600;letter-spacing:.07em;
  text-transform:uppercase;color:#444;margin-top:10px;padding-bottom:3px;
}
.bm-section-label:first-of-type{margin-top:0}
.bm-swatches{display:flex;gap:4px;flex-wrap:wrap;margin-top:3px}
.bm-sw{width:18px;height:18px;border-radius:4px;box-shadow:0 0 0 1px rgba(255,255,255,.07)}
.bm-sw.s1{background:#080808;border:1px solid #333}
.bm-sw.s2{background:#21874a}
.bm-sw.s3{background:#9ccf92}
.bm-sw.s4{background:#ececec}
.bm-typo-ex{margin-top:4px;font-size:20px;font-weight:700;letter-spacing:-0.03em;color:#ececec;line-height:1}
.bm-typo-body-ex{font-size:10px;color:#555;margin-top:2px}
.bm-typo-caps{font-size:9px;color:#444;letter-spacing:.06em;margin-top:1px;text-transform:uppercase}

/* Spacing Row */
.bm-spacing-row{display:flex;gap:4px;align-items:flex-end;margin-top:4px}
.bm-sp{display:block;background:#21874a;border-radius:2px;opacity:.7}
.bm-sp.sp4{width:4px;height:4px}
.bm-sp.sp8{width:8px;height:8px}
.bm-sp.sp16{width:14px;height:14px}
.bm-sp.sp32{width:20px;height:20px}

/* Status Rows */
.bm-status-row{display:flex;align-items:center;gap:6px;font-size:10px;color:#666;margin-top:4px}
.bm-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.bm-dot.ok{background:#2fcf6f}
.bm-dot.warn{background:#f59e0b}

/* ── Canvas ── */
.bm-canvas{
  background:#161616;display:flex;flex-direction:column;
  padding:12px;gap:9px;overflow:hidden;
}
.bm-canvas-top{display:flex;align-items:center;justify-content:space-between}
.bm-canvas-label{font-size:10px;color:#555;font-weight:500;letter-spacing:.04em}
.bm-canvas-actions{display:flex;align-items:center;gap:6px}
.bm-act{font-size:10px;color:#555;font-family:monospace}
.bm-act-icon{width:16px;height:16px;display:flex;align-items:center;justify-content:center;color:#555}
.bm-act-icon svg{width:10px;height:10px}

/* ── Tile-Grid ── */
.bm-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  grid-template-rows:repeat(2,1fr);gap:7px;flex:1;min-height:0;
}
.bm-tile{border-radius:9px;overflow:hidden;min-height:0;position:relative}

/* t1: Mini-Hero-Mock */
.bm-t1{background:#0a0a0a;border:1px solid #1c1c1c}
.bm-hero-mock{height:100%;display:flex;flex-direction:column;padding:8px 8px 6px;gap:4px}
.bm-hm-nav{display:flex;gap:3px;align-items:center;margin-bottom:4px}
.bm-hm-nav span{width:18px;height:4px;background:#1e1e1e;border-radius:2px}
.bm-hm-nav span:first-child{width:12px;height:12px;border-radius:4px;background:#21874a}
.bm-hm-h{height:7px;width:70%;background:#2c2c2c;border-radius:3px}
.bm-hm-sub{height:5px;width:50%;background:#1e1e1e;border-radius:2px}
.bm-hm-btn{margin-top:auto;width:28px;height:8px;background:#21874a;border-radius:3px}

/* t2: Gradient Showcase */
.bm-t2{background:linear-gradient(140deg,#0a1a0e 0%,#21874a 55%,#9ccf92 100%)}

/* t3: Brand-Zitat */
.bm-t3{
  background:radial-gradient(ellipse at 30% 50%, rgba(33,135,74,.45), #0a0a0a 75%);
  border:1px solid rgba(33,135,74,.25);
  display:flex;align-items:center;justify-content:center;
  padding:8px;
}
.bm-t3 q{
  font-size:11px;font-weight:700;font-style:italic;letter-spacing:-0.01em;
  color:#fff;text-align:center;quotes:none;line-height:1.3;
}

/* t4: Logo auf Dunkel */
.bm-t4{background:#0a0a0a;border:1px solid #1c1c1c;display:flex;align-items:center;justify-content:center}
.bm-logo-preview{display:flex;flex-direction:column;align-items:center;gap:5px}
.bm-lp-dot{width:28px;height:28px;border-radius:8px;background:linear-gradient(135deg,#1d5c35,#3fcf72)}
.bm-lp-text{font-size:10px;font-weight:800;color:#ececec;letter-spacing:-0.02em}
.bm-lp-text span{color:#3fcf72}

/* t5: Farb-Palette Diagonal */
.bm-t5{
  background:linear-gradient(160deg,#9ccf92 0%,#21874a 40%,#0e2618 100%);
  position:relative;overflow:hidden;
}
.bm-t5::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(45deg,transparent 40%,rgba(255,255,255,.08) 50%,transparent 60%);
}

/* t6: Typo-Showcase */
.bm-t6{
  background:#111;border:1px solid #1c1c1c;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
}
.bm-typo-big{font-size:38px;font-weight:800;letter-spacing:-0.05em;
  background:linear-gradient(135deg,#ececec,#9ccf92);-webkit-background-clip:text;
  background-clip:text;color:transparent;line-height:1}
.bm-typo-small{font-size:8px;color:#444;letter-spacing:.06em;text-transform:uppercase}

/* ── Wartung & Pflege: Website-Mockup + scrolladaptive Badges ── */
.wp-badge-sec{padding:clamp(56px,8vh,96px) 0;overflow:hidden}
.wp-badge-stage{position:relative;height:500px;display:flex;align-items:center;justify-content:center;--p:0}
/* Website-Mockup */
/* Wartung-Mockup — größer, theme-aware, an Bento-Visuals angelehnt */
.wp-mockup{
  position:relative;z-index:2;flex-shrink:0;
  width:min(740px,90vw);          /* größer als bisher */
  border-radius:16px;overflow:hidden;
  background:var(--surface-2);   /* CSS-Var → automatisch dark/light */
  border:1px solid var(--line-2);
  box-shadow:0 30px 80px rgba(0,0,0,.6),0 8px 22px rgba(0,0,0,.3),
             0 0 0 1px rgba(255,255,255,.06);
}
.wpm-bar{
  background:#2b2b2b;height:36px;
  display:flex;align-items:center;gap:6px;padding:0 16px;
  border-bottom:1px solid #383838;
}
.wpm-bar i{width:11px;height:11px;border-radius:50%;background:#444}
.wpm-bar i.r{background:#ff5f57}
.wpm-bar i.y{background:#ffbd2e}
.wpm-bar i.g{background:#28c840}
.wpm-url{flex:1;height:17px;background:#3a3a3a;border-radius:5px;border:1px solid #484848;margin-left:12px}
.wpm-page{padding:18px 20px 22px;background:var(--surface-2);display:flex;flex-direction:column;gap:12px}
.wpm-nav{display:flex;align-items:center;gap:12px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.wpm-logo{width:60px;height:20px;background:var(--green-500);border-radius:5px}
.wpm-link{width:44px;height:9px;background:rgba(255,255,255,.14);border-radius:5px}
.wpm-menu{margin-left:auto;width:56px;height:22px;background:var(--green-700,#1a5c32);border-radius:6px}
.wpm-hero{
  background:linear-gradient(135deg,#0a2e18 0%,#21874a 100%);
  border:1px solid rgba(33,135,74,.35);
  border-radius:10px;padding:20px 22px;
  display:flex;flex-direction:column;gap:9px;min-height:100px;
}
.wpm-h-title{width:58%;height:14px;background:rgba(255,255,255,.92);border-radius:4px}
.wpm-h-sub{width:40%;height:7px;background:rgba(255,255,255,.5);border-radius:3px}
.wpm-h-btn{width:88px;height:24px;background:#fff;border-radius:6px;margin-top:6px}
.wpm-pills{display:flex;gap:8px}
.wpm-pills span{flex:1;height:20px;background:rgba(255,255,255,.07);border-radius:6px;border:1px solid var(--line)}
.wpm-cards{display:flex;gap:8px}
.wpm-cards span{flex:1;height:26px;background:rgba(255,255,255,.06);border-radius:6px;border:1px solid var(--line)}
.wpm-cards span.g{background:rgba(33,135,74,.18);border-color:rgba(33,135,74,.3)}

/* Light Mode — zeigt sich hell */
html[data-theme="light"] .wp-mockup{
  background:#fff;border-color:rgba(0,0,0,.08);
  box-shadow:0 30px 80px rgba(0,0,0,.18),0 8px 22px rgba(0,0,0,.1);
}
html[data-theme="light"] .wpm-bar{background:#ececec;border-bottom-color:rgba(0,0,0,.07)}
html[data-theme="light"] .wpm-bar i{background:#d0d0d0}
html[data-theme="light"] .wpm-url{background:#fff;border-color:#e0e0e0}
html[data-theme="light"] .wpm-page{background:#fff}
html[data-theme="light"] .wpm-nav{border-bottom-color:rgba(0,0,0,.07)}
html[data-theme="light"] .wpm-link{background:#d8d8d8}
html[data-theme="light"] .wpm-menu{background:#0a1f12}
html[data-theme="light"] .wpm-pills span{background:#ebebeb;border-color:rgba(0,0,0,.06)}
html[data-theme="light"] .wpm-cards span{background:#ebebeb;border-color:rgba(0,0,0,.06)}
html[data-theme="light"] .wpm-cards span.g{background:#d6ebde;border-color:rgba(33,135,74,.2)}
/* Badge-Feld */
.wp-badge-field{position:absolute;inset:0;pointer-events:none}
.wp-b{
	position:absolute;left:50%;top:50%;white-space:nowrap;z-index:3;
	--tx:0px;--ty:0px;--lag:0;
	--lp:clamp(0, calc((var(--p) - var(--lag)) / 0.65), 1);
	transform:translate(-50%,-50%) translate(calc(var(--tx) * var(--lp)), calc(var(--ty) * var(--lp))) scale(calc(0.35 + 0.65 * var(--lp)));
	opacity:var(--lp);
	box-shadow:0 0 calc(6px + 14px * var(--lp)) rgba(33,135,74, calc(0.15 + 0.4 * var(--lp))), 0 2px 8px rgba(0,0,0,.35);
}
.wp-b-1{--tx:-440px;--ty:-140px;--lag:0.00}
.wp-b-2{--tx:-310px;--ty:-230px;--lag:0.03}
.wp-b-3{--tx:-100px;--ty:-255px;--lag:0.06}
.wp-b-4{--tx:130px;--ty:-255px;--lag:0.09}
.wp-b-5{--tx:320px;--ty:-215px;--lag:0.12}
.wp-b-6{--tx:435px;--ty:-80px;--lag:0.15}
.wp-b-7{--tx:410px;--ty:90px;--lag:0.18}
.wp-b-8{--tx:145px;--ty:235px;--lag:0.21}
.wp-b-9{--tx:-130px;--ty:235px;--lag:0.24}
.wp-b-10{--tx:-370px;--ty:145px;--lag:0.27}
.wp-b-11{--tx:-450px;--ty:0px;--lag:0.30}
@media(max-width:700px){
  .wp-badge-stage{height:auto;flex-direction:column;padding:0 0 32px}
  .wp-badge-field{position:static;inset:auto;display:flex;flex-wrap:wrap;gap:8px;justify-content:center;padding-top:24px;pointer-events:all}
  .wp-b{position:static;left:auto;top:auto;transform:none;opacity:1;white-space:normal;box-shadow:0 2px 8px rgba(0,0,0,.3)}
}

/* ============ FAQ ============ */
.faq-list{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-q{
  width:100%;text-align:left;display:flex;justify-content:space-between;align-items:center;
  padding:28px 0;font-size:18px;font-weight:500;letter-spacing:-0.018em;color:var(--fg);
}
.faq-q .ic{width:20px;height:20px;flex-shrink:0;color:var(--fg-2);transition:transform .3s var(--ease)}
.faq-item.open .faq-q .ic{transform:rotate(45deg)}
.faq-a{
  max-height:0;overflow:hidden;transition:max-height .4s var(--ease-out);
  color:var(--fg-2);font-size:15px;line-height:1.6;
}
.faq-item.open .faq-a{padding-bottom:28px;max-height:600px}

/* ============ REVEAL ============ */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .8s var(--ease-out), transform .8s var(--ease-out)}
.reveal.in{opacity:1;transform:translateY(0)}

/* ============ SERVICE TILES — v7.1 Scroll-Pin Horizontal ============ */
.svc-pin-sec{padding:0 !important;position:relative}
/* Höhen an svh koppeln (small viewport height): bleibt stabil, wenn auf
   Chrome-Mobile die Adressleiste ein-/ausfährt. vh = Fallback für alte Browser.
   Mit vh sprang die Section beim Scrollen, weil 100vh größer als der sichtbare
   Bereich ist, solange die URL-Leiste sichtbar ist. */
/* 320vh statt 280vh: gibt der Pin-Strecke mehr Weg, damit die Totzonen am
   Anfang/Ende (siehe services-slider.js) Platz haben, ohne dass das
   horizontale Scrubben dazwischen schneller wird. */
.svc-pin-spacer{height:320vh;height:320svh;position:relative}
.svc-pin-sticky{
  position:sticky;top:0;
  height:100vh;height:100svh;
  display:flex;flex-direction:column;
  overflow:hidden;
}
.svc-pin-head{
  padding-top:clamp(64px,10vh,120px);
  padding-bottom:clamp(24px,3vh,40px);
  padding-left:max(clamp(20px,4vw,40px), calc((100vw - 1200px) / 2 + clamp(20px,4vw,40px)));
  padding-right:clamp(20px,4vw,40px);
  flex:0 0 auto;
}
.svc-pin-head .sec-title{margin:0}
.svc-pin-viewport{
  flex:1 1 auto;
  position:relative;
  overflow:hidden;
  /* flex-start statt center: Kachel-Reihe sitzt direkt unter der Überschrift,
     statt mittig im großen Sticky-Bereich zu schweben (sonst zu großer Abstand
     zwischen „Unsere Leistungen im Überblick" und der ersten Kachel). */
  display:flex;align-items:flex-start;
  padding-top:clamp(8px,1.6vh,22px);
}
.svc-pin-rail{
  display:flex;gap:24px;
  padding-left:max(clamp(20px,4vw,40px), calc((100vw - 1200px) / 2 + clamp(20px,4vw,40px)));
  padding-right:50vw;
  will-change:transform;
  height:min(62vh,580px);
  height:min(62svh,580px);
}
.svc-tile{
  flex:0 0 min(calc((100vw - max(clamp(20px,4vw,40px), calc((100vw - 1200px) / 2 + clamp(20px,4vw,40px))) - 24px) / 1.5), 920px);
  aspect-ratio:auto;height:100%;
  border-radius:20px;overflow:hidden;
  background:var(--surface);border:1px solid var(--line);
  display:flex;flex-direction:column;justify-content:space-between;
  padding:clamp(20px,2.4vw,32px);
  text-decoration:none;color:var(--fg);
  transition:border-color .3s var(--ease-out);
}
.svc-tile:hover{border-color:color-mix(in oklab,var(--green-500) 40%,var(--line))}
html[data-theme="light"] .svc-tile{background:var(--surface);border-color:var(--line)}
html[data-theme="light"] .svc-win{background:#fff;border-color:rgba(0,0,0,.08);box-shadow:0 8px 24px rgba(0,0,0,.1)}
@media (max-width:900px){
  .svc-tile{flex-basis:74vw}
  /* Längere Pin-Strecke auf Mobile (360 statt 320svh): schafft Platz für die
     größere Anfangs-Totzone (LEAD 25 % in services-slider.js), ohne dass das
     horizontale Scrubben danach schneller wird. */
  .svc-pin-spacer{height:360vh;height:360svh}
  /* Etwas niedrigere Kachel-Reihe auf Mobile: lässt unten Platz für die
     Dots/Pfeile (die mit align-items:flex-start sonst knapp werden könnten)
     und rückt die Kacheln näher an die Überschrift. */
  .svc-pin-rail{height:min(56svh,520px)}
  /* Phone-Mockup auf Mobile ausblenden — sieht auf kleinen Screens unruhig aus */
  .svc-phone{display:none}
  .svc-viz-web{padding-bottom:0;width:100%}
  /* Browser zentriert, volle Breite der Viz */
  .svc-win{width:90%;max-width:none}
}
@media (max-width:720px){.svc-tile{flex-basis:88vw}}
.svc-tile-viz{
  flex:1;display:flex;align-items:center;justify-content:center;
  margin-bottom:18px;min-height:0;overflow:visible; /* Phone-Overlay darf herausragen */
  padding:clamp(8px,1.5vw,18px);
}
/* Apple-Style: Body-Text faded an, wenn Karte ins Zentrum kommt */
.svc-tile-body{
  display:flex;flex-direction:row;align-items:flex-end;justify-content:space-between;gap:16px;
  opacity:0;transform:translateY(14px); /* .25→0: inaktiver Body unsichtbar (WCAG-Kontrast), Fade-in bleibt */
  transition:opacity .55s cubic-bezier(.25,.46,.45,.94), transform .55s cubic-bezier(.25,.46,.45,.94);
}
.svc-tile.is-active .svc-tile-body{opacity:1;transform:translateY(0)}
.svc-tile-body-left{display:flex;flex-direction:column;gap:6px}
.svc-tile-title{font-size:clamp(18px,1.6vw,24px);font-weight:600;letter-spacing:-0.022em;line-height:1.1;margin:0;color:var(--fg)}
.svc-tile-lead{font-size:13.5px;line-height:1.5;color:var(--fg-2);margin:0;max-width:44ch}
.svc-tile-cta{font-size:13px;font-weight:500;color:var(--green-400);flex-shrink:0;white-space:nowrap;transition:transform .3s var(--ease-out)}
.svc-tile:hover .svc-tile-cta{transform:translateX(4px);color:var(--green-300)}

/* Footer: Dots linksbündig am Anker, Pfeile am rechten Viewport-Rand */
.svc-pin-foot{
  flex:0 0 auto;
  position:relative;
  display:flex;justify-content:space-between;align-items:center;
  padding:clamp(20px,3vh,40px) clamp(20px,4vw,40px) clamp(20px,3vh,40px) max(clamp(20px,4vw,40px), calc((100vw - 1200px) / 2 + clamp(20px,4vw,40px)));
}
.svc-pin-foot .dots{display:flex;gap:10px;align-items:center;background:var(--surface-2);border:1px solid var(--line);border-radius:999px;padding:8px 14px}
.svc-pin-foot .dot{
  width:7px;height:7px;border-radius:50%;background:var(--line-2,#3a3a3a);
  transition:background .25s var(--ease), width .25s var(--ease);
}
.svc-pin-foot .dot.active{background:var(--fg);width:24px;border-radius:999px}
.svc-pin-foot .gal-controls{display:flex;gap:10px}
.svc-pin-foot .gal-btn{
  width:42px;height:42px;border-radius:50%;
  background:var(--surface);border:1px solid var(--line);color:var(--fg);
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
  transition:background .25s var(--ease),border-color .25s var(--ease);
}
.svc-pin-foot .gal-btn:hover{background:var(--surface-2);border-color:var(--line-2)}
.svc-pin-foot .gal-btn:disabled{opacity:.3;cursor:not-allowed}
.svc-pin-foot .gal-btn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* ── Bento-Visuals: Inline-Styling (v7.1 — komplexer) ──────── */
.svc-viz{width:100%;height:100%;display:flex;align-items:center;justify-content:center;padding:8px}
.svc-l-w55{width:55%}.svc-l-w70{width:70%}.svc-l-w80{width:80%}.svc-l-w85{width:85%}.svc-l-w100{width:100%}

/* ── Websites-Visual: Desktop-Browser zentriert, Handy als Overlay darüber ── */
.svc-viz-web{
  position:relative;
  display:flex;align-items:flex-start;justify-content:center;
  width:100%;padding-bottom:clamp(20px,4vh,36px); /* Platz für Phone-Überlapp unten */
}
/* Browser: zentriert, vollständig sichtbar */
.svc-win{
  width:88%;max-width:560px;
  background:#111;border:1px solid #2a2a2a;border-radius:10px;overflow:hidden;
  box-shadow:0 8px 24px rgba(0,0,0,.55);
}
.svc-win-bar{height:22px;display:flex;align-items:center;gap:5px;padding:0 10px;background:#2a2a2e;border-bottom:1px solid #333}
.svc-win-bar i{width:6px;height:6px;border-radius:50%;background:#4a4a4a}
.svc-win-bar i:nth-child(1){background:#ff5f57}.svc-win-bar i:nth-child(2){background:#ffbd2e}.svc-win-bar i:nth-child(3){background:#28c840}
.svc-win-url{flex:1;margin-left:8px;height:10px;background:#333;border-radius:4px;font-size:7px;color:#b3b3b3;padding:1px 7px;line-height:1.2;border:1px solid #444}
.svc-win-nav{display:flex;align-items:center;gap:6px;padding:6px 12px;background:#111;border-bottom:1px solid #2a2a2a}
.svc-win-logo{width:34px;height:12px;background:var(--green-500);border-radius:3px;flex-shrink:0}
.svc-win-navi{width:20px;height:5px;background:#3a3a3a;border-radius:2px}
.svc-win-cta-nav{margin-left:auto;width:34px;height:12px;background:var(--green-500);border-radius:3px}
.svc-win-body{padding:0;display:flex;flex-direction:column;gap:0;background:#0d0d0d}
.svc-win-hero{height:68px;background:linear-gradient(135deg,var(--green-700),var(--green-500));padding:10px;display:flex;flex-direction:column;justify-content:center;gap:4px}
.svc-win-h1{width:60%;height:7px;background:rgba(255,255,255,.92);border-radius:3px}
.svc-win-h2{width:42%;height:5px;background:rgba(255,255,255,.55);border-radius:2px}
.svc-win-cta{width:48px;height:11px;background:#fff;border-radius:3px;margin-top:3px}
.svc-win-cards{display:flex;gap:4px;padding:8px 12px}
.svc-win-card{flex:1;aspect-ratio:1;background:#1e1e22;border-radius:3px}
.svc-win-card:nth-child(2){background:rgba(33,135,74,.22)}
.svc-win-rows{padding:0 12px 12px;display:flex;flex-direction:column;gap:4px}
.svc-win-l{height:4px;background:#2a2a2a;border-radius:2px;display:block}

/* ── Handy-Mockup: overlay auf Desktop-Browser, rechts unten ── */
.svc-phone{
  position:absolute;
  /* rechts am Browser-Rand: Browser ist 88% breit, zentriert.
     Rechte Browser-Kante = 50%+44% = 94% vom Container-Links.
     Phone-Mitte soll bei ~88% liegen → right:6% + half-phone-width */
  right:3%;bottom:-6px;z-index:5;
  width:clamp(58px,12%,84px);   /* schmal → iPhone-Hochformat */
  aspect-ratio:9/19.5;           /* schlankes iPhone-Format */
  background:#0e0e0e;
  border-radius:16px;
  overflow:hidden;
  border:3px solid #1c1c1c;
  box-shadow:
    0 24px 48px -12px rgba(0,0,0,.85),
    0 0 0 1px rgba(255,255,255,.07),
    inset 0 0 0 1px rgba(255,255,255,.06);
  transform:rotate(4deg);
  transform-origin:bottom center;
}
.svc-phone-notch{
  height:10px;background:#0e0e0e;
  display:flex;align-items:center;justify-content:center;
}
.svc-phone-notch::before{
  content:"";width:30%;height:4px;background:#1a1a1a;border-radius:3px;
}
.svc-phone-screen{
  background:#0d0d0d;
  display:flex;flex-direction:column;gap:5px;
  padding:6px 6px 8px;
}
/* Detaillierte Nav-Leiste */
.svc-ph-nav{display:flex;align-items:center;justify-content:space-between;padding:1px 2px 3px}
.svc-ph-logo{width:24px;height:7px;background:var(--green-500);border-radius:2px}
.svc-ph-burger{display:flex;flex-direction:column;gap:2px}
.svc-ph-burger i{width:11px;height:1.5px;background:#3a3a3a;border-radius:1px;display:block}
/* Hero mit Headline-Zeilen + Button */
.svc-ph-hero{
  border-radius:6px;padding:9px 8px;
  background:linear-gradient(135deg,var(--green-700),var(--green-500));
  display:flex;flex-direction:column;gap:4px;margin-bottom:3px;
}
.svc-ph-hl{height:5px;width:72%;background:rgba(255,255,255,.92);border-radius:2px}
.svc-ph-hl.short{width:48%;background:rgba(255,255,255,.6)}
.svc-ph-hbtn{height:9px;width:40%;background:#fff;border-radius:3px;margin-top:3px}
.svc-ph-l{height:4px;background:#2a2a2a;border-radius:2px}
.svc-ph-cards{display:flex;gap:4px;margin:2px 0}
.svc-ph-cards span{flex:1;height:20px;background:#1e1e22;border-radius:4px}
.svc-ph-cards span:first-child{background:rgba(33,135,74,.22)}
.svc-ph-btn{height:9px;width:55%;background:var(--green-500);border-radius:3px;margin:3px auto 0}

/* ── Light-Mode: Browser + Handy ── */
html[data-theme="light"] .svc-win{
  background:#fff;border-color:rgba(0,0,0,.09);
  box-shadow:0 8px 24px rgba(0,0,0,.1),0 1px 3px rgba(0,0,0,.06);
}
html[data-theme="light"] .svc-win-bar{background:#f0f0f0;border-bottom-color:rgba(0,0,0,.08)}
html[data-theme="light"] .svc-win-url{background:#e4e4e4;border-color:rgba(0,0,0,.08);color:#5e5e5e}
html[data-theme="light"] .svc-win-nav{background:#fff;border-bottom-color:rgba(0,0,0,.07)}
html[data-theme="light"] .svc-win-navi{background:#d8d8d8}
html[data-theme="light"] .svc-win-body{background:#fafafa}
html[data-theme="light"] .svc-win-card{background:#e8e8ea}
html[data-theme="light"] .svc-win-card:nth-child(2){background:rgba(33,135,74,.14)}
html[data-theme="light"] .svc-win-l{background:#d8d8d8}
html[data-theme="light"] .svc-phone{
  background:#f0f0f0;border-color:#d0d0d0;
  box-shadow:0 20px 40px -10px rgba(0,0,0,.18),inset 0 0 0 1px rgba(0,0,0,.06);
}
html[data-theme="light"] .svc-phone-notch{background:#f0f0f0}
html[data-theme="light"] .svc-phone-notch::before{background:#d0d0d0}
html[data-theme="light"] .svc-phone-screen{background:#fafafa}
html[data-theme="light"] .svc-ph-l{background:#d8d8d8}
html[data-theme="light"] .svc-ph-cards span{background:#e8e8ea}
html[data-theme="light"] .svc-ph-cards span:first-child{background:rgba(33,135,74,.14)}
html[data-theme="light"] .svc-ph-burger i{background:#c4c4c8}

/* Wartung — Ring-Chart + Status-Log */
@keyframes svc-pulse{0%,100%{opacity:1}50%{opacity:.5}}
.svc-viz-maint{align-items:center;justify-content:center;width:100%}
.svc-dash{
  display:flex;flex-direction:column;align-items:center;
  gap:clamp(10px,1.4vh,18px);
  width:100%;max-width:260px;
}
/* Ring */
.svc-dash-ring{
  position:relative;
  width:clamp(88px,12vw,124px);height:clamp(88px,12vw,124px);
  flex-shrink:0;
}
.svc-dash-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.svc-ring-bg{
  fill:none;stroke:var(--line-2);stroke-width:8;
}
.svc-ring-fill{
  fill:none;stroke:var(--green-400);stroke-width:8;stroke-linecap:round;
  /* 99.9% of circumference: 2π×40 ≈ 251.3 → 251.0 / 251.3 */
  stroke-dasharray:251 251.3;
  filter:drop-shadow(0 0 5px color-mix(in oklab,var(--green-400) 80%,transparent));
}
.svc-ring-label{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:1px;
}
.svc-ring-num{
  font-size:clamp(14px,2vw,19px);font-weight:800;letter-spacing:-0.04em;
  line-height:1;color:var(--fg);
}
.svc-ring-sub{font-size:9px;font-weight:600;color:var(--fg-2);letter-spacing:.03em}
/* Status-Log */
.svc-dash-list{width:100%;display:flex;flex-direction:column;gap:6px}
.svc-dash-row{
  display:flex;align-items:center;gap:8px;
  font-size:11.5px;font-weight:500;
  background:var(--surface-2);border:1px solid var(--line);border-radius:8px;
  padding:7px 11px;
}
.svc-dash-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.svc-dash-dot.ok{
  background:var(--green-400);
  box-shadow:0 0 5px color-mix(in oklab,var(--green-400) 70%,transparent);
}
.svc-dash-row>span:nth-child(2){flex:1;color:var(--fg)}
.svc-dash-tag{
  font-size:10px;color:#9a9a9f; /* war --fg-3 (#6e6e73): zu dunkel auf --surface, WCAG-AA */
  background:var(--surface);border:1px solid var(--line);
  padding:1px 6px;border-radius:4px;white-space:nowrap;
}
/* Light-mode Anpassungen */
html[data-theme="light"] .svc-ring-bg{stroke:rgba(0,0,0,.1)}
html[data-theme="light"] .svc-dash-row{background:var(--surface-2);border-color:var(--line)}

/* SEO — Search + Spark + Keywords */
.svc-viz-seo{flex-direction:column;gap:10px;width:100%;max-width:420px}
.svc-seo-search{display:flex;align-items:center;gap:8px;width:100%;background:var(--surface-2);border:1px solid var(--line);border-radius:999px;padding:7px 14px;color:var(--fg-2);font-size:12px}
.svc-seo-search svg{width:13px;height:13px;flex-shrink:0}
.svc-spark{width:100%;height:100px}
.svc-spark-fill{fill:var(--green-500);opacity:.22}
.svc-spark-line{fill:none;stroke:var(--green-400);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.svc-seo-ranks{display:flex;flex-direction:column;gap:4px;width:100%}
.svc-seo-rk{display:flex;justify-content:space-between;align-items:center;font-size:11px;padding:4px 0}
.svc-seo-kw{color:var(--fg-2)}
.svc-seo-pos{color:var(--green-300);font-weight:600;font-feature-settings:"tnum"}
.svc-seo-pos.muted{color:var(--fg-2);font-weight:500}

/* GEO — AI-Card + Sources */
.svc-viz-geo{flex-direction:column;gap:8px;width:100%;max-width:380px}
.svc-ai-card{width:100%;background:var(--surface-2);border:1px solid var(--line);border-radius:12px;padding:14px 16px;display:flex;flex-direction:column;gap:6px;font-size:12px;line-height:1.4;color:var(--fg-2)}
.svc-ai-head{color:var(--green-300);font-weight:600;margin-bottom:2px}
.svc-ai-line{display:block;height:5px;background:var(--line-2,#3a3a3a);border-radius:2px}
.svc-ai-mark{color:var(--fg);font-size:11.5px;margin-top:4px;line-height:1.45}
.svc-ai-mark em{background:color-mix(in oklab,var(--green-500) 30%,transparent);color:var(--green-200);padding:1px 5px;border-radius:3px;font-style:normal;font-weight:600}
.svc-ai-sources{display:flex;flex-direction:column;gap:4px;width:100%;font-size:10.5px;color:var(--fg-2)}
.svc-ai-src{display:flex;align-items:center;gap:8px;padding:4px 10px;background:var(--surface-2);border:1px solid var(--line);border-radius:6px}
.svc-ai-src b{width:14px;height:14px;border-radius:3px;background:var(--line-2,#3a3a3a);color:var(--fg-2);font-size:9px;font-weight:700;display:inline-flex;align-items:center;justify-content:center}
.svc-ai-src.active{border-color:color-mix(in oklab,var(--green-500) 50%,var(--line))}
.svc-ai-src.active b{background:var(--green-500);color:#fff}

/* Branding — Moodboard-Grid (Bento aus Marken-Bausteinen) */
.svc-viz-brand{width:100%;max-width:440px}
.svc-mood{
  display:grid;width:100%;
  grid-template-columns:repeat(3,1fr);
  grid-auto-rows:1fr;
  gap:8px;aspect-ratio:7/5;
}
.svc-mood-tile{
  border-radius:11px;overflow:hidden;position:relative;
  border:1px solid var(--line);background:var(--surface-2);
  display:flex;align-items:center;justify-content:center;
}
/* Wordmark groß: 2×2 */
.svc-mood-mark{grid-column:span 2;grid-row:span 2;background:#0a0a0a;border-color:rgba(255,255,255,.08)}
.svc-mood-mark span{font-size:clamp(34px,6vw,58px);font-weight:800;letter-spacing:-0.05em;line-height:1;
  background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;color:transparent}
/* Farbverlauf */
.svc-mood-grad{background:var(--grad-brand);border:0}
/* Typografie */
.svc-mood-typo{flex-direction:column;gap:3px;background:#fff}
.svc-mood-aa{font-size:clamp(20px,3.4vw,30px);font-weight:800;color:#0a0a0a;letter-spacing:-0.04em;line-height:1}
.svc-mood-font{font-size:8px;font-weight:600;color:#888;letter-spacing:.02em}
/* Voice / Zitat */
.svc-mood-voice{flex-direction:column;align-items:flex-start;gap:1px;padding:0 12px;background:var(--surface)}
.svc-mood-voice b{font-size:clamp(11px,1.5vw,15px);font-weight:800;letter-spacing:-0.03em;line-height:1.08;color:var(--fg)}
.svc-mood-voice b:first-child{background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;color:transparent}
/* Marken-Symbol auf Dunkel */
.svc-mood-logo{background:#0f1511;border-color:rgba(255,255,255,.08)}
.svc-mood-dot{width:clamp(20px,4vw,30px);height:clamp(20px,4vw,30px);border-radius:50%;background:var(--grad-brand)}
/* Swatches */
.svc-mood-swatches{gap:5px;background:var(--surface)}
.svc-mood-swatches span{width:clamp(11px,2vw,16px);height:clamp(11px,2vw,16px);border-radius:4px}
.svc-mood-swatches .sw1{background:#0a0a0a;border:1px solid var(--line)}
.svc-mood-swatches .sw2{background:var(--green-500)}
.svc-mood-swatches .sw3{background:var(--green-200,#9ccf92)}
.svc-mood-swatches .sw4{background:#fff;border:1px solid var(--line)}
html[data-theme="light"] .svc-mood-mark{background:#0a0a0a}
html[data-theme="light"] .svc-mood-typo{background:#fff;border-color:var(--line)}

/* alte .svc-grid + .svc-card behalten (Standort-Page nutzt sie) — schlanke Variante */
.svc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
@media (max-width:720px){.svc-grid{grid-template-columns:1fr}}
.svc-card{
  position:relative;background:var(--surface);border:1px solid var(--line);
  border-radius:24px;padding:36px 32px;overflow:hidden;
  transition: transform .4s var(--ease-out), border-color .3s var(--ease);
  display:flex;flex-direction:column;min-height:240px;
}
.svc-card:hover{transform:translateY(-3px);border-color:var(--line-2)}
.svc-card h3{font-size:24px;font-weight:600;letter-spacing:-0.02em;line-height:1.2;margin-bottom:10px}
.svc-card p{font-size:15px;color:var(--fg-2);line-height:1.5}
.svc-card .svc-cta{margin-top:auto;padding-top:18px}

/* ── Standort: Leistungs-Bento ──────────────────────────── */
.standort-svc-sec{padding:clamp(64px,9vh,120px) 0}
.standort-svc-bento{margin-top:0}
/* Standort-Bento: GEO-Karte — Sparkle in Grün */
.lz-geo-ring.ring svg{stroke:var(--green-400)}


/* ============ TEAM ============ */
.team-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px}
@media (max-width:720px){.team-grid{grid-template-columns:1fr}}

/* v7: Team-CTA zentriert unter den Cards */
.team-cta-wrap{display:flex;justify-content:center;margin-top:clamp(36px,5vh,56px)}
.team-mobile-link{display:none} /* deprecated */
.team-head-link{display:none}   /* deprecated */
.team-card{background:var(--surface);border:1px solid var(--line);border-radius:24px;padding:36px;display:flex;flex-direction:column;gap:20px}
.team-photo{aspect-ratio:1/1;border-radius:18px;overflow:hidden;background:var(--surface-2)}
.team-photo img{width:100%;height:100%;object-fit:cover}
.team-card h3{font-size:24px;font-weight:600;letter-spacing:-0.02em}
.team-role{font-size:13px;color:var(--fg-2);margin-top:-12px}
.team-card p{color:var(--fg-2);font-size:15px;line-height:1.55}
/* Gradient-Tagline als erster Satz im Bio-Text */
.team-tagline-inline{font-weight:600}

/* ============ TESTIMONIAL ============ */
.tm-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media (max-width:900px){.tm-grid{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.tm-grid{grid-template-columns:1fr}}
.tm-card{background:var(--surface);border:1px solid var(--line);border-radius:24px;padding:32px;display:flex;flex-direction:column;gap:24px}
.tm-quote{font-size:17px;line-height:1.55;letter-spacing:-0.012em;flex:1}
.tm-quote::before{content:"„";font-size:42px;line-height:0;display:inline-block;margin-right:4px;color:var(--green-300);vertical-align:-12px}
.tm-meta{display:flex;align-items:center;gap:14px;border-top:1px solid var(--line);padding-top:18px}
.tm-avatar{width:42px;height:42px;border-radius:50%;background:var(--surface-2);overflow:hidden}
.tm-avatar img{width:100%;height:100%;object-fit:cover}
.tm-name{font-size:14px;font-weight:600;letter-spacing:-0.005em}
.tm-role{font-size:12px;color:var(--fg-2);margin-top:2px}

/* ============ PROCESS (Sticky-Story) ============ */
.proc-stage{position:relative}
.proc-track{display:grid;grid-template-columns:1fr 1fr;gap:64px}
@media (max-width:900px){.proc-track{grid-template-columns:1fr;gap:32px}}
.proc-stops{display:flex;flex-direction:column;gap:120px;padding:100px 0}
.proc-stop{opacity:.35;transition:opacity .4s var(--ease)}
.proc-stop.active{opacity:1}
.proc-stop .step-num{font-size:13px;color:var(--green-300);font-weight:500;margin-bottom:14px;display:block}
/* Prozess-Schritte: responsive, immer < h2 minimum (28px) */
.proc-stop h3{font-size:clamp(20px,2.4vw,32px);font-weight:600;letter-spacing:-0.025em;line-height:1.15;margin-bottom:14px}
.proc-stop p{color:var(--fg-2);font-size:16px;line-height:1.55;max-width:36ch}
.proc-vis{position:sticky;top:120px;height:60vh;align-self:start;display:flex;align-items:center;justify-content:center}
.proc-vis-card{
  width:100%;aspect-ratio:4/3;background:var(--surface);border:1px solid var(--line);border-radius:24px;
  background-image: radial-gradient(500px 300px at 60% 40%, rgba(33,135,74,.2), transparent 70%);
  position:relative;overflow:hidden;
}
@media (max-width:900px){.proc-vis{display:none}}

/* ============ BLOG TEASER / CARDS ============ */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media (max-width:900px){.blog-grid{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.blog-grid{grid-template-columns:1fr}}

/* Wissen — Kategorie-Filter */
.wissen-filter{
  display:flex;flex-wrap:wrap;gap:10px;
  margin:0 0 36px;
}
.wf-pill{
  padding:9px 18px;border-radius:999px;
  background:var(--surface);border:1px solid var(--line);
  color:var(--fg-2);font-size:14px;font-weight:500;letter-spacing:-0.01em;
  cursor:pointer;
  transition:background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
}
.wf-pill:hover{color:var(--fg);border-color:var(--line-2)}
.wf-pill.is-active{
  background:var(--green-500);
  border-color:transparent;
  color:#fff;
}
.blog-card.is-hidden{display:none}
.wissen-empty{color:var(--fg-2);font-size:15px;margin:8px 0 0}
.blog-card{background:var(--surface);border:1px solid var(--line);border-radius:24px;overflow:hidden;display:flex;flex-direction:column;transition:transform .4s var(--ease-out), border-color .3s var(--ease)}
.blog-card:hover{transform:translateY(-3px);border-color:var(--line-2)}
.blog-card .img{aspect-ratio:16/9;background:var(--surface-2);overflow:hidden;position:relative}
.blog-card-cat{
  position:absolute;top:12px;left:12px;z-index:1;
  font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  padding:5px 10px;border-radius:999px;
  background:rgba(0,0,0,.65);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  color:#fff;
}
.blog-card .img img{width:100%;height:100%;object-fit:cover}
.blog-card .body{padding:24px;display:flex;flex-direction:column;gap:10px;flex:1}
.blog-card .meta{font-size:12px;color:var(--fg-2);font-weight:500}
.blog-card h4,.blog-card .blog-card-title{font-size:18px;font-weight:600;letter-spacing:-0.02em;line-height:1.3;margin:0}
.blog-card .excerpt{font-size:14px;color:var(--fg-2);line-height:1.5;margin-top:auto}

/* ============ PAGINATION ============ */
.pagination, .nav-links{display:flex;justify-content:center;align-items:center;gap:8px;flex-wrap:wrap}
.page-numbers{
  width:42px;height:42px;border-radius:50%;border:1px solid var(--line-2);
  display:inline-flex;align-items:center;justify-content:center;font-size:14px;font-weight:500;
  color:var(--fg);transition:all .2s var(--ease);
}
.page-numbers:hover{background:color-mix(in oklab, var(--fg) 6%, transparent)}
.page-numbers.current{background:var(--fg);color:var(--bg);border-color:transparent}
.page-numbers.dots{border:0}

/* ============ SEARCH FORM ============ */
.searchform{display:flex;gap:10px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:6px 6px 6px 22px}
.searchform input[type="search"]{
  flex:1;background:transparent;border:0;color:var(--fg);font-family:var(--font);font-size:15px;padding:8px 0;
}
.searchform input[type="search"]:focus{outline:none}
.searchform .btn{flex-shrink:0}
.screen-reader-text{position:absolute;left:-9999px}

/* ============ STATS-INTRO (Inspiration-Layout) ============ */
.stats-section .stats-intro{max-width:100%;margin-bottom:80px}
.stats-intro-lead{font-size:clamp(22px,2.8vw,36px);font-weight:700;letter-spacing:-0.03em;line-height:1.2;margin-bottom:20px}
.stats-text{font-size:21px;line-height:1.55;color:var(--fg-2);margin-top:0;letter-spacing:-0.012em}
.stats-text strong{color:var(--fg);font-weight:600}
/* Mobil: Absatz unter „Eine gute Website…" kompakter (Schrift + Zeilenabstand) */
@media (max-width:600px){
  .stats-text{font-size:16px;line-height:1.45}
}
.stats-row{display:grid;grid-template-columns:repeat(3,1fr);gap:48px;align-items:start}
@media (max-width:720px){
  .stats-row{grid-template-columns:repeat(3,1fr);gap:14px;text-align:center}
  .stat-item{align-items:center;gap:8px}
}
.stat-item{display:flex;flex-direction:column;gap:14px}
.stat-num{font-size:clamp(54px, 7vw, 88px);font-weight:700;letter-spacing:-0.05em;line-height:.95;font-feature-settings:"tnum"}
@media (max-width:720px){
  .stat-num{font-size:clamp(32px,9vw,44px)}
  .stat-label{font-size:12px;line-height:1.35}
}
.stat-label{font-size:15px;color:var(--fg-2);font-weight:400;letter-spacing:-0.005em}

/* ============ TEAM-INTRO ============ */

/* ============ STANDORT-HERO mit Luftaufnahme ============ */
.standort-hero{
  position:relative;width:100%;
  min-height:100vh;min-height:100svh;
  display:flex;align-items:center;justify-content:center;
  /* Fallback-Hintergrund (z. B. Manching ohne Luftbild): dunkler Verlauf,
     wird vom Inline-background-image überlagert, sobald ein Foto gesetzt ist. */
  background:#0a0a0b radial-gradient(120% 120% at 50% 0%, #161618 0%, #0a0a0b 60%);
  background-size:cover;background-position:center;background-repeat:no-repeat;
  overflow:hidden;color:#fff;
  margin-top:-140px;padding:200px 0 140px;
  margin-bottom:120px;
  text-align:center;
}
@media (max-width:720px){.standort-hero{margin-bottom:64px;padding:160px 0 100px}}

/* ── Standort: „Warum wir" (ortsspezifisch) ── */
.standort-pain{padding:24px 0 8px}
.standort-pain-inner{max-width:820px}
.standort-pain .sec-title{margin-top:10px}
.standort-pain-text{color:var(--fg-2);font-size:clamp(16px,1.15vw,18px);line-height:1.75;margin-top:18px}
.standort-pain-points{margin-top:26px;display:flex;flex-direction:column;gap:14px;list-style:none;padding:0}
.standort-pain-points li{position:relative;padding-left:30px;color:var(--fg);line-height:1.6}
.standort-pain-points li::before{
  content:"";position:absolute;left:0;top:.45em;width:13px;height:13px;border-radius:50%;
  background:var(--green-500,#21874a);
  box-shadow:0 0 0 4px color-mix(in oklab, var(--green-500,#21874a) 20%, transparent);
}

/* ── Standort: lokaler Kontext (ortsspezifische Karten) ── */
.standort-local{padding:56px 0}
.standort-local-intro{max-width:760px;color:var(--fg-2);font-size:clamp(16px,1.15vw,18px);line-height:1.75;margin-top:18px}
.standort-local-grid{margin-top:40px;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.standort-local-card{
  background:var(--surface);border:1px solid var(--line);border-radius:18px;
  padding:clamp(20px,2vw,28px);
}
.standort-local-card-h{font-size:18px;font-weight:600;letter-spacing:-.02em;margin:0 0 10px;color:var(--fg)}
.standort-local-card-p{color:var(--fg-2);font-size:14.5px;line-height:1.65;margin:0}
@media (max-width:900px){.standort-local-grid{grid-template-columns:1fr}}

/* ============ SERVICE-SPEZIFISCHE SEKTIONEN ============ */

/* Universal: l-sec-sub für Untertitel zu Section-Heads */
.l-sec-sub{
  font-size:17px;line-height:1.55;color:var(--fg-2);
  max-width:60ch;margin:18px auto 0;
}


/* ── Problem-Sektion ───────────────────────────────────── */
.l-problem{padding:clamp(60px,8vh,100px) 0}
.l-problem-intro{
  max-width:62ch;margin:0 auto 28px;font-size:clamp(15px,1.3vw,17px);
  color:var(--fg-2);line-height:1.7;text-align:center;
}
.l-problem-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:48px;
}
@media (max-width:720px){.l-problem-grid{grid-template-columns:1fr;gap:14px}}
@media (max-width:420px){.l-problem-grid .l-prob-card{padding:18px 16px}}
.l-prob-card{
  background:var(--surface);border:1px solid var(--line);border-radius:14px;
  padding:24px 22px;display:flex;flex-direction:column;gap:10px;
  transition:transform .3s var(--ease-out),border-color .3s var(--ease-out);
}
.l-prob-card:hover{transform:translateY(-2px);border-color:color-mix(in oklab,var(--green-500) 35%,var(--line))}
.l-prob-icon{
  width:48px;height:48px;color:var(--green-400);
  display:flex;align-items:center;justify-content:center;
  background:color-mix(in oklab,var(--green-500) 12%,transparent);
  border-radius:12px;
}
.l-prob-icon svg{width:30px;height:30px}
.l-prob-card h3{font-size:16px;font-weight:600;letter-spacing:-0.018em;margin:0}
.l-prob-card p{font-size:14px;color:var(--fg-2);line-height:1.55;margin:0}

/* ── Lösung / USP (nur websites) ────────────────────────── */
.l-usp{padding:clamp(60px,8vh,100px) 0}
.l-usp-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:48px;
}
@media (max-width:720px){.l-usp-grid{grid-template-columns:1fr;gap:14px}}
@media (max-width:420px){.l-usp-grid .l-usp-card{padding:20px 16px}}
.l-usp-card{
  background:var(--surface);border:1px solid var(--line);border-radius:14px;
  padding:28px 24px;display:flex;flex-direction:column;gap:12px;
  transition:transform .3s var(--ease-out),border-color .3s var(--ease-out);
}
.l-usp-card:hover{transform:translateY(-3px);border-color:color-mix(in oklab,var(--green-500) 45%,var(--line))}
.l-usp-icon{
  width:54px;height:54px;color:var(--green-500);
  display:flex;align-items:center;justify-content:center;
}
.l-usp-icon svg{width:42px;height:42px}
.l-usp-icon .ring{width:54px;height:54px;background:transparent}
.l-usp-card h3{font-size:18px;font-weight:600;letter-spacing:-0.018em;margin:0}
.l-usp-card p{font-size:14.5px;color:var(--fg-2);line-height:1.6;margin:0}

/* ── Section-Caption: zentrierter Erklär-Lead innerhalb der Sektion ── */
.l-section-caption{
  display:block;text-align:center;
  margin:clamp(10px,1.5vh,16px) auto 0;
  padding-bottom:clamp(16px,2.5vh,28px);
  max-width:52ch;
  font-size:clamp(15px,1.35vw,17px);font-weight:400;line-height:1.72;
  color:var(--fg-2);
}
/* Innerhalb Sticky-Scroll-Container: gap übernimmt, kein extra margin */
.geo-scroll-inner .l-section-caption,
.bm-scroll-inner .l-section-caption{margin-top:0;padding-bottom:0}

/* ── Bentogrid: Frage-Lead über der Lösungs-Headline ──── */
.l-bento-ask{
  display:block;font-size:.5em;font-weight:500;color:var(--fg-2);
  letter-spacing:-0.008em;line-height:1.3;margin-bottom:.5em;
}

/* ── Referenzen (Leistungsseiten, Landingpage-Stil) ───── */
.l-refs{padding:clamp(64px,9vh,120px) 0}
.l-refs-intro{font-size:16px;color:var(--fg-2);line-height:1.6;margin:14px 0 0;max-width:52ch}
.l-refs-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:44px;
}
@media (max-width:860px){.l-refs-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.l-refs-grid{grid-template-columns:1fr}}
.l-ref-card{
  background:var(--surface);border:1px solid var(--line);border-radius:16px;
  padding:26px 28px;display:flex;flex-direction:column;gap:9px;
  transition:transform .3s var(--ease-out),border-color .3s var(--ease-out);
}
.l-ref-card:hover{transform:translateY(-4px);border-color:color-mix(in oklab,var(--green-500) 40%,var(--line))}
.l-ref-tab{display:none}
.l-ref-name{font-size:21px;font-weight:700;letter-spacing:-0.02em;margin:0}
.l-ref-review{font-size:15px;color:var(--fg-2);line-height:1.55;font-style:italic;margin:4px 0 0}
.l-ref-by{display:none}
.l-refs-cta{margin-top:32px;display:flex;justify-content:flex-start}

/* ── Abschluss-CTA ────────────────────────────────────── */
.l-final-cta{padding:clamp(64px,9vh,110px) 0}
.l-final-cta-card{
  background:linear-gradient(135deg,var(--surface) 0%,color-mix(in oklab,var(--green-500) 10%,var(--surface)) 100%);
  border:1px solid color-mix(in oklab,var(--green-500) 25%,var(--line));
  border-radius:20px;padding:clamp(36px,5vw,64px);text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:16px;
  box-shadow:0 30px 60px -24px rgba(33,135,74,.25);
}
.l-final-cta-card .l-sec-title{margin:0;max-width:22ch}
.l-final-cta-sub{font-size:clamp(15px,1.3vw,17px);color:var(--fg-2);line-height:1.6;margin:0;max-width:54ch}
.l-final-cta-card .btn{margin-top:10px}

/* ── Bentogrid: Stat-Kachel-Modifier (SEO-Stats) ───────── */
.lz-card.lz-stat .b-fig{
  display:flex;align-items:center;justify-content:center;min-height:0;
}
.lz-stat-num{
  font-size:clamp(40px,7vw,72px);font-weight:800;letter-spacing:-0.04em;
  line-height:1;display:inline-block;
}

/* Domain & E-Mail: Tech-Stack */
.l-stack{padding:80px 0}
.l-stack-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:48px;
}
@media (max-width:900px){.l-stack-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.l-stack-grid{grid-template-columns:1fr}}
.l-stack-item{
  background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:24px;
  position:relative;
  transition:border-color .25s var(--ease), transform .25s var(--ease-out);
}
.l-stack-item:hover{transform:translateY(-2px);border-color:color-mix(in oklab,var(--green-500) 35%,var(--line))}
.l-stack-item h3{font-size:16px;font-weight:600;letter-spacing:-0.018em;margin-bottom:10px;display:flex;align-items:center;gap:8px}
.l-stack-item h3::before{
  content:"";display:block;width:8px;height:8px;border-radius:50%;
  background:var(--green-500);flex-shrink:0;
}
.l-stack-item p{font-size:14px;color:var(--fg-2);line-height:1.55;margin:0}

/* Domain & E-Mail: DSGVO/Trust */
.l-trust-block{padding:60px 0 100px}
.l-trust-card{
  display:grid;grid-template-columns:1fr auto;gap:48px;align-items:center;
  background:var(--surface);border:1px solid var(--line);border-radius:28px;
  padding:48px;
}
@media (max-width:780px){.l-trust-card{grid-template-columns:1fr;text-align:left;padding:36px}}
.l-trust-icon{
  color:var(--green-300);width:120px;height:120px;flex-shrink:0;
}
html[data-theme="light"] .l-trust-icon{color:var(--green-500)}
.l-trust-icon svg{width:100%;height:100%}
@media (max-width:780px){.l-trust-icon{width:80px;height:80px}}
.standort-hero-overlay{
  position:absolute;inset:0;z-index:0;
  background:
    linear-gradient(180deg,rgba(0,0,0,.5) 0%,rgba(0,0,0,.45) 50%,rgba(0,0,0,.85) 100%),
    radial-gradient(ellipse 80% 60% at 50% 50%, rgba(0,0,0,.3) 0%, transparent 70%);
}
.standort-hero .wrap{position:relative;z-index:1}
.standort-hero-inner{max-width:880px;margin:0 auto}
.standort-hero-eye{
  display:inline-block;font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  padding:6px 14px;border-radius:999px;
  background:rgba(255,255,255,.12);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  color:#fff;margin-bottom:24px;
}
.standort-hero-h1{
  font-size:clamp(40px,7vw,96px);font-weight:700;letter-spacing:-0.04em;line-height:.98;
  margin:0 0 24px;color:#fff;
  text-shadow:0 2px 32px rgba(0,0,0,.4);
  opacity:0;animation:rise 1s var(--ease-out) .9s forwards;
}
.standort-hero-h1 .grad{
  background:var(--grad-brand);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.standort-hero-sub{
  font-size:clamp(17px,1.7vw,21px);line-height:1.55;color:rgba(255,255,255,.92);
  max-width:60ch;margin:0 auto 36px;
  text-shadow:0 1px 16px rgba(0,0,0,.4);
  opacity:0;animation:rise-blur .9s var(--ease-out) 1.1s forwards;
}
.standort-hero-ctas{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;opacity:0;animation:rise .8s var(--ease-out) 1.3s forwards}
.btn.outline-light{
  background:transparent;border:1.5px solid rgba(255,255,255,.7);color:#fff;
}
.btn.outline-light:hover{background:rgba(255,255,255,.12);border-color:#fff}
.standort-hero-credit{
  position:absolute;right:16px;bottom:12px;z-index:2;
  font-size:10px;color:rgba(255,255,255,.55);letter-spacing:.02em;
}
/* Scroll-Hinweis: Pfeil unten mittig im Hero */
.standort-hero-scroll{
  position:absolute;left:50%;bottom:clamp(20px,4vh,40px);z-index:2;
  transform:translateX(-50%);
  width:46px;height:46px;border-radius:999px;
  display:flex;align-items:center;justify-content:center;
  color:#fff;border:1.5px solid rgba(255,255,255,.45);
  background:rgba(255,255,255,.08);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  animation:lhScroll 1.8s var(--ease-out) infinite;
  transition:background .3s var(--ease-out),border-color .3s var(--ease-out);
}
/* kein Hover: Pfeil ist nur visueller Hint, kein Link */
.standort-hero-scroll svg{width:22px;height:22px}
@keyframes lhScroll{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,8px)}}
@media (max-width:720px){.standort-hero{min-height:100vh;padding:160px 0 80px}}

/* Standort-Team-Section */
/* ─── Landingpage: Drei Fragen (Scroll-Reveal) ─────────────── */
.lq-sec{position:relative;min-height:420vh}
.lq-sticky{
  position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
.lq-item{
  position:absolute;left:50%;top:50%;
  width:min(1100px,92vw);transform:translate(-50%,-50%);
  text-align:center;opacity:0;
  padding:0 clamp(16px,4vw,48px);
  will-change:opacity,transform;
}
.lq-q{
  font-family:var(--font);
  font-size:clamp(32px,5.6vw,78px);font-weight:700;
  letter-spacing:-0.035em;line-height:1.08;
}
.lq-final .lq-q{font-size:clamp(30px,5vw,70px)}
/* Grünes Hintergrundleuchten hinter der finalen Antwort */
.lq-final::before{
  content:"";position:absolute;
  left:50%;top:42%;transform:translate(-50%,-50%);
  width:min(900px,100%);height:min(560px,80vh);
  background:radial-gradient(ellipse at center,
    rgba(33,135,74,.50) 0%, rgba(33,135,74,.22) 38%, transparent 72%);
  filter:blur(52px);z-index:0;pointer-events:none;
}
.lq-final .lq-final-logo,.lq-final .lq-q,.lq-final .lq-cta{position:relative;z-index:1}
.lq-arrow{color:var(--green-400);font-weight:700;margin-right:6px}
/* fwn.media-Logo über der finalen Antwort */
.lq-final-logo{display:flex;justify-content:center;margin-bottom:clamp(16px,2.5vh,28px)}
.lq-final-logo img{height:clamp(22px,3vw,36px);width:auto}
.lq-final-logo .lq-logo-light{display:none}
html[data-theme="light"] .lq-final-logo .lq-logo-dark{display:none}
html[data-theme="light"] .lq-final-logo .lq-logo-light{display:inline}
.lq-cta{margin-top:clamp(28px,4vh,48px)}
.lq-progress{
  position:absolute;left:50%;bottom:clamp(40px,8vh,80px);
  transform:translateX(-50%);
  display:flex;gap:10px;
}
.lq-dot{
  width:8px;height:8px;border-radius:999px;
  background:var(--line-2,var(--line));
  transition:background .35s var(--ease-out),transform .35s var(--ease-out);
}
.lq-dot.is-active{background:var(--green-400);transform:scale(1.25)}
@media (max-width:720px){.lq-sec{min-height:360vh}}

/* ─── Landingpage: Referenzen ──────────────────────────────── */
.standort-ref{padding:clamp(72px,9vh,120px) 0}
.ref-grid{display:grid;grid-template-columns:1fr;gap:24px;max-width:760px;margin:0 auto}
/* Standort: Referenzen full-width, linksbündig, 2 Spalten wenn mehrere */
.standort-ref .ref-grid{max-width:100%;margin:0;grid-template-columns:1fr}
.standort-ref .ref-card{min-height:210px}
.standort-ref .ref-card-body{min-height:210px}
@media(max-width:680px){.standort-ref .ref-grid{grid-template-columns:1fr}}
.ref-card{
  display:grid;grid-template-columns:360px 1fr;gap:0;
  background:var(--surface);border:1px solid var(--line);
  border-radius:24px;overflow:hidden;
  transition:transform .4s var(--ease-out),box-shadow .4s var(--ease-out);
}
.ref-card:hover{transform:translateY(-4px);box-shadow:0 24px 56px -16px rgba(0,0,0,.42)}
html[data-theme="light"] .ref-card:hover{box-shadow:0 24px 56px -16px rgba(0,0,0,.12)}
/* Screenshot: breite Spalte + Top-Crop → ganzer Hero sichtbar, kein Streifen */
.ref-card-media{background:var(--surface-2);overflow:hidden;display:flex;align-items:center;justify-content:center;padding:0}
.ref-card-media img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block;border-radius:0}
/* Logo-Modus: vollständig sichtbar, zentriert, nicht beschnitten */
.ref-card-media-logo{padding:24px}
.ref-card-media-logo img{width:auto;height:auto;object-fit:contain;max-height:160px;max-width:88%}
.ref-card-body{padding:28px 30px;display:flex;flex-direction:column;gap:10px}
.ref-card-tab{display:none}
.ref-card-title{font-size:22px;font-weight:700;letter-spacing:-0.02em}
.ref-card-review{font-size:15px;color:var(--fg-2);line-height:1.55;font-style:italic;margin:2px 0}
.ref-card-by{display:none}
.ref-card-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px;list-style:none;padding:0}
.ref-card-tags li{
  font-size:12px;font-weight:500;padding:6px 12px;border-radius:8px;
  border:1px solid var(--line);color:var(--fg-2);background:var(--surface-2);
}
@media (max-width:620px){
  .ref-card{grid-template-columns:1fr}
  .ref-card-media{padding:0;aspect-ratio:16/10}
  .ref-card-media-logo{padding:24px;aspect-ratio:auto;min-height:200px}
}
@media (max-width:480px){
  .ref-card{min-width:0;max-width:100%}
  /* Bild full-bleed, kein Padding-Frame — Screenshot zeigt klar was es zeigt */
  .ref-card-media{
    padding:0;
    aspect-ratio:16/9;
    overflow:hidden;
    display:block;
  }
  .ref-card-media img{
    width:100%;height:100%;
    object-fit:cover;object-position:center top;
    display:block;
  }
  .ref-card-media-logo{
    padding:20px;
    aspect-ratio:auto;min-height:170px;
    display:flex;align-items:center;justify-content:center;
  }
  .ref-card-media-logo img{
    width:auto;height:auto;
    object-fit:contain;max-height:140px;max-width:78%;
  }
  /* Body: weniger horizontales Padding → Tags + Text passen rein */
  .ref-card-body{padding:20px;gap:8px}
  .ref-card-title{font-size:19px}
  .ref-card-review{font-size:14px;word-break:break-word}
  .ref-card-tags{gap:6px;margin-top:4px;flex-wrap:wrap}
  .ref-card-tags li{font-size:11px;padding:5px 10px}
}

/* "Wer wir sind" — gestapeltes Layout: Text oben, Foto full-width darunter */
.standort-team{padding:clamp(64px,9vh,120px) 0}
.standort-team .wrap{display:flex;flex-direction:column;gap:clamp(32px,5vh,56px)}
.standort-team-intro{max-width:100%}
.standort-team-intro .sec-title{margin-top:0}
.standort-team-cta-wrap{display:flex;justify-content:center;margin-top:28px}

/* Mini-CTA */
.standort-mini-cta-sec{padding:clamp(32px,5vh,56px) 0}
.standort-mini-cta{
  display:flex;align-items:center;justify-content:space-between;gap:32px;
  background:var(--surface);border:1px solid var(--line);
  border-radius:24px;padding:clamp(24px,3.5vw,40px) clamp(28px,4vw,48px);
  flex-wrap:wrap;
}
.standort-mini-cta-text h3{font-size:clamp(20px,2.2vw,26px);font-weight:700;letter-spacing:-0.025em;line-height:1.2}
.standort-mini-cta-text p{font-size:14px;color:var(--fg-2);margin-top:8px;max-width:40ch}
@media(max-width:640px){.standort-mini-cta{flex-direction:column;align-items:flex-start;gap:20px}}

.standort-team-photo{
  position:relative;border-radius:28px;overflow:hidden;
  aspect-ratio:5/4;background:var(--surface-2);
  box-shadow:0 32px 64px -20px rgba(0,0,0,.5);
}
/* Full-width Variante (neue "Wer wir sind"-Sektion) */
.standort-team-photo-full{
  aspect-ratio:16/7;width:100%;
}
@media(max-width:720px){.standort-team-photo-full{aspect-ratio:4/3}}
html[data-theme="light"] .standort-team-photo{box-shadow:0 24px 48px -16px rgba(0,0,0,.14)}
.standort-team-photo img{width:100%;height:100%;object-fit:cover;object-position:center 20%;display:block}
.standort-team-photo-full img{object-position:center top}
.standort-team-tag{
  position:absolute;left:18px;bottom:18px;
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 14px;border-radius:999px;
  background:rgba(0,0,0,.6);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  color:#fff;font-size:13px;font-weight:500;
}
.standort-team-tag-dot{
  width:8px;height:8px;border-radius:50%;background:var(--green-400);
  animation:tag-pulse 2.4s var(--ease-out) infinite;
}

/* ============ PASSION CTA — Vollbild-Zwischen-CTA ============ */
.passion-cta{
  position:relative;width:100%;max-width:100vw;
  min-height:80vh;
  display:flex;align-items:center;justify-content:center;
  margin:0;padding:0;overflow:hidden;
  background-color:#0a1f1a;
}
/* JS-Parallax-Layer: separates Element statt background-attachment:fixed
   (das funktioniert auf iOS Safari nicht zuverlässig). */
.passion-cta-bg{
  position:absolute;left:0;right:0;
  top:-20%;bottom:-20%;
  background-size:cover;
  background-position:center 30%;
  background-repeat:no-repeat;
  will-change:transform;
  transform:translate3d(0,0,0);
  z-index:0;
}
/* Fallback wenn kein Bild — Brand-Gradient statt nur Schwarz */
.passion-cta-no-bg{
  background-image:
    radial-gradient(ellipse 60% 70% at 30% 40%, rgba(33,135,74,.35) 0%, transparent 70%),
    radial-gradient(ellipse 80% 60% at 80% 80%, rgba(33,135,74,.18) 0%, transparent 65%),
    linear-gradient(135deg,#0a1f1a 0%,#0c2a1f 100%);
}
@media (prefers-reduced-motion:reduce){
  .passion-cta-bg{transform:none !important}
}
.passion-cta-overlay{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.3) 50%,rgba(0,0,0,.65) 100%);
}
.passion-cta-inner{
  position:relative;z-index:1;
  display:flex;flex-direction:column;align-items:center;gap:36px;
  padding:80px 24px;text-align:center;
}
.passion-cta-title{
  font-size:clamp(40px,7vw,96px);font-weight:700;letter-spacing:-0.04em;
  line-height:.98;color:#fff;margin:0;
  text-shadow:0 2px 32px rgba(0,0,0,.25);
}
.passion-cta-btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 28px;border-radius:999px;
  background:transparent;border:1.5px solid rgba(255,255,255,.85);
  color:#fff;font-size:15px;font-weight:600;letter-spacing:-0.005em;
  text-decoration:none;
  transition:background .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease-out);
}
.passion-cta-btn:hover{background:rgba(255,255,255,.12);border-color:#fff}
.passion-cta-btn .arr{display:inline-block;font-size:18px;line-height:1;transition:transform .25s var(--ease-out)}
.passion-cta-btn:hover .arr{transform:translateX(3px)}
@media (max-width:720px){
  .passion-cta{min-height:clamp(280px,42vh,400px)}
  .passion-cta-inner{padding:48px 20px;gap:22px}
  .passion-cta-title{font-size:clamp(32px,9vw,52px);letter-spacing:-0.03em}
}

/* ============ FWN-CTA — Galerie-Mosaic mit CTA-Kachel ============ */
.fwn-cta{
  width:100%;padding:clamp(32px,4vw,56px) 0;
  background:var(--bg, #080808);
}
html[data-theme="light"] .fwn-cta{background:var(--bg)}
html[data-theme="light"] .fwn-g-cta{
  background:
    radial-gradient(ellipse 80% 70% at 20% 80%, rgba(33,135,74,.18) 0%, transparent 65%),
    linear-gradient(145deg,#e8f4ed 0%,#f0f8f2 100%);
}
html[data-theme="light"] .fwn-cta-title{color:var(--fg)}
html[data-theme="light"] .fwn-cta-text{color:var(--fg-2)}
html[data-theme="light"] .fwn-cta-btn{
  border-color:rgba(0,0,0,.7);color:var(--fg);
}
html[data-theme="light"] .fwn-cta-btn:hover{background:rgba(0,0,0,.06);border-color:var(--fg)}
.fwn-cta-wrap{
  max-width:1200px;margin:0 auto;padding:0 clamp(16px,3vw,32px);
}
.fwn-cta-gallery{display:flex;flex-direction:column;gap:8px;}

/* ── Obere Zeile ── */
.fwn-cta-row-top{
  display:flex;gap:8px;align-items:stretch;
}
.fwn-g-cta{
  flex:3 0 0;min-width:0;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:clamp(20px,2.5vw,30px);
  background:
    radial-gradient(ellipse 80% 70% at 20% 80%, rgba(33,135,74,.28) 0%, transparent 65%),
    linear-gradient(145deg,#0d2118 0%,#091910 100%);
  border-radius:14px;
  gap:12px;
}
.fwn-cta-col-right{
  flex:2 0 0;min-width:0;
  display:flex;flex-direction:column;gap:8px;
  min-height:clamp(200px,24vw,300px);
}
.fwn-cta-col-right .fwn-g-photo{flex:1;}

/* ── Untere Zeile ── */
.fwn-cta-row-bottom{
  display:flex;gap:8px;
  height:clamp(140px,16vw,200px);
}
.fwn-g-ferdi{flex:2 0 0;}
.fwn-g-dani {flex:3 0 0;}

/* ── Kacheln allgemein ── */
.fwn-g-tile{border-radius:14px;overflow:hidden;}
.fwn-g-photo{margin:0;position:relative;}
.fwn-g-photo img{
  width:100%;height:100%;
  object-fit:cover;object-position:center top;
  display:block;
}
.fwn-g-placeholder{background:#141414;}

/* ── CTA-Text-Kachel Inhalt ── */
.fwn-cta-eyebrow{
  display:inline-block;width:fit-content;
  font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.75);
  padding:5px 13px;border:1px solid rgba(255,255,255,.22);border-radius:999px;
}
.fwn-cta-title{
  font-size:clamp(36px,5.5vw,80px);font-weight:700;letter-spacing:-0.04em;
  line-height:.97;color:#fff;margin:0;
}
.fwn-cta-text{
  font-size:clamp(15px,1.4vw,17px);line-height:1.6;
  color:rgba(255,255,255,.78);margin:0;
  max-width:42ch;
}
.fwn-cta-actions{
  display:flex;flex-wrap:wrap;align-items:center;gap:16px;
  margin-top:4px;
}
.fwn-cta-btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:13px 26px;border-radius:999px;
  background:transparent;border:1.5px solid rgba(255,255,255,.8);
  color:#fff;font-size:15px;font-weight:600;letter-spacing:-.005em;
  text-decoration:none;
  transition:background .25s var(--ease),border-color .25s var(--ease);
}
.fwn-cta-btn:hover{background:rgba(255,255,255,.1);border-color:#fff}
.fwn-cta-btn .arr{display:inline-block;font-size:18px;line-height:1;transition:transform .25s var(--ease-out)}
.fwn-cta-btn:hover .arr{transform:translateX(3px)}
.fwn-cta-link{
  color:rgba(255,255,255,.75);font-size:15px;font-weight:500;
  text-decoration:none;border-bottom:1px solid rgba(255,255,255,.3);padding-bottom:2px;
  transition:color .2s var(--ease),border-color .2s var(--ease);
}
.fwn-cta-link:hover{color:#fff;border-bottom-color:rgba(255,255,255,.8)}

/* ── Responsive ── */
@media (max-width:860px){
  .fwn-cta-row-top{min-height:auto;flex-direction:column;}
  .fwn-cta-col-right{flex-direction:row;height:200px;}
  .fwn-cta-col-right .fwn-g-photo{flex:1;}
  .fwn-g-cta{padding:28px 24px;gap:16px;}
  .fwn-cta-title{font-size:clamp(32px,7vw,52px);}
}
@media (max-width:540px){
  .fwn-cta-row-bottom{height:clamp(140px,38vw,200px);}
  .fwn-cta-col-right{height:160px;}
  .fwn-cta-text{display:none;}
}
@media (max-width:480px){
  .fwn-cta{padding:24px 0;}
  .fwn-cta-wrap{padding:0 16px;}
  .fwn-cta-gallery{gap:10px;}
  .fwn-cta-row-top{flex-direction:column;gap:10px;}
  .fwn-g-cta{
    flex:0 0 auto;
    padding:28px 22px;
    gap:14px;
    align-items:flex-start;
    justify-content:flex-start;
    border-radius:18px;
  }
  .fwn-cta-title{font-size:30px;line-height:1.05;letter-spacing:-0.035em;}
  .fwn-cta-text{display:block;font-size:15px;line-height:1.55;max-width:none;}
  .fwn-cta-actions{margin-top:6px;width:100%;gap:12px;}
  .fwn-cta-btn{
    width:100%;justify-content:center;
    padding:14px 22px;font-size:15px;min-height:48px;
  }
  .fwn-cta-col-right{
    flex:0 0 auto;
    flex-direction:row;
    height:auto;min-height:0;
    gap:10px;
  }
  .fwn-cta-col-right .fwn-g-photo{flex:1;aspect-ratio:1/1;}
  .fwn-cta-row-bottom{height:auto;gap:10px;}
  .fwn-cta-row-bottom .fwn-g-photo{flex:1;aspect-ratio:1/1;}
  .fwn-g-tile{border-radius:14px;}
  .fwn-g-photo img{object-position:center 35%;}
}

/* ============ FAQ PILL-STYLE (Homepage) ============ */
.faq-section .faq-title{font-size:clamp(48px,6vw,80px);font-weight:700;letter-spacing:-0.04em;line-height:1;margin-bottom:64px}

.faq-pills{display:flex;flex-direction:column;gap:10px;max-width:1100px;margin:0 auto 64px}

/* Alle Pills exakt gleich groß (volle Breite, einheitliche Höhe) */
.faq-pill{
  width:100%;
  border-radius:16px;
  background:var(--surface);
  border:1px solid var(--line);
  overflow:hidden;
  transition:background .25s var(--ease-out), border-color .25s var(--ease-out);
}
html[data-theme="light"] .faq-pill{background:rgba(0,0,0,.04);border-color:var(--line)}
.faq-pill:hover{background:var(--surface-2)}
.faq-pill.open{background:var(--surface-2);border-color:var(--line-2)}

/* h3 wraps the button — Reset: kein eigenes Styling, kein Margin */
.faq-pill-h{margin:0;padding:0;font-size:inherit;font-weight:inherit;line-height:inherit}

/* Button: immer volle Breite, gleiches Padding → einheitliche Höhe */
.faq-pill-q{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  width:100%;text-align:left;
  padding:20px 28px 20px 28px;
  font-size:16px;font-weight:600;letter-spacing:-0.015em;color:var(--fg);
  cursor:pointer;
}

/* Pfeil-Icon, dreht sich beim Öffnen */
.faq-pill-q::after{
  content:"";flex-shrink:0;
  width:20px;height:20px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a1a1a6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-size:contain;background-repeat:no-repeat;background-position:center;
  transition:transform .3s var(--ease-out);
}
.faq-pill.open .faq-pill-q::after{transform:rotate(180deg)}

/* Antwort-Bereich: Höhe wird per JS gesetzt für echte smooth-Animation */
.faq-pill-a{
  height:0;overflow:hidden;
  transition:height .38s var(--ease-out);
}
.faq-pill-a-inner{padding:0 28px 24px}
.faq-pill-a p{font-size:15px;line-height:1.65;color:var(--fg-2);margin:0}
.faq-pill-a p strong{color:var(--fg);font-weight:600}
.faq-pill-link{margin-top:14px}
.faq-foot{
  display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;
  padding-top:48px;border-top:1px solid var(--line);
}
.faq-foot-text{font-size:16px;font-weight:500;color:var(--fg-2);letter-spacing:-0.012em}

/* ============ PREISRECHNER ============ */
.calc-wrap{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start;background:var(--surface);border:1px solid var(--line);border-radius:32px;padding:48px}
@media (max-width:900px){
  .calc-wrap{grid-template-columns:1fr;gap:32px;padding:28px;border-radius:24px}
}
@media (max-width:560px){
  .calc-wrap{padding:22px}
}
.calc-group{margin-bottom:32px}
.calc-group:last-child{margin-bottom:0}
.calc-group-label{font-size:13px;font-weight:500;color:var(--fg-2);margin-bottom:14px;letter-spacing:0}

.calc-result{
  position:sticky;top:120px;
  background:var(--surface-2);border:1px solid var(--line);border-radius:24px;
  padding:36px;display:flex;flex-direction:column;gap:14px;
}
@media (max-width:900px){
  .calc-result{position:relative;top:auto;padding:28px;border-radius:20px}
}
@media (max-width:560px){
  .calc-result{padding:24px 22px}
}
.calc-result-label{font-size:13px;font-weight:500;color:var(--fg-2);margin:0}

.calc-price-range{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:0}
.calc-num{
  font-size:clamp(36px,5vw,56px);font-weight:700;letter-spacing:-0.04em;line-height:1;
  font-feature-settings:"tnum";transition:transform .2s var(--ease);
}
.calc-sep{
  font-size:clamp(24px,3vw,36px);color:var(--fg-2);font-weight:300;
}
.calc-currency{
  font-size:clamp(24px,3vw,36px);font-weight:600;letter-spacing:-0.02em;
}
.calc-note{font-size:13px;color:var(--fg-2);line-height:1.5;margin:4px 0 0}
.calc-price-range.calc-custom .calc-num{font-size:clamp(20px,2.6vw,28px);font-weight:600}

/* Preisrechner: Info-Box pro Auswahl */
.calc-info{
  margin-top:24px;padding:24px 28px;
  background:color-mix(in oklab,var(--green-500) 9%,var(--surface-2));
  border:1px solid color-mix(in oklab,var(--green-500) 28%,var(--line));
  border-left:4px solid var(--green-500);
  border-radius:16px;
  transition:opacity .35s var(--ease-out), transform .35s var(--ease-out);
}
.calc-info.is-changing{
  animation: calc-info-pop .45s var(--ease-out);
}
@keyframes calc-info-pop {
  0%   { transform: translateY(6px) scale(.985); opacity: 0; }
  100% { transform: translateY(0)   scale(1);    opacity: 1; }
}
.calc-info-title{
  font-size:17px;font-weight:600;letter-spacing:-0.018em;margin:0 0 8px;
  color:var(--fg);
}
.calc-info-text{
  font-size:14px;line-height:1.55;color:var(--fg-2);margin:0;
}
@media (max-width:720px){.calc-info{padding:18px 20px}}

/* Package-Cards (3 Pakete) */
.calc-packages{display:grid;grid-template-columns:1fr;gap:14px}
.calc-package{
  position:relative;
  background:var(--surface-2);border:1px solid var(--line);border-radius:18px;
  padding:22px 24px;text-align:left;cursor:pointer;
  display:flex;flex-direction:column;gap:6px;
  font-family:inherit;color:inherit;
  transition:transform .25s var(--ease-out), border-color .25s var(--ease), background .25s var(--ease), box-shadow .3s var(--ease-out);
}
@media (max-width:560px){
  .calc-package{padding:18px 18px;border-radius:14px}
  .calc-package-name{font-size:18px}
  .calc-package-features{font-size:12px}
}
.calc-package:hover{transform:translateY(-2px);border-color:var(--line-2)}
.calc-package.on{
  border-color:var(--green-500);
  background:color-mix(in oklab,var(--green-500) 10%,var(--surface));
  box-shadow:0 8px 24px -8px rgba(33,135,74,.25);
}
.calc-package-tag{
  position:absolute;top:14px;right:18px;
  font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  padding:4px 10px;border-radius:999px;
  background:var(--green-500);color:#fff;
}
.calc-package-name{
  font-size:20px;font-weight:700;letter-spacing:-0.025em;
}
.calc-package-desc{
  font-size:14px;color:var(--fg-2);font-weight:500;
}
.calc-package-features{
  display:flex;flex-direction:column;gap:4px;margin-top:8px;
  font-size:13px;color:var(--fg-2);
}
.calc-package-features span{
  position:relative;padding-left:18px;
}
.calc-package-features span::before{
  content:"";position:absolute;left:0;top:6px;
  width:8px;height:8px;border-radius:50%;
  background:color-mix(in oklab,var(--green-500) 35%,transparent);
}
.calc-package.on .calc-package-features span::before{background:var(--green-500)}

/* Leistungs-Detailseiten (l-* Präfix) */
.l-hero{min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:clamp(80px,10vh,140px) 0;text-align:center}
.l-hero-inner{width:100%;padding:0 clamp(20px,4vw,48px)}
.l-hero-sub{max-width:52ch;margin:20px auto 0;color:var(--fg-2)}
.l-hero-cta{margin-top:36px}
.l-about{background:var(--bg-2)}
.l-about-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
@media (max-width:900px){.l-about-grid{grid-template-columns:1fr}}
.l-section-title{font-size:clamp(28px,4vw,48px);font-weight:700;letter-spacing:-0.04em;line-height:1.05}
.l-subs-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media (max-width:1100px){.l-subs-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.l-subs-grid{grid-template-columns:1fr}}
.l-sub-card{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:28px 24px}
.l-sub-card h3{font-size:18px;font-weight:600;letter-spacing:-0.02em;margin-bottom:10px}
.l-sub-card p{font-size:14px;color:var(--fg-2);line-height:1.5}
.l-faq .faq-pills{max-width:100%}

/* Ghost-Button (zurück-Button im Formular) */
.btn.ghost{background:transparent;color:var(--fg-2);border:1px solid transparent}
.btn.ghost:hover{background:color-mix(in oklab, var(--fg) 6%, transparent);color:var(--fg)}

/* ============ MISC ============ */
.skip-link{position:absolute;left:-9999px}
.skip-link:focus{left:18px;top:18px;background:var(--fg);color:var(--bg);padding:10px 16px;border-radius:8px;z-index:200}

::selection{background:var(--green-500);color:#fff}

/* Tabular numerals für Preise/Zahlen */
.num, .calc-num{font-feature-settings:"tnum"}

/* ============ SECTION-VARIATION — abwechselnde Backgrounds ============ */
/* Stats — overridden by livelier backgrounds block below */
/* Prozess + Testimonials — overridden by livelier backgrounds block below */
/* FAQ: dunkel */
#faq{background:var(--bg)}
/* Preisrechner — background overridden by livelier backgrounds block below */

/* Trennlinien für Sektionsübergänge */
#zahlen,#process,#testimonials{
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}

/* Kontakt-Formular full-width im ms-card */
.page-template-page-kontakt .ms-card{border-radius:24px}

/* Multistep-Form volle Breite */
#msForm .ms-fields{display:grid;grid-template-columns:1fr 1fr;gap:24px}
@media (max-width:640px){#msForm .ms-fields{grid-template-columns:1fr}}
#msForm .ms-fields .field.full{grid-column:1/-1}
.ms-consent-label{
  display:flex;align-items:flex-start;gap:12px;
  font-size:13px;line-height:1.5;color:var(--fg-2);
  cursor:pointer;
}
.ms-consent-label input[type="checkbox"]{
  margin-top:2px;width:18px;height:18px;flex-shrink:0;cursor:pointer;
  accent-color:var(--green-500);
}
.ms-consent-label a{color:var(--green-300);text-decoration:underline;text-underline-offset:3px}
html[data-theme="light"] .ms-consent-label a{color:var(--green-500)}

/* Stats-Zahlen vertikale Ausrichtung Trennlinie */
.stats-row{position:relative}
@media (min-width:721px){
  .stat-item:not(:last-child){
    padding-right:48px;
    border-right:1px solid var(--line);
  }
  .stat-item:not(:first-child){padding-left:48px}
}

/* Services-Sektion dunkler Hintergrund für Kontrast */
#leistungen{background:var(--bg)}

/* Blog-Teaser — overridden by livelier backgrounds block below */

/* Mission — overridden by livelier backgrounds block below */

/* CTA: grün tinted */
#cta{background:radial-gradient(ellipse 80% 60% at 50% 100%, rgba(33,135,74,.12) 0%, transparent 70%),var(--bg)}

/* ============ PROJEKT-KARTEN (Fallback mit PNG) ============ */
.proj-img-wrap{position:relative;background:var(--surface-2)}
.proj-img-wrap img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block}

/* v7: alte Background-Position-Override entfernt (Tiles haben kein Hintergrundbild mehr) */

/* Mission Foto-Tiles: normale Bildposition */

/* Gal-Card Bild-Wrapper */
.gal-card .img{position:relative;overflow:hidden;border-radius:18px 18px 0 0;aspect-ratio:4/3;background:var(--surface-2)}
.gal-card .img img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block}

/* ============ PROJEKTE — Minimal-Card mit Glass-Badges ============ */
/* Dunkle Card umschließt Tabs + Content */
.proj-card{
  margin-top:48px;
  padding:40px;
  border-radius:32px;
  background:#0c0e0d;
  border:1px solid var(--line);
}
html[data-theme="light"] .proj-card{
  background:var(--surface);
  border-color:var(--line);
}
html[data-theme="light"] .proj-branch{
  color:var(--fg-2);
  background:var(--surface-2);
  border-color:var(--line);
}
html[data-theme="light"] .proj-branch.active{
  background:var(--fg);color:#fff;border-color:transparent;
}
html[data-theme="light"] .proj-review-text{color:var(--fg)}
html[data-theme="light"] .proj-review-by{color:var(--fg-3,var(--fg-2))}
.proj-grid{
  display:grid;grid-template-columns:280px 1fr;gap:40px;align-items:center;
}
@media (max-width:900px){
  /* Mobile: Content oben, Branchen unten als horizontaler Scroller */
  .proj-card{padding:24px;border-radius:24px}
  .proj-grid{grid-template-columns:1fr;gap:20px}
  .proj-content{order:1}
  .proj-branches{order:2}
}

/* Linke Spalte (Desktop) / unten (Mobile): Branchen-Liste */
.proj-branches{
  list-style:none;padding:0;margin:0;
  display:flex;flex-direction:column;gap:8px;
}
@media (max-width:900px){
  /* Horizontal-Scroller wie Apple iPhone-View */
  .proj-branches{
    flex-direction:row;gap:10px;
    overflow-x:auto;overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    padding:8px 24px 4px 0;
    margin:0 -24px 0 0;
    scroll-snap-type:x proximity;
    touch-action:pan-x;
  }
  .proj-branches::-webkit-scrollbar{display:none}
  .proj-branches > .proj-branch{flex:0 0 auto;scroll-snap-align:start;width:auto;white-space:nowrap}
}
.proj-branch{
  width:100%;
  display:flex;align-items:center;gap:14px;
  padding:14px 22px;border-radius:999px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
  font-size:15px;font-weight:500;letter-spacing:-0.012em;
  color:rgba(255,255,255,.78);text-align:left;cursor:pointer;
  transition:background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
}
.proj-branch:hover{border-color:rgba(255,255,255,.16);background:rgba(255,255,255,.07);color:#fff}
.proj-branch-text{flex:1}

/* Aktive Branche: dezenter Akzent, kein grüner Rahmen */
.proj-branch.active{
  background:rgba(255,255,255,.09);
  border-color:rgba(255,255,255,.18);
  color:#fff;
}

/* Rechte Spalte: Content */
.proj-content{position:relative;min-height:520px}
.proj-panel{display:none}
.proj-panel.active{display:flex;flex-direction:column;gap:24px}
/* Projekt-Name als h3 (SEO-Hierarchie: h2 Projekte → h3 Projektname) */
.proj-panel-title{
  font-size:var(--fwn-h3);font-weight:700;letter-spacing:-0.02em;
  color:var(--fg);margin:0;
  opacity:0; /* animation via active */
}
.proj-panel.active .proj-panel-title{
  animation:projRise .6s var(--ease-out) .05s both;
}
@media (prefers-reduced-motion:reduce){
  .proj-panel.active .proj-panel-title{animation:none;opacity:1}
}
/* Sanfter, gestaffelter Übergang beim Reiter-Wechsel:
   Bild zuerst, Kundenstimme leicht versetzt hinterher. */
.proj-panel.active .proj-screen{
  animation: projRise .6s var(--ease-out) both;
}
.proj-panel.active .proj-review{
  animation: projRise .6s var(--ease-out) .1s both;
}
@keyframes projRise{
  from{opacity:0;transform:translateY(20px) scale(.985)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
@media (prefers-reduced-motion:reduce){
  .proj-panel.active .proj-screen,
  .proj-panel.active .proj-review{animation:none}
}
@media (max-width:900px){
  .proj-content{min-height:auto}
}

/* Linke Spalte */
.proj-label{
  display:inline-block;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--green-300);border:1px solid var(--green-500);border-radius:999px;
  padding:4px 12px;margin-bottom:28px;
}
html[data-theme="light"] .proj-label{color:var(--green-500)}
/* Schatten von unten nach oben — macht Overlays lesbar */
.proj-screen-shade{
  position:absolute;inset:0;
  background:linear-gradient(to top, rgba(0,0,0,.65) 0%, rgba(0,0,0,.25) 35%, transparent 65%);
  pointer-events:none;
  z-index:1;
}

/* Glass-Badges: Overlay auf dem Screenshot, unten links */
.proj-badges{
  position:absolute;left:16px;bottom:16px;
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;gap:6px;
  pointer-events:none;
  z-index:2;
  max-width:60%;
}
.proj-badges li{
  font-size:11px;font-weight:600;letter-spacing:.01em;
  padding:5px 11px;border-radius:999px;
  color:#fff;
  background:rgba(20,22,21,.42);
  border:1px solid rgba(255,255,255,.2);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
}

/* Live-Link als Glass-Overlay, unten rechts im Bild */
.proj-live{
  position:absolute;right:16px;bottom:16px;
  display:inline-flex;align-items:center;gap:10px;
  padding:7px 14px;border-radius:999px;
  background:rgba(20,22,21,.42);
  border:1px solid rgba(255,255,255,.2);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  font-size:12px;font-weight:500;letter-spacing:-0.005em;color:#fff;
  text-decoration:none;
  z-index:2;
  transition:background .25s var(--ease), border-color .25s var(--ease);
}
.proj-live:hover{
  background:rgba(20,22,21,.6);
  border-color:rgba(255,255,255,.32);
}
.proj-live-dot{
  width:8px;height:8px;border-radius:50%;
  background:var(--green-500);
  box-shadow:0 0 0 0 rgba(33,135,74,.55);
  animation:projLivePulse 1.8s var(--ease-out) infinite;
  flex-shrink:0;
}
@keyframes projLivePulse{
  0%{box-shadow:0 0 0 0 rgba(33,135,74,.55)}
  70%{box-shadow:0 0 0 10px rgba(33,135,74,0)}
  100%{box-shadow:0 0 0 0 rgba(33,135,74,0)}
}
.proj-live-text{font-feature-settings:"tnum"}
.proj-live-arrow{
  display:flex;align-items:center;justify-content:center;
  color:rgba(255,255,255,.55);transition:transform .25s var(--ease-out), color .25s var(--ease);
}
.proj-live:hover .proj-live-arrow{transform:translate(2px,-2px);color:#fff}
@media (prefers-reduced-motion:reduce){
  .proj-live-dot{animation:none}
}

/* Kundenstimme unter dem Bild */
.proj-review{
  position:relative;margin:24px 0 0;padding:0 4px;
  display:flex;flex-direction:column;gap:8px;
}
.proj-review-quote{
  width:22px;height:22px;color:var(--green-300);opacity:.55;
}
.proj-review-text{
  margin:0;font-size:clamp(15px,1.35vw,18px);line-height:1.5;
  font-weight:500;letter-spacing:-0.005em;
  color:rgba(255,255,255,.92);
  font-style:normal;
}
.proj-review-by{
  font-size:12px;font-weight:500;letter-spacing:.01em;
  color:rgba(255,255,255,.55);
  text-transform:uppercase;
}
@media (max-width:720px){
  .proj-badges{left:12px;bottom:12px;max-width:65%}
  .proj-live{right:12px;bottom:12px;font-size:11px;padding:6px 12px}
  .proj-live-text{display:none}
  .proj-review-text{font-size:14px}
}
/* Rechte Spalte: Screenshot — flach, ohne Tilt */
.proj-screen-3d{
  border-radius:20px;overflow:hidden;border:1px solid rgba(255,255,255,.08);
  background:#0e1110;
  box-shadow:0 32px 64px -16px rgba(0,0,0,.55);
}
.proj-screen-wrap{position:relative;overflow:hidden;aspect-ratio:16/10}
.proj-screen img{width:100%;height:100%;display:block;object-fit:cover;object-position:center top}

/* Logo-Modus: gleiches Seitenverhältnis wie Screenshots, Logo zentriert */
.proj-screen-logo .proj-screen-wrap{
  background:linear-gradient(135deg, #0c2351 0%, #1a3a7a 100%);
  display:flex;align-items:center;justify-content:center;padding:40px;
}
.proj-screen-logo .proj-screen-wrap img{
  width:auto;height:auto;max-width:55%;max-height:70%;
  object-fit:contain;object-position:center;
  filter:drop-shadow(0 12px 24px rgba(0,0,0,.35));
}
@media (prefers-reduced-motion: reduce){
  .proj-screen-3d{transform:none;transition:none}
}

/* CTA-Block */
.proj-cta{margin-top:32px}
.proj-cta-inner{
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  background:var(--surface);border:1px solid var(--line);border-radius:20px;
  padding:28px 36px;
}
html[data-theme="light"] .proj-cta-inner{background:var(--surface-2)}
.proj-cta-text{display:none;font-size:18px;font-weight:600;letter-spacing:-0.015em;margin-bottom:6px}
.proj-cta-text.active{display:block;animation: projFadeText .5s var(--ease-out) both}
@keyframes projFadeText{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){.proj-cta-text.active{animation:none}}
.proj-cta-inner p{font-size:14px;color:var(--fg-2)}

/* Instagram-Icon im Header */
.top-ig{
  display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:50%;color:var(--fg);opacity:.75;
  transition:opacity .2s var(--ease),background .2s var(--ease);
}
.top-ig:hover{opacity:1;background:color-mix(in oklab, var(--fg) 8%, transparent)}


/* Preisrechner-Section padding anpassen */
.preisrechner-section{padding-top:140px;padding-bottom:140px}
@media (max-width:720px){.preisrechner-section{padding-top:96px;padding-bottom:96px}}

/* ============ PROZESS — SVG-Illustrationen ============ */
.proc-vis-card{
  position:relative;overflow:hidden;
}
.proc-icon{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  padding:12%;
  color:var(--green-300);
  opacity:0;
  transform:scale(.88) translateY(16px);
  transition:opacity .55s var(--ease-out), transform .55s var(--ease-out);
  pointer-events:none;
}
.proc-icon svg{width:100%;max-width:180px;height:auto}
.proc-icon.active{opacity:1;transform:scale(1) translateY(0)}
html[data-theme="light"] .proc-icon{color:var(--green-500)}

/* Remove legacy procVisLabel */
#procVisLabel{display:none}

/* ============ HOVER ANIMATIONS — Cards & Tiles ============ */
/* Testimonial cards */
.tm-card{
  transition:transform .4s var(--ease-out), border-color .3s var(--ease), box-shadow .4s var(--ease-out);
}
.tm-card:hover{transform:translateY(-4px);border-color:var(--line-2);box-shadow:0 16px 40px -10px rgba(0,0,0,.35)}
html[data-theme="light"] .tm-card:hover{box-shadow:0 16px 40px -10px rgba(0,0,0,.1)}

/* Proc stops hover */
.proc-stop{
  cursor:default;
  transition:opacity .4s var(--ease), transform .4s var(--ease-out);
}
.proc-stop:hover:not(.active){opacity:.6;transform:translateX(4px)}
.proc-stop.active{transform:translateX(0)}

/* Stat items */
.stat-item{
  transition:transform .4s var(--ease-out);
  cursor:default;
}
/* Trust-Werte bewusst statisch — kein Hover-State (User-Wunsch).
   Animation: Count-up beim Scrollen via JS (siehe stats-counter.js) */
.stat-num{
  font-feature-settings:"tnum";font-variant-numeric:tabular-nums;
}

/* v7: Service-Tile-Hover wird in der neuen .svc-tile-Definition oben gesteuert */

/* ============ REVEAL — gestaffeltes Einblenden ============ */

/* Stagger für Grid-Kinder */
.tm-grid .reveal:nth-child(2){transition-delay:.1s}
.tm-grid .reveal:nth-child(3){transition-delay:.2s}
.blog-grid .reveal:nth-child(2){transition-delay:.1s}
.blog-grid .reveal:nth-child(3){transition-delay:.2s}
.stats-row .stat-item.reveal:nth-child(2){transition-delay:.14s}
.stats-row .stat-item.reveal:nth-child(3){transition-delay:.28s}

/* ============ LIVELIER BACKGROUNDS — Sektionen ============ */
/* Stats: grüner Ambient-Glow */
#zahlen{
  background:
    radial-gradient(ellipse 70% 50% at 15% 80%, rgba(33,135,74,.09) 0%, transparent 65%),
    radial-gradient(ellipse 50% 40% at 85% 20%, rgba(156,207,146,.06) 0%, transparent 60%),
    var(--bg-2);
}
html[data-theme="light"] #zahlen{
  background:
    radial-gradient(ellipse 70% 50% at 15% 80%, rgba(33,135,74,.06) 0%, transparent 65%),
    radial-gradient(ellipse 50% 40% at 85% 20%, rgba(33,135,74,.04) 0%, transparent 60%),
    var(--bg-2);
}

/* Prozess: tiefes Grün-Glow auf der rechten Seite (vis-Bereich) */
#process{
  background:
    radial-gradient(ellipse 60% 70% at 80% 50%, rgba(33,135,74,.1) 0%, transparent 65%),
    var(--surface);
}

/* Testimonials: Licht von oben-mitte */
#testimonials{
  background:
    radial-gradient(ellipse 80% 45% at 50% 0%, rgba(33,135,74,.08) 0%, transparent 60%),
    var(--bg-2);
}

/* Projekte: etwas abgehobene Fläche */
#projekte{
  background:
    radial-gradient(ellipse 60% 40% at 80% 0%, rgba(33,135,74,.08) 0%, transparent 55%),
    var(--bg-2);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}

/* Mission: dunkler mit subtiler grüner Tönung */
#mission{
  background:
    radial-gradient(ellipse 55% 45% at 0% 100%, rgba(33,135,74,.08) 0%, transparent 60%),
    radial-gradient(ellipse 45% 40% at 100% 0%, rgba(156,207,146,.05) 0%, transparent 55%),
    var(--bg);
}

/* Wissen-Teaser: Ambient warm */
#wissen-teaser{
  background:
    radial-gradient(ellipse 60% 50% at 90% 80%, rgba(33,135,74,.07) 0%, transparent 60%),
    var(--bg-2);
  border-top:1px solid var(--line);
}

/* FAQ: dunkles Umfeld */
#faq{
  background:
    radial-gradient(ellipse 50% 40% at 50% 100%, rgba(33,135,74,.06) 0%, transparent 55%),
    var(--bg);
}

/* Preisrechner: grünes Spotlight */
.preisrechner-section{
  background:
    radial-gradient(ellipse 65% 55% at 50% 0%, rgba(33,135,74,.1) 0%, transparent 60%),
    var(--surface);
}

/* ============ SCROLL PARALLAX — Section-Hintergründe ============ */
/* (Stat-Glow-Animation entfernt — Werte sollen ruhig zählen, nicht leuchten) */

/* v7: Floating-Animation auf CTA-Button entfernt — Button steht jetzt statisch wie Hero */

/* ============================================================
   SUBPAGE CSS — Leistungen, Kontakt, Über uns, Wissen/Archiv
   ============================================================ */

/* ── Shared subpage hero typography ─────────────────────────── */
.l-hero-h1{
  font-size:clamp(44px,6.5vw,88px);font-weight:700;letter-spacing:-0.045em;line-height:1.05;
  margin:16px 0 0;
  opacity:0;animation:rise 1s var(--ease-out) .2s forwards;
}
.l-hero-sub{max-width:52ch;margin:20px auto 0;font-size:clamp(17px,1.6vw,21px);color:var(--fg-2);line-height:1.5;opacity:0;animation:rise-blur .9s var(--ease-out) 1s forwards}
.l-hero-cta{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:36px;opacity:0;animation:rise .8s var(--ease-out) 1.2s forwards}
.l-sec-title{font-size:var(--fwn-h2);font-weight:700;letter-spacing:-0.035em;line-height:1.08}
.l-body{font-size:17px;line-height:1.65;color:var(--fg-2);margin-top:20px}


/* ── About section ────────────────────────────────────────────── */
.l-about{background:var(--bg-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.l-about-text{display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.l-about-visual{display:flex;align-items:center;justify-content:center}
/* Echtes Bild (z. B. Responsive-Mockup) im About-Bereich */
.l-about-visual-img img{width:100%;height:auto;display:block;border-radius:18px}

/* Browser-Card Mockup */
.l-about-card{
  width:100%;max-width:420px;
  background:var(--surface);border:1px solid var(--line);border-radius:18px;
  overflow:hidden;padding:20px;
  box-shadow:0 32px 64px -20px rgba(0,0,0,.45);
}
html[data-theme="light"] .l-about-card{box-shadow:0 24px 48px -16px rgba(0,0,0,.12)}
.l-about-dots{display:flex;gap:7px;margin-bottom:18px}
.l-about-dots span{width:10px;height:10px;border-radius:50%;background:var(--surface-2)}
.l-about-dots span:nth-child(1){background:#ff5f57}
.l-about-dots span:nth-child(2){background:#febc2e}
.l-about-dots span:nth-child(3){background:#28c840}
.l-about-lines{display:flex;flex-direction:column;gap:10px}
.l-about-lines span{height:10px;border-radius:999px;background:var(--surface-2);display:block}

/* ── Sub-Leistungen ────────────────────────────────────────────── */
.l-subs{background:var(--bg)}
.l-sub-icon{font-size:28px;margin-bottom:16px;line-height:1}

/* ── Referenz-Projekte ────────────────────────────────────────── */
.l-refs{background:var(--bg-2);border-top:1px solid var(--line)}

/* ── Prozess auf Leistungsseite ────────────────────────────────── */
.l-process{background:var(--bg)}
.l-process-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:64px;align-items:start}
@media (max-width:980px){.l-process-grid{grid-template-columns:1fr;gap:48px}}
.l-process-photo{
  position:sticky;top:120px;
  border-radius:24px;overflow:hidden;
  aspect-ratio:4/5;background:var(--surface-2);
  box-shadow:0 24px 56px -16px rgba(0,0,0,.4);
}
html[data-theme="light"] .l-process-photo{box-shadow:0 24px 56px -16px rgba(0,0,0,.14)}
.l-process-photo img{width:100%;height:100%;object-fit:cover;display:block}
.l-process-photo-tag{
  position:absolute;left:18px;bottom:18px;
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 14px;border-radius:999px;
  background:rgba(0,0,0,.6);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  color:#fff;font-size:13px;font-weight:500;
}
.l-process-photo-dot{
  width:8px;height:8px;border-radius:50%;background:var(--green-400);
  animation:tag-pulse 2.4s var(--ease-out) infinite;
}
@media (max-width:980px){.l-process-photo{position:relative;top:auto;aspect-ratio:16/10;max-height:420px}}
@media (max-width:480px){
  .l-process-photo{aspect-ratio:4/5;max-height:none;border-radius:20px;}
  .l-process-photo img{object-position:center 18%;}
  .l-process-photo-tag{left:14px;bottom:14px;padding:7px 12px;font-size:12px;}
}

.l-process-steps{display:flex;flex-direction:column;gap:0;max-width:760px}
.l-step{
  display:grid;grid-template-columns:60px 1fr;align-items:start;gap:24px;
  position:relative;
}
.l-step-num{
  width:52px;height:52px;border-radius:50%;
  background:var(--surface);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;
  font-size:15px;font-weight:700;letter-spacing:-0.01em;color:var(--green-300);
  flex-shrink:0;
}
html[data-theme="light"] .l-step-num{color:var(--green-500)}
.l-step-body{padding:12px 0 40px}
.l-step-body h3{font-size:20px;font-weight:600;letter-spacing:-0.02em;margin-bottom:8px}
.l-step-body p{font-size:15px;color:var(--fg-2);line-height:1.55}
.l-step-line{
  position:absolute;left:25px;top:52px;bottom:-8px;
  width:2px;background:var(--line);
}
@media (max-width:640px){
  .l-step{grid-template-columns:44px 1fr;gap:14px}
  .l-step-num{width:40px;height:40px;font-size:13px}
  .l-step-line{left:19px;top:40px}
}

/* ── Testimonial-Sektion (Leistungsseite) ─────────────────────── */
.l-testi{background:var(--bg-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.testi-avatar-ph{width:48px;height:48px;border-radius:50%;background:var(--surface-2);flex-shrink:0}


/* ============================================================
   KONTAKT (k-* prefix)
   ============================================================ */
.k-hero{padding:160px 0 56px;text-align:center}
.k-hero-inner{max-width:640px;margin:0 auto;padding:0 24px}

/* Persönlicher Trust im Kontakt-Hero: Ferdi & Dani */
.k-people{
  display:flex;align-items:center;justify-content:center;gap:16px;
  flex-wrap:wrap;
  margin-top:32px;
}
.k-people-avatars{display:inline-flex}
.k-people-avatar{
  width:52px;height:52px;border-radius:50%;
  object-fit:cover;object-position:center top;
  border:2px solid var(--bg);
  background:var(--surface-2);
  box-shadow:0 4px 14px -4px rgba(0,0,0,.5);
}
.k-people-avatar:not(:first-child){margin-left:-16px}
.k-people-text{
  font-size:14px;line-height:1.5;color:var(--fg-2);
  max-width:42ch;text-align:left;margin:0;
}
.k-people-text strong{color:var(--fg);font-weight:600}
@media (max-width:560px){
  .k-people{flex-direction:column;gap:12px}
  .k-people-text{text-align:center}
}

/* "(optional)" Label im Formular */
.ms-optional{font-weight:400;color:var(--fg-2);opacity:.7}

/* Trust-Strip */
.k-trust{padding:0 0 80px}
.k-trust-row{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:20px;overflow:hidden;
}
@media (max-width:720px){.k-trust-row{grid-template-columns:repeat(3,1fr)}}
@media (max-width:440px){.k-trust-row{grid-template-columns:1fr}}
.k-trust-item{
  background:var(--surface);padding:28px 20px;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:8px;
}
.k-trust-num{font-size:clamp(26px,3vw,36px);font-weight:700;letter-spacing:-0.04em;
  background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;color:transparent}
.k-trust-label{font-size:13px;color:var(--fg-2);font-weight:500}

/* Form — full width */
.k-main{padding-bottom:80px}
.k-form-title{font-size:var(--fwn-h2);font-weight:700;letter-spacing:-0.035em;line-height:1.08;margin-bottom:32px}

/* Info section below form */
.k-info-section{padding:0 0 100px}
.k-info-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
@media (max-width:720px){
  .k-info-grid{grid-template-columns:1fr}
  /* Mobile: „Was passiert danach?" zuerst, dann „Direkt erreichbar" */
  .k-info-grid .k-info-card:first-child{order:2}
  .k-info-grid .k-info-card:last-child{order:1}
}
.k-info-card{
  background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:28px;
}
.k-info-card h3{font-size:17px;font-weight:600;letter-spacing:-0.015em;margin-bottom:18px}

/* Contact list */
.k-contact-list{list-style:none;display:flex;flex-direction:column;gap:18px}
.k-contact-list li{display:grid;grid-template-columns:96px 1fr;gap:14px;align-items:start}
.k-contact-eye{font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--fg-2);padding-top:2px}
.k-contact-list address{font-style:normal;font-size:15px;line-height:1.5}
.k-contact-list span, .k-contact-list a{font-size:15px;line-height:1.5}

/* Steps: was passiert danach */
.k-steps{list-style:none;display:flex;flex-direction:column;gap:20px}
.k-steps li{display:grid;grid-template-columns:40px 1fr;gap:14px;align-items:start}
.k-step-num{
  width:36px;height:36px;border-radius:50%;
  background:color-mix(in oklab,var(--green-500) 15%,transparent);
  color:var(--green-300);
  display:flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:700;flex-shrink:0;
}
html[data-theme="light"] .k-step-num{color:var(--green-500)}
.k-steps strong{font-size:15px;font-weight:600;display:block;margin-bottom:4px}
.k-steps p{font-size:13px;color:var(--fg-2);line-height:1.5;margin:0}

/* Map: Bayern mit Manching-Pin */
.k-map-section{padding:0 0 100px}
.k-map-section .sec-head{margin-bottom:48px}
.bayern-sub{
  font-size:16px;color:var(--fg-2);max-width:60ch;margin:18px auto 0;line-height:1.55;
}
.bayern-map{
  display:grid;grid-template-columns:1.2fr 1fr;gap:56px;align-items:center;
  background:var(--surface);border:1px solid var(--line);border-radius:28px;
  padding:56px;
}
@media (max-width:900px){.bayern-map{grid-template-columns:1fr;gap:36px;padding:32px}}
.bayern-map svg{width:100%;height:auto;display:block;max-width:520px;margin:0 auto}

.bayern-shape{
  fill:color-mix(in oklab,var(--green-500) 8%,var(--surface-2));
  stroke:var(--green-500);stroke-width:1.8;stroke-linejoin:round;
  filter:drop-shadow(0 12px 32px rgba(33,135,74,.18));
}
html[data-theme="light"] .bayern-shape{fill:color-mix(in oklab,var(--green-500) 6%,#fff)}

.bayern-pin-marker{fill:var(--green-500);stroke:none}
.bayern-pin .bayern-pin-dot{fill:#fff}
.bayern-pin-main .bayern-pin-pulse,
.bayern-pin-main .bayern-pin-pulse-2{
  fill:var(--green-500);opacity:.18;
  transform-origin:252px 276px;
}
.bayern-pin-main .bayern-pin-pulse{animation:bayern-pulse 2.6s var(--ease-out) infinite}
.bayern-pin-main .bayern-pin-pulse-2{animation:bayern-pulse 2.6s var(--ease-out) infinite .9s;opacity:.28}
@keyframes bayern-pulse{
  0%{transform:scale(.4);opacity:.55}
  100%{transform:scale(2);opacity:0}
}

/* Right column: Manching-Pin + Trust-Liste */
.bayern-side{display:flex;flex-direction:column;gap:28px}
.bayern-side-pin{
  display:flex;align-items:center;gap:14px;
  padding:18px 22px;
  background:color-mix(in oklab,var(--green-500) 8%,var(--surface-2));
  border:1px solid color-mix(in oklab,var(--green-500) 25%,var(--line));
  border-radius:18px;
}
.bayern-side-pin strong{display:block;font-size:18px;font-weight:600;letter-spacing:-0.02em}
.bayern-side-dot{
  width:14px;height:14px;border-radius:50%;background:var(--green-500);
  flex-shrink:0;box-shadow:0 0 0 5px color-mix(in oklab,var(--green-500) 20%,transparent);
}
.bayern-trust{
  list-style:none;display:flex;flex-direction:column;gap:18px;padding:0;margin:0;
}
.bayern-trust li{
  padding:0 0 18px;border-bottom:1px solid var(--line);
}
.bayern-trust li:last-child{border-bottom:0;padding-bottom:0}
.bayern-trust strong{
  display:block;font-size:15px;font-weight:600;letter-spacing:-0.012em;margin-bottom:4px;
}
.bayern-trust span{font-size:14px;color:var(--fg-2);line-height:1.5}
.bayern-list-meta{font-size:13px;color:var(--fg-2);font-weight:500}

/* FAQ on Kontakt */
.k-faq{padding-bottom:80px}

/* ============================================================
   ÜBER UNS (u-* prefix)
   ============================================================ */
/* Hero */
.u-hero{padding:140px 0 80px;position:relative;overflow:hidden}
.u-hero::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(ellipse 60% 45% at 90% 20%, rgba(33,135,74,.08) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 10% 90%, rgba(156,207,146,.05) 0%, transparent 55%);
}
.u-hero-grid{
  display:grid;grid-template-columns:1.05fr 1fr;gap:72px;align-items:center;
}
@media (max-width:980px){.u-hero-grid{grid-template-columns:1fr;gap:48px}}
.u-hero-text{display:flex;flex-direction:column;align-items:flex-start;gap:0}
.u-hero-h1{
  font-size:clamp(44px,6.5vw,84px);font-weight:700;letter-spacing:-0.04em;line-height:.98;
  margin:14px 0 24px;
}
.u-hero-sub{
  font-size:clamp(17px,1.5vw,20px);color:var(--fg-2);line-height:1.55;
  max-width:48ch;margin:0 0 36px;
}
.u-hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:48px}
.u-hero-meta{
  display:flex;align-items:center;gap:24px;flex-wrap:wrap;
  padding-top:32px;border-top:1px solid var(--line);width:100%;
}
.u-hero-meta-item{display:flex;flex-direction:column;gap:2px}
.u-hero-meta-item strong{
  font-size:clamp(24px,2.5vw,30px);font-weight:700;letter-spacing:-0.03em;
  background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.u-hero-meta-item span{font-size:13px;color:var(--fg-2);font-weight:500}
.u-hero-meta-divider{width:1px;height:32px;background:var(--line)}
@media (max-width:520px){
  .u-hero-meta{gap:14px;justify-content:space-between;flex-wrap:nowrap}
  .u-hero-meta-divider{display:none}
  .u-hero-meta-item strong{font-size:24px}
  .u-hero-meta-item span{font-size:11px;line-height:1.3}
}

.u-hero-photo{
  position:relative;border-radius:32px;overflow:hidden;
  aspect-ratio:4/5;background:var(--surface-2);
  box-shadow:0 32px 64px -16px rgba(0,0,0,.45);
  transform:rotate(1.5deg);
  transition:transform .5s var(--ease-out);
}
html[data-theme="light"] .u-hero-photo{box-shadow:0 24px 48px -12px rgba(0,0,0,.16)}
.u-hero-photo:hover{transform:rotate(0deg) scale(1.01)}
.u-hero-photo img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.u-hero-photo-tag{
  position:absolute;left:20px;bottom:20px;
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 14px;border-radius:999px;
  background:rgba(0,0,0,.6);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  color:#fff;font-size:13px;font-weight:500;
}
.u-hero-photo-tag-dot{
  width:8px;height:8px;border-radius:50%;background:var(--green-400);
  box-shadow:0 0 0 0 rgba(33,135,74,.5);
  animation:tag-pulse 2.4s var(--ease-out) infinite;
}
@keyframes tag-pulse{
  0%{box-shadow:0 0 0 0 rgba(33,135,74,.5)}
  100%{box-shadow:0 0 0 12px rgba(33,135,74,0)}
}

/* Studio-Section: Masonry-Gallery */
/* =============================================================
   ÜBER UNS — Hero + 3D-Orbit: Text zentral, Bilder schweben in 3D
   ============================================================= */
.u-orbit-hero{
  position:relative;overflow:hidden;
  padding:clamp(120px,15vh,170px) 0 clamp(70px,9vh,110px);
}

.u-orbit{
  position:relative;
  width:100%;max-width:1280px;margin:0 auto;
  height:min(82vh,720px);
  perspective:1500px;
  perspective-origin:50% 50%;
  display:flex;align-items:center;justify-content:center;
}

/* Glow hinter dem Hero-Text */
.u-orbit-glow{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(480px,72%);height:260px;border-radius:50%;
  background:radial-gradient(ellipse at center, rgba(33,135,74,.18), rgba(33,135,74,.05) 50%, transparent 75%);
  filter:blur(18px);
  z-index:1;
}

/* Hero-Text als Herzstück */
.u-orbit-center{
  position:relative;z-index:5;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;max-width:680px;padding:0 24px;
}
.u-orbit-logo{
  height:clamp(26px,3vw,42px);width:auto;display:block;margin:0 auto 6px;
  filter:drop-shadow(0 2px 8px rgba(0,0,0,.3));
  opacity:0;animation:rise .7s var(--ease-out) .9s forwards;
}
.u-orbit-logo-dark{display:block}
.u-orbit-logo-light{display:none}
html[data-theme="light"] .u-orbit-logo-dark{display:none}
html[data-theme="light"] .u-orbit-logo-light{display:block}
.u-orbit-h1{
  font-size:clamp(40px,6.4vw,88px);font-weight:700;letter-spacing:-0.045em;
  line-height:1.04;margin:14px 0 0;
  text-shadow:0 2px 12px rgba(0,0,0,.18);
  opacity:0;animation:rise 1s var(--ease-out) 1.1s forwards;
}
.u-orbit-cta{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:30px;opacity:0;animation:rise .8s var(--ease-out) 1.3s forwards}

/* Schwebende Bild-Kacheln */
.u-orbit-item{
  position:absolute;
  border-radius:18px;overflow:hidden;
  background:var(--surface-2);
  box-shadow:0 30px 60px -22px rgba(0,0,0,.65);
  border:1px solid rgba(255,255,255,.06);
  transform-style:preserve-3d;
  z-index:3;
}
.u-orbit-item img{width:100%;height:100%;object-fit:cover;object-position:center 24%;display:block}

/* innerer Wrapper trägt die endlose Schwebebewegung,
   die 3D-Drehung sitzt auf dem .u-orbit-item selbst */
.u-orbit-float{width:100%;height:100%;animation:orbit-float 9s ease-in-out infinite}
@keyframes orbit-float{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-8px)}
}
@media (prefers-reduced-motion:reduce){.u-orbit-float{animation:none}}

/* Positionen + räumliche Tiefe je Kachel.
   --oy wird per JS für die Scroll-Parallax gesetzt (außen, reiner Screen-Shift),
   danach folgt die feste 3D-Drehung der Kachel. */
.u-orbit-item--1 {left:0;top:7%;    width:184px;height:238px;transform:translateY(var(--oy,0px)) rotateY(18deg)  rotateX(6deg)  translateZ(40px)}
.u-orbit-item--2 {right:0;top:4%;   width:160px;height:208px;transform:translateY(var(--oy,0px)) rotateY(-20deg) rotateX(5deg)  translateZ(20px)}
.u-orbit-item--3 {left:2%;bottom:5%; width:168px;height:218px;transform:translateY(var(--oy,0px)) rotateY(14deg)  rotateX(-7deg) translateZ(60px)}
.u-orbit-item--4 {right:1%;bottom:3%;width:174px;height:226px;transform:translateY(var(--oy,0px)) rotateY(-16deg) rotateX(-6deg) translateZ(50px)}
.u-orbit-item--5 {left:15%;top:-2%;  width:120px;height:156px;transform:translateY(var(--oy,0px)) rotateY(10deg)  rotateX(8deg)  translateZ(-40px)}
.u-orbit-item--6 {right:16%;top:-3%; width:124px;height:160px;transform:translateY(var(--oy,0px)) rotateY(-12deg) rotateX(7deg)  translateZ(-30px)}
.u-orbit-item--7 {left:14%;bottom:-2%;width:122px;height:158px;transform:translateY(var(--oy,0px)) rotateY(13deg)  rotateX(-8deg) translateZ(-20px)}
.u-orbit-item--8 {right:15%;bottom:-3%;width:118px;height:152px;transform:translateY(var(--oy,0px)) rotateY(-11deg) rotateX(-7deg) translateZ(-50px)}
.u-orbit-item--9 {left:4%;top:39%;   width:128px;height:166px;transform:translateY(var(--oy,0px)) rotateY(22deg)  translateZ(0)}
.u-orbit-item--10{right:3%;top:37%;  width:134px;height:174px;transform:translateY(var(--oy,0px)) rotateY(-22deg) translateZ(30px)}
.u-orbit-item--11{left:8%;top:61%;   width:112px;height:146px;transform:translateY(var(--oy,0px)) rotateY(16deg)  rotateX(-4deg) translateZ(-60px)}
.u-orbit-item--12{right:9%;top:63%;  width:110px;height:142px;transform:translateY(var(--oy,0px)) rotateY(-15deg) rotateX(-4deg) translateZ(-70px)}

/* gestaffelte Float-Delays für ein lebendiges Bild */
.u-orbit-item--1  .u-orbit-float{animation-duration:9s;animation-delay:0s}
.u-orbit-item--2  .u-orbit-float{animation-duration:11s;animation-delay:-2s}
.u-orbit-item--3  .u-orbit-float{animation-duration:10s;animation-delay:-4s}
.u-orbit-item--4  .u-orbit-float{animation-duration:12s;animation-delay:-1s}
.u-orbit-item--5  .u-orbit-float{animation-duration:8s;animation-delay:-3s}
.u-orbit-item--6  .u-orbit-float{animation-duration:13s;animation-delay:-5s}
.u-orbit-item--7  .u-orbit-float{animation-duration:10.5s;animation-delay:-2.5s}
.u-orbit-item--8  .u-orbit-float{animation-duration:9.5s;animation-delay:-4.5s}
.u-orbit-item--9  .u-orbit-float{animation-duration:11.5s;animation-delay:-1.5s}
.u-orbit-item--10 .u-orbit-float{animation-duration:8.5s;animation-delay:-3.5s}
.u-orbit-item--11 .u-orbit-float{animation-duration:12.5s;animation-delay:-2.2s}
.u-orbit-item--12 .u-orbit-float{animation-duration:9.8s;animation-delay:-4.8s}

/* Tablet */
@media (max-width:1100px){
  .u-orbit{height:600px;max-width:760px}
  .u-orbit-item--1,.u-orbit-item--2,.u-orbit-item--3,.u-orbit-item--4{width:138px;height:180px}
  .u-orbit-item--5,.u-orbit-item--6,.u-orbit-item--7,.u-orbit-item--8,
  .u-orbit-item--9,.u-orbit-item--10,.u-orbit-item--11,.u-orbit-item--12{width:104px;height:136px}
}

/* Mobile: kompakter, vier Eck- + zwei Seiten-Kacheln */
@media (max-width:760px){
  .u-orbit{height:480px;perspective:900px}
  .u-orbit-glow{width:82%;height:250px}
  .u-orbit-item--7,.u-orbit-item--8,.u-orbit-item--11,.u-orbit-item--12{display:none}
  .u-orbit-item--1 {left:0;top:5%;    width:112px;height:146px}
  .u-orbit-item--2 {right:0;top:3%;   width:104px;height:136px}
  .u-orbit-item--3 {left:2%;bottom:5%; width:108px;height:140px}
  .u-orbit-item--4 {right:0;bottom:3%; width:114px;height:148px}
  .u-orbit-item--5 {left:18%;top:-1%;  width:84px;height:110px}
  .u-orbit-item--6 {right:19%;top:-2%; width:84px;height:110px}
  .u-orbit-item--9 {left:0;top:42%;    width:92px;height:120px}
  .u-orbit-item--10{right:0;top:40%;   width:96px;height:124px}
  .u-orbit-center img{height:clamp(34px,9vw,48px)}
}
/* Smartphone: volle Reihen oben + unten, Überschrift in der Mitte */
@media (max-width:480px){
  .u-orbit{height:620px;perspective:800px}
  .u-orbit-glow{height:220px;width:68%}
  /* Mittlere Spalten (9,10) ausblenden — obere/untere Reihe voll besetzen */
  .u-orbit-item--9,.u-orbit-item--10{display:none}

  /* ── Obere Reihe: 4 Bilder edge-to-edge, ∩-Kurve um Überschrift ──
     Innere Bilder (5,6) oben → höher, äußere (1,2) tiefer → legt sich um den Text. */
  .u-orbit-item--1{left:0;  top:10%;width:82px;height:106px;border-radius:13px}
  .u-orbit-item--5{display:block;left:27%;top:0%; width:76px;height:98px;border-radius:13px}
  .u-orbit-item--6{display:block;right:27%;top:0%;width:76px;height:98px;border-radius:13px}
  .u-orbit-item--2{right:0; top:8%;width:80px;height:104px;border-radius:13px}

  /* ── Untere Reihe: 4 Bilder edge-to-edge, nach unten gebeugt (∪) ──
     Außen höher (großes bottom), Mitte tiefer (kleines bottom) → Reihe sinkt mittig ab. */
  .u-orbit-item--3{left:0;  bottom:8%;width:82px;height:106px;border-radius:13px}
  .u-orbit-item--7{display:block;left:27%;bottom:0%;width:76px;height:98px;border-radius:13px}
  .u-orbit-item--8{display:block;right:27%;bottom:0%;width:76px;height:98px;border-radius:13px}
  .u-orbit-item--4{right:0; bottom:8%;width:80px;height:104px;border-radius:13px}

  /* Überschrift: fast volle Breite */
  .u-orbit-h1{font-size:clamp(34px,8.8vw,50px);padding:0 8px}
  .u-orbit-center{padding:0 16px}
}

/* Bio Alternating Grid */
.u-bio{
  display:grid;grid-template-columns:380px 1fr;gap:72px;align-items:start;
  padding:80px 0;border-bottom:1px solid var(--line);
}
.u-bio:last-of-type{border-bottom:0}
.u-bio--alt{grid-template-columns:1fr 380px}
.u-bio--alt .u-bio-photo{order:2}
.u-bio--alt .u-bio-text{order:1}
@media (max-width:900px){
  .u-bio,.u-bio--alt{grid-template-columns:1fr;gap:36px}
  .u-bio--alt .u-bio-photo{order:0}
  .u-bio--alt .u-bio-text{order:0}
}

.u-bio-photo{border-radius:24px;overflow:hidden;aspect-ratio:4/5;background:var(--surface-2)}
.u-bio-photo img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block}
.u-bio-text{padding-top:8px}
.u-bio-lead{font-size:18px;font-weight:500;line-height:1.55;margin:12px 0 20px;color:var(--fg)}
.u-bio-body{font-size:15px;color:var(--fg-2);line-height:1.65;margin-bottom:14px}

/* Story Section */
.u-story-sec{padding:clamp(80px,10vh,140px) 0;border-bottom:1px solid var(--line)}
.u-story{display:grid;grid-template-columns:1fr 1.4fr;gap:clamp(48px,7vw,100px);align-items:start}
.u-story-lead{position:sticky;top:110px}
.u-story-h2{font-family:var(--font);font-size:clamp(34px,4.2vw,58px);font-weight:700;letter-spacing:-0.035em;line-height:1.08;margin:14px 0 0}
.u-story-text p{font-size:clamp(15px,1.1vw,17px);color:var(--fg-2);line-height:1.7;margin-bottom:18px}
.u-story-text p:last-child{margin-bottom:0}
.u-story-sign{font-family:var(--font);font-size:clamp(20px,2vw,28px);font-weight:600;letter-spacing:-0.025em;color:var(--fg) !important;margin-top:32px !important;padding-top:28px;border-top:1px solid var(--line)}
@media (max-width:860px){
  .u-story{grid-template-columns:1fr}
  .u-story-lead{position:static}
}

/* Person Sections */
.u-person-sec{border-bottom:1px solid var(--line)}
.u-person-sec:last-of-type{border-bottom:0}

/* Leistungs-Badges */
.u-bio-badges{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px}
.u-badge{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:11px;padding:20px 18px;min-width:100px;
  border-radius:18px;border:1px solid var(--line);
  background:var(--surface);color:var(--fg-2);
  text-decoration:none;
  transition:color .3s var(--ease-out),border-color .3s var(--ease-out),transform .35s var(--ease-out),box-shadow .35s var(--ease-out);
}
.u-badge-icon{width:30px;height:30px;color:var(--green-300);flex:none}
html[data-theme="light"] .u-badge-icon{color:var(--green-500)}
.u-badge-icon svg{width:100%;height:100%}
.u-badge-label{font-size:13px;font-weight:600;line-height:1;letter-spacing:-0.01em}
a.u-badge:hover{color:var(--fg);border-color:var(--green-500);transform:translateY(-4px);box-shadow:0 16px 40px -10px rgba(0,0,0,.38)}
html[data-theme="light"] a.u-badge:hover{box-shadow:0 16px 40px -10px rgba(0,0,0,.12)}
.u-badge-soon{opacity:.45;cursor:default}
.u-badge-pill{
  display:inline-block;padding:2px 7px;border-radius:5px;
  font-size:10px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  background:var(--green-500);color:#fff;
}

/* Team-Galerie */
.u-gallery-sec{padding:clamp(48px,6vh,80px) 0}
/* Bento-Galerie: unterschiedliche Kachelgrößen, abgerundete Ecken */
.u-gallery{
  display:grid;grid-template-columns:repeat(3,1fr);
  grid-auto-rows:clamp(130px,20vh,210px);
  gap:clamp(12px,1.4vw,18px);
}
.u-gallery-item{border-radius:20px;overflow:hidden;background:var(--surface-2)}
.u-gallery-item:nth-child(1){grid-column:span 2;grid-row:span 2}
.u-gallery-item:nth-child(5){grid-column:span 2}
.u-gallery-item img{width:100%;height:100%;object-fit:cover;object-position:center 35%;display:block;transition:transform .5s var(--ease-out)}
.u-gallery-item:hover img{transform:scale(1.04)}
@media(max-width:600px){
  .u-gallery{grid-template-columns:repeat(2,1fr);grid-auto-rows:clamp(118px,30vw,170px)}
  .u-gallery-item:nth-child(1){grid-column:span 2;grid-row:span 1}
  .u-gallery-item:nth-child(5){grid-column:span 1}
}

/* Story text justify */
.u-story-text p{text-align:justify}

/* LinkedIn link */
.u-linkedin{
  display:inline-flex;align-items:center;gap:8px;
  margin-top:22px;padding:10px 18px;
  border-radius:12px;border:1px solid var(--line);
  background:var(--surface);color:var(--fg-2);
  font-size:13px;font-weight:500;line-height:1;
  text-decoration:none;
  transition:color .2s var(--ease-out),border-color .2s var(--ease-out),transform .2s var(--ease-out);
}
.u-linkedin svg{width:15px;height:15px;flex:none}
.u-linkedin:hover{color:#0a66c2;border-color:#0a66c2;transform:translateY(-2px)}
html[data-theme="light"] .u-linkedin:hover{color:#0a66c2}

/* ─── Card-Stack Scroll Section (.u-flip-sec + .u-flip-wrap) ─── */

/* ── DESKTOP (> 860px): Wrapper als 2-Spalten-Grid ─────────── */
.u-flip-wrap{position:relative}
/* Engere Spalten-Verhältnis + expliziter Gap → Bild und Bio näher beieinander */
.u-flip-wrap-ferdi{display:grid;grid-template-columns:1fr 1fr;column-gap:0;min-height:200vh}
.u-flip-wrap-dani {display:grid;grid-template-columns:1fr 1fr;column-gap:0;min-height:200vh}

/* Ferdi: Bild links, Bio rechts */
.u-flip-wrap-ferdi .u-flip-sec {grid-column:1;grid-row:1}
.u-flip-wrap-ferdi .u-flip-bio {grid-column:2;grid-row:1}
/* Dani: Bio links, Bild rechts */
.u-flip-wrap-dani .u-flip-sec  {grid-column:2;grid-row:1}
.u-flip-wrap-dani .u-flip-bio  {grid-column:1;grid-row:1}

.u-flip-sec{position:relative;height:100%}
.u-flip-sticky{position:sticky;top:0;height:100vh;display:flex;align-items:center;overflow:hidden;
  padding-top:clamp(56px,8vh,96px);padding-bottom:clamp(32px,5vh,64px)}
.u-flip-outer{
  width:100%;display:flex;align-items:center;justify-content:center;
}
.u-flip-person{display:flex;flex-direction:column;align-items:center;width:100%}
/* Hochformat-Stack: EXPLIZITE Breite (Höhe × 3/4) statt aspect-ratio+auto,
   sonst kollabiert die Breite in der Flex-Cross-Achse (Karten sind position:absolute). */
.u-flip-stack{
  position:relative;
  height:clamp(400px,58vh,660px);
  width:min(100%, calc(clamp(400px,58vh,660px) * 0.75));
  aspect-ratio:3/4;
  margin:0 auto;
}
/* Ferdi: Bild rechtsbündig in seiner Spalte → nahe an der Bio (rechts) */
.u-flip-wrap-ferdi .u-flip-stack{align-self:flex-end;margin-right:clamp(8px,2vw,40px)}
/* Dani: Bild linksbündig in seiner Spalte → nahe an der Bio (links) */
.u-flip-wrap-dani  .u-flip-stack{align-self:flex-start;margin-left:clamp(8px,2vw,40px)}
.u-flip-card{
  position:absolute;inset:0;
  border-radius:20px;overflow:hidden;
  transform-origin:center 65%;
}
.u-flip-card img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block}
/* Bio: sticky in seiner Grid-Spalte; inneres Padding (Seite zum Bild) klein, äußeres normal */
.u-flip-bio{
  position:sticky;top:0;height:100vh;
  display:flex;align-items:center;
  padding:clamp(56px,8vh,96px) clamp(32px,3.5vw,56px) clamp(32px,5vh,64px);
}
/* Ferdi-Bio (rechte Spalte): links nahe am Bild, rechts bündig mit globalem .wrap-Rand */
.u-flip-wrap-ferdi .u-flip-bio{
  padding-left:clamp(16px,2vw,32px);
  padding-right:max(clamp(20px,4vw,40px), calc((100vw - 1200px) / 2 + 40px));
}
/* Dani-Bio (linke Spalte): rechts nahe am Bild, links bündig mit globalem .wrap-Rand */
.u-flip-wrap-dani .u-flip-bio{
  padding-right:clamp(16px,2vw,32px);
  padding-left:max(clamp(20px,4vw,40px), calc((100vw - 1200px) / 2 + 40px));
}
/* Desktop: .wrap innerhalb der Bio kein eigenes horizontales Padding – bio-Padding reicht */
@media(min-width:861px){
  .u-flip-bio .wrap{padding-left:0;padding-right:0}
}
.u-flip-bio-inner{display:flex;flex-direction:column;justify-content:space-between;height:auto;max-height:calc(100vh - clamp(88px,13vh,152px))}
.u-flip-bio h2{font-size:clamp(28px,3vw,44px);font-weight:700;letter-spacing:-0.03em;line-height:1.1;margin-top:4px;margin-bottom:10px}
.u-flip-bio .u-bio-body{font-size:clamp(14px,1.1vw,16px);line-height:1.6;color:var(--fg-2);margin-bottom:6px}
/* Badges */
.u-flip-bio .u-bio-badges{margin-top:16px;gap:12px}
.u-flip-bio .u-badge{position:relative;width:104px;height:104px;padding:12px 8px;gap:10px;justify-content:center;text-align:center}
.u-flip-bio .u-badge-icon{width:26px;height:26px;margin:0}
.u-flip-bio .u-badge-label{font-size:12px;line-height:1.15}
.u-flip-bio .u-badge-pill{position:absolute;top:8px;right:8px;padding:2px 6px;font-size:8px}

@media(max-width:860px){
  /* ── MOBILE: Wrapper einspaltig, Section fullscreen sticky,
     Bio außerhalb der section → erscheint NACH dem Scrollen durch alle Karten ── */
  .u-flip-wrap-ferdi,.u-flip-wrap-dani{
    display:block;
  }
  .u-flip-sec{
    display:block;height:auto;
    min-height:175vh; /* Karten flippen über ~0.95×75vh, dann endet section → Bio direkt danach */
  }
  .u-flip-sticky{
    position:sticky;top:0;
    height:100svh;   /* Bilderstapel füllt ganzen Bildschirm */
    width:100%;
    display:flex;align-items:center;justify-content:center;
    overflow:hidden;
    /* Asymmetrisch: oben Platz für Nav, unten knapp → Karte sitzt tiefer → Bio rückt näher */
    padding:clamp(44px,7svh,64px) 12px clamp(10px,1.8svh,18px);
    background:var(--bg);
  }
  .u-flip-outer{width:100%;justify-content:center;max-width:none}
  /* Kartenstapel: fast fullscreen, zentriert. Explizite Breite (Höhe × 3/4)
     + align-self zurücksetzen (Desktop-Ferdi/Dani-Regeln dürfen hier nicht greifen). */
  .u-flip-stack,
  .u-flip-wrap-ferdi .u-flip-stack,
  .u-flip-wrap-dani  .u-flip-stack{
    height:calc(100svh - clamp(70px,11svh,96px));
    width:min(100%, calc((100svh - clamp(70px,11svh,96px)) * 0.75));
    aspect-ratio:3/4;
    align-self:center;
    margin-left:auto;margin-right:auto;
  }
  /* Bio: nicht sticky, außerhalb section → beginnt direkt nach dem Bilderstapel */
  .u-flip-bio{
    position:relative;top:auto;height:auto;width:100%;
    display:flex;align-items:center;
    padding:clamp(6px,1svh,12px) 0 clamp(40px,6svh,64px);
  }
  .u-flip-bio .wrap{padding:0 20px}
  .u-flip-bio-inner{height:auto;max-height:none;width:100%}
  .u-flip-bio h2{font-size:clamp(26px,7vw,36px);margin-bottom:6px}
  .u-flip-bio .u-bio-body{font-size:14px;color:var(--fg-2);margin-bottom:6px}
  .u-flip-bio .u-bio-badges{gap:8px;flex-wrap:wrap}
  .u-flip-bio .u-badge{width:88px;height:88px}
}

/* ============================================================
   TEAM — Person-Scroll-Sections  tp-ferdi / tp-dani
   ============================================================ */

/* Abschnitt-Höhen */
.tp-ferdi-sec { position:relative; min-height:240vh; }
.tp-dani-sec  { position:relative; min-height:340vh; }

/* Sticky-Viewport */
.tp-ferdi-sticky,
.tp-dani-sticky {
  position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;
}

/* ── Ferdi: Vollbild-Foto als Hintergrund ── */
.tp-ferdi-bg { position:absolute;inset:0;z-index:0; }
.tp-ferdi-bg img {
  width:100%;height:100%;object-fit:cover;object-position:42% top;display:block;
}
/* Gradient links → Textlesbarkeit */
.tp-ferdi-sticky::before {
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(98deg, rgba(0,0,0,.84) 0%, rgba(0,0,0,.52) 42%, transparent 68%);
}

/* Bio-Panel links */
.tp-person-info {
  position:absolute;top:50%;transform:translateY(-50%);
  left:clamp(36px,6vw,96px);max-width:400px;
  z-index:3;color:#fff;
}
.tp-role {
  display:block;
  font-size:clamp(10px,.85vw,12.5px);font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.48);margin-bottom:8px;
}
.tp-name {
  font-family:var(--font);
  font-size:clamp(46px,6vw,88px);font-weight:800;
  letter-spacing:-0.045em;line-height:1;
  color:#fff;margin:0 0 20px;
}
.tp-bio {
  font-size:clamp(13.5px,1.05vw,15.5px);
  color:rgba(255,255,255,.76);line-height:1.68;
  margin-bottom:10px;
}
.tp-badges { margin-top:24px; }

/* Badges auf dunklem Hintergrund */
.tp-person-info .u-badge,
.tp-dani-block .u-badge {
  background:rgba(255,255,255,.07);
  border-color:rgba(255,255,255,.14);
  color:#fff;
}
.tp-person-info a.u-badge:hover,
.tp-dani-block a.u-badge:hover {
  background:rgba(255,255,255,.14);border-color:var(--green-400);
  box-shadow:0 16px 40px -10px rgba(0,0,0,.5);
}
.tp-person-info .u-badge-icon,
.tp-dani-block .u-badge-icon { color:var(--green-300); }

/* Schwebende Zusatzkarten */
.tp-fc {
  position:absolute;z-index:4;
  border-radius:clamp(12px,1.2vw,18px);overflow:hidden;
  box-shadow:0 28px 64px rgba(0,0,0,.55),0 6px 18px rgba(0,0,0,.3);
  will-change:transform,opacity;
}
.tp-fc img { width:100%;height:100%;object-fit:cover;object-position:center top;display:block; }
.tp-fc-1 { width:clamp(150px,14vw,212px); height:clamp(198px,18.5vw,280px); right:20%; top:5%; }
.tp-fc-2 { width:clamp(130px,12vw,182px); height:clamp(172px,15.8vw,240px); right:7%;  top:28%; }
.tp-fc-3 { width:clamp(120px,11vw,165px); height:clamp(158px,14.5vw,218px); right:26%; bottom:8%; }

/* ── Dani: Portrait rechts, Text-Blöcke links ── */
.tp-dani-photo {
  position:absolute;right:0;top:0;width:58%;height:100%;z-index:0;
}
.tp-dani-photo img {
  width:100%;height:100%;object-fit:cover;object-position:center top;display:block;
}
/* Überblendung links → Text lesbar */
.tp-dani-sticky::before {
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(-90deg, transparent 40%, rgba(0,0,0,.88) 68%, rgba(0,0,0,1) 100%);
}
/* Textblöcke: absolut über volle Höhe verteilt, JS faded ein/aus */
.tp-dani-block {
  position:absolute;
  left:clamp(36px,6vw,96px);width:min(400px,38vw);
  z-index:2;color:#fff;
  will-change:opacity,transform;opacity:0;
}
.tp-db-1 { top:clamp(88px,10vh,130px); }
.tp-db-2 { top:30%; }
.tp-db-3 { top:55%; }
.tp-db-4 { bottom:clamp(88px,10vh,130px); }

/* Mobile: kein Sticky, keine Animationen */
@media (max-width:820px) {
  .tp-ferdi-sec,.tp-dani-sec { min-height:0 }
  .tp-ferdi-sticky,.tp-dani-sticky {
    position:relative;height:auto;overflow:visible;
    display:flex;flex-direction:column;
  }
  .tp-ferdi-sticky::before,.tp-dani-sticky::before { display:none }
  .tp-ferdi-bg { position:relative;inset:auto;aspect-ratio:3/4;height:clamp(360px,75vw,520px) }
  .tp-ferdi-bg img,.tp-dani-photo img { object-position:center 15% }
  .tp-person-info {
    position:relative;top:auto;transform:none;left:0;
    padding:28px 20px 36px;max-width:none;background:var(--bg);
  }
  .tp-fc { display:none }
  .tp-dani-photo {
    position:relative;right:auto;top:auto;width:100%;height:clamp(360px,75vw,520px);
  }
  .tp-dani-block {
    position:relative;left:0;width:100%;bottom:auto;top:auto;
    opacity:1 !important;transform:none !important;
    padding:20px 20px 0;background:var(--bg);
  }
  .tp-dani-block:last-child { padding-bottom:36px }
}

/* Werte Cards */
.u-values{
  display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:0;
}
@media (max-width:900px){.u-values{grid-template-columns:repeat(2,1fr)}}
.u-value-card{
  background:var(--surface);border:1px solid var(--line);border-radius:22px;
  padding:28px 24px;
  transition:transform .4s var(--ease-out),box-shadow .4s var(--ease-out);
}
.u-value-card:hover{transform:translateY(-4px);box-shadow:0 20px 48px -12px rgba(0,0,0,.4)}
html[data-theme="light"] .u-value-card:hover{box-shadow:0 20px 48px -12px rgba(0,0,0,.1)}
.u-value-icon{width:44px;height:44px;color:var(--green-300);margin-bottom:18px}
html[data-theme="light"] .u-value-icon{color:var(--green-500)}
.u-value-icon svg{width:100%;height:100%}
.u-value-card h3{font-size:18px;font-weight:600;letter-spacing:-0.02em;margin-bottom:10px}
.u-value-card p{font-size:14px;color:var(--fg-2);line-height:1.55}

/* Zahlen */
.u-numbers{
  background:
    radial-gradient(ellipse 60% 50% at 50% 100%, rgba(33,135,74,.09) 0%, transparent 65%),
    var(--surface);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.u-numbers-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:20px;overflow:hidden;
  margin:0 auto;max-width:800px;
}
@media (max-width:640px){.u-numbers-grid{grid-template-columns:1fr}}
.u-num-item{
  background:color-mix(in oklab,var(--surface) 95%,var(--bg));
  padding:48px 36px;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:12px;
}
.u-num-item .stat-num{font-size:clamp(42px,6vw,72px)}
.u-num-item .stat-label{font-size:14px}


/* ============================================================
   WISSEN / ARCHIV (w-* prefix)
   ============================================================ */
/* Kategorie-Filter */
.w-cats{
  display:flex;gap:8px;flex-wrap:wrap;
  padding:24px 0;margin-bottom:8px;
  border-bottom:1px solid var(--line);
}
.w-cat{
  padding:8px 18px;border-radius:999px;font-size:13px;font-weight:500;
  background:var(--surface);border:1px solid var(--line);color:var(--fg-2);
  text-decoration:none;
  transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease),transform .2s var(--ease-out);
}
.w-cat:hover{color:var(--fg);border-color:var(--line-2);transform:translateY(-1px)}
.w-cat.active{
  background:var(--green-500);color:#fff;border-color:var(--green-500);
  box-shadow:0 6px 16px -6px rgba(33,135,74,.5);
}
html[data-theme="light"] .w-cat.active{background:var(--green-500);color:#fff;border-color:var(--green-500)}

/* Featured Article Card */
.w-featured{
  display:grid;grid-template-columns:1.2fr 1fr;gap:0;
  background:var(--surface);border:1px solid var(--line);border-radius:24px;overflow:hidden;
  transition:transform .4s var(--ease-out),box-shadow .4s var(--ease-out);
}
.w-featured:hover{transform:translateY(-4px);box-shadow:0 24px 56px -14px rgba(0,0,0,.45)}
html[data-theme="light"] .w-featured:hover{box-shadow:0 24px 56px -14px rgba(0,0,0,.12)}
@media (max-width:800px){.w-featured{grid-template-columns:1fr}}
.w-featured-img{overflow:hidden;min-height:300px;background:var(--surface-2)}
.w-featured-img img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .6s var(--ease-out)}
.w-featured:hover .w-featured-img img{transform:scale(1.04)}
.w-featured-body{padding:40px;display:flex;flex-direction:column;justify-content:center;gap:16px}
@media (max-width:640px){.w-featured-body{padding:24px}}
.w-featured-meta{display:flex;align-items:center;gap:14px}
.w-read-time{font-size:12px;color:var(--fg-2);font-weight:500}
.w-featured-title{font-size:clamp(22px,2.8vw,32px);font-weight:700;letter-spacing:-0.03em;line-height:1.2}
.w-featured-excerpt{font-size:14px;color:var(--fg-2);line-height:1.55;margin:0}

/* CTA Strip im Wissen-Archiv */
.w-cta-strip{
  background:
    radial-gradient(ellipse 60% 55% at 50% 50%, rgba(33,135,74,.1) 0%, transparent 65%),
    var(--surface);
  border-top:1px solid var(--line);
  padding:80px 0;
}
.w-cta-inner{
  display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap;
}
.w-cta-inner strong{font-size:clamp(18px,2vw,24px);font-weight:700;letter-spacing:-0.025em;display:block;margin-bottom:6px}
.w-cta-inner p{font-size:14px;color:var(--fg-2)}
@media (max-width:720px){.w-cta-inner{flex-direction:column;align-items:flex-start}}

/* Reading time in blog-card meta */
.blog-card .meta .w-read-time::before{content:" · "}

/* ============================================================
   SINGLE POST — Wissen-Artikel Lesefluss
   ============================================================ */
/* Breadcrumb */
.art-crumbs{padding:120px 0 0;font-size:13px;color:var(--fg-2)}
.art-crumbs .wrap{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.art-crumbs a{color:var(--fg-2);text-decoration:none;transition:color .2s var(--ease)}
.art-crumbs a:hover{color:var(--fg)}
.art-crumbs-sep{opacity:.5;font-size:14px}
.art-crumbs-current{color:var(--fg);font-weight:500}
@media (max-width:720px){
  .art-crumbs{padding-top:96px}
  .art-crumbs-current{display:none}
  .art-crumbs-sep:last-of-type{display:none}
}

/* Artikel-Hero */
.art-hero{padding:48px 0 0;text-align:left}
.art-hero-inner{max-width:1080px;margin:0 auto}
.art-cover-wrap{margin-top:56px;max-width:1080px;margin-left:auto;margin-right:auto;padding:0}
.art-hero .wrap.art-cover-wrap{padding:0 32px}
.art-cover{
  border-radius:28px;overflow:hidden;
  aspect-ratio:21/9;background:var(--surface-2);
  box-shadow:0 32px 64px -20px rgba(0,0,0,.5);
}
html[data-theme="light"] .art-cover{box-shadow:0 24px 48px -16px rgba(0,0,0,.16)}
.art-cover img{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:720px){.art-cover{aspect-ratio:16/10;border-radius:20px}}
.art-meta{display:flex;align-items:center;gap:10px;margin-bottom:24px;flex-wrap:wrap}
.art-meta-cat{
  font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  padding:5px 12px;border-radius:999px;
  background:color-mix(in oklab,var(--green-500) 15%,transparent);
  color:var(--green-300);
}
html[data-theme="light"] .art-meta-cat{color:var(--green-500)}
.art-meta time{font-size:13px;color:var(--fg-2);font-weight:500}
.art-meta-dot{color:var(--fg-2);opacity:.5}
.art-read-time{font-size:13px;color:var(--fg-2);font-weight:500}
.art-title{
  font-size:clamp(32px,5vw,56px);font-weight:700;letter-spacing:-0.035em;line-height:1.08;
  margin:0 0 20px;max-width:18ch;
}
.art-lead{
  font-size:clamp(17px,1.7vw,21px);line-height:1.55;color:var(--fg-2);
  margin:0;max-width:60ch;
}
.art-body-section{position:relative;padding:56px 0 0}
@media (max-width:720px){.art-hero{padding:24px 0 0}.art-body-section{padding:32px 0 0}}

/* Artikel-Container: zentriert mit konservativer Lesebreite. */
/* Artikel-Block so breit wie Header/CTA (1080px): 2 Spalten —
   Sticky-TOC links + breiter Lesebereich rechts. */
.art-grid{
  display:grid;
  grid-template-columns:240px minmax(0,1fr);
  gap:56px;
  max-width:1080px;margin:0 auto;
  align-items:start;
}
.art-body-section .post-body{
  max-width:none;margin:0;
}

/* TOC als sticky-Sidebar innerhalb des Artikel-Blocks. */
.art-toc{
  position:sticky;
  top:120px;
  align-self:start;
}
.art-toc-inner{
  position:sticky;
  top:120px;
  max-height:calc(100vh - 160px);
  overflow-y:auto;
  overscroll-behavior:contain;
  pointer-events:auto;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:18px;
  padding:22px 24px;
}

/* Auf schmaleren Screens: 1 Spalte, TOC inline über den Content. */
@media (max-width:900px){
  .art-grid{grid-template-columns:1fr;gap:28px}
  .art-toc{
    position:static;
    width:auto;
    margin:0 0 8px;
  }
  .art-toc-inner{
    position:static;
    max-height:none;
    overflow:visible;
  }
}
.art-toc-toggle{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:transparent;border:0;padding:0;cursor:pointer;
  font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--fg-2);
}
.art-toc-toggle:hover{color:var(--fg)}
.art-toc-chev{transition:transform .25s var(--ease-out);flex-shrink:0}
.art-toc[aria-collapsed="true"] .art-toc-chev{transform:rotate(-90deg)}
.art-toc-list{
  list-style:none;margin:18px 0 0;padding:0;
  display:flex;flex-direction:column;gap:10px;
  border-top:1px solid var(--line);padding-top:18px;
}
.art-toc[aria-collapsed="true"] .art-toc-list{display:none}
.art-toc-list a{
  display:block;font-size:14px;line-height:1.45;
  color:var(--fg-2);text-decoration:none;
  border-left:2px solid transparent;padding-left:12px;margin-left:-2px;
  transition:color .2s var(--ease), border-color .2s var(--ease);
}
.art-toc-list a:hover{color:var(--fg)}
.art-toc-list a.is-active{color:var(--green-300);border-left-color:var(--green-500)}
html[data-theme="light"] .art-toc-list a.is-active{color:var(--green-500)}

/* Autor-Box */
.art-author{
  display:flex;align-items:center;gap:24px;
  margin-top:64px;padding:28px 32px;
  background:var(--surface);border:1px solid var(--line);border-radius:24px;
}
@media (max-width:560px){.art-author{flex-direction:column;align-items:flex-start;gap:16px;padding:24px}}
.art-author-avatar{
  width:60px;height:60px;border-radius:50%;
  background:var(--surface-2);overflow:hidden;flex-shrink:0;
}
.art-author-avatar-fd{
  display:flex;align-items:center;justify-content:center;
  background:var(--grad-brand);color:#fff;
  font-size:18px;font-weight:700;letter-spacing:-0.02em;
}
.art-author-name{font-size:18px;font-weight:600;letter-spacing:-0.018em;margin:6px 0 4px}
.art-author-bio{font-size:13px;color:var(--fg-2);line-height:1.5;margin:0;max-width:50ch}

.post-body{font-size:17px;line-height:1.7;color:var(--fg)}
.post-body > * + *{margin-top:1.2em}
.post-body h2{
  font-size:clamp(24px,3vw,32px);font-weight:700;letter-spacing:-0.025em;line-height:1.2;
  margin-top:2em;scroll-margin-top:96px;
  padding-bottom:.4em;border-bottom:1px solid color-mix(in oklab,var(--green-500) 30%,transparent);
}
.post-body h3{font-size:clamp(20px,2.2vw,24px);font-weight:600;letter-spacing:-0.02em;line-height:1.3;margin-top:1.6em;scroll-margin-top:96px}
.post-body p{color:var(--fg)}
.post-body a{color:var(--green-300);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
html[data-theme="light"] .post-body a{color:var(--green-500)}
.post-body ul,.post-body ol{padding-left:1.4em}
.post-body ul li,.post-body ol li{margin:.4em 0}
.post-body strong{font-weight:600;color:var(--fg)}

/* Callout-Boxen für emphasized Quotes ("Die gute Nachricht: ...") */
.post-body blockquote, .post-body .callout{
  background:color-mix(in oklab,var(--green-500) 10%,var(--surface));
  border:1px solid color-mix(in oklab,var(--green-500) 28%,var(--line));
  border-left:4px solid var(--green-500);
  border-radius:14px;
  padding:20px 24px;
  color:var(--fg);font-style:normal;
  margin:1.8em 0;
}
.post-body blockquote p,.post-body .callout p{margin:0;font-size:16px;line-height:1.6}
.post-body blockquote strong:first-child,.post-body .callout strong:first-child{color:var(--green-300)}
html[data-theme="light"] .post-body blockquote strong:first-child{color:var(--green-500)}

/* Mid-Article CTA — als Block-Element via Klasse oder Button-Style */
.post-body .cta-box{
  background:var(--grad-brand);color:#fff;
  border-radius:20px;padding:32px;
  margin:2.4em 0;text-align:center;
}
.post-body .cta-box h3{color:#fff;margin:0 0 8px}
.post-body .cta-box p{color:rgba(255,255,255,.92);margin:0 0 20px;font-size:15px;line-height:1.5}
.post-body .cta-box a, .post-body .cta-box .btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:12px 24px;border-radius:999px;
  background:#fff;color:var(--green-500);
  font-size:15px;font-weight:600;text-decoration:none;
  transition:background .25s var(--ease);
}
.post-body .cta-box a:hover{background:rgba(255,255,255,.86)}

/* Inline-Bilder in Artikeln */
.post-body figure{
  margin:2em 0;padding:0;
}
.post-body figure img{
  width:100%;height:auto;display:block;
  border-radius:18px;
  box-shadow:0 24px 48px -16px rgba(0,0,0,.4);
}
html[data-theme="light"] .post-body figure img{box-shadow:0 18px 36px -12px rgba(0,0,0,.14)}
.post-body figcaption{
  margin-top:14px;font-size:13px;color:var(--fg-2);line-height:1.5;
  text-align:center;font-style:italic;
}

/* "Inhaltsverzeichnis" Inline-Box (wenn nicht als Sticky-TOC) */
.post-body .toc-inline{
  background:var(--surface);border:1px solid var(--line);border-radius:16px;
  padding:24px 28px;margin:1.5em 0;
}
.post-body .toc-inline strong{display:block;font-size:14px;text-transform:uppercase;letter-spacing:.06em;margin-bottom:14px;color:var(--fg-2)}
.post-body .toc-inline ol{margin:0;padding-left:20px}
.post-body .toc-inline li{margin:6px 0}
.post-body .toc-inline a{color:var(--fg);text-decoration:none}
.post-body .toc-inline a:hover{color:var(--green-300)}
.post-body img{border-radius:18px;margin:1.6em 0}
.post-body code{background:var(--surface-2);padding:2px 8px;border-radius:6px;font-size:.92em}
.post-body pre{background:var(--surface-2);padding:18px 22px;border-radius:14px;overflow:auto}


/* ============================================================
   PAGE.PHP — Impressum, Datenschutz, einfache Seiten
   ============================================================ */
.page-hero{padding:160px 0 56px}
.page-content-section{padding-bottom:120px}
.page-content{font-size:17px;line-height:1.75;color:var(--fg)}
.page-content > * + *{margin-top:1em}
.page-content h2{font-size:26px;font-weight:700;letter-spacing:-0.025em;line-height:1.2;margin-top:2.2em;padding-top:2.2em;border-top:1px solid var(--line)}
.page-content h3{font-size:20px;font-weight:600;letter-spacing:-0.018em;line-height:1.3;margin-top:1.6em}
.page-content p{color:var(--fg-2)}
.page-content a{color:var(--green-300);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
html[data-theme="light"] .page-content a{color:var(--green-500)}
.page-content ul,.page-content ol{padding-left:1.4em;color:var(--fg-2)}
.page-content ul li,.page-content ol li{margin:.4em 0}
.page-content strong{color:var(--fg);font-weight:600}
@media (max-width:720px){.page-hero{padding:130px 0 40px}}


/* ============================================================
   RESPONSIVE — Subpage breakpoints
   ============================================================ */
@media (max-width:720px){
  .l-hero{min-height:100svh;padding:90px 0}
  .k-hero{padding:130px 0 48px}
  .l-process-steps{max-width:100%}
}
@media (max-width:480px){
  .l-hero-cta{flex-direction:column;align-items:center}
}

/* ============================================================
   GLOBAL RESPONSIVE POLISH
   ============================================================ */
@media (max-width:780px){
  /* Topbar: Logo bleibt mittig sichtbar */
  .topbar{padding:0 18px}

  /* Subpage heroes */
  .l-subs-grid{grid-template-columns:1fr 1fr}
  .u-bio-photo{aspect-ratio:3/2}

  /* Blog archive featured */
  .w-featured-body{padding:24px}
  .w-featured-img{min-height:220px}

  /* l-about visual verstecken auf Mobil — echtes Bild bleibt sichtbar */
  .l-about-visual{display:none}
  .l-about-visual-img{display:flex;margin-top:8px}
  .l-about-grid{grid-template-columns:1fr}
}

@media (max-width:520px){
  /* CTA-Karte auf Mobil stacken */
  .proj-cta-inner{flex-direction:column;align-items:flex-start}
  .u-values{grid-template-columns:1fr}
  .u-gallery{grid-template-columns:repeat(2,1fr);grid-auto-rows:clamp(100px,28vw,160px)}
  .u-gallery-item:nth-child(1){grid-column:span 2;grid-row:span 1}
  .u-gallery-item:nth-child(4){grid-column:span 1}
  .u-gallery-item:nth-child(5){grid-column:span 1} /* 1-Spalte → kein leerer Platz */
  .u-gallery-stack{grid-template-columns:1fr 1fr}
  .l-subs-grid{grid-template-columns:repeat(2,1fr)}
  .l-step{grid-template-columns:40px 1fr}
}

/* =============================================================
   ARTIKEL-CHARTS — Inline-Grafiken in Blog-Posts
   Höhere Spezifität via .post-body, damit das generische
   .post-body figure-Reset (padding:0, margin:2em 0) nicht greift.
   ============================================================= */
.post-body .art-chart,
.art-chart{
  margin:48px 0;
  padding:32px 36px 28px;
  border:1px solid var(--line);
  border-radius:20px;
  background:linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
  position:relative;
  overflow:hidden;
}
.art-chart::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(600px 200px at 0% 0%, rgba(33,135,74,.10), transparent 60%);
  pointer-events:none;
}
.art-chart > *{position:relative;z-index:1}
/* Chart-Titel — überschreibt .post-body figcaption (italic, zentriert) */
.post-body .art-chart-title,
.art-chart-title{
  display:block;font-size:12px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--green-300);
  margin:0 0 22px;
  text-align:left;font-style:normal;
}
html[data-theme="light"] .art-chart-title{color:var(--green-500)}
.art-chart-body{margin:0}
.post-body .art-chart-source,
.art-chart-source{
  margin:22px 0 0;
  padding-top:18px;
  border-top:1px solid var(--line);
  font-size:12px;color:var(--fg-2);font-style:italic;
  text-align:left;
}

/* Horizontale Balken */
.art-chart-bars{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:16px}
.art-chart-bars li{
  display:grid;grid-template-columns:minmax(140px,32%) 1fr auto;
  gap:16px;align-items:center;
  font-size:14px;color:var(--fg);
}
.art-chart-bar-label{font-weight:500;letter-spacing:-0.005em;line-height:1.35}
.art-chart-bar-track{
  position:relative;height:10px;border-radius:999px;
  background:rgba(255,255,255,.06);
  overflow:hidden;
}
html[data-theme="light"] .art-chart-bar-track{background:rgba(0,0,0,.06)}
.art-chart-bar-fill{
  position:absolute;left:0;top:0;bottom:0;
  background:var(--grad-brand);
  border-radius:999px;
  animation:artChartGrow 1.2s var(--ease-out) both;
  transform-origin:left center;
}
@keyframes artChartGrow{
  from{transform:scaleX(0)}
  to{transform:scaleX(1)}
}
.art-chart-bar-value{
  font-feature-settings:"tnum";font-variant-numeric:tabular-nums;
  font-weight:600;color:var(--fg);
  min-width:6ch;text-align:right;
}

/* Stat-Karten */
.art-chart-stats{
  display:grid;grid-template-columns:repeat(3,1fr);gap:18px;
}
.art-chart-stat{
  display:flex;flex-direction:column;gap:10px;
  padding:22px 20px;
  border:1px solid var(--line);
  border-radius:14px;
  background:rgba(255,255,255,.03);
}
html[data-theme="light"] .art-chart-stat{background:rgba(0,0,0,.02)}
.art-chart-stat strong{
  font-size:clamp(28px,3.6vw,42px);
  font-weight:700;letter-spacing:-0.03em;line-height:1;
  background:var(--grad-brand);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.art-chart-stat span{font-size:13px;line-height:1.5;color:var(--fg-2)}

@media (max-width:720px){
  .post-body .art-chart,
  .art-chart{margin:36px 0;padding:24px 22px 22px;border-radius:16px}
  .art-chart-bars{gap:12px}
  .art-chart-bars li{grid-template-columns:1fr;gap:6px}
  .art-chart-bar-value{text-align:left;min-width:0}
  .art-chart-stats{grid-template-columns:1fr;gap:14px}
  .art-chart-stat{padding:18px 16px}
  .post-body .art-chart-title{margin-bottom:18px}
  .post-body .art-chart-source{margin-top:18px;padding-top:14px}
}
@media (prefers-reduced-motion:reduce){
  .art-chart-bar-fill{animation:none}
}

/* =============================================================
   SPLIT-HERO — scroll-gesteuerte Transition (Foto → Schwarz)
   .split-hero ist die Scroll-„Bahn", .split-hero-stage wird
   gepinnt. JS (split-hero.js) setzt --p (0..1) sowie die
   Clip-Paths/Position; CSS liefert sinnvolle Defaults + Fallback.
   ============================================================= */
.split-hero{
  --p: 0;                       /* Scroll-Fortschritt 0..1 (JS) */
  --cut: 46%;                   /* Schnittkante — Default = statischer Split (no-JS) */
  position:relative;
  padding:0;                    /* generisches section-Padding (140px) aufheben → Foto bis ganz oben */
  margin:0;
  background:#0a0c0b;
  height:260vh;                 /* Scroll-Länge der Animation */
  isolation:isolate;
}
html[data-theme="light"] .split-hero{background:#fff}
.split-hero-stage{
  position:sticky;top:0;
  height:100svh;
  overflow:hidden;
}
.split-hero-img{
  position:absolute;inset:0;
  background-size:cover;
  background-position:center;
  z-index:0;
}
/* Schwarze Fläche steigt von unten: top = Schnittkante */
.split-hero-black{
  position:absolute;left:0;right:0;
  top:var(--cut);bottom:0;
  background:#0a0c0b;
  z-index:1;
}
html[data-theme="light"] .split-hero-black{background:#fff}

/* Wordmark-Lockup: großes Wort + Untertitel darunter, zentriert */
.split-hero-markwrap{
  position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);
  display:flex;flex-direction:column;align-items:center;
  z-index:2;pointer-events:none;
  width:100%;padding:0 16px;
}
.split-hero-lockup{
  display:inline-block;       /* schrumpft auf Wordmark-Breite → Untertitel linksbündig dazu */
  text-align:left;
}
.split-hero-mark{
  position:relative;display:block;
  font-size:clamp(34px, 9.5vw, 150px);   /* Fallback; JS skaliert per Fit-to-Width */
  font-weight:800;letter-spacing:-0.04em;line-height:1;
  white-space:nowrap;user-select:none;
  /* Luft für Seitenränder (O) und Unterlängen (g) — verhindert Abschneiden */
  padding:0.04em 0.08em 0.16em;
  overflow:visible;
}
/* Untertitel direkt unter dem Wordmark, linksbündig zum Wortanfang */
.split-hero-sub{
  display:block;
  margin-top:0.02em;
  padding:0 0.08em;
  font-size:clamp(16px, 2.4vw, 40px);    /* Fallback; JS skaliert proportional */
  font-weight:600;letter-spacing:-0.012em;line-height:1.05;
  color:#fff;white-space:nowrap;
  opacity:1;                              /* no-JS sichtbar; JS faded mit Scroll */
}
/* Beschriftung als eigenes Flex-Kind der Markwrap — sitzt mittig unter dem Lockup */
.split-hero-caption{
  display:block;
  margin-top:clamp(14px,2.2vh,24px);
  max-width:52ch;
  font-size:clamp(14px,1.25vw,16px);font-weight:400;line-height:1.72;
  color:rgba(255,255,255,.72);
  text-align:center;
  opacity:0;   /* JS animiert; no-JS: statische Alternative unten */
}
.no-js .split-hero-caption,
.split-hero.is-static .split-hero-caption{opacity:1}

.split-hero-mark-fill,
.split-hero-mark-outline{display:block;line-height:inherit}
/* Grüne Füllung — JS clippt sie auf den schwarzen Bereich (unterhalb Cut) */
.split-hero-mark-fill{
  background:var(--grad-brand);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
  clip-path:inset(50% 0 0 0);
}
/* Outline — JS clippt sie auf den Foto-Bereich (oberhalb Cut) */
.split-hero-mark-outline{
  position:absolute;inset:0;
  padding:inherit;            /* deckungsgleich mit der Füllung trotz Padding */
  color:transparent;
  -webkit-text-stroke:1.5px rgba(255,255,255,.92);
  clip-path:inset(0 0 50% 0);
}

/* Content im schwarzen Bereich, unter dem Wordmark */
.split-hero-content{
  position:absolute;left:0;right:0;
  top:56%;bottom:0;
  display:flex;align-items:flex-start;
  z-index:3;
  opacity:1;                              /* sichtbar als no-JS-Default; JS faded ein */
}
.split-hero-content .wrap{padding-top:clamp(16px,3vh,40px);text-align:left}
.split-hero-eyebrow{
  display:inline-block;font-size:13px;font-weight:500;
  letter-spacing:.05em;text-transform:uppercase;
  color:var(--green-300);margin-bottom:14px;
}
.split-hero-h1{
  font-size:clamp(26px, 3.4vw, 46px);
  font-weight:700;letter-spacing:-0.03em;line-height:1.08;
  color:#fff;margin:0 0 16px;max-width:20ch;
}
.split-hero-lead{
  font-size:clamp(15px, 1.2vw, 18px);line-height:1.6;
  color:rgba(255,255,255,.72);max-width:54ch;margin:0 0 24px;
}
.split-hero-lead-mark{font-weight:600;color:var(--green-300)}
.split-hero-cta .btn.outline-light{
  background:transparent;border:1.5px solid rgba(255,255,255,.85);color:#fff;
}
.split-hero-cta .btn.outline-light:hover{
  background:rgba(255,255,255,.1);border-color:#fff;
}
html[data-theme="light"] .split-hero .split-hero-h1{color:var(--fg)!important}
html[data-theme="light"] .split-hero .split-hero-lead{color:var(--fg-2)!important}
html[data-theme="light"] .split-hero .split-hero-eyebrow{color:var(--green-500)!important}
html[data-theme="light"] .split-hero .split-hero-sub{color:var(--fg)!important}
html[data-theme="light"] .split-hero .split-hero-caption{color:rgba(0,0,0,.65)!important}
html[data-theme="light"] .split-hero-cta .btn.outline-light{border-color:rgba(0,0,0,.75)!important;color:var(--fg)!important}
html[data-theme="light"] .split-hero-cta .btn.outline-light:hover{background:rgba(0,0,0,.06)!important}

/* JS aktiv: Content-Fade übernimmt JS (Klasse am <html>/Section) */
.split-hero.is-scrubbing .split-hero-content{opacity:1}

@media (max-width:900px){
  .split-hero-markwrap{top:50%}
}
@media (max-width:540px){
  .split-hero-mark{letter-spacing:-0.03em}
  .split-hero-label{font-size:clamp(13px, 4vw, 18px)}
}
@media (max-width:480px){
  .split-hero-lockup{display:block;width:fit-content;margin:0 auto;text-align:center}
  .split-hero-sub{text-align:center}
  .split-hero-caption{text-align:center;padding:0 8px}
}

/* Fallback ohne JS / reduced-motion: kompakter statischer Split,
   kein 260vh-Leerraum. */
.no-js .split-hero,
.split-hero.is-static{
  height:auto;min-height:100svh;
}
.no-js .split-hero .split-hero-stage,
.split-hero.is-static .split-hero-stage{
  position:relative;height:100svh;
}
@media (prefers-reduced-motion:reduce){
  .split-hero{height:auto;min-height:100svh}
  .split-hero .split-hero-stage{position:relative;height:100svh}
  .split-hero-black{top:46%}
  .split-hero-mark{top:46%}
  .split-hero-mark-fill{clip-path:inset(50% 0 0 0)}
  .split-hero-mark-outline{clip-path:inset(0 0 50% 0)}
  .split-hero-content{opacity:1}
}

/* =============================================================
   404-HERO — Foto-Hintergrund mit großem 404-Outline
   ============================================================= */
.error-hero{
  position:relative;
  padding:0;                 /* generisches section-Padding aufheben → Foto bis ganz oben */
  min-height:100svh;
  display:flex;align-items:center;justify-content:center;
  background:#0a0c0b;
  overflow:hidden;
  text-align:center;
}
.error-hero-img{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
  z-index:0;
}
.error-hero::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg, rgba(8,10,9,.5) 0%, rgba(8,10,9,.74) 100%);
}
.error-hero-inner{
  position:relative;z-index:2;
  display:flex;flex-direction:column;align-items:center;
  padding:48px 24px;
  max-width:680px;
}
.error-hero-mark{
  font-size:clamp(150px, 34vw, 460px);
  font-weight:800;letter-spacing:-0.03em;line-height:.82;
  color:transparent;
  -webkit-text-stroke:2px rgba(255,255,255,.92);
  user-select:none;
  margin-bottom:8px;
}
.error-hero-title{
  font-size:clamp(28px, 4.4vw, 52px);
  font-weight:700;letter-spacing:-0.03em;line-height:1.08;
  color:#fff;margin:0 0 16px;
}
.error-hero-text{
  font-size:clamp(15px, 1.5vw, 19px);line-height:1.6;
  color:rgba(255,255,255,.78);
  max-width:46ch;margin:0 0 32px;
}
.error-hero-cta{
  display:flex;gap:14px;flex-wrap:wrap;align-items:center;justify-content:center;
}
.error-hero-cta .btn.outline-light{
  background:transparent;border:1.5px solid rgba(255,255,255,.85);color:#fff;
}
.error-hero-cta .btn.outline-light:hover{
  background:rgba(255,255,255,.1);border-color:#fff;
}
@media (max-width:540px){
  .error-hero-mark{-webkit-text-stroke-width:1.5px}
}

/* =============================================================
   CUSTOM CURSOR — iPadOS-Pointer-Style (nur feine Zeiger)
   ============================================================= */
@media (hover:hover) and (pointer:fine){
  /* Nativen Cursor ausblenden, sobald JS den Custom-Cursor aktiviert hat */
  .fwn-has-cursor, .fwn-has-cursor *{cursor:none !important}
  /* Text-Eingaben behalten den nativen Caret */
  .fwn-has-cursor input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]),
  .fwn-has-cursor textarea,
  .fwn-has-cursor select,
  .fwn-has-cursor [contenteditable="true"]{cursor:auto !important}

  .fwn-cursor{
    position:fixed;left:0;top:0;
    width:16px;height:16px;
    border-radius:999px;
    background:color-mix(in oklab, var(--fg) 45%, transparent);
    border:1.6px solid transparent;
    pointer-events:none;
    z-index:99999;
    opacity:0;
    transition:
      width .3s cubic-bezier(.22,1,.36,1),
      height .3s cubic-bezier(.22,1,.36,1),
      border-radius .3s cubic-bezier(.22,1,.36,1),
      background .25s var(--ease),
      border-color .25s var(--ease),
      opacity .25s var(--ease);
    will-change:transform, width, height;
  }
  .fwn-cursor.is-visible{opacity:1}

  /* Hover: Punkt → Rahmen um das Element */
  .fwn-cursor.is-hover{
    background:color-mix(in oklab, var(--green-500) 10%, transparent);
    border-color:var(--green-500);
  }

  /* Klick: leicht zusammenziehen */
  .fwn-cursor.is-down{transform-box:border-box}
  .fwn-cursor.is-down:not(.is-hover){
    background:color-mix(in oklab, var(--fg) 70%, transparent);
  }
  .fwn-cursor.is-hover.is-down{
    background:color-mix(in oklab, var(--green-500) 22%, transparent);
  }

  /* Über Textfeldern: Custom-Cursor ausblenden (nativer Caret übernimmt) */
  .fwn-cursor.is-text{opacity:0}
}

/* =============================================================
   ÜBER UNS — neuer Hero (zentriert + Vollbild-Banner)
   ============================================================= */
.u-hero2{padding:150px 0 0;position:relative;overflow:hidden}
.u-hero2-head{max-width:780px;margin:0 auto;text-align:center;display:flex;flex-direction:column;align-items:center}
.u-hero2-h1{font-size:clamp(44px,7vw,92px);font-weight:700;letter-spacing:-0.045em;line-height:1.04;margin:14px 0 0}
.u-hero2-sub{font-size:clamp(17px,1.6vw,21px);color:var(--fg-2);line-height:1.55;max-width:58ch;margin:22px 0 0}
.u-hero2-cta{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:34px}
.u-hero2-banner{position:relative;max-width:1240px;margin:64px auto 0;padding:0 32px}
.u-hero2-banner img{
  width:100%;height:clamp(300px,46vh,500px);object-fit:cover;object-position:center 28%;
  border-radius:28px;display:block;
}
.u-hero2-banner-tag{
  position:absolute;left:56px;bottom:24px;
  display:inline-flex;align-items:center;gap:10px;
  padding:10px 16px;border-radius:999px;
  background:rgba(12,14,13,.55);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.18);color:#fff;font-size:13px;font-weight:500;
}
.u-hero2-banner-dot{
  width:8px;height:8px;border-radius:50%;background:var(--green-500);
  box-shadow:0 0 0 0 rgba(33,135,74,.5);animation:projLivePulse 1.8s var(--ease-out) infinite;
}
@media (max-width:720px){
  .u-hero2{padding:120px 0 0}
  .u-hero2-banner{margin-top:44px;padding:0 20px}
  .u-hero2-banner-tag{left:32px;bottom:16px;font-size:12px}
}

/* =============================================================
   KONTAKT — Trust-Fotos (Ferdi & Dani, ohne Worte)
   ============================================================= */
.k-trust-photos{padding:140px 0}
@media (max-width:720px){.k-trust-photos{padding:80px 0}}
.k-trust-photos-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:18px;
}
.k-trust-photo{
  aspect-ratio:1/1;overflow:hidden;border-radius:22px;background:var(--surface-2);
  border:1px solid var(--line);
}
.k-trust-photo img{width:100%;height:100%;object-fit:cover;object-position:center 28%;display:block}
@media (max-width:720px){
  /* Mittleres Bild (Team) zuerst, groß, full-width */
  .k-trust-photos-grid{
    gap:10px;
    grid-template-columns:1fr 1fr;
  }
  /* Item 2 (Team-Foto) → oben, volle Breite, quadratisch */
  .k-trust-photo:nth-child(2){
    order:-1;
    grid-column:span 2;
    aspect-ratio:4/3;
    border-radius:18px;
  }
  /* Item 1 (Ferdi) + Item 3 (Dani) → darunter nebeneinander */
  .k-trust-photo:nth-child(1),
  .k-trust-photo:nth-child(3){
    aspect-ratio:3/4;
    border-radius:16px;
  }
}

/* =============================================================
   WEBSITES-Unterseite — schlichter Hero + bildschirmbreite
   Kategorie-Karte mit cleanen CSS-Mockups (wsb-*, wm-*)
   ============================================================= */
.wsb-hero{background:var(--bg);text-align:center;padding:clamp(120px,17vh,180px) 0 clamp(48px,7vh,90px)}
.wsb-hero-in{max-width:880px;margin:0 auto;display:flex;flex-direction:column;align-items:center}
.wsb-hero-logo{height:clamp(30px,3.4vw,46px);width:auto;display:block;margin-bottom:clamp(22px,3vw,38px);
  filter:drop-shadow(0 8px 30px rgba(0,0,0,.5));opacity:0;animation:rise .7s var(--ease-out) .05s forwards}
.wsb-hero-h1{font-size:clamp(44px,7vw,104px);font-weight:700;letter-spacing:-0.045em;line-height:1.0;margin:0;opacity:0;animation:rise 1s var(--ease-out) .2s forwards}
.wsb-hero-sub{font-size:clamp(17px,1.6vw,21px);color:var(--fg-2);line-height:1.55;max-width:52ch;margin:22px 0 0;opacity:0;animation:rise-blur .9s var(--ease-out) 1s forwards}
.wsb-hero-cta{margin-top:34px;opacity:0;animation:rise .8s var(--ease-out) 1.2s forwards}
@media(prefers-reduced-motion:reduce){
  .l-hero-h1,.l-hero-sub,.l-hero-cta,
  .standort-hero-h1,.standort-hero-sub,.standort-hero-ctas,
  .wsb-hero-logo,.wsb-hero-h1,.wsb-hero-sub,.wsb-hero-cta,
  .u-orbit-logo,.u-orbit-h1,.u-orbit-cta{opacity:1;animation:none}
}

/* Bildschirmbreite Karte */
.wsb-cat{padding:0 clamp(14px,3vw,40px) clamp(60px,9vh,110px)}
/* Caption ist jetzt innerhalb der Sticky-Spalte – diese Regel bleibt als Fallback */
.wsb-cat-card{
  position:relative;width:100%;max-width:1640px;margin:0 auto;
  min-height:clamp(560px,82vh,920px);
  border-radius:clamp(20px,2.4vw,34px);overflow:hidden;
  background:
    radial-gradient(120% 90% at 18% 12%, rgba(33,135,74,.30), transparent 55%),
    radial-gradient(120% 120% at 88% 100%, rgba(79,179,115,.18), transparent 55%),
    linear-gradient(160deg, #10241a 0%, #0a1410 60%, #0b1a12 100%);
  border:1px solid var(--line);
  display:flex;flex-direction:column;justify-content:flex-end;
  box-shadow:0 50px 120px -50px rgba(0,0,0,.7);
}
html[data-theme="light"] .wsb-cat-card{
  background:
    radial-gradient(120% 90% at 18% 12%, rgba(33,135,74,.20), transparent 55%),
    linear-gradient(160deg, #dfeee4 0%, #eef5ef 60%, #e7f1ea 100%);
  border-color:rgba(0,0,0,.08);
}

.wsb-cat-stage{position:absolute;inset:0;cursor:default}
/* Horizontaler Filmstreifen: Position wird im Pin-Modus per JS scroll-proportional
   gescrubbt (translateX), aktive Kategorie mittig, Nachbarn links/rechts daneben. */
.wsb-cat-panel{position:absolute;inset:0;opacity:0;transform:translateX(100%);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(12px,2.4vh,28px);
  padding:clamp(40px,6vh,72px) clamp(20px,4vw,80px) clamp(68px,9vh,104px);
  transition:opacity .4s var(--ease-out);will-change:transform,opacity}
.wsb-cat-panel.active{opacity:1;transform:translateX(0)}
/* Pin-Modus: alle Panels sichtbar (Position kommt vom Inline-Transform), kein Snap */
.scrollpin.is-pinned .wsb-cat-panel{opacity:1;transition:none}

/* Name + Beschreibung direkt bei der Grafik (mittig darüber) */
.wsb-cat-stat{display:none}
.wsb-cat-meta{order:-1;text-align:center;color:#fff;z-index:3;max-width:54ch}
.wsb-cat-meta .wsb-cat-title{font-size:clamp(24px,3vw,42px);font-weight:700;letter-spacing:-0.02em;line-height:1.04;margin:0}
.wsb-cat-meta p{margin-top:10px;font-size:clamp(14px,1.2vw,17px);color:rgba(255,255,255,.78);line-height:1.5}
html[data-theme="light"] .wsb-cat-meta{color:var(--fg)}
html[data-theme="light"] .wsb-cat-meta p{color:var(--fg-2)}

/* Mockup-Bühne: Grafik mittig unter dem Namen */
.wsb-cat-art{position:relative;width:100%;flex:1 1 auto;min-height:0;
  display:flex;align-items:center;justify-content:center}

/* ---- Browser-Mockup (clean) — dunkel/hell über CSS-Vars ---- */
/* Standard = Dark Mode (passt zur dunklen Karte) */
.wm{width:min(620px,82%);background:var(--surface-2);border-radius:14px;overflow:hidden;
  box-shadow:0 30px 70px -22px rgba(0,0,0,.75),0 0 0 1px rgba(255,255,255,.07);
  border:1px solid var(--line-2)}
.wm-tall{width:min(440px,62%)}
.wm-bar{display:flex;align-items:center;gap:6px;padding:11px 14px;background:#2b2b2b;border-bottom:1px solid #383838}
.wm-bar i{width:9px;height:9px;border-radius:50%;background:#444;display:block}
.wm-bar i:nth-child(1){background:#ff5f57}.wm-bar i:nth-child(2){background:#ffbd2e}.wm-bar i:nth-child(3){background:#28c840}
.wm-bar span{flex:1;height:15px;margin-left:8px;border-radius:4px;background:#3a3a3a;border:1px solid #484848}
.wm-nav{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid #333}
.wm-nav b{width:42px;height:13px;border-radius:4px;background:var(--green-500)}
.wm-nav u{width:30px;height:8px;border-radius:3px;background:rgba(255,255,255,.18);display:block}
.wm-nav em{margin-left:auto;width:54px;height:20px;border-radius:6px;background:var(--green-700,#1a5c32)}
.wm-screen{padding:18px;display:flex;flex-direction:column;gap:10px;background:var(--surface-2)}
.wm-hero{height:96px;border-radius:8px;background:linear-gradient(135deg,#1f5014,#21874a)}
.wm-hero.sm{height:56px}
.wm-l{height:9px;border-radius:4px;background:rgba(255,255,255,.1)}
.wm-l.w35{width:35%}.wm-l.w40{width:40%}.wm-l.w45{width:45%}.wm-l.w55{width:55%}.wm-l.w60{width:60%}.wm-l.w70{width:70%}.wm-l.w75{width:75%}.wm-l.w80{width:80%}.wm-l.w90{width:90%}
.wm-cards{display:flex;gap:8px}
.wm-cards span{flex:1;height:46px;border-radius:7px;background:rgba(255,255,255,.06);border:1px solid var(--line)}
.wm-band{height:40px;border-radius:8px;background:rgba(33,135,74,.14)}
.wm-foot{height:24px;border-radius:6px;background:var(--green-700,#1a5c32);opacity:1}
.wm-cta{width:120px;height:26px;border-radius:7px;background:var(--green-500)}
.wm-split{display:flex;gap:14px;align-items:center}
.wm-col{flex:1;display:flex;flex-direction:column;gap:8px}
.wm-h{height:18px;width:65%;border-radius:5px;background:rgba(255,255,255,.14)}
.wm-h.lg{height:24px;width:75%}
.wm-shot{width:46%;height:104px;border-radius:8px;background:linear-gradient(135deg,#4fb373,#1f5014)}
/* Professional */
.wm-prohero{height:120px;border-radius:8px;background:linear-gradient(135deg,#11241a,#21874a);display:flex;align-items:center;padding:0 18px}
.wm-prohero-tx{display:flex;flex-direction:column;gap:9px;width:70%}
.wm-prohero .wm-h{background:rgba(255,255,255,.92)}
.wm-prohero .wm-l{background:rgba(255,255,255,.5)}
.wm-prohero .wm-cta{background:#fff}
.wm-stats{display:flex;gap:8px}
.wm-stats span{flex:1;height:34px;border-radius:7px;background:rgba(255,255,255,.06);border:1px solid var(--line)}
.wm-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.wm-grid span{height:48px;border-radius:7px;background:rgba(255,255,255,.06);border:1px solid var(--line)}
.wm-grid span:nth-child(2),.wm-grid span:nth-child(4),.wm-grid span:nth-child(6){background:rgba(33,135,74,.14)}
/* Redesign: alt -> neu */
.wm-redesign{display:flex;align-items:center;gap:clamp(14px,2.4vw,34px);width:min(760px,94%)}
.wm-sm{width:auto;flex:1}
.wm-old{filter:grayscale(.85);opacity:.85;transform:rotate(-1deg)}
.wm-old .wm-bar i{background:#555}
.wm-l.dim{background:rgba(255,255,255,.06)}.wm-h.dim{background:rgba(255,255,255,.08)}
.wm-new{transform:rotate(1deg);box-shadow:0 40px 80px -28px rgba(33,135,74,.5)}

/* Light-Mode: Mockup zeigt sich hell (wie ein echter Browser) */
html[data-theme="light"] .wm{background:#fff;border-color:rgba(0,0,0,.06);
  box-shadow:0 30px 70px -22px rgba(0,0,0,.22),0 0 0 1px rgba(0,0,0,.04)}
html[data-theme="light"] .wm-bar{background:#f1f3f2;border-bottom-color:rgba(0,0,0,.07)}
html[data-theme="light"] .wm-bar i{background:#d3d8d5}
html[data-theme="light"] .wm-bar i:nth-child(1){background:#e6a09a}
html[data-theme="light"] .wm-bar i:nth-child(2){background:#e7cf93}
html[data-theme="light"] .wm-bar i:nth-child(3){background:#9ccf92}
html[data-theme="light"] .wm-bar span{background:#fff;border-color:rgba(0,0,0,.08)}
html[data-theme="light"] .wm-nav{border-color:rgba(0,0,0,.06)}
html[data-theme="light"] .wm-nav u{background:#d7ddd9}
html[data-theme="light"] .wm-nav em{background:#11241a}
html[data-theme="light"] .wm-screen{background:#fff}
html[data-theme="light"] .wm-l{background:#e4e8e5}
html[data-theme="light"] .wm-cards span{background:#eef1ef;border-color:rgba(0,0,0,.05)}
html[data-theme="light"] .wm-band{background:#eef6f0}
html[data-theme="light"] .wm-foot{background:#11241a;opacity:.9}
html[data-theme="light"] .wm-h{background:#16271d}
html[data-theme="light"] .wm-stats span{background:#eef1ef;border-color:rgba(0,0,0,.05)}
html[data-theme="light"] .wm-grid span{background:#e9efe9;border-color:rgba(0,0,0,.05)}
html[data-theme="light"] .wm-grid span:nth-child(2),
html[data-theme="light"] .wm-grid span:nth-child(4),
html[data-theme="light"] .wm-grid span:nth-child(6){background:#dcebe0}
html[data-theme="light"] .wm-old .wm-bar i{background:#cfcfcf}
html[data-theme="light"] .wm-l.dim{background:#cfd3d0}
html[data-theme="light"] .wm-h.dim{background:#b9bdba}
.wm-arrow{flex:none;width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:var(--green-500);color:#fff;box-shadow:0 12px 30px -10px rgba(33,135,74,.6)}

/* Kategorie-Tabs unten (Glass-Bar) */
.wsb-cat-tabs{position:relative;z-index:4;display:flex;flex-wrap:wrap;justify-content:center;gap:6px;
  margin:0 auto clamp(18px,2.4vw,30px);padding:7px;border-radius:999px;width:max-content;max-width:94%;
  background:rgba(12,18,14,.55);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.16)}
.wsb-cat-tab{border:0;cursor:pointer;font-family:inherit;font-size:clamp(12px,1.05vw,14.5px);font-weight:500;
  color:rgba(255,255,255,.8);background:transparent;padding:10px 18px;border-radius:999px;white-space:nowrap;
  transition:background .3s var(--ease),color .3s var(--ease)}
.wsb-cat-tab:hover{color:#fff;background:rgba(255,255,255,.1)}
.wsb-cat-tab.active{background:#fff;color:#11241a;font-weight:600}

@media (max-width:760px){
  .wsb-cat-card{min-height:auto}
  .wsb-cat-stage{position:relative}
  /* ≤760px ohne Pin-Klasse: Tab-Fallback */
  .wsb-cat-panel{position:absolute;transform:none;opacity:0;padding:clamp(40px,9vw,64px) 18px 28px}
  .wsb-cat-panel.active{position:relative;transform:none;opacity:1}
  .wsb-cat-panel.scrollpin-before,.wsb-cat-panel.scrollpin-after{transform:none}
  .wsb-cat-art{padding:0}
  .wm,.wm-tall{width:88%}
  .wsb-cat-meta{text-align:center;max-width:none;padding:0 16px}
  .wm-redesign{flex-direction:column;width:78%}
  .wsb-cat-tabs{gap:4px}
  .wsb-cat-tab{padding:9px 13px}
}
@media (max-width:480px){
  /* Scroll-Pin auf Mobile: Tab-Nav ausblenden */
  .wsb-cat-tabs{display:none}
  /* Karte: balancierte Höhe wie Desktop, abgerundet */
  .scrollpin.is-pinned .wsb-cat-card{max-height:80vh;border-radius:20px}
  /* Sticky-Wrapper: weniger Top-Padding auf kleinen Screens */
  .scrollpin.is-pinned .scrollpin-sticky{
    padding:clamp(76px,10vh,100px) 12px clamp(16px,2vh,28px)
  }
  /* Scrollstrecke pro Step vergrößern → mehr Abstand zwischen Kategorien */
  .scrollpin.is-pinned{height:calc(100vh + (var(--sp-steps) * 110vh))}
  /* Panel: Titel oben, Mockup darunter zentriert */
  .scrollpin.is-pinned .wsb-cat-panel{
    padding:clamp(20px,3vh,32px) 14px 18px;
    justify-content:flex-start;
    align-items:center;
    gap:14px;
  }
  /* Bühne füllt Resthöhe; Mockup wird per JS proportional eingepasst (scale-to-fit) */
  .scrollpin.is-pinned .wsb-cat-art{
    max-height:none;overflow:hidden;
    align-items:center;justify-content:center;
  }
  /* Referenzbreiten = NUR Proportionen. JS skaliert das ganze Mockup uniform
     auf die verfügbare Fläche → kein Stauchen, kein Abschneiden,
     Desktop-Proportionen bleiben erhalten. */
  .scrollpin.is-pinned .wm{width:520px;max-width:none}
  .scrollpin.is-pinned .wm.wm-tall{width:360px}
  .scrollpin.is-pinned .wm-redesign{
    flex-direction:row;align-items:center;width:560px;gap:20px;
  }
  .scrollpin.is-pinned .wm-sm{flex:1;width:auto}
  .scrollpin.is-pinned .wm,
  .scrollpin.is-pinned .wm-redesign{transform-origin:center center}
  /* Meta-Text: Überschrift klein, Beschreibung ausgeblendet */
  .wsb-cat-meta .wsb-cat-title{font-size:clamp(20px,5.5vw,28px)}
  .wsb-cat-meta p:not(.wsb-cat-title){display:none}
  /* Mehr Platz am unteren Rand damit die letzte Grafik nicht abgeschnitten wird */
  .scrollpin.is-pinned .wsb-cat-panel{
    padding:clamp(20px,3vh,32px) 14px 32px;
  }
}

/* =============================================================
   RECHTLICHE SEITEN — Impressum & Datenschutzerklärung
   ============================================================= */
.legal-hero{padding:clamp(116px,16vh,168px) 0 clamp(26px,4vh,46px);border-bottom:1px solid var(--line)}
.legal-hero .sec-eye{margin-bottom:12px}
.legal-h1{font-size:clamp(38px,6vw,74px);font-weight:700;letter-spacing:-0.04em;line-height:1.02}
.legal-section{padding:clamp(44px,6vh,80px) 0 clamp(80px,12vh,140px)}

/* 2-Spalten (Datenschutz): sticky TOC + Inhalt */
.legal-grid{display:grid;grid-template-columns:260px minmax(0,1fr);gap:clamp(32px,5vw,72px);
  align-items:start;max-width:1160px}
.legal-toc{position:sticky;top:92px;background:var(--surface);border:1px solid var(--line);
  border-radius:18px;padding:24px 22px}
.legal-toc-title{display:block;font-size:13px;font-weight:600;letter-spacing:0.04em;text-transform:uppercase;
  color:var(--fg-3);margin-bottom:14px}
.legal-toc ol{list-style:none;counter-reset:toc;display:flex;flex-direction:column;gap:2px}
.legal-toc li{counter-increment:toc}
.legal-toc a{display:flex;gap:11px;align-items:baseline;padding:8px 10px;border-radius:9px;
  font-size:14px;line-height:1.35;color:var(--fg-2);transition:background .2s var(--ease),color .2s var(--ease)}
.legal-toc a::before{content:counter(toc);color:var(--green-300);font-weight:600;font-variant-numeric:tabular-nums;flex:none}
.legal-toc a:hover{background:color-mix(in oklab,var(--fg) 6%,transparent);color:var(--fg)}

/* Inhaltstypografie */
.legal-body{font-size:16.5px;line-height:1.75;color:var(--fg-2);max-width:74ch}
.legal-body > h2:first-child{margin-top:0;padding-top:0;border-top:0}
.legal-body h2{font-size:clamp(24px,3vw,34px);font-weight:700;letter-spacing:-0.02em;color:var(--fg);
  line-height:1.12;margin:54px 0 18px;padding-top:30px;border-top:1px solid var(--line);scroll-margin-top:92px}
.legal-body h3{font-size:clamp(18px,1.9vw,22px);font-weight:600;color:var(--fg);margin:32px 0 10px;scroll-margin-top:92px}
.legal-body h4{font-size:16px;font-weight:600;color:var(--fg);margin:22px 0 8px}
.legal-body p{margin:0 0 14px}
.legal-body ul{margin:0 0 16px;padding-left:22px}
.legal-body li{margin-bottom:9px}
.legal-body a{color:var(--green-300);word-break:break-word}
html[data-theme="light"] .legal-body a{color:var(--green-500)}
.legal-body a:hover{text-decoration:underline}
.legal-body strong{color:var(--fg);font-weight:600}

/* ── Design-Upgrade: H2 mit grünem Akzent-Balken ── */
.legal-body h2{position:relative;padding-left:18px}
.legal-body h2::before{
  content:"";position:absolute;left:0;top:32px;bottom:6px;width:3px;border-radius:3px;
  background:var(--grad-brand);
}
.legal-body > h2:first-child{padding-top:0}
.legal-body > h2:first-child::before{top:2px}

/* Adressblock im Impressum: leicht hervorgehoben */
.legal-body > p:first-child{
  font-size:17px;color:var(--fg);font-weight:500;line-height:1.65;
}

@media (max-width:900px){
  .legal-grid{grid-template-columns:1fr;gap:8px}
  .legal-toc{position:static;border-radius:14px;padding:18px 16px;margin-bottom:36px}
}
@media (max-width:600px){
  .legal-hero{padding:clamp(96px,16vh,140px) 0 clamp(20px,4vh,32px)}
  .legal-section{padding:clamp(28px,5vh,48px) 0 clamp(56px,10vh,96px)}
  .legal-body{font-size:15.5px;line-height:1.7}
  .legal-body h2{font-size:21px;margin:36px 0 12px;padding-top:24px}
}

/* =============================================================
   SCROLL-PIN — gepinnte Scroll-Sequenz (wiederverwendbar)
   Aktiv ab >820px (per JS .is-pinned). Mobile = normaler Fluss.
   ============================================================= */
.scrollpin{position:relative}
.scrollpin-sticky{position:relative}

/* Pin-Modus: Track-Höhe = 1 Viewport + (Steps × Scrollstrecke je Step) */
.scrollpin.is-pinned{
  height:calc(100vh + (var(--sp-steps,4) * 82vh));
  z-index:5;
  padding:0;
}
/* Sticky-Viewport: Karte + Beschriftung als Spalte, oben Platz für den Header */
.scrollpin.is-pinned .scrollpin-sticky{
  position:sticky;top:0;height:100vh;overflow:clip;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(14px,2vh,22px);
  padding:clamp(86px,12vh,124px) clamp(16px,3vw,48px) clamp(28px,5vh,56px);
  background:var(--bg);
}
/* Hero liegt hinten (wird beim Hochschieben der Karte ausgeblendet) */
.scrollpin.is-pinned .wsb-hero{
  position:absolute;inset:0;z-index:1;margin:0;
  display:flex;align-items:center;justify-content:center;
}
.scrollpin.is-pinned .wsb-hero-in{padding:0 clamp(20px,5vw,56px)}
/* Abgerundete Karte (kein Vollbild). Schiebt sich von unten über den Hero;
   translateY wird per JS scroll-proportional gesetzt. */
.scrollpin.is-pinned .wsb-cat-card{
  position:relative;z-index:2;
  width:100%;max-width:1240px;flex:1 1 auto;min-height:0;max-height:min(920px,86vh);margin:0;
  transition:none;will-change:transform;
}
/* Beschriftung unterhalb der Karte, statisch in der Sticky-Spalte */
.scrollpin.is-pinned .wsb-sticky-caption{
  flex-shrink:0;margin:0;padding:0;z-index:2;
}
/* Filmstreifen: die Bühne ist eine horizontale Reihe, die per JS (translateX)
   gezogen wird. Panels liegen eng nebeneinander (Breite per JS gesetzt). */
.scrollpin.is-pinned .wsb-cat-stage{
  position:absolute;top:0;bottom:0;left:0;right:auto;width:auto;
  display:flex;align-items:stretch;cursor:default;will-change:transform;
}
.scrollpin.is-pinned .wsb-cat-panel{
  position:relative;inset:auto;flex:0 0 auto;height:100%;opacity:1;transform:none;transition:none;
  padding:clamp(40px,6vh,72px) clamp(18px,2.4vw,40px) clamp(68px,9vh,104px);
  gap:clamp(24px,4vh,48px);
}


/* ═══════════ LEISTUNGSUMFANG – interaktives Bento (Klick → Lightbox) ═══════════ */
.lz-bento-sec{padding:clamp(64px,9vh,120px) 0}
.lz-bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(190px,auto);grid-auto-flow:row dense;gap:clamp(12px,1.2vw,18px)}
.lz-w2{grid-column:span 2}
.lz-h2{grid-row:span 2}
@media (max-width:900px){
  .lz-bento{grid-template-columns:repeat(2,1fr)}
  .lz-w2{grid-column:span 2}
  .lz-h2{grid-row:span 1}
}
/* Mobile: echtes 2-Spalten-Bento statt Einzelstapel. Breite Karten (lz-w2)
   spannen beide Spalten und geben dem Grid Bento-Rhythmus. */
@media (max-width:560px){
  .lz-bento{grid-template-columns:repeat(2,1fr);grid-auto-rows:minmax(132px,auto);gap:10px}
  .lz-w2{grid-column:span 2}
  .lz-h2{grid-row:span 1}
  .lz-card{padding:18px 14px}
  .lz-card .b-fig{min-height:96px;margin-bottom:10px}
  .lz-card .b-fig > *{max-height:104px}
  .lz-card:not(.lz-w2):not(.lz-h2):not(.lz-stat) .b-fig > *{max-width:108px}
  .lz-card .b-title{font-size:15px}
  .lz-hint{width:26px;height:26px;top:10px;right:10px}
  .lz-hint svg{width:12px;height:12px}
}

.lz-card{appearance:none;width:100%;font:inherit;color:inherit;text-align:center;cursor:pointer;padding:30px 26px}
/* Einheitliche Visual-Bühne: gleiche Höhe + gleicher relativer Rand-Abstand in jeder Karte */
.lz-card .b-fig{
  flex:1;display:flex;align-items:center;justify-content:center;
  min-height:148px;margin-bottom:14px;width:100%;
}
/* Nichts ragt über die Karte hinaus; einheitliche Maximalhöhe der Grafiken */
.lz-card .b-fig > *{max-width:100%;max-height:160px}
/* Einspaltige Karten: Visual auf einen einheitlichen Footprint (~Ring-Größe) begrenzen */
.lz-card:not(.lz-w2):not(.lz-h2):not(.lz-stat) .b-fig > *{max-width:150px}
/* Zweispaltige Karten: Visual füllt die Breite mit konstantem Innenrand */
.lz-card.lz-w2 .b-fig > *{max-width:100%}
.lz-card .b-desc{display:none}
.lz-card:focus-visible{outline:2px solid var(--green-400);outline-offset:3px}
.lz-hint{position:absolute;top:18px;right:18px;width:34px;height:34px;border-radius:50%;
  border:1px solid var(--line-2);display:grid;place-items:center;color:var(--fg-3);
  opacity:.45;transition:opacity .3s var(--ease-out),color .3s var(--ease-out)}
.lz-card:hover .lz-hint{opacity:1;color:var(--green-400)}
.lz-hint svg{width:15px;height:15px}

/* — Grafiken — */
.ring{width:118px;height:118px;border-radius:50%;border:1px solid var(--line-2);display:flex;align-items:center;justify-content:center;position:relative}
.ring svg{width:58px;height:58px;stroke:var(--fg-2);fill:none;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}

.lz-speed{width:100%;display:flex;flex-direction:column;gap:14px}
.lz-speed-head{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--fg-2);font-weight:500}
.graph{width:100%;height:96px}
.graph path.line{fill:none;stroke:var(--fg);stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round;stroke-dasharray:1000;stroke-dashoffset:1000}
.reveal.in .graph path.line{animation:line-draw 2.6s var(--ease-out) .3s forwards}
.graph path.fill{fill:url(#lzSpeedGrad);opacity:0}
.reveal.in .graph path.fill{animation:lz-fade .8s var(--ease) 1.6s forwards}
@keyframes line-draw{to{stroke-dashoffset:0}}
@keyframes lz-fade{to{opacity:1}}

.lz-win{width:100%;aspect-ratio:16/11;background:var(--surface-2);border-radius:16px;border:1px solid var(--line);overflow:hidden;display:flex;flex-direction:column}
.lz-win-bar{height:24px;display:flex;align-items:center;gap:5px;padding:0 11px;border-bottom:1px solid var(--line)}
.lz-win-bar i{width:7px;height:7px;border-radius:50%;background:var(--line-2)}
.lz-wire{flex:1;padding:16px;display:flex;flex-direction:column;gap:9px}
.lz-wire .w1{height:11px;width:55%;border-radius:4px;background:var(--grad-brand)}
.lz-wire .w2{height:9px;width:80%;border-radius:4px;background:var(--line-2)}
.lz-wire-row{display:flex;gap:9px;margin-top:4px;flex:1}
.lz-wire-row .wb{flex:1;border-radius:8px;background:var(--surface);border:1px solid var(--line)}

.lz-design{display:flex;flex-direction:column;align-items:center;gap:18px}
.lz-aa{font-family:var(--font);font-size:60px;font-weight:700;letter-spacing:-0.04em;line-height:1;
  background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;color:transparent}
.lz-swatches{display:flex;gap:9px}
.lz-swatches span{width:30px;height:30px;border-radius:9px}
.lz-swatches span:nth-child(1){background:var(--fg)}
.lz-swatches span:nth-child(2){background:var(--green-500)}
.lz-swatches span:nth-child(3){background:var(--green-300)}
.lz-swatches span:nth-child(4){background:var(--fg-3)}

.lz-uptime{display:flex;flex-direction:column;align-items:center;gap:8px}
.lz-uptime .b-sub{font-size:13px;color:var(--fg-2)}

/* Responsive: Geräte */
.lz-devices{position:relative;width:150px;height:118px}
.lz-dev-mon{position:absolute;left:2px;top:4px;width:120px;height:78px;border:2px solid var(--fg-2);border-radius:11px}
.lz-dev-mon::after{content:"";position:absolute;left:50%;bottom:-13px;transform:translateX(-50%);width:46px;height:11px;border:2px solid var(--fg-2);border-top:0;border-radius:0 0 7px 7px}
.lz-dev-phone{position:absolute;right:0;bottom:0;width:44px;height:68px;border:2px solid var(--green-400);border-radius:11px;background:var(--surface)}
.lz-dev-phone::after{content:"";position:absolute;left:50%;top:8px;transform:translateX(-50%);width:14px;height:2px;border-radius:2px;background:var(--green-400)}

/* Formulare */
.lz-form{width:100%;max-width:300px;display:flex;flex-direction:column;gap:12px}
.lz-field{height:36px;border-radius:10px;background:var(--surface-2);border:1px solid var(--line)}
.lz-field.short{width:62%}
.lz-btn{height:38px;width:130px;border-radius:10px;background:var(--grad-brand);margin-top:4px}

/* SEO */
.lz-seo{display:flex;flex-direction:column;align-items:center;gap:18px;width:100%}
.lz-search{display:flex;align-items:center;gap:9px;width:min(230px,82%);height:40px;padding:0 15px;border-radius:999px;border:1px solid var(--line-2);color:var(--fg-2)}
.lz-search svg{width:16px;height:16px;flex:none}
.lz-search span{height:8px;flex:1;border-radius:4px;background:var(--line-2)}
.lz-bars{display:flex;align-items:flex-end;gap:9px;height:48px}
.lz-bars i{width:17px;border-radius:5px 5px 0 0;background:var(--grad-brand)}
.lz-bars i:nth-child(1){height:45%}.lz-bars i:nth-child(2){height:72%}.lz-bars i:nth-child(3){height:100%}

/* Wartung: Chip-Cloud */
.stage{width:100%;flex:1;min-height:90px;display:flex;flex-wrap:wrap;gap:6px;align-content:center;padding:4px 0}
.chip{display:inline-flex;align-items:center;gap:5px;background:var(--surface-2);border:1px solid var(--line);
  border-radius:999px;padding:3px 10px 3px 3px;font-size:11px;font-weight:500;color:var(--fg);box-shadow:0 3px 8px rgba(0,0,0,.2)}
.chip .av{width:16px;height:16px;border-radius:50%;background:linear-gradient(135deg,var(--green-300),var(--green-700));flex:none}
.chip .av.b{background:linear-gradient(135deg,#d39,#533)}
.chip .av.c{background:linear-gradient(135deg,#39c,#135)}
.chip .av.d{background:linear-gradient(135deg,#f90,#c60)}
.chip .av.e{background:linear-gradient(135deg,#c39,#636)}
.chip .av.f{background:linear-gradient(135deg,#3bb,#069)}

/* — Lightbox — */
body.lz-lock{overflow:hidden}
.lz-modal{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:24px}
.lz-modal[hidden]{display:none}
.lz-modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.62);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);opacity:0;transition:opacity .3s var(--ease-out)}
.lz-modal.open .lz-modal-backdrop{opacity:1}
.lz-modal-panel{position:relative;z-index:1;width:min(560px,100%);max-height:88vh;overflow:auto;
  background:var(--surface);border:1px solid var(--line);border-radius:28px;padding:clamp(30px,4vw,46px);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.7);
  transform:scale(.93) translateY(16px);opacity:0;transition:transform .38s var(--ease-out),opacity .38s var(--ease-out)}
.lz-modal.open .lz-modal-panel{transform:none;opacity:1}
.lz-modal-x{position:absolute;top:18px;right:18px;width:38px;height:38px;border-radius:50%;border:1px solid var(--line);
  background:var(--surface-2);color:var(--fg-2);display:grid;place-items:center;cursor:pointer;transition:color .2s,border-color .2s}
.lz-modal-x:hover{color:var(--fg);border-color:var(--line-2)}
.lz-modal-x svg{width:18px;height:18px}
.lz-modal-fig{min-height:180px;display:flex;align-items:center;justify-content:center;margin-bottom:24px}
.lz-modal-fig .graph,.lz-modal-fig .lz-speed,.lz-modal-fig .lz-win{max-width:380px}
.lz-modal-fig .graph path.line{stroke-dashoffset:0;animation:none}
.lz-modal-fig .graph path.fill{opacity:1}
.lz-modal-fig .ellipse path{stroke-dashoffset:0;animation:none}
.lz-modal-title{font-family:var(--font);font-size:clamp(24px,2.6vw,32px);font-weight:600;letter-spacing:-0.025em;margin:0 0 14px;color:var(--fg)}
.lz-modal-desc{font-size:16px;line-height:1.62;color:var(--fg-2);margin:0}

/* ── Frosted-Glass-Leiste am unteren Bildschirmrand ────────── */
.fwn-blur-bar{
  position:fixed;bottom:0;left:0;right:0;
  height:clamp(90px,13vh,130px);
  z-index:50;
  pointer-events:none;
  /* Echter Blur — faded über Maske von oben nach unten ein */
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  /* Maske: weicher ease-Verlauf über die GESAMTE Höhe → keine sichtbare Kante.
     Viele Stops = sanftes Anschwellen statt hartem Einsatz. */
  -webkit-mask-image:linear-gradient(to bottom,
    transparent 0%,
    rgba(0,0,0,.04) 18%,
    rgba(0,0,0,.13) 34%,
    rgba(0,0,0,.30) 50%,
    rgba(0,0,0,.55) 66%,
    rgba(0,0,0,.82) 84%,
    #000 100%);
  mask-image:linear-gradient(to bottom,
    transparent 0%,
    rgba(0,0,0,.04) 18%,
    rgba(0,0,0,.13) 34%,
    rgba(0,0,0,.30) 50%,
    rgba(0,0,0,.55) 66%,
    rgba(0,0,0,.82) 84%,
    #000 100%);
  /* Subtile Farbtönung mit gleicher weicher Verteilung */
  background:linear-gradient(to bottom,
    transparent 0%,
    color-mix(in oklab, var(--bg) 14%, transparent) 50%,
    color-mix(in oklab, var(--bg) 55%, transparent) 100%);
}
@media (prefers-reduced-motion:reduce){.lz-modal-panel,.lz-modal-backdrop{transition:none}}

/* ── Glühwürmchen: grüner Leuchtkomet, reist zu Überschriften & CTAs ── */
.fwn-firefly-layer{
  position:fixed;inset:0;
  pointer-events:none;
  z-index:90;                /* über dem Content, unter Topbar(100)/FUI(200) */
  /* screen: grüner Punkt leuchtet additiv über dunklem BG und verschmilzt
     mit dem grünen Wort → „verschwindet" darin. */
  mix-blend-mode:screen;
  opacity:0;
  animation:fwn-firefly-wake 1.4s ease 1.1s forwards;
  contain:layout style size;
}
/* Light-Theme: normal blend (multiply wurde auf hellen/bunten Flächen zu dunkel).
   Farben weiter unten werden im Light-Mode lebendiger gesetzt. */
html[data-theme="light"] .fwn-firefly-layer{mix-blend-mode:normal}
@keyframes fwn-firefly-wake{from{opacity:0}to{opacity:1}}

.fwn-firefly{
  position:absolute;top:0;left:0;
  /* Größe & Deckkraft nehmen entlang des Schweifs ab (--i = 0..6) */
  --size:calc(17px - var(--i) * 1.9px);
  width:var(--size);height:var(--size);
  border-radius:50%;
  opacity:calc(1 - var(--i) * 0.12);
  /* Dunkleres, satteres Grün (green-400 → green-500), nicht grell */
  background:radial-gradient(circle,
    rgba(79,179,115,.95) 0%,
    rgba(33,135,74,.55) 40%,
    rgba(33,135,74,0) 72%);
  will-change:transform;
}
/* Kopf: kräftiger, atmet leicht (Deckkraft, kollidiert nicht mit JS-transform) */
.fwn-firefly-head{
  animation:fwn-firefly-core 2.6s ease-in-out infinite;
}
@keyframes fwn-firefly-core{0%,100%{opacity:.82}50%{opacity:1}}
/* Pulsierender Glow-Halo um den Kopf (eigene transform-scale auf ::before) */
.fwn-firefly-head::before{
  content:"";position:absolute;inset:-150%;
  border-radius:50%;
  background:radial-gradient(circle,
    rgba(33,135,74,.42) 0%,
    rgba(31,80,20,.12) 45%,
    transparent 70%);
  animation:fwn-firefly-glow 2.6s ease-in-out infinite;
}
@keyframes fwn-firefly-glow{
  0%,100%{transform:scale(.8);opacity:.5}
  50%{transform:scale(1.3);opacity:1}
}
/* Light-Mode-Farben: lebendiges, sattes Grün, gut sichtbar auf hellem BG */
html[data-theme="light"] .fwn-firefly{
  background:radial-gradient(circle,
    rgba(33,135,74,.95) 0%,
    rgba(79,179,115,.5) 42%,
    rgba(79,179,115,0) 72%);
}
html[data-theme="light"] .fwn-firefly-head::before{
  background:radial-gradient(circle,
    rgba(79,179,115,.4) 0%,
    rgba(33,135,74,.12) 45%,
    transparent 70%);
}
@media (max-width:600px){
  .fwn-firefly{--size:calc(13px - var(--i) * 1.5px)}
}
/* CTA-Button leuchtet grün auf, während das Glühwürmchen darauf sitzt */
.fwn-lit{
  animation:fwn-lit-pulse 2.2s ease-in-out infinite;
}
@keyframes fwn-lit-pulse{
  0%,100%{
    box-shadow:0 0 10px 2px rgba(33,135,74,.5),
               0 0 26px 6px rgba(33,135,74,.22),
               0 0 0 2px rgba(79,179,115,.22);
  }
  50%{
    box-shadow:0 0 16px 4px rgba(79,179,115,.72),
               0 0 44px 12px rgba(33,135,74,.32),
               0 0 0 3px rgba(79,179,115,.36);
  }
}
@media (prefers-reduced-motion:reduce){
  .fwn-firefly-layer{display:none}
}

/* ───────────────────────────────────────────────────────────────────────────
   iOS In-App-Browser-Sprung-Fix (Instagram/Chrome-App, WKWebView):
   Dort verkleinert die App-Leiste beim Scrollen die LAYOUT-Höhe → 100svh/Nsvh-
   Sektionen rechnen sich neu, und alles darunter springt um ein Vielfaches der
   Leistenhöhe (Hero 100svh + Leistungen-Pin 360svh = ~4,6×). In Safari passiert
   das nicht (dort ändert sich nur der sichtbare Bereich, nicht das Layout).
   Lösung: viewport-hohe Sektionen auf die EINMAL eingefrorene Höhe --vph fixieren
   (siehe Inline-Skript im <head>), Fallback bleibt svh. Nur Mobile, wo das Problem
   auftritt. Am Ende der Datei, damit es die svh-Regeln überschreibt.
   ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 900px){
  .hero-full      { height: var(--vph, 100svh); }
  .l-hero         { min-height: var(--vph, 100svh); }
  .svc-pin-sticky { height: var(--vph, 100svh); }
  /* Pin-Strecke = 3,6 × Viewport (entspricht dem bisherigen 360svh), eingefroren */
  .svc-pin-spacer { height: calc(var(--vph, 100svh) * 3.6); }
  /* WICHTIG: die Karten-Schiene MUSS mit eingefroren werden (war 56svh), sonst
     skalieren die Kacheln live mit, während Sticky/Spacer eingefroren sind →
     „komisches" Skalieren beim Scrollen im In-App-Browser. 0,56 × Viewport = 56svh. */
  .svc-pin-rail   { height: min(calc(var(--vph, 100svh) * 0.56), 520px); }
  /* Weitere gepinnte Vollbild-Sektionen (GEO/Bayern-Tablet, Standort-Fragen,
     Team-Bilderstapel) ebenfalls einfrieren, damit sie nicht mitspringen. */
  .geo-scroll-inner,
  .bm-scroll-inner,
  .lq-sticky      { height: var(--vph, 100svh); }
  .standort-hero  { min-height: var(--vph, 100vh); }

  /* Glühwürmchen bleibt auf Mobile sichtbar, aber OHNE das teure
     mix-blend-mode:screen — das war auf iOS der Lag-Verursacher (Vollbild-Layer
     pro Scroll-Frame neu komponiert). normal blend ist günstig; auf dem dunklen
     Hintergrund sieht der grüne Leucht-Punkt nahezu identisch aus. Steht bewusst
     nach der Basis-Regel (mix-blend-mode:screen), damit es diese überschreibt. */
  .fwn-firefly-layer{ mix-blend-mode:normal; }
}