/* ==========================================================================
   Architektur- & Immobilienbüro Chuong
   Design-Fundament nach der Pagestreet-Vorlage des Kunden.

   Grundlage: notizen/vorlage_analyse.md, Messungen am gesicherten Screenshot.
   Markenfarbe, Schrift und Aufbau folgen der Vorlage. Das Handwerk darunter
   ist neu: lokale Schrift, geprüfte Kontraste, keine fremden Ressourcen.
   ========================================================================== */

/* --- 1. Schrift ----------------------------------------------------------
   Source Sans wie in der Vorlage, dort über das CDN des Baukastens geladen.
   Hier lokal: fremde Schriftserver übertragen Besucher-IPs an Dritte.     */

@font-face {
  font-family: 'Source Sans';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/source-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Sans';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/source-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
                 U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
                 U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
                 U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- 2. Wertevorrat ----------------------------------------------------- */

:root {
  /* Violett, am Kachelbalken der Vorlage gemessen: #270C93.
     Abstufungen abgeleitet, alle Textfarben gegen WCAG AA geprüft.
     Hinweis: Das ist NICHT die Logofarbe. Das Logo trägt Blau, und im
     Erstgespräch nannte der Kunde Blau als Hausfarbe. Wir bauen violett,
     weil ihm die Vorlage gefällt. Im Termin ansprechen. */
  --v-900: #1B0866;
  --v-800: #210A7D;
  --v-700: #270C93;   /* Markenfarbe */
  --v-600: #3417B8;
  --v-500: #4A2ED6;
  --v-100: #DEDAF3;
  --v-050: #F0EEFA;

  /* Die Vorlage nutzt kein reines Schwarz, sondern ein dunkles Grau. */
  --text:       #1A1A1E;
  --text-body:  #444A55;
  --text-muted: #63697A;   /* AA auf Weiß (5,48) und auf --v-050 (4,78) */
  --text-hell:  #FFFFFF;

  --bg:        #FFFFFF;
  --bg-sanft:  #F7F7F9;
  --rahmen:    #E4E2EF;
  --rahmen-feld:  #8B8FA3;  /* Formularfelder, 3:1 auf Weiß */
  --rahmen-knopf: #7B6BC9;  /* Umrandung ohne Fläche, 3:1 auf Weiß */
  --fehler: #B3261E;

  /* Schriftstufen, an der Vorlage gemessen: Fließtext 18px, Hero 50px. */
  --t-label:  0.8125rem;  /* 13px */
  --t-klein:  0.9375rem;  /* 15px */
  --t-basis:  1.125rem;   /* 18px */
  --t-mittel: 1.375rem;   /* 22px */
  --t-gross:  1.875rem;   /* 30px */
  --t-titel:  2.25rem;    /* 36px */
  --t-hero:   3.125rem;   /* 50px, nur im Hero */

  --lh-eng: 1.2;
  --lh-mittel: 1.4;
  --lh-text: 1.65;
  --mass-text: 62ch;

  --raum-halb: 1rem;
  --raum: 2rem;
  --raum-doppel: 4rem;
  --abstand-sektion: 4.5rem;

  --breite: 1180px;
  --rand: 1.5rem;
  --radius: 2px;
  --schrift: 'Source Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --tempo: 0.5s;
}

/* --- 3. Grundlagen ------------------------------------------------------ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--schrift);
  font-size: var(--t-basis);
  line-height: var(--lh-text);
  color: var(--text-body);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

/* Überschriften in der Markenfarbe. Korrekturwunsch des Kunden vom
   29.09.2026: alle markierten Überschriften „in blau", gemeint ist das
   Violett der Kacheln und Knöpfe. Einzelne davon zusätzlich größer, die
   tragen .titel--gross. */
h1, h2, h3, h4 { color: var(--v-700); line-height: var(--lh-eng); }
h1 { font-size: var(--t-titel); font-weight: 300; }
h2 { font-size: var(--t-gross); font-weight: 300; }
h3 { font-size: var(--t-mittel); font-weight: 600; }
h4 { font-size: var(--t-basis); font-weight: 600; }
.titel--gross { font-size: clamp(2rem, 1.2rem + 2vw, 2.75rem); }

p { max-width: var(--mass-text); }
p + p { margin-top: var(--raum-halb); }
a { color: var(--v-600); text-underline-offset: 0.15em; }
a:hover { color: var(--v-500); }
strong { font-weight: 600; color: var(--text); }
img, svg, video { display: block; max-width: 100%; height: auto; }

/* Sichtbarer Tastaturfokus. Die Vorlage hat keinen. */
:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--v-500);
  outline-offset: 2px;
}

