@import url("fonts.css");

/* ============================================================
   ATRIUM IMMOBILIEN PADERBORN — Design System
   Farben: Rot #E10F21 · Anthrazit #14161A · Weiß
   ============================================================ */

:root{
  /* Marke */
  --red:            #E10F21;
  --red-deep:       #B30A15;
  --red-soft:       rgba(225,15,33,.08);
  --red-line:       rgba(225,15,33,.28);

  /* Anthrazit / Neutral */
  --ink:            #14161A;
  --ink-2:          #1D2126;
  --ink-bg:         #4C5157;   /* Hintergrund der dunklen Abschnitte – neutrales Grau */
  --ink-bg-2:       #444950;   /* etwas tiefer, für Karten auf dem Grau */
  --ink-3:          #2B3038;
  --ink-4:          #333A43;
  --muted:          #525A65;
  --muted-2:        #98A0AB;

  --paper:          #FFFFFF;
  --paper-2:        #F6F6F7;
  --paper-3:        #EFF0F1;
  --line:           #E3E5E8;
  --line-2:         #D3D6DA;

  /* Typo */
  --serif: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans:  "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  /* Motion / Form */
  --ease:   cubic-bezier(.22,1,.36,1);
  --ease-2: cubic-bezier(.65,0,.35,1);
  --radius: 4px;
  --radius-lg: 8px;
  --shadow-s: 0 2px 10px -4px rgba(20,22,26,.18);
  --shadow-m: 0 18px 46px -24px rgba(20,22,26,.42);
  --shadow-l: 0 40px 90px -44px rgba(20,22,26,.55);

  --header-h: 150px;
  --gutter: clamp(20px, 4vw, 48px);
  --section-y: clamp(72px, 9vw, 140px);
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:var(--header-h); }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:17px; line-height:1.68;
  font-weight:400; letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
