/* =========================================================
   ViaNova Immobilien – Stylesheet
   Design-System aus der bestehenden Framer-Seite übernommen
   (Typografie, Farben und Raster 1:1 vermessen)
   ========================================================= */

/* ---------- Schriften ---------- */
@font-face {
  font-family: 'Instrument Sans';
  src: url('../assets/fonts/InstrumentSans-latin.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Sans';
  src: url('../assets/fonts/InstrumentSans-latin-ext.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  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;
}
@font-face {
  font-family: 'Switzer';
  src: url('../assets/fonts/Switzer-Medium.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Switzer';
  src: url('../assets/fonts/Switzer-Semibold.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}

@font-face {
  font-family: 'Jost';
  src: url('../assets/fonts/Jost-latin.woff2') format('woff2');
  font-weight: 300 500;
  font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Jost';
  src: url('../assets/fonts/Jost-latin-ext.woff2') format('woff2');
  font-weight: 300 500;
  font-style: normal; font-display: swap;
  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;
}

/* ---------- Design-Tokens ---------- */
:root {
  --black:      #000000;
  --ink:        #191919;
  --white:      #ffffff;
  --deep:       #0e1f24;   /* Footer und gescrollte Navigation */
  --hero-tint:  rgba(0, 63, 90, .08);
  --rule:       rgba(0, 0, 0, .2);   /* an der Vorlage gemessen */
  /* Fuer Raender von Bedienelementen: --rule ergibt nur 1,6:1 auf Weiss,
     WCAG 1.4.11 verlangt 3:1. Dieser Wert ergibt 3,2:1. */
  --rule-stark: rgba(0, 0, 0, .45);
  --rule-light: rgba(255, 255, 255, .2);
  --muted:      rgba(0, 0, 0, .55);
  --muted-light:rgba(255, 255, 255, .6);
  /* Gold aus dem Logo. Nur auf dunklem Grund als Textfarbe verwenden -
     auf Weiss betraegt der Kontrast nur 1,9:1 und ist damit unzureichend. */
  --gold:       #DFB88D;

  --pad: 20px;
  --gap: 20px;
  --nav-h: 58px;

  --sans: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  --alt:  'Switzer', 'Instrument Sans', -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  /* Anzeigeschrift fuer Ueberschriften und Rubriken: geometrisch, nah an der
     Logoschrift (kreisrunder O, gleichmaessig duenne Striche). Selbst gehostet. */
  --display: 'Jost', 'Instrument Sans', -apple-system, BlinkMacSystemFont, Arial, sans-serif;

  --ease: cubic-bezier(.22, 1, .36, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--white);
  color: var(--black);
  font-family: var(--sans);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.3;
  letter-spacing: -.02em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
h1, h2, h3, h4, p, ol, ul, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 2px; }

.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;
}
.skip-link {
  position: absolute; top: -100px; left: var(--pad); z-index: 999;
  background: var(--deep); color: var(--white); padding: 12px 18px;
  font-size: 14px; border-radius: 4px; transition: top .2s;
}
.skip-link:focus { top: 12px; }

/* =========================================================
   Typografie – Größen aus der bestehenden Seite
   ========================================================= */
.t-tag {                       /* kleine Rubrik-Labels, 14px */
  font-family: var(--display);
  font-size: 12px; font-weight: 400; line-height: 1.2; letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--black);
}
.t-tag--light { color: var(--gold); }

.t-intro {                     /* 40px, im Original auf zwei Zeilen gesetzt */
  font-family: var(--display);
  font-size: clamp(26px, 3.2vw, 40px);
  font-weight: 400; line-height: 1.05; letter-spacing: -.005em;
  max-width: 505px;
}
.t-section {                   /* 48px */
  font-family: var(--display);
  font-size: clamp(30px, 3.9vw, 48px);
  font-weight: 400; line-height: 1.05; letter-spacing: -.01em;
  text-wrap: balance;
}
.t-section--light { color: var(--white); }

.t-card {                      /* 32px */
  font-family: var(--display);
  font-size: clamp(24px, 2.6vw, 32px);
  font-weight: 400; line-height: 1.05; letter-spacing: -.01em;
  color: var(--ink);
}
.t-body {                      /* 16px / 20.8px */
  font-size: 16px; font-weight: 500; line-height: 1.3; letter-spacing: -.02em;
}
.t-body--light { color: var(--white); }

/* ---------- Raster ---------- */
.wrap { padding-inline: var(--pad); }

.grid-13 {                     /* linke Schmalspalte : rechte Inhaltsspalte = 1 : 2 */
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--gap);
  align-items: start;
}
@media (max-width: 860px) {
  .grid-13 { grid-template-columns: 1fr; gap: 24px; }
  .grid-13__side:empty { display: none; }
}

/* ---------- Trennlinien ---------- */
.rule {
  height: 1px; width: 100%; transform-origin: left center;
  background: var(--rule);
}
.rule--light { background: var(--rule-light); }
.rule--dark  { background: var(--rule); }

/* Linie wächst beim Einblenden von links nach rechts */
.rule { transform: scaleX(0); transition: transform 1.1s var(--ease); }
.is-in .rule, .rule.is-in { transform: scaleX(1); }

/* ---------- Unterstrichene Links ---------- */
.link-underline {
  position: relative; display: inline-block;
  padding-bottom: 2px;
}
.link-underline::after {
  content: ''; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: right center;
  transition: transform .4s var(--ease);
}
.link-underline:hover::after,
.link-underline:focus-visible::after { transform: scaleX(1); transform-origin: left center; }

/* =========================================================
   Navigation
   ========================================================= */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  background: transparent;
  transition: background-color .45s var(--ease), backdrop-filter .45s var(--ease);
}
.nav.is-solid { background: var(--deep); }

.nav__inner {
  display: grid; grid-template-columns: repeat(3, 1fr);
  align-items: center;
  gap: 20px; padding: var(--pad);
  min-height: var(--nav-h);
}
.nav__logo { display: block; }
/* Marke in Gold: Monogramm und Wortzug liegen als eigene SVG-Datei vor
   (site/assets/img/logo-vianova-gold.svg), Seitenverhaeltnis 8,44:1. */
.nav__logo img { display: block; width: 144px; height: 17px; }

.nav__links {
  display: flex; align-items: center; gap: 0;
  font-family: var(--alt);
  font-size: 14px; font-weight: 600; line-height: 14px; letter-spacing: -.03em;
  color: var(--white);
}
.nav__links { gap: 5px; }
.nav__links a { padding-inline: 0; }
.nav__sep { opacity: .9; }
@media (max-width: 520px) {
  .nav__inner { display: flex; justify-content: space-between; }
  /* Der Wortzug darf nicht schrumpfen: als Flex-Element wurde der Anker auf
     42 px zusammengedrueckt, die SVG behielt ihr Verhaeltnis 8,33:1 und war
     nur noch 5 px hoch. Stattdessen brechen die Verweise rechtsbuendig um. */
  .nav__logo { flex: none; }
  .nav__links { font-size: 13px; flex-wrap: wrap; justify-content: flex-end; }
  .nav__logo img { width: 118px; height: 14px; }
}

/* =========================================================
   Hero – bleibt stehen, der weiße Inhalt schiebt sich darüber
   ========================================================= */
.hero {
  position: sticky; top: 0; z-index: 1;
  height: 100vh; height: 100svh;
  overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;
}
.hero__media {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  z-index: 0;
}
.hero__tint { position: absolute; inset: 0; background: var(--hero-tint); z-index: 1; }
.hero__inner {
  position: relative; z-index: 2;
  padding: var(--pad) var(--pad) 40px;
  width: 100%;
}
.hero__title {
  color: var(--white);
  font-family: var(--display);
  font-size: clamp(34px, 4.75vw, 60px);
  font-weight: 400; line-height: 1.04; letter-spacing: -.01em;
  max-width: 20ch;
}
@media (max-width: 640px) { .hero__title br { display: none; } }

/* Wortweises Einblenden der Hero-Überschrift */
.reveal-words span {
  display: inline-block;
  transform: translateY(105%);
  opacity: 0;
  animation: word-in .9s var(--ease) forwards;
}
.reveal-words { overflow: hidden; }
.reveal-words span:nth-child(1) { animation-delay: .10s }
.reveal-words span:nth-child(2) { animation-delay: .17s }
.reveal-words span:nth-child(3) { animation-delay: .24s }
.reveal-words span:nth-child(4) { animation-delay: .31s }
.reveal-words span:nth-child(5) { animation-delay: .38s }
.reveal-words span:nth-child(6) { animation-delay: .45s }
@keyframes word-in { to { transform: translateY(0); opacity: 1; } }

/* =========================================================
   Weißes Blatt über dem Hero
   ========================================================= */
.sheet {
  position: relative; z-index: 2;
  background: var(--white);
}

/* ---------- Intro ---------- */
.intro { padding: 60px var(--pad) 20px; }
.intro-text { padding: 0 var(--pad) 150px; }
.intro-text__cols {
  display: grid; grid-template-columns: 1fr 1fr; gap: 15px;
}
@media (max-width: 860px) {
  .intro-text { padding-bottom: 90px; }
  .intro-text__cols { grid-template-columns: 1fr; gap: 20px; }
}

/* ---------- Kompetenzen ---------- */
/* ---------- Unser Versprechen ---------- */
.promise { padding: 50px 0 100px; }   /* Seitenrand kommt aus .wrap */
.promise__head { padding-bottom: 50px; }
.promise__body > .rule { margin-bottom: 30px; }

/* Zahlenrolle */
.odometer { display: flex; gap: 0; height: 75px; }
.odometer__col { height: 75px; overflow: hidden; }
.odometer__reel {
  display: flex; flex-direction: column;
  transition: transform .7s var(--ease);
}
.odometer__reel span {
  height: 75px; display: block;
  font-size: clamp(64px, 7.9vw, 100px);
  font-weight: 500; line-height: 75px; letter-spacing: 0;
}

.promise__slides { position: relative; }
.promise__slide { animation: slide-in .5s var(--ease); }
@keyframes slide-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.promise__arrows { margin-top: 50px; }
.promise__buttons { display: flex; justify-content: flex-end; gap: 10px; padding-top: 20px; }
.arrow {
  width: 40px; height: 40px; border: 0; background: #F2F2F2; border-radius: 50%;
  display: grid; place-items: center;
  transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.arrow svg { width: 18px; height: 18px; }
.arrow:hover { background: var(--deep); color: var(--white); border-color: var(--deep); }

@media (max-width: 860px) {
  .promise { padding-bottom: 70px; }
  .promise__head { padding-bottom: 30px; }
  .odometer { margin-bottom: 6px; }
}

/* ---------- Arbeitsweise ---------- */
.approach {
  position: relative; overflow: hidden;
  min-height: 720px; height: 100vh;
  display: flex; align-items: center;
  background: var(--black);
}
.approach__media { position: absolute; inset: -8% 0; z-index: 0; }
.approach__media img {
  width: 100%; height: 100%; object-fit: cover;
  opacity: .5;                          /* Wert an der Vorlage gemessen */
  will-change: transform;
}
.approach__inner {
  position: relative; z-index: 2;
  width: 100%; padding: var(--pad);
  border-top: 0;
}
.approach__inner > .rule { margin-bottom: 11px; }
.approach__lead { margin-top: 10px; max-width: 590px; }

@media (max-width: 860px) {
  .approach { height: auto; min-height: 0; max-height: none; padding-block: 120px; }
  .approach__inner { padding-bottom: 20px; }
}

/* ---------- In Zahlen ---------- */
.stats { padding: 50px 0 150px; }     /* Seitenrand kommt aus .wrap */
.stats__grid {
  display: grid; grid-template-columns: 1fr 2fr; gap: var(--gap);
}
.stats__head { padding-top: 16px; }
.stats__items {
  display: grid; grid-template-columns: 1fr 1fr;
  row-gap: 51px; column-gap: 0;
  align-items: start;
}
.stat__num {
  font-family: var(--display);
  font-size: clamp(38px, 4.5vw, 60px);
  font-weight: 300; line-height: 1.1; letter-spacing: normal;
  font-variant-numeric: tabular-nums;
}
.stat__text { max-width: 280px; margin-top: -2px; }

@media (max-width: 860px) {
  .stats { padding-bottom: 90px; }
  .stats__grid { grid-template-columns: 1fr; gap: 24px; }
  .stats__head { padding-top: 16px; }
  .stats__items { grid-template-columns: 1fr 1fr; row-gap: 40px; }
}
@media (max-width: 560px) {
  .stats__items { grid-template-columns: 1fr; }
}

/* ---------- Kontakt ---------- */
.contact { padding: 150px 0 250px; }
.contact .wrap > .rule { margin-bottom: 11px; }

/* ---------- Direkter Mail-Kontakt ---------- */
.contact__lead {
  margin-top: 30px; max-width: 46ch;
}
.contact__mail { display: inline-block; margin-top: 30px; }

.contact__topics { margin-top: 46px; }
.contact__topics-label {
  font-family: var(--alt);
  font-size: 13px; font-weight: 500; letter-spacing: -.02em;
  color: var(--muted);
}
.contact__topics-list {
  margin-top: 14px;
  display: flex; flex-wrap: wrap; gap: 10px 26px;
  font-family: var(--sans);
  font-size: 14px; font-weight: 600; line-height: 14px; letter-spacing: -.03em;
}

.contact__lines {
  margin-top: 46px; padding-top: 24px;
  border-top: 1px solid var(--rule);
  display: flex; flex-direction: column; gap: 8px;
  font-family: var(--alt);
  font-size: 14px; font-weight: 500; letter-spacing: -.03em;
}
.contact__lines p { display: flex; align-items: baseline; gap: 8px; }

/* Stile des Anfrageformulars – das Formular ist vorübergehend aus der Seite
   entfernt (Kontakt läuft über mailto:). Die Stile bleiben stehen, damit sich
   das Formular später ohne Nacharbeit wieder einsetzen lässt. */
.contact__toggle {
  margin-top: 30px;
  font-size: 14px; font-weight: 600; letter-spacing: -.03em;
  font-family: var(--alt);
}
@media (max-width: 860px) { .contact { padding: 90px 0 140px; } }

/* ---------- Formular ---------- */
.form-panel { margin-top: 60px; }
.form-panel > .rule { margin-bottom: 11px; }
.form-panel[hidden] { display: none; }

.form { display: flex; flex-direction: column; gap: 22px; max-width: 700px; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 640px) { .form__row { grid-template-columns: 1fr; } }

.field { display: flex; flex-direction: column; gap: 8px; }
.field label {
  font-family: var(--alt);
  font-size: 13px; font-weight: 500; letter-spacing: -.02em;
  color: var(--muted);
}
.field input, .field select, .field textarea {
  font: inherit; font-size: 16px; color: var(--black);
  background: transparent;
  border: 0; border-bottom: 1px solid var(--rule);
  border-radius: 0;
  padding: 10px 2px;
  transition: border-color .25s var(--ease);
  width: 100%;
}
.field textarea { resize: vertical; min-height: 120px; line-height: 1.4; }
.field select { appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23191919' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 4px center; background-size: 12px 8px;
  padding-right: 24px;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-bottom-color: var(--deep);
}
.field.has-error input, .field.has-error textarea, .field.has-error select { border-bottom-color: #b4231f; }
.field__error { font-size: 13px; color: #b4231f; min-height: 0; }
.field__error:empty { display: none; }

.field--check {
  flex-direction: row; align-items: flex-start; gap: 10px; flex-wrap: wrap;
}
.field--check input { width: 18px; height: 18px; flex: none; margin-top: 2px; accent-color: var(--deep); }
.field--check label { flex: 1; min-width: 240px; line-height: 1.45; }
.field--check label a { text-decoration: underline; text-underline-offset: 2px; }
.field--check .field__error { flex-basis: 100%; }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form__foot { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.btn {
  background: var(--deep); color: var(--white);
  font-family: var(--alt); font-size: 14px; font-weight: 600; letter-spacing: -.02em;
  padding: 14px 26px; border-radius: 999px;
  transition: opacity .25s var(--ease), transform .25s var(--ease);
}
.btn:hover { opacity: .88; }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

.form__status { font-size: 14px; letter-spacing: -.02em; }
.form__status.is-ok    { color: #1c6b3f; }
.form__status.is-error { color: #b4231f; }
.form__note { font-size: 13px; color: var(--muted); line-height: 1.5; }

/* =========================================================
   Referenzen – Projektkarten mit Bildergalerie
   ========================================================= */
.referenzen { padding: 150px 0 120px; }
.referenzen .wrap > .rule { margin-bottom: 11px; }
.referenzen__lead { margin-top: 26px; max-width: 46ch; }

.referenzen__filter {
  margin: 54px 0 26px;
  display: flex; flex-wrap: wrap; gap: 8px;
}
.filter {
  font-family: var(--display);
  font-size: 12px; font-weight: 400; letter-spacing: .14em; text-transform: uppercase;
  padding: 9px 16px; border-radius: 999px;
  /* --rule (0,2 Schwarz) ergibt auf Weiss nur 1,6:1. Bedienelemente
     brauchen 3:1; 0,45 Schwarz ergibt 3,2:1. */
  border: 1px solid var(--rule-stark);
  transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.filter:hover { border-color: rgba(0, 0, 0, .45); }
.filter.is-aktiv { background: var(--deep); color: var(--white); border-color: var(--deep); }

.karten {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
  gap: var(--gap);
}
.karte {
  display: block; text-align: left; width: 100%;
  border: 1px solid var(--rule); border-radius: 4px; overflow: hidden;
  background: var(--white);
  transition: border-color .35s var(--ease), transform .35s var(--ease);
}
.karte:hover { border-color: rgba(0, 0, 0, .38); transform: translateY(-3px); }
.karte[hidden] { display: none; }

.karte__bild { display: block; overflow: hidden; aspect-ratio: 4 / 3; background: var(--deep); }
.karte__bild img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .7s var(--ease);
}
.karte:hover .karte__bild img { transform: scale(1.045); }

.karte__text { display: block; padding: 16px 18px 18px; }
.karte__kopf { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.karte__art {
  font-family: var(--display);
  font-size: 18px; font-weight: 400; letter-spacing: -.005em;
}
/* Kennzeichnung in Petrolblau mit Gold - auf weissem Grund waere Gold als
   Textfarbe mit 1,9:1 nicht ausreichend lesbar. */
.karte__hinweis {
  background: var(--deep); color: var(--gold);
  font-family: var(--display);
  font-size: 10px; font-weight: 400; letter-spacing: .16em; text-transform: uppercase;
  padding: 4px 9px; border-radius: 999px; white-space: nowrap;
}
.karte__ort {
  display: block; margin-top: 3px;
  font-size: 14px; letter-spacing: -.02em; color: var(--muted);
}
.karte__fuss {
  display: block; margin-top: 14px; padding-top: 12px;
  border-top: 1px solid var(--rule);
  font-family: var(--display);
  font-size: 11px; font-weight: 400; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted);
  transition: color .3s var(--ease);
}
.karte:hover .karte__fuss { color: var(--black); }

.referenzen__leer { margin-top: 30px; font-size: 15px; color: var(--muted); }

@media (max-width: 860px) {
  .referenzen { padding: 90px 0 80px; }
  .karten { grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr)); }
}

/* =========================================================
   Aktuell im Bau
   ========================================================= */
.bau { padding: 0 0 150px; }
.bau .wrap > .rule { margin-bottom: 11px; }
.bau__liste { margin-top: 34px; }
.bau__eintrag {
  display: grid; grid-template-columns: 1fr 1.3fr auto;
  gap: 12px var(--gap); align-items: baseline;
  padding: 16px 0; border-bottom: 1px solid var(--rule);
}
.bau__art { font-family: var(--display); font-size: 17px; font-weight: 400; letter-spacing: -.005em; }
.bau__ort { font-size: 15px; letter-spacing: -.02em; }
.bau__stand {
  font-family: var(--display);
  font-size: 11px; font-weight: 400; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted);
}
.bau__hinweis { margin-top: 26px; font-size: 14px; line-height: 1.55; color: var(--muted); max-width: 52ch; }

@media (max-width: 640px) {
  .bau { padding-bottom: 90px; }
  .bau__eintrag { grid-template-columns: 1fr; gap: 4px; }
}

/* =========================================================
   Lichtkasten – Bildergalerie
   ========================================================= */
.lichtkasten {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(14, 32, 36, .97);
  display: grid; grid-template-columns: 72px 1fr 72px; align-items: center;
  padding: 24px;
}
.lichtkasten[hidden] { display: none; }

.lichtkasten__inhalt {
  grid-column: 2; margin: 0;
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  min-width: 0;
}
.lichtkasten__inhalt img {
  max-width: 100%; max-height: calc(100vh - 130px);
  width: auto; height: auto; object-fit: contain;
  border-radius: 2px;
}
.lichtkasten__zeile {
  display: flex; gap: 18px; align-items: baseline; flex-wrap: wrap; justify-content: center;
  font-family: var(--display);
  font-size: 12px; font-weight: 400; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold);
}

.lichtkasten__pfeil {
  width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 30px; line-height: 1; color: var(--white);
  background: rgba(255, 255, 255, .09);
  transition: background-color .3s var(--ease);
}
.lichtkasten__pfeil:hover { background: rgba(223, 184, 141, .28); }
.lichtkasten__pfeil--zurueck { grid-column: 1; justify-self: start; }
.lichtkasten__pfeil--vor { grid-column: 3; justify-self: end; }

.lichtkasten__zu {
  position: absolute; top: 20px; right: 22px;
  width: 44px; height: 44px; border-radius: 50%;
  font-size: 30px; line-height: 1; color: var(--white);
  background: rgba(255, 255, 255, .09);
  transition: background-color .3s var(--ease);
}
.lichtkasten__zu:hover { background: rgba(223, 184, 141, .28); }

body.lichtkasten-offen { overflow: hidden; }

@media (max-width: 640px) {
  .lichtkasten { grid-template-columns: 1fr; padding: 16px; }
  .lichtkasten__inhalt { grid-column: 1; }
  .lichtkasten__inhalt img { max-height: calc(100vh - 190px); }
  .lichtkasten__pfeil--zurueck,
  .lichtkasten__pfeil--vor {
    grid-column: 1; position: absolute; bottom: 22px;
  }
  .lichtkasten__pfeil--zurueck { left: 28%; }
  .lichtkasten__pfeil--vor { right: 28%; }
}

/* =========================================================
   Footer – wird beim Scrollen freigelegt
   ========================================================= */
/* Der Footer klebt am unteren Rand und wird vom weißen Inhaltsblatt
   überdeckt, bis man ans Seitenende scrollt. Deshalb liegt er unter
   Hero (z-index 1) und Blatt (z-index 2). */
.footer {
  position: sticky; bottom: 0; z-index: 0;
  background: var(--deep); color: var(--white);
  padding: var(--pad);
}
.footer__inner { display: flex; flex-direction: column; min-height: 316px; }
.footer__top {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
}
.footer__logo { display: block; }
.footer__logo img { display: block; width: 220px; height: 26px; }

.footer__col {
  display: flex; flex-direction: column; gap: 0;
  font-family: var(--sans); font-size: 14px; font-weight: 600;
  line-height: 14px; letter-spacing: -.03em;
}
/* Die Fusszeilen-Navigation traegt dieselbe Klasse, hat live aber Switzer
   und einen anderen Zeilenschritt - deshalb getrennt. */
nav.footer__col { font-family: var(--alt); gap: 2px; }
.footer__col p { display: flex; align-items: baseline; gap: 6px; }
.contact-line__key { opacity: .4; flex: none; }

.footer__bottom {
  margin-top: auto; padding-top: 60px;
  display: grid; grid-template-columns: repeat(3, 1fr);
  align-items: end; gap: 20px;
  font-family: var(--alt); font-size: 12px; font-weight: 500;
  line-height: 12px; letter-spacing: -.03em;
}
.footer__legal { display: flex; gap: 18px; }
.footer__legal a { font-weight: 600; }

@media (max-width: 860px) {
  .footer__top { grid-template-columns: 1fr; gap: 34px; }
  .footer__inner { min-height: 0; }
  .footer__bottom {
    padding-top: 40px;
    grid-template-columns: 1fr; gap: 14px; align-items: start;
  }
}

/* =========================================================
   Scroll-Animationen
   ========================================================= */
.reveal {
  opacity: 0; transform: translateY(18px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.reveal.is-in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: .09s; }
.reveal[data-delay="2"] { transition-delay: .18s; }
.reveal[data-delay="3"] { transition-delay: .27s; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .rule { transform: scaleX(1); transition: none; }
  .reveal-words span { opacity: 1; transform: none; animation: none; }
  .promise__slide { animation: none; }
  .odometer__reel { transition: none; }
  .approach__media img { transform: none !important; }
}

/* =========================================================
   Unterseiten (Impressum / Datenschutz)
   ========================================================= */
.page {
  background: var(--white);
  padding: calc(var(--nav-h) + 70px) var(--pad) 140px;
  position: relative; z-index: 2;
}
.page__head { border-top: 1px solid var(--rule); padding-top: 11px; margin-bottom: 50px; }
.page__title { font-family: var(--display); font-size: clamp(30px, 3.9vw, 48px); font-weight: 400; line-height: 1.05; letter-spacing: -.01em; }
.prose { max-width: 720px; display: flex; flex-direction: column; gap: 26px; }
.prose h2 {
  font-size: clamp(19px, 1.9vw, 22px); font-weight: 600; letter-spacing: -.02em;
  line-height: 1.2; margin-top: 14px;
}
.prose h3 { font-size: 16px; font-weight: 600; letter-spacing: -.02em; }
.prose p, .prose li { font-size: 16px; font-weight: 500; line-height: 1.55; letter-spacing: -.01em; }
.prose ul { display: flex; flex-direction: column; gap: 8px; padding-left: 18px; list-style: disc; }
.prose a { text-decoration: underline; text-underline-offset: 2px; }
.prose .note {
  background: rgba(0, 63, 90, .06); border-left: 2px solid var(--deep);
  padding: 16px 18px; font-size: 15px; line-height: 1.55;
}
.prose code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .92em; background: rgba(0, 0, 0, .06); padding: 1px 5px; border-radius: 3px;
}
.prose section { display: flex; flex-direction: column; gap: 14px; }

/* Auf den Unterseiten ist die Navigation immer dunkel und der Footer
   steht am Seitenende statt zu kleben. */
.page-body .nav { background: var(--deep); }
.footer--static { position: static; }

/* =====================================================================
   OBJEKTSEITEN
   Erzeugt von werkzeuge/seiten-bauen.mjs aus inhalte/objekte.json.
   Baut auf den vorhandenen Bausteinen auf (.wrap, .rule, .grid-13, .karte,
   .filter, .page-body, .footer--static); hier stehen nur Ergaenzungen.

   Zum Gold: #DFB88D hat auf Weiss nur 1,9:1 Kontrast und ist dort als Text
   unbrauchbar. Gold erscheint deshalb als Schrift ausschliesslich auf
   Petrol (#0E1F24, Kontrast 9,1:1) - und ansonsten als Linie oder Flaeche,
   wo kein Textkontrast gefordert ist.
   ===================================================================== */

/* ---------- Petrolflaeche ---------- */
.flaeche-petrol { background: var(--deep); color: var(--white); }
.flaeche-petrol .rule { background: var(--rule-light); }
.flaeche-petrol .link-underline:hover { color: var(--gold); }
/* Zwei Petrolflaechen hintereinander brauchen eine sichtbare Naht */
.flaeche-petrol + .flaeche-petrol { border-top: 1px solid var(--rule-light); }

/* Goldener Strich als Rubrikmarke auf hellem Grund */
.strich-gold {
  display: block; width: 42px; height: 2px; background: var(--gold);
  transform-origin: left center; transform: scaleX(0);
  transition: transform 1s var(--ease);
}
.strich-gold.is-in { transform: scaleX(1); }

/* ---------- Karte als Verweis ---------- */
.karte--link:focus-visible { outline: 2px solid var(--deep); outline-offset: 3px; }
/* Auf Petrol waere Petrol unsichtbar - dort bleibt Gold. */
.flaeche-petrol .karte--link:focus-visible { outline-color: var(--gold); }
.karte__ohnebild {
  display: block; width: 100%; height: 100%;
  background:
    repeating-linear-gradient(135deg,
      rgba(223, 184, 141, .10) 0 10px,
      transparent 10px 20px),
    var(--deep);
}

/* ---------- Uebersicht /objekte/ ---------- */
.objekte-band { padding: calc(var(--nav-h) + 76px) 0 76px; }
.objekte-band__lead {
  margin-top: 26px; max-width: 52ch;
  font-size: 16px; line-height: 1.45; letter-spacing: -.01em;
  color: rgba(255, 255, 255, .76);
}
.objekte-liste { padding: 58px 0 130px; }
.objekte-liste .referenzen__filter { margin-bottom: 30px; }

/* ---------- Objektseite: Hero ---------- */
.objekt-hero {
  position: relative; overflow: hidden;
  background: var(--deep); color: var(--white);
  padding: calc(var(--nav-h) + 56px) 0 56px;
}
.objekt-hero--bild {
  display: flex; align-items: flex-end;
  min-height: min(74vh, 620px);
  padding: calc(var(--nav-h) + 130px) 0 46px;
}
.objekt-hero__bild {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}
/* Schleier: oben dunkel fuer die Navigation, unten dunkel fuer die Schrift,
   in der Mitte moeglichst durchsichtig, damit das Haus zu sehen ist. */
.objekt-hero__schleier {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom,
    rgba(14, 31, 36, .82) 0%,
    rgba(14, 31, 36, .28) 38%,
    rgba(14, 31, 36, .70) 76%,
    rgba(14, 31, 36, .94) 100%);
}
.objekt-hero__inhalt { position: relative; z-index: 2; width: 100%; }
.objekt-hero__zurueck {
  margin-bottom: 28px;
  font-family: var(--display);
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255, 255, 255, .62);
}
.objekt-hero__zurueck a:hover { color: var(--gold); }
/* Gold statt des schwarzen Grundwerts von .t-tag - der Hero ist dunkel. */
.objekt-hero__status { margin-bottom: 16px; color: var(--gold); }
.objekt-hero__titel { color: var(--white); }
.objekt-hero__ort { margin-top: 10px; color: rgba(255, 255, 255, .88); }
.objekt-hero__zusatz {
  margin-top: 10px; font-size: 15px; letter-spacing: -.01em;
  color: rgba(255, 255, 255, .68);
}
.objekt-hero__bildhinweis {
  margin-top: 24px; max-width: 48ch;
  font-size: 12px; line-height: 1.45;
  color: rgba(255, 255, 255, .55);
}

/* ---------- Einleitung ---------- */
.objekt-einleitung { padding: 88px 0; }
.objekt-einleitung__text { max-width: 620px; }

/* ---------- Daten, auf Petrol ---------- */
.objekt-fakten { padding: 88px 0; }

.fakten { display: grid; }
.fakten__zeile {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap);
  padding: 13px 0;
  border-bottom: 1px solid var(--rule-light);
}
.fakten__zeile:first-child { border-top: 1px solid var(--rule-light); }
.fakten__key {
  font-family: var(--display);
  font-size: 11px; font-weight: 400; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold); align-self: center;
}
.fakten__wert {
  font-size: 16px; letter-spacing: -.02em; color: var(--white); align-self: center;
}

