/* ============================================================
   KENNWERK · kennwerk.de · style.css · v8
   Schrift: Archivo (variabel, Display + Text) + JetBrains Mono (Labels)
   Markenzeichen: das KENNWERK-Winkel (oben rechts) als wiederkehrendes Element
   ============================================================ */

@font-face{
  font-family:'Archivo';
  font-style:normal;
  font-weight:400 600;
  font-stretch:100% 112%;
  font-display:swap;
  src:url('/fonts/archivo-var.woff2') format('woff2-variations');
}
@font-face{
  font-family:'JetBrains Mono';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('/fonts/jetbrains-mono-400.woff2') format('woff2');
}
@font-face{
  font-family:'JetBrains Mono';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('/fonts/jetbrains-mono-500.woff2') format('woff2');
}

:root{
  --bg:#05070B;
  --bg-2:#0A0E14;
  --bg-3:#0E141C;
  --white:#FFFFFF;
  --text:#A9AFB8;
  --text-dim:#7B838E;
  --lime:#D4FF00;
  --lime-soft:rgba(212,255,0,.12);
  --lime-line:rgba(212,255,0,.32);
  --blue:#006BFF;
  --blue-soft:rgba(0,107,255,.14);
  --line:rgba(255,255,255,.09);
  --line-strong:rgba(255,255,255,.18);
  --radius:0;
  --maxw:1240px;
  --gap:26px;
  --font-display:'Archivo','Helvetica Neue',Arial,sans-serif;
  --font-body:'Archivo','Helvetica Neue',Arial,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;
  --grad-accent:linear-gradient(90deg,#D4FF00 0%,#7BF7A0 38%,#00C2FF 68%,#006BFF 100%);
  --grad-btn:linear-gradient(120deg,#D4FF00 0%,#C2F500 100%);
  --shadow-panel:0 24px 60px rgba(0,0,0,.45);
  --header-h:78px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--bg)}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}

body{
  font-family:var(--font-body);
  font-size:18px;
  font-weight:400;
  line-height:1.75;
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{max-width:100%;height:auto;display:block}
a{color:var(--lime);text-decoration:none}
a:hover{text-decoration:underline}
::selection{background:var(--lime);color:#05070B}

/* Fließtext-Links sind immer unterstrichen, nicht nur farblich markiert (WCAG 1.4.1) */
main p a, main li a, main dd a, main td a, main figcaption a,
.cookie-banner a, .footer-about a, .form-note a, .footer-bottom a{
  color:var(--white);
  text-decoration:underline;
  text-decoration-thickness:1.5px;
  text-underline-offset:3px;
  text-decoration-color:var(--lime-line);
}
main p a:hover, main li a:hover, main dd a:hover, main td a:hover,
.cookie-banner a:hover, .footer-about a:hover, .footer-bottom a:hover{
  color:var(--lime);text-decoration-color:currentColor;
}
/* Ausnahmen: Buttons und Navigationselemente bleiben ohne Unterstreichung */
main p a.btn, main li a.btn,
.servicebar a, .glossar-nav a, .breadcrumb a, .tags a{
  text-decoration:none;
}
.servicebar a:hover, .glossar-nav a:hover, .breadcrumb a:hover{text-decoration:none}
main p a.btn{color:inherit}
.btn-primary, .btn-primary:hover{color:#05070B}
.btn-secondary{color:var(--white)}

a:focus-visible,button:focus-visible,summary:focus-visible,
input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:3px solid var(--lime);outline-offset:3px;
}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.mt-m{margin-top:34px}
.mt-l{margin-top:48px}
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--lime);color:#05070B;padding:12px 20px;font-weight:600;
}
.skip-link:focus{left:12px;top:12px}

/* ---------- Typografie ---------- */
h1,h2,h3,h4{
  font-family:var(--font-display);
  color:var(--white);
  font-stretch:112%;
  letter-spacing:-.02em;
}
h1{
  font-weight:600;
  font-size:clamp(30px,4.4vw,56px);
  line-height:1.02;
  text-transform:uppercase;
  letter-spacing:-.025em;
  overflow-wrap:break-word;
  hyphens:auto;
}
h2{
  font-weight:600;
  font-size:clamp(28px,3.8vw,46px);
  line-height:1.1;
  margin-bottom:22px;
  overflow-wrap:break-word;
}
h3{
  font-weight:600;
  font-size:clamp(19px,2vw,23px);
  line-height:1.3;
  letter-spacing:-.01em;
  margin-bottom:12px;
}
h4{
  font-weight:600;
  font-size:17px;
  line-height:1.4;
  margin-bottom:10px;
  color:var(--white);
}
p{margin-bottom:20px}
p:last-child{margin-bottom:0}
strong{color:var(--white);font-weight:600}

