/* LEWINA — Layout: Container, Header/Nav, Sections, Footer, Grids */

.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* ---------- Header / Navigation ---------- */
.site-header {
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  box-shadow: 0 2px 10px rgba(25, 26, 24, 0.05);
  position: sticky;
  top: 0;
  z-index: 100;
  transition: background var(--transition-base), border-color var(--transition-base);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  min-height: 84px;
  transition: min-height var(--transition-base);
}
/* Wird per main.js gesetzt, sobald ueber die Schwelle gescrollt wurde */
.site-header.is-scrolled .site-header__inner { min-height: 70px; }

.site-logo { display: inline-flex; flex-shrink: 0; }
.site-logo img,
.site-logo svg { width: 175px; height: auto; transition: width var(--transition-base), filter var(--transition-base); }
.site-header.is-scrolled .site-logo img,
.site-header.is-scrolled .site-logo svg { width: 150px; }
/* Dach-Logo (lewina-dachmarke.svg) bleibt ein <img> und ist rein graphitfarben —
   im Header (dunkler Hintergrund) wird es per Filter auf Weiss gedreht. Gleiche
   brightness(0) invert(1)-Technik wie bei den Logo-Panels auf Akzentflaechen
   (siehe components.css/onepage.css).
   Therm-/Holzbau-Logo sind stattdessen direkt als <svg> eingebettet (siehe
   therm/index.html, holzbau/index.html): die Akzentfarbe (Wortmarke + Hauszeichen)
   und die Graphitfarbe (LEWINA-Schriftzug) sind darin als eigene CSS-Klassen
   ueber var(--brand-*-accent-tint) bzw. var(--color-text) verdrahtet und kippen
   dadurch schon selbststaendig korrekt pro Theme — kein Filter noetig/anwendbar. */
[data-theme="dark"] .site-logo img {
  filter: brightness(0) invert(1);
}

.nav-toggle {
  display: inline-flex;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: 0;
  padding: var(--space-2);
  cursor: pointer;
  z-index: 110;
}
.nav-toggle__bar {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--color-text);
  transition: transform var(--transition-fast), opacity var(--transition-fast), background var(--transition-base);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.site-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: var(--space-6);
}
.site-nav a {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--fs-300);
  letter-spacing: 0.065em;
  text-transform: uppercase;
  text-decoration: none;
  padding-block: var(--space-2);
  border-bottom: 2px solid transparent;
}
.site-nav a:not(.btn) { color: var(--color-text); }
.site-nav a:not(.btn):hover,
.site-nav a:not(.btn)[aria-current="page"] {
  border-bottom-color: var(--brand-accent);
}
/* .btn-Links (z.B. Kontakt) behalten ihre eigene Komponentenfarbe aus components.css */
.site-nav .btn { text-transform: none; border-bottom: none; }

/* Markenwort in Nav-Links (z.B. "LEWINA THERM") in der jeweiligen Logofarbe */
.nav-brand-word--therm { color: var(--brand-therm-accent-tint); }
.nav-brand-word--holzbau { color: var(--brand-holzbau-accent-tint); }

/* Hamburger-Menue bis 1151px: darunter reicht der Platz nicht fuer Logo,
   Menue (bis zu 5 Punkte), Sprachschalter und Theme-Toggle in einer Zeile
   (die Marken-Seiten mit 5 Menuepunkten liefen schon ab ~1000px ueber). */
@media (max-width: 1151px) {
  .nav-toggle { display: inline-flex; }
  .site-nav {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(70%, 26rem);
    background: var(--color-bg);
    padding: var(--space-9) var(--space-6) var(--space-6);
    transform: translateX(100%);
    transition: transform var(--transition-base), background var(--transition-base);
    overflow-y: auto;
  }
  .site-nav[data-open="true"] { transform: translateX(0); }
  .site-nav ul { flex-direction: column; align-items: flex-start; gap: var(--space-5); }
  .site-nav a { font-size: var(--fs-500); }
}
@media (min-width: 1152px) {
  .nav-toggle { display: none; }
  .site-nav { display: block !important; transform: none !important; position: static; }
}

