/* ============================================================
   Astoria Real Estate GmbH — astoria-real-estate.de
   Umsetzung Korrekturrunde 2
   Grundlage: Astoria_Korrektur-Lastenheft_Runde2.md (Stand 10.09.2026)
   Jede Regel trägt die Lastenheft-Nummer als Kommentar [LH x.y].
   ------------------------------------------------------------
   [LH Regel 5] Alle Kästen, Flächen, Bilder eckig.
   Ausnahmen 6 px + Schatten: Buttons, Sprungkacheln,
   Kontaktformular, Visitenkarte.
   ============================================================ */

/* ---------- Schrift: Inter, selbst gehostet [LH Regel 6] ---------- */

@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("../assets/fonts/inter-latin-400.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("../assets/fonts/inter-latin-500.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("../assets/fonts/inter-latin-600.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("../assets/fonts/inter-latin-700.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 800; font-display: swap; src: url("../assets/fonts/inter-latin-800.woff2") format("woff2"); }

:root {
  /* [LH Regel 6] */
  --ink: #1E2329;
  --text: #3A424B;
  --braun: #A8977B;
  --braun-kraeftig: #96794F;      /* [LH 3.2] */
  --grau: #595959;
  --piktogramm: #777777;          /* [LH 4.2] */
  --text-soft: #6b7280;

  /* Flächen */
  --bg-eae7e2: #EAE7E2;           /* [LH 3.1, 8.2, 10.1, 10.3, 11.2] */
  --bg-eee8e6: #EEE8E6;           /* [LH 3.4] — ersetzt durch --bg-f5f4f1, siehe unten */
  --bg-f5f4f1: #F5F4F1;           /* [Korrektur 14.09.] korrigierter Hexwert der Kundin fuer die drei Startseiten-Kaesten */
  --bg-f3f1ed: #F3F1ED;           /* [LH 5.1, 6.2, 7.1, 10.2] */
  --bg-f2f0ee: #F2F0EE;           /* [LH 11.4] */
  --feld-faf9f7: #FAF9F7;         /* [LH 11.4] */
  --rahmen-e6e2db: #E6E2DB;       /* [LH 11.4] */
  --rahmen-e4e2dc: #E4E2DC;       /* [LH 6.3] */
  --beige-kachel: #DBD2C3;        /* [LH 8.4] aus ankauf-a/b/c.png ausgelesen */
  --footer-bg: #343840;           /* [LH 1.3] */
  --weiss: #ffffff;
  --line: #e0ddd6;

  /* Sprungkacheln [LH 4.1] */
  --kachel-1: #E4DEDC;
  --kachel-2: #DAD3D0;
  --kachel-3: #CCC2BE;
  --kachel-4: #EAE7E2;

  /* Hero Variante 2 [LH 2.3] */
  --hero2-btn1: #EEE8E6;
  --hero2-btn2: #C0ACA4;
  --overlay-alpha: 0.30;          /* [LH Klärung 4] 30 % Vorschau; 55 % über Inline-Variable */

  --sans: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --max: 1200px;
  --r-btn: 6px;                   /* [LH Regel 5, 1.2, 4.4, 11.4] */
  --shadow-ruhe: 0 1px 3px rgba(30, 35, 41, 0.08), 0 2px 8px rgba(30, 35, 41, 0.06);
  --shadow-hover: 0 18px 44px rgba(30, 35, 41, 0.18);
  --trans: 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---------- Basis ---------- */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  font-size: 1.0313rem;
  line-height: 1.75;
  color: var(--text);
  background: var(--weiss);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; border-radius: 0; } /* [LH Regel 5] */
a { color: inherit; }

h1, h2, h3, h4 { font-family: var(--sans); color: var(--ink); line-height: 1.18; font-weight: 700; letter-spacing: -0.022em; }
h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); font-weight: 800; }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); }
h3 { font-size: clamp(1.15rem, 2vw, 1.35rem); letter-spacing: -0.012em; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 clamp(1.25rem, 4vw, 2.5rem); }

/* Kicker [LH Regel 6] */
.kicker {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-size: 0.8rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--braun); margin-bottom: 1.2rem;
}
.kicker::before { content: ""; width: 26px; height: 2px; background: var(--braun); }
/* [LH 3.2] kräftigeres Braun auf sandfarbenem Grund */
.kicker--kraeftig { color: var(--braun-kraeftig); }
.kicker--kraeftig::before { background: var(--braun-kraeftig); }

.lead { font-size: clamp(1.1rem, 2vw, 1.3rem); line-height: 1.6; color: var(--text-soft); }

/* [LH 10.3, 11.1] Einleitungstext bis 75 % der Breite */
.measure-75 { max-width: 75%; }
@media (max-width: 900px) { .measure-75 { max-width: 100%; } }