/* Eyebrow mit Winkelzeichen */
.eyebrow{
  display:inline-flex;align-items:center;gap:12px;
  font-family:var(--font-mono);font-size:12px;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:var(--lime);
  margin-bottom:20px;
}
.eyebrow::before{
  content:"";width:14px;height:14px;flex-shrink:0;
  border-top:3px solid var(--lime);border-right:3px solid var(--lime);
}
.eyebrow.muted{color:var(--text-dim)}
.eyebrow.muted::before{border-color:var(--text-dim)}
.eyebrow.blue{color:#5A9CFF}
.eyebrow.blue::before{border-color:#5A9CFF}

.claim{
  font-family:var(--font-mono);font-size:clamp(12px,1.4vw,14px);font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;color:var(--lime);
}
.lead{font-size:clamp(18px,1.5vw,21px);color:#C3C9D1;line-height:1.65}

/* Winkelzeichen als Utility */
.corner{
  position:relative;
}
.corner::after{
  content:"";position:absolute;top:0;right:0;width:16px;height:16px;
  border-top:2px solid var(--lime);border-right:2px solid var(--lime);
  opacity:.45;transition:opacity .2s ease,width .2s ease,height .2s ease;
}
.corner:hover::after{opacity:1;width:22px;height:22px}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-mono);font-weight:500;font-size:13px;
  letter-spacing:.12em;text-transform:uppercase;line-height:1;
  padding:19px 28px;border-radius:0;border:0;cursor:pointer;
  text-decoration:none;transition:background .18s ease,color .18s ease,border-color .18s ease,transform .18s ease;
}
.btn:hover{text-decoration:none;transform:translateY(-2px)}
.btn-primary{background:var(--grad-btn);color:#05070B}
.btn-primary:hover{background:#E4FF4D;color:#05070B}
.btn-secondary{
  background:transparent;color:var(--white);
  border:1px solid var(--line-strong);
}
.btn-secondary:hover{border-color:var(--lime);color:var(--lime)}
.btn-dark{background:#05070B;color:var(--lime);border:1px solid var(--lime-line)}
.btn-dark:hover{background:var(--lime);color:#05070B}
.btn .tick{
  width:9px;height:9px;flex-shrink:0;
  border-top:2px solid currentColor;border-right:2px solid currentColor;
  transition:transform .18s ease;
}
.btn:hover .tick{transform:translate(2px,-2px)}
.btn-block{width:100%;justify-content:center}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none}
.btn[disabled]:hover{transform:none}

/* ---------- Header / Navigation ---------- */
.site-header{
  position:sticky;top:0;z-index:60;
  background:rgba(5,7,11,.78);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line);
}
.nav{
  max-width:var(--maxw);margin:0 auto;padding:0 24px;
  height:var(--header-h);display:flex;align-items:center;justify-content:space-between;gap:28px;
}
.logo{display:inline-flex;align-items:center;line-height:0}
.logo:hover{text-decoration:none}
.site-header .logo img{height:24px;width:auto}
.nav-links{display:flex;align-items:center;gap:30px;list-style:none}
.nav-links>li{position:relative}
.nav-links a{
  font-family:var(--font-mono);font-size:12.5px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:#D6DAE0;
  padding:6px 0;border-bottom:2px solid transparent;
  transition:color .15s ease,border-color .15s ease;
}
.nav-links a:hover{color:var(--lime);border-bottom-color:var(--lime);text-decoration:none}
.nav-links a.active{color:var(--lime);border-bottom-color:var(--lime-line)}
.caret{
  display:inline-block;width:7px;height:7px;margin:0 0 2px 6px;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg);transition:transform .18s ease;
}
.has-sub{padding:27px 0}
.has-sub:hover .caret,.has-sub:focus-within .caret{transform:rotate(225deg);margin-bottom:-2px}
.subnav{
  display:none;position:absolute;top:100%;left:50%;transform:translateX(-50%);
  width:560px;list-style:none;
  background:var(--bg-2);border:1px solid var(--line-strong);
  padding:14px;box-shadow:var(--shadow-panel);
  columns:2;column-gap:10px;
}
.has-sub:hover .subnav,.has-sub:focus-within .subnav{display:block}
.subnav li{break-inside:avoid}
.subnav a{
  display:block;padding:10px 12px;font-family:var(--font-body);
  font-size:15px;letter-spacing:0;text-transform:none;color:#D6DAE0;
  border-bottom:0;border-left:2px solid transparent;
}
.subnav a:hover{background:rgba(255,255,255,.05);color:var(--lime);border-left-color:var(--lime)}
.subnav a.active{color:var(--lime);border-left-color:var(--lime)}
.subnav .sub-highlight{column-span:all;margin-top:8px;padding-top:10px;border-top:1px solid var(--line)}
.subnav .sub-highlight a{color:var(--lime)}
.nav-cta{
  font-family:var(--font-mono);font-size:12px;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;color:#05070B;
  background:var(--lime);padding:13px 20px;white-space:nowrap;border-radius:0;
}
.nav-cta:hover{background:#E4FF4D;text-decoration:none}
.burger{display:none;background:none;border:0;cursor:pointer;padding:8px}
.burger span{
  display:block;width:26px;height:2px;background:var(--white);margin:6px 0;
  transition:transform .2s ease,opacity .2s ease;
}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

/* ---------- Hero ---------- */
.hero{
  position:relative;overflow:hidden;
  margin-top:calc(var(--header-h) * -1);
  padding-top:var(--header-h);
  background:var(--bg);
}
.hero-media{position:absolute;top:0;right:0;bottom:0;left:44%;z-index:0}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:58% center}
.hero-media::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(90deg,#05070B 0%,rgba(5,7,11,.88) 14%,rgba(5,7,11,.35) 34%,rgba(5,7,11,0) 62%),
    linear-gradient(180deg,rgba(5,7,11,.55) 0%,rgba(5,7,11,0) 26%,rgba(5,7,11,.35) 82%,#05070B 100%);
}
.hero-grid{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background-image:linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:calc(100% / 6) 100%;
  opacity:.5;
}
.hero-inner{
  position:relative;z-index:2;
  max-width:var(--maxw);margin:0 auto;padding:72px 24px 64px;
}
.hero h1{max-width:19ch;margin-bottom:20px}
.hero h1 .hl{color:var(--lime)}
.hero .claim{display:block;margin-bottom:26px}
.hero-sub{max-width:580px;margin-bottom:32px;font-size:clamp(17px,1.5vw,20px);color:#C3C9D1}
.hero-actions{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:40px}
.hero-meta{
  display:flex;gap:26px;flex-wrap:wrap;
  font-family:var(--font-mono);font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--text-dim);
}
.hero-meta span{display:inline-flex;align-items:center;gap:9px}
.hero-meta span::before{
  content:"";width:9px;height:9px;flex-shrink:0;
  border-top:2px solid var(--lime);border-right:2px solid var(--lime);
}


/* ---------- Markenschild im Hero (folgt dem Mauszeiger) ---------- */
.hero-mark{
  position:absolute;right:24px;top:50%;
  width:360px;height:230px;margin-top:-115px;
  perspective:900px;pointer-events:none;z-index:3;
}
.hero-mark-plate{
  position:absolute;inset:0;
  transform-style:preserve-3d;
  transform:rotateX(var(--ry,0deg)) rotateY(var(--rx,0deg));
  transition:transform .35s cubic-bezier(.2,.7,.3,1);
  border:1px solid rgba(212,255,0,.22);
  background:linear-gradient(150deg,rgba(10,14,20,.72),rgba(5,7,11,.45));
  backdrop-filter:blur(7px);
  -webkit-backdrop-filter:blur(7px);
  box-shadow:0 30px 70px rgba(0,0,0,.55);
}
.hero-mark.aktiv .hero-mark-plate{transition:transform .08s linear}
.hero-mark-logo{
  position:absolute;left:38px;right:38px;top:50%;height:56px;margin-top:-34px;
  background:url('/kennwerk-logo.webp') left center/contain no-repeat;
  transform:translateZ(60px);
  filter:drop-shadow(0 10px 26px rgba(0,0,0,.5));
}
.hero-mark-line{
  position:absolute;left:38px;right:38px;bottom:44px;height:2px;
  background:var(--grad-accent);opacity:.85;
  transform:translateZ(28px);
}
.hero-mark-label{
  position:absolute;left:38px;bottom:24px;
  font-family:var(--font-mono);font-size:10.5px;font-weight:500;
  letter-spacing:.24em;text-transform:uppercase;color:var(--text-dim);
  transform:translateZ(28px);
}
.hero-mark-glanz{
  position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(420px circle at var(--mx,70%) var(--my,30%),rgba(212,255,0,.16),rgba(0,107,255,.10) 42%,transparent 68%);
  opacity:0;transition:opacity .4s ease;
}
.hero-mark.aktiv .hero-mark-glanz{opacity:1}
@media (max-width:1120px){.hero-mark{display:none}}
@media (prefers-reduced-motion:reduce){
  .hero-mark-plate{transform:none!important}
  .hero-mark-glanz{display:none}
}

/* Leistungsleiste unter dem Hero */
.servicebar{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--bg-2)}
.servicebar ul{
  max-width:var(--maxw);margin:0 auto;padding:0 24px;list-style:none;
  display:grid;grid-template-columns:repeat(6,1fr);
}
.servicebar li{border-right:1px solid var(--line)}
.servicebar li:first-child{border-left:1px solid var(--line)}
.servicebar a{
  display:block;padding:26px 20px;
  font-family:var(--font-mono);font-size:12.5px;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;color:#D6DAE0;
  border-top:2px solid transparent;margin-top:-1px;
  transition:color .16s ease,background .16s ease,border-color .16s ease;
}
.servicebar a:hover{color:var(--lime);background:rgba(212,255,0,.05);border-top-color:var(--lime);text-decoration:none}
.servicebar b{
  display:block;font-family:var(--font-mono);font-size:11px;font-weight:500;
  color:var(--text-dim);margin-bottom:8px;letter-spacing:.14em;
}

/* ---------- Subhero (Unterseiten) ---------- */
.subhero{
  position:relative;overflow:hidden;background:var(--bg-2);
  margin-top:calc(var(--header-h) * -1);padding-top:var(--header-h);
  border-bottom:1px solid var(--line);
}
.subhero::before{
  content:"";position:absolute;inset:0;
  background:url('/wellen-uebergang.webp') center center/cover no-repeat;
}
.subhero::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(5,7,11,.22) 0%,rgba(5,7,11,.42) 38%,rgba(5,7,11,.84) 86%,#05070B 100%);
}
.subhero-inner{
  position:relative;z-index:2;
  max-width:var(--maxw);margin:0 auto;padding:88px 24px 68px;
}
.subhero h1{font-size:clamp(29px,4vw,50px);max-width:22ch;margin-bottom:20px;text-shadow:0 2px 26px rgba(5,7,11,.85)}
.subhero-sub{max-width:660px;font-size:clamp(17px,1.5vw,20px);color:#D2D7DD;text-shadow:0 2px 20px rgba(5,7,11,.9)}

/* ---------- Breadcrumbs ---------- */
.breadcrumb{
  font-family:var(--font-mono);font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;margin-bottom:22px;
}
.breadcrumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:10px}
.breadcrumb li{display:flex;align-items:center;gap:10px;color:var(--text-dim)}
.breadcrumb li+li::before{content:"/";color:var(--lime-line)}
.breadcrumb a{color:var(--text-dim)}
.breadcrumb a:hover{color:var(--lime);text-decoration:none}

/* ---------- Sections ---------- */
.section{padding:104px 0;position:relative}
.section.tint{background:var(--bg-2)}
.section.line-top{border-top:1px solid var(--line)}
.section.pull{padding-top:58px}
.section-head{max-width:680px;margin-bottom:56px}
.section-head p{font-size:19px}
.section-head.wide{max-width:820px}
.split-head{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  gap:60px;align-items:start;
}
.split-head .sticky{position:sticky;top:calc(var(--header-h) + 40px)}

/* ---------- Karten ---------- */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--gap)}
.panel{
  position:relative;background:var(--bg-2);
  border:1px solid var(--line);border-radius:0;
  padding:34px 30px 32px;
  transition:border-color .2s ease,background .2s ease,transform .2s ease;
}
.panel:hover{border-color:var(--line-strong);background:var(--bg-3);transform:translateY(-3px)}
.panel::after{
  content:"";position:absolute;top:16px;right:16px;width:14px;height:14px;
  border-top:2px solid var(--lime);border-right:2px solid var(--lime);
  opacity:.25;transition:opacity .2s ease,width .2s ease,height .2s ease;
}
.panel:hover::after{opacity:1;width:20px;height:20px}
.panel h3,.panel-title{margin-bottom:12px}
.panel-title{
  font-family:var(--font-display);font-stretch:112%;font-weight:600;
  font-size:clamp(19px,2vw,23px);line-height:1.3;letter-spacing:-.01em;color:var(--white);
}
.panel h3 a,.panel-title a{color:var(--white);text-decoration:none}
.panel h3 a:hover,.panel-title a:hover{color:var(--lime);text-decoration:none}
.panel p{font-size:16.5px;line-height:1.7}
.panel-num{
  font-family:var(--font-mono);font-size:12px;letter-spacing:.16em;
  color:var(--text-dim);display:block;margin-bottom:20px;
}
.panel-icon{
  width:46px;height:46px;border-radius:0;
  border:1px solid var(--lime-line);background:var(--lime-soft);
  display:flex;align-items:center;justify-content:center;margin-bottom:22px;
}
.panel-icon svg{width:22px;height:22px;stroke:var(--lime);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.panel.blue .panel-icon{border-color:rgba(0,107,255,.42);background:var(--blue-soft)}
.panel.blue .panel-icon svg{stroke:#5A9CFF}

/* ---------- Bild-Textblock ---------- */
.media-split{display:grid;grid-template-columns:1.05fr 1fr;gap:64px;align-items:center}
.media-split.reverse .media-figure{order:-1}
.media-figure{position:relative}
.media-figure img{
  width:100%;border-radius:0;
  clip-path:polygon(0 0,calc(100% - 54px) 0,100% 54px,100% 100%,0 100%);
}
.media-figure::before{
  content:"";position:absolute;top:0;right:0;width:54px;height:54px;z-index:2;
  border-top:3px solid var(--lime);border-right:3px solid var(--lime);
  transform:translate(14px,-14px);
}
.media-caption{
  font-family:var(--font-mono);font-size:11.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--text-dim);margin-top:16px;
}

/* ---------- Bandsektion mit Hintergrundgrafik ---------- */
.band{
  position:relative;overflow:hidden;padding:104px 0;
  background:var(--bg-2) url('/wellen-blau.webp') center/cover no-repeat;
}
.band::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,#05070B 4%,rgba(5,7,11,.9) 42%,rgba(5,7,11,.5) 100%);
}
.band .wrap{position:relative;z-index:2}
.band-lime{background-image:url('/wellen-lime.webp');background-position:left center}
.band-lime::before{background:linear-gradient(270deg,#05070B 4%,rgba(5,7,11,.9) 42%,rgba(5,7,11,.55) 100%)}

/* ---------- Listen ---------- */
ul.check{list-style:none;margin:22px 0 26px}
ul.check li{position:relative;padding-left:30px;margin-bottom:14px;font-size:17px}
ul.check li::before{
  content:"";position:absolute;left:0;top:11px;width:11px;height:11px;
  border-top:2px solid var(--lime);border-right:2px solid var(--lime);
}
ul.plain{list-style:none;margin:20px 0}
ul.plain li{
  padding:14px 0;border-bottom:1px solid var(--line);font-size:17px;
  display:flex;gap:16px;align-items:baseline;
}
ul.plain li:first-child{border-top:1px solid var(--line)}
ul.plain .num{color:var(--white);font-family:var(--font-mono);font-size:12px;letter-spacing:.14em;min-width:36px;flex-shrink:0}
.prose ul:not(.check):not(.plain){margin:20px 0 24px 22px}
.prose ol{margin:20px 0 24px 22px}
.prose li{margin-bottom:10px}
.tags{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px;list-style:none}
.tags li{
  font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  border:1px solid var(--line);padding:9px 14px;color:#D6DAE0;border-radius:0;
}

/* ---------- Prozess ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--line)}
.step{
  padding:34px 30px;border-bottom:1px solid var(--line);
  border-right:1px solid var(--line);position:relative;
}
.step:nth-child(3n){border-right:0}
.step::before{
  content:"";position:absolute;top:-1px;left:0;width:0;height:2px;background:var(--lime);
  transition:width .35s ease;
}
.step:hover::before{width:100%}
.step-num{
  font-family:var(--font-mono);font-size:34px;font-weight:500;color:var(--lime);
  display:block;margin-bottom:14px;line-height:1;
}
.step-title{
  font-family:var(--font-display);font-stretch:112%;font-weight:600;
  font-size:clamp(19px,2vw,23px);line-height:1.3;letter-spacing:-.01em;
  color:var(--white);margin-bottom:10px;
}
.step p{font-size:16px}

/* ---------- Prinzipien / Zweispalter ---------- */
.compare{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--line)}
.compare>div{padding:38px 34px}
.compare>div+div{border-left:1px solid var(--line)}
.compare h3{margin-bottom:18px}
.compare .head{
  font-family:var(--font-mono);font-size:11.5px;letter-spacing:.18em;
  text-transform:uppercase;margin-bottom:16px;
}
.compare .old .head{color:var(--text-dim)}
.compare .new .head{color:var(--lime)}
.compare ul{list-style:none}
.compare li{padding:12px 0;border-bottom:1px solid var(--line);font-size:16.5px}
.compare li:last-child{border-bottom:0}

/* ---------- Tabelle ---------- */
.table-wrap{overflow-x:auto;margin:26px 0}
table{width:100%;border-collapse:collapse;font-size:16.5px}
caption{
  text-align:left;font-family:var(--font-mono);font-size:11.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--text-dim);padding-bottom:14px;
}
th,td{padding:15px 18px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
th{
  color:var(--white);font-family:var(--font-mono);font-size:12px;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;background:var(--bg-2);
}
tbody tr:hover td{background:rgba(255,255,255,.02)}

/* ---------- FAQ ---------- */
.faq-list{max-width:900px}
.faq-item{border:1px solid var(--line);background:var(--bg-2);margin-bottom:14px;border-radius:0}
.faq-item[open]{border-color:var(--lime-line)}
.faq-item summary{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:24px 28px;cursor:pointer;list-style:none;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-q{
  font-family:var(--font-display);font-stretch:112%;font-weight:600;
  font-size:clamp(17px,1.7vw,20px);line-height:1.35;letter-spacing:-.01em;color:var(--white);
}
.faq-item summary .sign{
  position:relative;width:16px;height:16px;flex-shrink:0;
  border-top:2px solid var(--lime);border-right:2px solid var(--lime);
  transform:rotate(45deg);transition:transform .25s ease;
}
.faq-item[open] summary .sign{transform:rotate(-45deg)}
.faq-item p{padding:0 28px 26px;font-size:16.5px;max-width:70ch}

/* ---------- Prose ---------- */
.prose{max-width:none}
.prose h2{margin-top:0}
.prose h3{margin-top:44px}
.prose h4{margin-top:30px}
.prose.narrow{max-width:720px}

/* ---------- Glossar ---------- */
.glossar-nav{
  display:flex;flex-wrap:wrap;gap:8px;list-style:none;
  margin:0 0 48px;padding:22px;border:1px solid var(--line);background:var(--bg-2);
}
.glossar-nav a{
  display:block;font-family:var(--font-mono);font-size:12px;letter-spacing:.12em;
  text-transform:uppercase;color:#D6DAE0;border:1px solid var(--line);
  padding:8px 13px;border-radius:0;
}
.glossar-nav a:hover{border-color:var(--lime);color:var(--lime);text-decoration:none}
.prose dl{margin:0}
.prose dt{
  font-family:var(--font-display);font-stretch:112%;font-weight:600;
  font-size:clamp(18px,2vw,21px);color:var(--white);margin:34px 0 8px;
}
.prose dd{margin:0;font-size:17px}

/* ---------- Formulare ---------- */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.field{display:flex;flex-direction:column;gap:8px}
.field.full{grid-column:1 / -1}
label{
  font-family:var(--font-mono);font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-dim);
}
input,select,textarea{
  font-family:var(--font-body);font-size:16.5px;color:var(--white);
  background:var(--bg-2);border:1px solid var(--line);border-radius:0;
  padding:14px 16px;width:100%;
}
input:hover,select:hover,textarea:hover{border-color:var(--line-strong)}
input:focus,select:focus,textarea:focus{border-color:var(--lime);outline:none}
textarea{min-height:170px;resize:vertical;line-height:1.6}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--lime) 50%),linear-gradient(135deg,var(--lime) 50%,transparent 50%);background-position:calc(100% - 20px) 22px,calc(100% - 14px) 22px;background-size:6px 6px;background-repeat:no-repeat}
.check-row{display:flex;gap:14px;align-items:flex-start;font-size:15.5px;line-height:1.6}
.check-row input[type="checkbox"]{
  appearance:none;-webkit-appearance:none;position:relative;
  width:20px;height:20px;flex-shrink:0;margin-top:3px;cursor:pointer;
  background:var(--bg-2);border:1px solid var(--line-strong);
}
.check-row input[type="checkbox"]:hover{border-color:var(--lime)}
.check-row input[type="checkbox"]:checked{background:var(--lime);border-color:var(--lime)}
.check-row input[type="checkbox"]:checked::after{
  content:"";position:absolute;left:6px;top:2px;width:5px;height:10px;
  border-right:2px solid #05070B;border-bottom:2px solid #05070B;transform:rotate(45deg);
}
.check-row label{
  text-transform:none;letter-spacing:0;font-family:var(--font-body);
  font-size:15.5px;color:var(--text);line-height:1.6;
}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-note{font-size:14px;color:var(--text-dim);margin-top:18px}
.form-status{
  border:1px solid var(--lime-line);background:var(--lime-soft);color:var(--white);
  padding:16px 18px;margin-bottom:26px;border-radius:0;font-size:16px;
}
.form-status.error{border-color:rgba(255,107,107,.5);background:rgba(255,107,107,.10)}

