/* ONE v4 — Basis: Reset, Kopf, Hero, Fuß, gemeinsame Bausteine */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--sheet);
  color: var(--ink);
  font-family: var(--f-text);
  font-size: var(--t-body);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--f-display);
  font-weight: 700;
  letter-spacing: -.015em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; }
img { display: block; max-width: 100%; }

a { color: var(--accent); text-decoration: none; }
/* Hover-Farbe ueber eine Variable statt fest auf Navy (Fehler vom 20.08.:
   „wenn man mit der Maus drueberfaehrt, wird die Schrift blau und nicht mehr
   gut lesbar"). Ein festes `color: var(--ink)` ist auf hellem Grund richtig und
   auf JEDER dunklen Flaeche falsch — dort wurde Navy auf Navy daraus. Betroffen
   waren die Bildbaender, die gesamte mobile Navigation, die Bloecke „Weitere
   Expertise", das Logo im Navy-Kopf und die Pfeillinks der alten Startseite.
   Jede dunkle Flaeche setzt die Variable einmal um; alles darin erbt sie. */
a:hover { color: var(--a-hover, var(--ink)); }

/* Dunkle Flaechen — hier ist Weiss die Hover-Farbe.
   ⚠ Beim Anlegen einer neuen dunklen Flaeche MUSS sie hier eingetragen werden,
   sonst faellt sie stillschweigend auf Navy zurueck. */
.head, .kphead,
.ph, .dh, .ptitle,
.pcta, .adv, .more, .imoband,
.foot, .kpfoot,
.mnav, .dkap, .c-figs,
.kp, .section--ink { --a-hover: #fff; }

/* ---------- Raster ------------------------------------------------------ */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gut);
}

.section { padding-block: var(--s-lg); }
.section--tight { padding-block: var(--s-md); }
.section--air  { padding-block: var(--s-xl); }
.section--band { background: var(--band); }
.section--ink  { background: var(--ink); color: var(--paper); }

/* ---------- Wiederkehrende Kleinteile ----------------------------------- */

.eyebrow {
  font-family: var(--f-mono);
  font-size: var(--t-eyebrow);
  font-weight: 700;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  /* --accent-text, nicht --accent: siehe Begruendung in tokens.css. */
  color: var(--accent-text);
  margin: 0 0 var(--s-sm);
}
.section--ink .eyebrow { color: var(--accent-quiet); }
:root[data-accent="ci"] .section--ink .eyebrow { color: rgba(239,239,239,.55); }

