/*
Theme Name: baubuero zam
Theme URI: https://baubuerozam.de
Author: baubuero zam
Description: Individuelles WordPress-Theme für baubuero zam - nachhaltiges & innovatives Bauen im Allgäu.
Version: 3.1
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: baubuerozam
*/


@font-face {
  font-family: "Giano";
  src: url("fonts/Giano-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Giano";
  src: url("fonts/Giano-Medium.ttf") format("truetype");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Giano";
  src: url("fonts/Giano-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Giano";
  src: url("fonts/Giano-Bold.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Apercu Mono Pro";
  src: url("fonts/ApercuMonoProRegular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Apercu Mono Pro";
  src: url("fonts/ApercuMonoProMedium.ttf") format("truetype");
  font-weight: 500;
  font-display: swap;
}

:root {
  --c-bg: #F9F9F9;
  --c-ink: #000000;
  --c-taupe: #928C79;
  --c-taupe-dark: #918B79; /* durchschaltender Text */
  --c-sand: #D0CBB4;
  --c-sage: #546055;
  --c-forest: #2F3D32; /* nur noch als Hintergrund: Kontaktformular-Streifen */
  --c-clay: #918B79; /* dunkler Ton für den Projekte-Streifen */

  /* Eine einzige Quelle für die allgemeine Schriftfarbe. Früher war der
     gesamte Fließtext und alle Überschriften dunkelgrün (--c-forest);
     auf Wunsch ist die allgemeine Schrift jetzt durchgehend schwarz.
     Grün lebt nur noch als Hintergrundfläche des Kontaktformulars weiter.
     Über diese Variable lässt sich der Ton zentral nachjustieren, ohne
     dass irgendwo eine Stelle vergessen werden kann. */
  --c-text: #000000;
  /* Etwas zurückgenommene Schrift (Meta-Angaben, Bildunterschriften,
     Fußzeile) - bewusst ein neutrales Grau statt des alten Grüns. */
  --c-text-muted: #5A5A5A;

  --font-sans: "Giano", -apple-system, sans-serif;
  --font-mono: "Apercu Mono Pro", ui-monospace, "SF Mono", monospace;

  --gap: clamp(20px, 4vw, 64px);
  --edge: clamp(20px, 5vw, 72px);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; }

/* Sorgt dafür, dass Klicks auf die Nav-Punkte (und jeder andere
   Sprung zu einem #anchor) mit der Oberkante des Abschnitts genau unter
   der Nav-Leiste ankommen, statt dahinter versteckt zu sein. Der exakte
   Wert wird per JS aus der tatsächlichen Höhe der Leiste gesetzt (siehe
   script.js) - --header-h ist hier nur der Startwert, bevor JS geladen hat. */
html { scroll-behavior: smooth; scroll-padding-top: var(--header-h, 84px); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Für Inhalte, die für Suchmaschinen/Screenreader da sein sollen, ohne
   das sichtbare Layout zu verändern - z.B. das echte H1 auf der
   Startseite, dessen Aufgabe (Firmenname zeigen) das Logo im Hero schon
   visuell übernimmt. Gängiges, barrierefreies Muster (statt display:none,
   das Screenreadern den Inhalt ebenfalls vorenthalten würde). */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

img, video { display: block; max-width: 100%; }

.mono {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: lowercase;
}

/* ---------------- Header / Nav ---------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(249, 249, 249, 0.86);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(0,0,0,0.06);
}

.main-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px var(--edge);
  gap: 24px;
  position: relative;
}

/* Logo erscheint erst, sobald der Hero-Bereich verlassen wurde; Klick -> nach oben */
.nav-logo {
  position: absolute;
  left: var(--edge);
  display: block;
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}
.nav-logo img {
  display: block;
  height: 22px;
  width: auto;
}
.site-header.is-scrolled .nav-logo {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.nav-links {
  list-style: none;
  display: flex;
  gap: 4px;
  margin: 0;
  padding: 0;
  font-family: var(--font-mono);
  font-size: 0.9rem; /* +15% ggü. 0.78rem */
  letter-spacing: 0.04em;
  align-items: center;
  transition: margin-left 0.4s var(--ease);
}
.site-header.is-scrolled .nav-links:first-of-type {
  margin-left: 56px;
}

.nav-links a {
  display: inline-block;
  padding: 9px 16px;
  border-radius: 999px;
  transition: background-color 0.35s var(--ease), color 0.35s var(--ease);
}

/* "das sind die Felder, die sich farblich hinterlegen sollen, wenn man drüberhovert".
   .is-active wird per Scrollspy (script.js) gesetzt, sobald man sich auf der
   Seite am jeweiligen Abschnitt befindet - gleiche Hinterlegung wie beim Hover. */
.nav-links a:hover,
.nav-links a:focus-visible,
.nav-links a.is-active {
  background-color: var(--c-sand);
  color: var(--c-text);
}

.nav-sep {
  opacity: 0.4;
  padding: 0 2px;
}

/* ---------------- Mobile-Nav: Hamburger + seitliches Ausklapp-Menü ----------------
   Nur < 900px sichtbar (siehe Media Query weiter unten). Von Anfang an
   da (nicht erst beim Scrollen) - genau wie jetzt, nur dass zusätzlich
   die zwei Striche oben rechts sichtbar sind. Das Z-Logo blendet beim
   Scrollen weiterhin genauso ein wie auf Desktop (.is-scrolled), daran
   ändert sich nichts. */
.nav-burger {
  display: none;
  margin-left: auto; /* rechtsbündig, unabhängig davon wie viele andere Nav-Elemente sichtbar sind */
  width: 32px;
  height: 22px;
  border: none;
  background: transparent;
  padding: 0;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  z-index: 2;
}
.nav-burger span {
  display: block;
  height: 2px;
  background: var(--c-forest);
  border-radius: 2px;
}

.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 300;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}
.mobile-nav.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s ease;
}

/* Blendet sich - genau wie das Vita-Fenster beim Team-Foto - komplett
   über die ganze Seite, statt seitlich hereinzufahren: gleicher Blur-
   Hintergrund, gleiches reines Opacity-Fading, kein Kasten/Schatten mehr. */
.mobile-nav__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(249, 249, 249, 0.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transform: translateZ(0);
}

.mobile-nav__panel {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 32px;
  overflow-y: auto;
}

.mobile-nav__close {
  position: absolute;
  top: 20px;
  right: 24px;
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  color: var(--c-text);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}

/* Bewusst in der mono-Schrift, wie gewünscht */
.mobile-nav__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.mobile-nav__links a {
  font-family: var(--font-mono);
  font-size: 1.3rem;
  letter-spacing: 0.02em;
  color: var(--c-text);
  padding: 12px 0;
}
/* Instagram als letzter Punkt bleibt bewusst etwas zurückgenommen -
   jetzt aber als neutrales Grau statt Grün (allgemeine Schrift ist schwarz). */
.mobile-nav__links a:last-child { color: var(--c-text-muted); }

/* ---------------- Intro (Hero + Video) ----------------
   Füllt mindestens einen vollen Bildschirm, damit beim Betreten der
   Seite ausschließlich Logo, durchschaltender Text und Video zu sehen
   sind - kein Bild/Text der folgenden Sektionen ragt schon ins Bild. */
.intro {
  min-height: 100vh; /* Fallback für Browser ohne svh */
  min-height: 100svh;
  /* Bewusst kein Flexbox hier: .hero und .teaser sind ganz normale
     Block-Sektionen und stapeln sich von allein von oben nach unten -
     kein flex-stretch/percentage-Ketten-Risiko für die Video-Breite. */
}

/* ---------------- Hero ---------------- */

.hero {
  display: flex;
  justify-content: space-between;
  align-items: flex-end; /* "zam" sitzt unten im Logo-Bild -> am unteren Rand ausrichten */
  flex-wrap: wrap;
  gap: 8px;
  /* Oben (Nav-Leiste -> Logo) und unten (Logo -> Video) bewusst mit
     demselben Wert - beide Abstände sollen optisch gleich groß wirken. */
  padding: clamp(24px, 4vw, 48px) var(--edge) clamp(24px, 4vw, 48px);
  /* Eine einzige Quelle für die Logo-Höhe, an die sich der durchschaltende
     Text direkt per calc() koppelt (siehe .hero-cycle__viewport) - so
     laufen beide bei JEDER Fensterbreite synchron, nicht nur an den
     Rändern zweier separat gepflegter clamp()-Kurven. */
  --hero-logo-h: clamp(46px, 8vw, 72px);
}

/* Logo-Bild enthält "baubuero" (kleine Zeile) + "zam" (große Zeile).
   Pixelmessung am tatsächlichen Logo-Bild: "zam" füllt exakt 53,1% der
   Bildhöhe aus (Zeile 334-711 von 712px). */
.hero-logo {
  display: block;
  height: var(--hero-logo-h);
  width: auto;
}

/* Durchschaltender Text, Referenz dt-mediagroup.com.
   Schriftgröße direkt an --hero-logo-h gekoppelt statt an eine eigene
   clamp()-Kurve, damit beide bei jeder Fensterbreite exakt im selben
   Verhältnis mitskalieren. Faktor 1.035 kommt aus dem Vergleich zweier
   Messungen: "zam" nimmt im Logo-Bild 53,1% der Bildhöhe ein; in Giano
   Bold (gleiche Glyphen-Metrik wie zuvor Hanken Grotesk Bold) liegt die
   reine Versal-/x-Höhe von "z", "a" und "m"
   (ohne Ober-/Unterlängen, die andere Wörter wie "bauen" oder "gestalten"
   durch Buchstaben wie b/l/t/g zusätzlich haben) bei 51,3% der
   Schriftgröße. 53,1 / 51,3 = 1.035 - die Schriftgröße ist damit exakt so
   gewählt, dass die x-Höhe der durchschaltenden Wörter (der Teil, der die
   optische Größe dominiert) der Höhe von "zam" im Logo entspricht;
   Ober-/Unterlängen einzelner Wörter ragen bewusst etwas darüber hinaus,
   das ist normales Schriftverhalten, keine Fehlgröße. Auf Wunsch nochmal
   etwas kleiner gesetzt (Faktor 0.85 statt 1.035). Breite wird per JS
   an das jeweils breiteste Wort angepasst (verhindert abgeschnittene
   Buchstaben), min-width unten ist nur ein Fallback bis das Script
   gelaufen ist. Extra Zeilenhöhe verhindert, dass Ober-/Unterlängen oben/
   unten abgeschnitten werden. */
/* Der durchlaufende Text soll auf DERSELBEN Grundlinie sitzen wie
   "zam" im Logo. Bisher lagen nur die beiden Kästen bündig - weil ein
   Textkasten unterhalb der Grundlinie aber immer noch Platz für
   Unterlängen (g, j, p) reserviert, saß die sichtbare Schrift dadurch
   spürbar höher als das Logo.

   Rechenweg (alles in em der Schriftgröße, Giano Bold: ascent 1.0,
   descent 0.303): in einer Zeile mit line-height 1.3 liegt die
   Grundlinie rund 1.0em unter der Zeilenoberkante, darunter folgen
   0.3em Unterlängen-Reserve. Ein negativer unterer Außenabstand von
   genau diesen 0.3em schiebt den Kasten so weit nach unten, dass seine
   Grundlinie exakt auf der Logo-Unterkante liegt - die Unterlängen
   ragen dann korrekt darunter hinaus, statt den Text nach oben zu
   drücken.

   Angenehmer Nebeneffekt: dadurch zählt für die Zeilenhöhe nur noch
   1.0em (61% der Logohöhe), das Logo ist also das höchste Element der
   Zeile. Der obere Innenabstand von .hero wirkt damit direkt als
   Abstand "Menüleiste -> Logo" und ist exakt so groß wie der untere
   Abstand "Logo -> Video" - ohne Korrekturwerte. */
.hero-cycle__viewport {
  position: relative;
  height: 1.3em;
  margin-bottom: calc(var(--hero-logo-h) * 0.85 * -0.303);
  font-size: calc(var(--hero-logo-h) * 0.85);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.3;
  color: var(--c-taupe-dark);
  min-width: 10ch;
  overflow: hidden;
  text-align: right;
}

/* Die Rolle sitzt bündig oben im Sichtfenster; die Grundlinien-
   Ausrichtung passiert vollständig über den negativen unteren
   Außenabstand des Sichtfensters (siehe ausführlichen Kommentar dort).
   Bewusst KEIN zusätzlicher Versatz per top/padding/transform mehr:
   genau solche zusätzlichen Verschiebungen waren die Ursache dafür,
   dass der Text zwischenzeitlich unberechenbar nach unten versprang. */
.hero-cycle__reel {
  list-style: none;
  margin: 0;
  padding: 0;
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
  text-align: right;
  transition: transform 0.6s var(--ease);
}
.hero-cycle__reel li {
  height: 1.3em;
  line-height: 1.3;
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .hero-cycle__reel { transition: none; }
}

/* ---------------- Teaser-Video (spielt beim Laden, endlos) ---------------- */

main { overflow: hidden; }

/* Liegt links, wie im Wireframe - nicht über die volle Breite.
   Strikt 4:3, wie alle anderen Bilder auf der Seite. */
.teaser {
  position: relative;
  max-width: 1500px;
  margin: 0 auto;
  padding: 0 var(--edge) clamp(56px, 9vw, 120px);
}
.teaser__inner {
  position: relative;
  /* vw statt % - hängt dadurch an nichts anderem als der Fensterbreite,
     nicht an einer berechneten Breite von .teaser (Absicherung, falls das
     vorher die Ursache war, warum das Video nicht sichtbar war).
     Bewusst OHNE festen Pixel-Deckel: eine fixe px-Obergrenze hätte das
     Video ab einer bestimmten Fensterbreite exakt an einem Punkt
     "einfrieren" lassen, statt es durchgehend mitwachsen zu lassen - genau
     das soll hier nicht passieren. Einzige Grenze bleibt 106vh (bei 4:3
     Seitenverhältnis ≈ 80vh Höhe), damit das Video auf sehr kurzen/breiten
     Fenstern nicht höher als der sichtbare Bereich wird. */
  width: min(70vw, 106vh);
  aspect-ratio: 4/3;
}
.teaser__video,
.teaser__fallback {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 2px;
  display: block;
}
/* Fallback liegt als Sicherheitsnetz dahinter; das Video selbst ist immer
   sichtbar (zeigt bis zum Play-Start automatisch sein poster-Bild) -
   keine Sichtbarkeit mehr, die von JavaScript abhängt. */
.teaser__fallback { position: absolute; inset: 0; z-index: 0; }
.teaser__video { position: absolute; inset: 0; z-index: 1; }

@media (max-width: 900px) {
  /* Fest auf eine eigene volle Zeile unter dem Logo gesetzt (flex-basis:100%),
     statt sich je nach verfügbarem Platz mal daneben, mal darunter
     einzureihen. Vorher konnte die per JS gemessene Breite (vor/nach dem
     Laden der Web-Font "Giano" unterschiedlich) genau an der Grenze
     liegen, ob der Text noch neben das Logo passt oder nicht - dieser
     Randfall zeigte sich als "spontanes" Herunterspringen des Texts,
     abhängig davon, wie schnell die Schrift geladen war. Mit fester
     eigener Zeile bleibt die Position immer gleich, unabhängig vom
     Ladezeitpunkt der Schrift. */
  .hero-cycle__viewport { flex-basis: 100%; margin-left: 0; }

  /* Video im Hochformat statt quer - randlos (kein --edge-Abstand mehr),
     damit es den Handybildschirm wirklich ausfüllt statt durch die
     seitlichen Ränder spürbar kleiner zu wirken. Seitenverhältnis bleibt
     bei 3:4 (Teil der strikten 4:3/3:4-Regel der Seite). */
  .teaser { padding-left: 0; padding-right: 0; }
  .teaser__inner { width: 100%; aspect-ratio: 3/4; border-radius: 0; }
  .teaser__video, .teaser__fallback { border-radius: 0; }
}

/* ---------------- Nicht-klickbare Bilder ---------------- */

.img-block {
  margin: 0;
  overflow: hidden;
  border-radius: 2px;
}
.img-block img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------------- Team-Foto: Hotspots + Vita-Popup ---------------- */

.team-photo { position: relative; }

.team-hotspot {
  position: absolute;
  transform: translate(-50%, -50%);
  width: clamp(56px, 9%, 96px);
  aspect-ratio: 1;
  border-radius: 50%;
  border: none;
  background: transparent;
  padding: 0;
  cursor: none; /* eigener runder Cursor übernimmt die Rückmeldung */
}

/* Ein einziger, einfacher Opacity-Übergang für alles zusammen - kein
   Zusammenspiel mehrerer versetzter Transitions mehr, dadurch spürbar
   flüssiger als vorher. */
.team-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0s linear 0.2s;
}
.team-modal.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.2s ease;
}

/* Blurt die GANZE Seite dahinter, keine dunkle Fläche. Der Blur-Radius
   selbst bleibt konstant (nur Opacity animiert sich) - Blur-Radius zu
   animieren ist teuer fürs Rendering und macht Übergänge ruckelig.
   Radius bewusst moderater (14 statt 18px) und mit eigenem
   Compositor-Layer (will-change/transform:translateZ(0)) - blurt eine
   randlose, fixed-position Fläche über der ganzen Seite ist eine der
   teureren CSS-Operationen, gerade auf älteren/mobilen Geräten; das
   hält den Öffnen-Übergang spürbar flüssiger, ohne sichtbar weniger
   unscharf zu wirken. */
.team-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(249, 249, 249, 0.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transform: translateZ(0);
  will-change: opacity;
}

/* Kein Kasten mehr: kein Hintergrund, kein Schatten, kein Radius - die
   Schrift schwebt direkt über dem geblurrten Hintergrund. Das X sitzt
   zentriert über dem Text, weil es einfach das erste Element im
   zentrierten Flex-Stack ist statt absolut positioniert in einer Ecke.
   Transition verkürzt (0.3s -> 0.2s) und auf transform beschränkt -
   fühlt sich beim Öffnen/Schließen spürbar direkter/flüssiger an. */
.team-modal__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: calc(100% - 56px);
  max-width: 420px;
  max-height: 80vh;
  overflow-y: auto;
  transform: scale(0.98) translateZ(0);
  transition: transform 0.2s ease;
  will-change: transform;
}
.team-modal.is-open .team-modal__content {
  transform: scale(1) translateZ(0);
}

.team-modal__close {
  margin: 0 0 22px;
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  color: var(--c-text);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}

.team-modal__name {
  font-size: clamp(1.2rem, 2.6vw, 1.5rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 14px;
  color: var(--c-text);
}

/* Vita-Text bewusst in der mono-Schrift, wie im Rest der Seite für
   Meta-Angaben verwendet - eigene, etwas größere Ausprägung statt der
   winzigen .mono-Größe, damit ein ganzer Absatz gut lesbar bleibt. */
.team-modal__bio {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.01em;
  line-height: 1.75;
  color: var(--c-text);
  margin: 0;
}

body.modal-open { overflow: hidden; }

/* ---------------- Zwei-Spalten-Abschnitte (Haltung, Material, ...) ---------------- */

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
  align-items: center;
  max-width: 1500px;
  margin: 0 auto;
  padding: clamp(24px, 5vw, 56px) var(--edge);
}

.split--haltung { padding-top: clamp(4px, 1.2vw, 16px); }
.split--haltung .img-block { aspect-ratio: 3/4; }

.split-images {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
}
.split-images .img-block { aspect-ratio: 3/4; }

.split--warum .img-block { aspect-ratio: 4/3; }
.split--davon-hast .img-block { aspect-ratio: 3/4; }
.split--team .img-block { aspect-ratio: 4/3; } /* Gipfelfoto ist im Original 4:3 (Querformat) */
.split--kurze-wege .img-block { aspect-ratio: 4/3; }

.split-text h2,
.split-text h3 {
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  font-weight: 600;
  margin: 0 0 20px;
  color: var(--c-text);
}

.split-text p {
  max-width: 50ch;
  color: var(--c-text);
  font-size: 0.98rem;
}

.text-block {
  max-width: 1500px;
  margin: 0 auto;
  padding: 0 var(--edge) clamp(40px, 7vw, 96px);
}
.text-block h3 {
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  font-weight: 600;
  margin: clamp(32px, 5vw, 56px) 0 16px;
  color: var(--c-text);
}
.text-block > h3:first-child,
.text-block > p:first-child {
  margin-top: 0;
}
.text-block p { max-width: 60ch; color: var(--c-text); font-size: 0.98rem; margin: 0 0 12px; }
.text-block figure.wp-block-image,
.text-block .wp-block-image {
  max-width: 640px;
  margin: 24px auto;
  border-radius: 2px;
  overflow: hidden;
}
.text-block .wp-block-image img { display: block; width: 100%; height: auto; }

/* ---------------------------------------------------------
   .site-content: der frei mit normalen WordPress-Bausteinen gestaltbare
   Bereich (Startseite + Projekt-Detailseiten). Spalten, Bilder,
   Überschriften, Absätze und Gruppen bekommen hier die Marken-Optik -
   reine CSS-Zuordnung zu den Standard-Klassen, die core/columns,
   core/group, core/image usw. selbst mitbringen. Kein eigener Block-Code
   nötig, alles bleibt frei verschieb-, hinzufüg- und löschbar.
--------------------------------------------------------- */
/* Die eigenen zam-Bausteine "Bildreihe" und "Video" stehen als direkte
   Kinder im Inhalt und müssen dieselbe Satzbreite und denselben
   Seitenrand bekommen wie alle anderen Abschnitte - sonst liefen sie
   randlos über die ganze Fensterbreite und fielen aus der Flucht.
   (Der Kontakt-Baustein ist bewusst NICHT dabei: er ist ein farbiger
   Streifen über die volle Breite und bringt seine Innenbreite selbst
   mit, siehe .kontakt__inner.) */
.site-content > .wp-block-columns,
.site-content > .wp-block-group,
.site-content > .wp-block-heading,
.site-content > p,
.site-content > .wp-block-image,
.site-content > .wp-block-gallery,
.site-content > .bildreihe,
.site-content > .zam-video {
  max-width: 1500px;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--edge);
  padding-right: var(--edge);
}
.site-content > * {
  padding-top: clamp(20px, 3vw, 40px);
  padding-bottom: clamp(20px, 3vw, 40px);
}
.site-content > *:first-child { padding-top: clamp(40px, 7vw, 96px); }
.site-content > *:last-child { padding-bottom: clamp(56px, 9vw, 120px); }