/* Vorhaben mit mehreren Haushaelften */
.einheiten {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(255px, 100%), 1fr));
  gap: 40px; margin-top: 8px;
}
.einheit__name {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 14px;
  font-family: var(--display); font-size: 18px; letter-spacing: -.005em;
  color: var(--white);
}
/* Umkehrung der Kennzeichnung von den Karten: Gold als Flaeche, Petrol als
   Schrift - 9,1:1 und damit gut lesbar. */
.einheit__hinweis {
  background: var(--gold); color: var(--deep);
  font-family: var(--display);
  font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  padding: 4px 9px; border-radius: 999px; white-space: nowrap;
}

.objekt-ausstattung {
  margin-top: 34px; display: flex; flex-wrap: wrap; gap: 8px;
  list-style: none; padding: 0;
}
.objekt-ausstattung li {
  border: 1px solid rgba(223, 184, 141, .42); border-radius: 999px;
  padding: 6px 14px;
  font-size: 13px; letter-spacing: -.01em; color: rgba(255, 255, 255, .86);
}
.objekt-fakten__hinweis {
  margin-top: 32px; max-width: 46ch;
  font-size: 14px; line-height: 1.5; color: rgba(255, 255, 255, .64);
}

/* ---------- Grundriss ---------- */
.objekt-grundriss { padding: 88px 0 0; }
.objekt-grundriss .wrap > .rule { margin-bottom: 26px; }
.objekt-grundriss__figur { margin: 26px 0 0; }
.objekt-grundriss__knopf {
  display: block; width: 100%;
  border: 1px solid var(--rule); border-radius: 4px; overflow: hidden;
  background: var(--white);
  transition: border-color .35s var(--ease);
}
.objekt-grundriss__knopf:hover { border-color: var(--gold); }
.objekt-grundriss__knopf img { width: 100%; height: auto; }
.objekt-grundriss__zeile {
  display: block; margin-top: 12px;
  font-size: 13px; line-height: 1.5; color: var(--muted);
}

