/* ==========================================================================
   CODE MASCHINE — Theme 2026 (hell)
   Design System
   ========================================================================== */

:root{
  /* --- Flächen --- */
  --bg:            #FFFFFF;
  --bg-elev:       #F5F8F6;
  --surface:       #FFFFFF;
  --surface-2:     #F1F5F3;
  --surface-3:     #E6EDEA;
  --line:          rgba(14,32,26,.09);
  --line-strong:   rgba(14,32,26,.17);

  /* --- Text --- */
  --text:          #0E1A16;
  --text-2:        #3B4945;
  --muted:         #66756F;

  /* --- Marke --- */
  --brand:         #65BC7B;   /* CI-Grün, Flächen */
  --brand-text:    #2E8C4B;   /* kontraststark auf Weiß */
  --brand-bright:  #2E8C4B;
  --brand-dim:     #3E8A56;
  --brand-deep:    #123326;
  --brand-tint:    #E9F6EC;
  --accent:        #1E9C8E;   /* Teal */
  --accent-tint:   #E4F4F1;

  /* --- Dunkle Flächen (CTA/Footer) --- */
  --ink:           #0B1512;
  --ink-2:         #112019;

  /* --- Effekt --- */
  --shadow-sm: 0 1px 2px rgba(14,32,26,.05), 0 4px 14px -6px rgba(14,32,26,.10);
  --shadow-md: 0 12px 34px -14px rgba(14,32,26,.22);
  --shadow-lg: 0 34px 80px -30px rgba(14,32,26,.30);
  --shadow-brand: 0 18px 44px -18px rgba(101,188,123,.55);

  --wrap: 1240px;
  --wrap-narrow: 860px;
  --gut: clamp(20px, 5vw, 52px);
  --nav-h: 76px;

  --ease: cubic-bezier(.22,1,.36,1);
  --ease-io: cubic-bezier(.65,.05,.36,1);

  --r-sm: 10px; --r: 16px; --r-lg: 24px; --r-xl: 32px;

  /* --- Schrift --- */
  --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
               Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-display: var(--font-sans);   /* Ueberschriften/Labels; hier spaeter trennbar */
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--nav-h) + 24px); }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}

body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--font-sans);
  font-size:17px; line-height:1.65; font-feature-settings:"cv11","ss01";
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img,svg,video{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; }
::selection{ background:var(--brand); color:#06120A; }

/* --- Typo -------------------------------------------------------------- */
h1,h2,h3,h4{
  font-family:var(--font-display); font-weight:600; line-height:1.08;
  letter-spacing:-.025em; margin:0 0 .5em; text-wrap:balance; color:var(--text);
}
h1{ font-size:clamp(2.4rem,6vw,4.4rem); letter-spacing:-.04em; }   /* Inter laeuft breiter als eine Grotesk */
h2{ font-size:clamp(1.95rem,4.2vw,3.1rem); letter-spacing:-.03em; }
h3{ font-size:clamp(1.25rem,2.2vw,1.65rem); }
h4{ font-size:1.06rem; letter-spacing:-.01em; }
p{ margin:0 0 1.15em; color:var(--text-2); }
p:last-child{ margin-bottom:0; }
strong{ color:var(--text); font-weight:600; }

.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-display); font-size:.75rem; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase; color:var(--brand-text); margin:0 0 20px;
}
.eyebrow::before{ content:""; width:26px; height:1px; background:linear-gradient(90deg,transparent,var(--brand)); }
.lead{ font-size:clamp(1.05rem,1.5vw,1.24rem); line-height:1.6; color:var(--text-2); }
.grad{
  background:linear-gradient(105deg,var(--brand-text) 0%,var(--accent) 60%,var(--brand-dim) 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
}

/* --- Layout ------------------------------------------------------------ */
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut); }
.wrap-narrow{ max-width:var(--wrap-narrow); }
section{ position:relative; }
.sec{ padding-block:clamp(58px,7.4vw,112px); }
.sec-sm{ padding-block:clamp(44px,5.4vw,76px); }
.sec-head{ max-width:720px; margin-bottom:clamp(32px,3.8vw,54px); }
.sec-head.center{ margin-inline:auto; text-align:center; }
.sec-head.center .eyebrow{ justify-content:center; }
.center{ text-align:center; } .mt-l{ margin-top:44px; }
.divider{ height:1px; background:linear-gradient(90deg,transparent,var(--line-strong),transparent); }

