:root{
  --bg-dark: #1b1c2e;
  --text: #f8f8f8;
  --muted: #b9bfd6;
  --accent: #89a6ff;
  --nav-height: 100px; /* wird per JS aktualisiert */
  --hero-fade-end: 0.40;       /* 40% der Viewport-Höhe */
  --hero-fade-distance: 64;    /* Pixel nach oben beim Scroll (sanft) */
    --svc-parallax-y: 32px;
  --svc-scale: 0.02;
  --svc-fade: 0.15;
  --svc-sticky-top: var(--nav-height, 0px);
   --gallery-gap: 48px;
}

/* Reset & base */
*{ box-sizing: border-box; }
html, body{ margin:0; padding:0; }
body{
  background: var(--bg-dark);
  color: var(--text);
  font: 400 16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
}

/* Navbar */
.navbar-container{
  position: fixed;
  inset: 0 0 auto 0;
  height: 72px;
  z-index: 1000;
  backdrop-filter: blur(6px);
  background: rgba(17,19,38,.5);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.navbar{
  max-width: 1100px;
  margin: 0 auto;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
}
.brand{ font-weight: 700; letter-spacing: .08em; color: var(--text); text-decoration: none; }
.nav-links a{
  color: var(--text); text-decoration:none; margin-left: 16px; opacity:.9;
}
.nav-links a:hover, .btn-cta:hover{ opacity: 1; }

/* Hero */
.hero{
  position: relative;
  z-index: 2; /* liegt über der (fixen) Gallery */
  background: #1b1c2e;
  color: #f8f8f8;
  padding-top: var(--nav-height, 72px);
  min-height: calc(100vh - var(--nav-height, 72px));
  display: grid;
  place-items: center;
  text-align: center;
  will-change: opacity, transform;
}
.hero-inner{ padding: 2rem 1rem; }

.hero-title{
  margin: 0 0 .25rem 0;
  font-size: clamp(2.6rem, 9vw, 6rem);
  letter-spacing: .08em;
  line-height: 1.05;
}
.hero-byline{
  display: block;
  margin-top: .2rem;
  font-size: clamp(.9rem, 1.8vw, 1.2rem);
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .85;
}
.hero-subtitle{
  margin: .35rem 0 1.25rem;
  font-size: clamp(1rem, 2.6vw, 1.5rem);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(248,248,248,.85);
  text-shadow: 0 2px 14px rgba(0,0,0,.35);
}

/* CTA + Fokus-States (A11y) */
.btn-cta{
  display: inline-block;
  padding: .75rem 1.1rem;
  border-radius: 12px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.16);
  color: #f8f8f8; text-decoration: none;
  transition: transform .15s ease, opacity .15s ease, background .15s ease;
}
.btn-cta:hover{ opacity: 1; background: rgba(255,255,255,.12); transform: translateY(-1px); }
.btn-cta:focus-visible{
  outline: 2px solid #fff; outline-offset: 3px;
  box-shadow: 0 0 0 3px rgba(255,255,255,.15);
}

/* Reduced motion: statisch */
@media (prefers-reduced-motion: reduce){
  .hero{ transform: none !important; opacity: 1 !important; }
}
/* Gallery (exact structure; track fixed under navbar) */
.gallery{ margin-bottom: 0; }
.gallery-track{
  position: fixed;
  top: var(--nav-height);
  left: 0;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: .25rem;
  
  padding-bottom: 0; 
  will-change: transform;
  z-index: 0;
}

.gallery + .leistungen {
 margin-top: var(--gallery-gap);
}
.card{ 
  height: 700px; overflow: hidden; 
content-visibility: auto; contain-intrinsic-size: 400px; }
.card .card-image-wrapper{ height: 135%; will-change: transform; }
.card .card-image-wrapper img{ width: 100%; height: 100%; object-fit: cover; display: block; }

@media (max-width: 800px){ .gallery-track{ grid-template-columns: 1fr !important; } }