/* ---------- Ansichten ---------- */
.objekt-galerie { padding: 88px 0 0; }
.objekt-galerie .wrap > .rule { margin-bottom: 26px; }
.objekt-galerie__hinweis {
  margin-top: 12px; max-width: 54ch;
  font-size: 13px; line-height: 1.5; color: var(--muted);
}
.objekt-galerie__gitter {
  margin-top: 26px;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
  gap: var(--gap);
}
.objekt-galerie__bild {
  display: block; overflow: hidden; border-radius: 4px;
  aspect-ratio: 4 / 3; background: var(--deep);
}
.objekt-galerie__bild img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .7s var(--ease);
}
.objekt-galerie__bild:hover img { transform: scale(1.045); }
.objekt-galerie__bild:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* ---------- Noch kein Bildmaterial ---------- */
.objekt-leer { padding: 88px 0 0; }
.objekt-leer .wrap > .rule { margin-bottom: 40px; }
.objekt-leer__text { max-width: 52ch; color: var(--muted); }

/* ---------- Anfrage, auf Petrol ---------- */
/* Naht zum Fuss: der ist ebenfalls petrol, sonst verschmelzen beide zu
   einem Block - und sie wiederholen dieselben Kontaktdaten. */
.objekt-anfrage {
  margin-top: 88px; padding: 88px 0;
  border-bottom: 1px solid var(--rule-light);
}
.objekt-anfrage__text {
  margin-top: 24px; max-width: 46ch;
  font-size: 16px; line-height: 1.45; letter-spacing: -.01em;
  color: rgba(255, 255, 255, .82);
}
.btn--gold { background: var(--gold); color: var(--deep); }
.btn--gold:hover { opacity: 1; background: #ecd2b3; }
.objekt-anfrage .btn { display: inline-block; margin-top: 32px; }
/* currentColor waere auf dem goldenen Knopf Petrol auf Petrol: 1,0:1, also
   kein sichtbarer Ring. Weiss auf Petrol ergibt 16,9:1. */
.flaeche-petrol .btn:focus-visible { outline-color: var(--white); }
.objekt-anfrage__zeilen {
  margin-top: 34px; display: flex; flex-direction: column; gap: 7px;
  font-size: 15px; letter-spacing: -.02em; color: rgba(255, 255, 255, .88);
}
.objekt-anfrage__zeilen .contact-line__key { color: var(--gold); margin-right: 9px; }

/* ---------- Objekt-Abschnitt auf der Startseite ---------- */
.objekte-teaser { padding: 96px 0; }
.objekte-teaser .wrap > .rule { margin-bottom: 11px; }
.objekte-teaser__lead {
  margin-top: 26px; max-width: 48ch;
  font-size: 16px; line-height: 1.45; letter-spacing: -.01em;
  color: rgba(255, 255, 255, .76);
}
.objekte-teaser__karten { margin-top: 54px; }
.objekte-teaser__mehr {
  margin-top: 34px;
  font-family: var(--display);
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold);
}