/* Sanfte Farb-Blobs im Hintergrund */
.blobs{ position:absolute; inset:0; pointer-events:none; z-index:0; will-change:transform; }
.blobs i{
  position:absolute; border-radius:50%; filter:blur(70px); opacity:.55;
  animation:drift 22s var(--ease-io) infinite alternate;
}
.blobs i:nth-child(1){ width:52vw; height:52vw; left:-14vw; top:-18vw; background:radial-gradient(closest-side,#CFEBD8,transparent 70%); }
.blobs i:nth-child(2){ width:44vw; height:44vw; right:-12vw; top:4vw; background:radial-gradient(closest-side,#CDEDE8,transparent 70%); animation-delay:-8s; animation-duration:28s; }
.blobs i:nth-child(3){ width:36vw; height:36vw; left:30vw; bottom:-22vw; background:radial-gradient(closest-side,#E3F2E7,transparent 70%); animation-delay:-14s; animation-duration:26s; }
@keyframes drift{ from{ transform:translate(0,0) scale(1) } to{ transform:translate(4vw,3vw) scale(1.08) } }

/* Feines Punktraster */
.dots{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:radial-gradient(rgba(14,32,26,.10) 1px, transparent 1px);
  background-size:26px 26px;
  mask-image:radial-gradient(70% 60% at 50% 40%, #000 30%, transparent 100%);
  -webkit-mask-image:radial-gradient(70% 60% at 50% 40%, #000 30%, transparent 100%);
}

/* --- Buttons ----------------------------------------------------------- */
.btn{
  position:relative; display:inline-flex; align-items:center; gap:10px;
  padding:15px 26px; border-radius:100px; border:0;
  background:var(--brand); color:#06120A;
  font-family:var(--font-display); font-weight:600; font-size:.97rem; letter-spacing:-.01em;
  cursor:pointer; overflow:hidden; isolation:isolate;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
  box-shadow:var(--shadow-brand);
}
.btn::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(100deg,#8FE5A6,#5FD0BF); opacity:0; transition:opacity .4s var(--ease);
}
.btn:hover{ transform:translateY(-2px); box-shadow:0 22px 50px -16px rgba(101,188,123,.7); }
.btn:hover::after{ opacity:1; }
.btn:focus-visible{ outline:2px solid var(--brand-text); outline-offset:3px; }
.btn svg{ transition:transform .35s var(--ease); }
.btn:hover svg{ transform:translateX(4px); }
.btn-ghost{ background:#fff; color:var(--text); box-shadow:inset 0 0 0 1px var(--line-strong), var(--shadow-sm); }
.btn-ghost::after{ display:none; }
.btn-ghost:hover{ box-shadow:inset 0 0 0 1px var(--brand), var(--shadow-md); color:var(--brand-text); }
.link-arrow{ display:inline-flex; align-items:center; gap:8px; font-family:var(--font-display); font-weight:600; font-size:.94rem; color:var(--brand-text); }
.link-arrow svg{ transition:transform .35s var(--ease); }
.link-arrow:hover svg{ transform:translateX(5px); }

/* --- Header ------------------------------------------------------------ */
.hdr{
  position:fixed; inset:0 0 auto; z-index:100; height:var(--nav-h); display:flex; align-items:center;
  transition:height .4s var(--ease), background .4s, box-shadow .4s, border-color .4s;
  border-bottom:1px solid transparent;
}
.hdr.scrolled{
  height:64px; background:rgba(255,255,255,.78);
  backdrop-filter:blur(18px) saturate(160%); -webkit-backdrop-filter:blur(18px) saturate(160%);
  border-bottom-color:var(--line); box-shadow:0 8px 30px -20px rgba(14,32,26,.25);
}
.hdr .wrap{ display:flex; align-items:center; gap:28px; }
.logo{ display:flex; align-items:center; flex:0 0 auto; }
.logo img{ height:46px; width:auto; transition:height .4s var(--ease); }
.hdr.scrolled .logo img{ height:38px; }

.nav{ display:flex; align-items:center; gap:4px; margin-left:auto; }
.nav > li{ list-style:none; position:relative; }
.nav a.nav-link{
  display:flex; align-items:center; gap:6px; padding:10px 14px; border-radius:100px;
  font-size:.94rem; font-weight:500; color:var(--text-2); transition:color .25s, background .25s;
}
.nav a.nav-link:hover, .nav li.open > a.nav-link, .nav a.nav-link[aria-current]{ color:var(--text); background:var(--surface-2); }
.nav .caret{ width:9px; opacity:.6; transition:transform .3s var(--ease); }
.nav li.open .caret{ transform:rotate(180deg); }
.mega{
  position:absolute; top:calc(100% + 12px); left:50%; translate:-50% 0; min-width:560px; padding:14px;
  background:rgba(255,255,255,.92); backdrop-filter:blur(24px) saturate(170%); -webkit-backdrop-filter:blur(24px) saturate(170%);
  border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-lg);
  display:grid; grid-template-columns:1fr 1fr; gap:4px;
  opacity:0; visibility:hidden; translate:-50% 8px;
  transition:opacity .3s var(--ease), translate .3s var(--ease), visibility .3s;
}
.nav li.open .mega{ opacity:1; visibility:visible; translate:-50% 0; }
.mega a{ display:flex; flex-direction:column; gap:2px; padding:12px 14px; border-radius:12px; transition:background .22s; }
.mega a:hover{ background:var(--brand-tint); }
.mega a b{ font-size:.93rem; font-weight:600; color:var(--text); }
.mega a span{ font-size:.79rem; color:var(--muted); line-height:1.4; }

.hdr-cta{ display:flex; align-items:center; gap:12px; flex:0 0 auto; }
.hdr-tel{ display:inline-flex; align-items:center; gap:8px; font-family:var(--font-display); font-weight:600; font-size:.9rem; color:var(--text-2); padding:9px 4px; }
.hdr-tel:hover{ color:var(--brand-text); }
.hdr .btn{ padding:11px 20px; font-size:.88rem; }

.burger{ display:none; width:44px; height:44px; border:0; border-radius:12px; background:var(--surface-2); cursor:pointer; align-items:center; justify-content:center; }
.burger span{ display:block; width:19px; height:1.5px; background:var(--text); position:relative; transition:.3s var(--ease); }
.burger span::before,.burger span::after{ content:""; position:absolute; left:0; width:19px; height:1.5px; background:var(--text); transition:.3s var(--ease); }
.burger span::before{ top:-6px; } .burger span::after{ top:6px; }
body.menu-open .burger span{ background:transparent; }
body.menu-open .burger span::before{ top:0; transform:rotate(45deg); }
body.menu-open .burger span::after{ top:0; transform:rotate(-45deg); }

.mobile-nav{
  position:fixed; inset:var(--nav-h) 0 0; z-index:99; background:rgba(255,255,255,.97);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  padding:28px var(--gut) 60px; overflow-y:auto; opacity:0; visibility:hidden; translate:0 -12px;
  transition:opacity .35s var(--ease), translate .35s var(--ease), visibility .35s;
}
body.menu-open .mobile-nav{ opacity:1; visibility:visible; translate:0 0; }
.mobile-nav ul{ list-style:none; margin:0; padding:0; }
.mobile-nav > ul > li{ border-bottom:1px solid var(--line); }
.mobile-nav > ul > li > a, .mobile-nav .m-toggle{
  display:flex; align-items:center; justify-content:space-between; width:100%; padding:17px 2px;
  background:none; border:0; text-align:left; cursor:pointer;
  font-family:var(--font-display); font-size:1.12rem; font-weight:500; color:var(--text);
}
.mobile-nav .m-sub{ max-height:0; overflow:hidden; transition:max-height .4s var(--ease); }
.mobile-nav .m-sub.open{ max-height:520px; }
.mobile-nav .m-sub a{ display:block; padding:11px 2px 11px 16px; font-size:.96rem; color:var(--text-2); border-left:1px solid var(--line); margin-left:2px; }
.mobile-nav .m-sub a:hover{ color:var(--brand-text); border-left-color:var(--brand); }
.mobile-nav .m-actions{ display:flex; flex-direction:column; gap:12px; margin-top:30px; }
.mobile-nav .m-toggle .caret{ width:11px; transition:transform .3s; }
.mobile-nav .m-toggle[aria-expanded="true"] .caret{ transform:rotate(180deg); }
@media (max-width:1080px){
  .nav, .hdr-cta .btn, .hdr-tel span{ display:none; }
  .burger{ display:flex; margin-left:auto; }
  .hdr-cta{ margin-left:auto; }
}
@media (min-width:1081px){ .mobile-nav{ display:none; } }

/* --- Hero (Split: Text links, Foto-Karte rechts) ---------------------- */
.hero{
  position:relative; overflow:hidden;
  padding-top:calc(var(--nav-h) + clamp(40px,7vw,96px)); padding-bottom:clamp(56px,7vw,96px);
  background:linear-gradient(180deg,#FAFCFB 0%,#FFFFFF 100%);
}
#hero-canvas{ position:absolute; inset:var(--nav-h) 0 0; z-index:0; opacity:.9; pointer-events:none; }
.hero .wrap{ position:relative; z-index:2; }
.hero-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(32px,5vw,72px); align-items:center; }
@media (max-width:960px){ .hero-grid{ grid-template-columns:1fr; } }
.hero-inner{ max-width:640px; }
.hero h1{ margin-bottom:26px; }
.hero .lead{ max-width:560px; }
.usp{ list-style:none; margin:32px 0 38px; padding:0; display:flex; flex-direction:column; gap:13px; }
.usp li{ display:flex; align-items:flex-start; gap:13px; font-size:1.02rem; color:var(--text-2); }
.usp .tick{ flex:0 0 auto; width:23px; height:23px; margin-top:2px; border-radius:50%; display:grid; place-items:center; background:var(--brand-tint); box-shadow:inset 0 0 0 1px rgba(101,188,123,.5); }
.usp .tick svg{ width:11px; color:var(--brand-text); }
.hero-actions{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; }

.hero-media{ position:relative; perspective:1200px; }
.hero-card{
  position:relative; border-radius:var(--r-xl); overflow:hidden; aspect-ratio:4/4.1;
  box-shadow:var(--shadow-lg), 0 0 0 1px var(--line);
  transform-style:preserve-3d; will-change:transform;
  transition:transform .6s var(--ease);
}
@media (max-width:960px){ .hero-card{ aspect-ratio:16/11; } }
.hero-card img{ width:100%; height:100%; object-fit:cover; transform:scale(1.06); animation:heroZoom 16s var(--ease) forwards; }
@keyframes heroZoom{ to{ transform:scale(1); } }
.hero-card::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 55%,rgba(11,21,18,.55) 100%); }
.hero-card .cap{
  position:absolute; left:22px; right:22px; bottom:20px; color:#fff; z-index:1;
  font-family:var(--font-display); font-size:.82rem; letter-spacing:.06em; opacity:.9;
}
.float{
  position:absolute; z-index:3; display:flex; align-items:center; gap:12px;
  padding:14px 18px; border-radius:16px; background:rgba(255,255,255,.9);
  backdrop-filter:blur(16px) saturate(160%); -webkit-backdrop-filter:blur(16px) saturate(160%);
  border:1px solid rgba(255,255,255,.7); box-shadow:var(--shadow-md);
  animation:floaty 7s var(--ease-io) infinite alternate;
}
.float .fi{ width:36px; height:36px; border-radius:11px; display:grid; place-items:center; background:var(--brand-tint); color:var(--brand-text); flex:0 0 auto; }
.float .fi svg{ width:18px; }
.float b{ display:block; font-family:var(--font-display); font-size:1.05rem; letter-spacing:-.02em; line-height:1.1; color:var(--text); }
.float span{ font-size:.76rem; color:var(--muted); }
.float.f1{ left:-28px; top:14%; }
.float.f2{ right:-22px; top:24%; animation-delay:-3s; }
.float.f3{ left:8%; bottom:-22px; animation-delay:-5s; }
@keyframes floaty{ from{ transform:translateY(0) } to{ transform:translateY(-12px) } }
@media (max-width:960px){ .float.f1{ left:10px; } .float.f2{ right:10px; } .float.f3{ left:10px; bottom:-18px; } }
@media (max-width:480px){ .float.f2{ display:none; } }

.scroll-cue{ display:none; }

/* --- Stats ------------------------------------------------------------- */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); border:1px solid var(--line); border-radius:var(--r-lg); background:#fff; box-shadow:var(--shadow-md); overflow:hidden; }
.stat{ padding:34px 28px; position:relative; }
.stat + .stat{ border-left:1px solid var(--line); }
.stat .num{ font-family:var(--font-display); font-weight:700; font-size:clamp(2.4rem,4.4vw,3.4rem); line-height:1; letter-spacing:-.04em; color:var(--text); display:flex; align-items:baseline; gap:2px; }
.stat .num .unit{ color:var(--brand-text); font-size:.55em; }
.stat .lbl{ margin-top:11px; font-size:.9rem; color:var(--muted); line-height:1.4; }
@media (max-width:860px){ .stats{ grid-template-columns:repeat(2,1fr); } .stat:nth-child(odd){ border-left:0; } .stat:nth-child(n+3){ border-top:1px solid var(--line); } }

/* --- Cards ------------------------------------------------------------- */
.grid{ display:grid; gap:18px; }
.g-2{ grid-template-columns:repeat(2,1fr); } .g-3{ grid-template-columns:repeat(3,1fr); } .g-4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:980px){ .g-3,.g-4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .grid{ grid-template-columns:1fr !important; } }

.card{
  position:relative; overflow:hidden; isolation:isolate; border:1px solid var(--line); border-radius:var(--r-lg);
  background:#fff; box-shadow:var(--shadow-sm);
  transition:transform .5s var(--ease), border-color .4s, box-shadow .5s var(--ease);
}
.card::before{
  content:""; position:absolute; inset:-1px; z-index:-1; border-radius:inherit;
  background:radial-gradient(360px circle at var(--mx,50%) var(--my,0%), rgba(101,188,123,.14), transparent 62%);
  opacity:0; transition:opacity .4s;
}
.card:hover{ transform:translateY(-6px); border-color:rgba(101,188,123,.45); box-shadow:var(--shadow-md), 0 24px 50px -24px rgba(101,188,123,.45); }
.card:hover::before{ opacity:1; }
.card-media{ position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--surface-2); }
.card-media img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }
.card:hover .card-media img{ transform:scale(1.06); }
.card-media::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 60%,rgba(255,255,255,.9) 100%); }
.card-body{ padding:26px 26px 28px; position:relative; }
.card-body h3{ margin-bottom:9px; }
.card-body p{ font-size:.96rem; color:var(--muted); }
.card .idx{
  position:absolute; top:-30px; right:24px; font-family:var(--font-display); font-size:.72rem; font-weight:600; letter-spacing:.16em;
  color:var(--brand-text); padding:5px 11px; border-radius:100px; background:rgba(255,255,255,.85); backdrop-filter:blur(8px);
  box-shadow:inset 0 0 0 1px rgba(101,188,123,.45), var(--shadow-sm);
}
.card-link{ display:block; }
.card-link .card-body .link-arrow{ margin-top:16px; }
.icard{ padding:30px 28px 32px; }
.icard .ic{ width:46px; height:46px; border-radius:13px; margin-bottom:20px; display:grid; place-items:center; background:linear-gradient(145deg,var(--brand-tint),var(--accent-tint)); box-shadow:inset 0 0 0 1px rgba(101,188,123,.35); color:var(--brand-text); }
.icard .ic svg{ width:21px; }

