/* KDS Base – RM Architektur · Architektur-Feinschliff über base.css.
   base.css bleibt unangetastet; hier nur die Architektur-Spezifika. */

/* ---------- Serif-Display für Überschriften ----------
   base.css nutzt für h1–h3 var(--font); wir setzen den Serif-Display. */
h1, h2, h3, .display{
  font-family:var(--font-display);
  font-weight:400;
  letter-spacing:-.01em;
}
h1{ line-height:1.06; }
h2{ line-height:1.12; }

/* ---------- Logo-Lockup: Monogramm + Wortmarke (weiß auf Schwarz) ---------- */
.logo{ gap:13px; }
.hd .logo img{ height:38px; width:auto; display:block; }
.hd.is-scrolled .logo img{ height:32px; }
/* Logo beim Scrollen sichtbar lassen (base.css blendet es sonst aus). */
.hd.is-scrolled .logo{ max-width:none; opacity:1; transform:none; }

.logo--word{
  font-family:var(--font); font-weight:500; font-size:16px;
  letter-spacing:.18em; text-transform:uppercase; color:#fff;
  white-space:nowrap; line-height:1;
}
.hd.is-scrolled .logo--word{ font-size:14px; }
@media(max-width:560px){ .logo--word{ display:none; } } /* mobil: nur Monogramm */

.ft__logo{ height:52px; width:auto; display:block; margin-bottom:14px; }

/* ---------- Nav-Unterstrich hell auf schwarzer Leiste ----------
   --accent ist hier Schwarz, also wäre der Unterstrich unsichtbar. */
.nav a::after{ background:#fff; }

/* ---------- Instagram-Icon (schwarze Leiste) ---------- */
.hd .social a{ color:rgba(255,255,255,.82); border-color:var(--bar-line); }
.hd .social a:hover{ color:#fff; border-color:rgba(255,255,255,.5); }
.hd .social svg{ width:17px; height:17px; }
@media(max-width:1080px){ .hd .social{ display:flex; } } /* Icon auch mobil sichtbar */

/* ---------- Eyebrow ruhiger (Schwarz statt buntem Akzent) ---------- */
.eyebrow{ color:var(--ink); }
.eyebrow::before{ background:var(--ink); }

/* ---------- Skip-Link (AA 2.4.1) ---------- */
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--ink); color:#fff; padding:10px 16px; text-decoration:none;
}
.skip-link:focus{ left:16px; top:16px; }

/* ---------- Dezenter, sichtbarer Tastatur-Fokus (AA 2.4.7) ---------- */
:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; }
.hd :focus-visible, .ft :focus-visible{ outline-color:#fff; }

/* ---------- Reduced Motion (AA 2.3.3) ---------- */
@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{
    transition-duration:.001ms !important;
    animation-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}

/* ============ Größere Typografie + zentrierte Navigation (RM) ============ */
html{ font-size:110%; }            /* globale Basis ~16 -> ~19px, skaliert alle rem-Größen */
/* Bricks (Eltern-Theme) vererbt 15px Fließtext – für eine Architektur-Seite
   zu gedrängt. Ruhige Lesegröße + großzügige Zeilenhöhe: */
body{ font-size:1rem; line-height:1.72; }
p{ text-wrap:pretty; }
.nav a{ font-size:15px; }          /* Menüpunkte größer */

@media(min-width:1081px){
  .hd__bar{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; }
  .hd__bar > .logo{ justify-self:start; }
  .hd__bar > .nav{ justify-self:center; }
  .hd__bar > .hd__right{ justify-self:end; }
}

/* ---------- Fraunces: ruhiger & klarer eingestellt ----------
   opsz von 144 (max. Display-Kontrast, wirkt verschnörkelt) auf 40 gesenkt
   und etwas mehr Gewicht (440) – klarer lesbar, weiterhin dieselbe Familie.
   Zum Nachjustieren: opsz kleiner = klarer/schlichter, größer = dramatischer. */
h1,h2,h3,
.home-hero__title,.home-credo__text,.home-interlude__text,
.kpf-card__title,.kpf-single__head h1,.kpf-archive__head h1,
.pg-vita dt,.pg-area__no,.home-service h3{
  font-variation-settings:'opsz' 40,'wght' 440,'SOFT' 0,'WONK' 0;
  font-weight:440;
}

/* ===== Porträt-Platzhalter (global) – bis das Architektenfoto vorliegt ===== */
.photo-ph{ position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; width:100%; aspect-ratio:4/5; background:var(--tint); border:1px solid var(--line); }
.photo-ph--wide{ aspect-ratio:16/7; }
.photo-ph__mark{ font-family:var(--font-display); font-weight:400; font-size:clamp(2.6rem,1.8rem + 2.4vw,3.8rem); letter-spacing:.06em; color:var(--ink); opacity:.16; line-height:1; }
.photo-ph__cap{ font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--muted); }

/* Navigation: „Anfrage" als betonter Abschluss */
.nav a.nav__cta{ border:1px solid rgba(255,255,255,.45); padding:8px 16px; border-radius:999px; transition:background .2s ease, color .2s ease, border-color .2s ease; }
.nav a.nav__cta:hover{ background:#fff; color:var(--ink); border-color:#fff; }
@media(max-width:980px){ .nav a.nav__cta{ border:0; padding:4px 0; border-radius:0; } }

/* =====================================================================
   Mobile: Trefferflächen auf mindestens 44px (Apple/Google-Richtwert).
   Gemessen waren Nav-Links 32px, Hero-Link 33px, Burger 42px.
   ===================================================================== */
@media (max-width:980px){
  .nav a{ display:flex; align-items:center; min-height:44px; padding-block:6px; }
  .burger{ width:44px; height:44px; }
  .logo{ min-height:44px; display:inline-flex; align-items:center; }
}
@media (max-width:720px){
  .home-hero__link{ display:inline-flex; align-items:center; min-height:44px; }
  .home-hero__actions{ gap:18px; }
  .btn{ min-height:48px; }
  /* Footer-Links: bequem tippbar */
  .ft__col a{ display:flex; align-items:center; min-height:40px; margin-bottom:4px; }
}