/* ---------- Buttons [LH 1.2] ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  font-family: var(--sans); font-size: 0.95rem; font-weight: 600; text-decoration: none;
  padding: 0.9rem 1.9rem;
  border-radius: var(--r-btn);
  border: 1px solid transparent;
  box-shadow: var(--shadow-ruhe);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--trans), color var(--trans), border-color var(--trans), box-shadow var(--trans), transform var(--trans);
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(30, 35, 41, 0.16); }

.btn--solid { background: var(--ink); color: var(--weiss); }
.btn--solid:hover { background: #39424c; }
.btn--ghost { background: var(--weiss); color: var(--ink); border-color: #cdc8be; }
.btn--ghost:hover { background: var(--ink); color: var(--weiss); border-color: var(--ink); }
.btn--light { border-color: rgba(255, 255, 255, 0.6); color: var(--weiss); background: transparent; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), 0 2px 8px rgba(0, 0, 0, 0.18); } /* [LH 1.2] Schatten in Ruhe auch auf dunklem Grund */
.btn--light:hover { background: var(--weiss); color: var(--ink); }

/* [LH 2.3] Hero-Variante-2-Buttons */
.btn--hero1 { background: var(--hero2-btn1); color: var(--ink); }
.btn--hero1:hover { background: var(--weiss); }
.btn--hero2 { background: var(--hero2-btn2); color: var(--ink); }
.btn--hero2:hover { background: #d3c2bb; }

/* [LH 3.7] Button in den Kästen: volle Breite, einzeilig, gleiche Höhe */
.btn--card { background: var(--weiss); color: var(--ink); border-color: #d6d0c8; width: 100%; }
.btn--card:hover { background: var(--ink); color: var(--weiss); border-color: var(--ink); }

/* ---------- Header / Navigation [LH 1.1] ---------- */

.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--weiss);
  border-bottom: 1px solid transparent;
  transition: border-color var(--trans), box-shadow var(--trans);
}
.site-header.is-scrolled { border-bottom-color: var(--line); box-shadow: 0 2px 20px rgba(30, 35, 41, 0.06); }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: 0.9rem 0; }
.site-header__logo img { width: clamp(112px, 12vw, 140px); }