/* AUSNAHME Kopfbereich: der Video-Hero bringt seine eigenen, exakt
   aufeinander abgestimmten Abstände mit (Nav -> Logo -> Video, siehe
   .hero). Er steht als erster Baustein im Inhalt und bekam dadurch
   zusätzlich die allgemeine Abstandsregel oben aufgeschlagen - genau
   das war der Grund, warum der Abstand zwischen Menüleiste und Logo
   deutlich größer war als der zwischen Logo und Video, obwohl in .hero
   beide Werte identisch gesetzt sind. */
.site-content > .intro,
.site-content > .intro:first-child,
.site-content > .intro:last-child {
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 0;
  padding-right: 0;
  max-width: none;
}

.site-content .wp-block-columns {
  gap: var(--gap);
  align-items: center;
}
/* Dreht nur die sichtbare Desktop-Reihenfolge um (Bild/Text tauschen
   Seiten) - der Quelltext (und damit die mobile Stapel-Reihenfolge)
   bleibt unangetastet, siehe Kommentar in inc/default-content.php. */
@media (min-width: 901px) {
  .site-content .wp-block-columns.is-flipped {
    flex-direction: row-reverse;
  }
}
.site-content .wp-block-column {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.site-content h2,
.site-content h2.wp-block-heading {
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--c-text);
  margin: 0 0 16px;
}
.site-content h3,
.site-content h3.wp-block-heading {
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  font-weight: 600;
  color: var(--c-text);
  margin: 0 0 16px;
}
.site-content h4,
.site-content h4.wp-block-heading {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--c-text);
  margin: 20px 0 6px;
}
.site-content .wp-block-column > h4:first-child,
.site-content .wp-block-column > *:first-child { margin-top: 0; }