@media (max-width: 860px) {
  .objekte-band { padding: calc(var(--nav-h) + 46px) 0 52px; }
  .objekte-liste { padding: 40px 0 90px; }
  .objekt-hero { padding: calc(var(--nav-h) + 34px) 0 40px; }
  .objekt-hero--bild { min-height: 62vh; padding: calc(var(--nav-h) + 90px) 0 34px; }
  .objekt-hero__zurueck { margin-bottom: 20px; }
  .objekt-einleitung,
  .objekt-fakten { padding: 60px 0; }
  .objekt-grundriss,
  .objekt-galerie,
  .objekt-leer { padding: 60px 0 0; }
  .objekt-anfrage { margin-top: 60px; padding: 60px 0; }
  .objekte-teaser { padding: 66px 0; }
  .objekte-teaser__karten { margin-top: 34px; }
  .fakten__zeile { grid-template-columns: 1fr; gap: 4px; }
  .einheiten { gap: 30px; }
  .objekt-galerie__gitter { grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr)); }
}

/* ---------- Raumaufteilung ---------- */
.raeume__titel {
  margin-top: 40px; margin-bottom: 14px;
  font-family: var(--display);
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold);
}
.raeume {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  column-gap: 40px;
}
.raeume__zeile {
  display: flex; justify-content: space-between; gap: 20px;
  padding: 9px 0;
  border-bottom: 1px solid var(--rule-light);
}
.raeume__name { font-size: 15px; letter-spacing: -.02em; color: rgba(255, 255, 255, .88); }
.raeume__flaeche {
  font-size: 15px; letter-spacing: -.02em; color: var(--white);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* =====================================================================
   NAVIGATION ALS SCHALTFLAECHEN
   Vorher standen die Verweise als kommagetrennte Woerter da und sahen
   nicht anklickbar aus. Ab 640 px sind es Pillen mit sichtbarem Rand,
   darunter bleibt es bei Text mit dauerhaftem Unterstrich - vier Pillen
   passen auf einem Telefon nicht neben das Logo.
   ===================================================================== */
.nav__links { gap: 8px; }
.nav__sep { display: none; }

.nav__links a {
  position: relative;
  border-bottom: 1px solid rgba(255, 255, 255, .45);
  padding-bottom: 2px;
  transition: color .25s var(--ease), border-color .25s var(--ease);
}
.nav__links a:hover,
.nav__links a:focus-visible { color: var(--gold); border-color: var(--gold); }
.nav__links a[aria-current="page"] { color: var(--gold); border-color: var(--gold); }

@media (min-width: 640px) {
  .nav__links { gap: 7px; }
  .nav__links a {
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 999px;
    padding: 7px 15px 8px;
    line-height: 1;
  }
  .nav__links a:hover,
  .nav__links a:focus-visible {
    color: var(--deep); background: var(--gold); border-color: var(--gold);
  }
  .nav__links a[aria-current="page"] {
    color: var(--deep); background: var(--gold); border-color: var(--gold);
  }
}

/* Auf dem hellen Grund der Textseiten (Impressum) traegt .page-body die
   dunkle Navigation, die Verweise bleiben also weiss - passt. */

/* ---------- Telefonnummern mit Namen ---------- */
/* inline-block, damit die Zuordnung sowohl in den Flex-Zeilen des Footers
   als auch in normalen Absaetzen gleich aussieht: direkt hinter der Nummer. */
.kontakt-name {
  display: inline-block; margin-left: 10px;
  font-family: var(--display);
  font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted-light);
}
.flaeche-petrol .kontakt-name { color: rgba(255, 255, 255, .55); }