.site-nav { display: flex; align-items: center; gap: clamp(1.1rem, 2.4vw, 2.1rem); }
.site-nav a {
  font-size: 0.82rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  text-decoration: none; color: var(--braun);
  padding: 0.4rem 0.1rem; border-bottom: 2px solid transparent;
  transition: color var(--trans), border-color var(--trans);
}
.site-nav a:hover { color: #8d7b5d; }
.site-nav a[aria-current="page"] { color: var(--braun); border-bottom-color: var(--braun); }  /* [LH 1.1] */

.site-nav .nav-cta {
  background: var(--ink); color: var(--weiss);
  border: 1px solid var(--ink); border-radius: var(--r-btn);
  padding: 0.62rem 1.4rem;
  transition: background var(--trans), transform var(--trans), box-shadow var(--trans);
}
.site-nav .nav-cta:hover, .site-nav .nav-cta[aria-current="page"] { background: #39424c; color: var(--weiss); border-color: #39424c; transform: translateY(-1px); box-shadow: var(--shadow-ruhe); }

.nav-toggle { display: none; background: none; border: 0; width: 44px; height: 44px; cursor: pointer; position: relative; z-index: 110; }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after { content: ""; display: block; position: absolute; left: 10px; width: 24px; height: 2px; background: var(--ink); transition: transform var(--trans), opacity var(--trans); }
.nav-toggle span { top: 21px; }
.nav-toggle span::before { top: -8px; left: 0; }
.nav-toggle span::after { top: 8px; left: 0; }
.nav-open .nav-toggle span { background: transparent; }
.nav-open .nav-toggle span::before { transform: translateY(8px) rotate(45deg); }
.nav-open .nav-toggle span::after { transform: translateY(-8px) rotate(-45deg); }

@media (max-width: 880px) {
  .nav-toggle { display: block; }
  .site-nav { position: fixed; inset: 0; flex-direction: column; justify-content: center; gap: 2.2rem; background: var(--bg-eae7e2); opacity: 0; visibility: hidden; transition: opacity var(--trans), visibility var(--trans); }
  .nav-open .site-nav { opacity: 1; visibility: visible; }
  .site-nav a { font-size: 1.05rem; }
}

/* ---------- Hero Variante 1 [LH 2.2] ---------- */

.hero { background: var(--weiss); }
.hero__inner {
  display: grid;
  grid-template-columns: 38fr 62fr;         /* [LH 2.2] Text 38 %, Bild 62 % */
  align-items: center;
  gap: clamp(2rem, 4vw, 3.5rem);
  padding: clamp(3.5rem, 8vw, 6.5rem) 0 clamp(3.5rem, 7vw, 5.5rem);
}
@media (max-width: 940px) { .hero__inner { grid-template-columns: 1fr; } }
.hero h1 { margin-bottom: 1.4rem; }
.hero .lead { margin-bottom: 1.3rem; }
.hero p:not(.lead) { margin-bottom: 2.4rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 0.9rem; }
.hero__media img { width: 100%; aspect-ratio: 16 / 9; object-fit: contain; } /* [LH 2.2] unbeschnitten, 16:9 */

/* ---------- Hero Variante 2 [LH 2.3, Klärung 4] ---------- */

.hero-overlay { background: var(--weiss); padding: clamp(2rem, 4vw, 3.5rem) 0 clamp(3rem, 6vw, 4.5rem); }
.hero-overlay__frame { position: relative; overflow: hidden; }
.hero-overlay__frame > img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; } /* [LH 2.3] volle Inhaltsbreite, 16:9 */

.hero-overlay__panel {
  position: absolute; top: 2.3%; bottom: 2.3%; left: 2%; right: auto;  /* [Korrektur 14.09.] Overlay steht nicht mehr im Anschnitt. Werte aus der Kundenvorlage vom 14.09. ausgemessen: Bildrahmen 1075 x 600 px, Panel 21 px vom linken und 14 px vom oberen/unteren Rand eingerueckt */
  width: 36%;                                            /* [Zoom-Abstimmung 14.09., 16:13] Textfeld um 20 % verbreitert (30 % -> 36 %), weil die beiden Buttons in einer Zeile sonst ueber die Feldkante hinauslaufen. Buttons bleiben unveraendert gross (ausdrueckliche Entscheidung). Nachgemessen mit der echten Inter: bei 34 % blieben 0,2 px Reserve, bei 36 % sind es 25 px von 1600 bis 1280 px Fensterbreite */
  background: rgba(13, 13, 13, var(--overlay-alpha));    /* [LH 2.3] #0D0D0D, Deckkraft nach Klärung 4 */
  display: flex; flex-direction: column; justify-content: flex-start;
  padding: 48px 28px 56px 32px;                           /* [Korrektur 14.09.] Innenabstände aus der Vorlage ausgemessen und auf die schmalere Fläche umgerechnet */
  color: var(--weiss);
}
/* [LH 2.3 ABWEICHUNG] Schriftgrößen im Textfeld kleiner als Variante 1, weil 38 % Feldbreite,
   Feldhöhe gleich Bildhöhe und Schriftgrößen wie Variante 1 zusammen nicht darstellbar sind.
   Alle Regeln auf .hero-overlay__panel begrenzt; Variante 1 bleibt unberührt. */
.hero-overlay__panel .kicker { color: #e2d6c0; margin-bottom: 0.9rem; font-size: 0.66rem; letter-spacing: 0.12em; white-space: nowrap; } /* [Korrektur 14.09.] kleiner und einzeilig, weil das Textfeld auf 30 % Breite geschrumpft ist */
.hero-overlay__panel .kicker::before { background: #e2d6c0; }
.hero-overlay__panel h1 { color: var(--weiss); font-size: clamp(1.5rem, 2.1vw, 1.9rem); line-height: 1.2; margin-bottom: 2.2rem; } /* [Korrektur 11.09.] Größe und Abstand nach Vorlage */
.hero-overlay__panel .lead { color: var(--weiss); font-size: 1rem; line-height: 1.6; margin-bottom: 1.8rem; }
.hero-overlay__panel p:not(.lead) { color: rgba(255, 255, 255, 0.9); font-size: 0.9rem; line-height: 1.55; margin-bottom: 2.4rem; }
.hero-overlay__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: auto; } /* [Zoom-Abstimmung 14.09.] Buttons stehen bis 1000 px Fensterbreite nebeneinander; darunter duerfen sie umbrechen statt aus dem Feld zu laufen. Abstand von 0,75 auf 0,6 rem reduziert */
.hero-overlay__actions .btn { padding: 0.55rem 1rem; font-size: 0.8rem; } /* [Korrektur 11.09.] kleine Buttons wie Vorlage */

/* [Korrektur 14.09.] Sicherung gegen Überlauf: Das Textfeld ist von 38 % auf 30 % Breite geschrumpft,
   dadurch entstehen mehr Textzeilen. Zwischen 900 und 1180 px werden Schrift und Abstände im Feld
   leicht reduziert, damit der Inhalt in jedem Fall innerhalb der Bildhöhe bleibt. */
@media (min-width: 901px) and (max-width: 1180px) {
  .hero-overlay__panel { padding: 34px 22px 38px 26px; }
  .hero-overlay__panel h1 { font-size: clamp(1.15rem, 1.75vw, 1.55rem); margin-bottom: 1.3rem; }
  .hero-overlay__panel .lead { font-size: 0.88rem; margin-bottom: 1rem; }
  .hero-overlay__panel p:not(.lead) { font-size: 0.8rem; line-height: 1.45; margin-bottom: 1.4rem; }
  .hero-overlay__actions .btn { padding: 0.45rem 0.6rem; font-size: 0.72rem; }
}

@media (max-width: 900px) {
  .hero-overlay__frame > img { aspect-ratio: 3 / 4; }
  .hero-overlay__panel { position: absolute; top: 0; bottom: 0; left: 0; width: 100%; padding: 32px 24px 36px; justify-content: center; }
  .hero-overlay__actions { flex-wrap: wrap; }
}

/* Unterseiten-Kopf */
.page-hero { background: var(--weiss); }
.page-hero__inner { padding: clamp(3rem, 6vw, 5rem) 0 clamp(2.5rem, 5vw, 4rem); }
.page-hero h1 { margin-bottom: 1.1rem; }

/* ---------- Sektionen ---------- */

.section { padding: clamp(4rem, 8vw, 7rem) 0; }
.section--eae7e2 { background: var(--bg-eae7e2); }
.section--f3f1ed { background: var(--bg-f3f1ed); }
.section--flush-top { padding-top: 0; }
.section--96 { padding: 96px 0; }                                 /* [LH 9.2] */

.section-head { max-width: 780px; margin-bottom: clamp(2.6rem, 5vw, 4rem); }
.section-head--voll { max-width: none; }                           /* [LH 7.2] */
.section-head h2 { margin-bottom: 1.2rem; }
.section-head p { margin-bottom: 1rem; }
.section-head p:last-child { margin-bottom: 0; }
.section-head p strong { color: var(--ink); }

/* ---------- Startseite: drei Kästen [LH 3] ---------- */

.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.4rem, 2.6vw, 2.2rem); }
@media (max-width: 980px) { .cards { grid-template-columns: 1fr; max-width: 560px; } }

