/* ═══════════════════════════════════════════════════════════
   GRENTIS GMBH — Shared Design System
   ═══════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&display=swap');

/* ── Variables ─────────────────────────────────────────────── */
:root {
  --or:     #fd4000;
  --or-dim: rgba(253,64,0,.1);
  --or-mid: rgba(253,64,0,.2);
  --or-glow:rgba(253,64,0,.32);
  --bg:     #080808;
  --s1:     #111111;
  --s2:     #191919;
  --s3:     #222222;
  --wh:     #ffffff;
  --mu:     rgba(255,255,255,.56);
  --dm:     rgba(255,255,255,.3);
  --bd:     rgba(255,255,255,.07);
  --bd2:    rgba(255,255,255,.12);
  --nav-h:  72px;
}

/* ── Reset ──────────────────────────────────────────────────── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; overflow-x:hidden; }
body {
  font-family:'Plus Jakarta Sans',sans-serif;
  background:var(--bg); color:var(--wh);
  overflow-x:hidden; line-height:1.6;
}
img { max-width:100%; display:block; }
a { text-decoration:none; color:inherit; }
::-webkit-scrollbar { width:3px; }
::-webkit-scrollbar-track { background:var(--bg); }
::-webkit-scrollbar-thumb { background:var(--or); border-radius:2px; }

/* ── Nav ────────────────────────────────────────────────────── */
#nav {
  position:fixed; top:0; left:0; right:0; z-index:500;
  height:var(--nav-h); padding:0 60px;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  transition:background .4s, border-color .4s, backdrop-filter .4s;
  border-bottom:1px solid transparent;
}
#nav.scrolled {
  background:rgba(8,8,8,.9); backdrop-filter:blur(24px);
  border-color:var(--bd);
}
.nav-logo {
  display:flex; align-items:center; gap:10px; flex-shrink:0;
}
.nav-logo img { height:56px; width:auto; }
.nav-logo-img { height:56px; width:auto; }
.nav-links {
  display:flex; align-items:center; gap:2px;
  list-style:none; flex:1; justify-content:center;
}
.nav-links > li > a {
  display:flex; align-items:center; gap:5px;
  color:var(--mu); font-size:.875rem; font-weight:500;
  padding:8px 13px; border-radius:8px;
  transition:color .2s, background .2s;
  white-space:nowrap;
}
.nav-links > li > a:hover { color:#fff; background:rgba(255,255,255,.05); }
.nav-links > li > a.active { color:var(--or); }
.nav-links > li > a.parent-active { color:#fff; }

/* Dropdown */
.has-drop { position:relative; }
.drop {
  position:absolute; top:calc(100% + 8px); left:50%;
  transform:translateX(-50%) translateY(-6px);
  background:rgba(12,12,12,.98); backdrop-filter:blur(28px);
  border:1px solid var(--bd); border-radius:14px; padding:6px;
  min-width:290px;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .22s, transform .22s, visibility .22s;
  z-index:600;
}
/* Invisible bridge fills the gap between nav link and dropdown */
.drop::before {
  content:''; position:absolute;
  top:-14px; left:0; right:0; height:14px;
}
.has-drop:hover .drop {
  opacity:1; visibility:visible; pointer-events:all;
  transform:translateX(-50%) translateY(0);
}
.drop a {
  display:flex; align-items:center; gap:10px;
  padding:10px 14px; border-radius:9px;
  color:var(--mu); font-size:.855rem; font-weight:500;
  transition:background .15s, color .15s;
}
.drop a:hover { background:rgba(255,255,255,.07); color:#fff; }
.drop a.active { color:var(--or); }
.drop-icon {
  width:32px; height:32px; border-radius:8px;
  background:var(--or-dim); border:1px solid var(--or-mid);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
  transition:background .18s, border-color .18s, transform .22s cubic-bezier(.34,1.56,.64,1);
}
.drop-icon svg { display:block; transition:transform .22s cubic-bezier(.34,1.56,.64,1); }
.drop a:hover .drop-icon { background:var(--or-mid); border-color:rgba(253,64,0,.4); transform:scale(1.08); }
.drop a:hover .drop-icon svg { transform:scale(1.15); }
.drop-divider { height:1px; background:var(--bd); margin:5px 0; }
.chev {
  width:13px; height:13px; stroke:currentColor;
  stroke-width:2; fill:none; flex-shrink:0;
  transition:transform .22s;
}
.has-drop:hover .chev { transform:rotate(180deg); }

/* Nav CTA button */
.btn-nav {
  background:var(--or); color:#fff;
  padding:10px 20px; border-radius:8px;
  font-size:.855rem; font-weight:700; font-family:inherit;
  border:none; cursor:pointer; white-space:nowrap;
  display:inline-flex; align-items:center; gap:7px;
  transition:transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s;
  flex-shrink:0;
}
.btn-nav:hover { transform:translateY(-2px); box-shadow:0 8px 28px var(--or-glow); }
.btn-nav:active { transform:translateY(0); }
.btn-nav:focus-visible { outline:2px solid var(--or); outline-offset:3px; }

/* ── Buttons ────────────────────────────────────────────────── */
.btn-primary {
  background:var(--or); color:#fff;
  padding:15px 34px; border-radius:10px;
  font-size:.935rem; font-weight:700; font-family:inherit;
  border:none; cursor:pointer; display:inline-flex; align-items:center; gap:8px;
  transition:transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s;
}
.btn-primary:hover { transform:translateY(-3px); box-shadow:0 12px 40px var(--or-glow); }
.btn-primary:active { transform:translateY(-1px); }
.btn-primary:focus-visible { outline:2px solid var(--or); outline-offset:4px; }

.btn-outline {
  background:transparent; color:#fff;
  padding:15px 34px; border-radius:10px;
  font-size:.935rem; font-weight:600; font-family:inherit;
  border:1px solid var(--bd); cursor:pointer;
  display:inline-flex; align-items:center; gap:8px;
  transition:background .2s, border-color .2s, transform .25s cubic-bezier(.34,1.56,.64,1);
}
.btn-outline:hover { background:rgba(255,255,255,.05); border-color:var(--bd2); transform:translateY(-2px); }
.btn-outline:focus-visible { outline:2px solid #fff; outline-offset:4px; }

.btn-white {
  background:#fff; color:var(--or);
  padding:15px 34px; border-radius:10px;
  font-size:.935rem; font-weight:800; font-family:inherit;
  border:none; cursor:pointer; display:inline-flex; align-items:center; gap:8px;
  transition:transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s;
}
.btn-white:hover { transform:translateY(-3px); box-shadow:0 12px 36px rgba(0,0,0,.22); }
.btn-white:focus-visible { outline:2px solid #fff; outline-offset:4px; }

/* ── Section helpers ─────────────────────────────────────────── */
.wrap { max-width:1280px; margin:0 auto; padding:0 60px; }
.section { padding:80px 60px; }
.section-sm { padding:70px 60px; }

.section-label {
  display:inline-flex; align-items:center; gap:10px;
  font-size:.73rem; font-weight:700; color:var(--or);
  text-transform:uppercase; letter-spacing:.1em; margin-bottom:15px;
}
.section-label::before { content:''; width:20px; height:2px; background:var(--or); border-radius:1px; }

.h2 { font-size:clamp(1.9rem,3.4vw,2.9rem); font-weight:800; letter-spacing:-.03em; line-height:1.12; }
.h3 { font-size:1.25rem; font-weight:700; letter-spacing:-.02em; }
.lead { font-size:1rem; color:var(--mu); line-height:1.75; }

/* ═══════════════════════════════════════════
   HERO — UNIVERSAL SYSTEM
   ═══════════════════════════════════════════ */
@keyframes hero-fade-in { 0%{opacity:0;transform:translateY(20px)} 100%{opacity:1;transform:translateY(0)} }
@keyframes hero-fade-up { 0%{opacity:0;transform:translateX(-50%) translateY(40px)} 100%{opacity:1;transform:translateX(-50%) translateY(0)} }

.hero {
  min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:calc(var(--nav-h) + 80px) 60px 100px;
  position:relative; overflow:hidden; border-radius:0 0 28px 28px;
  background:linear-gradient(to bottom, #080808, transparent 30%, rgba(253,64,0,.04) 70%, rgba(253,64,0,.10) 100%);
}

/* Radial accent — brand-colored stage at bottom */
.hero-radial {
  position:absolute;
  left:50%; top:calc(100% - 150px);
  height:750px; width:140%; max-width:1600px;
  transform:translateX(-50%);
  border-radius:100%;
  background:radial-gradient(closest-side, #080808 82%, rgba(253,64,0,.18));
  pointer-events:none; z-index:0;
  animation:hero-fade-up 1s ease both;
  animation-delay:.3s; opacity:0;
}

/* Top glow — subtle orange ambient light */
.hero-glow {
  position:absolute; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(ellipse 70% 55% at 50% -5%, rgba(253,64,0,.07) 0%, transparent 60%),
    radial-gradient(ellipse 30% 40% at 85% 85%, rgba(140,35,0,.05) 0%, transparent 55%);
}

/* Grid overlay — top-masked fine lines */
.hero-grid {
  position:absolute; inset:0; pointer-events:none; z-index:0;
  height:600px; opacity:.8;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:6rem 5rem;
  mask-image:radial-gradient(ellipse 80% 50% at 50% 0%, #000 70%, transparent 110%);
}


.hero-content { position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; }
.hero-content > * { animation:hero-fade-in .75s ease both; }
.hero-content > *:nth-child(1) { animation-delay:.05s; }
.hero-content > *:nth-child(2) { animation-delay:.15s; }
.hero-content > *:nth-child(3) { animation-delay:.25s; }
.hero-content > *:nth-child(4) { animation-delay:.35s; }
.hero-content > *:nth-child(5) { animation-delay:.45s; }

.hero-eyebrow { display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1); padding:7px 18px 7px 14px; border-radius:100px; font-size:.72rem; font-weight:700; color:rgba(255,255,255,.55); letter-spacing:.1em; text-transform:uppercase; text-decoration:none; margin-bottom:36px; transition:border-color .2s,color .2s; }
.hero-eyebrow:hover { border-color:rgba(253,64,0,.35); color:rgba(255,255,255,.8); }
.hero-eyebrow svg { transition:transform .25s; }
.hero-eyebrow:hover svg { transform:translateX(3px); }

.h-page-hero { font-size:clamp(2.2rem,4.5vw,4.2rem); font-weight:800; letter-spacing:-.04em; line-height:1.06; color:#fff; margin-bottom:0; max-width:800px; }
.hero-sub { font-size:clamp(.95rem,1.4vw,1.1rem); font-weight:500; color:rgba(255,255,255,.48); letter-spacing:-.01em; margin:24px auto 40px; line-height:1.75; max-width:560px; }

.hero-bottom-fade {
  position:relative; z-index:1; width:100%; height:80px; margin-top:40px;
  pointer-events:none;
  background:linear-gradient(to top, #080808 10%, transparent);
}

.btn-hero-primary { display:inline-flex; align-items:center; gap:9px; background:var(--or); color:#fff; padding:14px 26px; border-radius:10px; font-size:.9rem; font-weight:700; font-family:inherit; text-decoration:none; white-space:nowrap; transition:transform .25s cubic-bezier(.34,1.56,.64,1),box-shadow .25s; }
.btn-hero-primary:hover { transform:translateY(-2px); box-shadow:0 12px 32px rgba(253,64,0,.38); }
.btn-hero-ghost { display:inline-flex; align-items:center; gap:9px; border:1px solid rgba(255,255,255,.16); color:rgba(255,255,255,.68); padding:14px 24px; border-radius:10px; font-size:.9rem; font-weight:600; font-family:inherit; text-decoration:none; white-space:nowrap; transition:border-color .2s,color .2s,transform .25s cubic-bezier(.34,1.56,.64,1); }
.btn-hero-ghost:hover { border-color:rgba(255,255,255,.36); color:#fff; transform:translateY(-1px); }

/* ── Page Hero (legacy) ──────────────────────────────────────── */
.page-hero {
  padding:calc(var(--nav-h) + 70px) 60px 80px;
  position:relative; overflow:hidden;
  background:var(--bg);
}
.page-hero::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(ellipse 65% 55% at 85% 50%, rgba(253,64,0,.09) 0%, transparent 60%),
    radial-gradient(ellipse 45% 50% at 95% 5%, rgba(100,25,0,.18) 0%, transparent 50%);
}

.breadcrumb {
  display:flex; align-items:center; gap:8px;
  font-size:.77rem; color:var(--mu); margin-bottom:24px;
}
.breadcrumb a { color:var(--mu); transition:color .2s; }
.breadcrumb a:hover { color:#fff; }
.breadcrumb-sep { color:var(--dm); }

/* ── Cards ───────────────────────────────────────────────────── */
.card {
  background:var(--s1); border:1px solid var(--bd); border-radius:20px;
  padding:32px 26px; position:relative; overflow:hidden;
  transition:border-color .3s, transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s;
}
.card::after {
  content:''; position:absolute; bottom:-60px; right:-60px;
  width:150px; height:150px; border-radius:50%;
  background:radial-gradient(circle, rgba(253,64,0,.08) 0%, transparent 70%);
  transition:transform .4s;
}
.card:hover { border-color:rgba(253,64,0,.35); transform:translateY(-6px); box-shadow:0 20px 60px rgba(0,0,0,.3); }
.card:hover::after { transform:scale(1.8); }

.card-icon {
  width:52px; height:52px; border-radius:13px;
  background:var(--or-dim); border:1px solid var(--or-mid);
  display:flex; align-items:center; justify-content:center;
  font-size:1.35rem; margin-bottom:20px;
}

/* ── CTA Band ────────────────────────────────────────────────── */
.cta-wrap { padding:0 60px 110px; }
.cta-band {
  border-radius:28px; background:var(--or);
  padding:68px 72px;
  position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:space-between; gap:48px;
}
.cta-band::before {
  content:''; position:absolute; top:-100px; right:-100px;
  width:480px; height:480px; border-radius:50%; background:rgba(0,0,0,.1);
  pointer-events:none;
}
.cta-band::after {
  content:''; position:absolute; bottom:-70px; left:35%;
  width:260px; height:260px; border-radius:50%; background:rgba(255,255,255,.08);
  pointer-events:none;
}
.cta-h2 {
  font-size:clamp(1.7rem,2.8vw,2.5rem); font-weight:800;
  letter-spacing:-.03em; color:#fff; line-height:1.2;
  position:relative; z-index:1;
}
.cta-right { position:relative; z-index:1; flex-shrink:0; }

/* ── Stats strip ─────────────────────────────────────────────── */
.stats-strip {
  background:var(--s1); border-top:1px solid var(--bd); border-bottom:1px solid var(--bd);
  padding:70px 60px; position:relative; overflow:hidden;
}
.stats-strip::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse 55% 100% at 50% 50%, rgba(253,64,0,.05) 0%, transparent 70%);
}
.stats-grid {
  display:grid; grid-template-columns:repeat(4,1fr); position:relative;
}
.stat-cell { padding:32px 44px; border-right:1px solid var(--bd); text-align:center; }
.stat-cell:last-child { border-right:none; }
.stat-n { font-size:clamp(2.2rem,3.4vw,3rem); font-weight:800; letter-spacing:-.04em; }
.stat-n .oc { color:var(--or); }
.stat-l { font-size:.87rem; color:var(--mu); margin-top:5px; font-weight:500; }

/* ── Footer ──────────────────────────────────────────────────── */
footer {
  background:var(--s1); border-top:1px solid var(--bd);
  padding:80px 60px 40px;
}
.foot-top {
  display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr;
  gap:48px; margin-bottom:56px;
}
.foot-logo { display:flex; align-items:center; }
.foot-logo img { height:56px; width:auto; }
.foot-logo-img { height:56px; width:auto; }
.foot-desc { font-size:.85rem; color:var(--mu); line-height:1.75; margin-top:18px; max-width:280px; }
.foot-social { display:flex; gap:8px; margin-top:24px; }
.foot-social a { width:36px; height:36px; border-radius:9px; background:var(--s2); border:1px solid var(--bd); display:flex; align-items:center; justify-content:center; color:var(--mu); transition:background .2s, color .2s, border-color .2s; }
.foot-social a:hover { background:var(--or-dim); border-color:var(--or-mid); color:var(--or); }
.foot-social svg { width:14px; height:14px; }
.foot-col-h { font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--dm); margin-bottom:18px; }
.foot-links { list-style:none; display:flex; flex-direction:column; gap:10px; }
.foot-links a { color:var(--mu); font-size:.87rem; font-weight:500; transition:color .2s; text-decoration:none; }
.foot-links a:hover { color:#fff; }
.foot-contact-row { display:flex; align-items:flex-start; gap:10px; margin-bottom:14px; }
.foot-contact-row:last-child { margin-bottom:0; }
.foot-contact-icon { width:32px; height:32px; border-radius:8px; background:var(--s2); border:1px solid var(--bd); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.foot-contact-icon svg { width:13px; height:13px; stroke:var(--or); stroke-width:1.8; fill:none; }
.foot-contact-text { font-size:.85rem; color:var(--mu); line-height:1.6; margin-top:5px; }
.foot-contact-text a { color:var(--mu); text-decoration:none; transition:color .2s; }
.foot-contact-text a:hover { color:#fff; }
.foot-bottom {
  border-top:1px solid var(--bd); padding-top:28px;
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px;
}
.foot-copy { font-size:.78rem; color:var(--dm); }
.foot-legal { display:flex; gap:20px; }
.foot-legal a { font-size:.78rem; color:var(--dm); transition:color .2s; text-decoration:none; }
.foot-legal a:hover { color:var(--mu); }

/* ── Scroll reveal ───────────────────────────────────────────── */
.reveal {
  opacity:0; transform:translateY(26px);
  transition:opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1);
}
.reveal.on { opacity:1; transform:translateY(0); }

/* ── FAQ Accordion ───────────────────────────────────────────── */
.faq-item {
  border-bottom:1px solid var(--bd);
  padding:24px 0;
}
.faq-q {
  display:flex; justify-content:space-between; align-items:center;
  cursor:pointer; gap:16px; font-weight:600; font-size:1rem;
  transition:color .2s;
}
.faq-q:hover { color:var(--or); }
.faq-icon { width:20px; height:20px; flex-shrink:0; stroke:currentColor; fill:none; stroke-width:2; transition:transform .3s; }
.faq-item.open .faq-icon { transform:rotate(45deg); }
.faq-a { font-size:.9rem; color:var(--mu); line-height:1.72; max-height:0; overflow:hidden; transition:max-height .4s cubic-bezier(.22,1,.36,1), padding .3s; }
.faq-item.open .faq-a { max-height:300px; padding-top:14px; }

/* ── Form ────────────────────────────────────────────────────── */
.form-group { margin-bottom:20px; }
.form-label { display:block; font-size:.83rem; font-weight:600; color:var(--mu); margin-bottom:7px; }
.form-input, .form-select, .form-textarea {
  width:100%; background:var(--s2); border:1px solid var(--bd);
  border-radius:10px; padding:13px 16px; color:#fff;
  font-family:inherit; font-size:.9rem;
  transition:border-color .2s, box-shadow .2s;
  outline:none;
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
  border-color:rgba(253,64,0,.5);
  box-shadow:0 0 0 3px rgba(253,64,0,.1);
}
.form-input::placeholder, .form-textarea::placeholder { color:var(--dm); }
.form-select option { background:var(--s2); }
.form-textarea { resize:vertical; min-height:130px; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }

/* ── Grain texture ───────────────────────────────────────────── */
.grain {
  position:absolute; inset:0; pointer-events:none; opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:300px;
}

/* ── Pulse badge ─────────────────────────────────────────────── */
.badge {
  display:inline-flex; align-items:center; gap:8px;
  background:var(--or-dim); border:1px solid rgba(253,64,0,.28);
  padding:7px 16px; border-radius:100px;
  font-size:.73rem; font-weight:700; color:var(--or);
  letter-spacing:.06em; text-transform:uppercase;
}
.badge-dot { width:6px; height:6px; border-radius:50%; background:var(--or); animation:pulse-dot 2s ease-in-out infinite; }
@keyframes pulse-dot { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(.7)} }

/* ── Number counter ──────────────────────────────────────────── */
/* JS handles count-up, .cnt class is target */

/* ── Utility classes ─────────────────────────────────────────── */
.text-or { color:var(--or); }
.text-mu { color:var(--mu); }
.mt-4  { margin-top:16px; }
.mt-8  { margin-top:32px; }
.mt-10 { margin-top:40px; }
.mt-12 { margin-top:48px; }
.flex-center { display:flex; align-items:center; }
.gap-3 { gap:12px; }
.gap-4 { gap:16px; }
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }

/* ── Mobile menu toggle ────────────────────────────────────── */
.nav-toggle {
  display:none; width:40px; height:40px; border-radius:9px;
  background:transparent; border:1px solid var(--bd);
  cursor:pointer; flex-direction:column; align-items:center; justify-content:center; gap:5px;
  padding:0; flex-shrink:0; position:relative; z-index:601;
  transition:background .2s, border-color .2s;
}
.nav-toggle:hover { background:rgba(255,255,255,.05); border-color:var(--bd2); }
.nav-toggle:focus-visible { outline:2px solid var(--or); outline-offset:2px; }
.nav-toggle span {
  display:block; width:18px; height:2px; background:#fff; border-radius:1px;
  transition:transform .3s, opacity .3s;
}
body.nav-open .nav-toggle span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
body.nav-open .nav-toggle span:nth-child(2) { opacity:0; }
body.nav-open .nav-toggle span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* Mobile overlay background */
.nav-overlay {
  display:none; position:fixed; inset:0; z-index:499;
  background:rgba(0,0,0,.6); backdrop-filter:blur(4px);
  opacity:0; transition:opacity .3s;
}
body.nav-open .nav-overlay { display:block; opacity:1; }

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE — TABLET (≤1024px)
   ═══════════════════════════════════════════════════════════ */
@media (max-width:1024px) {
  :root { --nav-h:64px; }

  /* ── Mobile Nav ─────────────────────────────────────── */
  #nav { padding:0 20px; }
  .nav-toggle { display:flex; }

  /* Panel — glass with rounded left corners */
  .nav-links {
    position:fixed; top:0; right:0; z-index:600;
    width:280px; height:100dvh; max-width:80vw;
    background:rgba(10,10,10,.97); backdrop-filter:blur(36px); -webkit-backdrop-filter:blur(36px);
    border-left:1px solid rgba(255,255,255,.06);
    border-radius:24px 0 0 24px;
    flex-direction:column; align-items:stretch; justify-content:flex-start;
    padding:calc(var(--nav-h) + 16px) 12px 24px; gap:2px;
    transform:translateX(100%); transition:transform .38s cubic-bezier(.32,1.15,.60,1);
    overflow-y:auto; -webkit-overflow-scrolling:touch;
  }
  body.nav-open .nav-links { transform:translateX(0); }

  /* Stagger items in on open, fast out on close */
  .nav-links > li {
    opacity:0; transform:translateX(28px);
    transition:opacity .15s, transform .15s;
  }
  body.nav-open .nav-links > li {
    opacity:1; transform:translateX(0);
    transition:opacity .4s cubic-bezier(.22,1,.36,1), transform .4s cubic-bezier(.22,1,.36,1);
  }
  body.nav-open .nav-links > li:nth-child(1) { transition-delay:.03s; }
  body.nav-open .nav-links > li:nth-child(2) { transition-delay:.07s; }
  body.nav-open .nav-links > li:nth-child(3) { transition-delay:.11s; }
  body.nav-open .nav-links > li:nth-child(4) { transition-delay:.15s; }
  body.nav-open .nav-links > li:nth-child(5) { transition-delay:.19s; }
  body.nav-open .nav-links > li:nth-child(6) { transition-delay:.23s; }

  /* Main nav items — rounded hover */
  .nav-links > li > a {
    padding:12px 16px; font-size:.88rem; font-weight:600; border-radius:12px;
    color:rgba(255,255,255,.6); justify-content:space-between;
    transition:color .2s, background .2s;
  }
  .nav-links > li > a:hover { color:#fff; background:rgba(255,255,255,.05); }
  .nav-links > li > a.active { color:var(--or); background:rgba(253,64,0,.06); }
  .nav-links > li > a.parent-active { color:rgba(255,255,255,.6); }
  .has-drop.open > a { color:#fff !important; background:rgba(255,255,255,.05); }

  /* Hide desktop CTA, show mobile CTA */
  .btn-nav { display:none; }
  .nav-mobile-cta { display:block !important; list-style:none; padding:8px 4px 0; margin-top:auto; }
  .nav-mobile-cta a { margin:0 !important; border-radius:14px !important; font-size:.84rem !important; padding:14px 20px !important; }

  /* Chevron — visible, rotates on open */
  .has-drop .chev {
    display:block; width:14px; height:14px; opacity:.35;
    transition:transform .35s cubic-bezier(.34,1.56,.64,1), opacity .25s;
  }
  .has-drop.open .chev { transform:rotate(180deg); opacity:.7; }

  /* ── BUG FIX: Override desktop hover transform on touch devices ── */
  .has-drop:hover .drop {
    transform:none !important;
    position:static !important;
  }

  /* Dropdown — accordion with rounded container */
  .has-drop .drop {
    position:static !important; transform:none !important;
    min-width:0; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.04); backdrop-filter:none;
    border-radius:14px; padding:0; margin:4px 4px 4px 8px;
    opacity:1; visibility:visible; pointer-events:all;
    max-height:0; overflow:hidden;
    transition:max-height .4s cubic-bezier(.22,1,.36,1), border-color .3s;
  }
  .has-drop .drop::before { display:none; }
  .has-drop.open .drop { max-height:400px; padding:6px 0; border-color:rgba(255,255,255,.06); }

  /* Dropdown items — fade+slide in with stagger */
  .drop a {
    padding:10px 16px 10px 20px; font-size:.82rem; font-weight:500;
    color:rgba(255,255,255,.42); border-radius:10px; margin:0 6px;
    border-left:none; display:flex; gap:10px;
    transition:color .2s, background .2s;
    opacity:0; transform:translateX(14px);
  }
  .has-drop.open .drop a {
    opacity:1; transform:translateX(0);
    transition:color .2s, background .2s, opacity .35s cubic-bezier(.22,1,.36,1), transform .35s cubic-bezier(.22,1,.36,1);
  }
  .has-drop.open .drop a:nth-child(1) { transition-delay:.08s; }
  .has-drop.open .drop a:nth-child(2) { transition-delay:.13s; }
  .has-drop.open .drop a:nth-child(3) { transition-delay:.18s; }
  .has-drop.open .drop a:nth-child(4) { transition-delay:.23s; }
  .drop a:hover { color:rgba(255,255,255,.85); background:rgba(255,255,255,.05); }
  .drop a.active { color:var(--or); background:rgba(253,64,0,.07); }

  /* Hide icon boxes and dividers on mobile */
  .drop-icon { display:none; }
  .drop-divider { display:none; }

  /* Sections */
  .wrap { padding:0 28px; }
  .section { padding:80px 28px; }
  .section-sm { padding:50px 28px; }

  /* Hero */
  .hero { padding:calc(var(--nav-h) + 48px) 28px 80px; }
  .hero-radial { top:calc(100% - 90px); height:500px; width:1100px; }
  .page-hero { padding:calc(var(--nav-h) + 48px) 28px 60px; }

  /* Grids */
  .grid-4 { grid-template-columns:repeat(2,1fr); }
  .stats-grid { grid-template-columns:repeat(2,1fr); }
  .stat-cell:nth-child(2) { border-right:none; }

  /* Footer */
  .foot-top { grid-template-columns:1fr 1fr; gap:36px; }
  footer { padding:60px 28px 32px; }

  /* CTA band */
  .cta-band { flex-direction:column; align-items:flex-start; padding:48px 40px; }
  .cta-wrap { padding:0 28px 80px; }

  /* Stats strip */
  .stats-strip { padding:50px 28px; }
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE — MOBILE (≤768px)
   ═══════════════════════════════════════════════════════════ */
@media (max-width:768px) {
  :root { --nav-h:56px; }
  #nav { padding:0 16px; }
  .nav-logo img, .nav-logo-img { height:38px; }

  /* Sections — override inline padding:60px */
  .wrap { padding:0 18px; }
  .section { padding:48px 18px; }
  .section-sm { padding:36px 18px; }
  section { padding-left:18px !important; padding-right:18px !important; }

  /* Typography — tighter for mobile density */
  .h2 { font-size:clamp(1.35rem,5vw,1.9rem); line-height:1.15; }
  .h3 { font-size:1.05rem; }
  .lead { font-size:.85rem; line-height:1.65; }
  .section-label { font-size:.65rem; margin-bottom:10px; }

  /* Hero — compact, not full screen */
  .hero { min-height:auto; padding:calc(var(--nav-h) + 28px) 18px 44px; }
  .hero-radial { top:calc(100% - 50px); height:350px; width:600px; }
  .hero-sub { font-size:.82rem; margin:14px auto 24px; line-height:1.6; max-width:none; }
  .page-hero { padding:calc(var(--nav-h) + 32px) 18px 36px; }
  .h-page-hero { font-size:clamp(2.3rem,9.5vw,3.4rem); line-height:1.05; }
  .hero-h1 { font-size:clamp(2.3rem,9.5vw,3.4rem); line-height:1.05; white-space:normal !important; }
  .anim-word { white-space:normal !important; }
  .hero-eyebrow { font-size:.58rem; padding:4px 10px 4px 7px; margin-bottom:20px; gap:6px; }
  .btn-hero-primary { padding:11px 20px; font-size:.82rem; gap:7px; }
  .btn-hero-ghost { padding:11px 18px; font-size:.82rem; gap:7px; }
  .hero-cta-row { gap:10px; margin-bottom:32px; }

  /* Breadcrumb */
  .breadcrumb { font-size:.7rem; margin-bottom:16px; }

  /* Grids: all to 1 column */
  .grid-2 { grid-template-columns:1fr; gap:16px; }
  .grid-3 { grid-template-columns:1fr; gap:16px; }
  .grid-4 { grid-template-columns:1fr; gap:14px; }
  .stats-grid { grid-template-columns:1fr; }
  .stat-cell { border-right:none; border-bottom:1px solid var(--bd); padding:18px 14px; }
  .stat-cell:last-child { border-bottom:none; }
  .stat-n { font-size:clamp(1.8rem,5vw,2.4rem); }
  .stat-l { font-size:.78rem; }
  .form-grid { grid-template-columns:1fr; }

  /* Buttons — compact */
  .btn-primary { padding:11px 20px; font-size:.82rem; }
  .btn-outline { padding:11px 20px; font-size:.82rem; }
  .btn-white { padding:11px 20px; font-size:.82rem; }

  /* Cards — tighter */
  .card { padding:20px 18px; border-radius:14px; }
  .card-icon { width:42px; height:42px; border-radius:10px; font-size:1.1rem; margin-bottom:14px; }

  /* Footer — compact */
  .foot-top { grid-template-columns:1fr 1fr; gap:28px 20px; }
  .foot-top > div:nth-child(1) { order:1; } /* Logo+Social — top left */
  .foot-top > div:nth-child(4) { order:2; } /* Kontakt — top right */
  .foot-top > div:nth-child(2) { order:3; } /* Leistungen — bottom left */
  .foot-top > div:nth-child(3) { order:4; } /* Über Grentis — bottom right */
  footer { padding:36px 18px 24px; }
  .foot-bottom { flex-direction:column; align-items:flex-start; gap:6px; }
  .foot-logo img, .foot-logo-img { height:36px; }
  .foot-col-h { font-size:.65rem; margin-bottom:12px; }
  .foot-links a { font-size:.8rem; }
  .foot-links { gap:8px; }
  .foot-contact-text { font-size:.78rem; }
  .foot-contact-icon { width:28px; height:28px; border-radius:7px; }
  .foot-contact-icon svg { width:11px; height:11px; }
  .foot-contact-row { gap:8px; margin-bottom:10px; }
  .foot-copy { font-size:.7rem; }
  .foot-legal a { font-size:.7rem; }
  .foot-social a { width:32px; height:32px; border-radius:7px; }
  .foot-social svg { width:12px; height:12px; }
  .foot-desc { display:none; }

  /* CTA band — compact */
  .cta-band { padding:28px 22px; border-radius:16px; gap:20px; }
  .cta-wrap { padding:0 18px 48px; }
  .cta-h2 { font-size:clamp(1.2rem,4.5vw,1.7rem); }

  /* Stats strip */
  .stats-strip { padding:32px 18px; }

  /* Section divider */
  .section-divider { margin:0 18px; }

  /* FAQ — compact */
  .faq-q { font-size:.85rem; padding:18px 0; }
  .faq-a { font-size:.8rem; line-height:1.6; }
  .faq-item { padding:0; }

  /* Forms — compact */
  .form-label { font-size:.77rem; margin-bottom:5px; }
  .form-input, .form-select, .form-textarea { padding:11px 14px; font-size:.84rem; border-radius:8px; }
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE — SMALL MOBILE (≤480px)
   ═══════════════════════════════════════════════════════════ */
@media (max-width:480px) {
  .hero { padding:calc(var(--nav-h) + 20px) 14px 28px; }
  .hero-sub { font-size:.78rem; margin:10px auto 20px; }
  .page-hero { padding:calc(var(--nav-h) + 24px) 14px 28px; }
  .h-page-hero { font-size:clamp(2rem,9vw,2.8rem); }
  .hero-h1 { font-size:clamp(2rem,9vw,2.8rem); }
  .wrap { padding:0 14px; }
  .section { padding:36px 14px; }
  .section-sm { padding:28px 14px; }
  section { padding-left:14px !important; padding-right:14px !important; }
  footer { padding:32px 14px 20px; }
  .cta-band { padding:22px 18px; border-radius:14px; }
  .cta-wrap { padding:0 14px 40px; }
  .cta-h2 { font-size:clamp(1.1rem,4vw,1.5rem); }
  .stats-strip { padding:24px 14px; }
  .section-divider { margin:0 14px; }
  .btn-primary { padding:10px 18px; font-size:.8rem; width:100%; justify-content:center; }
  .btn-outline { padding:10px 18px; font-size:.8rem; width:100%; justify-content:center; }
  .btn-white { padding:10px 18px; font-size:.8rem; }
  .btn-hero-primary { padding:10px 16px; font-size:.78rem; width:100%; justify-content:center; }
  .btn-hero-ghost { padding:10px 16px; font-size:.78rem; width:100%; justify-content:center; }
  .hero-eyebrow { font-size:.55rem; padding:4px 9px 4px 6px; }
  .h2 { font-size:clamp(1.2rem,5vw,1.7rem); }
  .h3 { font-size:.95rem; }
  .lead { font-size:.8rem; }
  .card { padding:18px 16px; border-radius:12px; }
  .card-icon { width:38px; height:38px; border-radius:9px; margin-bottom:12px; }
  .foot-top { gap:20px; }
}

/* ═══════════════════════════════════════════════════════════
   PAGE-SPECIFIC RESPONSIVE OVERRIDES
   ═══════════════════════════════════════════════════════════ */

/* ── Index: trust-grid, kunden-card ─────────────────── */
@media (max-width:768px) {
  .trust-grid { grid-template-columns:1fr !important; gap:28px; }
  .kunden-card { grid-template-columns:1fr !important; padding:24px 20px; gap:24px; }
  .trust-section { padding:0 18px 40px; }
  .kunden-section { padding:0 18px 40px; }
  .video-section { padding:40px 18px; }
  .cta-outer { padding:0 18px 48px; }
  .video-header { margin-bottom:28px; }
  .trust-big-pct { font-size:clamp(2.8rem,8vw,4rem); }
  .trust-pct-sub { font-size:.8rem; margin:12px 0 20px; }
  .tp-title { font-size:.84rem; }
  .tp-text { font-size:.78rem; }
  .tmc-value { font-size:clamp(1.3rem,3.5vw,1.7rem); }
  .tmc-label { font-size:.58rem; }
  .kunden-h2 { font-size:clamp(1.3rem,4.5vw,1.8rem); margin-bottom:14px; }
  .kunden-desc { font-size:.82rem; line-height:1.65; margin-bottom:20px; }
  .logo-chip { height:38px; padding:0 12px; }
  .logo-chip img { height:20px; }
  .hero-logos-label { font-size:.58rem; margin-bottom:10px; }
}
@media (max-width:480px) {
  .trust-section { padding:0 14px 32px; }
  .kunden-section { padding:0 14px 32px; }
  .kunden-card { padding:20px 16px; gap:20px; }
  .video-section { padding:28px 14px; }
}

/* ── Steuerkanzleien/Team: konzept-layout ───────────── */
@media (max-width:1024px) {
  .konzept-layout { grid-template-columns:1fr !important; gap:32px; padding:36px 0 16px; }
  .konzept-left { padding-left:0; }
}
@media (max-width:768px) {
  .konzept-layout { gap:24px; padding:24px 0 12px; }
  .konzept-img-wrap { max-width:100% !important; }
}

/* ── Steuerkanzleien: vorteil-grid ──────────────────── */
@media (max-width:768px) {
  .vorteil-grid { grid-template-columns:1fr !important; gap:12px; }
}

/* ── Steuerkanzleien: timeline ──────────────────────── */
@media (max-width:768px) {
  .tl-step { flex-direction:column; padding-top:40px; }
  .tl-step:first-child { padding-top:0; }
  .tl-left { width:auto; position:static; gap:10px; margin-bottom:10px; }
  .tl-right { padding-left:0; }
  .tl-track { left:23px; }
  .tl-fill { left:23px; }
  .tl-num { font-size:1.6rem; }
  .tl-title { font-size:.88rem; }
  .tl-desc { font-size:.78rem; }
  .faq-section-wrap { padding:0 18px 48px; }
}

/* ── Team: team-grid, values-grid ───────────────────── */
@media (max-width:1024px) {
  .team-grid { grid-template-columns:repeat(2,1fr); }
  .values-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:768px) {
  .team-grid { gap:14px; }
  .values-grid { gap:12px; }
  .team-name { font-size:.88rem; }
  .team-role { font-size:.72rem; }
  .value-card { padding:20px 16px; }
  .value-title { font-size:.85rem; }
  .value-text { font-size:.78rem; }
}
@media (max-width:480px) {
  .team-grid { grid-template-columns:1fr; }
  .values-grid { grid-template-columns:1fr; }
}

/* ── Karriere: val-grid, ben-grid, process-steps ──── */
@media (max-width:1024px) {
  .val-grid { grid-template-columns:repeat(2,1fr) !important; }
  .ben-grid { grid-template-columns:repeat(2,1fr) !important; }
  .process-steps { grid-template-columns:repeat(2,1fr) !important; gap:24px; }
  .process-steps::before { display:none; }
}
@media (max-width:480px) {
  .val-grid { grid-template-columns:1fr !important; }
  .ben-grid { grid-template-columns:1fr !important; }
  .process-steps { grid-template-columns:1fr !important; }
}
@media (max-width:768px) {
  .values-section { padding:40px 18px; }
  .jobs-section { padding:0 18px 40px; }
  .benefits-section { padding:0 18px 40px; }
  .process-section { padding:0 18px 40px; }
  .initiative-band { margin:0 18px 40px; padding:24px 20px; flex-direction:column; gap:16px; align-items:flex-start; border-radius:16px; }
  .init-icon { width:48px; height:48px; }
  .init-title { font-size:.92rem; }
  .init-text { font-size:.8rem; }
  .job-card { flex-direction:column; gap:16px; padding:20px 18px; }
  .job-title { font-size:.92rem; }
  .job-tags { gap:6px; }
  .job-tag { font-size:.68rem; padding:4px 10px; }
  .step-num { font-size:1.1rem; width:36px; height:36px; }
  .step-title { font-size:.84rem; }
  .step-text { font-size:.76rem; }
}

/* ── Kontakt: kontakt-layout, location-card, booking ─ */
@media (max-width:1024px) {
  .kontakt-layout { grid-template-columns:1fr !important; gap:24px; }
  .location-card { grid-template-columns:1fr !important; }
  .booking-widget { grid-template-columns:1fr !important; }
}
@media (max-width:768px) {
  .kontakt-section { padding:0 18px 40px; }
  .location-section { padding:0 18px 40px; }
  .kalender-section { padding:0 18px 40px; }
  .faq-section { padding:0 18px 40px; }
  .info-panel { position:static; }
  .cal-panel { border-right:none; border-bottom:1px solid var(--bd); padding:24px 16px; }
  .form-card { padding:24px 18px; }
  .topic-btn { font-size:.78rem; padding:8px 14px; }
  .location-card { border-radius:16px; }
}

/* ── Potenzialrechner: calc-top, calc-bottom, info ── */
@media (max-width:1024px) {
  .calc-top { grid-template-columns:1fr !important; }
  .calc-bottom { grid-template-columns:repeat(2,1fr) !important; }
  .info-strip-inner { grid-template-columns:1fr !important; }
}
@media (max-width:768px) {
  .calc-section { padding:100px 18px 20px !important; }
  .calc-bottom { grid-template-columns:1fr !important; gap:8px; }
  .info-strip { padding:0 18px 36px; }
  .input-panel { padding:20px 16px; }
  .panel-title { font-size:.85rem; }
  .panel-sub { font-size:.72rem; }
  .chart-card { padding:16px 14px; }
  .chart-title { font-size:.82rem; }
  .chart-subtitle { font-size:.72rem; }
  .kpi-card { padding:14px 14px; }
  .kpi-label { font-size:.6rem; margin-bottom:6px; }
  .kpi-val { font-size:1.15rem; }
  .kpi-total { padding:14px 16px; }
  .kpi-total .kpi-val { font-size:1.25rem; }
  .calc-cta-btn { padding:13px 20px; font-size:.84rem; margin-top:20px !important; }
  .disclaimer { font-size:.65rem; margin-top:12px; }
  .sg-label { font-size:.72rem; }
  .sg-input { font-size:.78rem; width:68px; padding:3px 6px; }
  .info-strip-card { padding:20px 16px; gap:12px; }
  .info-strip-title { font-size:.82rem; }
  .info-strip-text { font-size:.74rem; }
  .info-strip-icon { width:36px; height:36px; border-radius:9px; }
  .info-strip-icon svg { width:16px; height:16px; }
}

/* ── Referenzen: ref-stat-grid ──────────────────────── */
@media (max-width:1024px) {
  .ref-stat-grid { grid-template-columns:repeat(2,1fr) !important; }
}
@media (max-width:768px) {
  .ref-stats-section { padding:0 18px 40px; }
  .video-section { padding:36px 18px; }
}
@media (max-width:480px) {
  .ref-stat-grid { grid-template-columns:1fr !important; }
  .ref-stats-section { padding:0 14px 32px; }
  .video-section { padding:28px 14px; }
}