.mono {
  font-family: var(--f-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
}

.lead {
  font-size: var(--t-lead);
  line-height: 1.65;
  color: var(--muted);
  max-width: 58ch;
}

.statement {
  font-family: var(--f-display);
  font-size: var(--t-state);
  font-weight: 400;
  line-height: 1.36;
  letter-spacing: -.012em;
  max-width: 24ch;
}

.h2 { font-size: var(--t-h2); line-height: 1.12; }

.rule { height: 1px; background: var(--line); border: 0; margin: 0; }

/* Sichtbar offene Inhalte — nichts wird erfunden, alles bleibt auffindbar. */
.todo {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(11,28,48,.34);
  border-bottom: 1px dashed rgba(11,28,48,.28);
  padding-bottom: 2px;
}
.section--ink .todo { color: rgba(239,239,239,.42); border-color: rgba(239,239,239,.3); }

.arrow-link {
  font-family: var(--f-mono);
  font-size: var(--t-meta);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  display: inline-flex;
  gap: 10px;
  align-items: center;
  padding-block: 6px;
  border-bottom: 1px solid var(--line);
  transition: border-color .2s, gap .2s;
}
.arrow-link:hover { border-color: var(--ink); gap: 16px; }

.btn {
  display: inline-block;
  font-family: var(--f-mono);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 17px 30px;
  background: var(--ink);
  color: var(--paper);
  transition: background .2s;
}
.btn:hover { background: #16324f; color: var(--paper); }
.section--ink .btn { background: var(--paper); color: var(--ink); }
.section--ink .btn:hover { background: #fff; }

/* Bei aktivem Sand-Akzent trägt die Hauptaktion die Farbe — der wärmste
   Punkt der Seite sitzt dort, wo gehandelt werden soll, nicht auf jedem Label. */
:root[data-accent="sand"] .btn { background: var(--accent); color: #fff; }
:root[data-accent="sand"] .btn:hover { background: #755c3c; }
:root[data-accent="sand"] .section--ink .btn,
:root[data-accent="sand"] .pcta .btn,
:root[data-accent="sand"] .dkclose .btn { background: var(--accent); color: #fff; }
:root[data-accent="sand"] .section--ink .btn:hover,
:root[data-accent="sand"] .pcta .btn:hover,
:root[data-accent="sand"] .dkclose .btn:hover { background: #9a7d54; }

/* ---------- Kopf -------------------------------------------------------- */

.head {
  position: absolute;
  inset: 0 0 auto;
  z-index: 20;
  padding-top: 34px;
}
.head__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}
/* 60 px statt 44 (Entscheidung 08.09.). Nicht die Gesamtgroesse war zu
   klein, sondern die Zusatzzeile: "REAL ESTATE PARTNER" ist im Logoblock
   15,8:1 breit und wurde bei 44 px nur 5,1 px hoch. Bei 60 px sind es
   7,0 px. Wer die Hoehe wieder senkt, nimmt genau das zurueck.
   Das Band bleibt trotzdem 104 px hoch - siehe .head--solid in page.css. */
.head__logo img { height: 60px; filter: brightness(0) invert(1) drop-shadow(0 1px 10px rgba(11,28,48,.75)); }

.nav { display: flex; gap: 34px; align-items: center; }
.nav a, .nav > span {
  font-family: var(--f-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.82);
  cursor: default;
  text-shadow: 0 1px 12px rgba(11,28,48,.85);
}
.nav a { cursor: pointer; }
.nav a:hover, .nav a[aria-current] { color: #fff; }

/* ---------- Kopfnavigation: Expertise-Menue ------------------------------
   Stand bis 19.08. in page.css. Die Startseite laedt page.css nicht und hatte
   deshalb ein flaches Menue mit toten Links. Hier bekommt sie jede Seite. */

.nav__host { position: relative; }
/* Nur die Beschriftung, NICHT das Panel: `.nav__host > span` traf beide —
   das Panel wurde dadurch zur Zeile mit Pfeil am Ende statt zur Liste. */
.nav__host > [data-nav-label] { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; }
.nav__host > [data-nav-label]::after {
  content: "";
  width: 5px; height: 5px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg) translateY(-1px);
  opacity: .7;
}
.nav__panel {
  position: absolute;
  top: calc(100% + 10px);
  left: -16px;
  min-width: 196px;
  background: var(--sheet);
  border: 1px solid var(--line-soft);
  box-shadow: 0 10px 26px rgba(11,28,48,.14);
  padding: 5px 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .2s, transform .2s, visibility .2s;
}
/* Bruecke, damit die Maus die Luecke zwischen Beschriftung und Panel queren
   kann. Sie sitzt am PANEL, nicht am Wirt.
   Vorher lag sie als `.nav__host::before` mit 280px Breite unter der ganzen
   Leiste — also auch unter "Projekte" und "Kontakt". Wer dorthin zeigte,
   querte die unsichtbare Flaeche, loeste `.nav__host:hover` aus und bekam das
   Menue aufgeklappt, ohne je auf "Expertise" gezeigt zu haben. Nachgewiesen
   03.09.2026. Am Panel existiert die Bruecke nur, solange das Panel sichtbar
   ist — visibility:hidden nimmt sie aus der Zeigerpruefung. */
.nav__panel::before {
  content: "";
  position: absolute;
  /* Nur ueber der Beschriftung, nicht ueber der ganzen Panelbreite: das Panel
     ist breiter als "Expertise" und reicht rechts bis unter "Projekte". Eine
     Bruecke auf voller Breite haette die unterste Zeile dieses Links
     abgedeckt. Die Maus laeuft ohnehin senkrecht nach unten. */
  left: 0; width: 130px;
  top: -11px; height: 11px;
}
.nav__host:hover .nav__panel,
.nav__host:focus-within .nav__panel,
.nav__panel[data-open="true"] { opacity: 1; visibility: visible; transform: none; }
/* Spezifitaet noetig: `.head .nav a` und `.kphead a` setzen Weiss, weil der Kopf
   ueber dem Bildband liegt. Ohne diese Regeln waeren die Links im aufgeklappten
   Menue weiss auf weiss und das Panel wirkte als leeres Feld.
   ⚠ `.nav` MUSS im Selektor stehen. Solange diese Regeln in page.css lagen,
   genuegte `.head .nav__panel a` — page.css wird nach base.css geladen und gewann
   ueber die Reihenfolge. Seit dem Umzug in base.css (19.08.) steht `.head .nav a`
   weiter unten in DERSELBEN Datei und gewinnt bei gleicher Spezifitaet. Mit `.nav`
   ist die Regel spezifischer und die Reihenfolge egal. Nachgewiesen: ohne `.nav`
   waren die Panel-Links wieder weiss auf weiss. */
.head .nav .nav__panel a,
.kphead .nav .nav__panel a {
  display: block;
  padding: 7px 16px;
  font-family: var(--f-text);
  font-size: 13px;
  line-height: 1.3;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  /* `--muted` war hier zu schwach: drei blassgraue Zeilen in einem weissen
     Feld liessen das Panel als leeren grauen Kasten lesen statt als Liste. */
  color: var(--ink);
  /* MUSS zurueckgesetzt werden. `.nav a` traegt `text-shadow: 0 1px 12px
     rgba(11,28,48,.85)` — richtig fuer weisse Leiste ueber einem Foto, im
     weissen Panel legt derselbe Schein einen dunklen Hof hinter dunkle
     Schrift. Das war die Ursache fuer den "grauen", verwaschenen Eindruck
     des Menues, nicht die Hintergrundfarbe (die ist `#ffffff`). */
  text-shadow: none;
}
.head .nav .nav__panel a:hover, .head .nav .nav__panel a:focus-visible,
.kphead .nav .nav__panel a:hover, .kphead .nav .nav__panel a:focus-visible { color: var(--ink); background: var(--band); }
.head .nav .nav__panel a[aria-current="page"],
.kphead .nav .nav__panel a[aria-current="page"] { color: var(--ink); font-weight: 700; }

/* ---------- Kopfnavigation: mobil ----------------------------------------
   Entscheid 19.08.: vollflaechiges Navy-Overlay. Unter 900px gab es vorher
   GAR KEINE Navigation — die Leiste war nur ausgeblendet, ohne Ersatz.
   Die Expertise-Punkte stehen hier flach und eingerueckt statt hinter einem
   zweiten Ausklappen: bei drei Unterpunkten kostet das Ausklappen mehr, als
   es an Hoehe spart. Aufbau und Beschriftung erzeugt js/nav.js aus der
   vorhandenen Leiste — eine Quelle, damit beide nicht auseinanderlaufen. */

.burger {
  display: none;                     /* erst unter dem Umbruch sichtbar */
  position: relative;
  z-index: 120;
  width: 44px; height: 44px;         /* Daumenflaeche, nicht nur das Zeichen */
  margin-right: -10px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}
.burger span,
.burger::before,
.burger::after {
  content: "";
  position: absolute;
  left: 11px;
  width: 22px; height: 1.5px;
  background: #fff;
  transition: transform .24s, opacity .16s;
}
.burger::before { top: 15px; }
.burger span    { top: 21.25px; }
.burger::after  { top: 27.5px; }
/* Zum Kreuz: die mittlere Linie faellt weg, die aeusseren drehen in die Mitte. */
.burger[aria-expanded="true"] span { opacity: 0; }
.burger[aria-expanded="true"]::before { transform: translateY(6.25px) rotate(45deg); }
.burger[aria-expanded="true"]::after  { transform: translateY(-6.25px) rotate(-45deg); }

.mnav {
  position: fixed;
  inset: 0;
  z-index: 110;
  background: var(--ink);
  padding: 104px var(--gut) 40px;
  overflow-y: auto;
  overscroll-behavior: contain;
  opacity: 0;
  visibility: hidden;
  /* visibility erst NACH der Blende auf hidden — sonst verschwindet die Flaeche
     hart, bevor sie ausgeblendet ist. */
  transition: opacity .24s, visibility 0s .24s;
}
/* Beim Oeffnen umgekehrt: visibility sofort, ohne Verzoegerung. Sonst bleibt die
   Flaeche waehrend der Blende unsichtbar und ein focus() darauf verpufft — die
   Tastaturbedienung des Overlays faengt dann gar nicht erst an. */
.mnav[data-open="true"] { opacity: 1; visibility: visible; transition: opacity .24s, visibility 0s 0s; }

/* Eigene Kopfzeile: Zeichen links, Schliesser rechts — auf derselben Hoehe wie
   im Seitenkopf, damit der Burger an Ort und Stelle zum Kreuz wird. */
.mnav__top {
  position: absolute;
  top: 26px; left: var(--gut); right: var(--gut);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
/* 60 px wie im Kopf (08.09.). Das Overlay IST der Kopf im aufgeklappten
   Zustand - blieben hier 40 px, spraenge die Marke beim Oeffnen kleiner.
   Gemessen bei 390 px: kein Bildlauf im Overlay, Inhalt bleibt 844 px. */
.mnav__top img { height: 60px; filter: brightness(0) invert(1); }
.mnav .burger { display: block; margin-right: -10px; }

.mnav a {
  display: block;
  padding: 17px 0;
  border-top: 1px solid rgba(255,255,255,.14);
  font-family: var(--f-mono);
  font-size: 15px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.86);
}
/* Der erste Punkt braucht keine Linie ueber sich — die Kopfzeile steht davor. */
.mnav__top + a { border-top: 0; }
.mnav a[aria-current="page"] { color: #fff; }
/* Unterpunkte: eingerueckt, kleiner, gemischte Schreibung — sie sind die
   Kinder von „Expertise", nicht gleichrangige Stationen. */
.mnav .mnav__sub {
  padding: 12px 0 12px 22px;
  font-family: var(--f-text);
  font-size: 15px;
  letter-spacing: 0;
  text-transform: none;
  border-top: 0;
  color: rgba(255,255,255,.66);
}
.mnav .mnav__lbl {
  padding-bottom: 4px;
  color: rgba(255,255,255,.42);
}
.mnav .mnav__sub + a:not(.mnav__sub) { border-top: 1px solid rgba(255,255,255,.14); margin-top: 12px; }

.mnav__foot {
  margin-top: 38px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .08em;
  line-height: 2;
  color: rgba(255,255,255,.45);
}
/* `display: inline` ergab eine Tippflaeche von 120x14px. WCAG 2.5.8 (AA)
   verlangt 24px, 2.5.5 (AAA) 44px. Als inline-block mit Polsterung wird die
   Flaeche groesser, ohne dass die Zeile im Fuss auseinanderfaellt.
   Gemessen 03.09.2026 im mobilen Overlay. */
.mnav__foot a { display: inline-block; padding: 7px 0; border: 0; font-size: inherit; letter-spacing: inherit; color: rgba(255,255,255,.7); }

/* Seite hinter dem Overlay nicht mitscrollen lassen. */
body[data-mnav="open"] { overflow: hidden; }

/* ---------- Hero: Letterbox -------------------------------------------------
   Bildband über die volle Breite, Aussage darunter auf ruhigem Grund.
   Editorial statt Werbeplakat — und ehrlich zur verfügbaren Bildauflösung. */

.hero { position: relative; background: var(--sheet); }

.hero__band {
  position: relative;
  height: clamp(280px, 44vh, 520px);
  overflow: hidden;
  background: var(--ink);
}
.hero__img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 58%;
}
/* Nur oben abdunkeln, damit die Navigation trägt — das Bild bleibt Bild. */
.hero__band::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 210px;
  background: linear-gradient(180deg, rgba(11,28,48,.78) 0%, rgba(11,28,48,.28) 58%, rgba(11,28,48,0) 100%);
  pointer-events: none;
}

.hero__slot {
  position: absolute;
  left: var(--gut); bottom: 16px;
  z-index: 5;
  font-family: var(--f-mono);
  font-size: 9.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(239,239,239,.72);
  background: rgba(11,28,48,.55);
  padding: 6px 10px;
}

.hero__credit {
  position: absolute;
  right: var(--gut); bottom: 16px;
  z-index: 5;
  font-family: var(--f-mono);
  font-size: 9.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(239,239,239,.5);
}

.hero__say { padding-block: clamp(52px, 6vw, 88px) clamp(56px, 7vw, 104px); }

.hero__eyebrow {
  font-family: var(--f-mono);
  font-size: var(--t-meta);
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 30px;
}

.hero h1 {
  font-size: var(--t-hero);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -.028em;
  max-width: 15ch;
  margin: 0 0 30px;
}

.hero__sub {
  font-size: var(--t-lead);
  line-height: 1.6;
  color: var(--muted);
  max-width: 44ch;
}

/* Kopf liegt über dem Bildband */
.head .nav a, .head .nav > span { color: rgba(255,255,255,.86); }

/* ---------- Kontakt-Abschluss ------------------------------------------- */

.close {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 56px;
  align-items: end;
}
.close h2 { font-size: var(--t-h2); line-height: 1.14; max-width: 16ch; }
.close p  { margin-top: 18px; color: var(--muted); max-width: 40ch; }
.section--ink .close p { color: rgba(239,239,239,.72); }

/* ---------- Fuß --------------------------------------------------------- */

.foot { background: var(--ink); color: rgba(239,239,239,.72); padding-block: 44px; }
.foot__in {
  display: flex;
  flex-wrap: wrap;
  gap: 28px 48px;
  align-items: center;
  justify-content: space-between;
}
/* 60 px statt 38, gleich gross wie im Kopf (Entscheidung 08.09.). Der Fuss
   war vorher das 0,864-fache des Kopfes; der Nutzer wollte beide auf 60. */
.foot img { height: 60px; filter: brightness(0) invert(1); opacity: .9; }
.foot nav { display: flex; flex-wrap: wrap; gap: 26px; }
.foot a { color: rgba(239,239,239,.72); font-size: var(--t-small); }
.foot a:hover { color: #fff; }
.foot__meta {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .08em;
  color: rgba(239,239,239,.45);
  width: 100%;
  padding-top: 26px;
  margin-top: 8px;
  border-top: 1px solid rgba(255,255,255,.12);
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

/* ---------- Mobil ------------------------------------------------------- */

@media (max-width: 900px) {
  :root { --gut: 24px; }
  .nav { display: none; }
  .burger { display: block; }     /* der Ersatz fuer die ausgeblendete Leiste */
  .hero { min-height: 78vh; }
  .close { grid-template-columns: 1fr; gap: 32px; align-items: start; }
}