.card {
  display: flex; flex-direction: column;
  background: var(--bg-f5f4f1);                 /* [Korrektur 14.09.] #F5F4F1 statt #EEE8E6 — von der Kundin korrigierter Hexwert, deutlicherer Kontrast zum Abschnittshintergrund #EAE7E2 */
  border: 0;                                    /* [LH 3.4] kein Rahmen */
  box-shadow: var(--shadow-ruhe);               /* [LH 3.4] dezenter Schatten in Ruhe */
  padding: 40px 40px 0;                         /* [LH 3.4] Innenabstand 40 px; unten 0, weil Bild randlos [Korrektur 11.09.] */
  border-radius: 10px; overflow: hidden;        /* [Korrektur 11.09., Klärung 1] Kästen leicht gerundet (Kundin, weicht von LH 3.4 ab) */
  transition: box-shadow var(--trans), transform var(--trans);
}
.card:hover { box-shadow: var(--shadow-hover); transform: translateY(-11px); } /* [LH 3.4] 10–12 px Anheben */

.card__icon { width: 48px; height: 48px; background: rgba(255, 255, 255, 0.75); color: var(--braun); display: flex; align-items: center; justify-content: center; margin-bottom: 1.5rem; }
.card__icon svg { width: 24px; height: 24px; }

/* [LH 3.5] schlank (500), Großbuchstaben, gespreizt, 24 px zum Text */
.card h3 { font-size: 0.95rem; font-weight: 500; letter-spacing: 0.09em; text-transform: uppercase; line-height: 1.5; margin-bottom: 24px; }
.card p { color: var(--text); font-size: 0.97rem; flex: 1; margin: 0; }
.card p strong { color: var(--ink); font-weight: 700; }        /* [LH 3.6] */

/* [LH 3.7] Abstand zum Text 32 px, zum Bild 32 px; unten bündig durch flex:1 auf p */
.card .btn--card { margin-top: 32px; width: auto; align-self: flex-start; padding: 0.8rem 1.4rem; } /* [Korrektur 11.09.] natürliche Breite, linksbündig wie Vorlage */
.card__media { margin: 32px -40px 0; }                                      /* [Korrektur 11.09.] Bild randlos bis an die Kastenkante */
.card__media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; filter: saturate(0.6) sepia(0.12); } /* [Korrektur 11.09.] 60 % Sättigung, warm, nach Vorlage */ /* [LH 3.8] 16:10, gleiche Höhe */

/* ---------- Für Investoren: Sprungkacheln [LH 4] ---------- */