/* ---------- Sections ---------- */
.section {
  padding-block: var(--space-9);
}
.section--tight { padding-block: var(--space-7); }
.section--kalkweiss { background: var(--color-bg); }
.section--leinen { background: var(--color-surface-muted); }
.section--naturstein { background: var(--color-surface-strong); }
/* Bewusst themen-fest — sehen in Hell- und Dunkelmodus gleich aus */
.section--dark { background: var(--color-graphit); color: var(--color-kalkweiss); }
.section--accent { background: var(--brand-accent); color: var(--color-white); }

.section-head {
  max-width: 46rem;
  margin-bottom: var(--space-7);
}
.section-head--center { margin-inline: auto; text-align: center; }

.eyebrow {
  display: inline-block;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--fs-300);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand-accent-tint);
  margin-bottom: var(--space-3);
}

/* ---------- Hero ---------- */
.hero {
  display: grid;
  gap: var(--space-7);
  align-items: center;
  padding-block: var(--space-8);
}
.hero__content { position: relative; z-index: 0; }
/* Dezentes Wasserzeichen: linker Teil des Logos (Hauszeichen), grossflaechig
   und sehr blass hinter dem Herotext. Rein dekorativ, daher aria-hidden.
   Farbe folgt --brand-accent - dadurch automatisch neutral (Text-Ton) auf der
   Dach-Seite, Kupfer auf therm/index.html, Salbei auf holzbau/index.html. */
.hero__watermark {
  position: absolute;
  top: -25%;
  left: -20%;
  width: 170%;
  min-width: 600px;
  max-width: 1000px;
  height: auto;
  color: var(--brand-accent);
  opacity: 0.06;
  z-index: -1;
  pointer-events: none;
  transition: opacity var(--transition-base);
}
/* Im Dunkelmodus verliert die Markenfarbe bei gleicher Deckkraft sichtbar an
   Praesenz vor dem dunklen Hintergrund - hier zusaetzlich angehoben, damit
   das Wasserzeichen weiterhin erkennbar bleibt. */
[data-theme="dark"] .hero__watermark {
  opacity: 0.12;
}
/* Eigener Stapelkontext mit hoeherem z-index als das Wasserzeichen (-1) im
   Textbereich, damit das Bild immer deckend im Vordergrund bleibt, auch dort,
   wo sich die Wasserzeichen-Flaeche mit dem Bildbereich ueberschneidet. */
/* Auf Mobil zuerst das Bild, danach der Text - einladender erster Eindruck
   statt eines langen Textblocks vor dem ersten sichtbaren Foto. Ab 900px
   (Grid nebeneinander, siehe unten) wieder normale Dokumentreihenfolge. */
.hero__media { position: relative; z-index: 1; order: -1; }
.hero__media img { border-radius: var(--radius-md); width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.hero h1 { font-size: var(--fs-900); margin-bottom: var(--space-5); }
@media (min-width: 900px) {
  .hero { grid-template-columns: 1.1fr 1fr; padding-block: var(--space-10); }
  .hero__media { order: 0; }
}

/* ---------- Erweiterbares Marken-Grid ---------- */
.brand-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--space-6);
}

/* ---------- Referenzen-Grid ---------- */
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-5);
}

.target-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-5);
}

/* ---------- Footer ---------- */
/* Bewusst themen-fest — Footer bleibt in beiden Modi graphitfarben */
.site-footer {
  background: var(--color-graphit);
  color: var(--color-kalkweiss);
  padding-block: var(--space-8) var(--space-6);
}
.site-footer a { color: var(--color-kalkweiss); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.site-footer__grid {
  display: grid;
  gap: var(--space-7);
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  margin-bottom: var(--space-7);
}
.site-footer__logo { display: block; }
.site-footer__logo img { width: 128px; height: 48px; margin-bottom: var(--space-4); }
.site-footer h4 { color: var(--color-kalkweiss); font-size: var(--fs-300); text-transform: uppercase; letter-spacing: 0.08em; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: var(--space-2); }
.site-footer__bottom {
  border-top: 1px solid rgba(245, 241, 233, 0.15);
  padding-top: var(--space-5);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  justify-content: space-between;
  font-size: var(--fs-300);
  color: var(--color-naturstein);
}
.site-footer__bottom ul { display: flex; gap: var(--space-5); flex-wrap: wrap; }

@media (min-width: 768px) {
  .section { padding-block: var(--space-10); }
}