.site-content p {
  max-width: 60ch;
  color: var(--c-text);
  font-size: 1rem;
  line-height: 1.55;
  margin: 0 0 14px;
}
.site-content .wp-block-column p:last-child,
.site-content .wp-block-column h4:last-child { margin-bottom: 0; }

/* Nur echte Fließtext-Links (z.B. "→ mehr zum strohbau" in einem Absatz)
   werden unterstrichen - bewusst NICHT ".site-content a" pauschal, sonst
   erwischt die Regel auch die Projekt-Karten und andere Baustein-eigene
   Links, die nie eine Unterstreichung haben sollten. */
.site-content p a {
  color: var(--c-text);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.site-content figure.wp-block-image,
.site-content .wp-block-image {
  margin: 0;
}
.site-content .wp-block-column .wp-block-image + .wp-block-image,
.site-content .wp-block-column figure.wp-block-image + figure.wp-block-image {
  margin-top: var(--gap);
}
.site-content .wp-block-image img {
  display: block;
  width: 100%;
  height: auto;
  /* Nie höher als ein Bildschirm - auf Start- wie auf Projektseiten. */
  max-height: 100vh;
  max-height: 100svh;
  object-fit: cover;
  border-radius: 2px;
}

/* Für Hochkant-Bilder: im Editor bei einem Bild-Baustein unter "Erweitert"
   -> "Zusätzliche CSS-Klasse(n)" den Namen "is-portrait" eintragen (bei
   den mitgelieferten Hochkant-Bildern bereits automatisch gesetzt).
   56% Breite bei 3:4 ergibt exakt dieselbe Höhe wie ein Querformat-Bild
   (4:3) in voller Spaltenbreite - ein Hochkant-Bild wirkt sonst allein
   durch sein Format klobiger/präsenter, obwohl es "nur" hochkant ist.
   Rückt an die rechte Seite der Spalte, mit Weißraum links - die linke
   Kante landet dadurch ungefähr in der Spaltenmitte. */
.site-content .wp-block-image.is-portrait img {
  /* Am Live-Layout ausgemessen (Spaltenbreite 552px):
       56%  -> Bildhöhe 414px = exakt so hoch wie ein Querformat-Bild,
               rechnerisch sauber, wirkte aber zu zurückhaltend.
       72%  -> Bildhöhe 530px, also 28% höher als jedes Querformat -
               damit dominiert das Hochformat die Seite wieder, genau
               das sollte ursprünglich vermieden werden.
       64%  -> Bildhöhe 471px, rund 14% höher als ein Querformat.
     64% ist die bewusste Mitte: die Hochformate sind deutlich präsenter
     als vorher und dürfen als Hochformat auch etwas höher stehen, ohne
     den ruhigen Seitenrhythmus zu kippen. Links bleibt Weißraum, die
     rechte Kante bleibt bündig in der Flucht. */
  width: 64%;
  margin-left: auto;
  margin-right: 0;
  aspect-ratio: 3/4;
  object-fit: cover;
  /* Sicherheitsnetz für sehr kurze/breite Fenster - normalerweise nie erreicht. */
  max-height: 90vh;
  max-height: 90svh;
}

/* Auf dem Handy steht ohnehin jedes Bild allein in voller Breite -
   dort wäre ein zusätzlich eingerücktes Hochformat nur unnötig klein. */
@media (max-width: 900px) {
  .site-content .wp-block-image.is-portrait img { width: 100%; }
}

.site-content .wp-block-group.has-background {
  max-width: none;
  padding-top: clamp(48px, 8vw, 96px);
  padding-bottom: clamp(48px, 8vw, 96px);
}
.site-content .wp-block-group.has-background > * {
  max-width: 1500px;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--edge);
  padding-right: var(--edge);
}

