* { margin:0; padding:0; box-sizing:border-box; }
:root {
  --green: #4a7c3f;
  --green-light: #5e9e52;
  --text: #5a5a5a;
  --muted: #7a8c76;
  --border: #dde3da;
  --border2: #c8d4c4;
  --bg: #f7f8f6;
  --bg2: #eef4ec;
  --white: #ffffff;
  --dark-accent: #2c3d29;
}
html { scroll-behavior:smooth; font-size:clamp(10px, 1vw, 16px); }
body { font-family:'Plus Jakarta Sans',sans-serif; background:var(--white); color:#5a5a5a; overflow-x:hidden; }

/* ── NAV ── */
nav {
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 60px;
  background:rgba(255,255,255,0.97);
  border-bottom:2px solid var(--green);
}
.nav-logo img { height:40px; object-fit:contain; }
.nav-logo svg { height:26px !important; width:auto !important; display:block; max-width:none; }
footer .footer-grid svg { width:240px !important; height:auto !important; display:block; max-width:240px; margin:0; }
footer .footer-grid > div:first-child { display:flex; flex-direction:column; align-items:flex-start; }
footer .footer-tagline { width:240px; }
.nav-logo-fb {
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:22px; font-weight:800; letter-spacing:3px; text-transform:uppercase;
  color:var(--dark-accent);
}
.nav-links { display:flex; gap:32px; list-style:none; }
.nav-links a {
  font-size:11px; font-weight:700; letter-spacing:2px; text-transform:uppercase;
  color:var(--muted); text-decoration:none; transition:color 0.2s;
}
.nav-links a:hover { color:var(--green); }
.btn-green {
  padding:10px 24px; background:var(--green); color:white; border:none; cursor:pointer;
  font-family:'Plus Jakarta Sans',sans-serif; font-size:13px; font-weight:700;
  letter-spacing:2px; text-transform:uppercase; transition:background 0.2s;
}
.btn-green:hover { background:var(--green-light); }

/* ── HERO ── */
.hero-text-sec {
  min-height:60vh; padding-top:68px;
  background:var(--white);
}
.hero-viewer-sec {
  background:var(--white);
}
.hero-left {
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  padding:80px 56px 80px 56px; text-align:center;
  max-width:860px; margin:0 auto;
}
.hero-eyebrow {
  display:inline-flex; align-items:baseline; gap:10px; margin-bottom:20px;
  font-family:'Plus Jakarta Sans',sans-serif; font-size:11px; font-weight:700;
  letter-spacing:4px; text-transform:uppercase; color:var(--green);
}
.hero-eyebrow::before { content:''; width:22px; height:2px; background:var(--green); align-self:center; }
.hero-h1 {
  font-family:'Plus Jakarta Sans',sans-serif; font-size:74px; font-weight:900;
  line-height:0.92; text-transform:uppercase; color:#5a5a5a; margin-bottom:20px;
}
.hero-h1 em { font-style:normal; color:var(--green); display:block; }
.hero-sub {
  font-size:15px; font-weight:400; color:var(--muted);
  line-height:1.75; max-width:420px; margin-bottom:34px;
}
.hero-btns { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:48px; }
.btn-outline {
  padding:12px 28px; background:transparent; border:1px solid var(--border2);
  color:#5a5a5a; cursor:pointer;
  font-family:'Plus Jakarta Sans',sans-serif; font-size:13px; font-weight:700;
  letter-spacing:2px; text-transform:uppercase; transition:all 0.2s;
}
.btn-outline:hover { border-color:var(--green); color:var(--green); }
.hero-stats {
  display:grid; grid-template-columns:repeat(4,1fr); gap:0;
  border-top:1px solid var(--border); padding-top:28px;
}
.stat { padding-right:20px; }
.stat-val {
  font-family:'Plus Jakarta Sans',sans-serif; font-size:32px; font-weight:900;
  color:var(--green); display:block; line-height:1;
}
.stat-lbl { font-size:10px; color:var(--muted); letter-spacing:1px; text-transform:uppercase; margin-top:3px; }
.hero-right {
  display:flex; flex-direction:column; justify-content:center;
  padding:0; background:var(--bg);
}

/* ── 3D VIEWER ── */
.viewer-wrap {
  width:100%; height:560px; border-radius:0; overflow:hidden;
  border:none; background:#131713;
  cursor:grab; position:relative;
}
.viewer-wrap:active { cursor:grabbing; }
canvas { display:block; width:100%; height:100%; }
.v-tl { position:absolute; top:12px; left:12px; display:flex; gap:6px; pointer-events:none; }
.vtag {
  font-size:10px; letter-spacing:0.07em; text-transform:uppercase;
  padding:3px 9px; border-radius:3px; font-weight:500;
}
.vtag-a { background:#ffffff0a; color:#ffffff55; border:0.5px solid #ffffff11; }
.vtag-b { background:#4a7c3f15; color:#7ab870; border:0.5px solid #4a7c3f55; }
.v-hint { position:absolute; bottom:12px; left:50%; transform:translateX(-50%); font-size:11px; color:#ffffff33; pointer-events:none; white-space:nowrap; transition:opacity 0.8s; }
.v-auto { position:absolute; top:10px; right:10px; background:#ffffff0d; border:0.5px solid #ffffff22; border-radius:3px; padding:4px 10px; font-size:11px; color:#ffffff66; cursor:pointer; font-family:inherit; }
.v-auto.active { background:#4a7c3f22; border-color:#4a7c3f66; color:#7ab870; }
.v-loading { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; background:#131713; transition:opacity 0.5s; }
.v-ring { width:34px; height:34px; border:2px solid #2a332a; border-top-color:#4a7c3f; border-radius:50%; animation:spin 0.9s linear infinite; margin-bottom:10px; }
.v-txt { font-size:11px; color:#7ab870; letter-spacing:0.08em; text-transform:uppercase; }
@keyframes spin { to { transform:rotate(360deg); } }
.viewer-ctrls { display:flex; gap:6px; margin-top:10px; justify-content:center; }
.vctrl {
  background:var(--white); border:1px solid var(--border2);
  color:var(--muted); padding:6px 16px;
  font-size:10px; letter-spacing:1.5px; text-transform:uppercase;
  cursor:pointer; font-family:inherit; transition:all 0.2s;
}
.vctrl:hover { background:var(--bg2); border-color:var(--green); color:var(--green); }

/* ── BADGES STRIP ── */
.badges {
  background:var(--dark-accent);
  display:flex; justify-content:center; gap:48px; padding:16px 60px;
  flex-wrap:wrap;
}
.badge-item {
  display:flex; align-items:center; gap:8px;
  font-family:'Plus Jakarta Sans',sans-serif; font-size:11px; font-weight:700;
  letter-spacing:2px; text-transform:uppercase; color:rgba(255,255,255,0.6);
}
.badge-dot { width:5px; height:5px; border-radius:50%; background:#8dc87e; flex-shrink:0; }

/* ── SHARED SECTION STYLES ── */
.sec { padding:88px 80px; }
.sec.bg-light { background:var(--bg); }
.sec-tag {
  font-family:'Plus Jakarta Sans',sans-serif; font-size:11px; font-weight:700;
  letter-spacing:4px; text-transform:uppercase; color:var(--green); margin-bottom:10px;
  text-align:center;
}
.sec-h2 {
  font-family:'Plus Jakarta Sans',sans-serif; font-size:50px; font-weight:800;
  line-height:1.0; text-transform:uppercase; color:#5a5a5a; margin-bottom:14px;
  text-align:center;
}
.sec-h2 em { font-style:normal; color:var(--green); }
.sec-bar { width:48px; height:3px; background:var(--green); margin:0 auto 34px; }
.sec-lead { font-size:15px; color:var(--muted); line-height:1.75; max-width:680px; margin-bottom:34px; }

/* ── INTRO ── */
.intro { padding:80px 160px; text-align:center; }
.intro .sec-bar { margin:0 auto 24px; }
.intro .sec-lead { margin:0 auto; text-align:center; }

/* ── VIDEO ── */
.video-sec { background:var(--bg); padding:88px 80px; }
.video-wrap { width:100%; max-width:880px; margin:0 auto; border-radius:4px; overflow:hidden; border:1px solid var(--border2); box-shadow:0 8px 40px rgba(0,0,0,0.1); }
.video-wrap video { width:100%; display:block; }

/* ── 3 STEPS ── */
.steps-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:2px; margin-top:36px; }
.step-card { background:var(--white); border:1px solid var(--border); border-top:3px solid var(--green); padding:36px 28px; position:relative; }
.step-bg { font-family:'Plus Jakarta Sans',sans-serif; font-size:72px; font-weight:900; color:rgba(0,0,0,0.04); line-height:1; position:absolute; bottom:16px; right:20px; }
.step-num { font-family:'Plus Jakarta Sans',sans-serif; font-size:11px; font-weight:700; letter-spacing:3px; text-transform:uppercase; color:var(--green); margin-bottom:14px; }
.step-title { font-family:'Plus Jakarta Sans',sans-serif; font-size:20px; font-weight:800; text-transform:uppercase; color:#5a5a5a; margin-bottom:10px; }
.step-text { font-size:13px; color:var(--muted); line-height:1.7; }

/* ── HERAUSFORDERUNG ── */
.ch-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.ch-card { background:var(--white); border:1px solid var(--border); border-left:3px solid var(--border2); padding:28px 24px; transition:border-left-color 0.2s; }
.ch-card:hover { border-left-color:var(--green); }
.ch-num { font-family:'Plus Jakarta Sans',sans-serif; font-size:40px; font-weight:900; color:rgba(0,0,0,0.05); line-height:1; margin-bottom:8px; }
.ch-title { font-family:'Plus Jakarta Sans',sans-serif; font-size:16px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:#5a5a5a; margin-bottom:7px; }
.ch-text { font-size:13px; color:var(--muted); line-height:1.7; }
.ch-badge { display:inline-block; margin-top:10px; padding:3px 10px; background:var(--bg2); border:1px solid var(--border2); font-family:'Plus Jakarta Sans',sans-serif; font-size:10px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:var(--green); }

/* ── VORTEILE ── */
.feat-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.feat-card { border:1px solid var(--border); padding:28px 24px; transition:border-color 0.2s, box-shadow 0.2s; }
.feat-card:hover { border-color:var(--green); box-shadow:0 4px 16px rgba(74,124,63,0.08); }
.feat-icon { width:40px; height:40px; background:var(--green); color:white; display:flex; align-items:center; justify-content:center; font-family:'Plus Jakarta Sans',sans-serif; font-size:14px; font-weight:900; margin-bottom:14px; letter-spacing:0; }
.feat-title { font-family:'Plus Jakarta Sans',sans-serif; font-size:14px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:#5a5a5a; margin-bottom:7px; }
.feat-text { font-size:12px; color:var(--muted); line-height:1.7; }

/* ── ZERTIFIZIERUNG ── */
.cert-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:2px; margin-top:34px; }
.cert-box { background:var(--white); padding:28px 20px; text-align:center; border-top:3px solid var(--green); }
.cert-val { font-family:'Plus Jakarta Sans',sans-serif; font-size:17px; font-weight:800; text-transform:uppercase; color:#5a5a5a; margin-bottom:5px; }
.cert-lbl { font-size:10px; color:var(--muted); letter-spacing:1px; text-transform:uppercase; }

/* ── ANWENDUNGEN ── */
.app-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:34px; }
.app-card { background:var(--white); border:1px solid var(--border); border-top:2px solid var(--green); padding:24px 20px; }
.app-title { font-family:'Plus Jakarta Sans',sans-serif; font-size:14px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:#5a5a5a; margin-bottom:6px; }
.app-text { font-size:12px; color:var(--muted); line-height:1.6; }

/* ── TEAM ── */
.team-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; max-width:800px; margin-top:34px; }
.team-card { background:var(--white); border:1px solid var(--border); border-top:2px solid var(--green); padding:28px 24px; }
.team-role { font-family:'Plus Jakarta Sans',sans-serif; font-size:10px; font-weight:700; letter-spacing:3px; text-transform:uppercase; color:var(--green); margin-bottom:5px; }
.team-name { font-family:'Plus Jakarta Sans',sans-serif; font-size:24px; font-weight:800; text-transform:uppercase; color:#5a5a5a; margin-bottom:10px; }
.team-quote { font-size:13px; color:var(--muted); line-height:1.7; font-style:italic; }
.team-email { font-size:12px; color:var(--green); margin-top:12px; }

/* ── CTA ── */
.cta-sec { background:var(--green); padding:68px 80px; display:flex; align-items:center; justify-content:space-between; gap:40px; }
.cta-title { font-family:'Plus Jakarta Sans',sans-serif; font-size:44px; font-weight:900; text-transform:uppercase; color:white; line-height:1; }
.cta-sub { font-size:14px; color:rgba(255,255,255,0.75); margin-top:8px; }
.btn-white { padding:14px 38px; background:white; color:var(--green); border:none; cursor:pointer; font-family:'Plus Jakarta Sans',sans-serif; font-size:14px; font-weight:800; letter-spacing:2px; text-transform:uppercase; white-space:nowrap; flex-shrink:0; transition:opacity 0.2s; }
.btn-white:hover { opacity:0.9; }

/* ── FOOTER ── */
footer { background:var(--dark-accent); padding:52px 80px 32px; border-top:3px solid var(--green); }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr; gap:52px; margin-bottom:32px; }
.footer-brand { font-family:'Plus Jakarta Sans',sans-serif; font-size:20px; font-weight:800; letter-spacing:3px; text-transform:uppercase; color:white; margin-bottom:7px; }
.footer-tagline { font-size:11px; color:rgba(255,255,255,0.85); letter-spacing:1px; text-transform:uppercase; }
.footer-col-h { font-family:'Plus Jakarta Sans',sans-serif; font-size:10px; font-weight:700; letter-spacing:3px; text-transform:uppercase; color:#ffffff; margin-bottom:14px; }
.footer-col p { font-size:12px; color:rgba(255,255,255,0.85); line-height:2.2; }
.footer-bottom { display:flex; align-items:center; justify-content:space-between; padding-top:20px; border-top:1px solid rgba(255,255,255,0.07); font-size:11px; color:rgba(255,255,255,0.6); flex-wrap:wrap; gap:12px; }
.footer-certs { display:flex; gap:10px; }
.f-cert { padding:3px 9px; background:rgba(74,124,63,0.15); border:0.5px solid rgba(74,124,63,0.4); font-family:'Plus Jakarta Sans',sans-serif; font-size:9px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:#8dc87e; }
.footer-legal-links { display:flex; gap:20px; }
.footer-legal-links a { font-size:11px; color:rgba(255,255,255,0.35); text-decoration:none; letter-spacing:0.5px; transition:color 0.2s; }
.footer-legal-links a:hover { color:#4a7c3f; }

@media (max-width:900px) {
  .hero-text-sec { min-height:auto; }
  nav { padding:12px 20px; }
  .nav-links { display:none; }
  .sec, .video-sec { padding:44px 20px; }
  .hero-left { padding:44px 20px; text-align:center; align-items:center; }
  .hero-right { padding:0; }
  .hero-h1 { font-size:clamp(32px, 10vw, 52px); }
  .sec-h2 { font-size:clamp(28px, 9vw, 44px); }
  .cta-title { font-size:clamp(26px, 8vw, 38px); }
  .intro { padding:44px 20px; }
  .intro-h2 { font-size:clamp(26px, 8vw, 38px); }
  .steps-grid, .ch-grid, .feat-grid, .cert-grid, .app-grid, .team-grid { grid-template-columns:1fr; }
  .cta-sec { flex-direction:column; padding:44px 20px; }
  .footer-grid { grid-template-columns:1fr; }
  footer { padding:36px 20px; }
  .badges { gap:12px; padding:12px 20px; flex-wrap:wrap; }
  .hero-stats { grid-template-columns:1fr 1fr; gap:16px; }
  .stat-val { font-size:28px; }
  .hero-btns { flex-direction:column; width:100%; }
  .btn-green, .btn-outline { width:100%; text-align:center; }
  .viewer-wrap { height:360px; }
  .sec-lead { font-size:14px; }
}

@media (max-width:480px) {
  .hero-h1 { font-size:clamp(26px, 9vw, 38px); }
  .sec-h2 { font-size:clamp(24px, 8vw, 32px); }
}

  @media (min-width: 1400px) {
    body { zoom: calc(100vw / 1400); }
  }