/* Reset */
* { margin: 0; padding: 0; box-sizing: border-box; }

/* ========= THEME TOKENS ========= */
:root{
  --spacing-sm:.5rem; --spacing-md:1rem; --spacing-lg:2rem; --spacing-xl:4rem;
  --border-radius:12px;
  --shadow-1:0 4px 16px rgba(0,0,0,.08);
  --shadow-2:0 6px 24px rgba(0,0,0,.12);
  --transition:all .25s ease;
  --header-height:72px;

  --color-bg:#ffffff;
  --color-surface:#f6f7f8;
  --color-surface-2:#eef0f2;
  --color-text:#0c0f14;
  --color-text-muted:#5e6672;
  --color-border:#e6e8eb;
  --color-primary:#86a294;
  --color-primary-contrast:#ffffff;
  --color-accent:#86a294;
  --header-bg:rgba(255,255,255,.9);
  --hero-overlay-1:rgba(44,47,52,.35);
  --hero-overlay-2:rgba(134,162,148,.25);
}
:root[data-theme="dark"]{
  --color-bg:#0c0f14;
  --color-surface:#202328;
  --color-surface-2:#2b2e33;
  --color-text:#ffffff;
  --color-text-muted:#b8bec8;
  --color-border:#2c2f34;
  --color-primary:#86a294;
  --color-primary-contrast:#0b0e13;
  --color-accent:#86a294;
  --header-bg:rgba(11,14,19,.85);
  --hero-overlay-1:rgba(11,14,19,.55);
  --hero-overlay-2:rgba(134,162,148,.2);
}
:root[data-theme="light"]{
  --color-bg:#ffffff;
  --color-surface:#f6f7f8;
  --color-surface-2:#eef0f2;
  --color-text:#0c0f14;
  --color-text-muted:#5e6672;
  --color-border:#e6e8eb;
  --color-primary:#86a294;
  --color-primary-contrast:#ffffff;
  --color-accent:#86a294;
  --header-bg:rgba(255,255,255,.9);
  --hero-overlay-1:rgba(41,44,49,.25);
  --hero-overlay-2:rgba(134,162,148,.2);
}

/* Base */
html{ scroll-behavior:smooth; }
body{
  font-family:'Roboto', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--color-text); background:var(--color-bg); line-height:1.6; overflow-x:hidden;
}
body.no-scroll{ overflow:hidden; }

h1,h2,h3,h4,h5{ font-family:'Playfair Display', Georgia, 'Times New Roman', serif; margin-bottom:var(--spacing-md); line-height:1.25; }
h1{ font-size:2.6rem; } h2{ font-size:2rem; } h3{ font-size:1.5rem; }

p{ margin-bottom:var(--spacing-md); color:var(--color-text); }
a{ color:var(--color-accent); text-decoration:none; transition:var(--transition); }
a:hover{ opacity:.9; }
img{ max-width:100%; height:auto; display:block; }

.container{ width:90%; max-width:1200px; margin:0 auto; padding:0 var(--spacing-md); }
.section{ padding:var(--spacing-xl) 0; }
.section-title{ text-align:center; margin-bottom:var(--spacing-xl); position:relative; }
.section-title::after{ content:''; display:block; width:72px; height:3px; background:var(--color-accent); margin:var(--spacing-md) auto; }

.btn{
  display:inline-block; padding:.85rem 1.4rem;
  background:var(--color-primary); color:var(--color-primary-contrast);
  border:1px solid transparent; border-radius:var(--border-radius);
  cursor:pointer; transition:var(--transition); font-weight:600; text-align:center;
  box-shadow:var(--shadow-1);
}
.btn:hover{ transform:translateY(-2px); box-shadow:var(--shadow-2); }
.btn:focus-visible{ outline:3px solid var(--color-accent); outline-offset:2px; }
.btn-outline{ background:transparent; color:var(--color-accent); border:2px solid var(--color-accent); }
.btn-outline:hover{ background:var(--color-accent); color:var(--color-primary-contrast); }