.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(0.9rem, 1.8vw, 1.4rem); }
@media (max-width: 900px) { .tiles { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .tiles { grid-template-columns: 1fr; } }

.tile {
  display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 1.6rem;
  text-align: center; text-decoration: none;
  padding: clamp(1.8rem, 3vw, 2.6rem) 1.2rem clamp(1.4rem, 2.4vw, 1.9rem);
  min-height: 200px;
  border-radius: var(--r-btn);                  /* [LH 4.4] 6 px */
  box-shadow: var(--shadow-ruhe);               /* [LH 4.4] dezent in Ruhe */
  transition: transform var(--trans), box-shadow var(--trans);
}
.tile:hover { transform: translateY(-8px); box-shadow: var(--shadow-hover); } /* [LH 4.4] kräftiger beim Überfahren */
.tile--1 { background: var(--kachel-1); }       /* [LH 4.1] */
.tile--2 { background: var(--kachel-2); }
.tile--3 { background: var(--kachel-3); }
.tile--4 { background: var(--kachel-4); }
.tile__icon { color: var(--piktogramm); }       /* [LH 4.2] */
.tile__icon svg { width: 46px; height: 46px; }
.tile__label { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; line-height: 1.5; color: var(--braun); } /* [LH 4.3] */
.tile--4 .tile__label { color: var(--grau); }  /* [LH 4.3] Kachel 4 */

/* ---------- Für Investoren: Ablaufschritte [LH 5] ---------- */

.step-cards {
  display: grid; grid-template-columns: repeat(2, 1fr);
  column-gap: 48px; row-gap: 64px;              /* [LH 5.5] */
}
@media (max-width: 820px) { .step-cards { grid-template-columns: 1fr; row-gap: 48px; } }

.step-card { background: transparent; border: 0; box-shadow: none; }    /* [LH 5.2] */
.step-card__media { position: relative; }
.step-card__media img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; } /* [LH 5.2] */

/* [LH 5.3] 40 px Quadrat, unten links, 20 px unter die Bildkante ragend */
.step-card__num {
  position: absolute; left: 24px; bottom: -20px;         /* [Korrektur 11.09., Klärung 2] eingerückt wie Textblock */
  width: 40px; height: 40px; border-radius: 6px;         /* [Korrektur 11.09., Klärung 2] abgerundete Ecken, halb im Bild */
  display: flex; align-items: center; justify-content: center;
  background: var(--ink); color: var(--weiss); font-weight: 700; font-size: 1rem;
}
/* [LH 5.6] Schritt 5: Ziffer rechts oben, halb überlappend */
.step-card--wide .step-card__num { left: auto; right: 24px; bottom: auto; top: -20px; }

/* [LH 5.4] Text 24 px eingerückt; Bild→Überschrift 32 px; Überschrift→Text 12 px */
.step-card__body { padding: 32px 24px 0; }
.step-card__body h3 { margin-bottom: 12px; }
.step-card__body p { font-size: 0.97rem; color: var(--text); }

/* [LH 5.6] Schritt 5: gleiche Bildgröße, Text rechts, 50/50 */
.step-card--wide { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; column-gap: 48px; align-items: start; }
.step-card--wide .step-card__body { padding-top: 0; }
@media (max-width: 820px) { .step-card--wide { grid-template-columns: 1fr; } .step-card--wide .step-card__body { padding-top: 32px; } }

/* ---------- Institutionelle: Einleitungsblock [LH 6.1] ---------- */

.dark-split { display: grid; grid-template-columns: minmax(0, 30fr) minmax(0, 70fr); align-items: stretch; } /* [Korrektur 11.09.] 30 / 70 gemäß Kundenvorlage (Vorlage misst 27 / 73) */
@media (max-width: 900px) { .dark-split { grid-template-columns: 1fr; } }
.dark-split__text {
  background: var(--grau); color: var(--weiss);
  padding: 36px 30px;                            /* [LH 6.1] Innenabstand 36 px */
  display: flex; flex-direction: column; justify-content: center;
}
.dark-split__text .kicker { color: #d9cdb6; margin-bottom: 0.9rem; font-size: 0.66rem; }
.dark-split__text .kicker::before { background: #d9cdb6; }
.dark-split__text h2 { color: var(--weiss); font-size: 1.15rem; line-height: 1.3; margin-bottom: 1.2rem; hyphens: manual; overflow-wrap: normal; } /* [Korrektur 11.09.] Schriftgröße wie Kundenvorlage */
.dark-split__text p { color: rgba(255, 255, 255, 0.9); font-size: 0.8rem; line-height: 1.6; }
/* [Korrektur 11.09.] Bild inst-intro-stadtmodell.jpg (1,83:1) aus der Kundenvorlage; bei 70 % Breite passt das
   Graufeld nahezu ohne Beschnitt. Restbeschnitt mittig, geringfügig. */
.dark-split__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; display: block; }

/* ---------- Institutionelle: drei Karten [LH 6.2] ---------- */

.pic-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; } /* [LH 6.2] 40 px */
@media (max-width: 980px) { .pic-cards { grid-template-columns: 1fr; max-width: 560px; } }
.pic-card {
  background: var(--bg-f3f1ed);                 /* [LH 6.2] */
  box-shadow: var(--shadow-ruhe);
  display: flex; flex-direction: column;
  transition: box-shadow var(--trans), transform var(--trans);
}
.pic-card:hover { box-shadow: var(--shadow-hover); transform: translateY(-8px); }
.pic-card__media img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; object-position: 50% 50%; }  /* [LH 6.2] 21:9 */
/* [Korrektur 14.09.] Bildausschnitt je Karte nachjustiert: Karte 2 zeigt mehr Himmel, Karte 3 mehr Luft nach oben */
.pic-cards .pic-card:nth-child(2) .pic-card__media img { object-position: 50% 18%; }
.pic-cards .pic-card:nth-child(3) .pic-card__media img { object-position: 50% 32%; }
.pic-card__body { padding: 46px 32px; line-height: 1.8; }                         /* [Zoom-Abstimmung 14.09., 16:51] Abstand Bild->Ueberschrift und Text->Kastenende um 15 % erhoeht (40 -> 46 px), links/rechts auf 32 px reduziert. Oben gleich unten, links gleich rechts. Abstand Ueberschrift->Copy bleibt fuer alle drei Karten identisch */
.pic-card__body h3 { margin-bottom: 0.9rem; }
.pic-card__body p { font-size: 0.96rem; color: var(--text); }
.pic-card__body p strong { color: var(--ink); }