body.nav-open{ overflow:hidden; }
img,video{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; }
h1,h2,h3,h4{ margin:0; font-weight:400; letter-spacing:-.022em; }
p{ margin:0 0 1.05em; }
p:last-child{ margin-bottom:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
:focus-visible{ outline:2px solid var(--red); outline-offset:3px; border-radius:2px; }
::selection{ background:var(--red); color:#fff; }

/* ---------- Layout ---------- */
.container{ width:min(1280px, 100% - (var(--gutter) * 2)); margin-inline:auto; }
.section{ padding-block:var(--section-y); position:relative; }
.section--tint{ background:var(--paper-2); }
.section--ink{ background:var(--ink-bg); color:#fff; }
.section--ink h2,.section--ink h3{ color:#fff; }

/* ---------- Typografie ---------- */
.display{
  font-family:var(--serif);
  font-size:clamp(2.9rem, 6.1vw, 5.5rem);
  line-height:1.04; font-weight:400;
  letter-spacing:-.032em;
  font-variation-settings:"SOFT" 0,"WONK" 0,"opsz" 100;
}
h2.h-section{
  font-family:var(--serif);
  font-size:clamp(2rem, 3.9vw, 3.35rem);
  line-height:1.1; letter-spacing:-.03em;
  font-variation-settings:"opsz" 80;
}
/* Rote Hervorhebung statt Kursivschrift */
.hl{ color:var(--red); }
/* Hervorhebung einzelner Passagen im Fließtext */
.mark{ color:var(--red); font-weight:700; }
.section--ink .mark,.chapter--ink .mark{ color:#FF8A93; }
.section--ink .hl,.chapter--ink .hl{ color:#FF7A86; }

.eyebrow{
  display:inline-flex; align-items:center; gap:.7rem;
  font-size:.75rem; font-weight:700; letter-spacing:.19em;
  text-transform:uppercase; color:var(--red);
}
.eyebrow::before{ content:""; width:34px; height:2px; background:var(--red); flex:none; }
.eyebrow--light{ color:#fff; }

.lead{
  font-size:clamp(1.06rem, 1.42vw, 1.24rem);
  line-height:1.66; color:var(--ink-4); max-width:66ch;
}
.section--ink .lead{ color:rgba(255,255,255,.86); }

/* ---------- Buttons ---------- */
.btn{
  --btn-bg:var(--red); --btn-fg:#fff; --btn-bd:var(--red);
  display:inline-flex; align-items:center; gap:.62rem;
  padding:1.05rem 1.8rem; border:1px solid var(--btn-bd);
  background:var(--btn-bg); color:var(--btn-fg);
  font-size:.9rem; font-weight:700; letter-spacing:.045em; text-transform:uppercase;
  border-radius:var(--radius); cursor:pointer;
  transition:transform .45s var(--ease), background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), box-shadow .45s var(--ease);
  position:relative;
}
.btn .arw{ transition:transform .45s var(--ease); display:inline-block; }
.btn:hover{ transform:translateY(-2px); box-shadow:0 16px 30px -16px rgba(225,15,33,.62); }
.btn:hover .arw{ transform:translateX(5px); }
.btn--ghost{ --btn-bg:transparent; --btn-fg:#fff; --btn-bd:rgba(255,255,255,.42); }
.btn--ghost:hover{ --btn-bg:#fff; --btn-fg:var(--ink); --btn-bd:#fff; box-shadow:0 16px 30px -18px rgba(0,0,0,.6); }
.btn--dark{ --btn-bg:var(--ink); --btn-fg:#fff; --btn-bd:var(--ink); }
.btn--dark:hover{ --btn-bg:var(--red); --btn-bd:var(--red); }
.btn--outline{ --btn-bg:transparent; --btn-fg:var(--ink); --btn-bd:var(--line-2); }
.btn--outline:hover{ --btn-bd:var(--ink); --btn-bg:var(--ink); --btn-fg:#fff; box-shadow:0 16px 30px -20px rgba(20,22,26,.6); }

.link-arrow{
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:.82rem; font-weight:700; letter-spacing:.11em; text-transform:uppercase;
  color:var(--red); border-bottom:1px solid var(--red-line); padding-bottom:.28rem;
  transition:gap .35s var(--ease), border-color .35s var(--ease);
}
.link-arrow:hover{ gap:.85rem; border-color:var(--red); }

/* ============================================================
   HEADER — hell, Logo bündig mit dem Seiteninhalt
   ============================================================ */
.header{
  position:fixed; inset:0 0 auto 0; z-index:100;
  height:var(--header-h);
  display:flex; align-items:center;
  /* weicher heller Verlauf, damit die Navigation über dem Bild lesbar bleibt */
  background:linear-gradient(180deg,
    rgba(255,255,255,.95) 0%,
    rgba(255,255,255,.88) 55%,
    rgba(255,255,255,.55) 82%,
    rgba(255,255,255,0)  100%);
  border-bottom:1px solid transparent;
  transition:height .5s var(--ease), background .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);
}
/* kein width:100% – .container bestimmt die Breite, damit das Logo exakt auf der
   linken Kante des Seiteninhalts und damit der Überschrift sitzt. */
.header__inner{ display:flex; align-items:center; justify-content:space-between; gap:2rem; }

.header__logo{ display:block; flex:none; }
.header__logo img{ height:124px; width:auto; transition:height .5s var(--ease); }
.header__logo .logo-light{ display:none; }

/* Bei geöffnetem Menü liegt der Kopfbereich über der dunklen Fläche:
   Hintergrund weg, helle Logovariante einblenden. */
body.nav-open .header,
body.nav-open .header.is-solid{
  background:transparent; border-bottom-color:transparent; box-shadow:none;
  -webkit-backdrop-filter:none; backdrop-filter:none;
}
body.nav-open .header__logo .logo-dark{ display:none; }
body.nav-open .header__logo .logo-light{ display:block; }

.header.is-solid{
  height:96px; background:rgba(255,255,255,.95);
  -webkit-backdrop-filter:saturate(180%) blur(14px); backdrop-filter:saturate(180%) blur(14px);
  border-bottom-color:var(--line); box-shadow:0 1px 24px -12px rgba(20,22,26,.28);
}
.header.is-solid .header__logo img{ height:78px; }

.nav{ display:flex; align-items:center; gap:clamp(1.3rem,2.7vw,2.7rem); }
.nav a{
  position:relative; font-size:1.05rem; font-weight:600; letter-spacing:.002em;
  color:var(--ink-3); padding:.45rem 0; white-space:nowrap;
  transition:color .3s var(--ease);
}
.nav a::after{
  content:""; position:absolute; left:0; bottom:0; height:2px; width:0; background:var(--red);
  transition:width .45s var(--ease);
}
.nav a:hover::after,.nav a.is-active::after{ width:100%; }
.nav a:hover,.nav a.is-active{ color:var(--ink); }

.header__cta{ display:inline-flex; }
.header .btn{ padding:.95rem 1.5rem; font-size:.83rem; }

.burger{
  display:none; width:52px; height:52px; border:1px solid var(--line-2);
  background:#fff; border-radius:var(--radius); cursor:pointer;
  align-items:center; justify-content:center; flex-direction:column; gap:5px;
}
.burger span{ display:block; width:20px; height:1.7px; background:var(--ink); transition:transform .4s var(--ease), opacity .3s var(--ease), background .35s var(--ease); }
body.nav-open .burger{ background:transparent; border-color:rgba(255,255,255,.3); }
body.nav-open .burger span{ background:#fff; }
body.nav-open .burger span:nth-child(1){ transform:translateY(6.7px) rotate(45deg); }
body.nav-open .burger span:nth-child(2){ opacity:0; }
body.nav-open .burger span:nth-child(3){ transform:translateY(-6.7px) rotate(-45deg); }

/* Mobile Drawer */
.drawer{
  position:fixed; inset:0; z-index:99; background:var(--ink);
  padding:calc(var(--header-h) + 24px) var(--gutter) 40px;
  display:flex; flex-direction:column; gap:.2rem;
  opacity:0; visibility:hidden; transform:translateY(-12px);
  transition:opacity .45s var(--ease), transform .55s var(--ease), visibility .45s;
  overflow-y:auto;
}
body.nav-open .drawer{ opacity:1; visibility:visible; transform:none; }
.drawer a{
  font-family:var(--serif); font-size:1.5rem; letter-spacing:-.02em;
  color:#fff; padding:.62rem 0; border-bottom:1px solid rgba(255,255,255,.09);
}
.drawer__foot{ margin-top:auto; padding-top:32px; color:rgba(255,255,255,.6); font-size:.9rem; }
.drawer__foot a{ font-family:var(--sans); font-size:.95rem; border:0; padding:.15rem 0; display:inline; color:#fff; }

/* ============================================================
   HERO — helles Layout über einem bewegten Hintergrundbild
   ============================================================ */
.hero{
  position:relative; overflow:hidden; isolation:isolate;
  min-height:100svh;
  display:flex; align-items:flex-end;
  padding-top:calc(var(--header-h) + clamp(20px,3vh,44px));
  padding-bottom:clamp(64px,10vh,124px);
  background:var(--paper);
}
.hero__bg{ position:absolute; inset:0; z-index:-2; overflow:hidden; }
.hero__still{
  position:absolute; inset:-3%;
  background:url("../img/hero.jpg") 58% 52% / cover no-repeat;
  transform-origin:66% 50%;
  animation:heroZoom 34s ease-in-out infinite alternate;
}
@keyframes heroZoom{
  from{ transform:scale(1.0)  translate3d(0,0,0); }
  to  { transform:scale(1.13) translate3d(-1.6%,1%,0); }
}
.hero__video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity 1.1s var(--ease); z-index:1;
}
.hero__video.is-ready{ opacity:1; }

/* Heller Verlauf: links deckend weiß für den Text,
   nach rechts zunehmend transparent, damit das Gebäude sichtbar bleibt. */
.hero__scrim{
  position:absolute; inset:0; z-index:-1;
  background:
    /* schmaler, kräftiger Weißkeil links hinter dem Text */
    linear-gradient(90deg,
      rgba(255,255,255,.97) 0%,
      rgba(255,255,255,.95) 30%,
      rgba(255,255,255,.80) 44%,
      rgba(255,255,255,.42) 56%,
      rgba(255,255,255,.10) 68%,
      rgba(255,255,255,0)   78%),
    /* nur ganz unten ein weicher Auslauf in den nächsten Abschnitt */
    linear-gradient(180deg,
      rgba(255,255,255,0)   0%,
      rgba(255,255,255,0)  62%,
      rgba(255,255,255,.55) 84%,
      rgba(255,255,255,.94) 95%,
      #FFFFFF 100%);
}

.hero__inner{ position:relative; z-index:2; }
/* Breite über die Kinder begrenzen: ein max-width am .container würde zusammen
   mit margin-inline:auto den ganzen Block mittig setzen. */
.hero .display{ max-width:16ch; }
.hero__inner > p{ max-width:40ch; }
.hero__inner > .eyebrow{ max-width:none; }
.hero .display{ margin:1.5rem 0 0; }
.hero__lead{
  margin-top:1.7rem; max-width:44ch;
  font-size:clamp(1.24rem,1.82vw,1.66rem); line-height:1.46;
  color:var(--ink-4); font-weight:500; letter-spacing:-.012em;
}
.hero__actions{ margin-top:2.2rem; display:flex; flex-wrap:wrap; gap:.8rem; }
.hero__actions .btn{ padding:1rem 1.5rem; font-size:.845rem; letter-spacing:.03em; }
/* heller Hintergrund, damit der zweite Button auch über dem Bild lesbar bleibt */
.hero__actions .btn--outline{ --btn-bg:rgba(255,255,255,.94); --btn-bd:var(--line-2); }

.scroll-cue{
  position:absolute; right:var(--gutter); bottom:clamp(34px,6vh,72px); z-index:3;
  writing-mode:vertical-rl; font-size:.68rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--muted); display:flex; align-items:center; gap:14px;
}
.scroll-cue i{ display:block; width:1px; height:64px; background:linear-gradient(var(--line-2), transparent); position:relative; }
.scroll-cue i::after{
  content:""; position:absolute; top:0; left:0; width:1px; height:22px; background:var(--red);
  animation:cue 2.4s infinite var(--ease-2);
}
@keyframes cue{ 0%{ transform:translateY(0); opacity:0; } 25%{ opacity:1; } 100%{ transform:translateY(42px); opacity:0; } }

/* ============================================================
   DREI ZUSAGEN
   ============================================================ */
.promise{
  position:relative; overflow:hidden;
  padding-block:clamp(76px,9vw,140px);
  /* oben von Weiß nach Grau: schließt nahtlos an das helle Hero-Ende an */
  background:linear-gradient(180deg, #FFFFFF 0%, var(--paper-2) 14%, var(--paper-2) 100%);
}
.promise__mark{
  position:absolute; right:-7%; top:50%; transform:translateY(-50%);
  width:min(520px,44vw); height:auto; opacity:.03; pointer-events:none;
}
.promise__head{ max-width:58ch; margin-bottom:clamp(3rem,5vw,4.4rem); }
.promise__head h2.h-section{ font-size:clamp(2.3rem,4.4vw,3.8rem); }
.promise__intro{
  margin:1.5rem 0 0; max-width:52ch;
  font-size:clamp(1.06rem,1.34vw,1.2rem); line-height:1.62; color:var(--ink-4);
}
.promise__head h2{ margin-top:1.2rem; }

.promise__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.4rem,2.6vw,2.2rem); }
.promise__card{
  position:relative; padding:clamp(2.6rem,3.8vw,3.6rem) clamp(2.2rem,3.2vw,3rem);
  display:flex; flex-direction:column; overflow:hidden;
  background:var(--paper); border:1px solid var(--line);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-m);
  transition:border-color .5s var(--ease), transform .5s var(--ease), box-shadow .5s var(--ease);
}
/* durchgehende rote Oberkante, die beim Hover kräftiger wird */
.promise__card::after{
  content:""; position:absolute; left:0; right:0; top:0; height:4px;
  background:var(--red); transform:scaleX(.22); transform-origin:left;
  transition:transform .7s var(--ease);
}
.promise__card:hover::after{ transform:scaleX(1); }
.promise__card:hover{ border-color:var(--red-line); transform:translateY(-8px); box-shadow:var(--shadow-l); }
.promise__icon{
  display:grid; place-items:center; width:86px; height:86px; margin-bottom:1.9rem;
  border-radius:50%; background:var(--red-soft);
  transition:background .5s var(--ease);
}
.promise__icon svg{ width:40px; height:40px; stroke:var(--red); }
.promise__card:hover .promise__icon{ background:var(--red); }
.promise__card:hover .promise__icon svg{ stroke:#fff; }
.promise__card h3{
  margin:0 0 .9rem; font-family:var(--serif);
  font-size:clamp(1.6rem,2.4vw,2.1rem); line-height:1.12; letter-spacing:-.028em;
}
.promise__card p{ margin:0; font-size:1.08rem; line-height:1.66; color:var(--ink-4); }

/* ============================================================
   ATRIUM IMMOBILIEN
   ============================================================ */
.split{ display:grid; grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr); gap:clamp(2.4rem,6vw,6rem); align-items:start; }
.split__sticky{ position:sticky; top:calc(var(--header-h) + 34px); }
/* Variante, in der die linke Spalte auf die Höhe der rechten mitwächst */
.split--stretch{ align-items:stretch; }
.split--stretch .split__col{ display:flex; flex-direction:column; }
.figure--tall{ flex:1 1 auto; margin-top:2.2rem; min-height:420px; }
.figure--tall img{ width:100%; height:100%; object-fit:cover; border-radius:var(--radius-lg); }
.figure img{ width:100%; height:100%; object-fit:cover; border-radius:var(--radius-lg); }

/* Grundsatz – typografisch, ohne farbigen Kasten */
.claim{
  margin:2.4rem 0; padding:1.6rem 0 1.5rem;
  border-top:2px solid var(--ink); border-bottom:1px solid var(--line);
}
.claim > span{
  display:block; font-size:.7rem; font-weight:700; letter-spacing:.2em;
  text-transform:uppercase; color:var(--red); margin-bottom:.9rem;
}
.claim p{
  margin:0 0 .8rem; font-family:var(--serif);
  font-size:clamp(1.7rem,2.9vw,2.5rem); line-height:1.12; letter-spacing:-.03em; color:var(--ink);
}
.claim em{ display:block; font-style:normal; font-size:1.06rem; line-height:1.62; color:var(--muted); max-width:56ch; }

.reasons{ margin-top:2.2rem; display:grid; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; }
.reason{ background:var(--paper); padding:1.5rem 1.8rem; transition:background .4s var(--ease); }
.reason:hover{ background:var(--paper-2); }
.reason h4{
  position:relative; padding-left:1.6rem; margin-bottom:.3rem;
  font-size:1.08rem; font-weight:700; letter-spacing:-.014em;
}
.reason h4::before{
  content:""; position:absolute; left:0; top:.52em;
  width:9px; height:9px; border-radius:50%; background:var(--red);
}
.reason p{ margin:0; padding-left:1.6rem; font-size:.99rem; line-height:1.6; color:var(--muted); }

/* ============================================================
   KAPITEL
   ============================================================ */
.chapter{ padding-block:var(--section-y); position:relative; overflow:hidden; }
.chapter--tint{ background:var(--paper-2); }
.chapter--ink{ background:var(--ink-bg); color:#fff; }
.chapter__head{ max-width:64ch; margin-bottom:clamp(2.4rem,4.6vw,3.8rem); }
.chapter__tag{
  display:inline-flex; align-items:center; gap:1rem; margin-bottom:1.3rem;
  font-size:.76rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--red);
}
.chapter__tag::before{ content:""; width:34px; height:2px; background:var(--red); }
/* auf dem grauen Hintergrund braucht das Rot mehr Helligkeit */
.chapter--ink .chapter__tag{ color:#FF8A93; }
.chapter--ink .chapter__tag::before{ background:#FF8A93; }
.section--ink .eyebrow{ color:#FF8A93; }
.section--ink .eyebrow--light{ color:#fff; }
.section--ink .eyebrow::before{ background:#FF8A93; }
.chapter__lead{ font-size:clamp(1.02rem,1.28vw,1.14rem); color:var(--ink-4); line-height:1.68; }
.chapter--ink .chapter__lead{ color:rgba(255,255,255,.86); }
.chapter--ink .chapter__lead b:not(.mark){ color:#fff; }

/* ---- Immobilienklassen ---- */
.fields{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.2rem,2.2vw,1.9rem); }
.field-card{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-lg);
  overflow:hidden; display:flex; flex-direction:column;
  transition:border-color .5s var(--ease), transform .5s var(--ease), box-shadow .5s var(--ease);
}
.field-card:hover{ border-color:var(--red-line); transform:translateY(-4px); box-shadow:var(--shadow-m); }
.field-card__media{ position:relative; aspect-ratio:16/10; overflow:hidden; }
.field-card__media img{ width:100%; height:100%; object-fit:cover; object-position:center 58%; transition:transform 1.5s var(--ease); }
.field-card:hover .field-card__media img{ transform:scale(1.06); }
.field-card__media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(12,13,15,.05) 0%, rgba(12,13,15,.2) 44%, rgba(12,13,15,.82) 100%);
}
.field-card__label{
  position:absolute; left:1.35rem; right:1.35rem; bottom:1.05rem; z-index:1;
  font-family:var(--serif); font-size:1.24rem; letter-spacing:-.022em; line-height:1.16; color:#fff;
}
.field-card__body{ padding:1.5rem 1.55rem 1.7rem; display:flex; flex-direction:column; gap:1.05rem; }
.field-card__body p{ margin:0; font-size:.96rem; color:var(--ink-4); }
.field-card__body ul{ display:grid; gap:.62rem; padding-top:1.05rem; border-top:1px solid var(--line); }
.field-card__body ul li{ position:relative; padding-left:1.1rem; font-size:.9rem; line-height:1.5; color:var(--muted); }
.field-card__body ul li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:5px; height:5px; border-radius:50%; background:var(--red);
}

/* ============================================================
   VERMARKTUNGSPROZESS — Timeline
   ============================================================ */
.prozess{ position:relative; }
.prozess__mark{
  position:absolute; left:-8%; bottom:-6%;
  width:min(620px,58vw); height:auto; opacity:.045; pointer-events:none;
}
.timeline{ position:relative; display:grid; gap:clamp(2.4rem,4.6vw,4.4rem); padding-left:clamp(44px,5vw,74px); }
.timeline__rail{
  position:absolute; left:clamp(17px,2vw,29px); top:12px; bottom:12px; width:2px;
  background:rgba(255,255,255,.20); border-radius:2px; overflow:hidden;
}
.timeline__rail span{
  display:block; width:100%; height:0%;
  background:linear-gradient(180deg, var(--red), #FF5566);
  transition:height .18s linear;
}
.timeline__step{
  position:relative;
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.92fr);
  gap:clamp(1.6rem,3.4vw,3.2rem); align-items:center;
}
.js .timeline__step{
  opacity:0; transform:translateY(30px);
  transition:opacity .85s var(--ease), transform .95s var(--ease);
}
.js .timeline__step.is-in{ opacity:1; transform:none; }

.timeline__marker{
  position:absolute; left:calc(clamp(44px,5vw,74px) * -1); top:2px;
  width:clamp(36px,4vw,60px); height:clamp(36px,4vw,60px);
  display:grid; place-items:center;
  border-radius:50%; background:var(--ink-bg); border:2px solid rgba(255,255,255,.28);
  transition:border-color .6s var(--ease), background .6s var(--ease), transform .6s var(--ease);
}
.timeline__marker b{
  font-family:var(--serif); font-size:1.02rem; font-weight:400; color:rgba(255,255,255,.7);
  transition:color .6s var(--ease);
}
.timeline__step.is-in .timeline__marker{ border-color:var(--red); background:var(--red); transform:scale(1.06); }
.timeline__step.is-in .timeline__marker b{ color:#fff; }

.timeline__body h3{
  font-family:var(--serif); font-size:clamp(1.45rem,2.3vw,2rem);
  line-height:1.14; letter-spacing:-.028em; color:#fff; margin-bottom:.85rem;
}
.timeline__body p{ margin:0 0 1rem; font-size:1rem; line-height:1.66; color:rgba(255,255,255,.84); max-width:52ch; }
.timeline__meta{
  display:inline-block; font-size:.75rem; letter-spacing:.13em; text-transform:uppercase;
  color:rgba(255,255,255,.62); padding-top:.85rem; border-top:1px solid rgba(255,255,255,.19);
}
.timeline__media{
  margin:0; border-radius:var(--radius-lg); overflow:hidden;
  aspect-ratio:4/3; box-shadow:0 30px 60px -34px rgba(0,0,0,.9);
}
.timeline__media img{ width:100%; height:100%; object-fit:cover; }
.js .timeline__media img{ transform:scale(1.12); transition:transform 1.6s var(--ease); }
.js .timeline__step.is-in .timeline__media img{ transform:scale(1); }

.prozess__cta{
  margin-top:clamp(2.8rem,5vw,4.4rem); padding-top:clamp(2rem,3vw,2.8rem);
  border-top:1px solid rgba(255,255,255,.20);
  display:flex; align-items:center; justify-content:space-between; gap:1.6rem; flex-wrap:wrap;
}
.prozess__cta p{ margin:0; font-family:var(--serif); font-size:clamp(1.2rem,1.9vw,1.55rem); letter-spacing:-.024em; color:#fff; }

/* ============================================================
   OFF-MARKET
   ============================================================ */
.offmarket{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(1rem,1.6vw,1.4rem); align-items:stretch; }
.offmarket__media{ margin:0; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-m); min-height:100%; }
.offmarket__media img{ width:100%; height:100%; object-fit:cover; transition:transform 1.6s var(--ease); }
.offmarket:hover .offmarket__media img{ transform:scale(1.05); }
.offmarket__body{
  display:flex; flex-direction:column; justify-content:center;
  padding:clamp(1.9rem,3vw,2.8rem);
  background:var(--paper-2); border:1px solid var(--line); border-radius:var(--radius-lg);
}
.offmarket__intro{ font-size:clamp(1.02rem,1.28vw,1.12rem); line-height:1.64; color:var(--ink-4); margin-bottom:1.7rem; }

.feats{ display:grid; gap:.95rem; }
.feats li{ display:flex; gap:.95rem; align-items:flex-start; font-size:.98rem; line-height:1.58; }
.feats li::before{
  content:""; flex:none; width:20px; height:20px; margin-top:.2rem; border-radius:50%;
  background:var(--red-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E10F21' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/11px no-repeat;
}
.feats li b{ font-weight:700; }

/* ============================================================
   GUTACHTEN — gebundene Cover auf einer Bühne
   ============================================================ */
.gutachten{ display:grid; grid-template-columns:1fr; gap:clamp(1.6rem,2.6vw,2.4rem); }
.gutachten__item{
  display:grid; grid-template-columns:minmax(0,.34fr) minmax(0,1fr);
  gap:clamp(2rem,4vw,4rem); align-items:center;
  padding:clamp(2rem,3.4vw,3rem) clamp(2rem,3.4vw,3.4rem);
  background:linear-gradient(180deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,.015) 100%);
  border:1px solid rgba(255,255,255,.17); border-radius:var(--radius-lg);
  transition:border-color .5s var(--ease), background .5s var(--ease);
}
.gutachten__item:hover{ border-color:rgba(255,255,255,.2); background:rgba(255,255,255,.06); }

.book{ position:relative; perspective:1600px; padding-bottom:34px; width:100%; max-width:300px; }
.book__inner{
  position:relative; transform-style:preserve-3d;
  transform:rotateY(-17deg) rotateX(2deg);
  transition:transform .9s var(--ease);
  border-radius:2px 6px 6px 2px; overflow:hidden;
  box-shadow:
     0 2px 0 rgba(255,255,255,.20),
     18px 20px 44px -14px rgba(0,0,0,.75),
     40px 44px 70px -30px rgba(0,0,0,.6);
}
.book__inner img{ width:100%; height:auto; display:block; }
/* Buchrücken */
.book__spine{
  position:absolute; left:0; top:0; bottom:0; width:13px;
  background:linear-gradient(90deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.3) 40%, rgba(255,255,255,.16) 74%, rgba(0,0,0,.2) 100%);
}
/* angedeutete Seiten an der rechten Kante */
.book__pages{
  position:absolute; right:0; top:1.6%; bottom:1.6%; width:9px;
  background:repeating-linear-gradient(90deg,
     rgba(255,255,255,.85) 0px, rgba(255,255,255,.85) 1px,
     rgba(190,190,192,.75) 1px, rgba(190,190,192,.75) 2px);
  border-radius:0 3px 3px 0;
}
/* Lichtreflex */
.book__gloss{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(108deg, rgba(255,255,255,.3) 0%, rgba(255,255,255,.07) 25%, rgba(255,255,255,0) 46%);
}
/* Schatten auf der Standfläche */
.book__shadow{
  position:absolute; left:8%; right:4%; bottom:6px; height:26px;
  background:radial-gradient(50% 50% at 50% 50%, rgba(0,0,0,.72) 0%, rgba(0,0,0,0) 72%);
  filter:blur(3px);
}
.book:hover .book__inner{ transform:rotateY(-7deg) rotateX(0deg) translateY(-10px); }

.gutachten__kicker{ font-size:.72rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:#FF8A93; }
.gutachten__text h3{
  margin:.7rem 0 .55rem; font-family:var(--serif);
  font-size:clamp(1.5rem,2.2vw,1.95rem); letter-spacing:-.028em; line-height:1.14; color:#fff;
}
.gutachten__price{
  display:flex; align-items:baseline; gap:.5rem; margin:0 0 1.4rem;
  padding-bottom:1.2rem; border-bottom:1px solid rgba(255,255,255,.20);
  font-family:var(--serif); font-size:1.75rem; letter-spacing:-.03em; color:#fff;
}
.gutachten__price span{ font-family:var(--sans); font-size:.78rem; letter-spacing:.04em; color:rgba(255,255,255,.55); }
.gutachten__text ul{ display:grid; grid-template-columns:repeat(2,1fr); gap:.7rem 2rem; margin-bottom:1.8rem; }
.gutachten__text ul li{ display:flex; gap:.8rem; font-size:.94rem; line-height:1.55; color:rgba(255,255,255,.88); }
.gutachten__text ul li::before{ content:"—"; color:#FF8A93; flex:none; }

/* ============================================================
   FAQ
   ============================================================ */
.faq{ margin-top:clamp(2.2rem,4vw,3rem); border-top:1px solid var(--line); }
.faq__item{ border-bottom:1px solid var(--line); }
.faq__q{
  width:100%; background:none; border:0; cursor:pointer; text-align:left;
  padding:1.5rem 3rem 1.5rem 0; position:relative;
  font-family:var(--serif); font-size:clamp(1.08rem,1.5vw,1.32rem); letter-spacing:-.02em; line-height:1.35;
  transition:color .35s var(--ease);
}
.faq__q:hover{ color:var(--red); }
.faq__q::after,.faq__q::before{
  content:""; position:absolute; right:6px; top:50%; background:var(--red);
  transition:transform .45s var(--ease), opacity .35s var(--ease);
}
.faq__q::before{ width:16px; height:1.6px; transform:translateY(-50%); }
.faq__q::after{ width:1.6px; height:16px; right:13.2px; transform:translateY(-50%); }
.faq__item.is-open .faq__q::after{ transform:translateY(-50%) rotate(90deg); opacity:0; }
.faq__a{ overflow:hidden; height:0; transition:height .5s var(--ease); }
.faq__a > div{ padding:0 3rem 1.7rem 0; color:var(--muted); font-size:.98rem; max-width:82ch; }
.faq__a a{ color:var(--red); text-decoration:underline; text-underline-offset:2px; }

/* ============================================================
   KONTAKT
   ============================================================ */
.contact{ display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(2.4rem,5.5vw,5rem); align-items:start; }
.contact__info{ display:grid; gap:1.6rem; margin-top:2.4rem; }
.cinfo{ display:flex; gap:1.1rem; align-items:flex-start; }
.cinfo svg{ flex:none; width:20px; height:20px; stroke:var(--red); margin-top:.25rem; }
.cinfo span{ display:block; font-size:.72rem; font-weight:700; letter-spacing:.17em; text-transform:uppercase; color:var(--muted-2); margin-bottom:.2rem; }
.cinfo a,.cinfo p{ font-size:1.03rem; color:#fff; margin:0; transition:color .3s var(--ease); }
.cinfo a:hover{ color:var(--red); }

.form{ background:#fff; border-radius:var(--radius-lg); padding:clamp(1.8rem,3.2vw,2.8rem); box-shadow:var(--shadow-l); color:var(--ink); }
.form__grid{ display:grid; grid-template-columns:1fr 1fr; gap:1.1rem; }
.field{ display:flex; flex-direction:column; gap:.45rem; }
.field--full{ grid-column:1 / -1; }
.field label{ font-size:.74rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--muted); }
.field input,.field select,.field textarea{
  /* 16px ist Pflicht: darunter zoomen iPhone und iPad beim Antippen in das Feld
     hinein und der Nutzer landet in einer verschobenen Ansicht. */
  font:inherit; font-size:16px; color:var(--ink);
  padding:.85rem 1rem; border:1px solid var(--line-2); border-radius:var(--radius); background:var(--paper);
  transition:border-color .35s var(--ease), box-shadow .35s var(--ease); width:100%;
}
.field textarea{ resize:vertical; min-height:126px; }
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--red); box-shadow:0 0 0 3px var(--red-soft);
}
.check{ grid-column:1 / -1; display:flex; gap:.75rem; align-items:flex-start; font-size:.87rem; color:var(--muted); line-height:1.5; }
.check input{ width:18px; height:18px; margin-top:.16rem; accent-color:var(--red); flex:none; }
.check a{ color:var(--red); text-decoration:underline; text-underline-offset:2px; }
.form .btn{ margin-top:.4rem; }
.form__hint{ grid-column:1 / -1; font-size:.8rem; color:var(--muted-2); margin:0; }

.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.form__note{
  grid-column:1 / -1; display:flex; gap:.85rem; align-items:flex-start;
  padding:1.05rem 1.2rem; border-radius:var(--radius); font-size:.94rem; line-height:1.55;
  border:1px solid var(--line-2); background:var(--paper-2); color:var(--ink-4);
}
.form__note svg{ flex:none; width:20px; height:20px; margin-top:.14rem; }
.form__note--ok{ border-color:rgba(22,140,80,.32); background:rgba(22,140,80,.07); color:#166B44; }
.form__note--ok svg{ stroke:#168C50; }
.form__note--err{ border-color:var(--red-line); background:var(--red-soft); color:var(--red-deep); }
.form__note--err svg{ stroke:var(--red); }

/* ============================================================
   FOOTER
   ============================================================ */
.footer{ background:#33383E; color:rgba(255,255,255,.62); padding-top:clamp(48px,6vw,80px); }
.footer__top{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1.1fr; gap:clamp(1.8rem,4vw,3.4rem); padding-bottom:clamp(38px,5vw,58px); }
.footer__brand img{ height:64px; width:auto; margin-bottom:1.3rem; }
.footer__brand p{ font-size:.93rem; max-width:38ch; line-height:1.6; }
.footer h5{ font-size:.72rem; font-weight:700; letter-spacing:.19em; text-transform:uppercase; color:#fff; margin:0 0 1.1rem; }
.footer ul{ display:grid; gap:.65rem; }
.footer ul a{ font-size:.93rem; transition:color .3s var(--ease); }
.footer ul a:hover{ color:var(--red); }
.footer__badges{ display:flex; align-items:center; gap:1.1rem; margin-top:1.6rem; flex-wrap:wrap; }
.footer__badges img{ height:30px; width:auto; opacity:.85; }
.footer__bottom{
  border-top:1px solid rgba(255,255,255,.1); padding:22px 0 30px;
  display:flex; justify-content:space-between; gap:1.2rem; flex-wrap:wrap; font-size:.83rem;
}
.footer__bottom nav{ display:flex; gap:1.5rem; flex-wrap:wrap; }
.footer__bottom a:hover{ color:#fff; }

.totop{
  position:fixed; right:calc(var(--gutter) - 6px); bottom:26px; z-index:80;
  width:46px; height:46px; border-radius:50%; border:1px solid var(--line-2); background:#fff;
  display:grid; place-items:center; cursor:pointer; box-shadow:var(--shadow-m);
  opacity:0; visibility:hidden; transform:translateY(12px);
  transition:opacity .45s var(--ease), transform .45s var(--ease), visibility .45s, background .35s var(--ease), border-color .35s var(--ease);
}
.totop.is-on{ opacity:1; visibility:visible; transform:none; }
.totop:hover{ background:var(--red); border-color:var(--red); }
.totop svg{ width:17px; height:17px; stroke:var(--ink); transition:stroke .35s var(--ease); }
.totop:hover svg{ stroke:#fff; }

/* ============================================================
   RECHTSSEITEN
   ============================================================ */
.legal-hero{ background:var(--ink); color:#fff; padding:calc(var(--header-h) + 48px) 0 clamp(44px,6vw,74px); }
.legal-hero h1{ font-family:var(--serif); font-size:clamp(2.2rem,4.6vw,3.6rem); letter-spacing:-.032em; margin-top:1.1rem; }
.legal{ padding-block:clamp(48px,6vw,86px); }
.legal__body{ max-width:82ch; }
.legal__body h2{ font-family:var(--serif); font-size:clamp(1.4rem,2.3vw,1.9rem); letter-spacing:-.025em; margin:2.6rem 0 .9rem; padding-top:1.6rem; border-top:1px solid var(--line); }
.legal__body h2:first-child{ margin-top:0; padding-top:0; border-top:0; }
.legal__body h3{ font-size:1.1rem; font-weight:700; margin:1.9rem 0 .6rem; }
.legal__body h4{ font-size:.98rem; font-weight:700; margin:1.4rem 0 .45rem; color:var(--ink-3); }
.legal__body p{ color:var(--ink-4); font-size:1rem; }
.legal__body ul{ list-style:disc; padding-left:1.35rem; margin:0 0 1.05em; display:grid; gap:.45rem; }
.legal__body ul li{ color:var(--ink-4); font-size:1rem; }
.legal__body a{ color:var(--red); text-decoration:underline; text-underline-offset:2px; word-break:break-word; }
.legal__body strong{ color:var(--ink); }
.legal__toc{ background:var(--paper-2); border-left:3px solid var(--red); padding:1.4rem 1.6rem; border-radius:0 var(--radius-lg) var(--radius-lg) 0; margin-bottom:2.6rem; }
.legal__toc b{ display:block; font-size:.74rem; letter-spacing:.17em; text-transform:uppercase; color:var(--muted); margin-bottom:.8rem; }
.legal__toc ul{ list-style:none; padding:0; display:grid; gap:.4rem; margin:0; }
.legal__toc a{ font-size:.94rem; color:var(--ink-4); text-decoration:none; }
.legal__toc a:hover{ color:var(--red); }

/* ============================================================
   REVEAL — Inhalte sind ohne JavaScript sichtbar
   ============================================================ */
.js .reveal{ opacity:0; transform:translateY(26px); transition:opacity .9s var(--ease), transform 1s var(--ease); }
.js .reveal.is-in{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.09s; } .reveal.d2{ transition-delay:.18s; }
.reveal.d3{ transition-delay:.27s; } .reveal.d4{ transition-delay:.36s; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
  .js .reveal,.js .timeline__step{ opacity:1 !important; transform:none !important; }
  .hero__still{ animation:none; transform:scale(1.06); }
  .js .timeline__media img{ transform:none; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1240px){
  .header .btn{ padding:.85rem 1.15rem; font-size:.76rem; }
  .nav{ gap:1.2rem; }
  .nav a{ font-size:.94rem; }
}
@media (max-width:1180px){
  .footer__top{ grid-template-columns:1fr 1fr; }
  .promise__grid{ grid-template-columns:1fr; }
  .gutachten{ grid-template-columns:1fr; }
}
@media (max-width:1100px){
  .nav,.header__cta{ display:none; }
  .burger{ display:flex; }
  :root{ --header-h:116px; }
  .header__logo img{ height:96px; }
  .header.is-solid{ height:84px; }
  .header.is-solid .header__logo img{ height:64px; }
  .hero__lead{ max-width:46ch; }
  .hero{ min-height:auto; }
}
@media (max-width:1000px){
  /* Cover würde sonst auf Tabletbreite auf ~150px gequetscht */
  .gutachten__item{ grid-template-columns:1fr; gap:2rem; }
  .gutachten__text ul{ grid-template-columns:1fr; }
  .book{ width:min(250px, 100%); margin-inline:auto; }

  /* Schmale Schirme: der Verlauf läuft von oben nach unten, damit der Text auf
     hellem Grund steht und das Gebäude darunter sichtbar bleibt. */
  .hero__scrim{
    background:linear-gradient(180deg,
      rgba(255,255,255,0)   0%,
      rgba(255,255,255,.18) 16%,
      rgba(255,255,255,.80) 30%,
      rgba(255,255,255,.96) 42%,
      #FFFFFF 58%,
      #FFFFFF 100%);
  }
  .hero__still{ background-position:60% 40%; }
  .gutachten__text ul{ grid-template-columns:1fr; }
  .split{ grid-template-columns:1fr; }
  .split__sticky{ position:static; }
  .contact{ grid-template-columns:1fr; }
  .fields{ grid-template-columns:1fr; }
  .offmarket{ grid-template-columns:1fr; }
  .timeline__step{ grid-template-columns:1fr; gap:1.4rem; }
  .timeline__media{ order:-1; aspect-ratio:16/9; }
}
@media (max-width:720px){
  body{ font-size:16px; }
  :root{ --header-h:100px; }
  .header__logo img{ height:78px; }
  .header.is-solid{ height:78px; }
  .header.is-solid .header__logo img{ height:58px; }
  .form__grid{ grid-template-columns:1fr; }
  .footer__top{ grid-template-columns:1fr; }
  .gutachten__item{ grid-template-columns:1fr; gap:1.8rem; }
  .gutachten__text ul{ grid-template-columns:1fr; }
  /* definierte Breite statt max-width: mit margin-inline:auto entfällt sonst das
     Strecken im Grid und das Element fällt auf die Inhaltsbreite zurück –
     solange das Cover noch lädt, wäre das 0. */
  .book{ width:min(250px, 100%); margin-inline:auto; }
  .prozess__cta{ flex-direction:column; align-items:flex-start; }
  .timeline{ padding-left:44px; }
  .timeline__marker{ left:-44px; width:34px; height:34px; }
  .timeline__rail{ left:16px; }
  .totop{ right:16px; bottom:16px; }
}
/* Querformat auf dem Handy: flacher Bildschirm, deshalb kompakterer Hero,
   damit Überschrift und Schaltflächen ohne Scrollen sichtbar sind. */
@media (orientation:landscape) and (max-height:560px){
  :root{ --header-h:76px; }
  .header__logo img{ height:58px; }
  .header.is-solid{ height:66px; }
  .header.is-solid .header__logo img{ height:48px; }
  .hero{ min-height:auto; padding-top:calc(var(--header-h) + 14px); padding-bottom:32px; }
  .hero .display{ font-size:clamp(1.9rem,4.4vw,2.6rem); max-width:20ch; }
  .hero__lead{ margin-top:.9rem; font-size:1.02rem; max-width:52ch; }
  .hero__actions{ margin-top:1.1rem; }
  .hero__actions .btn{ padding:.8rem 1.2rem; font-size:.78rem; }
  .scroll-cue{ display:none; }
  .drawer a{ font-size:1.2rem; padding:.45rem 0; }
}

@media (max-width:480px){
  .promise__mark,.prozess__mark{ display:none; }
  .scroll-cue{ display:none; }
  .promise__card{ padding:1.7rem 1.5rem; }
}