/* ---------- Kontaktdaten ---------- */
.contact-list{list-style:none;margin:0}
.contact-list li{padding:18px 0;border-bottom:1px solid var(--line)}
.contact-list li:first-child{border-top:1px solid var(--line)}
.contact-list span{
  display:block;font-family:var(--font-mono);font-size:11.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--text-dim);margin-bottom:6px;
}
.contact-list a{color:var(--white);font-size:19px}
.contact-list a:hover{color:var(--lime);text-decoration:none}

/* ---------- CTA ohne Bild ---------- */
.cta-band{position:relative;overflow:hidden;background:var(--bg-2);border-top:1px solid var(--line)}
.cta-band::before{
  content:"";position:absolute;left:50%;top:-140px;transform:translateX(-50%);
  width:900px;height:340px;pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(212,255,0,.16) 0%,rgba(0,107,255,.10) 45%,transparent 72%);
}
.cta-inner{position:relative;z-index:2;max-width:var(--maxw);margin:0 auto;padding:96px 24px}
.cta-inner h2{max-width:18ch;margin-bottom:24px}
.cta-inner p{max-width:56ch;margin-bottom:34px}
.cta-actions{display:flex;gap:16px;flex-wrap:wrap;align-items:center}
.cta-direct{
  font-family:var(--font-mono);font-size:13px;letter-spacing:.1em;color:var(--text-dim);
  margin-top:26px;
}
.cta-direct a{color:var(--white)}
.cta-direct a:hover{color:var(--lime)}