/* ---------- Institutionelle: Regionen-Kasten [LH 6.3] ---------- */

.region-box { display: grid; grid-template-columns: 1fr 0.42fr; align-items: stretch; border: 1px solid var(--rahmen-e4e2dc); background: var(--weiss); }
@media (max-width: 820px) { .region-box { grid-template-columns: 1fr; } }
.region-box__text { padding: clamp(2rem, 4vw, 3.4rem); display: flex; flex-direction: column; justify-content: center; } /* [LH 6.3] vertikal zentriert */
.region-box__text h3 { margin-bottom: 1rem; font-size: clamp(1.2rem, 2.2vw, 1.5rem); }
.region-box__text p strong { color: var(--ink); }
.region-box__media img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Direktvertrieb [LH 7, Klärung 3] ---------- */

/* [LH Klärung 3] Übergang bis Hochkant-Bilder: Graukasten ÜBER dem Bild, Bild volle Breite, unbeschnitten */
.dv-row { display: grid; grid-template-columns: minmax(0, 55fr) minmax(0, 45fr); align-items: stretch; margin-bottom: 40px; } /* [LH 7.3] Kasten 55 % neben Bild 45 %, Hochkant-Bilder vom 11.09.; Blockabstand 40 px */
@media (max-width: 860px) { .dv-row { grid-template-columns: 1fr; } }
.dv-row:last-child { margin-bottom: 0; }
.dv-row__box {
  background: var(--grau); color: var(--weiss);
  padding: 48px;                                  /* [LH 7.3] Innenabstand 48 px */
  display: flex; flex-direction: column; justify-content: center; gap: 40px;  /* [LH 7.3] Abstand zwischen den Punkten 40 px; Text vertikal zentriert, Kastenhöhe folgt Bild */
}
.dv-row__media img { width: 100%; height: 100%; object-fit: cover; display: block; }   /* [LH 7.3] Bild füllt die Spalte; Hochkant 0,67:1 ist höher als der Kasten, daher kein Beschnitt */

.dv-item { display: flex; gap: 1.1rem; }
.dv-item__num { flex: 0 0 auto; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: var(--ink); color: var(--weiss); font-size: 0.95rem; font-weight: 700; } /* [LH 7.3] Plakette dunkel */
.dv-item h3 { color: var(--weiss); font-size: 1.05rem; margin-bottom: 0.5rem; }
.dv-item p { color: rgba(255, 255, 255, 0.9); font-size: 0.95rem; line-height: 1.7; }
.dv-item p strong { color: var(--weiss); }

/* ---------- Ankauf [LH 8] ---------- */

/* [LH 8.1] Aufruf-Kasten bleibt wie umgesetzt */
.ankauf-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.6rem; background: var(--bg-f3f1ed); border-left: 3px solid var(--braun); padding: clamp(1.6rem, 3vw, 2.4rem) clamp(1.6rem, 3vw, 2.6rem); margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }
.ankauf-cta p { font-size: clamp(1.02rem, 1.7vw, 1.15rem); color: var(--ink); max-width: 720px; }

.asset-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.4rem, 2.6vw, 2.2rem); align-items: stretch; } /* [LH 8.2] gleich hoch */
@media (max-width: 900px) { .asset-cards { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; } }

.asset-card {
  background: var(--beige-kachel);              /* [LH 8.4] Beigeton der Bilddateien (#DBD2C3) statt 8.2 #EAE7E2 */
  display: flex; flex-direction: column;
  transition: transform var(--trans), box-shadow var(--trans);
}
.asset-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-hover); }
.asset-card__title {
  font-size: 0.82rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--grau); text-align: center; line-height: 1.5;
  padding: 40px 24px 0;                         /* [LH 8.2] oben 40 px */
}
.asset-card__media { padding: 24px 24px 0; } /* [LH 8.2] Abstand 24 px; quadratische Originalfotos vom 11.09. */
.asset-card__media img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; } /* [Korrektur 11.09.] 1:1, volle Kachelbreite abzgl. 24 px */
.asset-card__text {
  margin: 24px 0;                               /* [Zoom-Abstimmung 14.09., 17:05] Textkasten laeuft als breite Banderole ueber die komplette Kachelbreite. Abstand zum Bild oben und zum Kachelrand unten jeweils 24 px, dadurch bleibt der beige Streifen unten sichtbar */
  background: rgba(0, 0, 0, 0.4);               /* [LH 8.3] */
  color: var(--weiss);
  padding: 24px;                                /* [LH 8.3] */
  font-size: 0.93rem; line-height: 1.7;
  flex: 1;                                      /* [LH 8.3] gleiche Höhe in allen Kacheln */
}
.asset-card__text strong { color: var(--weiss); font-weight: 700; }

