/*
  LEWINA — Header-Chrome & Theme-Toggle, gemeinsam genutzt von allen Seiten
  (Dach-Startseite, den beiden Marken-Einzelseiten therm/index.html und
  holzbau/index.html, sowie impressum.html/datenschutz.html):
  Header-Layout mit Theme-Toggle, Team-Kacheln (nur Dach), Hinweis-Kachel
  fuer "Referenzfotos folgen in Kuerze" (nur Therm).
  Rein additiv — aendert keine Selektoren aus tokens/base/layout/components.
*/

/* Das dekorative Hero-Wasserzeichen (min-width 600px) ragt auf Handys ueber den
   rechten Rand. Ohne Begrenzung ist die Seite seitlich verschiebbar und mobile
   Browser weiten den Layout-Viewport auf — das Hamburger-Menue (position: fixed)
   saesse dann teils neben dem Bildschirm. Begrenzt wird auf <main> (nicht auf
   body, dessen Wert an den Viewport durchgereicht wuerde und die Ueberbreite
   bestehen liesse); "clip" statt "hidden" erzeugt keinen Scroll-Container. */
main { overflow-x: clip; }

/* ---------- Header: Nav + Aktionen (Theme-Toggle, Hamburger) rechts gruppiert ---------- */
.site-header__right {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}
.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* ---------- Theme-Toggle ---------- */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--transition-fast), border-color var(--transition-base), color var(--transition-base);
}
.theme-toggle:hover { background: var(--color-surface-muted); }
.theme-toggle__icon { width: 20px; height: 20px; pointer-events: none; }
.theme-toggle__icon--moon { display: none; }
[data-theme="dark"] .theme-toggle__icon--sun { display: none; }
[data-theme="dark"] .theme-toggle__icon--moon { display: block; }

/* ---------- Sprachwechsler (DE | EN) ----------
   Zwei Eintraege nebeneinander: die aktuelle Sprache als gefuellter <span>,
   die andere Sprache als Link auf die gleichwertige Seite. Optisch auf Hoehe/
   Rahmen des Theme-Toggles abgestimmt. Auf schmalen Handys (bis 479px) entfaellt
   der "aktuelle" Eintrag, damit Logo + Schalter + Theme-Toggle + Hamburger in
   eine Zeile passen — es bleibt ein 44-px-Knopf mit dem Kuerzel der Zielsprache;
   das Logo darf dort bei Platzmangel etwas schrumpfen. */
.lang-switch {
  display: inline-flex;
  align-items: stretch;
  height: 44px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  flex-shrink: 0;
  transition: background var(--transition-base), border-color var(--transition-base);
}
.lang-switch__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  padding: 0 var(--space-3);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.065em;
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-text);
  border-radius: 1px;
  transition: background var(--transition-fast), color var(--transition-fast);
}
a.lang-switch__item:hover { background: var(--color-surface-muted); }
.lang-switch__item:focus-visible { outline-offset: -3px; }
.lang-switch__item--current {
  background: var(--color-text);
  color: var(--color-bg);
}
@media (max-width: 479px) {
  .lang-switch__item--current { display: none; }
  .lang-switch__item { min-width: 44px; padding: 0 var(--space-2); }
  .site-header__inner { gap: var(--space-3); }
  .site-header__actions { gap: var(--space-2); }
  .site-logo {
    flex: 0 1 175px;
    min-width: 96px;
    transition: flex-basis var(--transition-base);
  }
  .site-header.is-scrolled .site-logo { flex-basis: 150px; }
  .site-logo img,
  .site-logo svg,
  .site-header.is-scrolled .site-logo img,
  .site-header.is-scrolled .site-logo svg { width: 100%; }
}

/* Hinweis-Kachel fuer "Referenzfotos folgen in Kuerze" (Therm-Referenzen) */
.coming-soon-note {
  background: var(--color-surface);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  max-width: 36rem;
  transition: background var(--transition-base);
}

/* ---------- Individueller Punkt-Cursor (siehe assets/js/cursor.js) ---------- */
/* Klasse wird nur per JS gesetzt (nur bei Maus/Trackpad) - ohne JS bzw. auf
   Touch-Geraeten bleibt der native Cursor unangetastet. */