/* --- Split ------------------------------------------------------------- */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,76px); align-items:center; }
.split.rev .split-media{ order:2; }
@media (max-width:900px){ .split{ grid-template-columns:1fr; } .split.rev .split-media{ order:0; } }
.split-media{ position:relative; }
.split-media .frame{ position:relative; border-radius:var(--r-xl); overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow-lg); background:#fff; }
.split-media .frame img{ width:100%; aspect-ratio:4/3; object-fit:cover; }
.split-media .glow{ position:absolute; inset:-12% -8% -8%; z-index:-1; border-radius:50%; background:radial-gradient(closest-side,rgba(101,188,123,.28),transparent 72%); filter:blur(30px); }
.frame.product{ background:linear-gradient(160deg,#F7F9F8,#E9EEEC); }
.frame.product img{ object-fit:contain; padding:9%; mix-blend-mode:multiply; }
.card-media.product{ background:linear-gradient(160deg,#F7F9F8,#E9EEEC); }
.card-media.product img{ object-fit:contain; padding:9%; mix-blend-mode:multiply; }
.card-media.product::after{ display:none; }
.badge-float{ position:absolute; bottom:-22px; left:-22px; padding:18px 22px; border-radius:var(--r); background:rgba(255,255,255,.92); backdrop-filter:blur(16px); border:1px solid rgba(255,255,255,.8); box-shadow:var(--shadow-md); }
.badge-float b{ display:block; font-family:var(--font-display); font-size:1.6rem; letter-spacing:-.03em; color:var(--brand-text); line-height:1; }
.badge-float span{ font-size:.8rem; color:var(--muted); }
@media (max-width:900px){ .badge-float{ left:auto; right:14px; bottom:-18px; } }

/* --- Branchen ---------------------------------------------------------- */
.industry{ position:relative; min-height:400px; border-radius:var(--r-xl); overflow:hidden; display:flex; align-items:flex-end; padding:36px; box-shadow:var(--shadow-md); transition:transform .55s var(--ease), box-shadow .5s var(--ease); color:#fff; }
.industry img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .9s var(--ease); z-index:-2; }
.industry::after{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg,rgba(11,21,18,.05) 0%,rgba(11,21,18,.66) 55%,rgba(11,21,18,.94) 100%); }
.industry:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); }
.industry:hover img{ transform:scale(1.06); }
.industry .ind-body{ position:relative; }
.industry h3{ font-size:clamp(1.4rem,2.4vw,1.9rem); margin-bottom:8px; color:#fff; }
.industry p{ font-size:.96rem; margin-bottom:16px; max-width:44ch; color:rgba(255,255,255,.82); }
.industry .eyebrow{ color:#8FE5A6; }
.industry .link-arrow{ color:#8FE5A6; }

/* --- Prozess ----------------------------------------------------------- */
.steps{ position:relative; display:grid; }
.steps::before{ content:""; position:absolute; left:23px; top:24px; bottom:24px; width:1px; background:var(--line-strong); }
.steps .prog{ position:absolute; left:23px; top:24px; width:1px; height:0; background:linear-gradient(180deg,var(--brand),var(--accent)); box-shadow:0 0 12px rgba(101,188,123,.7); transition:height .1s linear; }
.step{ position:relative; padding:22px 0 22px 74px; }
.step .dot{ position:absolute; left:12px; top:26px; width:23px; height:23px; border-radius:50%; background:#fff; box-shadow:inset 0 0 0 1px var(--line-strong); display:grid; place-items:center; font-family:var(--font-display); font-size:.68rem; font-weight:700; color:var(--muted); transition:box-shadow .45s var(--ease), color .45s, background .45s; }
.step.on .dot{ background:var(--brand); color:#06120A; box-shadow:0 0 0 5px rgba(101,188,123,.18), 0 0 22px rgba(101,188,123,.55); }
.step h4{ font-size:1.14rem; margin-bottom:7px; }
.step p{ font-size:.95rem; color:var(--muted); margin:0; }
.step ul{ margin:10px 0 0; padding-left:18px; color:var(--muted); font-size:.93rem; }
.step ul li{ margin-bottom:5px; }
@media (max-width:600px){ .step{ padding-left:58px; } .steps::before,.steps .prog{ left:15px; } .step .dot{ left:4px; } }

/* --- Marquee ----------------------------------------------------------- */
.marquee{ overflow:hidden; mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent); -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent); }
.marquee-track{ display:flex; gap:16px; width:max-content; animation:slide 44s linear infinite; }
.marquee:hover .marquee-track{ animation-play-state:paused; }
@keyframes slide{ to{ transform:translateX(-50%); } }
.chip{ display:inline-flex; align-items:center; gap:10px; white-space:nowrap; padding:12px 22px; border-radius:100px; border:1px solid var(--line); background:#fff; box-shadow:var(--shadow-sm); font-family:var(--font-display); font-size:.92rem; font-weight:500; color:var(--text-2); }
.chip .d{ width:5px; height:5px; border-radius:50%; background:var(--brand); }

/* --- Referenzen -------------------------------------------------------- */
.ref{ border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line); background:#fff; }
.ref-media{ aspect-ratio:16/11; overflow:hidden; background:var(--surface-2); display:grid; place-items:center; border-bottom:1px solid var(--line); }
.ref-media img{ width:100%; height:100%; object-fit:cover; object-position:top center; transition:transform .8s var(--ease); }
.ref:hover .ref-media img{ transform:scale(1.05); }
.ref-body{ padding:20px 22px 24px; }
.ref-body h4{ margin-bottom:5px; }
.ref-body p{ font-size:.88rem; color:var(--muted); margin:0; }
.ref-tag{ display:inline-block; margin-top:12px; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--brand-text); font-family:var(--font-display); }

/* --- Preis-Box --------------------------------------------------------- */
.pricebox{ border:1px solid var(--line); border-radius:var(--r-xl); background:linear-gradient(160deg,#F7FBF8 0%,#FFFFFF 60%); box-shadow:var(--shadow-md); padding:clamp(28px,4vw,46px); position:relative; overflow:hidden; }
.pricebox::before{ content:""; position:absolute; top:-40%; right:-15%; width:60%; aspect-ratio:1; background:radial-gradient(closest-side,rgba(101,188,123,.18),transparent 70%); }
.pricebox .price{ font-family:var(--font-display); font-size:clamp(1.9rem,3.4vw,2.6rem); font-weight:700; letter-spacing:-.03em; color:var(--brand-text); line-height:1; margin-bottom:6px; }
.pricebox .note{ font-size:.88rem; color:var(--muted); }
.pricebox ul{ list-style:none; margin:20px 0; padding:0; }
.pricebox ul li{ display:flex; gap:10px; padding:8px 0; font-size:.95rem; color:var(--text-2); border-bottom:1px solid var(--line); }
.pricebox ul li:last-child{ border-bottom:0; }
.pricebox ul li::before{ content:"—"; color:var(--brand-text); }

/* --- Feature-Liste ----------------------------------------------------- */
.flist{ list-style:none; margin:0; padding:0; display:grid; gap:2px; }
.flist li{ display:flex; align-items:flex-start; gap:14px; padding:15px 0; border-bottom:1px solid var(--line); font-size:1rem; color:var(--text-2); }
.flist li:last-child{ border-bottom:0; }
.flist .tick{ flex:0 0 auto; width:20px; height:20px; margin-top:3px; border-radius:50%; display:grid; place-items:center; background:var(--brand-tint); box-shadow:inset 0 0 0 1px rgba(101,188,123,.5); }
.flist .tick svg{ width:10px; color:var(--brand-text); }

/* --- CTA (dunkle Insel) ----------------------------------------------- */
.cta-band{ position:relative; overflow:hidden; }
.cta-inner{
  position:relative; border-radius:var(--r-xl); overflow:hidden; color:#fff;
  padding:clamp(44px,6vw,84px) clamp(28px,5vw,72px);
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(30,156,142,.28) 0%, transparent 55%),
    radial-gradient(100% 130% at 0% 100%, rgba(101,188,123,.32) 0%, transparent 58%),
    linear-gradient(160deg,#122A22,var(--ink));
  box-shadow:var(--shadow-lg);
}
.cta-inner h2{ max-width:16ch; color:#fff; }
.cta-inner .lead, .cta-inner p{ color:rgba(255,255,255,.78); }
.cta-inner .eyebrow{ color:#8FE5A6; }
.cta-actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:32px; }
.cta-tel{ display:inline-flex; align-items:center; gap:12px; font-family:var(--font-display); font-size:clamp(1.3rem,2.6vw,1.9rem); font-weight:600; letter-spacing:-.02em; color:#fff; }
.cta-tel:hover{ color:#8FE5A6; }
.cta-inner .btn-ghost{ background:rgba(255,255,255,.06); color:#fff; box-shadow:inset 0 0 0 1px rgba(255,255,255,.22); }
.cta-inner .btn-ghost:hover{ background:rgba(255,255,255,.12); box-shadow:inset 0 0 0 1px #8FE5A6; color:#8FE5A6; }

/* --- Team -------------------------------------------------------------- */
.member{ text-align:center; }
.member .ph{ aspect-ratio:1; border-radius:var(--r-lg); overflow:hidden; margin-bottom:16px; border:1px solid var(--line); background:var(--surface-2); box-shadow:var(--shadow-sm); }
.member .ph img{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease), filter .5s; filter:grayscale(.3); }
.member:hover .ph img{ transform:scale(1.05); filter:grayscale(0); }
.member h4{ margin-bottom:2px; }
.member .role{ font-size:.82rem; letter-spacing:.1em; text-transform:uppercase; color:var(--brand-text); font-family:var(--font-display); }
.member .quote{ margin-top:10px; font-size:.88rem; color:var(--muted); font-style:italic; }

/* --- Kontakt / Formular ------------------------------------------------ */
.field{ margin-bottom:18px; }
.field label{ display:block; font-size:.85rem; font-weight:500; color:var(--text-2); margin-bottom:7px; }
.field input,.field select,.field textarea{ width:100%; padding:13px 16px; border-radius:12px; background:#fff; border:1px solid var(--line-strong); color:var(--text); font-family:inherit; font-size:.97rem; transition:border-color .25s, box-shadow .25s; }
.field textarea{ min-height:132px; resize:vertical; }
.field input:focus,.field select:focus,.field textarea:focus{ outline:0; border-color:var(--brand); box-shadow:0 0 0 3px rgba(101,188,123,.2); }
.field select{ appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%2366756F' stroke-width='1.6'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 16px center; background-size:12px; padding-right:42px; }
.check{ display:flex; gap:11px; align-items:flex-start; font-size:.88rem; color:var(--muted); }
.check input{ width:17px; height:17px; margin-top:2px; accent-color:var(--brand); flex:0 0 auto; }
.contact-card{ border:1px solid var(--line); border-radius:var(--r-lg); background:#fff; box-shadow:var(--shadow-sm); padding:26px; display:flex; gap:16px; align-items:flex-start; transition:border-color .35s, transform .45s var(--ease), box-shadow .45s; }
.contact-card:hover{ border-color:rgba(101,188,123,.45); transform:translateY(-3px); box-shadow:var(--shadow-md); }
.contact-card .ic{ flex:0 0 auto; width:42px; height:42px; border-radius:12px; display:grid; place-items:center; background:var(--brand-tint); box-shadow:inset 0 0 0 1px rgba(101,188,123,.4); color:var(--brand-text); }
.contact-card .ic svg{ width:19px; }
.contact-card h4{ margin-bottom:4px; }
.contact-card p,.contact-card a{ font-size:.94rem; color:var(--text-2); margin:0; }
.contact-card a:hover{ color:var(--brand-text); }
.form-note{ margin-top:18px; padding:15px 18px; border-radius:12px; font-size:.9rem; background:var(--brand-tint); border:1px solid rgba(101,188,123,.4); color:var(--text-2); }

/* --- Page-Hero (Unterseiten): Text links, Bildpanel rechts ------------ */
.phero{ position:relative; overflow:hidden; padding-top:calc(var(--nav-h) + clamp(44px,7vw,92px)); padding-bottom:clamp(44px,6vw,80px); background:linear-gradient(180deg,#FAFCFB,#FFFFFF); }
.phero .wrap{ position:relative; z-index:2; }
.phero-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(28px,5vw,72px); align-items:center; }
@media (max-width:900px){ .phero-grid{ grid-template-columns:1fr; } }
.phero h1{ font-size:clamp(2.1rem,4.6vw,3.5rem); max-width:19ch; }
.phero .lead{ max-width:62ch; }
.phero-media{ position:relative; }
.phero-media .pm{ border-radius:var(--r-xl); overflow:hidden; aspect-ratio:4/3.2; box-shadow:var(--shadow-lg), 0 0 0 1px var(--line); position:relative; }
.phero-media .pm img{ width:100%; height:100%; object-fit:cover; transform:scale(1.05); animation:heroZoom 14s var(--ease) forwards; }
.phero-media .pm::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 70%,rgba(11,21,18,.35) 100%); }
.phero-media .glow{ position:absolute; inset:-10% -6% -6%; z-index:-1; border-radius:50%; background:radial-gradient(closest-side,rgba(101,188,123,.3),transparent 72%); filter:blur(34px); }
.hero-sub{ padding-top:0; }

/* Seiten-Hero, vollflächig: Bild über die gesamte Breite, Text darüber */
.phero-full{ padding:var(--nav-h) 0 0; background:#fff; }
.phero-stage{
  position:relative; isolation:isolate; display:flex; align-items:flex-end;
  min-height:clamp(440px,58vh,660px); background:var(--ink); color:#fff;
}
.phero-bg{ position:absolute; inset:0; z-index:0; overflow:hidden; }
.phero-bg img{ width:100%; height:100%; object-fit:cover; transform:scale(1.06); animation:heroZoom 16s var(--ease) forwards; }
.phero-bg::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(11,21,18,.72) 0%, rgba(11,21,18,.38) 42%, rgba(11,21,18,.06) 72%),
    linear-gradient(180deg, rgba(11,21,18,.10) 0%, rgba(11,21,18,.16) 45%, rgba(11,21,18,.78) 100%);
}
.phero-bg-empty{ background:linear-gradient(160deg,#122A22,var(--ink)); }
.phero-stage .wrap{ position:relative; z-index:2; padding-top:clamp(40px,6vw,72px); padding-bottom:clamp(40px,5.5vw,68px); }
.phero-full-inner{ max-width:700px; }
.phero-full .crumbs{ color:rgba(255,255,255,.66); margin-bottom:28px; }
.phero-full .crumbs a:hover, .phero-full .crumbs .cur{ color:#fff; }
.phero-full .crumbs span{ opacity:.6; }
.phero-full .eyebrow{ color:#8FE5A6; }
.phero-full .eyebrow::before{ background:linear-gradient(90deg,transparent,#8FE5A6); }
.phero-full h1{ color:#fff; font-size:clamp(2.2rem,5vw,3.9rem); max-width:16ch; text-wrap:balance; }
.phero-full .lead{ color:rgba(255,255,255,.84); max-width:56ch; }
.phero-full .grad{ background:linear-gradient(105deg,#8FE5A6 0%,#6FD3C4 100%); -webkit-background-clip:text; background-clip:text; }
.hero-sub-full{ padding-top:clamp(36px,4.5vw,60px); }
.phero-full.text-right .phero-full-inner{ margin-left:auto; }
.phero-full.text-right .phero-bg::after{
  background:
    linear-gradient(270deg, rgba(11,21,18,.72) 0%, rgba(11,21,18,.38) 42%, rgba(11,21,18,.06) 72%),
    linear-gradient(180deg, rgba(11,21,18,.10) 0%, rgba(11,21,18,.16) 45%, rgba(11,21,18,.78) 100%);
}
@media (max-width:700px){
  .phero-stage{ min-height:clamp(420px,72vh,600px); }
  .phero-bg::after{
    background:
      linear-gradient(180deg, rgba(11,21,18,.12) 0%, rgba(11,21,18,.28) 40%, rgba(11,21,18,.86) 100%);
  }
  .phero-full .crumbs{ margin-bottom:20px; }
}
.crumbs{ display:flex; flex-wrap:wrap; gap:8px; font-size:.83rem; color:var(--muted); margin-bottom:22px; }
.crumbs a:hover{ color:var(--brand-text); }
.crumbs span{ opacity:.45; }

/* --- Footer (dunkel) --------------------------------------------------- */
.ftr{ background:var(--ink); color:#fff; padding-top:clamp(56px,7vw,84px); }
.ftr-grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:40px; padding-bottom:52px; }
@media (max-width:900px){ .ftr-grid{ grid-template-columns:1fr 1fr; gap:34px; } }
@media (max-width:520px){ .ftr-grid{ grid-template-columns:1fr; } }
.ftr img.f-logo{ height:38px; width:auto; margin-bottom:20px; }
.ftr h5{ font-family:var(--font-display); font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.5); margin:0 0 16px; font-weight:600; }
.ftr ul{ list-style:none; margin:0; padding:0; display:grid; gap:9px; }
.ftr ul a{ font-size:.93rem; color:rgba(255,255,255,.75); transition:color .2s, padding-left .25s var(--ease); }
.ftr ul a:hover{ color:#8FE5A6; padding-left:5px; }
.ftr .addr{ font-size:.93rem; color:rgba(255,255,255,.75); line-height:1.75; }
.ftr .addr span{ color:rgba(255,255,255,.45) !important; }
.ftr-bottom{ border-top:1px solid rgba(255,255,255,.1); padding:22px 0; display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; align-items:center; font-size:.85rem; color:rgba(255,255,255,.5); }
.ftr-bottom nav{ display:flex; gap:20px; }
.ftr-bottom a:hover{ color:#8FE5A6; }


/* --- Scroll-Reveal ----------------------------------------------------- */
.js [data-rv]{ opacity:0; transform:translateY(22px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.js [data-rv].in{ opacity:1; transform:none; }
.js [data-rv="l"]{ transform:translateX(-26px); }
.js [data-rv="r"]{ transform:translateX(26px); }
.js [data-rv="s"]{ transform:scale(.965); }
.js [data-rv="l"].in,.js [data-rv="r"].in,.js [data-rv="s"].in{ transform:none; }
@media (prefers-reduced-motion: reduce){ .js [data-rv]{ opacity:1 !important; transform:none !important; } }

.readbar{ position:fixed; top:0; left:0; height:2px; z-index:101; width:0; background:linear-gradient(90deg,var(--brand),var(--accent)); box-shadow:0 0 10px rgba(101,188,123,.7); }
.noise{ display:none; }

/* --- FAQ --------------------------------------------------------------- */
.faq{ border-top:1px solid var(--line); }
.faq details{ border-bottom:1px solid var(--line); }
.faq summary{ list-style:none; cursor:pointer; padding:22px 44px 22px 0; position:relative; font-family:var(--font-display); font-size:1.06rem; font-weight:500; color:var(--text); transition:color .25s; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary:hover{ color:var(--brand-text); }
.faq summary::after{ content:""; position:absolute; right:8px; top:50%; width:11px; height:11px; margin-top:-7px; border-right:1.6px solid var(--muted); border-bottom:1.6px solid var(--muted); transform:rotate(45deg); transition:transform .35s var(--ease), border-color .3s; }
.faq details[open] summary::after{ transform:rotate(-135deg); margin-top:-2px; border-color:var(--brand-text); }
.faq .ans{ padding:0 8% 24px 0; }
.faq .ans p{ font-size:.97rem; color:var(--muted); margin:0; }

/* --- Problem-Karten ---------------------------------------------------- */
.problem{ padding:28px 26px 30px; border-radius:var(--r-lg); border:1px solid var(--line); background:linear-gradient(170deg,#FFF4F0,#FFFFFF 62%); box-shadow:var(--shadow-sm); }
.problem .pic{ width:40px; height:40px; border-radius:12px; margin-bottom:18px; display:grid; place-items:center; background:#FDE7DF; box-shadow:inset 0 0 0 1px rgba(220,110,80,.3); color:#C2532F; }
.problem h3{ font-size:1.14rem; }
.problem p{ font-size:.95rem; color:var(--muted); margin:0; }

/* --- Vergleich --------------------------------------------------------- */
.vs{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
@media (max-width:820px){ .vs{ grid-template-columns:1fr; } }
.vs-col{ border-radius:var(--r-lg); border:1px solid var(--line); background:#fff; box-shadow:var(--shadow-sm); padding:30px 28px 34px; }
.vs-col.win{ border-color:rgba(101,188,123,.5); background:linear-gradient(165deg,#EEF9F1,#FFFFFF 58%); box-shadow:0 24px 60px -28px rgba(101,188,123,.5); }
.vs-col h3{ display:flex; align-items:center; gap:11px; margin-bottom:20px; font-size:1.2rem; }
.vs-col ul{ list-style:none; margin:0; padding:0; display:grid; gap:14px; }
.vs-col li{ display:flex; gap:12px; font-size:.95rem; color:var(--text-2); line-height:1.55; }
.vs-col li .m{ flex:0 0 auto; width:19px; height:19px; margin-top:2px; border-radius:50%; display:grid; place-items:center; font-size:.7rem; }
.vs-col:not(.win) li .m{ background:#FDE7DF; box-shadow:inset 0 0 0 1px rgba(220,110,80,.3); color:#C2532F; }
.vs-col.win li .m{ background:var(--brand-tint); box-shadow:inset 0 0 0 1px rgba(101,188,123,.5); color:var(--brand-text); }
.vs-col.win li .m svg{ width:10px; }

/* --- Testimonials ------------------------------------------------------ */
.quote-card{ border-radius:var(--r-lg); border:1px solid var(--line); background:#fff; box-shadow:var(--shadow-sm); padding:32px 30px; position:relative; overflow:hidden; transition:border-color .35s, transform .5s var(--ease), box-shadow .5s; }
.quote-card:hover{ border-color:rgba(101,188,123,.45); transform:translateY(-4px); box-shadow:var(--shadow-md); }
.quote-card::before{ content:"”"; position:absolute; top:-6px; right:20px; font-family:var(--font-display); font-size:7rem; line-height:1; color:rgba(101,188,123,.18); }
.quote-card blockquote{ margin:0 0 20px; font-size:1.03rem; line-height:1.65; color:var(--text-2); }
.quote-card .who{ display:flex; align-items:center; gap:12px; font-size:.88rem; }
.quote-card .who .av{ width:36px; height:36px; border-radius:50%; background:linear-gradient(140deg,var(--brand),var(--accent)); display:grid; place-items:center; font-family:var(--font-display); font-weight:700; font-size:.85rem; color:#06120A; flex:0 0 auto; }
.quote-card .who b{ display:block; color:var(--text); font-weight:600; }
.quote-card .who span{ color:var(--muted); }

/* --- Projekt-Karten ---------------------------------------------------- */
.proj{ border-radius:var(--r-lg); border:1px solid var(--line); background:#fff; box-shadow:var(--shadow-sm); padding:28px 26px 30px; transition:border-color .35s, transform .5s var(--ease), box-shadow .5s; }
.proj:hover{ border-color:rgba(101,188,123,.45); transform:translateY(-4px); box-shadow:var(--shadow-md); }
.proj h3{ font-size:1.16rem; margin-bottom:18px; }
.proj dl{ margin:0; display:grid; gap:13px; }
.proj dt{ font-family:var(--font-display); font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-bottom:3px; }
.proj dd{ margin:0; font-size:.94rem; color:var(--text-2); line-height:1.55; }
.proj .res dt{ color:var(--brand-text); }
.proj .res dd{ color:var(--text); }

/* --- Logo-Reihe / Tech-Karten ---------------------------------------- */
.logorow{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; }
.logorow .lg{ height:64px; padding:0 24px; border-radius:14px; border:1px solid var(--line); background:#fff; display:grid; place-items:center; }
.logorow .lg img{ max-height:30px; width:auto; }
.techcard{ border-radius:var(--r-lg); border:1px solid var(--line); background:#fff; box-shadow:var(--shadow-sm); padding:28px 26px 30px; transition:border-color .35s, transform .5s var(--ease), box-shadow .5s; }
.techcard:hover{ border-color:rgba(101,188,123,.45); transform:translateY(-4px); box-shadow:var(--shadow-md); }
.techcard .lgwrap{ height:52px; margin-bottom:20px; display:flex; align-items:center; }
.techcard .lgwrap img{ max-height:32px; width:auto; }
.techcard h3{ font-size:1.16rem; }
.techcard p{ font-size:.95rem; color:var(--muted); }
.techcard .cost{ margin-top:18px; padding-top:16px; border-top:1px solid var(--line); font-family:var(--font-display); font-size:.92rem; color:var(--text-2); }
.techcard .cost b{ color:var(--brand-text); }

/* --- Wechselnde Sektions-Hintergründe --------------------------------- */
.sec.alt{ background:var(--bg-elev); }