/* ---------- Mieterschutz [LH 9] ---------- */

.equal-split { display: grid; grid-template-columns: 40fr 60fr; gap: 48px; align-items: center; } /* [LH 9.1] 40/60, [LH 9.2] 48 px */
@media (max-width: 880px) { .equal-split { grid-template-columns: 1fr; } }
.equal-split__text h3 { margin-bottom: 0.7rem; font-size: 1.1rem; }                       /* [LH 9.1] */
.equal-split__text p { font-size: 0.84rem; line-height: 1.55; }                             /* [LH 9.1] Schrift so, dass Text ≤ Bildhöhe */
.equal-split__text p + p { margin-top: 0.6rem; }
.equal-split__media img { width: 100%; height: auto; }                        /* [LH 9.1] unbeschnitten, volle Spaltenbreite */

/* ---------- Über uns [LH 10] ---------- */

.intro-text { line-height: 2; }                                                 /* [LH 10.1] */
.intro-box { display: grid; grid-template-columns: 0.45fr 1fr; align-items: stretch; background: var(--bg-eae7e2); } /* [LH 10.1] */
@media (max-width: 880px) { .intro-box { grid-template-columns: 1fr; } }
.intro-box__media img { width: 100%; height: 100%; object-fit: cover; }
.intro-box__text { padding: clamp(2rem, 4vw, 3.4rem); display: flex; flex-direction: column; justify-content: center; line-height: 2; }
.intro-box__text p strong { color: var(--ink); }

.prinzip-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.4rem, 2.6vw, 2.2rem); }
@media (max-width: 980px) { .prinzip-cards { grid-template-columns: 1fr; max-width: 560px; } }
.prinzip-card { background: var(--bg-f3f1ed); box-shadow: var(--shadow-ruhe); display: flex; flex-direction: column; transition: box-shadow var(--trans), transform var(--trans); } /* [LH 10.2] */
.prinzip-card:hover { box-shadow: var(--shadow-hover); transform: translateY(-8px); }
.prinzip-card__media img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; }   /* [LH 10.2] 21:9 */
.prinzip-card__body { padding: 40px clamp(1.7rem, 2.6vw, 2.2rem); line-height: 2; }   /* [LH 10.2] oben/unten 40 px */

/* [LH 10.2] USP-Markierung in Kasten 1; in Kasten 2 und 3 derselbe Platz freigehalten */
.pill-slot { height: 34px; margin-bottom: 1.2rem; display: flex; align-items: center; } /* [LH 10.2] gleicher Platz in allen drei Kästen */
.pill { display: inline-block; background: var(--bg-f3f1ed); filter: brightness(0.96); color: var(--braun); font-size: 0.76rem; font-weight: 600; letter-spacing: 0.06em; padding: 0.35rem 0.95rem; }
.prinzip-card h3 { font-size: 0.86rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; margin-bottom: 1.1rem; }
.prinzip-card p { font-size: 0.95rem; }

.zielgruppen { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }             /* [LH 10.3] 32 px */
@media (max-width: 880px) { .zielgruppen { grid-template-columns: 1fr; } }
.zg { padding: 48px; line-height: 2; }                                                   /* [LH 10.3] */
.zg--hell { background: var(--weiss); }
.zg--dunkel { background: var(--grau); }
.zg h3 { font-size: 0.86rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--braun); margin-bottom: 1.4rem; } /* [LH 10.3] */
.zg--dunkel p { color: rgba(255, 255, 255, 0.92); }
.zg p { font-size: 0.96rem; }
.zielgruppen-bild { margin-top: 32px; }                                                  /* [LH 10.3] */
.zielgruppen-bild img { width: 100%; height: auto; }

/* ---------- CTA-Band ---------- */

.cta-band { background: var(--footer-bg); color: var(--weiss); }
.cta-band .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.8rem; padding-top: clamp(3rem, 6vw, 4.5rem); padding-bottom: clamp(3rem, 6vw, 4.5rem); }
.cta-band h2 { color: var(--weiss); max-width: 640px; }
.cta-band p { color: rgba(255, 255, 255, 0.72); margin-top: 0.7rem; max-width: 560px; }

/* ---------- Kontakt [LH 11] ---------- */