/* Sections */
.section{
  max-width: 1100px;
  margin: 0 auto;
  padding: 64px 16px;
}
.section h2{ font-size: clamp(1.6rem, 4.5vw, 2.2rem); margin: 0 0 1rem; }
.cards{
  display:grid; gap:16px;
  grid-template-columns: repeat(2,1fr);
}
.svc{ background: rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); border-radius:14px; padding:16px; }
.svc h3{ margin:.2rem 0 .5rem; }
.svc ul{ margin:0; padding-left:18px; }
@media (max-width: 900px){ .cards{ grid-template-columns:repeat(1,1fr); } }
@media (max-width: 600px){ .cards{ grid-template-columns: 1fr; } }



/* ===== LIGHTBOX ===== */
body.modal-open{ overflow: hidden; }
.lightbox{
  position: fixed;
  inset: 0;
  display: grid;
  grid-template-columns: 60px 1fr 60px;
  grid-template-rows: 60px 1fr 60px;
  background: rgba(0,0,0,.85);
  z-index: 2000; /* über Navbar/Gallery */
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .25s ease, transform .25s ease;
}
.lightbox[hidden]{ display:none; }
.lightbox.is-open{
  opacity: 1;
  transform: translateY(0);
}
.lb-figure{
  grid-column: 1 / -1;
  grid-row: 1 / -1;
  margin: 0;
  display: grid;
  grid-template-rows: 1fr auto;
  place-items: center;
  padding: 24px 14px 34px;
}
.lb-img{
  max-width: min(92vw, 1400px);
  max-height: 78vh;
  width: auto;
  height: auto;
  box-shadow: 0 12px 40px rgba(0,0,0,.6);
  border-radius: 10px;
}
.lb-caption{
  margin-top: 12px;
  text-align: center;
  color: #eee;
  font-size: 0.95rem;
  opacity: .9;
}

/* Buttons */
.lb-btn{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px; height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.35);
  background: rgba(0,0,0,.35);
  color: #fff;
  display: grid; place-items: center;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  user-select: none;
}
.lb-prev{ left: 16px; }
.lb-next{ right: 16px; }
.lb-close{
  top: 16px; right: 16px; transform: none;
  width: 40px; height: 40px; font-size: 22px;
  border: 1px solid rgba(255,255,255,.3);
}

.lb-btn:focus{ outline: 2px solid rgba(255,255,255,.8); outline-offset: 2px; }
.lb-btn:hover{ background: rgba(255,255,255,.08); }

@media (max-width: 560px){
  .lb-btn{ width: 38px; height: 38px; font-size: 24px; }
  .lb-prev{ left: 8px; } .lb-next{ right: 8px; }
  .lb-close{ right: 8px; }
  .lb-img{ max-width: 94vw; max-height: 70vh; }
}

/* kleiner Abstand direkt unter der Gallery */
.gallery + .leistungen{ margin-top: 0; }


.leistungen {
  margin-top: 0;
  padding-top: 0;
}
.leistungen-title {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 1rem;
  text-align: center;
  line-height: 1.3;
}

.leistungen-intro {
  max-width: 680px;
  margin: 0 auto 2.5rem auto;
  font-size: 1.05rem;
  line-height: 1.6;
  text-align: center;
  padding: 0 1rem;
}

/* Mobile */
@media (max-width: 600px) {
  .leistungen-title,
  .leistungen-intro {
    text-align: left;       /* bündig links */
    padding: 0 1rem;        /* gleiche Einrückung */
    margin-left: 0;
    margin-right: 0;
  }
  .leistungen-title {
    font-size: 1.5rem;
    margin-bottom: 0.75rem;
  }
  .leistungen-intro {
    font-size: 0.95rem;
    line-height: 1.5;
    margin-bottom: 1.5rem;
  }
}


/* 3 Spalten auf Desktop, mobil 1 Spalte */
.leistungen .cards{
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
}
@media (max-width: 800px){
  .leistungs .cards, .leistungen .cards{ grid-template-columns: 1fr; } /* safe */
}

/* Kartenstil + Startzustand für “einslicen” */
.card-svc{
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  padding: 16px 18px;
  color: #eaeaea;
  box-shadow: 0 4px 20px rgba(0,0,0,.08);

  /* Start unten + leicht kleiner + transparent */
  transform: translateY(28px) scale(.985);
  opacity: 0;
  will-change: transform, opacity;
}

.card-svc h3{ margin: 0 0 8px; font-size: 1.05rem; }
.card-svc ul{ margin: 0; padding-left: 1.1rem; }
.card-svc li{ margin: .35rem 0; }

