/* ============================================================
   MARINA / PÖLZL Design Studio
   Palette: Warm Architectural Luxury
   ============================================================ */
:root {
  --stone:  #2F332F;  /* Deep Stone  – Text, Footer, Header   */
  --ivory:  #F4F0EA;  /* Soft Ivory  – Hintergrund            */
  --greige: #B8AEA1;  /* Warm Greige – Flächen                */
  --bronze: #A48664;  /* Muted Bronze – Akzent, Buttons       */
  --sage:   #8F988B;  /* Sage Grey   – sekundäre Elemente     */
}

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

html { scroll-behavior: smooth; }

body {
  font-family: 'Jost', sans-serif;
  background: var(--ivory);
  color: var(--stone);
  line-height: 1.75;
  font-size: 1.05rem;
}

h1, h2, h3, .logo {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
  color: var(--stone);
}
h1 { font-size: clamp(2.8rem, 6vw, 4.8rem); line-height: 1.08; letter-spacing: .04em; }
h2 { font-size: clamp(1.9rem, 3.5vw, 2.7rem); }

/* ---------- Header ---------- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.1rem clamp(1.2rem, 5vw, 4rem);
  transition: background .3s ease, box-shadow .3s ease;
}
.site-header.scrolled { background: rgba(47,51,47,.97); box-shadow: 0 2px 14px rgba(0,0,0,.25); }

.logo {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.45rem; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--ivory); text-decoration: none; white-space: nowrap;
}

.main-nav ul { display: flex; gap: 2.2rem; list-style: none; }
.main-nav a {
  color: var(--ivory); text-decoration: none;
  font-size: .82rem; text-transform: uppercase; letter-spacing: .16em;
  opacity: .85; padding-bottom: .25rem; border-bottom: 1px solid transparent;
}
.main-nav a:hover, .main-nav a.active { opacity: 1; border-color: var(--bronze); }

.lang-toggle { display: flex; gap: .4rem; }
.lang-toggle button {
  background: none; border: 1px solid var(--bronze); color: var(--ivory);
  font-family: inherit; font-size: .72rem; letter-spacing: .12em;
  padding: .3rem .7rem; cursor: pointer; opacity: .75;
}
.lang-toggle button.active { background: var(--bronze); opacity: 1; }

.nav-toggle { display: none; background: none; border: none; cursor: pointer; }
.nav-toggle span { display: block; width: 26px; height: 2px; background: var(--ivory); margin: 6px 0; }

@media (max-width: 820px) {
  .nav-toggle { display: block; }
  .main-nav { display: none; position: absolute; top: 100%; left: 0; right: 0;
              background: rgba(47,51,47,.97); padding: 1.5rem clamp(1.2rem,5vw,4rem); }
  .main-nav.open { display: block; }
  .main-nav ul { flex-direction: column; gap: .8rem; }
}

/* ---------- Hero (Startseite) ---------- */
.hero {
  min-height: 96vh; display: flex; align-items: center;
  background: linear-gradient(rgba(47,51,47,.5), rgba(47,51,47,.45)),
              url('../img/hero.jpg') center/cover no-repeat;
}
.hero-inner { padding: 0 clamp(1.2rem, 6vw, 6rem); max-width: 1300px; }
.hero h1 { color: var(--ivory); }
.hero .slogan {
  font-family: 'Cormorant Garamond', serif; font-style: italic;
  font-size: clamp(1.3rem, 2.5vw, 1.8rem); color: var(--greige); margin-top: 1rem;
}
.hero .fields {
  font-size: .8rem; letter-spacing: .3em; text-transform: uppercase;
  color: var(--sage); margin-bottom: 1.2rem;
}

/* ---------- Unterseiten-Kopf ---------- */
.page-hero {
  min-height: 42vh; display: flex; align-items: flex-end;
  background: linear-gradient(rgba(47,51,47,.55), rgba(47,51,47,.45)),
              url('../img/subpage-header.jpg') center/cover no-repeat;
}
.page-hero-inner { padding: 4rem clamp(1.2rem, 6vw, 6rem) 2.5rem; }
.page-hero-inner h1 { color: var(--ivory); }

/* ---------- Inhalt ---------- */
section.content {
  padding: clamp(3.5rem, 8vw, 6rem) clamp(1.2rem, 6vw, 6rem);
  max-width: 1200px; margin: 0 auto;
}
.lede { max-width: 46rem; font-size: 1.15rem; color: var(--stone); margin-bottom: 2rem; }
section.content h2 { margin-top: 2.5rem; margin-bottom: .8rem; }

.btn {
  display: inline-block; margin-top: 2rem; padding: .85rem 2.4rem;
  border: 1px solid var(--bronze); color: var(--ivory);
  text-decoration: none; text-transform: uppercase; letter-spacing: .16em;
  font-size: .8rem; transition: background .3s ease;
}
.btn:hover { background: var(--bronze); }

/* ---------- Projekte ---------- */
.filter-bar { display: flex; gap: .6rem; flex-wrap: wrap; margin: 2rem 0; }
.filter-btn {
  background: none; border: 1px solid var(--sage); color: var(--stone);
  font-family: inherit; font-size: .78rem; text-transform: uppercase;
  letter-spacing: .14em; padding: .45rem 1.2rem; cursor: pointer;
}
.filter-btn.active { background: var(--stone); color: var(--ivory); border-color: var(--stone); }

.project-grid {
  display: grid; gap: 1.8rem;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.project-card { display: block; }
.project-card img {
  width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block;
  transition: opacity .3s ease;
}
.project-card:hover img { opacity: .85; }
.project-card figcaption {
  padding: .8rem 0 0; font-size: .8rem; text-transform: uppercase;
  letter-spacing: .12em; color: var(--sage);
}
.project-card.hidden { display: none; }

/* ---------- Kontakt ---------- */
.contact-list { list-style: none; margin: 1.5rem 0 2.5rem; }
.contact-list li { margin-bottom: .5rem; }
.contact-list a { color: var(--stone); text-decoration-color: var(--bronze); }

.contact-form { max-width: 620px; }
.contact-form label {
  display: block; margin-bottom: .3rem;
  font-size: .8rem; text-transform: uppercase; letter-spacing: .12em; color: var(--sage);
}
.contact-form input, .contact-form textarea {
  width: 100%; padding: .8rem; margin-bottom: 1.2rem;
  border: 1px solid var(--sage); background: #fff; font-family: inherit; font-size: 1rem;
}
.contact-form input:focus, .contact-form textarea:focus { outline: 2px solid var(--bronze); }
.contact-form button {
  background: var(--stone); color: var(--ivory); border: none; cursor: pointer;
  padding: .95rem 2.6rem; text-transform: uppercase; letter-spacing: .14em; font-size: .85rem;
}
.contact-form button:hover { background: var(--bronze); }
.privacy-note { margin-bottom: 1.4rem; font-size: .85rem; }

/* ---------- Rechtstexte ---------- */
.legal h2 { margin-top: 2.2rem; }
.legal p { margin-bottom: 1rem; max-width: 46rem; }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--stone); color: var(--ivory);
  padding: 2.6rem clamp(1.2rem, 6vw, 6rem);
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between;
  font-size: .85rem; margin-top: 3rem;
}
.site-footer a { color: var(--ivory); opacity: .8; text-decoration: none; }
.site-footer a:hover { opacity: 1; }