/* ---------- CTA mit Bild ---------- */
.cta-image{
  position:relative;overflow:hidden;border-top:1px solid var(--line);
  background:#05070B url('/cta-footer.webp') right center/cover no-repeat;
}
.cta-image::before{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(90deg,#05070B 0%,#05070B 26%,rgba(5,7,11,.94) 40%,rgba(5,7,11,.62) 60%,rgba(5,7,11,.28) 82%,rgba(5,7,11,.12) 100%),
    linear-gradient(180deg,rgba(5,7,11,.55) 0%,rgba(5,7,11,0) 40%,rgba(5,7,11,.45) 100%);
}
.cta-image::after{
  content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:var(--grad-accent);opacity:.7;
}
.cta-image .cta-inner{max-width:var(--maxw)}
.cta-image .cta-inner>*{max-width:640px}

/* ---------- Cookie-Banner ---------- */
.cookie-banner{
  display:none;position:fixed;left:20px;right:20px;bottom:20px;z-index:120;
  max-width:640px;margin:0 auto;background:var(--bg-2);
  border:1px solid var(--line-strong);border-radius:0;
  padding:24px 26px;box-shadow:var(--shadow-panel);
}
.cookie-banner.show{display:block}
.cookie-banner p{font-size:15px;line-height:1.6;margin-bottom:18px}
.cookie-banner a{color:var(--lime)}
.cookie-actions{display:flex;gap:12px;flex-wrap:wrap}
.cookie-actions .btn{padding:15px 22px;font-size:12px}

/* ---------- Footer ---------- */
.site-footer{position:relative;background:var(--bg-2);padding:88px 0 36px;font-size:16px}
.site-footer::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;background:var(--grad-accent);opacity:.75;
}
.site-footer::after{
  content:"";position:absolute;top:1px;left:8%;right:8%;height:60px;pointer-events:none;
  background:radial-gradient(ellipse 55% 100% at 50% 0%,rgba(212,255,0,.16) 0%,rgba(0,107,255,.08) 50%,transparent 76%);
}
.footer-grid{
  position:relative;z-index:2;
  display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px;
  max-width:var(--maxw);margin:0 auto;padding:0 24px 60px;
}
.site-footer .logo img{height:20px;width:auto;opacity:.9}
.site-footer .logo:hover img{opacity:1}
.footer-claim{margin-top:18px;color:var(--lime);font-family:var(--font-mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase}
.footer-about{margin-top:18px;max-width:340px;color:var(--text-dim);font-size:15.5px}
.footer-head{
  color:var(--white);font-family:var(--font-mono);font-size:11.5px;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;margin-bottom:20px;
}
.footer-grid ul{list-style:none}
.footer-grid li{margin-bottom:12px}
.footer-grid a{color:var(--text)}
.footer-grid a:hover{color:var(--lime);text-decoration:none}
.footer-bottom{
  position:relative;z-index:2;
  max-width:var(--maxw);margin:0 auto;padding:26px 24px 0;
  border-top:1px solid var(--line);
  display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;
  color:var(--text-dim);font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;
}
.footer-bottom a{color:var(--text)}
.footer-bottom a:hover{color:var(--lime)}


/* ---------- Helle Sektion (invertiertes Farbschema) ---------- */
.light{
  --bg-2:#FFFFFF;
  --bg-3:#F1F4F7;
  --white:#05070B;
  --text:#414951;
  --text-dim:#5B646D;
  --line:rgba(5,7,11,.14);
  --line-strong:rgba(5,7,11,.30);
  --lime-line:rgba(94,122,0,.55);
  --lime-soft:rgba(199,239,23,.30);
  background:#FFFFFF;
  color:#414951;
}
.light h1,.light h2,.light h3,.light h4,.light .step-title,.light strong,.light dt{color:#05070B}
.light .eyebrow{color:#4A5560}
.light .eyebrow::before,
.light ul.check li::before,
.light .panel::after{border-color:#5E7A00;opacity:1}
.light .eyebrow.blue{color:#0A4FA8}
.light .eyebrow.blue::before{border-color:#0A4FA8}
.light .lead,.light .section-head p{color:#414951}
.light ul.plain .num{color:#05070B}
.light .panel{background:#F7F9FB;border-color:rgba(5,7,11,.12)}
.light .panel:hover{background:#F1F4F7;border-color:rgba(5,7,11,.24)}
.light .panel-icon{border-color:rgba(94,122,0,.45);background:rgba(199,239,23,.25)}
.light .panel-icon svg{stroke:#4C6600}
.light .panel.blue .panel-icon{border-color:rgba(0,107,255,.35);background:rgba(0,107,255,.09)}
.light .panel.blue .panel-icon svg{stroke:#0A4FA8}
.light main p a,.light main li a,.light main dd a,.light p a,.light li a{
  color:#0B4FB5;text-decoration-color:rgba(11,79,181,.55);
}
.light main p a:hover,.light main li a:hover,.light p a:hover,.light li a:hover{color:#05070B}
.light .btn-secondary{color:#05070B;border-color:rgba(5,7,11,.32)}
.light .btn-secondary:hover{border-color:#05070B;color:#05070B}
.light input,.light select,.light textarea{background:#FFFFFF;color:#05070B;border-color:rgba(5,7,11,.22)}
.light label{color:#5B646D}
.light .check-row label{color:#414951}
.light .faq-item{background:#F7F9FB;border-color:rgba(5,7,11,.14)}
.light .faq-item[open]{border-color:rgba(94,122,0,.5)}
.light .faq-item summary .sign{border-color:#5E7A00}
.light .faq-q,.light .panel-title,.light .step-title{color:#05070B}
.light .steps,.light .step{border-color:rgba(5,7,11,.14)}
.light .step::before{background:#5E7A00}
.light table th{background:#F1F4F7;color:#05070B}
.light caption{color:#5B646D}
.light .media-figure::before{border-color:#5E7A00}
.light .contact-list a{color:#05070B}
.light .form-status{background:rgba(199,239,23,.25);border-color:rgba(94,122,0,.5);color:#05070B}

/* ---------- Signalfläche in Neon Lime ---------- */
.band-signal{
  --white:#05070B;
  --text:#1B2410;
  --text-dim:#3B4A1E;
  --line:rgba(5,7,11,.22);
  --line-strong:rgba(5,7,11,.42);
  background:#C7EF17;
  color:#1B2410;
  padding:100px 0;
}
.band-signal h2,.band-signal h3,.band-signal strong{color:#05070B}
.band-signal .eyebrow{color:#05070B}
.band-signal .eyebrow::before{border-color:#05070B}
.band-signal ul.check li::before{border-color:#05070B}
.band-signal .tags li{color:#05070B;border-color:rgba(5,7,11,.3)}
.band-signal a{color:#05070B;text-decoration-color:rgba(5,7,11,.45)}
.band-signal a:hover{color:#05070B;text-decoration-color:#05070B}

/* Karten behalten auf der Lime-Fläche ihr dunkles Schema */
.band-signal .panel{
  --white:#FFFFFF;
  --text:#A9AFB8;
  --text-dim:#7B838E;
  --line:rgba(255,255,255,.10);
  --line-strong:rgba(255,255,255,.22);
  background:#05070B;
  color:#A9AFB8;
  border-color:rgba(5,7,11,.5);
}
.band-signal .panel:hover{background:#0C1119;border-color:rgba(5,7,11,.75)}
.band-signal .panel h3,.band-signal .panel-title{color:#FFFFFF}
.band-signal .faq-item{
  --white:#FFFFFF;--text:#A9AFB8;--line:rgba(255,255,255,.10);
  background:#05070B;border-color:rgba(5,7,11,.5);color:#A9AFB8;
}
.band-signal .faq-item[open]{border-color:rgba(5,7,11,.8)}
.band-signal .faq-q{color:#FFFFFF}
.band-signal .media-figure::before{border-color:#05070B}
.band-signal .media-caption{color:#3B4A1E}
.band-signal .steps,.band-signal .step{border-color:rgba(5,7,11,.28)}
.band-signal .step::before{background:#05070B}
.band-signal .step-title{color:#05070B}
.band-signal .step p{color:#1B2410}
.band-signal .step-num{color:#05070B}
.band-signal table th{background:rgba(5,7,11,.10);color:#05070B}
.band-signal th,.band-signal td{border-color:rgba(5,7,11,.2)}
.band-signal .panel h3 a{color:#FFFFFF;text-decoration:none}
.band-signal .panel h3 a:hover{color:var(--lime)}
.band-signal .panel p a{color:#FFFFFF;text-decoration-color:var(--lime-line)}
.band-signal .panel p a:hover{color:var(--lime);text-decoration-color:currentColor}

/* Sekundärer Button auf Lime: dunkle Kontur, gefüllter Hover */
.band-signal .btn-secondary{
  background:transparent;color:#05070B;border:1px solid rgba(5,7,11,.45);
}
.band-signal .btn-secondary:hover{
  background:#05070B;color:#C7EF17;border-color:#05070B;
}

/* ---------- Sektion mit Markenverlauf ---------- */
.section.gradient{
  position:relative;overflow:hidden;
  background:linear-gradient(115deg,#D4FF00 0%,#7BF7A0 30%,#00C2FF 62%,#006BFF 100%);
}
.section.gradient::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(5,7,11,.80) 0%,rgba(5,7,11,.90) 100%);
}
.section.gradient::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    var(--grad-accent) top left/100% 3px no-repeat,
    var(--grad-accent) bottom left/100% 3px no-repeat;
}
.section.gradient .wrap{position:relative;z-index:2}

/* ---------- Responsive ---------- */
@media (max-width:1080px){
  .servicebar ul{grid-template-columns:repeat(3,1fr)}
  .servicebar li:nth-child(3n){border-right:0}
  .servicebar li:nth-child(4),.servicebar li:nth-child(5),.servicebar li:nth-child(6){border-top:1px solid var(--line)}
  .media-split{gap:44px}
  .split-head{gap:40px}
}
@media (max-width:1000px){
  .nav-links,.nav-cta{display:none}
  .burger{display:block}
  .nav-links.open{
    display:flex;flex-direction:column;align-items:stretch;gap:0;
    position:absolute;top:var(--header-h);left:0;right:0;
    background:var(--bg-2);border-bottom:1px solid var(--line);
    padding:14px 24px 26px;max-height:calc(100vh - var(--header-h));overflow-y:auto;
  }
  .nav-links.open>li{border-bottom:1px solid var(--line)}
  .nav-links.open a{display:block;padding:15px 0;font-size:14px;border-bottom:0}
  .nav-links.open .has-sub{padding:0}
  .nav-links.open .subnav{
    display:block;position:static;transform:none;width:auto;columns:1;
    background:transparent;border:0;box-shadow:none;padding:0 0 10px 16px;
  }
  .nav-links.open .subnav a{padding:11px 0;font-size:15px;color:var(--text)}
  .nav-links.open .subnav .sub-highlight{margin-top:4px}
  .nav-links.open .caret{float:right;margin-top:8px}
}
@media (max-width:900px){
  .section{padding:76px 0}
  .band{padding:76px 0}
  .grid-3{grid-template-columns:1fr 1fr}
  .media-split{grid-template-columns:1fr;gap:36px}
  .media-split.reverse .media-figure{order:0}
  .split-head{grid-template-columns:1fr;gap:28px}
  .split-head .sticky{position:static}
  .steps{grid-template-columns:1fr 1fr}
  .step:nth-child(3n){border-right:1px solid var(--line)}
  .step:nth-child(2n){border-right:0}
  .footer-grid{grid-template-columns:1fr 1fr;gap:38px}
  .hero-inner{padding:76px 24px 68px}
  .cta-inner{padding:76px 24px}
}
@media (max-width:900px){
  .hero-media{left:0}
  .hero-media::after{
    background:
      linear-gradient(90deg,#05070B 0%,rgba(5,7,11,.86) 34%,rgba(5,7,11,.45) 100%),
      linear-gradient(180deg,rgba(5,7,11,.7) 0%,rgba(5,7,11,.2) 30%,rgba(5,7,11,.6) 78%,#05070B 100%);
  }
  .band-signal{padding:72px 0}
  .cta-image{background-position:72% center}
  .cta-image::before{
    background:
      linear-gradient(90deg,#05070B 0%,rgba(5,7,11,.94) 45%,rgba(5,7,11,.72) 100%),
      linear-gradient(180deg,rgba(5,7,11,.6) 0%,rgba(5,7,11,.2) 40%,rgba(5,7,11,.7) 100%);
  }
}
@media (max-width:680px){
  .grid-3,.grid-2{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}
  .compare{grid-template-columns:1fr}
  .compare>div+div{border-left:0;border-top:1px solid var(--line)}
  .hero-media img{object-position:72% center}
  .hero-grid{background-size:calc(100% / 3) 100%}
  .media-figure img{clip-path:polygon(0 0,calc(100% - 38px) 0,100% 38px,100% 100%,0 100%)}
  .media-figure::before{width:38px;height:38px;transform:translate(8px,-8px)}
}
@media (max-width:560px){
  body{font-size:17px}
  .servicebar ul{grid-template-columns:1fr 1fr}
  .servicebar li:nth-child(3n){border-right:1px solid var(--line)}
  .servicebar li:nth-child(2n){border-right:0}
  .servicebar li:nth-child(3),.servicebar li:nth-child(4),
  .servicebar li:nth-child(5),.servicebar li:nth-child(6){border-top:1px solid var(--line)}
  .servicebar a{padding:20px 16px}
  .steps{grid-template-columns:1fr}
  .step{border-right:0!important}
  .footer-grid{grid-template-columns:1fr;gap:34px}
  .btn{width:100%;justify-content:center}
  .hero-actions,.cta-actions{flex-direction:column;align-items:stretch}
  .panel{padding:28px 24px}
  .faq-item summary{padding:20px 20px}
  .faq-item p{padding:0 20px 22px}
  .cookie-actions .btn{width:100%}
}