/* ====== Basis & Farben ====== */
:root{
  --bg: #efe0c7;          /* warmes Beige */
  --bg-acc: #3e6a6c;      /* Petrol/Teal */
  --paper:#fffaf2;
  --text:#2a2a2a;
  --muted:#6a6a6a;
  --brand:#a04e3b;        /* Rotbraun */
  --gold:#d8b774;
  --shadow:0 10px 30px rgba(0,0,0,.12);
  --radius-xl:28px;
  --radius-xxl:42px;
  --page-max: 1480px;                 /* vorher ~1200px */
  --gutter: clamp(14px, 2.2vw, 28px); /* Seiten-Innenabstand */
  --offer-img-h: clamp(300px, 32vw, 440px); /* einheitliche Bildhöhe für Angebot */
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  line-height:1.8;
}
h1,h2,h3{font-family:"Cormorant Garamond", Georgia, serif; margin:0 0 .5rem}
h1{font-size:clamp(2.6rem,6vw,5rem); color:#fff}
h2{font-size:clamp(1.9rem,3.5vw,2.8rem); color:var(--brand)}
h3{font-size:clamp(1.3rem,2.8vw,1.8rem); color:var(--brand)}
.center{text-align:center}
.light{color:#f2efe9}
.sub{opacity:.9; margin:.2rem 0 1.2rem}

.wrap{max-width: var(--page-max);
  margin: 0 auto;
  padding: clamp(1.5rem, 4vw, 3rem) var(--gutter);
}

/* ====== NAV ====== */
.nav{position:fixed; top:0; left:0; right:0; z-index: index 100;
pointer-events: none;} /*not clickable while hidden */
.nav-inner{
  height:72px; display:flex; align-items:center; justify-content:space-between; max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 var(--gutter); 
  transition: background .25s ease, box-shadow .25s ease, border-color .25s ease;
}
/* hidden state (on hero): nothing visible */
.nav .brand,
.nav nav { 
  opacity: 0; transform: translateY(-10px);
  transition: opacity .25s ease, transform .25s ease;
}

/* visible state after scroll */
.nav.is-sticky { pointer-events: auto; }  /* clickable */
.nav.is-sticky .nav-inner{
  background: var(--bg);                  /* SOLID (no blur) */
  border-bottom: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 6px 20px rgba(0,0,0,.08);
}
.nav.is-sticky .brand,
.nav.is-sticky nav { 
  opacity: 1; transform: none;
}
.brand{font-family:"Cormorant Garamond"; color:var(--brand); font-weight:700;font-size: clamp(1.3rem, 2.2vw, 2rem); /* larger than before */}
.nav a{color:#a04e3b; text-decoration:none; padding:.45rem .75rem; border-radius:999px}
.nav a:hover{background:rgba(0,0,0,.06)}
a {
  color: var(--brand);
  text-decoration: none;
  font-weight: 600;
}

a:hover {
  text-decoration: underline;
}

/* ====== HERO ====== */
.hero{position:relative; height:100vh; overflow:hidden; background:#000}
.hero-bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.9}
.hero video {
  position: absolute;
  inset: 0;             /* füllt den gesamten Bereich */
  width: 100%;
  height: 100%;
  object-fit: cover;     /* beschneidet das Video, damit es die Fläche perfekt füllt */
  z-index: 0;
}
/* .hero-overlay{position:realtive; inset:0; display:grid; place-items:center; text-align:center; padding:1rem} */
.hero .overlay {
  position: relative;
  z-index: 1;            /* Text liegt über dem Video */
  display: grid;
  place-items: center;
  height: 100%;
  text-align: center;
}
/* .hero h1{ text-shadow:0 14px 40px rgba(0,0,0,.55) } */
.hero .overlay h1 {
  color: #a04e3b;
  text-shadow: 0 4px 20px rgba(0,0,0,0.6);
  font-size: clamp(2rem, 7vw, 5rem);
}
.scroll-indicator{position:absolute; left:50%; bottom:22px; transform:translateX(-50%); color:#fff; opacity:.85; font-size:.95rem}

/* ====== ANGEBOT ====== */
.angebot{background:var(--bg)}
.grid.two{display:grid; grid-template-columns:1.2fr 1fr; gap:clamp(1rem,3vw,2.2rem); align-items:center; margin-top:1.5rem}
.grid.two.reverse{grid-template-columns:1fr 1.2fr}
.grid.two.reverse .text{order:2}
.grid.two.reverse .img{order:1}
.img{overflow:hidden; box-shadow:var(--shadow)}
.round-xl{border-radius:var(--radius-xxl)}
.img img{width:100%; display:block}
.text p{color:var(--muted)}
.btn{display:inline-block; background:var(--brand); color:#fff; padding:.75rem 1.05rem; border-radius:14px; text-decoration:none; box-shadow:var(--shadow)}
.btn:hover{filter:brightness(1.05)}

/* ====== BEREICHE (Kacheln) ====== */
.areas{background:var(--bg-acc); color:#f2efe9}
.tiles{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,2.6vw,2rem); margin-top:1.6rem}
.card{background:rgba(255,255,255,.06); border-radius:26px; overflow:hidden; box-shadow:var(--shadow)}
.card-img img{width:100%; height:280px; object-fit:cover; display:block}
.card-body{padding:1rem; text-align:center}
.eyebrow{opacity:.92; margin:0 0 .35rem}
.card h3{margin:.1rem 0 1rem; color:#f7f3eb}
.btn.gold{background:var(--gold); color:#2b2b2b}

/* ====== ABOUT ====== */
.about{background:var(--bg-acc); color:#e9f5f5}
.about-grid{display:grid; grid-template-columns:1fr auto 1fr; gap:clamp(1rem,3vw,2.2rem); align-items:start}
.about-col h3{color:#f3e6c0; position:relative; margin-bottom:.5rem}
.about-col ul{margin:.6rem 0 0 1.2rem}
.portrait{width:360px; height:360px; border-radius:30px; overflow:hidden; margin:0 auto 1rem; border:4px solid rgba(255,255,255,.4); box-shadow:var(--shadow)}
.portrait img{width:100%; height:100%; object-fit:cover}
.mission{text-align:center; opacity:.95}

/* ====== KONTAKT ====== */
.contact{background:var(--bg)}
.contact-grid{display:grid; grid-template-columns:1fr; gap:clamp(1rem,3vw,2rem); justify-items: center;}
.contact-grid > div {
  text-align: center;           /* Text & Mail-Link mittig */
  margin: 0 auto;               /* Block selbst zentrieren */
  max-width: 640px;             /* angenehme Lesebreite */
}
.contact h2 {
  text-align: center;       /* Zentriert die Überschrift */
  margin-bottom: 2rem;      /* Schöner Abstand nach unten */
  color: var(--brand);      /* Beibehaltung deiner Farbwelt */
}
form{background:#fff; border:1px solid #eee; box-shadow:var(--shadow); border-radius:16px; padding:1rem}
label{display:block; font-weight:600; margin:.6rem 0 .25rem}
input, textarea{width:100%; padding:.8rem 1rem; border-radius:12px; border:1px solid #ddd; font:inherit; background:#fff}
textarea{min-height:140px; resize:vertical}
.submit{margin-top:1rem; background:var(--brand); color:#fff; border:none; padding:.9rem 1.1rem; border-radius:12px; cursor:pointer}


/* ====== FOOTER ====== */
.site-footer{background:#1f1f1f; color:#cfcfcf; text-align:center; padding:1.6rem 1rem}
.site-footer a{color:#e6d9c9; text-decoration:none}
.site-footer a:hover{text-decoration:underline}

/* ====== Responsive ====== */
@media (max-width: 1024px){
  .grid.two, .grid.two.reverse{grid-template-columns:1fr}
  .grid.two.reverse .text, .grid.two.reverse .img{order:unset}
  .about-grid{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
  .card-img img{height:260px}
}
@media (max-width: 720px){
  .tiles{grid-template-columns:1fr}
}