.contact-grid { display: grid; grid-template-columns: 1fr 1.3fr; gap: clamp(2.5rem, 5vw, 4.5rem); align-items: start; }
@media (max-width: 920px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-info h2 { margin-bottom: 1.2rem; }
.contact-info > p { margin-bottom: 1.1rem; }
.contact-info figure { margin: 1.8rem 0; }
.contact-info figure img { width: 100%; height: auto; }                                  /* [LH 11.3] eckig, ohne Rahmen */

/* [LH 11.4] Visitenkarte + Formular: #F2F0EE, 6 px, Schatten */
.contact-info address { font-style: normal; color: var(--text); background: var(--bg-f2f0ee); border-radius: var(--r-btn); box-shadow: var(--shadow-ruhe); padding: 1.4rem 1.6rem; line-height: 1.9; }
.contact-info address strong { color: var(--ink); }
.contact-info address a { text-decoration: none; color: var(--ink); }
.contact-info address a:hover { text-decoration: underline; }

.form { display: grid; gap: 1.3rem; background: var(--bg-f2f0ee); border-radius: var(--r-btn); box-shadow: var(--shadow-ruhe); padding: clamp(1.7rem, 3vw, 2.5rem); }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.3rem; }
@media (max-width: 560px) { .form__row { grid-template-columns: 1fr; } }
.form label { display: block; font-size: 0.9rem; font-weight: 600; color: var(--ink); margin-bottom: 0.45rem; }
.form label .req { color: var(--braun); }

/* [LH 11.4] Felder #FAF9F7, Rahmen 1 px #E6E2DB, 4 px */
.form input[type="text"], .form input[type="email"], .form input[type="tel"], .form select, .form textarea {
  width: 100%; font: inherit; font-size: 1rem; color: var(--ink);
  background: var(--feld-faf9f7); border: 1px solid var(--rahmen-e6e2db); border-radius: 4px;
  padding: 0.8rem 1rem;
  transition: border-color var(--trans), background var(--trans), box-shadow var(--trans);
}
.form input:focus, .form select:focus, .form textarea:focus { outline: none; border-color: var(--braun); background: var(--weiss); box-shadow: 0 0 0 3px rgba(168, 151, 123, 0.18); }
.form textarea { min-height: 160px; resize: vertical; }
.form .consent { display: flex; gap: 0.7rem; align-items: flex-start; font-size: 0.9rem; color: var(--text-soft); }
.form .consent input { margin-top: 0.3rem; width: 1.05rem; height: 1.05rem; accent-color: var(--ink); }
.form .consent label { font-weight: 400; margin: 0; color: var(--text-soft); }
.form__note { font-size: 0.85rem; color: var(--text-soft); }
.hp-field { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }
.form-status { padding: 1rem 1.2rem; font-size: 0.95rem; display: none; }
.form-status.is-visible { display: block; }
.form-status--ok { background: #eef3ea; border: 1px solid #c9d8bd; color: #3d5230; }
.form-status--error { background: #f7ecea; border: 1px solid #e0c5c0; color: #7a3b32; }

/* ---------- Footer [LH 1.3] ---------- */

.site-footer { background: var(--footer-bg); color: rgba(255, 255, 255, 0.75); }
.site-footer__inner { display: grid; grid-template-columns: auto 1fr auto; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; padding: clamp(3rem, 6vw, 4.5rem) 0; }
@media (max-width: 820px) { .site-footer__inner { grid-template-columns: 1fr; text-align: center; justify-items: center; } }
.site-footer__logo img { width: 140px; }
.site-footer__address { font-style: normal; font-size: 0.96rem; line-height: 1.9; }
.site-footer__nav { display: flex; flex-direction: column; gap: 0.55rem; }
.site-footer__nav a { font-size: 0.94rem; text-decoration: none; transition: color var(--trans); }
.site-footer__nav a:hover { color: var(--weiss); }
.site-footer__bottom { border-top: 1px solid rgba(255, 255, 255, 0.1); padding: 1.2rem 0; font-size: 0.85rem; color: rgba(255, 255, 255, 0.45); display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: space-between; }

/* ---------- Reveal ---------- */

html.js .reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.65s ease, transform 0.65s ease; }
html.js .reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.js .reveal { opacity: 1; transform: none; transition: none; }
  .card:hover, .tile:hover, .pic-card:hover, .prinzip-card:hover, .asset-card:hover { transform: none; }
}

/* [14.09.] Der DEV-Umschalter zwischen den beiden Hero-Varianten [LH 1.4] wurde entfernt.
   Die Kundin hat sich am 11.09.2026 fuer Variante 2 entschieden, der Block war seitdem toter Code. */

/* ---------- Rechtstexte ---------- */

.legal { max-width: 800px; }
.legal h2 { margin: 2.6rem 0 0.9rem; font-size: 1.45rem; }
.legal h3 { margin: 1.9rem 0 0.7rem; font-size: 1.12rem; }
.legal p, .legal ul { color: var(--text); margin-bottom: 1rem; }
.legal ul { margin-left: 1.2rem; }
.placeholder-note { background: var(--bg-f3f1ed); border: 1px dashed var(--braun); padding: 1rem 1.2rem; font-size: 0.92rem; color: var(--text); margin-bottom: 2rem; }