/* =====================================================================
   HERO ALS BILDFOLGE DER EIGENEN VORHABEN
   Ersetzt das Hintergrundvideo. Bilder ueberblenden, die Objektzeile
   wechselt mit und ist anklickbar, die Striche darunter erlauben das
   direkte Anwaehlen.
   ===================================================================== */
.hero__bild {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0;
  transition: opacity 1.6s var(--ease);
}
.hero__bild.is-an { opacity: 1; }

/* Langsames Auszoomen des sichtbaren Bildes - nur wenn Bewegung erwuenscht */
@media (prefers-reduced-motion: no-preference) {
  .hero__bild { transform: scale(1.07); transition: opacity 1.6s var(--ease), transform 9s linear; }
  .hero__bild.is-an { transform: scale(1); }
}

/* Anklickbare Objektzeile. Die Verweise liegen uebereinander, damit die
   Zeile beim Wechsel nicht in der Hoehe springt. */
.hero__objekte { position: relative; height: 1.5em; margin-top: 30px; }
.hero__objekt {
  position: absolute; left: 0; top: 0;
  /* wie beim Filmband: sonst tabbt man durch unsichtbare Verweise */
  opacity: 0; visibility: hidden; pointer-events: none;
  white-space: nowrap;
  font-family: var(--display);
  font-size: 12px; font-weight: 400; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold);
  border-bottom: 1px solid rgba(223, 184, 141, .5);
  padding-bottom: 4px;
  transition: opacity .8s var(--ease), color .25s var(--ease), border-color .25s var(--ease), visibility .8s var(--ease);
}
.hero__objekt.is-an { opacity: 1; visibility: visible; pointer-events: auto; }
.hero__objekt:hover,
.hero__objekt:focus-visible { color: var(--white); border-color: var(--white); }
.hero__objekt::after { content: " \2192"; }

.hero__punkte { display: flex; gap: 9px; margin-top: 24px; }
.hero__punkt {
  width: 32px; height: 3px; border-radius: 2px;
  background: rgba(255, 255, 255, .32);
  transition: background .3s var(--ease);
}
.hero__punkt.is-an { background: var(--gold); }
.hero__punkt:hover { background: rgba(255, 255, 255, .7); }
.hero__punkt:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }

@media (max-width: 620px) {
  .hero__objekt { font-size: 11px; letter-spacing: .12em; white-space: normal; }
  .hero__objekte { height: 2.6em; }
  .hero__punkt { width: 26px; }
}

/* ---------- Weitere Vorhaben am Ende der Objektseite ---------- */
.objekt-weitere { padding: 88px 0 0; }
.objekt-weitere .wrap > .rule { margin-bottom: 11px; }
.objekt-weitere__karten { margin-top: 30px; }
.objekt-weitere__mehr {
  margin-top: 30px;
  font-family: var(--display);
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted);
}
@media (max-width: 860px) { .objekt-weitere { padding: 60px 0 0; } }

/* Der Kopfbereich zeigt jetzt helle Visualisierungen statt des dunklen
   Videos. Der bisherige Schleier mit 8 % reichte dafuer nicht - weisse
   Schrift auf weisser Hauswand war kaum lesbar. Oben abgedunkelt fuer die
   Navigation, unten fuer Ueberschrift und Objektzeile, in der Mitte klar. */
.hero__tint {
  background:
    linear-gradient(to bottom,
      rgba(14, 31, 36, .40) 0%,
      rgba(14, 31, 36, .06) 30%,
      rgba(14, 31, 36, .58) 74%,
      rgba(14, 31, 36, .88) 100%),
    var(--hero-tint);
}

/* ---------- Referenzen auf der Startseite ---------- */
/* Die Karten verweisen jetzt auf eigene Seiten statt eine Galerie zu oeffnen,
   deshalb steht hier kein Filter mehr - der sitzt auf /referenzen/. */
.referenzen__karten { margin-top: 54px; }
.referenzen__mehr {
  margin-top: 34px;
  font-family: var(--display);
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted);
}
@media (max-width: 860px) { .referenzen__karten { margin-top: 34px; } }

/* =====================================================================
   VERKAUFSSTAND
   Getrennt vom Bauzustand: ein Haus kann im Bau und zugleich verkauft
   sein. Die Marken erscheinen auf weissen Karten und auf Petrolflaechen,
   die Farben mussten daher auf beiden Gruenden funktionieren.
   "Noch verfuegbar" ist gold gefuellt mit petrol Schrift - 9,1:1 und auf
   jedem Grund gleich gut lesbar. Gold als Schrift auf Weiss geht nicht.
   ===================================================================== */
.marke {
  display: inline-block;
  font-family: var(--display);
  font-size: 10px; font-weight: 400; letter-spacing: .16em; text-transform: uppercase;
  padding: 4px 9px; border-radius: 999px; white-space: nowrap;
  border: 1px solid transparent;
}

/* Das Wichtigste: was noch zu haben ist, sticht hervor */
.marke--verfuegbar { background: var(--gold); color: var(--deep); }

/* Reserviert: dunkel gefuellt mit goldener Schrift, auf Petrol zusaetzlich
   ein goldener Rand, damit die Fuellung sichtbar bleibt */
.marke--reserviert { background: var(--deep); color: var(--gold); }
.flaeche-petrol .marke--reserviert,
.objekt-hero .marke--reserviert { border-color: rgba(223, 184, 141, .55); }

/* Verkauft: bewusst zurueckhaltend, es ist kein Angebot mehr */
.marke--verkauft {
  background: transparent; color: var(--muted);
  border-color: var(--rule);
}
.flaeche-petrol .marke--verkauft,
.objekt-hero .marke--verkauft {
  color: rgba(255, 255, 255, .62);
  border-color: var(--rule-light);
}

/* Kopf der Objektseite: Bauzustand und Verkaufsstand in einer Zeile */
.objekt-hero__marken {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 16px;
}
.objekt-hero__marken .objekt-hero__status { margin-bottom: 0; }

/* Haushaelften: Marke hinter dem Namen */
.einheit__name .marke { margin-left: 2px; }

/* Genauere Angabe je Haushaelfte, wenn eine Marke zu grob waere - etwa wenn
   nur eine von zwei Wohnungen verkauft ist. */
.einheit__verkauf {
  margin: -8px 0 14px;
  font-size: 13px; letter-spacing: -.01em;
  color: rgba(255, 255, 255, .66);
}

/* =====================================================================
   UNTERNEHMENSSEITE
   Die vier Selbstbeschreibungs-Abschnitte sind von der Startseite hierher
   umgezogen (Kompetenzen, Versprechen, Arbeitsweise, Zahlen), dazu neu:
   wer wir sind, Ablauf in sechs Schritten, haeufige Fragen, Grundstuecke.
   ===================================================================== */

/* Verweis von der Startseite hierher */
.intro-mehr { padding: 34px var(--pad) 0; }
.intro-mehr__text {
  font-family: var(--display);
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted);
}

/* ---------- Wer wir sind ---------- */
.team { padding: 58px 0 88px; }
.team .wrap > .rule { margin-bottom: 11px; }
.team__lead { max-width: 18ch; }
/* Zwei Spalten fuer den Fliesstext: eine einzelne 620 px breite Spalte unter
   einer grossen Ueberschrift wirkte wie eine Textwand. */
.team__spalten {
  margin-top: 40px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 30px 44px;
}
.team__text {
  font-size: 16px; line-height: 1.55; letter-spacing: -.01em;
  color: var(--muted);
}
.team__text strong { font-weight: 600; color: var(--ink); }
.team__bild { margin: 44px 0 0; }
.team__bild img { width: 100%; height: auto; border-radius: 4px; }
.team__bild figcaption {
  margin-top: 12px;
  font-family: var(--display);
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted);
}