/* Kontakt-Streifen (dunkler Clay-Ton): Schrift durchgehend weiß, nie
   unterstrichen - auch Links darin bleiben ohne Unterstreichung. */
.site-content .wp-block-group.has-zam-clay-background-color,
.site-content .wp-block-group.has-zam-clay-background-color h2,
.site-content .wp-block-group.has-zam-clay-background-color h3,
.site-content .wp-block-group.has-zam-clay-background-color p,
.site-content .wp-block-group.has-zam-clay-background-color a,
.site-content .wp-block-group.has-zam-clay-background-color .wp-block-shortcode {
  color: #fff;
}
.site-content .wp-block-group.has-zam-clay-background-color a {
  text-decoration: none;
}
/* Ohne eigene Spaltenaufteilung (Überschrift, Text und Formular-Platzhalter
   liegen als einzelne Blöcke direkt übereinander) wirkt der breite
   Farbstreifen sonst wie "links hängender Text mit viel Leerraum rechts".
   Eigene, engere und zentrierte Spalte NUR für dieses Farbfeld (überschreibt
   die generische 1500px-Innenbreite von .wp-block-group.has-background), so
   dass Überschrift, Text und Formular-Hinweis als eine ruhige, mittig
   sitzende Einheit im Farbband wirken - unabhängig davon, ob CF7 schon
   installiert ist oder der Platzhaltertext noch dort steht. */
