/* ---------- Lokale Schriftarten (statt Google Fonts CDN) ---------- */
@font-face{font-family:'Space Grotesk'; font-style:normal; font-weight:500; font-display:swap; src:url('fonts/space-grotesk-500.woff2') format('woff2');}
@font-face{font-family:'Space Grotesk'; font-style:normal; font-weight:600; font-display:swap; src:url('fonts/space-grotesk-600.woff2') format('woff2');}
@font-face{font-family:'Space Grotesk'; font-style:normal; font-weight:700; font-display:swap; src:url('fonts/space-grotesk-700.woff2') format('woff2');}
@font-face{font-family:'Inter'; font-style:normal; font-weight:400; font-display:swap; src:url('fonts/inter-400.woff2') format('woff2');}
@font-face{font-family:'Inter'; font-style:normal; font-weight:500; font-display:swap; src:url('fonts/inter-500.woff2') format('woff2');}
@font-face{font-family:'Inter'; font-style:normal; font-weight:600; font-display:swap; src:url('fonts/inter-600.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Mono'; font-style:normal; font-weight:500; font-display:swap; src:url('fonts/ibm-plex-mono-500.woff2') format('woff2');}

:root{
    --white:#ffffff;
    --grey-50:#f5f6f8;
    --grey-100:#e8eaed;
    --grey-300:#c3c8cf;
    --grey-400:#8a9099;
    --grey-600:#4a5058;
    --anthracite:#1b1f24;
    --anthracite-2:#12151a;
    --blue:#13397b;
    --blue-light:#e7ebf2;
    --blue-dim:#768cb2;
    --radius:2px;
    --ease:cubic-bezier(.16,.8,.24,1);
  }

*{box-sizing:border-box; margin:0; padding:0;}

html{scroll-behavior:smooth;}

body{
    font-family:'Inter',sans-serif;
    color:var(--anthracite);
    background:var(--white);
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }

h1,h2,h3{font-family:'Space Grotesk',sans-serif; font-weight:600; letter-spacing:-0.02em; color:var(--anthracite);}

.eyebrow{
    font-family:'IBM Plex Mono',monospace; font-size:12px; font-weight:500;
    letter-spacing:0.12em; text-transform:uppercase; color:var(--blue);
    display:flex; align-items:center; gap:8px;
  }

.eyebrow::before{content:""; width:16px; height:1px; background:var(--blue);}

.wrap{max-width:1240px; margin:0 auto; padding:0 40px;}

a{color:inherit; text-decoration:none;}

img{max-width:100%; display:block;}

/* ---------- Buttons ---------- */
  .btn{
    display:inline-flex; align-items:center; gap:10px;
    font-family:'Inter'; font-weight:600; font-size:15px;
    padding:14px 26px; border-radius:var(--radius);
    cursor:pointer; transition:all .25s var(--ease); border:1px solid transparent;
    white-space:nowrap;
  }

.btn-primary{background:var(--blue); color:#fff;}

.btn-primary:hover{background:#0f2c60; transform:translateY(-1px);}

.btn-ghost{border-color:rgba(255,255,255,0.35); color:#fff;}

.btn-ghost:hover{border-color:#fff; background:rgba(255,255,255,0.08);}

.btn-outline{border-color:var(--grey-300); color:var(--anthracite);}

.btn-outline:hover{border-color:var(--anthracite);}

.btn-arrow{transition:transform .25s var(--ease);}

.btn:hover .btn-arrow{transform:translateX(3px);}

/* ---------- Nav ---------- */
  header{
    position:fixed; top:0; left:0; right:0; z-index:100;
    padding:22px 0; transition:all .35s var(--ease);
    border-bottom:1px solid transparent;
  }

header.scrolled{background:rgba(255,255,255,0.9); backdrop-filter:blur(10px); border-color:var(--grey-100); padding:16px 0;}

header .wrap{display:flex; align-items:center; justify-content:space-between;}

.logo{display:flex; align-items:center; flex-shrink:0;}

.logo img{display:block; height:26px; width:auto; transition:opacity .2s;}

.logo .logo-light{display:none;}

header.scrolled .logo .logo-dark{display:none;}

header.scrolled .logo .logo-light{display:block;}

.foot-logo img{height:30px; width:auto; display:block;}

nav ul{display:flex; gap:36px; list-style:none;}

nav a{font-size:14px; font-weight:500; color:rgba(255,255,255,0.75); transition:color .35s;}

header.scrolled nav a{color:var(--grey-600);}

nav a:hover{color:#fff;}

header.scrolled nav a:hover{color:var(--anthracite);}

.nav-cta{display:flex; align-items:center; gap:22px;}

header .btn-primary{padding:11px 20px; font-size:13px;}

/* ---------- AF Bracket signature element ---------- */
  .af-frame{position:relative;}

.af-corner{
    position:absolute; width:22px; height:22px; opacity:0; transition:opacity .4s var(--ease), transform .4s var(--ease);
  }

.af-corner svg{width:100%; height:100%;}

.af-frame:hover .af-corner, .af-frame.locked .af-corner{opacity:1; transform:scale(1);}

.af-tl{top:-10px; left:-10px;}

.af-tr{top:-10px; right:-10px;}

.af-bl{bottom:-10px; left:-10px;}

.af-br{bottom:-10px; right:-10px;}

.af-tag{
    position:absolute; top:-10px; left:-10px; transform:translateY(-100%);
    font-family:'IBM Plex Mono'; font-size:10px; letter-spacing:.08em; color:var(--blue);
    opacity:0; transition:opacity .4s var(--ease) .1s;
  }

.af-frame:hover .af-tag, .af-frame.locked .af-tag{opacity:1;}

@keyframes belt-move{
    0%{transform:translateX(0);}
    45%{transform:translateX(-120px);}
    90%{transform:translateX(-120px);}
    100%{transform:translateX(-120px);}
  }

@keyframes flash-pulse{
    0%,40%{opacity:0;}
    55%{opacity:0;}
    70%{opacity:.65;}
    85%{opacity:0;}
    92%,100%{opacity:0;}
  }

@keyframes tag-pulse{
    30%,42%{opacity:0;}
    80%{opacity:0;}
    86%{opacity:1;}
    100%,29%{opacity:1;}
  }

.belt-blocks{animation:belt-move 5s ease-in-out infinite;}

.flash-zone{animation:flash-pulse 5s ease-in-out infinite; transform-origin:center;}

.af-tag-pulse{animation:tag-pulse 5s ease-in-out infinite;}

@media (prefers-reduced-motion:reduce){
    .belt-blocks, .flash-zone, .af-tag-pulse{animation:none;}
  }

/* ---------- Hero ---------- */
  .hero{
    position:relative; min-height:100vh; display:flex; align-items:center;
    background:radial-gradient(120% 100% at 50% 0%, #22272e 0%, var(--anthracite-2) 60%);
    overflow:hidden; padding-top:100px;
  }

.hero-grid{
    position:absolute; inset:0; opacity:.35;
    background-image:linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
    background-size:56px 56px;
    mask-image:radial-gradient(70% 70% at 50% 40%, black 20%, transparent 90%);
  }

.hero .wrap{position:relative; z-index:2; display:grid; grid-template-columns:1.05fr .95fr; gap:60px; align-items:center; padding-bottom:70px;}

.hero h1{font-size:56px; line-height:1.04; color:#fff;}

.hero h1 em{font-style:normal; color:var(--blue-dim);}

.hero-sub{margin-top:24px; color:rgba(255,255,255,.7); font-size:17px; max-width:440px; line-height:1.65;}

.hero-sub b{color:#fff; font-weight:500;}

.hero-actions{display:flex; gap:16px; margin-top:38px;}

.hero-visual{position:relative; display:flex; align-items:center; justify-content:center;}

.hero-visual .af-frame{width:100%;}

.hero-visual svg{width:100%; height:auto;}

.hero-spec{
    position:absolute; font-family:'IBM Plex Mono'; font-size:11px; color:var(--blue-dim);
    letter-spacing:.05em; opacity:.85;
  }

.hero-spec.s1{top:4%; right:8%;}

.hero-spec.s2{bottom:9%; left:6%;}

.scroll-cue{
    position:absolute; bottom:34px; left:50%; transform:translateX(-50%);
    display:flex; flex-direction:column; align-items:center; gap:8px;
    font-family:'IBM Plex Mono'; font-size:10px; color:rgba(255,255,255,.5); letter-spacing:.15em;
  }

.scroll-cue .line{width:1px; height:34px; background:linear-gradient(to bottom, rgba(255,255,255,.6), transparent); animation:pulse 2s ease-in-out infinite;}

@keyframes pulse{0%,100%{opacity:.3;}50%{opacity:1;}}

/* ---------- Sections general ---------- */
  section{padding:130px 0;}

.section-alt{background:var(--grey-50);}

.section-head{max-width:600px; margin-bottom:64px;}

.section-head h2{font-size:38px; line-height:1.15; margin-top:16px;}

.section-head p{margin-top:18px; color:var(--grey-600); font-size:16px; line-height:1.7;}

.section-head.center{margin-left:auto; margin-right:auto; text-align:center;}

.reveal{opacity:0; transform:translateY(28px); transition:opacity .7s var(--ease), transform .7s var(--ease);}

.reveal.in{opacity:1; transform:translateY(0);}

/* ---------- Product cards ---------- */
  .products{display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(6,auto); gap:28px;}

.product-card{
    display:grid; grid-template-rows:subgrid; grid-row:span 6;
    border:1px solid var(--grey-100); border-radius:var(--radius); padding:40px 32px 34px;
    background:#fff; transition:border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
    position:relative;
  }

.product-card:hover{border-color:var(--blue); transform:translateY(-4px); box-shadow:0 20px 40px -20px rgba(20,30,50,.18);}

.product-icon{height:150px; display:flex; align-items:center; justify-content:center; margin-bottom:28px;}

.product-icon svg{width:100%; height:100%;}

.product-photo{margin:-10px -10px 0px; overflow:hidden; border-radius:2px 2px 0 0;}

.product-photo img{width:100%; height:auto; object-position:center; display:block;}

.product-tag{ font-family:'IBM Plex Mono'; font-size:11px; letter-spacing:.1em; color:var(--grey-400); text-transform:uppercase;}

.product-card h3{font-size:22px; margin-top:10px; line-height:1.3;}

.product-card > p{color:var(--grey-600); font-size:14.5px; margin-top:14px; line-height:1.6;}

.product-card > p b{display:block; color:var(--anthracite); font-size:15.5px; font-weight:600; margin-bottom:8px; line-height:1.4; min-height:2.8em;}

.feature-list{list-style:none; margin-top:22px; display:flex; flex-direction:column; gap:9px; align-self:start;}

.feature-list li{display:flex; align-items:center; gap:10px; font-size:13.5px; color:var(--anthracite); font-weight:500;}

.feature-list li svg{flex-shrink:0;}

.product-card .btn{margin-top:28px; align-self:end; padding:10px 0; font-size:14px; color:var(--blue); gap:6px;}

.product-card .btn:hover{gap:10px;}

/* ---------- Process ---------- */
  .process{position:relative;}

.process-track{display:grid; grid-template-columns:repeat(4,1fr); column-gap:56px; row-gap:0; position:relative; max-width:1080px; margin:0 auto;}

.process-step{padding:0; text-align:left; position:relative;}

.process-step:not(:last-child)::after{
    content:""; position:absolute; top:27px; left:54px; right:-56px; height:1px;
    background:repeating-linear-gradient(90deg, var(--grey-300) 0 8px, transparent 8px 16px);
  }

.step-num{
    width:54px; height:54px; border-radius:50%; border:1px solid var(--grey-300); background:#fff;
    display:flex; align-items:center; justify-content:center; position:relative; z-index:2; margin-bottom:22px;
    transition:border-color .3s, background .3s;
  }

.process-step:hover .step-num{border-color:var(--blue); background:var(--blue-light);}

.step-num svg{width:21px; height:21px;}

.process-step h3{font-size:16px; margin-bottom:10px; line-height:1.35;}

.process-step ul{list-style:none; color:var(--grey-600); font-size:13.5px; line-height:1.6; display:flex; flex-direction:column; gap:5px;}

/* ---------- Applications carousel ---------- */
  .app-carousel{position:relative; padding:0 64px;}

.app-track-wrap{overflow:hidden;}

.app-track{display:flex; gap:2px; background:var(--grey-100); transition:transform .45s var(--ease);}

.app-tile{
    position:relative; flex:0 0 calc((100% - 2*2px)/3); aspect-ratio:4/3; background:var(--anthracite); overflow:hidden;
    display:flex; align-items:flex-end; padding:22px; cursor:default;
  }

.app-tile .tile-bg{position:absolute; inset:0; opacity:.9; transition:transform .5s var(--ease);}

.app-tile:hover .tile-bg{transform:scale(1.06);}

.app-tile::after{content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(10,12,15,.85) 0%, rgba(10,12,15,.15) 55%, transparent 80%);}

.app-tile span{position:relative; z-index:2; color:#fff; font-family:'Space Grotesk'; font-weight:600; font-size:17px;}

.app-tile .tile-idx{position:absolute; top:18px; right:20px; z-index:2; font-family:'IBM Plex Mono'; font-size:11px; color:rgba(255,255,255,.55);}

.app-nav{
    position:absolute; top:50%; transform:translateY(-50%); width:44px; height:44px; border-radius:50%;
    background:#fff; border:1px solid var(--grey-100); display:flex; align-items:center; justify-content:center;
    cursor:pointer; box-shadow:0 6px 18px rgba(20,30,50,.12); z-index:5; transition:border-color .25s, opacity .25s, transform .25s;
  }

.app-nav:hover{border-color:var(--blue); transform:translateY(-50%) scale(1.05);}

.app-nav:disabled{opacity:.3; cursor:default; pointer-events:none;}

.app-nav.prev{left:0;}

.app-nav.next{right:0;}

.app-nav svg{width:18px; height:18px;}

@media (max-width:980px){
    .app-tile{flex-basis:calc((100% - 2px)/2);}
  }

@media (max-width:600px){
    .app-carousel{padding:0 48px;}
    .app-tile{flex-basis:100%;}
    .app-nav{width:36px; height:36px;}
  }

/* ---------- Benefits ---------- */
  .benefits{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--grey-100); border:1px solid var(--grey-100);}

.benefit-card{background:#fff; padding:38px 30px; transition:background .3s;}

.benefit-card:hover{background:var(--grey-50);}

.benefit-num{font-family:'IBM Plex Mono'; font-size:12px; color:var(--blue); letter-spacing:.1em;}

.benefit-card h3{font-size:19px; margin-top:18px; margin-bottom:12px; line-height:1.3;}

.benefit-card p{color:var(--grey-600); font-size:14px; line-height:1.6;}

/* ---------- For whom ---------- */
  .audience{display:grid; grid-template-columns:repeat(4,1fr); gap:24px;}

.audience-card{border:1px solid var(--grey-100); padding:32px 26px; border-radius:var(--radius); transition:all .3s var(--ease);}

.audience-card:hover{border-color:var(--anthracite); background:var(--anthracite); }

.audience-card:hover h3, .audience-card:hover p{color:#fff;}

.audience-card svg{margin-bottom:20px;}

.audience-card h3{font-size:16.5px; margin-bottom:8px; transition:color .3s;}

.audience-card p{font-size:13.5px; color:var(--grey-600); transition:color .3s;}

.mbs-grid{align-items:start;}

.mbs-card{position:relative; background:var(--grey-50); border:1px solid var(--grey-100); border-radius:var(--radius); padding:36px 34px;}

.mbs-card-label{font-family:'IBM Plex Mono'; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--grey-400); margin-bottom:22px;}

.mbs-list{list-style:none; display:flex; flex-direction:column;}

.mbs-list li{
    display:flex; align-items:flex-start; gap:16px; padding:16px 0; border-top:1px solid var(--grey-100);
  }

.mbs-list li:first-child{border-top:none;}

.mbs-num{font-family:'IBM Plex Mono'; font-size:12px; color:var(--blue); flex-shrink:0; width:20px; padding-top:2px;}

.mbs-body{display:flex; flex-direction:column; gap:4px;}

.mbs-title{font-size:14.5px; font-weight:600; color:var(--anthracite); line-height:1.35;}

.mbs-desc{font-size:12.5px; font-weight:400; color:var(--grey-600); line-height:1.55;}

@media (max-width:980px){
    .mbs-card{padding:30px 26px;}
  }

/* ---------- Über THOP ---------- */
  .about-grid{display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center;}

  .about-grid > *{min-width:0;}

.about-section .section-head p{color:var(--grey-600); max-width:460px;}

/* ---------- Rechtliche Seiten (Impressum, Datenschutz) ---------- */
.legal-content{padding:0 0 130px;}

.legal-prose{max-width:720px;}

.legal-prose h2{font-size:19px; margin-top:44px; margin-bottom:14px;}

.legal-prose h2:first-child{margin-top:0;}

.legal-prose p{color:var(--grey-600); font-size:15px; line-height:1.75; margin-bottom:4px;}

.legal-prose p a{color:var(--blue); text-decoration:underline; text-underline-offset:2px;}

.legal-prose .legal-stand{font-family:'IBM Plex Mono'; font-size:12.5px; color:var(--grey-400); margin-bottom:36px;}

.about-image-placeholder{
    aspect-ratio:4/3; background:var(--grey-50); border:1px dashed var(--grey-300); border-radius:var(--radius);
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px;
  }

.about-image-placeholder span{font-family:'IBM Plex Mono'; font-size:11.5px; letter-spacing:.06em; color:var(--grey-400); text-transform:uppercase;}

.about-points{list-style:none; display:flex; flex-direction:column; gap:26px;}

.about-points li{display:flex; gap:16px; align-items:flex-start;}

.about-points svg{flex-shrink:0; margin-top:2px;}

.about-points h3{font-size:16.5px; margin-bottom:4px;}

.about-points p{font-size:14px; color:var(--grey-600); line-height:1.5;}

@media (max-width:980px){
    .about-grid{grid-template-columns:1fr; gap:40px;}
  }

/* ---------- CTA banner ---------- */
  .cta-banner{
    background:var(--anthracite-2); color:#fff; text-align:center; position:relative; overflow:hidden;
  }

.cta-banner .hero-grid{opacity:.2;}

.cta-banner .wrap{position:relative; z-index:2;}

.cta-banner h2{color:#fff; font-size:40px;}

.cta-banner p{color:rgba(255,255,255,.65); margin-top:18px; font-size:16px; line-height:1.7;}

.cta-banner .btn{margin-top:36px;}

/* Kontakt: zweispaltig, Text + Formular */
  .cta-grid{display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start; max-width:1100px; margin:0 auto; text-align:left;}

.cta-text .eyebrow{justify-content:flex-start;}

.cta-text h2{text-align:left;}

.cta-text p{text-align:left; max-width:420px;}

.cta-contact-info{margin-top:34px; display:flex; flex-direction:column; gap:10px;}

.cta-contact-info a, .cta-contact-info span{
    display:flex; align-items:center; gap:9px; font-family:'IBM Plex Mono'; font-size:13px; letter-spacing:.02em; color:rgba(255,255,255,.6);
  }

.cta-contact-info svg{flex-shrink:0; opacity:.8;}

.cta-contact-info a:hover{color:#fff;}

.cta-form-wrap{position:relative; background:#fff; border-radius:var(--radius); padding:38px 36px; text-align:left;}

.cta-form-wrap h3{font-size:16px; margin-bottom:4px;}

.cta-form-wrap .form-intro{font-size:13px; color:var(--grey-600); margin-bottom:22px;}

.contact-form{display:flex; flex-direction:column; gap:16px;}

.form-row{display:grid; grid-template-columns:1fr 1fr; gap:14px;}

.form-field{display:flex; flex-direction:column; gap:6px;}

.form-field label{font-family:'IBM Plex Mono'; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--grey-400);}

.form-field input, .form-field select, .form-field textarea{
    border:1px solid var(--grey-100); border-radius:var(--radius); padding:11px 12px;
    font-family:'Inter'; font-size:14px; color:var(--anthracite); background:var(--grey-50);
    transition:border-color .25s var(--ease), background .25s var(--ease); width:100%;
  }

.form-field input:focus, .form-field select:focus, .form-field textarea:focus{
    outline:none; border-color:var(--blue); background:#fff;
  }

.form-field textarea{resize:vertical; min-height:88px; font-family:'Inter';}

.contact-form .btn-primary{width:100%; justify-content:center; margin-top:4px; border:none; cursor:pointer;}

.form-note{font-size:11px; color:var(--grey-400); text-align:center; margin-top:2px;}

.form-success{display:none; text-align:center; padding:34px 10px;}

.form-success.show{display:block;}

.form-success h3{margin-top:16px; font-size:18px;}

.form-success p{margin-top:8px; font-size:13.5px; color:var(--grey-600);}

@media (max-width:980px){
    .cta-grid{grid-template-columns:1fr; gap:44px;}
  }

/* ---------- Footer ---------- */
  footer{background:var(--anthracite-2); color:rgba(255,255,255,.55); padding:70px 0 34px;}

.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; padding-bottom:50px; border-bottom:1px solid rgba(255,255,255,.1);}

.foot-grid h4{font-family:'IBM Plex Mono'; font-size:11px; letter-spacing:.1em; color:rgba(255,255,255,.4); text-transform:uppercase; margin-bottom:18px;}

.foot-grid a, .foot-grid p{display:block; font-size:14px; color:rgba(255,255,255,.7); margin-bottom:10px;}

.foot-grid a:hover{color:#fff;}

.foot-bottom{display:flex; justify-content:space-between; padding-top:26px; font-size:12.5px; color:rgba(255,255,255,.35);}

.foot-bottom a{color:inherit;}

.foot-bottom a:hover{color:rgba(255,255,255,.7);}

.nav-toggle{display:none; flex-direction:column; justify-content:center; gap:5px; width:30px; height:30px; background:none; border:none; cursor:pointer; padding:0;}

.nav-close{display:none;}

.nav-toggle span{display:block; width:100%; height:2px; background:#fff; border-radius:1px; transition:transform .3s var(--ease), opacity .3s var(--ease), background .3s;}

header.scrolled .nav-toggle span, header.force-light .nav-toggle span{background:var(--anthracite);}

header.nav-open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg);}

header.nav-open .nav-toggle span:nth-child(2){opacity:0;}

header.nav-open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

header.nav-open .nav-toggle span{background:var(--anthracite);}

.nav-backdrop{display:none; position:fixed; inset:0; background:rgba(10,12,15,.45); z-index:90; opacity:0; transition:opacity .3s var(--ease);}

header.nav-open .nav-backdrop{display:block; opacity:1;}

/* ---------- Responsive ---------- */
  @media (max-width:980px){
    .wrap{padding:0 24px;}
    .nav-cta > a{display:none;}
    .nav-toggle{display:flex;}
    nav{
      position:fixed; top:0; right:-300px; width:280px; max-width:82vw; height:100vh; height:100dvh;
      background:#fff; box-shadow:-14px 0 40px rgba(10,12,15,.18); padding:96px 30px 40px;
      transition:right .35s var(--ease); z-index:100; display:block; overflow-y:auto;
    }
    header.nav-open nav{right:0;}
    .nav-close{display:block; -webkit-appearance:none; appearance:none; position:absolute; top:24px; right:24px; width:36px; height:36px; background:none; border:none; font-size:34px; line-height:1; color:#000 !important; cursor:pointer;}
    nav ul{flex-direction:column; gap:0; align-items:stretch;}
    nav ul li{border-bottom:1px solid var(--grey-100);}
    nav a{display:block; padding:16px 2px; font-size:15.5px; color:var(--anthracite) !important;}
    nav a:hover{color:var(--blue) !important;}
    .hero .wrap{grid-template-columns:1fr; text-align:left;}
    .hero h1{font-size:38px;}
    .products, .benefits, .audience{grid-template-columns:1fr 1fr;}
    .process-track{grid-template-columns:1fr 1fr; row-gap:50px;}
    .process-step::after{display:none;}
    .foot-grid{grid-template-columns:1fr 1fr;}
  }

@media (max-width:600px){
    section{padding:80px 0;}
    .products, .benefits, .audience, .process-track, .foot-grid{grid-template-columns:1fr;}
    .hero h1{font-size:32px;}
    .hero-actions{flex-direction:column;}
    .section-head h2{font-size:28px;}
  }

@media (prefers-reduced-motion:reduce){
    *{animation:none !important; transition:none !important;}
  }

/* ---------- Fit-Cards ("Welches System passt zu Ihnen?") ---------- */
  .fit-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:28px;}

.fit-card{border:1px solid var(--grey-100); border-radius:var(--radius); padding:44px 34px; background:#fff; transition:border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease); display:flex; flex-direction:column; gap:14px;}

.fit-card:hover{border-color:var(--blue); transform:translateY(-4px); box-shadow:0 20px 40px -20px rgba(20,30,50,.18);}

.fit-card h3{font-size:19px; line-height:1.32;}

.fit-card p{color:var(--grey-600); font-size:14px; line-height:1.65; flex-grow:1;}

.fit-card .btn{align-self:flex-start; padding:10px 0; font-size:14px; color:var(--blue); gap:6px;}

.fit-card .btn:hover{gap:10px;}

/* ---------- Vergleichstabelle ---------- */
  .compare-wrap{overflow-x:auto; border:1px solid var(--grey-100); border-radius:var(--radius); background:#fff;}

table.compare-table{width:100%; border-collapse:separate; border-spacing:18px 0; min-width:760px;}

.compare-table th, .compare-table td{padding:16px 14px; text-align:left; font-size:13.5px; border-bottom:1px solid var(--grey-100);}

.compare-table thead th{font-family:'IBM Plex Mono'; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--blue); background:var(--grey-50); font-weight:500;}

.compare-table thead th:not(:first-child){text-align:center;}

.compare-table thead th.col-hl{color:var(--blue);}

.compare-table tbody th{font-weight:500; color:var(--grey-600); text-align:left;}

.compare-table tbody td{color:var(--anthracite); font-weight:600;}

.compare-table tbody tr:last-child th, .compare-table tbody tr:last-child td{border-bottom:none;}

.compare-table tbody tr:hover td, .compare-table tbody tr:hover th{background:var(--grey-50);}

.cmp-yes{color:var(--blue);}

.cmp-no{color:var(--grey-300);}

/* ---------- Lieferumfang ---------- */
  .scope-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(180px,1fr)); gap:1px; background:var(--grey-100); border:1px solid var(--grey-100);}

.scope-item{background:#fff; padding:28px 26px; display:flex; flex-direction:column; gap:14px;}

.scope-item .scope-icon{width:38px; height:38px; border-radius:50%; border:1px solid var(--grey-300); display:flex; align-items:center; justify-content:center;}

.scope-item span{font-size:14px; font-weight:600; color:var(--anthracite);}

/* ---------- Integrations-Flow ---------- */
  .flow{display:flex; flex-direction:column; align-items:center; max-width:320px; margin:0 auto;}

.flow-box{border:1px solid var(--grey-100); background:#fff; border-radius:var(--radius); padding:16px 30px; font-family:'IBM Plex Mono'; font-size:13px; color:var(--anthracite); font-weight:500; min-width:220px; text-align:center;}

.flow-box.hl{border-color:var(--blue); color:var(--blue); background:var(--blue-light); font-weight:600;}

.flow-arrow{padding:8px 0; color:var(--grey-300); line-height:1;}

.flow-arrow svg{display:block; margin:0 auto;}

.flow-result{display:flex; gap:14px; margin-top:4px;}

.flow-result span{font-family:'IBM Plex Mono'; font-size:12.5px; padding:9px 18px; border-radius:var(--radius); border:1px solid var(--grey-100); font-weight:600;}

.flow-result .ok{color:#1a7a4c; border-color:#c8e6d7; background:#f1f9f5;}

.flow-result .nok{color:#b3261e; border-color:#f3d3d0; background:#fcf2f1;}

/* ---------- FAQ ---------- */
  .faq-list{display:flex; flex-direction:column; max-width:800px;}

.faq-item{border-top:1px solid var(--grey-100); padding:24px 0;}

.faq-item:first-child{border-top:none;}

.faq-item h3{font-size:15.5px; margin-bottom:8px; color:var(--anthracite); font-family:'Inter'; font-weight:600;}

.faq-item p{font-size:14px; color:var(--grey-600); line-height:1.7;}

@media (max-width:980px){
    .fit-grid{grid-template-columns:1fr;}
  }

@media (max-width:600px){
    .scope-grid{grid-template-columns:1fr 1fr;}
    .facts-list li{gap:10px;}
  }

/* ---------- Subpages: Produkt-Hero, Specs, Breadcrumb ---------- */
  .breadcrumb{font-family:'IBM Plex Mono'; font-size:11.5px; letter-spacing:.04em; color:var(--grey-400); margin-bottom:22px;}

.breadcrumb a{color:var(--grey-600);}

.breadcrumb a:hover{color:var(--anthracite);}

.product-hero{padding-top:168px; padding-bottom:90px;}

.product-hero .wrap{display:grid; grid-template-columns:1.1fr .9fr; gap:64px; align-items:center;}

.product-hero .wrap > *{min-width:0;}

.product-hero h1{font-size:44px; line-height:1.1; margin-top:14px;}

.product-hero .lead{margin-top:20px; color:var(--grey-600); font-size:16.5px; line-height:1.7; max-width:460px;}

.product-hero-actions{display:flex; gap:16px; margin-top:34px; flex-wrap:wrap;}

.product-hero-visual{background:var(--grey-50); border:1px solid var(--grey-100); border-radius:var(--radius); padding:54px; display:flex; align-items:center; justify-content:center; position:relative; min-width:0;}

.product-hero-visual img{min-width:0; max-width:100%;}

.product-hero-visual svg{width:100%; height:auto; max-width:300px;}

.spec-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--grey-100); border:1px solid var(--grey-100);}

.spec-row{background:#fff; padding:20px 26px; display:flex; justify-content:space-between; align-items:baseline; gap:20px;}

.spec-row .k{font-size:13.5px; color:var(--grey-600);}

.spec-row .v{font-size:14.5px; font-weight:600; color:var(--anthracite); text-align:right;}

.use-tag-row{display:flex; flex-wrap:wrap; gap:10px; margin-top:26px;}

.use-tag{font-family:'IBM Plex Mono'; font-size:12px; color:var(--anthracite); border:1px solid var(--grey-100); padding:8px 14px; border-radius:var(--radius); background:var(--grey-50);}

.facts-list{list-style:none; display:flex; flex-direction:column;}

.facts-list li{display:flex; gap:24px; align-items:flex-start; padding:18px 0; border-top:1px solid var(--grey-100); font-size:14.5px;}

.facts-list li:first-child{border-top:none;}

.facts-list .k{color:var(--grey-600); padding-top:1px; flex:0 0 34%;}

.facts-list .v{font-weight:600; color:var(--anthracite); text-align:left; line-height:1.6; flex:1 1 auto; min-width:0; overflow-wrap:break-word; word-break:break-word;}

@media (max-width:980px){
    .product-hero{padding-top:140px;}
    .product-hero .wrap{grid-template-columns:1fr;}
    .spec-grid{grid-template-columns:1fr;}
  }

.cmp-cell{display:flex; width:100%; align-items:center; justify-content:center;}

.cmp-legend{display:flex; flex-wrap:wrap; gap:24px; margin-top:20px; font-family:'IBM Plex Mono'; font-size:12px; color:var(--grey-600);}

.cmp-legend span{display:flex; align-items:center; gap:9px;}

.compare-table thead th.cmp-cell-head{text-align:center;}

.compare-table td.cmp-td-center{text-align:center;}

.compare-intro{max-width:640px; color:var(--grey-600); font-size:15px; line-height:1.7; margin-top:18px;}
/* ---------- Cookie-Banner ---------- */
.cookie-banner{position:fixed; left:0; right:0; bottom:-100%; z-index:999; background:#fff; border-top:1px solid var(--grey-100); box-shadow:0 -10px 30px rgba(10,12,15,.1); padding:22px 24px; transition:bottom .4s var(--ease);}

.cookie-banner.show{bottom:0;}

.cookie-banner-inner{max-width:1240px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:28px; flex-wrap:wrap;}

.cookie-banner p{font-size:13.5px; color:var(--grey-600); line-height:1.6; max-width:640px; margin:0;}

.cookie-banner p a{color:var(--blue); text-decoration:underline;}

.cookie-actions{display:flex; gap:10px; flex-shrink:0; flex-wrap:wrap;}

.cookie-actions .btn{padding:9px 18px; font-size:13.5px;}

@media (max-width:600px){
  .cookie-banner-inner{flex-direction:column; align-items:stretch;}
  .cookie-actions{justify-content:flex-end;}
}