.nur-sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.sprung {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--v-700); color: #FFF; padding: 0.75rem 1.25rem;
}
.sprung:focus { left: 0; }

/* --- 4. Layout ---------------------------------------------------------- */

.inhalt { max-width: var(--breite); margin-inline: auto; padding-inline: var(--rand); }

/* Lesebreite fuer Fliesstext ohne Bilder, Impressum und Datenschutz.
   Rund 70 Zeichen je Zeile, mehr ermuedet beim Lesen. */
/* Nicht den Container verengen, sonst rutscht er in die Mitte und fluchtet
   nicht mehr mit dem Seitenkopf. Stattdessen die Zeilen darin begrenzen. */
.inhalt--schmal > * { max-width: 46rem; }
.inhalt--schmal h2 { margin-top: 2.25rem; }
.inhalt--schmal h3 { margin-top: 1.4rem; }
.inhalt--schmal h2:first-child { margin-top: 0; }
.inhalt--schmal p { margin-top: 0.75rem; }
.inhalt--schmal ul { margin-top: 0.75rem; padding-left: 1.1rem; }
.inhalt--schmal li + li { margin-top: 0.25rem; }
.klein { font-size: var(--t-klein); color: var(--text-sanft, #5B5B66); margin-top: 2rem; }
.sektion { padding-block: var(--abstand-sektion); }
.sektion--sanft { background: var(--bg-sanft); }
.sektion--violett { background: var(--v-050); }
.sektion--dunkel { background: var(--v-700); color: rgba(255,255,255,0.9); }
.sektion--dunkel h1, .sektion--dunkel h2, .sektion--dunkel h3 { color: #FFF; }
.sektion--dunkel a { color: #FFF; }
.mass { max-width: var(--mass-text); }
.mitte { text-align: center; }
.mitte p, .mitte .mass { margin-inline: auto; }

/* --- 5. Bausteine ------------------------------------------------------- */

.label {
  display: block;
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--v-700);
  margin-bottom: 0.6rem;
}
.vorspann {
  font-size: var(--t-mittel);
  font-weight: 300;
  line-height: var(--lh-mittel);
  color: var(--text);
}
/* Für Zeilen, die wie Überschriften wirken, aber keine sind, etwa
   „Und das Beste für Sie ist:" auf Immo-Leistungen. */
.markenfarbe, .markenfarbe strong { color: var(--v-700); }

.knopf {
  display: inline-block;
  padding: 0.8rem 1.75rem;
  background: var(--v-700);
  color: #FFF;
  font-size: var(--t-klein);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background var(--tempo);
}
.knopf:hover { background: var(--v-800); color: #FFF; }
.knopf--linie { background: transparent; color: var(--v-700); border-color: var(--rahmen-knopf); }
.knopf--linie:hover { background: var(--v-050); color: var(--v-700); }
.knopf--hell { background: #FFF; color: var(--v-700); }
.knopf--hell:hover { background: var(--v-050); color: var(--v-700); }

/* Honigtopf: aus dem Sichtfeld, nicht display:none, das erkennen manche
   Programme und lassen das Feld dann leer. */
.honig { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formular { position: relative; }
.formular__hinweis { margin-top: 0.75rem; font-size: var(--t-klein); color: var(--text-sanft, #5B5B66); }
.formular__fehler {
  margin-bottom: 1rem;
  padding: 0.7rem 0.9rem;
  border-left: 3px solid #B3261E;
  background: #FDECEA;
  color: #7A1C16;
  font-size: var(--t-klein);
}

.trenner { height: 1px; margin-top: var(--raum); background: var(--rahmen); border: 0; }

/* Arbeitsmarkierung für den Kundentermin, vor dem Livegang samt Klasse raus.
   Siehe notizen/offene_punkte.md */
.klaeren {
  background: #FFF8E6;
  border-left: 3px solid #C79A00;
  padding: 0.6rem 0.9rem;
  margin-top: var(--raum-halb);
  font-size: var(--t-klein);
  line-height: var(--lh-mittel);
  color: #574400;
  max-width: var(--mass-text);
  border-radius: var(--radius);
}
.klaeren::before { content: "Zu klären: "; font-weight: 600; color: #3D2F00; }

.raster { display: grid; gap: var(--raum); }
.raster--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.raster--3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

/* Dichtes Raster fuer die Objektgalerie. Die Vorlage stellt hier vier Spalten
   fugenlos nebeneinander: nicht das einzelne Objekt zaehlt, sondern die Menge.
   Der Kunde am 26.08.: "da soll einfach nur mal die pure Masse ... den
   Verkaeufer oder auch den Kaeufer so ein bisschen beeindrucken".
   Die Bilder haben gemischte Seitenverhaeltnisse, vom Hochformat bis 16:9,
   deshalb ein festes Raster mit Beschnitt statt einer unruhigen Kante.      */
.raster--dicht {
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 4px;
}
/* Einheitliches Seitenverhaeltnis, sonst springt die Unterkante der Reihen.
   Gilt auch im weiten Raster der Auswahlgalerien auf den Leistungsseiten.  */
.objekt { position: relative; }
.objekt img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
/* Beschriftung liegt auf dem Bild, sonst zerreisst sie das dichte Raster.
   Verlauf statt Flaeche, damit die Motive nicht abgeschnitten wirken.       */
.raster--dicht .objekt .karte__ort {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 1.6rem 0.6rem 0.45rem;
  color: #FFF;
  font-size: var(--t-klein);
  line-height: 1.3;
  background: linear-gradient(180deg, rgba(14,8,40,0) 0%, rgba(14,8,40,0.78) 100%);
}

/* --- 6. Kopfzeile --------------------------------------------------------
   Wie in der Vorlage: weiß, Logo links, Navigation rechts in Versalien.
   Die Social-Symbole der Vorlage entfallen, der Kunde ist nicht aktiv und
   will es nicht werden (Erstgespräch).                                   */

.kopf {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,0.97);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rahmen);
}
.kopf__inhalt {
  max-width: var(--breite);
  margin-inline: auto;
  padding: 0.75rem var(--rand);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--raum);
}
.marke-logo { display: flex; align-items: center; gap: 0.75rem; text-decoration: none; }
.marke-logo img { width: 46px; height: 46px; object-fit: contain; }
.marke-logo__text { display: none; }

/* Navigation: Versalien, klein, mit Unterstreichung im aktiven Zustand */
.reiter { display: flex; align-items: center; gap: 1.1rem; list-style: none; flex-wrap: wrap; }
.reiter > li { position: relative; }
.reiter a {
  display: block;
  padding: 0.4rem 0;
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color var(--tempo), border-color var(--tempo);
}
.reiter a:hover { color: var(--v-700); border-bottom-color: var(--v-700); }
.reiter a[aria-current="page"] { color: var(--v-700); border-bottom-color: var(--v-700); }

/* Untermenü. In der Vorlage führen diese Punkte auf Sprungmarken derselben
   Seite, nicht auf eigene Seiten. Das bleibt so. */
.reiter__unter {
  position: absolute;
  left: 0; top: 100%;
  min-width: 15rem;
  display: none;
  flex-direction: column;
  gap: 0;
  list-style: none;
  background: #FFF;
  border: 1px solid var(--rahmen);
  box-shadow: 0 6px 20px rgba(26,26,30,0.09);
  padding: 0.4rem 0;
  z-index: 10;
}
.reiter > li:hover > .reiter__unter,
.reiter > li:focus-within > .reiter__unter { display: flex; }
.reiter__unter a {
  padding: 0.55rem 1rem;
  border-bottom: 0;
  letter-spacing: 0.03em;
}
.reiter__unter a:hover { background: var(--v-050); border-bottom: 0; }

.kopf__schalter {
  display: none;
  align-items: center;
  gap: 0.5rem;
  background: none;
  border: 1px solid var(--rahmen-knopf);
  border-radius: var(--radius);
  padding: 0.5rem 0.8rem;
  font: inherit;
  font-size: var(--t-klein);
  color: var(--v-700);
  cursor: pointer;
}

@media (max-width: 980px) {
  .kopf__schalter { display: inline-flex; }
  .reiter {
    display: none;
    position: absolute;
    inset-inline: 0;
    top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: #FFF;
    border-bottom: 1px solid var(--rahmen);
    padding: 0.5rem var(--rand) 1rem;
  }
  .reiter[data-offen="true"] { display: flex; }
  .reiter a { padding: 0.75rem 0; border-bottom: 1px solid var(--rahmen); }
  .reiter__unter {
    position: static; display: flex; border: 0; box-shadow: none;
    padding: 0 0 0 1rem; min-width: 0;
  }
}

/* --- 7. Hero -------------------------------------------------------------
   Vollbreites Bild, Text mittig darauf. In der Vorlage wechseln die Bilder
   mit Überblendung. Nachgebaut mit gestapelten Bildern und Opazität, damit
   ohne JavaScript das erste Bild stehen bleibt.                          */

.hero {
  position: relative;
  min-height: clamp(24rem, 62vh, 34rem);
  display: grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
  text-align: center;
  padding: var(--raum-doppel) var(--rand);
}
.hero__bilder { position: absolute; inset: 0; z-index: -2; }
.hero__bilder img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.6s ease-in-out;
}
.hero__bilder img:first-child { opacity: 1; }
.hero__bilder img.sichtbar { opacity: 1; }

/* Leise Kamerafahrt: 4,5 Prozent Zoom ueber die Standzeit eines Bildes.
   Das Bild wirkt lebendig, ohne dass jemand einen Effekt bemerkt. Der
   Ruhezustand ist der Endwert der Fahrt, damit das ausblendende Bild beim
   Verlust der Klasse nicht zurueckspringt. Bei reduzierter Bewegung greift
   die globale Regel am Dateiende und die Fahrt entfaellt.               */
.hero__bilder img { transform: scale(1.045); }
.hero__bilder img.sichtbar { animation: fahrt 5.5s ease-out forwards; }
@keyframes fahrt {
  from { transform: scale(1); }
  to   { transform: scale(1.045); }
}

/* Abdunklung, damit die weiße Schrift auf jedem Motiv trägt. Die Vorlage
   arbeitet hier ohne Absicherung, was bei hellen Bildern kippt. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg,
              rgba(14,8,40,0.50) 0%,
              rgba(14,8,40,0.58) 55%,
              rgba(14,8,40,0.66) 100%);
}
.hero__inhalt { max-width: 52rem; color: #FFF; }
.hero__titel {
  font-size: clamp(1.9rem, 4.4vw, var(--t-hero));
  font-weight: 600;
  line-height: 1.15;
  color: #FFF;
  text-shadow: 0 2px 18px rgba(10,6,30,0.55);
}
.hero__leistungen {
  margin-top: var(--raum-halb);
  font-size: var(--t-basis);
  letter-spacing: 0.02em;
  color: #FFF;
  max-width: none;
  text-shadow: 0 1px 10px rgba(10,6,30,0.6);
}
.hero__linie { width: 5rem; height: 1px; margin: var(--raum-halb) auto; background: rgba(255,255,255,0.75); border: 0; }
.hero__claim {
  font-size: var(--t-mittel);
  font-style: italic;
  font-weight: 400;
  color: #FFF;
  max-width: none;
  text-shadow: 0 1px 12px rgba(10,6,30,0.6);
}

/* --- 8. Kachelreihe ------------------------------------------------------
   Fünf Bildkacheln mit violettem Beschriftungsbalken, wie in der Vorlage. */

.kacheln {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 0.5rem;
}
.kachel {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  overflow: hidden;
  background: var(--v-700);
}
.kachel__bild { overflow: hidden; aspect-ratio: 4 / 3; }
.kachel img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s ease; }
.kachel:hover img { transform: scale(1.06); }
.kachel__titel {
  padding: 0.7rem 0.75rem;
  background: var(--v-700);
  color: #FFF;
  font-size: var(--t-klein);
  font-weight: 600;
  text-align: center;
  line-height: var(--lh-mittel);
}
.kachel:hover .kachel__titel { background: var(--v-800); }

/* --- 9. Karten und Galerie ---------------------------------------------- */

.karte { display: block; text-decoration: none; background: var(--bg); }
.karte__bild { overflow: hidden; aspect-ratio: 4 / 3; }
.karte__bild img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s ease; }
.karte:hover .karte__bild img { transform: scale(1.04); }
.karte__ort {
  display: block;
  margin-top: 0.6rem;
  font-size: var(--t-klein);
  color: var(--text-muted);
}
.karte__titel { display: block; font-size: var(--t-basis); font-weight: 600; color: var(--text); }

/* Platzhalter, solange die aufbereiteten Objektfotos fehlen. Bewusst
   erkennbar und nicht dekorativ, damit niemand sie für fertig hält. */
.platzhalter {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  background: repeating-linear-gradient(45deg,
              var(--v-050) 0 12px, #E9E6F6 12px 24px);
  color: var(--v-700);
  font-size: var(--t-klein);
  font-weight: 600;
  text-align: center;
  padding: 1rem;
}

/* --- 10. Formular -------------------------------------------------------- */

.formular { display: grid; gap: var(--raum-halb); max-width: 34rem; }
.feld { display: grid; gap: 0.35rem; }
.feld label { font-size: var(--t-klein); font-weight: 600; color: var(--text); }
.feld input, .feld textarea {
  font: inherit;
  font-size: var(--t-klein);
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--rahmen-feld);
  border-radius: var(--radius);
  background: #FFF;
  color: var(--text);
  width: 100%;
}
.feld textarea { min-height: 8rem; resize: vertical; }
.feld input:focus, .feld textarea:focus { border-color: var(--v-600); }
.pflicht { color: var(--fehler); }

/* --- 11. Fußzeile -------------------------------------------------------- */

.fuss { background: var(--v-900); color: rgba(255,255,255,0.82); }
.fuss a { color: #FFF; text-decoration: none; }
.fuss a:hover { text-decoration: underline; }
.fuss__raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--raum);
  padding-block: var(--raum-doppel) var(--raum);
}
.fuss__titel {
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #FFF;
  margin-bottom: 0.7rem;
}
.fuss p { font-size: var(--t-klein); max-width: none; }
.fuss__liste { list-style: none; display: grid; gap: 0.4rem; font-size: var(--t-klein); }
/* Urhebervermerk: bewusst leiser als Impressum und Datenschutz. */
.fuss__credit { opacity: 0.6; }
.fuss__credit a { text-decoration: none; }
.fuss__credit a:hover { text-decoration: underline; }

.fuss__schluss {
  border-top: 1px solid rgba(255,255,255,0.16);
  padding-block: 1rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  font-size: var(--t-klein);
}

/* --- 12. Bewegung -------------------------------------------------------
   Die Vorlage nutzt fadeInUp, fadeIn, zoomIn und fadeInLeft. Nachgebaut
   ohne Fremdbibliothek. Grundsatz: Alles ist auch ohne JavaScript sichtbar,
   die Animation ist Zugabe und nie Voraussetzung für Lesbarkeit.        */

@media (prefers-reduced-motion: no-preference) {
  .js .anim { opacity: 0; will-change: opacity, transform; }
  .js .anim--auf    { transform: translateY(28px); }
  .js .anim--links  { transform: translateX(-28px); }
  .js .anim--zoom   { transform: scale(0.96); }

  .js .anim.sichtbar {
    opacity: 1;
    transform: none;
    transition: opacity 0.75s ease-out, transform 0.75s ease-out;
  }
  .js .anim.verzoegert-1.sichtbar { transition-delay: 0.1s; }
  .js .anim.verzoegert-2.sichtbar { transition-delay: 0.2s; }
  .js .anim.verzoegert-3.sichtbar { transition-delay: 0.3s; }
}

/* Parallax, in der Vorlage über background-attachment gelöst. Auf Mobilgeräten
   abgeschaltet, dort ruckelt es und iOS ignoriert es ohnehin. */
.parallax {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
  .parallax { background-attachment: fixed; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .hero__bilder img { transition: none; }
}

@media (max-width: 640px) {
  :root { --abstand-sektion: 3rem; --raum-doppel: 2.5rem; --t-hero: 2rem; }
}

/* --- 12a. Personen auf Ueber uns ------------------------------------------
   Portraet ueber dem Namen, wie in der Vorlage, dort stand es rechts neben
   dem Lebenslauf. Beide Aufnahmen sind auf dasselbe Quadrat geschnitten,
   damit der Schwarzweiss-Scan und das Farbfoto wenigstens in Format und
   Groesse zusammenpassen.                                                  */

.person > img {
  display: block;
  width: 150px;
  height: 150px;
  object-fit: cover;
  margin-bottom: 1.1rem;
}

/* --- 12b. Bildansicht -----------------------------------------------------
   Klick auf ein Galeriebild oeffnet es bildschirmfuellend. Ohne
   JavaScript bleibt der Kasten per hidden-Attribut unsichtbar.           */

.zoombar { cursor: zoom-in; }
.zoombar:focus-visible { outline: 2px solid var(--v-700); outline-offset: 2px; }
body.kein-scroll { overflow: hidden; }

/* Das hidden-Attribut wiegt weniger als eine Klassenregel mit display.
   Ohne diese Zeile laege der Kasten dauerhaft offen ueber der Seite.    */
.leuchtkasten[hidden] { display: none; }
.leuchtkasten {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: center;
  padding: 3.5rem 4rem;
  background: rgba(14, 8, 40, 0.94);
}
.leuchtkasten__figur {
  margin: 0;
  display: grid;
  justify-items: center;
  gap: 0.75rem;
  max-width: min(1400px, 100%);
}
.leuchtkasten__figur img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: calc(100vh - 9rem);
}
.leuchtkasten__figur figcaption {
  color: #FFF;
  font-size: var(--t-klein);
  text-align: center;
}
.leuchtkasten__zu,
.leuchtkasten__pfeil {
  position: absolute;
  padding: 0.25rem 0.9rem;
  border: 0;
  background: transparent;
  color: #FFF;
  font-size: 2.75rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0.8;
}
.leuchtkasten__zu:hover, .leuchtkasten__pfeil:hover { opacity: 1; }
.leuchtkasten__zu:focus-visible, .leuchtkasten__pfeil:focus-visible { outline: 2px solid #FFF; outline-offset: 2px; opacity: 1; }
.leuchtkasten__zu { top: 0.75rem; right: 1rem; }
.leuchtkasten__pfeil { top: 50%; transform: translateY(-50%); font-size: 3.5rem; }
.leuchtkasten__pfeil--zurueck { left: 0.5rem; }
.leuchtkasten__pfeil--vor { right: 0.5rem; }

@media (max-width: 640px) {
  .leuchtkasten { padding: 3.5rem 2.5rem; }
  .leuchtkasten__figur img { max-height: calc(100vh - 8rem); }
}

/* --- 13. Vorher und nachher ---------------------------------------------
   Kundenwunsch vom 26.08.2026: „Das Verhältnis Weiß zum Bild ist zu
   gewichtig." Beide Bilder laufen jetzt über die volle Inhaltsbreite, der
   Spalt dazwischen ist schmal, die Beschriftung steht als Marke darüber
   statt klein darunter. Mobil untereinander. */

/* Zwei Paare je Reihe. Der Kunde am 26.08.: mehr Platz als in der Vorlage,
   am 02.09.: die volle Breite ist zu viel. Zwei je Reihe fuellt die Zeile
   ohne Leerraum und haelt jedes Bild bei rund 280 Pixel Breite. */
.projekte {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--raum-doppel) var(--raum);
  margin-top: var(--raum);
}
.paar { margin: 0; min-width: 0; }
.paar__bilder {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  align-items: start;
}
/* Einzelmotive: eigene Reihe unter einer Linie. Vier gleich breite Kacheln
   mit gleichem Abstand, damit sie nicht als zwei Paare gelesen werden. */
.einzelne {
  display: grid;
  /* So viele je Reihe, wie bei mindestens 190 px Breite hineinpassen. Bei
     fuenf Motiven und voller Inhaltsbreite ist das eine Reihe. */
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--raum);
  margin-top: var(--raum-doppel);
  padding-top: var(--raum-doppel);
  border-top: 1px solid var(--rahmen);
}
.einzelne figure { margin: 0; min-width: 0; }
.paar__seite { min-width: 0; }
.paar__marke {
  margin-bottom: 0.4rem;
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--v-700);
  /* Eine Zeile, sonst rutschen die Bilder eines Paares auseinander. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Einheitliches Feld fuer jedes Bild. Der Kunde am 02.09.: "Die Bilder sind
   alle nicht einheitlich ... die muessen schoen nebeneinander abgestimmt
   sein." Fotos fuellen das Feld, Zeichnungen stehen ganz darin. */
.paar__seite img,
.paar__seite .platzhalter {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.paar__seite--ganz img {
  object-fit: contain;
  background: #F4F3F9;
}

@media (max-width: 900px) {
  /* Ein Paar je Reihe, die beiden Bilder bleiben nebeneinander: der
     Vergleich lebt vom direkten Nebeneinander. */
  .projekte { grid-template-columns: 1fr; gap: var(--raum); }
  /* Schmal reicht eine Zeile fuer die Marke nicht, sie wuerde abgeschnitten.
     Zwei Zeilen zulassen, aber als feste Hoehe, damit die beiden Bilder
     eines Paares auf derselben Kante beginnen. */
  .paar__marke { white-space: normal; min-height: 2.6em; line-height: 1.3; }
  .einzelne { grid-template-columns: 1fr 1fr; }
}

/* --- 14. E-Mail-Symbol ---------------------------------------------------
   Die Vorlage zeigt oben rechts und in der Fußzeile drei Symbole.
   Kundenwunsch vom 26.08.2026: Facebook und Instagram raus, E-Mail bleibt. */

.mail-knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--rahmen-knopf);
  border-radius: 50%;
  color: var(--v-700);
  flex: 0 0 auto;
  transition: background var(--tempo), color var(--tempo);
}
.mail-knopf:hover { background: var(--v-700); color: #FFF; }

.mail-knopf--hell { border-color: rgba(255,255,255,0.45); color: #FFF; }
.mail-knopf--hell:hover { background: #FFF; color: var(--v-700); }

.fuss__symbol { margin-top: var(--raum-halb); }

@media (max-width: 980px) {
  /* Auf schmalen Geräten steht der Umschalter im Weg, dann rückt das
     Symbol in die Fußzeile und entfällt oben. */
  .kopf .mail-knopf { display: none; }
}

/* --- 15. Skizze als Untermalung ------------------------------------------
   Die Vorlage legt auf den Architekten-Leistungen eine graue Strichzeichnung
   hinter die Liste. Kundenwunsch vom 26.08.2026: „diese Skizze ist zu stark,
   die macht die Lesbarkeit schwierig", sie soll aufgehellt werden.

   Deshalb 7 Prozent Deckkraft statt der kräftigen Fassung der Vorlage. Der
   Kunde schlug alternativ Fettschrift vor; das wäre die schlechtere Lösung,
   eine fett gesetzte Leistungsliste wirkt unruhig. Erst die Zeichnung
   zurücknehmen, der Text bleibt wie er ist. */

.sektion--skizze { position: relative; overflow: hidden; }
.sektion--skizze > .inhalt { position: relative; z-index: 1; }
.sektion--skizze::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 6%;
  width: min(52%, 620px);
  aspect-ratio: 1400 / 677;
  background: url('../bilder/web/skizze-holzhaus.webp') no-repeat right bottom;
  background-size: contain;
  opacity: 0.07;
  pointer-events: none;
}

@media (max-width: 760px) {
  /* Auf schmalen Geräten liegt die Zeichnung zwangsläufig hinter dem Text
     und stört mehr, als sie trägt. */
  .sektion--skizze::after { display: none; }
}


/* --- Foto als Hintergrund einer Textsektion --------------------------------
   Die Vorlage legt hinter jeden Leistungsblock der Immo-Seite ein stark
   aufgehelltes Foto. Ohne das stehen die drei Listen als reiner Text auf
   Weiß, was leer wirkt. Dasselbe Prinzip wie bei der Skizze: das Bild bleibt
   Atmosphäre, der Text behält seinen vollen Kontrast.
   Deckkraft 0.13 auf hellem Grund: gemessen bleibt der Text bei #2B2B33 auf
   dem hellsten wie dem dunkelsten Bildbereich über 7:1 und damit über AA.  */

.sektion--foto { position: relative; overflow: hidden; }
.sektion--foto > .inhalt { position: relative; z-index: 1; }
/* Als echtes Bild, nicht als url() in einer Variablen: Aus einer Datei
   heraus geöffnet löst der Browser den Variablenpfad gegen das Stylesheet
   auf, und das Foto fehlt. Das img ist überall eindeutig.               */
.sektion__foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.13;
  pointer-events: none;
  user-select: none;
}
/* Auf der violetten Sektion trägt weniger, der Untergrund ist schon farbig. */
.sektion--violett .sektion__foto { opacity: 0.09; }

@media (max-width: 760px) {
  /* Schmal liegt das Foto vollflächig hinter dem Text. Noch weiter zurück. */
  .sektion__foto { opacity: 0.07; }
}