.site-content .wp-block-group.has-zam-clay-background-color > * {
  max-width: 640px;
  text-align: center;
}
.site-content .wp-block-group.has-zam-clay-background-color .wp-block-shortcode {
  text-align: left;
}

.site-content .wp-block-shortcode {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--c-text-muted);
  word-break: break-word;
}

.site-content .wp-block-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
}
.site-content .wp-block-gallery .wp-block-image img {
  max-height: none;
  aspect-ratio: 3/4;
  object-fit: cover;
  width: 100%;
}

@media (max-width: 900px) {
  .site-content .wp-block-columns {
    flex-direction: column;
  }
  .site-content .wp-block-gallery {
    grid-template-columns: 1fr 1fr;
  }
}

.benefit-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin: 0;
}
.benefit-list dt {
  font-weight: 600;
  color: var(--c-text);
  margin-bottom: 4px;
}
.benefit-list dd {
  margin: 0;
  color: var(--c-text-muted);
  font-size: 0.95rem;
}

/* ---------------- Projekte: horizontale Scroll-Spalte ----------------
   Karten liegen nebeneinander in einer scrollbaren Zeile. Vertikales
   Mausrad-Scrollen über der Spalte wird per JS in horizontales Scrollen
   umgeleitet (siehe script.js), auf Touch funktioniert das Wischen nativ. */

/* Wieder als beiger Streifen eingebettet, wie vor dem Umbau auf
   horizontales Scrollen - overflow:hidden sorgt dafür, dass die
   scrollende Karten-Reihe sauber an den runden Ecken abschließt. */
/* Abstände oben/unten: der Streifen enthält oben ein Bild (harte
   Oberkante) und unten Text (Titel + Meta-Zeile). Gleiche Pixelwerte
   oben und unten wirken deshalb NICHT gleich - unter dem Text sitzt
   durch dessen Zeilenhöhe optisch schon Luft, wodurch der untere Rand
   größer aussieht als der obere. Die Zeilenabstände unterhalb der
   Meta-Zeile werden deshalb auf 0 gesetzt (siehe .projekt-card__meta)
   und beide Werte hier bewusst identisch gehalten - so stehen Ober-
   und Unterkante des Streifens tatsächlich im gleichen Abstand. */
.projekt-scroll {
  max-width: 1500px;
  margin: 0 auto;
  padding: clamp(32px, 5vw, 56px) 0 clamp(32px, 5vw, 56px) var(--edge);
  background: var(--c-clay);
  border-radius: 4px;
  overflow: hidden;
}

.projekt-scroll__track {
  display: flex;
  gap: var(--gap);
  overflow-x: auto;
  padding-right: var(--edge); /* auch die letzte Karte bekommt rechts Luft */
  scrollbar-width: none; /* Firefox */
}
.projekt-scroll__track::-webkit-scrollbar { display: none; } /* Chrome/Safari */

.projekt-card {
  flex: 0 0 auto;
  width: min(60vw, 480px);
  text-decoration: none;
  display: block;
}

.projekt-card__media {
  position: relative;
  overflow: hidden;
  border-radius: 2px;
  aspect-ratio: 4/3;
  background: rgba(255, 255, 255, 0.08);
}
.projekt-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.7s var(--ease);
}
.projekt-card:hover .projekt-card__media img { transform: scale(1.035); }

.projekt-card__plan {
  position: absolute;
  top: 12px;
  left: 12px;
  width: 32%;
  color: var(--c-text);
  background: var(--c-bg);
  padding: 6px;
  border-radius: 2px;
  z-index: 2;
}

/* Im Projekte-Streifen ist ALLE Schrift weiß - genau wie im
   Kontaktbereich, keine abgedunkelte Meta-Zeile mehr. */
.projekt-card__title {
  margin: 18px 0 4px;
  font-size: 1.1rem;
  font-weight: 600;
  color: #fff;
}
.projekt-card__meta {
  color: #fff;
  /* Kein Nachlauf unterhalb der letzten Zeile - siehe Kommentar bei
     .projekt-scroll: nur so sind oberer und unterer Rand gleich groß. */
  margin: 0;
  line-height: 1.3;
}
.projekt-scroll,
.projekt-scroll a,
.projekt-scroll h2,
.projekt-scroll h3,
.projekt-scroll p { color: #fff; text-decoration: none; }

/* Platzhalter-Karte: zweites Projekt, noch ohne Inhalt - bewusst
   zurückhaltend/gestrichelt gehalten, damit klar ist, dass hier noch
   nichts Fertiges gezeigt wird, und nicht klickbar. */
.projekt-card--placeholder .projekt-card__media--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--c-taupe);
  color: var(--c-sage);
  text-align: center;
}
.projekt-card--placeholder .projekt-card__title { color: var(--c-sage); font-weight: 500; }