/* ---------- Ablauf in sechs Schritten ---------- */
.ablauf { padding: 0 0 88px; }
.ablauf .wrap > .rule { margin-bottom: 11px; }
.ablauf__lead { margin-top: 22px; max-width: 46ch; }
.ablauf__liste {
  margin-top: 54px; padding: 0; list-style: none;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr));
  gap: 44px 40px;
}
.ablauf__schritt { display: flex; gap: 18px; align-items: flex-start; }
.ablauf__num {
  flex: none;
  font-family: var(--display);
  font-size: 13px; font-weight: 400; letter-spacing: .12em;
  color: var(--deep);
  background: var(--gold);
  border-radius: 999px; padding: 6px 10px; line-height: 1;
}
.ablauf__schritt p { margin-top: 10px; max-width: 42ch; }

/* ---------- Kompetenzen: Beleg statt Behauptung ---------- */
/* Goldene Linie links als Marke - Gold als Schrift waere auf Weiss mit
   1,9:1 unlesbar, als Linie ist es unproblematisch. */
.skill__beleg {
  margin-top: 14px; padding-left: 14px;
  border-left: 2px solid var(--gold);
  font-size: 14px; line-height: 1.5; letter-spacing: -.01em;
  color: var(--muted);
  max-width: 46ch;
}

/* ---------- Kennzahlen auf Petrol ---------- */
.stats.flaeche-petrol { padding: 88px 0; }
.stats.flaeche-petrol .stat__num { color: var(--gold); }
.stats.flaeche-petrol .stat__text { color: rgba(255, 255, 255, .78); }

/* ---------- Haeufige Fragen ---------- */
.fragen { padding: 88px 0; }
.fragen .wrap > .rule { margin-bottom: 11px; }
.fragen__liste { margin-top: 46px; max-width: 760px; }
.frage {
  border-top: 1px solid var(--rule);
}
.frage:last-of-type { border-bottom: 1px solid var(--rule); }
.frage__titel {
  display: flex; align-items: baseline; gap: 14px;
  padding: 18px 0; cursor: pointer;
  font-family: var(--display);
  font-size: clamp(17px, 1.8vw, 20px); font-weight: 400; letter-spacing: -.01em;
  list-style: none;
}
.frage__titel::-webkit-details-marker { display: none; }
/* Plus, das beim Oeffnen zum Minus wird */
.frage__titel::after {
  content: "+"; margin-left: auto;
  font-family: var(--display); font-weight: 400;
  color: var(--muted); flex: none;
  transition: transform .3s var(--ease), color .3s var(--ease);
}
.frage[open] .frage__titel::after { content: "–"; color: var(--black); }
.frage__titel:hover { color: var(--black); }
.frage__titel:focus-visible { outline: 2px solid var(--deep); outline-offset: 2px; }
.frage__text { padding: 0 0 22px; max-width: 62ch; }
.frage__text p { font-size: 16px; line-height: 1.5; letter-spacing: -.01em; color: var(--muted); }
/* Der Weg zur E-Mail muss als solcher erkennbar sein. Ein unterstrichener
   Link im Fliesstext war es nicht - deshalb ein abgesetzter Block mit
   goldener Schaltflaeche und sichtbarer Adresse darunter. */
.fragen__kontakt {
  margin-top: 46px; padding: 34px 0 0;
  border-top: 1px solid var(--rule);
  max-width: 760px;
}
.fragen__kontakt-frage {
  font-family: var(--display);
  font-size: clamp(19px, 2vw, 24px); font-weight: 400; letter-spacing: -.01em;
}
.fragen__kontakt-text {
  margin-top: 10px; max-width: 46ch;
  font-size: 16px; line-height: 1.5; letter-spacing: -.01em; color: var(--muted);
}
.fragen__knopf {
  display: inline-block; margin-top: 24px;
  /* Fuellung wie beim Anfragebereich: laeuft beim Zeigen von links weiss ein */
  background-image: linear-gradient(to right,
    var(--deep) 0, var(--deep) 50%, var(--gold) 50%, var(--gold) 100%);
  background-size: 200% 100%;
  background-position: 100% 0;
  transition: background-position .5s var(--ease), color .3s var(--ease);
}
.fragen__knopf:hover,
.fragen__knopf:focus-visible { opacity: 1; background-position: 0 0; color: var(--white); }
.fragen__kontakt-adresse {
  margin-top: 18px;
  display: flex; align-items: baseline; gap: 8px;
  font-family: var(--alt);
  font-size: 14px; font-weight: 500; letter-spacing: -.03em;
  color: var(--muted);
}

/* ---------- Grundstuecke gesucht ---------- */
.grundstueck { padding: 88px 0; }
.grundstueck__text {
  margin-top: 24px; max-width: 52ch;
  font-size: 16px; line-height: 1.5; letter-spacing: -.01em;
  color: rgba(255, 255, 255, .82);
}
.grundstueck .btn { display: inline-block; margin-top: 32px; }
.grundstueck .objekt-anfrage__zeilen { margin-top: 34px; }
.grundstueck .contact-line__key { color: var(--gold); margin-right: 9px; }

/* ---------- Weiterfuehrende Verweise ---------- */
.unternehmen-weiter { padding: 0 0 120px; }
.unternehmen-weiter .wrap > .rule { margin-bottom: 26px; }
.unternehmen-weiter__text {
  display: flex; gap: 16px; flex-wrap: wrap;
  font-family: var(--display);
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted);
}

@media (max-width: 860px) {
  .fragen,
  .grundstueck { padding: 60px 0; }
  .team { padding: 40px 0 60px; }
  .stats.flaeche-petrol { padding: 60px 0; }
  .ablauf { padding: 0 0 60px; }
  .ablauf__liste { margin-top: 34px; gap: 30px; }
  .unternehmen-weiter { padding: 0 0 80px; }
  .intro-mehr { padding-top: 26px; }
}

/* =====================================================================
   ANFRAGEBEREICH DER STARTSEITE
   Der Abschluss der Seite steht auf Petrol, wie der Anfragebereich der
   Objektseiten. Drei Bewegungen, alle zurueckhaltend: die Ueberschrift
   baut sich Wort fuer Wort auf, ein goldener Strich zieht sich darunter,
   und die Schaltflaeche pulsiert leise und fuellt sich beim Zeigen.
   Alles davon steht unter prefers-reduced-motion still (siehe unten).
   ===================================================================== */
.contact.flaeche-petrol { padding: 96px 0 110px; }

/* Wort fuer Wort, ausgeloest wenn der Beobachter is-in setzt.
   Nutzt die vorhandene Keyframe word-in weiter. */
.woerter { display: block; overflow: hidden; }
.woerter span {
  display: inline-block;
  transform: translateY(105%);
  opacity: 0;
}
.woerter.is-in span { animation: word-in .85s var(--ease) forwards; }
.woerter.is-in span:nth-child(1) { animation-delay: .04s }
.woerter.is-in span:nth-child(2) { animation-delay: .11s }
.woerter.is-in span:nth-child(3) { animation-delay: .18s }
.woerter.is-in span:nth-child(4) { animation-delay: .25s }
.woerter.is-in span:nth-child(5) { animation-delay: .32s }
.woerter.is-in span:nth-child(6) { animation-delay: .39s }

/* Der goldene Strich zieht sich nach der Ueberschrift auf */
.strich-gold--breit {
  width: 96px; height: 3px; margin-top: 26px;
  transition: transform 1.1s var(--ease) .45s;
}

.contact.flaeche-petrol .contact__lead {
  margin-top: 30px; max-width: 46ch;
  font-size: 16px; line-height: 1.5; letter-spacing: -.01em;
  color: rgba(255, 255, 255, .82);
}

/* ---------- Schaltflaeche: Puls und Fuellung ---------- */
.contact.flaeche-petrol .contact__mail {
  position: relative; display: inline-block; margin-top: 34px;
  color: var(--deep);
  /* Fuellung als Farbverlauf, damit kein zusaetzliches Element noetig ist */
  background-image: linear-gradient(to right,
    var(--white) 0, var(--white) 50%, var(--gold) 50%, var(--gold) 100%);
  background-size: 200% 100%;
  background-position: 100% 0;
  transition: background-position .55s var(--ease);
}
.contact.flaeche-petrol .contact__mail:hover,
.contact.flaeche-petrol .contact__mail:focus-visible {
  opacity: 1; background-position: 0 0;
}
/* Leiser Ring, der nach aussen laeuft - hoert beim Zeigen auf */
.contact.flaeche-petrol .contact__mail::after {
  content: ""; position: absolute; inset: -5px;
  border: 1px solid rgba(223, 184, 141, .5);
  border-radius: 999px; pointer-events: none;
  animation: ring-raus 2.8s var(--ease) infinite;
}
.contact.flaeche-petrol .contact__mail:hover::after,
.contact.flaeche-petrol .contact__mail:focus-visible::after { animation: none; opacity: 0; }
@keyframes ring-raus {
  0%   { transform: scale(1);    opacity: .75; }
  65%  { transform: scale(1.16); opacity: 0; }
  100% { transform: scale(1.16); opacity: 0; }
}

/* ---------- Themenlinks und Kontaktzeilen auf Petrol ---------- */
.contact.flaeche-petrol .contact__topics-label { color: rgba(255, 255, 255, .55); }
.contact.flaeche-petrol .contact__topics-list a:hover { color: var(--gold); }
.contact.flaeche-petrol .contact__lines { border-top-color: var(--rule-light); }
.contact.flaeche-petrol .contact-line__key { color: var(--gold); opacity: 1; }

