/* lamellenvorhang-vertikal.de – Stylesheet */

:root {
  --pp: 32px;
  --hero-h: 580px;
  --hero-dir: row;
  --strip-cols: repeat(3, 1fr);
  --strip-h: 300px;
  --strip-mt: -36px;
  --strip-mx: 24px;
  --trans-cols: repeat(4, 1fr);
  --gestalt-cols: repeat(2, 1fr);
  --gal-cols: 2fr 1fr 1fr;
  --gal-rows: 280px 280px;
  --gal-span: 1/3;
  --h2: 42px;
  --sec-pad: 56px 48px;
  --sec-mt: 104px;
  --area-h: 340px;
  --gestalt-h: 280px;
  --inset-display: flex;
  --nav-gap: 4px 28px;
  --faq-dir: row;
  --benefit-cols: repeat(3, 1fr);
  --nutzen-cols: repeat(3, 1fr);
  --area-cols: repeat(3, 1fr);
  --teaser-cols: repeat(4, 1fr);
  --eckwerte-cols: repeat(2, 1fr);
  --fenster-cols: repeat(3, 1fr);
  --normen-cols: repeat(2, 1fr);
  --planung-cols: repeat(2, 1fr);
  --werkzeuge-cols: repeat(2, 1fr);
  --checklist-cols: repeat(2, 1fr);
  --leitfaden-cols: repeat(5, 1fr);
  --h3: 18px;
  --cta-h2: 34px;
}

@media (max-width: 900px) {
  :root {
    --pp: 16px;
    --hero-h: auto;
    --hero-dir: column;
    --strip-cols: 1fr 1fr;
    --strip-h: 200px;
    --strip-mt: 16px;
    --strip-mx: 0;
    --trans-cols: repeat(2, 1fr);
    --gestalt-cols: 1fr;
    --gal-cols: 1fr 1fr;
    --gal-rows: 200px 200px 200px;
    --gal-span: auto;
    --h2: 30px;
    --sec-pad: 32px 20px;
    --sec-mt: 64px;
    --area-h: 240px;
    --gestalt-h: 220px;
    --inset-display: none;
    --nav-gap: 4px 16px;
    --faq-dir: column;
    --benefit-cols: repeat(2, 1fr);
    --nutzen-cols: repeat(3, 1fr);
    --area-cols: repeat(2, 1fr);
    --teaser-cols: repeat(2, 1fr);
    --eckwerte-cols: repeat(2, 1fr);
    --fenster-cols: repeat(2, 1fr);
    --normen-cols: repeat(2, 1fr);
    --planung-cols: repeat(2, 1fr);
    --werkzeuge-cols: repeat(2, 1fr);
    --checklist-cols: repeat(2, 1fr);
    --leitfaden-cols: repeat(3, 1fr);
    --h3: 18px;
    --cta-h2: 30px;
  }
}

@media (max-width: 480px) {
  :root {
    --strip-cols: 1fr;
    --strip-h: 180px;
    --trans-cols: 1fr;
    --gal-cols: 1fr;
    --gal-rows: auto;
    --h2: 26px;
    --sec-pad: 24px 16px;
    --benefit-cols: 1fr;
    --nutzen-cols: 1fr;
    --area-cols: 1fr;
    --teaser-cols: 1fr;
    --eckwerte-cols: 1fr;
    --fenster-cols: 1fr;
    --normen-cols: 1fr;
    --planung-cols: 1fr;
    --werkzeuge-cols: 1fr;
    --checklist-cols: 1fr;
    --leitfaden-cols: 1fr;
    --h3: 17px;
    --cta-h2: 26px;
  }
}

/* Base reset */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: radial-gradient(circle, #DEDCE6 1px, transparent 1px) 0 0 / 28px 28px, #FFFFFF;
  -webkit-font-smoothing: antialiased;
}

a { color: #4B6E87; }
a:hover { color: #2F4D64; }

img { max-width: 100%; height: auto; }
svg { max-width: 100%; }

details summary { cursor: pointer; list-style: none; }
details summary::-webkit-details-marker { display: none; }

table { font-family: inherit; }

/* Smooth scroll */
html { scroll-behavior: smooth; }

/* Objekt-Badge im Hero – auf Mobil/Tablet ausblenden */
.objekt-badge { display: block; }
@media (max-width: 900px) {
  .objekt-badge { display: none; }
}

/* Back-to-top hover */
a[aria-label="Nach oben scrollen"]:hover {
  background: #4B6E87 !important;
}

/* Sticky side navigation */
#side-nav {
  position: fixed;
  top: 50%;
  left: var(--pp);
  transform: translateY(-50%) translateX(-200%);
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: Outfit, system-ui, sans-serif;
  font-size: 15px;
  font-weight: 500;
  transition: transform .5s cubic-bezier(.16,1,.3,1), opacity .5s ease;
  opacity: 0;
}
#side-nav.visible {
  transform: translateY(-50%) translateX(0);
  opacity: 1;
}
#side-nav a {
  display: block;
  padding: 6px 0;
  color: #15151A;
  text-decoration: none;
  white-space: nowrap;
  transition: color .2s;
}
#side-nav a:hover {
  color: #4B6E87;
}
#side-nav a.active {
  color: #4B6E87;
  font-weight: 700;
}
@media (max-width: 900px) {
  #side-nav { display: none !important; }
}