/* Tuning-Variablen */
:root{
  --svc-translate: 28;   /* px Start-Offset nach unten */
  --svc-scale: .015;     /* wie stark “hochskaliert” wird */
  --svc-fade: .22;       /* Start-Transparenzstärke */
}

/* Reduced motion: keine Animation */
@media (prefers-reduced-motion: reduce){
  .card-svc{ opacity: 1; transform: none !important; }
}

/* Outro / Kontakt-Sektion */
.outro {
  background: var(--bg-dark, #0f0f1a);
  color: var(--text-light, #fff);
  text-align: center;
  padding: 4rem 1rem;
}

.outro h1 {
  font-size: 2.2rem;
  font-weight: 700;
  margin-bottom: 1rem;
  line-height: 1.3;
}

.outro h1 span {
  font-size: 1.3rem;
  font-weight: 400;
  color: var(--accent, #c9a86a); /* Gold-Akzent */
}

.outro h2 {
  font-size: 1.4rem;
  margin: 1.5rem 0 2rem;
  font-weight: 600;
}

.social-icons {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1.2rem;
}

.social-icons a {
  display: inline-flex;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  align-items: center;
  justify-content: center;
  transition: transform 0.25s ease, background 0.25s ease;
}

.social-icons a:focus,
.social-icons a:hover {
  background: var(--accent, #c9a86a);
  transform: translateY(-4px) scale(1.05);
}

.social-icons img {
  width: 26px;
  height: 26px;
}

/* Responsiv */
@media (max-width: 600px) {
  .outro {
    padding: 3rem 1rem;
  }
  .outro h1 {
    font-size: 1.8rem;
  }
  .outro h2 {
    font-size: 1.2rem;
  }
  .social-icons {
    gap: 1rem;
  }
  .social-icons a {
    width: 48px;
    height: 48px;
  }
  .social-icons img {
    width: 22px;
    height: 22px;
  }
}

/* Footer */
.site-footer{
  background: var(--bg-dark, #0f0f1a);
  border-top: 1px solid rgba(255,255,255,.12);
  color: var(--text, #e9edf1);
}

.site-footer .footer-inner{
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem 1rem;
  display: grid;
  gap: 1rem 2rem;
  grid-template-columns: 1fr;
  text-align: center;
}

.site-footer .brand{
  font-weight: 700;
  text-decoration: none;
  color: inherit;
  font-size: clamp(1.1rem, 2.4vw, 1.25rem);
}

.footer-nav{
  display: flex;
  gap: 1rem 1.5rem;
  justify-content: center;
  flex-wrap: wrap;
}

.footer-nav a{
  color: var(--muted, #b8c1cc);
  text-decoration: none;
  transition: color .2s ease, transform .2s ease;
}
.footer-nav a:hover,
.footer-nav a:focus{
  color: var(--accent, #c9a86a);
  transform: translateY(-1px);
  outline: none;
}

.footer-social{
  display: flex;
  gap: .9rem 1.25rem;
  justify-content: center;
  flex-wrap: wrap;
}
.footer-social a{
  color: var(--muted, #b8c1cc);
  text-decoration: none;
}
.footer-social a:hover,
.footer-social a:focus{
  color: var(--accent, #c9a86a);
}

.copy{
  display: block;
  margin-top: .5rem;
  color: var(--muted, #b8c1cc);
}

/* größere Screens: Footer in Spalten */
@media (min-width: 820px){
  .site-footer .footer-inner{
    grid-template-columns: 1fr auto auto 1fr;
    align-items: center;
    text-align: left;
  }
  .site-footer .brand{ justify-self: start; }
  .footer-social{ justify-self: end; }
  .copy{ grid-column: 1 / -1; text-align: center; }
}

/* Accessiblity helper (nur wenn du ihn nutzt) */
.visually-hidden{
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}
.cookie-hint {
  position: fixed;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  background: #222;
  color: #fff;
  font-size: 0.9rem;
  padding: 0.75rem 1rem;
  border-radius: 6px;
  display: flex;
  align-items: center;
  gap: 1rem;
  z-index: 1000;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.cookie-hint button {
  background: #fff;
  color: #222;
  border: none;
  padding: 0.35rem 0.75rem;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.85rem;
}
.cookie-hint button:hover {
  background: #ddd;
}