@media (max-width: 860px) {
  .contact.flaeche-petrol { padding: 66px 0 80px; }
}

/* Bewegung aus: alles steht sofort da, nichts pulsiert. */
@media (prefers-reduced-motion: reduce) {
  .woerter span { opacity: 1; transform: none; animation: none; }
  .strich-gold--breit { transform: scaleX(1); transition: none; }
  .contact.flaeche-petrol .contact__mail::after { animation: none; opacity: 0; }
  .contact.flaeche-petrol .contact__mail { transition: none; }
}

/* =====================================================================
   REFERENZEN SPANNENDER
   Neun gleich grosse Karten in einem Raster wirkten abgelegt. Drei
   Aenderungen: eine Auftaktkarte in doppelter Breite, ein Bildwechsel
   beim Zeigen als Vorgeschmack auf die Galerie, und eine Zahlenzeile,
   die dem Raster einen Rahmen gibt.
   ===================================================================== */

/* Zahlen ueber dem Raster */
.liste__zahlen {
  display: flex; flex-wrap: wrap; gap: 10px 40px;
  margin: 0 0 34px;
  padding-bottom: 26px;
  border-bottom: 1px solid var(--rule);
  font-size: 15px; letter-spacing: -.02em; color: var(--muted);
}
.liste__zahlen strong {
  font-family: var(--display);
  font-size: clamp(22px, 2.2vw, 30px); font-weight: 300;
  letter-spacing: normal; color: var(--ink);
  margin-right: 8px;
  font-variant-numeric: tabular-nums;
}

/* Auftaktkarte: doppelte Breite, breiteres Bild, groessere Bezeichnung */
@media (min-width: 700px) {
  .karte--gross { grid-column: span 2; }
  .karte--gross .karte__bild { aspect-ratio: 16 / 9; }
  .karte--gross .karte__art { font-size: clamp(20px, 2.2vw, 26px); }
  .karte--gross .karte__text { padding: 20px 22px 22px; }
}

/* Bildwechsel beim Zeigen: das zweite Foto blendet auf. Gibt einen
   Vorgeschmack auf die Galerie, ohne dass man klicken muss. */
.karte__bild { position: relative; }
.karte__foto {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .7s var(--ease), opacity .55s var(--ease);
}
.karte__foto--zwei {
  position: absolute; inset: 0;
  opacity: 0;
}
.karte:hover .karte__foto--zwei,
.karte:focus-visible .karte__foto--zwei { opacity: 1; }
.karte:hover .karte__foto { transform: scale(1.045); }

@media (max-width: 860px) {
  .liste__zahlen { gap: 8px 26px; margin-bottom: 26px; }
}

/* Ohne Bewegung kein Ueberblenden und kein Zoom */
@media (prefers-reduced-motion: reduce) {
  .karte__foto { transition: none; }
  .karte:hover .karte__foto { transform: none; }
}

/* =========================================================
   Filmband auf /referenzen
   Die fertigen Haeuser laufen als Bilderfolge durch, bevor das Raster
   kommt: ueberblendet, langsam gezoomt, mit Fortschrittsbalken. Ein
   echtes Video haben wir nicht - und es waere ein Vielfaches an Daten.
   ========================================================= */
.film {
  position: relative;
  height: clamp(420px, 66vh, 700px);
  overflow: hidden;
  background: var(--deep);
  display: flex; align-items: flex-end;
  /* Sitzt direkt unter dem Petrolband - die Naht darf nicht auffallen */
  border-top: 1px solid var(--rule-light);
}
.film__buehne { position: absolute; inset: 0; }
.film__bild {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0;
  transition: opacity 1.6s var(--ease);
}
.film__bild.is-an { opacity: 1; }

/* Langsames Auszoomen der sichtbaren Aufnahme - nur wenn Bewegung erwuenscht */
@media (prefers-reduced-motion: no-preference) {
  .film__bild { transform: scale(1.09); transition: opacity 1.6s var(--ease), transform 8s linear; }
  .film__bild.is-an { transform: scale(1); }
}

/* Ohne Verlauf ist weisse Schrift auf einer hellen Hausfassade unlesbar.
   Unten voll deckend, damit auch der helle Himmel eines Fotos traegt. */
.film__tint {
  position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(14, 31, 36, .92) 0%, rgba(14, 31, 36, .55) 34%, rgba(14, 31, 36, 0) 68%),
    linear-gradient(to bottom, rgba(14, 31, 36, .35) 0%, rgba(14, 31, 36, 0) 40%);
}
.film__inner { position: relative; width: 100%; padding-bottom: 30px; }

.film__rubrik {
  margin: 0 0 18px;
  font-family: var(--display);
  font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold);
}

/* Die Zeilen liegen gestapelt - deshalb eine feste Hoehe, sonst springt
   der Balken darunter bei jedem Wechsel. */
.film__objekte { position: relative; min-height: 148px; }
.film__objekt {
  position: absolute; left: 0; top: 0;
  display: block; text-decoration: none;
  /* visibility nimmt die Zeile aus der Tabulatorreihenfolge. Mit opacity
     allein tabbt man durch sechs unsichtbare Verweise. */
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(14px);
  transition: opacity .8s var(--ease), transform .8s var(--ease), visibility .8s var(--ease);
}
.film__objekt.is-an { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); }
.film__art {
  display: block;
  font-family: var(--display);
  font-size: clamp(30px, 4.4vw, 56px);
  line-height: 1.05; letter-spacing: -.01em;
  color: var(--white);
}
.film__ort {
  display: block; margin-top: 8px;
  font-size: clamp(15px, 1.5vw, 18px);
  color: rgba(255, 255, 255, .72);
}
.film__mehr {
  display: inline-block; margin-top: 14px;
  font-family: var(--display);
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold);
  border-bottom: 1px solid transparent;
  transition: color .3s var(--ease), border-color .3s var(--ease);
}
.film__mehr::after { content: " \2192"; }
.film__objekt:hover .film__mehr,
.film__objekt:focus-visible .film__mehr { color: var(--white); border-color: var(--white); }
.film__objekt:focus-visible { outline: 2px solid var(--gold); outline-offset: 8px; }

.film__fuss {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; margin-top: 26px;
}
.film__punkte { display: flex; gap: 9px; }
.film__punkt {
  width: 34px; height: 3px; border-radius: 2px; border: 0; padding: 0;
  background: rgba(255, 255, 255, .3);
  cursor: pointer;
  transition: background .3s var(--ease);
}
.film__punkt.is-an { background: var(--gold); }
.film__punkt:hover { background: rgba(255, 255, 255, .7); }
.film__punkt:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
.film__zaehler {
  margin: 0;
  font-family: var(--display);
  font-size: 12px; letter-spacing: .14em;
  color: rgba(255, 255, 255, .55);
  font-variant-numeric: tabular-nums;
}
.film__zaehler [data-film-nr] { color: var(--gold); }

/* Fortschritt der laufenden Aufnahme: macht aus der Diaschau erkennbar
   etwas Laufendes. main.js setzt die Dauer, damit beides nicht auseinander
   laeuft, wenn sie im Skript geaendert wird. */
.film__balken {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px; background: rgba(255, 255, 255, .16);
}
.film__balken > span {
  display: block; height: 100%;
  background: var(--gold);
  transform: scaleX(0); transform-origin: left center;
}

@media (max-width: 620px) {
  .film { height: clamp(380px, 62vh, 520px); }
  .film__objekte { min-height: 132px; }
  .film__punkt { width: 24px; }
  .film__mehr { letter-spacing: .1em; }
}

/* ---------- Karten, die von selbst ihr zweites Bild zeigen ----------
   Bisher wechselte das Bild nur beim Zeigen mit der Maus - auf dem Telefon
   also nie, und ein starres Raster wirkte "dahingestellt". Der Wechsel
   laeuft jetzt von selbst, mit langem Takt und versetzt, damit nicht alle
   Karten gleichzeitig umschlagen. Beim Zeigen wird die Animation entfernt,
   sonst blendet das Bild mitten im Zeigen wieder weg. */
@media (prefers-reduced-motion: no-preference) {
  .karten .karte__foto--zwei { animation: karte-wechsel 14s var(--ease) infinite; }
  .karten .karte:nth-child(2) .karte__foto--zwei { animation-delay: 1.6s; }
  .karten .karte:nth-child(3) .karte__foto--zwei { animation-delay: 3.2s; }
  .karten .karte:nth-child(4) .karte__foto--zwei { animation-delay: 4.8s; }
  .karten .karte:nth-child(5) .karte__foto--zwei { animation-delay: 6.4s; }
  .karten .karte:nth-child(6) .karte__foto--zwei { animation-delay: 8.0s; }
  .karten .karte:nth-child(7) .karte__foto--zwei { animation-delay: 9.6s; }
  .karten .karte:nth-child(8) .karte__foto--zwei { animation-delay: 11.2s; }
  .karten .karte:nth-child(9) .karte__foto--zwei { animation-delay: 12.8s; }
  .karten .karte:hover .karte__foto--zwei,
  .karten .karte:focus-visible .karte__foto--zwei { animation: none; opacity: 1; }
}
@keyframes karte-wechsel {
  0%, 38%  { opacity: 0; }
  48%, 78% { opacity: 1; }
  88%, 100% { opacity: 0; }
}