/* ===== Header & Navigation ===== */
header{
  position:fixed; inset:0 auto auto 0; width:100%;
  background:var(--header-bg); backdrop-filter:saturate(180%) blur(8px);
  box-shadow:0 2px 10px rgba(0,0,0,.08); z-index:1000;
  padding:var(--spacing-md) 0; transition:var(--transition);
}
header.scrolled{ padding:var(--spacing-sm) 0; }

.header-container{ display:flex; align-items:center; justify-content:space-between; gap:var(--spacing-md); min-width:0; }
.logo{ font-family:'Playfair Display', serif; font-size:1.8rem; font-weight:700; color:var(--color-text); white-space:nowrap; }

/* Nav-Layout */
.nav{ display:flex; align-items:center; gap:var(--spacing-md); flex:1 1 auto; min-width:0; }
.nav-menu{
  display:flex; align-items:center; list-style:none; gap:var(--spacing-lg);
  margin-left:auto; flex-wrap:nowrap; overflow:hidden;
}
.nav-item{ flex:0 0 auto; }
.nav-link{ color:var(--color-text); font-weight:500; position:relative; }
.nav-link::after{ content:''; position:absolute; bottom:-6px; left:0; width:0; height:2px; background:var(--color-accent); transition:var(--transition); }
.nav-link:hover::after{ width:100%; }

/* Rechte Seite (nur Icon auf Desktop) */
.nav-actions{
  display:flex; align-items:center; gap:.5rem; flex:0 0 auto; margin-left:var(--spacing-md);
}
.theme-toggle{
  background:var(--color-surface-2); color:var(--color-text);
  border:1px solid var(--color-border); border-radius:999px;
  width:36px; height:36px; padding:0; line-height:1;
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer;
  white-space:nowrap;
}
.theme-toggle:hover{ filter:brightness(1.04); }
.theme-icon{ font-size:1rem; }
.theme-toggle .theme-label{ display:none; }   /* Desktop: kein Text */

/* Hamburger (einmalig, Spalten-Layout) */
.hamburger{
  display:none; cursor:pointer; background:transparent; border:0;
  width:44px; height:40px; padding:6px;
  align-items:center; justify-content:center;
  flex-direction:column;           /* Bars untereinander */
  gap:6px;                         /* gleichmäßiger Abstand */
  position:relative; z-index:1101;
}
.bar{
  width:24px; height:2px; background:var(--color-text);
  border-radius:2px; flex:0 0 auto; transition:var(--transition);
}

/* ===== Hero ===== */
.hero{
  height:100vh;
  background:
    linear-gradient(var(--hero-overlay-1), var(--hero-overlay-1)),
    linear-gradient(135deg, var(--hero-overlay-2), transparent 70%),
    url('hero_bg_desktop.png') center/cover no-repeat;
  display:flex; align-items:center; justify-content:center;
  text-align:center; color:#fff; padding-top:84px; position:relative; overflow:hidden;
}
.hero-content{ max-width:800px; padding:var(--spacing-lg); position:relative; z-index:2; }
.hero-title{ font-size:3.4rem; margin-bottom:var(--spacing-md); color:#fff; opacity:0; transform:translateY(30px); animation:fadeInUp 1s ease forwards .4s; }
.hero-subtitle{
  font-size:1.4rem;
  margin-bottom:var(--spacing-lg);
  font-weight:500;               /* etwas kräftiger */
  color:rgba(255,255,255,0.9);   /* heller */
  opacity:0;
  transform:translateY(30px);
  animation:fadeInUp 1s ease forwards .7s;
  text-shadow:0 1px 3px rgba(0,0,0,0.4); /* bessere Lesbarkeit */
}

.hero .btn{ opacity:0; transform:translateY(30px); animation:fadeInUp 1s ease forwards 1s; }
.scroll-indicator{ position:absolute; bottom:30px; left:50%; transform:translateX(-50%); color:#fff; font-size:2rem; animation:bounce 2s infinite; z-index:2; background:transparent; border:none; cursor:pointer; }

/* About */
.about{ background:var(--color-surface); }
.about-container{ display:flex; align-items:center; gap:var(--spacing-xl); }
.about-image{ flex:1; border-radius:var(--border-radius); overflow:hidden; box-shadow:var(--shadow-1); background:var(--color-surface-2); }
.about-content{ flex:1; }

/* Services */
.services-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:var(--spacing-lg); }
.service-card{ background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--border-radius); padding:var(--spacing-lg); box-shadow:var(--shadow-1); transition:var(--transition); text-align:center; }
.service-card:hover{ transform:translateY(-8px); box-shadow:var(--shadow-2); }
.service-icon{ font-size:2.2rem; color:var(--color-accent); margin-bottom:var(--spacing-md); }
.service-title{ font-size:1.4rem; margin-bottom:var(--spacing-md); }