.projekt-feature__hint {
  display: inline-block;
  margin-top: 18px;
  color: var(--c-text);
}

/* ---------------- Video-Einbettung (z.B. YouTube), ersetzt Bilder 1:1 in .split-images ---------------- */

.video-embed {
  position: relative;
  overflow: hidden;
  border-radius: 2px;
  aspect-ratio: 16/9; /* natives Video-Seitenverhältnis, bewusste Ausnahme von 4:3/3:4 */
}
.video-embed iframe,
.video-embed video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
}

/* Hinweis: Die Gestaltung der Bildreihe steht weiter unten beim
   zam-Bildreihe-Block (.bildreihe__track). Die früher an dieser Stelle
   stehende Regel machte die .bildreihe-Sektion SELBST zu einem
   dreispaltigen Raster - zusammen mit dem heutigen inneren Raster
   (.bildreihe__track) ergab das zwei ineinander verschachtelte Raster,
   wodurch die Bilder auf ein Achtel ihrer Größe zusammenfielen. Bewusst
   ersatzlos entfernt, damit es genau EINE zuständige Regel gibt. */

/* ---------------- .block-media / .caption: weiterhin genutzt auf projekt.html ---------------- */

.block-media {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 2px;
}

.block-media img,
.block-media video {
  width: 100%;
  height: auto;
  transition: transform 0.7s var(--ease), opacity 0.25s ease;
}

.block-media:hover img,
.block-media:hover video {
  transform: scale(1.035);
}

.caption {
  display: block;
  margin-top: 10px;
  color: var(--c-text-muted);
}

/* ---------------- Scroll reveal ---------------- */

/* WICHTIG - "fail-open" statt "fail-closed":
   Das Ausblenden (opacity:0) hängt bewusst an der Klasse "js", die ganz
   oben im <head> per Inline-Skript gesetzt wird (siehe header.php).
   Vorher galt opacity:0 bedingungslos - eine Überschrift, die der
   Einblende-Beobachter aus irgendeinem Grund NICHT erfasst hat (später
   per Skript eingefügt, Skript-Fehler, Skript blockiert, Editor-Vorschau),
   blieb dadurch dauerhaft unsichtbar. Genau dieser Fall ist im Projekt
   schon zweimal aufgetreten.
   Mit dem "js"-Vorschalter gilt: Läuft alles normal, wird wie gewohnt
   sanft eingeblendet. Geht irgendetwas schief, ist der Text schlicht
   sofort sichtbar - der Fehlerfall ist damit harmlos statt fatal. */
.js .reveal-heading,
.js .reveal-word,
.js .site-content h2,
.js .site-content h3 {
  opacity: 0;
  transform: translateY(0.4em);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.js .reveal-heading.is-visible,
.js .reveal-word.is-visible,
.js .site-content h2.is-visible,
.js .site-content h3.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .js .reveal-heading, .js .reveal-word, .js .site-content h2, .js .site-content h3 {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Im Block-Editor (WordPress lädt style.css auch in den Editor-iframe,
   siehe add_editor_style) läuft script.js NICHT - die Klasse "is-visible",
   die das Einblenden beim Scrollen auslöst, wird dort also nie gesetzt.
   Ohne diese Ausnahme blieben Überschriften (z.B. "hannes, finn und
   felix.") im Editor dauerhaft unsichtbar (opacity:0), obwohl auf der
   echten Seite alles normal funktioniert. WordPress selbst setzt die
   Klasse "editor-styles-wrapper" auf den Inhalts-Container im Editor -
   genau dort wird die Ausblend-Regel wieder aufgehoben. */
.editor-styles-wrapper .reveal-heading,
.editor-styles-wrapper .reveal-word,
.editor-styles-wrapper .site-content h2,
.editor-styles-wrapper .site-content h3 {
  opacity: 1 !important;
  transform: none !important;
}

/* ---------------- Contact ---------------- */

/* heller Kasten, wie im aktuellen Wireframe (nicht mehr dunkelgrün) */
.contact {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
  padding: clamp(40px, 6vw, 80px) var(--edge);
  max-width: 1500px;
  /* Kein Abstand mehr nach unten - der beige Kontakt-Streifen soll direkt
     am dunkelgrünen Footer-Streifen anliegen, ohne "Reststreifen" dazwischen. */
  margin: clamp(24px, 5vw, 56px) auto 0;
  background: var(--c-sand);
  color: var(--c-text);
  /* Unten eckig statt rund - liegt direkt am Footer-Streifen an, ohne
     dass an den unteren Ecken ein kleiner Spalt Hintergrundfarbe durchscheint. */
  border-radius: 4px 4px 0 0;
}

.contact h2 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); font-weight: 600; margin: 0 0 20px; color: var(--c-text); }
.contact-intro p { max-width: 42ch; color: var(--c-sage); }

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.contact-form label { margin-top: 14px; color: var(--c-sage); }

.contact-form input,
.contact-form textarea {
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(47,61,50,0.3);
  color: var(--c-text);
  font-family: var(--font-sans);
  font-size: 1rem;
  padding: 10px 2px;
  outline: none;
  transition: border-color 0.3s var(--ease);
}
.contact-form input:focus,
.contact-form textarea:focus { border-color: var(--c-text); }

.contact-form button {
  margin-top: 28px;
  align-self: flex-start;
  padding: 14px 28px;
  border-radius: 999px;
  border: 1px solid var(--c-forest);
  background: transparent;
  color: var(--c-text);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background-color 0.35s var(--ease), color 0.35s var(--ease);
}
.contact-form button:hover {
  background-color: var(--c-text);
  color: var(--c-bg);
}

.form-note { margin-top: 16px; color: rgba(47,61,50,0.5); }

/* ============================================================
   zam: Bildreihe - horizontale Reihe nebeneinanderliegender Bilder
   ============================================================ */

/* Alle Bilder der Reihe bekommen dasselbe Seitenverhältnis und teilen
   sich die Breite gleichmäßig auf (1fr je Bild). Dadurch bleibt die
   Reihe optisch ruhig, egal ob der Nutzer später Hoch- und
   Querformate mischt - genau das lässt eine Bildreihe sonst schnell
   unruhig wirken. */
.bildreihe__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: var(--gap);
}
.bildreihe__item {
  margin: 0;
}
.bildreihe__item img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: var(--bildreihe-ratio, 4/3);
  object-fit: cover;
  border-radius: 2px;
}