.has-custom-cursor,
.has-custom-cursor * {
  cursor: none !important;
}
.has-custom-cursor input:not([type="checkbox"]):not([type="radio"]),
.has-custom-cursor textarea {
  cursor: text !important;
}
.custom-cursor {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
  transition: opacity 150ms ease;
}
.custom-cursor--visible {
  opacity: 1;
}
.custom-cursor__dot {
  position: absolute;
  top: -5px;
  left: -5px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--brand-accent);
  transition: transform 150ms ease, opacity 150ms ease;
}
/* Hand-Icon: bei interaktiven Elementen (siehe cursor.js) statt des Punkts.
   Kontur in Markenfarbe (stroke), Flaeche themenabhaengig schwarz/weiss
   (fill: --color-text) - die Pfade sind bereits als Umriss-Formen je Finger
   angelegt, daher fuellen sie sauber statt nur duenner Linien. */
.custom-cursor__hand {
  position: absolute;
  top: -4px;
  left: -4px;
  width: 24px;
  height: 24px;
  max-width: none;
  fill: var(--color-text);
  stroke: var(--brand-accent);
  opacity: 0;
  transform: scale(0.6);
  transition: transform 150ms ease, opacity 150ms ease;
}
.custom-cursor--hover .custom-cursor__dot {
  transform: scale(0);
  opacity: 0;
}
.custom-cursor--hover .custom-cursor__hand {
  opacity: 1;
  transform: scale(1);
}
/* Auf .section--accent (z.B. CTA-Band vor dem Kontaktformular) ist der Hintergrund
   selbst in Markenfarbe - dort Punkt/Handkontur auf Weiss umschalten, sonst
   verschwindet der Cursor auf der gleichfarbigen Flaeche (siehe cursor.js). */
.custom-cursor--on-accent .custom-cursor__dot {
  background: var(--color-white);
}
.custom-cursor--on-accent .custom-cursor__hand {
  stroke: var(--color-white);
  fill: var(--color-white);
}

/* ---------- Team (Über LEWINA) ---------- */
.team-section-heading {
  margin-top: var(--space-8);
  margin-bottom: var(--space-6);
  text-align: center;
}
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-6);
  max-width: 52rem;
  margin-inline: auto;
}
.team-card {
  text-align: center;
  background: var(--color-surface);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
  transition: background var(--transition-base);
}
/* Eigene Klasse statt ".team-card img", damit das Guetesiegel (ebenfalls ein
   <img> innerhalb der Karte, siehe .credential-badge) nicht versehentlich
   auch auf 140x140 Kreisform gezwungen wird. */
.team-card__photo {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto var(--space-4);
  box-shadow: var(--shadow-sm);
}
.team-card h4 { margin-bottom: var(--space-1); font-size: var(--fs-500); }
/* Titel-Label (z.B. "Holzbau-Meister", "Ing.") in derselben Farbe wie die
   Rollenzeile darunter statt der sonst fuer .eyebrow ueblichen Akzentfarbe,
   und mit knapperem Abstand zum Namen. */
.team-card .eyebrow {
  color: var(--color-text-subtle);
  margin-bottom: var(--space-1);
}
.team-card p { margin: 0; font-size: var(--fs-300); }
/* Bio-Absaetze: linksbuendig statt zentriert (bessere Lesbarkeit bei
   mehrzeiligem Fliesstext), erhoehte Spezifitaet noetig um ".team-card p"
   (Zeile oben) zu ueberschreiben. */
.team-card p.team-card__bio {
  text-align: left;
  color: var(--color-text-muted);
  margin-top: var(--space-4);
}
.team-card p.team-card__bio + p.team-card__bio {
  margin-top: var(--space-3);
}

/* ---------- Guetesiegel (liegende Reihe im Hero, siehe Dach-/Holzbau-Seite) ---------- */
/* Alle Logo-Varianten liegen bereits auf transparentem Grund vor - reiner
   Bild-Swap wie beim Sonne/Mond-Icon des Theme-Togglers. Eigene Breite je
   Siegel kommt aus den width/height-HTML-Attributen; die globale Regel
   "img { max-width:100%; height:auto }" (base.css) sorgt fuer korrekte
   Skalierung ohne dass hier eine feste Breite erzwungen werden muss. */
.credentials-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-7);
  margin-top: var(--space-8);
  padding-top: var(--space-7);
  border-top: 1px solid var(--color-border);
}
/* Variante fuer den Einsatz im Hero: etwas knapperer Abstand, da der Hero
   bereits eigenen Rhythmus (Eyebrow/H1/Lead/Buttons) mitbringt. */