/* Testimonials */
.testimonials{ background:var(--color-surface); }
.testimonials-container{ position:relative; max-width:800px; margin:0 auto; overflow:hidden; }
.testimonials-slide{ display:flex; transition:transform .5s ease; }
.testimonial{ min-width:100%; padding:var(--spacing-lg); background:var(--color-surface-2); border:1px solid var(--color-border); border-radius:var(--border-radius); box-shadow:var(--shadow-1); text-align:center; }
.testimonial-image{ width:80px; height:80px; border-radius:50%; object-fit:cover; margin:0 auto var(--spacing-md); }
.testimonial-text{ font-style:italic; margin-bottom:var(--spacing-md); color:var(--color-text); }
.testimonial-author{ font-weight:700; color:var(--color-accent); }
.testimonial-nav{ display:flex; justify-content:center; margin-top:var(--spacing-lg); }
.testimonial-dot{ width:12px; height:12px; border-radius:50%; background:#bbb; margin:0 6px; cursor:pointer; transition:var(--transition); }
.testimonial-dot.active{ background:var(--color-accent); }

/* Blog */
.blog-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:var(--spacing-lg); }
.blog-card{ background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--border-radius); overflow:hidden; box-shadow:var(--shadow-1); transition:var(--transition); }
.blog-card:hover{ transform:translateY(-5px); }
.blog-image{ height:200px; object-fit:cover; }
.blog-content{ padding:var(--spacing-lg); }
.blog-title{ font-size:1.25rem; margin-bottom:var(--spacing-md); }
.blog-date{ font-size:.9rem; color:var(--color-text-muted); margin-bottom:var(--spacing-md); }

/* FAQ */
.faq{ background:var(--color-surface); }
.faq-container{ max-width:800px; margin:0 auto; }

/* Karte */
.faq-item{
  margin-bottom:var(--spacing-md);
  border-radius:var(--border-radius);
  overflow:hidden;
  box-shadow:var(--shadow-1);
  border:1px solid var(--color-border);
  background:var(--color-surface-2);
}

/* Frage-Button – Defaults entfernen + 100% Breite */
.faq-question{
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1rem;

  /* Reset native button look */
  appearance:none;
  -webkit-appearance:none;
  border:0;
  background:transparent;

  /* Unser Look */
  padding:var(--spacing-md);
  font:inherit;
  font-weight:600;
  color:var(--color-text);
  cursor:pointer;
}
.faq-question:focus-visible{
  outline:3px solid var(--color-accent);
  outline-offset:2px;
}

/* Antwort – animierte Höhe */
.faq-answer{
  background:var(--color-surface-2);
  max-height:0;
  overflow:hidden;
  padding:0 var(--spacing-md);
  transition:max-height .3s ease, padding .3s ease;
  color:var(--color-text);
}
.faq-answer.open{
  max-height:500px;
  padding:var(--spacing-md);
}