/* Auf schmalen Bildschirmen wird aus der Reihe ein waagerecht
   wischbares Band: alles nebeneinander zu quetschen würde die Bilder
   unlesbar klein machen, ein Umbruch in mehrere Zeilen würde dagegen
   den Charakter "eine Reihe" auflösen. */
@media (max-width: 900px) {
  .bildreihe__track {
    grid-auto-columns: 68%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
  }
  .bildreihe__track::-webkit-scrollbar { display: none; }
  .bildreihe__item { scroll-snap-align: start; }
}

/* ============================================================
   zam: Video (Vimeo) - Vorschaubild + Play, Einbettung erst beim Klick
   ============================================================ */
.zam-video {
  margin: 0;
}
.zam-video__frame {
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
  border-radius: 2px;
  background: var(--c-sand);
  cursor: pointer;
}
.zam-video__poster,
.zam-video__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  object-fit: cover;
}
.zam-video__play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: clamp(64px, 8vw, 88px);
  height: clamp(64px, 8vw, 88px);
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.9);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: transform 0.35s var(--ease), background-color 0.35s var(--ease);
}
.zam-video__frame:hover .zam-video__play {
  transform: translate(-50%, -50%) scale(1.06);
  background: #fff;
}
/* Dreieck rein über CSS-Rahmen - kein zusätzliches Bild/Icon-Paket nötig. */
.zam-video__play-icon {
  width: 0;
  height: 0;
  margin-left: 5px;
  border-top: 11px solid transparent;
  border-bottom: 11px solid transparent;
  border-left: 18px solid var(--c-text);
}
.zam-video__frame.is-playing { cursor: default; }
.zam-video__frame.is-playing .zam-video__play,
.zam-video__frame.is-playing .zam-video__poster { display: none; }

@media (prefers-reduced-motion: reduce) {
  .zam-video__frame:hover .zam-video__play { transform: translate(-50%, -50%); }
}

/* ============================================================
   Projekt-Bildraster + Durchschaltansicht (Lightbox)
   ============================================================ */

/* Zweispaltiges Raster, das nach unten weiterläuft - statt einer
   einzelnen Bilderreihe untereinander. Zwei Spalten (statt drei)
   lassen die einzelnen Aufnahmen deutlich größer wirken, was bei
   Architekturfotos den Unterschied macht. */
.projekt-raster,
.site-content .wp-block-group.projekt-raster {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gap);
}
/* Innerhalb des Rasters gilt die Hochformat-Sonderbreite NICHT - im
   Raster sollen alle Kacheln gleich groß sein, sonst wird die Fläche
   unruhig. Die automatische Hochformat-Erkennung (script.js) lässt das
   Raster deshalb bewusst aus. */
.site-content .wp-block-group.projekt-raster .wp-block-image.is-portrait img {
  width: 100%;
}
.projekt-raster > figure,
.projekt-raster > .wp-block-image {
  margin: 0;
}
.projekt-raster img {
  display: block;
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: 2px;
  cursor: zoom-in;
  transition: opacity 0.35s var(--ease);
}
.projekt-raster img:hover { opacity: 0.88; }

@media (max-width: 700px) {
  .projekt-raster { grid-template-columns: 1fr; }
}