/* Auf dem Telefon liegt der Text nicht mehr auf dem Bild.
   Grund: Die Aufnahmen sind Querformat (3:2). In ein 375x500 hohes Band
   gerechnet zeigt object-fit: cover nur die halbe Bildbreite - vom Haus
   bleibt das Dach. Stattdessen das Bild im eigenen Seitenverhaeltnis, ohne
   Beschnitt, und die Beschriftung darunter auf Petrol. */
@media (max-width: 620px) {
  .film { height: auto; display: block; }
  .film__buehne { position: relative; inset: auto; aspect-ratio: 3 / 2; }
  .film__tint { display: none; }
  .film__inner {
    position: relative;
    background: var(--deep);
    padding-top: 24px; padding-bottom: 34px;
  }
  /* Die Punkte teilen sich den Platz, der neben dem Zaehler bleibt. Feste
     34 px reichten bei neun Punkten auf 375 px genau aus - beim zehnten Haus
     oder auf einem 360 px breiten Telefon nicht mehr. */
  .film__punkte { flex: 1 1 auto; min-width: 0; gap: 6px; }
  .film__punkt { width: auto; flex: 1 1 0; min-width: 8px; max-width: 34px; }
}

/* ---------- Anhalteknopf der Diaschauen ----------
   Pflicht, sobald sich etwas laenger als fuenf Sekunden von selbst bewegt
   (WCAG 2.2.2). Sitzt in der Punktreihe und traegt deren Formensprache:
   gold auf dunklem Grund, gleiche Hoehe, kein zusaetzlicher Kasten. */
.diapause {
  flex: none;
  width: 22px; height: 22px;
  display: grid; place-items: center;
  border-radius: 50%;
  color: var(--gold);
  transition: color .3s var(--ease), background-color .3s var(--ease);
}
.diapause svg { width: 10px; height: 10px; fill: currentColor; }
.diapause__weiter { display: none; }
.diapause.is-gehalten .diapause__pause { display: none; }
.diapause.is-gehalten .diapause__weiter { display: block; }
.diapause:hover { color: var(--white); background: rgba(255, 255, 255, .14); }
.diapause:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* Die Punkte sind 3 px hoch, der Knopf 22 - ohne das hier haengt die Reihe
   auseinander. Der zusaetzliche Abstand trennt Schalter von Steuerung. */
.hero__punkte, .film__punkte { align-items: center; }
.hero__punkte .diapause, .film__punkte .diapause { margin-left: 7px; }

/* Bildunterschrift im Team-Abschnitt. Sagt, was man sieht - ein Plan ohne
   Erklaerung ist Dekoration, mit Erklaerung ein Beleg. */
.team__bild figcaption {
  margin-top: 10px;
  font-size: 13px; line-height: 1.5; letter-spacing: -.01em;
  color: var(--muted);
}

/* =========================================================
   Abendbild auf der Unternehmensseite
   Gezeichnet statt fotografiert, damit es unabhaengig von den eigenen
   Projekten ist. Als SVG im Quelltext: skaliert verlustfrei, kostet keinen
   zusaetzlichen Abruf und traegt die Markenfarben direkt.
   ========================================================= */
.abend {
  position: relative;
  height: clamp(340px, 50vh, 520px);
  overflow: hidden;
  background: #081419;
  display: flex; align-items: flex-end;
  border-top: 1px solid var(--rule-light);
}
.abend__bild {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
}
.abend__text {
  position: relative; width: 100%;
  padding-bottom: 38px;
}
.abend__rubrik {
  margin: 0 0 12px;
  font-family: var(--display);
  font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold);
}
.abend__satz {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(24px, 3.4vw, 40px);
  font-weight: 400; line-height: 1.1; letter-spacing: -.01em;
  color: var(--white);
  max-width: 18ch;
  text-wrap: balance;
}

/* Die Fenster gehen nacheinander an, als faellt der Abend. Sie starten
   nicht bei null, sondern gedimmt - sonst waere das Bild im ersten
   Moment und auf jedem Vorschaubild dunkel. */
@media (prefers-reduced-motion: no-preference) {
  .abend__fenster rect {
    opacity: .25;
    animation: fenster-an 1.4s var(--ease) forwards;
  }
  .abend__fenster rect:nth-child(1) { animation-delay: .5s }
  .abend__fenster rect:nth-child(2) { animation-delay: .9s }
  .abend__fenster rect:nth-child(3) { animation-delay: 1.4s }
  .abend__fenster rect:nth-child(4) { animation-delay: 1.7s }
  .abend__fenster rect:nth-child(5) { animation-delay: 2.2s }
  .abend__fenster rect:nth-child(6) { animation-delay: 2.6s }
  .abend__fenster rect:nth-child(7) { animation-delay: 2.9s }
  .abend__fenster rect:nth-child(8) { animation-delay: 3.4s }
  .abend__fenster rect:nth-child(9) { animation-delay: 3.8s }
  .abend__fenster rect:nth-child(10) { animation-delay: 4.3s }

  /* Die Sonne atmet kaum merklich - genug, dass das Bild lebt, zu wenig,
     um abzulenken. Kein Anhalteknopf noetig: die Bewegung ist nicht
     wesentlich und stellt nichts dar, was man verpassen koennte. */
  .abend__sonne { animation: sonne-atmen 11s ease-in-out infinite; }
}
@keyframes fenster-an { to { opacity: 1; } }
@keyframes sonne-atmen {
  0%, 100% { opacity: .82; }
  50%      { opacity: 1; }
}

@media (max-width: 620px) {
  .abend { height: clamp(300px, 44vh, 400px); }
  .abend__text { padding-bottom: 28px; }
  .abend__satz { max-width: 14ch; }
}

/* Ebenen des Abendbildes. Je weiter hinten, desto heller und kuehler -
   so entsteht Tiefe, ohne dass ein einziges Pixelbild noetig waere. */
.a-k1 { fill: #35585D; }  .a-b1 { fill: #2E4D53; }
.a-k2 { fill: #254750; }  .a-b2 { fill: #1E3E47; }
.a-k3 { fill: #163239; }  .a-b3 { fill: #102930; }
.a-k4 { fill: #0A1A20; }  .a-b4 { fill: #061317; }
.a-dunst { fill: url(#a-dunst); }
.a-haus { fill: #0A1C22; }
.a-dach { fill: #15313A; }

/* Die Belege stehen jetzt in den Ablaufschritten. .ablauf__schritt p
   (0-1-1) schlaegt .skill__beleg (0-1-0) - ohne diese Regel bekaeme der
   Beleg den Abstand und die Breite des Fliesstexts. */
.ablauf__schritt .skill__beleg { margin-top: 14px; max-width: 46ch; }

/* Langsame Kamerafahrt im Kopfbereich der Objektseiten.
   Mandy wollte dort Bewegung. Ein Video kam nicht in Frage - die Vorlagen
   sind WhatsApp-Dateien, und das einzige Umwandlungswerkzeug auf diesem
   Rechner liefert entweder 2,7 MB oder 400 Pixel Breite. Diese Fahrt kostet
   kein einziges Byte und wirkt an der Stelle sogar ruhiger als ein Clip,
   der nach fuenf Sekunden von vorn beginnt.

   30 Sekunden, hin und zurueck: so langsam, dass man die Bewegung eher
   spuert als sieht, und ohne Sprung am Schleifenende. */
@media (prefers-reduced-motion: no-preference) {
  .objekt-hero--bild .objekt-hero__bild {
    animation: hero-fahrt 30s ease-in-out infinite alternate;
    transform-origin: 54% 58%;
  }
}
@keyframes hero-fahrt {
  from { transform: scale(1); }
  to   { transform: scale(1.07); }
}

/* ---------- Kamerafahrt auf der Objektseite ----------
   Nur das Standbild steht in der Seite, das Video kommt erst auf Klick.
   Deshalb traegt der Knopf das Bild, nicht umgekehrt. */
.objekt-film { padding: 88px 0; }
.objekt-film .wrap > .rule { margin-bottom: 11px; }
/* Die Videodatei ist 960 Pixel breit. Lief der Rahmen ueber die ganze Seite,
   wurde sie auf 1385 hochgerechnet - weich, und fast so hoch wie das Fenster.
   Deshalb endet er dort, wo das Material aufhoert. */
.objekt-film__rahmen { margin-top: 34px; max-width: 960px; }
.objekt-film__start {
  position: relative; display: block; width: 100%;
  padding: 0; border: 0; background: var(--deep);
  border-radius: 4px; overflow: hidden; cursor: pointer;
  aspect-ratio: 16 / 9;
}
.objekt-film__start img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .7s var(--ease), opacity .4s var(--ease);
}
.objekt-film__start:hover img { transform: scale(1.03); opacity: .88; }
.objekt-film__start:focus-visible { outline: 2px solid var(--deep); outline-offset: 3px; }
.objekt-film__knopf {
  position: absolute; inset: 0; margin: auto;
  width: 74px; height: 74px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(14, 31, 36, .74);
  color: var(--gold);
  transition: background-color .3s var(--ease), transform .3s var(--ease);
}
.objekt-film__knopf svg { width: 26px; height: 26px; margin-left: 4px; }
.objekt-film__start:hover .objekt-film__knopf {
  background: var(--deep); transform: scale(1.06);
}
.objekt-film__video {
  width: 100%; height: auto; display: block;
  border-radius: 4px; background: var(--deep);
}
.objekt-film__zeile {
  margin-top: 14px; max-width: 960px;
  font-size: 14px; line-height: 1.5; color: var(--muted);
}
@media (max-width: 860px) {
  .objekt-film { padding: 60px 0; }
  .objekt-film__knopf { width: 58px; height: 58px; }
  .objekt-film__knopf svg { width: 20px; height: 20px; }
}