/* Contact */
.contact-container{ display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:var(--spacing-xl); }
.contact-info{ display:flex; flex-direction:column; gap:var(--spacing-md); }
.contact-item{ display:flex; align-items:center; gap:var(--spacing-md); }
.contact-icon{ width:42px; height:42px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--color-surface-2); color:var(--color-accent); border:1px solid var(--color-border); }
.contact-form{ background:var(--color-surface); border:1px solid var(--color-border); padding:var(--spacing-lg); border-radius:var(--border-radius); box-shadow:var(--shadow-1); }
.form-group{ margin-bottom:var(--spacing-md); }
.form-label{ display:block; margin-bottom:var(--spacing-sm); font-weight:600; }
.form-input,.form-textarea{ width:100%; padding:.85rem; border:1px solid var(--color-border); border-radius:var(--border-radius); font-family:inherit; background:var(--color-bg); color:var(--color-text); }
.form-textarea{ min-height:150px; resize:vertical; }

/* Footer */
footer{ background:#292c31; color:#fff; padding:var(--spacing-xl) 0 var(--spacing-md); }
:root[data-theme="dark"] footer{ background:#0b0e13; }
.footer-container{ display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:var(--spacing-xl); margin-bottom:var(--spacing-xl); }
.footer-logo{ font-family:'Playfair Display', serif; font-size:1.8rem; font-weight:700; color:#fff; margin-bottom:var(--spacing-md); }
.footer-title{ color:#fff; margin-bottom:var(--spacing-md); font-size:1.1rem; }
.footer-links{ list-style:none; }
.footer-link{ margin-bottom:var(--spacing-sm); color:#d3d6db; }
.footer-link a{ color:#d3d6db; } .footer-link a:hover{ color:#fff; }
footer p{
  color:rgba(255,255,255,0.85);   /* heller als grau */
  font-weight:400;                /* etwas kräftiger als normal */
  line-height:1.6;
  text-shadow:0 1px 2px rgba(0,0,0,0.4); /* bessere Lesbarkeit */
}

.social-links{ display:flex; gap:var(--spacing-md); margin-top:var(--spacing-md); }
.social-icon{ width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.08); color:#fff; transition:var(--transition); }
.social-icon:hover{ background:var(--color-accent); transform:translateY(-3px); }
.copyright{ text-align:center; padding-top:var(--spacing-lg); border-top:1px solid rgba(255,255,255,.12); font-size:.9rem; color:#d3d6db; }

/* Utilities */
.text-center{ text-align:center; }
.mb-sm{ margin-bottom:var(--spacing-sm); } .mb-md{ margin-bottom:var(--spacing-md); }
.mb-lg{ margin-bottom:var(--spacing-lg); } .mb-xl{ margin-bottom:var(--spacing-xl); }
.hidden{ opacity:0; transform:translateY(22px); transition:opacity .5s ease, transform .5s ease; }
.visible{ opacity:1; transform:translateY(0); }


/* ===== Gallery (Grid + Hover + Lightbox) ===== */
.gallery{ background:var(--color-surface); }

.gallery-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
  gap:var(--spacing-md);
}

.gallery-item{
  position:relative; overflow:hidden; border-radius:var(--border-radius);
  background:var(--color-surface-2);
  border:1px solid var(--color-border);
  box-shadow:var(--shadow-1);
  aspect-ratio: 4/3;                 /* harmonische Kacheln */
  display:block;
}
.gallery-image{
  width:100%; height:100%; object-fit:cover; transition:transform .35s ease, filter .35s ease;
}
.gallery-item::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(0,0,0,.35), rgba(0,0,0,0));
  opacity:0; transition:opacity .35s ease;
}
.gallery-item:hover .gallery-image{ transform:scale(1.06); filter:contrast(1.02) saturate(1.05); }
.gallery-item:hover::after{ opacity:1; }

/* Lightbox Overlay */
.lightbox{
  position:fixed; inset:0; background:rgba(0,0,0,.9);
  display:none; flex-direction:column; /* <- statt row, damit Caption unten sitzt */
  align-items:center; justify-content:center;
  z-index:2000; padding:clamp(12px, 3vw, 32px);
}
.lightbox.open{ display:flex; }
.lightbox-img{
  max-width:min(92vw, 1400px);
  max-height:80vh;
  border-radius:12px;
  box-shadow:0 12px 40px rgba(0,0,0,.5);
}
.lightbox-caption{
  margin-top:12px;
  color:#fff;
  text-align:center;
  font-size:0.95rem;
  line-height:1.4;
  opacity:.9;
  max-width:90%;
}

/* Controls */
.lb-btn{
  position:absolute; top:50%; transform:translateY(-50%);
  width:44px; height:44px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.15); color:#fff; border:1px solid rgba(255,255,255,.25);
  cursor:pointer; transition:background .2s ease, transform .2s ease;
  user-select:none;
}
.lb-btn:hover{ background:rgba(255,255,255,.25); transform:translateY(-50%) scale(1.05); }
.lb-prev{ left:16px; } .lb-next{ right:16px; }

.lb-close{
  position:absolute; top:16px; right:16px;
  width:40px; height:40px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.12); color:#fff; border:1px solid rgba(255,255,255,.25);
  cursor:pointer; transition:background .2s ease, transform .2s ease;
}
.lb-close:hover{ background:rgba(255,255,255,.22); transform:scale(1.05); }

/* Kleine Geräte: Controls etwas größer greifen */
@media (max-width: 576px){
  .lb-btn{ width:48px; height:48px; }
  .lb-prev{ left:10px; } .lb-next{ right:10px; }
}



/* Animations */
@keyframes fadeInUp{ to{ opacity:1; transform:translateY(0); } }
@keyframes bounce{ 0%,20%,50%,80%,100%{ transform:translateY(0) translateX(-50%);} 40%{ transform:translateY(-18px) translateX(-50%);} 60%{ transform:translateY(-9px) translateX(-50%);} }

/* ===== Responsive ===== */
@media (max-width: 992px){
  /* Layout-Anpassungen */
  .about-container{ flex-direction:column; }
  .about-image{ margin-bottom:var(--spacing-lg); }

  /* Header/Navi: Logo links, Burger rechts */
  .nav{
    display:flex;
    align-items:center;
    flex:1 1 auto;        /* Nav nimmt Restbreite ein */
    min-width:0;
  }

  /* Burger sichtbar und an den rechten Rand schieben */
  .hamburger{
    display:inline-flex;
    margin-left:auto;     /* schiebt den Burger ganz nach rechts */
    order:2;              /* Reihenfolge innerhalb .nav */
  }

  /* Desktop-Theme-Toggle verbergen */
  .nav-actions .theme-toggle{ display:none; }

  /* Off-Canvas Menü (nimmt keinen Platz im Header ein) */
  .nav-menu{
    order:3;
    position:fixed; left:0; top:var(--header-height);
    width:100%; height:calc(100vh - var(--header-height));
    flex-direction:column; gap:0; align-items:stretch; text-align:center;
    background:var(--color-bg); border-top:1px solid var(--color-border);
    padding:var(--spacing-lg) 0; box-shadow:0 10px 20px rgba(0,0,0,.2);
    transform:translateX(-100%); transition:transform .3s ease, opacity .2s ease;
    opacity:0; visibility:hidden; pointer-events:none; z-index:1100;
  }
  .nav-menu.active{ transform:translateX(0); opacity:1; visibility:visible; pointer-events:auto; }
  .nav-item{ margin:var(--spacing-md) 0; }

  /* Theme-Toggle im Menü (mit Text) */
  .nav-item-toggle{ display:block; margin-top:var(--spacing-md); }
  .theme-toggle--menu{
    width:auto; height:auto; padding:.6rem 1rem; border-radius:999px; margin:0 auto;
    gap:.5rem; display:inline-flex; align-items:center; justify-content:center;
  }
  .theme-toggle--menu .theme-label{ display:inline; } /* Mobil: Text sichtbar */
}


@media (max-width: 576px){
  :root{ --header-height:68px; }
  .section{ padding:var(--spacing-lg) 0; }
  .hero{ height:auto; min-height:100vh; }
  .hero-title{ font-size:2rem; }
}

/* Motion reduce */
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
}

/* Sonderfall (falls mal keine Links vorhanden sind) */
.nav.nav--no-links .hamburger { display: inline-flex; }
.nav.nav--no-links .nav-actions .theme-toggle { display: none; }