/* Durchschaltansicht: gleiche Gestaltungssprache wie das Vita-Fenster -
   alles dahinter unscharf, kein Kasten, ruhige Bedienelemente. */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: none;
  align-items: center;
  justify-content: center;
  padding: clamp(20px, 5vw, 64px);
}
.lightbox.is-open { display: flex; }
.lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(249, 249, 249, 0.86);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
}
.lightbox__stage {
  position: relative;
  margin: 0;
  max-width: min(1200px, 100%);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.lightbox__stage img {
  display: block;
  max-width: 100%;
  max-height: 78vh;
  object-fit: contain;
  border-radius: 2px;
}
.lightbox__count {
  color: var(--c-text-muted);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
}
.lightbox__close,
.lightbox__nav {
  position: relative;
  z-index: 1;
  border: none;
  background: transparent;
  color: var(--c-text);
  cursor: pointer;
  font-family: var(--font-sans);
  line-height: 1;
  transition: opacity 0.3s var(--ease);
}
.lightbox__close {
  position: absolute;
  top: clamp(16px, 3vw, 32px);
  left: 50%;
  transform: translateX(-50%);
  font-size: 2rem;
}
.lightbox__nav {
  font-size: clamp(2rem, 4vw, 3rem);
  padding: 0 clamp(8px, 2vw, 28px);
  opacity: 0.55;
}
.lightbox__nav:hover,
.lightbox__close:hover { opacity: 1; }

@media (max-width: 700px) {
  .lightbox__nav { padding: 0 6px; }
}

/* ============================================================
   zam: Kontakt - Text links, Formularzeilen rechts, dunkelgrün
   ============================================================ */

/* Der Streifen läuft über die volle Breite (Farbfläche), der Inhalt
   darin sitzt im selben 1500px-Raster wie der Rest der Seite - dadurch
   steht der Text exakt in derselben linken Flucht wie alle Abschnitte
   darüber und kann nicht "nach links oder rechts rutschen". */
.kontakt {
  background: var(--c-forest);
  color: #fff;
  padding: clamp(56px, 8vw, 104px) 0;
}
.kontakt__inner {
  max-width: 1500px;
  margin: 0 auto;
  padding: 0 var(--edge);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
  align-items: start;
}
.kontakt__text h2 {
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #fff;
  margin: 0 0 16px;
}
.kontakt__text p {
  max-width: 42ch;
  color: #fff;
  margin: 0 0 14px;
}
.kontakt__text p:last-child { margin-bottom: 0; }
.kontakt a { color: #fff; text-decoration: none; }
.kontakt__hint { color: rgba(255, 255, 255, 0.65); }

/* Contact Form 7 gibt eigenes Markup aus - hier wird es auf die
   Formsprache der Seite gebracht: keine Kästen, nur feine Linien,
   alles in Weiß auf dem dunklen Grün. */
.kontakt__form p { margin: 0 0 4px; color: #fff; }
.kontakt__form label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.75);
  margin-top: 14px;
}
.kontakt__form input[type="text"],
.kontakt__form input[type="email"],
.kontakt__form input[type="tel"],
.kontakt__form input[type="url"],
.kontakt__form input[type="date"],
.kontakt__form input[type="number"],
.kontakt__form select,
.kontakt__form textarea {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
  color: #fff;
  font-family: var(--font-sans);
  font-size: 1rem;
  padding: 10px 2px;
  outline: none;
  border-radius: 0;
  transition: border-color 0.3s var(--ease);
}
.kontakt__form textarea { min-height: 120px; resize: vertical; }
.kontakt__form input:focus,
.kontakt__form select:focus,
.kontakt__form textarea:focus { border-bottom-color: #fff; }
.kontakt__form input::placeholder,
.kontakt__form textarea::placeholder { color: rgba(255, 255, 255, 0.5); }

.kontakt__form input[type="submit"],
.kontakt__form button[type="submit"] {
  width: auto;
  margin-top: 28px;
  padding: 14px 28px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  background: transparent;
  color: #fff;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background-color 0.35s var(--ease), color 0.35s var(--ease);
}
.kontakt__form input[type="submit"]:hover,
.kontakt__form button[type="submit"]:hover {
  background: #fff;
  color: var(--c-forest);
}

/* CF7-Rückmeldungen (Fehler/Erfolg) ebenfalls hell halten. */
.kontakt__form .wpcf7-not-valid-tip { color: #F3C6C6; font-size: 0.85rem; }
.kontakt__form .wpcf7-response-output {
  border-color: rgba(255, 255, 255, 0.4) !important;
  color: #fff;
  margin: 20px 0 0 !important;
  padding: 12px 16px !important;
}

@media (max-width: 900px) {
  .kontakt__inner { grid-template-columns: 1fr; }
}

/* ---------------- Footer ---------------- */

/* Die untere Leiste ist bewusst KEIN eigener Farbstreifen mehr, sondern
   läuft im selben Seitenhintergrund weiter wie der restliche Inhalt -
   schwarze Schrift, ganz ruhig. Der einzige farbig hinterlegte Bereich
   ganz unten ist damit das Kontaktformular selbst (dunkelgrün), was ihm
   deutlich mehr Gewicht gibt: zwei dunkle Streifen direkt übereinander
   hätten sich gegenseitig die Wirkung genommen. */
.site-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 20px;
  padding: clamp(28px, 4vw, 44px) var(--edge) clamp(32px, 4vw, 48px);
  background: var(--c-bg);
  color: var(--c-text);
}
.site-footer a { color: var(--c-text); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; text-underline-offset: 2px; }

/* Impressum/Datenschutz: erreichbar, aber bewusst klein und unauffällig -
   gleiche gedämpfte mono-Optik wie der Rest des Footers, kein Extra-Gewicht. */
.site-footer__links {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ---------------- Rechtliche Seiten (Impressum, Datenschutz) ---------------- */

.legal-head {
  max-width: 1500px;
  margin: 0 auto;
  padding: clamp(40px, 7vw, 96px) var(--edge) clamp(16px, 3vw, 32px);
}
.legal-head h1 {
  font-size: clamp(1.8rem, 5vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--c-text);
  margin: 0;
}

.legal-body {
  max-width: 1500px;
  margin: 0 auto;
  padding: 0 var(--edge) clamp(60px, 9vw, 120px);
}
.legal-body section {
  max-width: 68ch;
  margin: 0 0 clamp(32px, 5vw, 48px);
}
/* Für WordPress-Seiten: der Block-Editor liefert keine <section>-Wrapper
   pro Thema, sondern eine flache Abfolge aus Überschrift + Absätzen -
   dieselbe max-width sitzt deshalb zusätzlich direkt auf den Elementen,
   damit einzelne Textblöcke trotzdem angenehm schmal/lesbar bleiben statt
   über die volle Seitenbreite zu laufen. */
.legal-body h2 {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--c-text);
  margin: 40px 0 14px;
  max-width: 68ch;
}
.legal-body > h2:first-child,
.legal-body section:first-child h2 {
  margin-top: 0;
}
.legal-body h3 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--c-text);
  margin: 22px 0 8px;
  max-width: 68ch;
}
.legal-body p {
  color: var(--c-text);
  font-size: 0.95rem;
  margin: 0 0 10px;
  max-width: 68ch;
}
.legal-body ul,
.legal-body ol {
  margin: 0 0 12px;
  padding-left: 20px;
  color: var(--c-text);
  font-size: 0.95rem;
  max-width: 68ch;
}
.legal-body li { margin-bottom: 4px; }
.legal-body a { text-decoration: underline; text-underline-offset: 2px; }
.legal-body strong { font-weight: 600; }
.legal-todo {
  display: inline-block;
  margin-top: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--c-sand);
  color: var(--c-text);
  font-size: 0.72rem;
}

/* ---------------- Custom cursor ----------------
   Grundzustand: kleiner Punkt mit mix-blend-mode: difference - dadurch bleibt
   er auf JEDEM Hintergrund sichtbar (u.a. auf dem dunkelgrünen Kontaktformular,
   das sonst mit einer grünen Fläche verschmelzen würde).
   Über Bildern: kein Blend-Modus mehr, sondern eine feste dunkelgrüne Fläche
   mit Beschriftung (z.B. "projekt ansehen" / "weitere bilder"). */

.cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  pointer-events: none;
  border-radius: 50%;
  background: #ffffff;
  mix-blend-mode: difference;
  transform: translate(-50%, -50%);
  width: 14px;
  height: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: width 0.15s var(--ease), height 0.15s var(--ease), opacity 0.2s ease;
  will-change: width, height, transform;
}

/* vergrößert sich nur über Bildern/Projekten - nicht über der Nav */
.cursor.is-media {
  width: 60px;
  height: 60px;
  background: var(--c-forest);
  mix-blend-mode: normal;
}

.cursor__label {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.04em;
  color: var(--c-bg);
  opacity: 0;
  transition: opacity 0.15s ease;
  text-transform: lowercase;
  text-align: center;
  padding: 0 6px;
}
.cursor.is-media .cursor__label { opacity: 1; }

/* Nav bleibt bewusst ohne Vergrößerung, damit die Menüpunkte lesbar bleiben -
   Farbfeld beim Hover kommt allein aus .nav-links a:hover */

/* hide native cursor only where the custom one is active (desktop, fine pointer) */
body.has-custom-cursor,
body.has-custom-cursor a,
body.has-custom-cursor button,
body.has-custom-cursor input,
body.has-custom-cursor textarea {
  cursor: none;
}

/* mobile / touch: no custom cursor, keep native pointer behaviour */
.cursor { display: none; }
body.has-custom-cursor .cursor {
  display: flex;
}

/* ---------------- Responsive ---------------- */

@media (max-width: 900px) {
  .nav-links { display: none; }
  .nav-burger { display: flex; }

  .split {
    grid-template-columns: 1fr;
  }
  .split-images { grid-template-columns: 1fr 1fr; }

  .projekt-card { width: min(78vw, 340px); }
  .projekt-card__plan { width: 45%; }

  .contact { grid-template-columns: 1fr; }

  /* Keine Abbildung darf höher als eine ganze Bildschirmlänge werden -
     gilt auf allen Unterseiten und der Projektseite genauso wie hier. */
  .img-block,
  .teaser__inner,
  .video-embed {
    max-height: 100vh; /* Fallback für Browser ohne svh */
    max-height: 100svh;
  }

  body.has-custom-cursor { cursor: auto; }
  body.has-custom-cursor a,
  body.has-custom-cursor button { cursor: pointer; }
}