:root{
  --bg:#0b1020; --bg-2:#0e1429; --fg:#e5e7eb; --muted:#9ca3af;
  --accent:#22c55e; --accent-2:#16a34a; --accent-3:#86efac;
  --card:#111827; --border:#1f2937; --shadow:0 10px 20px rgba(0,0,0,.35);

  /* ===== Overlay/Transparenz – GLOBAL steuerbar ===== */
  /* Dunkles Overlay: 11 14 20 | Helles Overlay: 255 255 255 */
  --overlay-rgb: 11 14 20;
  --overlay-alpha: .60;             /* 0..1 – Helligkeit */
  --overlay-alpha-mobile: var(--overlay-alpha); /* optional andere Mobile-Helligkeit */

  /* Header/Card – GLOBAL steuerbar */
  --header-rgb: 11 16 32;
  --header-alpha: .60;              /* 0..1 – Header-Transparenz */

  --card-rgb: 17 24 39;
  --card-alpha: .95;                /* 0..1 – Karten-Transparenz */

  /* NEU: globaler Seitenhintergrund nutzt Variablen */
  --page-bg:
    linear-gradient(0deg,
      rgb(var(--overlay-rgb) / var(--overlay-alpha)),
      rgb(var(--overlay-rgb) / var(--overlay-alpha))
    ),
    url("/img/start_bg.png") center / cover no-repeat fixed,
    url("/img/hero_bg.webp") center / cover no-repeat fixed,
    url("/img/hero_bg.jpg")  center / cover no-repeat fixed;
}

/* Mobile: attachment von fixed → scroll; Helligkeit via eigener Var */
@media (max-width:900px){
  :root{
    --page-bg:
      linear-gradient(0deg,
        rgb(var(--overlay-rgb) / var(--overlay-alpha-mobile)),
        rgb(var(--overlay-rgb) / var(--overlay-alpha-mobile))
      ),
      url("/img/start_bg.png") center / cover no-repeat,
      url("/img/hero_bg.webp") center / cover no-repeat,
      url("/img/hero_bg.jpg")  center / cover no-repeat;
  }
}

*{box-sizing:border-box}

/* Variable mit Fallback – wirkt auf ALLEN Seiten */
html,body{
  margin:0; padding:0;
  background: var(--page-bg, linear-gradient(180deg,var(--bg),var(--bg-2)));
  color:var(--fg);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;
  line-height:1.5;
}

a{color:var(--accent-3);text-decoration:none}
a:hover{text-decoration:underline}

/* Header nutzt jetzt header-Variablen */
header{
  position:sticky; top:0;
  background: rgb(var(--header-rgb) / var(--header-alpha));
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border);
  z-index:50;
}

.container{max-width:1100px;margin:0 auto;padding:0 20px}
.nav{display:flex;align-items:center;justify-content:space-between;padding:12px 0}
.logo{display:flex;align-items:center;gap:12px;font-weight:800}
.logo img{width:32px;height:32px}
.logo .name{font-size:1.05rem;letter-spacing:.2px}
.logo .tag{color:var(--muted);font-weight:600;font-size:.85rem}
nav ul{display:flex;gap:18px;list-style:none;margin:0;padding:0}
nav a{color:var(--fg);font-weight:600;opacity:.9}
nav a:hover{opacity:1}
.lang{display:flex;align-items:center;gap:8px}
.lang select{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:6px 8px;color:var(--fg)}
.btn{display:inline-block;padding:12px 16px;border-radius:12px;border:1px solid var(--border);background:var(--card);color:var(--fg);font-weight:700;box-shadow:var(--shadow);transition:transform .06s ease}
.btn:hover{transform:translateY(-1px)}
.btn.primary{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#04130a;border-color:transparent}
.btn.ghost{background:transparent;border-color:var(--border);color:var(--fg)}
.hero{padding:72px 0 36px;border-bottom:1px solid var(--border)}
.hero-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:28px;align-items:center}
h1{font-size:clamp(2rem,4.5vw,3rem);line-height:1.1;margin:0 0 10px}
.lead{font-size:1.1rem;color:var(--muted);max-width:55ch}
.cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}

/* Cards nutzen jetzt card-Variablen (wirkt auch auf .doc-card) */
.card, .doc-card{
  background: rgb(var(--card-rgb) / var(--card-alpha));
  border:1px solid var(--border);
  border-radius:16px;
  padding:18px;
  box-shadow:var(--shadow);
}

.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:18px}
.kpi .num{font-size:1.6rem;font-weight:800}
.section{padding:40px 0}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.feature h3{margin:10px 0 6px}
footer{border-top:1px solid var(--border);padding:24px 0;color:var(--muted)}
.badge{display:inline-block;border:1px solid var(--border);padding:6px 10px;border-radius:999px;font-size:.85rem;background:rgba(255,255,255,.02)}

@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr}
  .grid{grid-template-columns:1fr}
  .kpis{grid-template-columns:1fr 1fr 1fr}
}
/* Ad-Kachel spannt über die ganze Grid-Breite */
.gallery-ad{
  grid-column: 1 / -1;
  background: rgba(17,24,39,.95);
  border:1px solid #1f2937;
  border-radius:16px;
  padding:8px;
  box-shadow:0 10px 20px rgba(0,0,0,.35);
}
/* ✅ Ads vermessbar machen */
.ad-card ins.adsbygoogle,
.ad-footer ins.adsbygoogle,
.gallery-ad ins.adsbygoogle{
  display:block;
  width:100%;
  min-height:120px;   /* vorher 1px */
}

/* optional etwas mehr Platz auf sehr kleinen Screens */
@media (max-width:600px){
  .gallery-ad ins.adsbygoogle{ min-height:180px; }
}