.credentials-row--hero {
  margin-top: var(--space-6);
  padding-top: var(--space-6);
  gap: var(--space-4);
}
/* Auf schmalen Bildschirmen beide Guetesiegel verkleinern, damit sie in
   einer Zeile nebeneinander passen statt umzubrechen (230+140px Original-
   breite passt sonst nicht in die ca. 327px Container-Breite auf Mobil).
   Erstes/zweites Logo einzeln begrenzt statt einer gemeinsamen Breite,
   damit das Seitenverhaeltnis jedes Siegels erhalten bleibt. */
.credentials-row--hero .credential-badge:first-child img {
  width: 165px;
  height: auto;
}
.credentials-row--hero .credential-badge:last-child img {
  width: 100px;
  height: auto;
}
@media (min-width: 640px) {
  .credentials-row--hero {
    gap: var(--space-7);
  }
  /* Zurueck zur Originalgroesse (= width/height-Attribute im Markup);
     "width: auto" waere hier NICHT dasselbe wie "keine Regel" - es wuerde
     die eigentliche (viel groessere) Bilddatei-Aufloesung greifen lassen,
     begrenzt nur noch durch max-width:100%. */
  .credentials-row--hero .credential-badge:first-child img {
    width: 230px;
  }
  .credentials-row--hero .credential-badge:last-child img {
    width: 140px;
  }
}
/* Variante fuer den Einsatz direkt neben einem Button (kein Trennstrich/
   Abstand noetig, da schon "cta-credentials-row" die Aufteilung uebernimmt). */
.credentials-row--inline {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
  gap: var(--space-2);
}
/* Auf schmalen Bildschirmen alle drei Guetesiegel verkleinern, damit sie in
   einer Zeile nebeneinander passen statt umzubrechen (170+110+170px
   Originalbreite passt sonst nicht in die ca. 327px Container-Breite auf
   Mobil). Jedes Logo einzeln begrenzt statt einer gemeinsamen Breite, damit
   das jeweilige Seitenverhaeltnis erhalten bleibt. */
.credentials-row--inline .credential-badge:nth-child(1) img { width: 110px; height: auto; }
.credentials-row--inline .credential-badge:nth-child(2) img { width: 72px; height: auto; }
.credentials-row--inline .credential-badge:nth-child(3) img { width: 110px; height: auto; }
@media (min-width: 640px) {
  .credentials-row--inline {
    gap: var(--space-6);
  }
  /* Zurueck zur Originalgroesse (= width/height-Attribute im Markup); siehe
     Begruendung bei .credentials-row--hero weiter oben, warum hier nicht
     einfach "width: auto" verwendet wird. */
  .credentials-row--inline .credential-badge:nth-child(1) img { width: 170px; }
  .credentials-row--inline .credential-badge:nth-child(2) img { width: 110px; }
  .credentials-row--inline .credential-badge:nth-child(3) img { width: 170px; }
}
.credential-badge { display: inline-flex; }
.credential-badge__dark { display: none; }
[data-theme="dark"] .credential-badge__light { display: none; }
[data-theme="dark"] .credential-badge__dark { display: block; }

/* CTA-Button links, Guetesiegel rechts (Ende "Über LEWINA") */
.cta-credentials-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-6);
  margin-top: var(--space-7);
}

/* ---------- Hero-Diaschau (siehe assets/js/hero-slideshow.js) ---------- */
/* Alle Bilder liegen deckungsgleich uebereinander (position:absolute) und
   ueberblenden per Opacity - dadurch traegt keines der Bilder selbst zur
   Groesse des Containers bei, daher hier explizit aspect-ratio:4/3 statt wie
   sonst ueblich ueber "img { aspect-ratio }" (siehe layout.css). Selektoren
   bewusst als ".hero-slideshow .hero-slideshow__slide" (2 Klassen), damit
   sie sicher ueber "hero__media img" (Element+Klasse) in layout.css gewinnen. */
.hero-slideshow {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  cursor: pointer;
}
.hero-slideshow .hero-slideshow__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  opacity: 0;
  transition: opacity 1000ms ease;
}
.hero-slideshow .hero-slideshow__slide.is-active {
  opacity: 1;
}