/* ============================================================
   Maximilian Jäckel Immobilien — Klickdummy
   Design-System · Editorial / Architektur · dunkel-warm
   ============================================================ */

:root{
  /* Farbwelt */
  --ink:        #0E120F;
  --ink-2:      #151B16;
  --ink-3:      #1D251E;
  --bone:       #F5F2EB;
  --bone-2:     #EAE5DA;
  --brass:      #C08B4A;
  --brass-lt:   #DFB47B;
  --moss:       #4B6551;

  --on-dark:    rgba(245,242,235,.72);
  --on-dark-2:  rgba(245,242,235,.46);
  --line-dark:  rgba(245,242,235,.13);
  --on-light:   rgba(14,18,15,.70);
  --on-light-2: rgba(14,18,15,.46);
  --line-light: rgba(14,18,15,.13);

  /* Typo */
  --display: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --sans:    "Manrope", -apple-system, "Segoe UI", sans-serif;

  /* Maße */
  --wrap: 1240px;
  --gut: clamp(20px, 5vw, 64px);
  --sec: clamp(72px, 11vw, 148px);
  --r: 2px;

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

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

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

body{
  font-family:var(--sans);
  font-weight:400;
  font-size:clamp(1rem,.96rem + .2vw,1.075rem);
  line-height:1.68;
  color:var(--bone);
  background:var(--ink);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; }
::selection{ background:var(--brass); color:var(--ink); }

/* ---------- Grundraster ---------------------------------- */

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut); }
.wrap-wide{ width:100%; max-width:1560px; margin-inline:auto; padding-inline:var(--gut); }
.sec{ padding-block:var(--sec); position:relative; }
.sec-tight{ padding-block:clamp(52px,7vw,88px); }

.paper{ background:var(--bone); color:var(--ink); }
.paper-2{ background:var(--bone-2); color:var(--ink); }
.night{ background:var(--ink); color:var(--bone); }
.night-2{ background:var(--ink-2); color:var(--bone); }

/* ---------- Typografie ----------------------------------- */

h1,h2,h3,h4{ font-family:var(--display); font-weight:400; line-height:1.02; letter-spacing:-.015em; }

.t-xxl{ font-size:clamp(2.9rem,8.2vw,6.4rem); }
.t-xl { font-size:clamp(2.35rem,5.6vw,4.35rem); line-height:1.04; }
.t-l  { font-size:clamp(1.85rem,3.4vw,2.85rem); line-height:1.1; }
.t-m  { font-size:clamp(1.35rem,2.1vw,1.75rem); line-height:1.2; }

.it{ font-style:italic; }
.brass{ color:var(--brass); }
.paper .brass, .paper-2 .brass{ color:#9A6C31; }

.eyebrow{
  font-family:var(--sans);
  font-size:.72rem; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--brass);
  display:flex; align-items:center; gap:.85em;
}
.eyebrow::before{ content:""; width:clamp(20px,3vw,42px); height:1px; background:currentColor; opacity:.55; flex:none; }
.paper .eyebrow, .paper-2 .eyebrow{ color:#9A6C31; }

.lead{ font-size:clamp(1.1rem,1.05rem + .35vw,1.3rem); line-height:1.6; color:var(--on-dark); font-weight:300; }
.paper .lead, .paper-2 .lead{ color:var(--on-light); }

.muted{ color:var(--on-dark); }
.paper .muted, .paper-2 .muted{ color:var(--on-light); }
.muted-2{ color:var(--on-dark-2); font-size:.9rem; }
.paper .muted-2, .paper-2 .muted-2{ color:var(--on-light-2); }

.measure{ max-width:62ch; }
.measure-s{ max-width:48ch; }

/* Kapitel-Ziffer als Marginalie */
.num{
  font-family:var(--display); font-size:clamp(2.6rem,5vw,4rem);
  line-height:1; color:var(--brass); opacity:.32;
}

/* ---------- Buttons -------------------------------------- */

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.7em;
  font-family:var(--sans); font-size:.855rem; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase;
  padding:1.12em 2.1em; border-radius:var(--r);
  border:1px solid transparent; cursor:pointer;
  transition:background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease);
  white-space:nowrap;
}
.btn:active{ transform:translateY(1px); }
.btn .ar{ transition:transform .35s var(--ease); }
.btn:hover .ar{ transform:translateX(4px); }

.btn-brass{ background:var(--brass); color:#15100A; }
.btn-brass:hover{ background:var(--brass-lt); }

.btn-ghost{ border-color:var(--line-dark); color:var(--bone); }
.btn-ghost:hover{ border-color:var(--brass); color:var(--brass); }
.paper .btn-ghost, .paper-2 .btn-ghost{ border-color:var(--line-light); color:var(--ink); }
.paper .btn-ghost:hover, .paper-2 .btn-ghost:hover{ border-color:#9A6C31; color:#9A6C31; }

.btn-ink{ background:var(--ink); color:var(--bone); }
.btn-ink:hover{ background:var(--ink-3); }

.btn-full{ width:100%; }

/* Textlink mit Unterstrich-Animation */
.link{
  display:inline-flex; align-items:center; gap:.55em;
  font-size:.82rem; font-weight:600; letter-spacing:.09em; text-transform:uppercase;
  padding-bottom:.45em; border-bottom:1px solid currentColor;
  color:var(--brass); transition:gap .3s var(--ease), color .3s var(--ease);
}
.link:hover{ gap:1em; }
.paper .link, .paper-2 .link{ color:#9A6C31; }

/* ---------- Header --------------------------------------- */

.hdr{
  position:fixed; inset:0 0 auto 0; z-index:80;
  transition:background .45s var(--ease), border-color .45s var(--ease), backdrop-filter .45s var(--ease);
  border-bottom:1px solid transparent;
}
.hdr.solid{
  background:rgba(14,18,15,.9);
  backdrop-filter:blur(14px) saturate(140%);
  border-bottom-color:var(--line-dark);
}
.hdr .bar{
  display:flex; align-items:center; justify-content:space-between; gap:2rem;
  height:clamp(70px,8vw,88px);
}

.brand{ display:flex; align-items:center; gap:.85rem; flex:none; }
.brand .logo-mark{ height:34px; width:auto; flex:none; transition:opacity .3s var(--ease); }
.brand .logo-full{ height:52px; width:auto; }
.brand:hover .logo-mark{ opacity:.8; }
.brand .nm{ line-height:1.15; }
.brand .nm b{ display:block; font-family:var(--display); font-weight:400; font-size:1.12rem; letter-spacing:.005em; }
.brand .nm span{ display:block; font-size:.63rem; font-weight:600; letter-spacing:.28em; text-transform:uppercase; color:var(--on-dark-2); }

.nav{ display:flex; align-items:center; gap:clamp(1.1rem,2.4vw,2.3rem); }
.nav a{
  position:relative; font-size:.8rem; font-weight:500; letter-spacing:.1em; text-transform:uppercase;
  color:var(--on-dark); transition:color .3s var(--ease); padding-block:.4em;
}
.nav a::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:0;
  background:var(--brass); transition:width .35s var(--ease);
}
.nav a:hover{ color:var(--bone); }
.nav a:hover::after, .nav a.on::after{ width:100%; }
.nav a.on{ color:var(--brass); }

.hdr-cta{ display:flex; align-items:center; gap:1rem; flex:none; }
.hdr-cta .btn{ padding:.92em 1.5em; font-size:.76rem; }

.burger{ display:none; width:44px; height:44px; place-items:center; flex:none; }
.burger span{ display:block; width:22px; height:1.5px; background:var(--bone); position:relative; transition:background .2s; }
.burger span::before,.burger span::after{
  content:""; position:absolute; left:0; width:22px; height:1.5px; background:var(--bone);
  transition:transform .35s var(--ease), top .35s var(--ease);
}
.burger span::before{ top:-7px; } .burger span::after{ top:7px; }
.burger.x span{ background:transparent; }
.burger.x span::before{ top:0; transform:rotate(45deg); }
.burger.x span::after{ top:0; transform:rotate(-45deg); }

.drawer{
  position:fixed; inset:0; z-index:70;
  background:var(--ink);
  padding:calc(clamp(70px,8vw,88px) + 40px) var(--gut) 48px;
  display:flex; flex-direction:column; gap:.35rem;
  transform:translateY(-102%); transition:transform .55s var(--ease);
  overflow-y:auto;
}
.drawer.open{ transform:translateY(0); }
.drawer a.dl{
  font-family:var(--display); font-size:clamp(1.9rem,7vw,2.7rem);
  padding-block:.34em; border-bottom:1px solid var(--line-dark);
  display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
}
.drawer a.dl i{ font-family:var(--sans); font-style:normal; font-size:.7rem; letter-spacing:.2em; color:var(--brass); opacity:.6; }
.drawer .dfoot{ margin-top:auto; padding-top:2.5rem; display:grid; gap:1.1rem; }

/* ---------- Hero ----------------------------------------- */

.hero{ position:relative; min-height:min(94svh,860px); display:flex; align-items:flex-end; overflow:hidden; }
.hero-media{ position:absolute; inset:0; z-index:0; }
.hero-media img{ width:100%; height:100%; object-fit:cover; object-position:center 58%; }
.hero-media::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(14,18,15,.86) 0%, rgba(14,18,15,.34) 34%, rgba(14,18,15,.6) 66%, rgba(14,18,15,.97) 100%),
    linear-gradient(97deg, rgba(14,18,15,.7) 0%, rgba(14,18,15,0) 62%);
}
.hero-in{ position:relative; z-index:2; width:100%; padding-block:clamp(56px,9vw,104px); }
.hero h1{ margin-block:1.1rem .3rem; max-width:15ch; }
.hero h1 .ln{ display:block; overflow:hidden; }
.hero h1 .ln > span{ display:block; }

.hero-foot{
  margin-top:clamp(2.2rem,4vw,3.4rem);
  display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:2rem;
  padding-top:1.9rem; border-top:1px solid var(--line-dark);
}
.hero-acts{ display:flex; flex-wrap:wrap; gap:.9rem; }

/* Kennzahlen-Leiste */
.stats{ display:flex; flex-wrap:wrap; gap:clamp(1.6rem,4vw,3.4rem); }
.stat b{ display:block; font-family:var(--display); font-size:clamp(1.5rem,2.4vw,2.05rem); font-weight:400; line-height:1; }
.stat span{ display:block; margin-top:.5em; font-size:.68rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--on-dark-2); }

.img-credit{
  position:absolute; right:14px; bottom:14px; z-index:2;
  font-size:.62rem; letter-spacing:.08em; text-transform:uppercase;
  color:rgba(245,242,235,.6); background:rgba(21,16,10,.38);
  padding:.4em .85em; border-radius:var(--r);
}

/* Scroll-Hinweis */
.scroll-cue{
  position:absolute; right:var(--gut); bottom:clamp(56px,9vw,104px); z-index:3;
  writing-mode:vertical-rl; font-size:.65rem; font-weight:600; letter-spacing:.24em;
  text-transform:uppercase; color:var(--on-dark-2); display:flex; align-items:center; gap:1rem;
}
.scroll-cue::after{ content:""; width:1px; height:64px; background:linear-gradient(var(--brass),transparent); }

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

.shead{ display:grid; grid-template-columns:1fr; gap:1.15rem; margin-bottom:clamp(2.6rem,5vw,4.2rem); }
.shead.split{ grid-template-columns:1fr auto; align-items:end; }
.shead h2{ max-width:20ch; }

/* ---------- Leistungs-Reihe ------------------------------ */

.svc{ border-top:1px solid var(--line-light); }
.night .svc, .night-2 .svc{ border-color:var(--line-dark); }
.svc-row{
  display:grid; grid-template-columns:auto minmax(0,1.05fr) minmax(0,1.35fr) auto;
  gap:clamp(1.2rem,3.5vw,3rem); align-items:start;
  padding-block:clamp(2rem,3.6vw,2.9rem);
  border-bottom:1px solid var(--line-light);
  transition:padding-left .5s var(--ease), background .5s var(--ease);
}
.night .svc-row, .night-2 .svc-row{ border-color:var(--line-dark); }
.svc-row:hover{ padding-left:clamp(.5rem,1.6vw,1.5rem); }
.svc-row h3{ font-size:clamp(1.55rem,2.8vw,2.25rem); }
.svc-row .ar-c{ align-self:center; color:var(--brass); transition:transform .45s var(--ease); }
.svc-row:hover .ar-c{ transform:translateX(8px); }

/* ---------- Objektkarten --------------------------------- */

.cards{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr)); gap:clamp(1.4rem,2.6vw,2.2rem); }

.card{ display:flex; flex-direction:column; }
.card .shot{ position:relative; overflow:hidden; aspect-ratio:4/3; background:var(--ink-3); }
.card .shot img{ width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease); }
.card:hover .shot img{ transform:scale(1.055); }
.card .tag{
  position:absolute; left:14px; top:14px; z-index:2;
  background:var(--bone); color:var(--ink);
  font-size:.63rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  padding:.55em 1em; border-radius:var(--r);
}
.card .tag.sold{ background:var(--moss); color:var(--bone); }
.card .tag.new{ background:var(--brass); color:#15100A; }
.card .body{ padding-top:1.25rem; display:flex; flex-direction:column; gap:.55rem; flex:1; }
.card h3{ font-size:1.4rem; }
.card .where{ font-size:.72rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--on-dark-2); }
.paper .card .where, .paper-2 .card .where{ color:var(--on-light-2); }
.card .facts{
  margin-top:auto; padding-top:1rem; border-top:1px solid var(--line-dark);
  display:flex; flex-wrap:wrap; gap:1.1rem; font-size:.83rem; color:var(--on-dark);
}
.paper .card .facts, .paper-2 .card .facts{ border-color:var(--line-light); color:var(--on-light); }
.card .facts b{ font-weight:600; color:inherit; }

/* ---------- Ablauf-Schritte ------------------------------ */

.steps{ display:grid; gap:clamp(1.1rem,2vw,1.6rem); grid-template-columns:repeat(auto-fit,minmax(min(100%,235px),1fr)); }
.step{
  padding:clamp(1.6rem,2.6vw,2.1rem);
  border:1px solid var(--line-dark); border-radius:var(--r);
  display:flex; flex-direction:column; gap:.75rem;
  background:linear-gradient(170deg, rgba(245,242,235,.035), transparent 60%);
  transition:border-color .4s var(--ease), transform .4s var(--ease);
}
.paper .step, .paper-2 .step{ border-color:var(--line-light); background:linear-gradient(170deg,rgba(255,255,255,.7),transparent 62%); }
.step:hover{ border-color:var(--brass); transform:translateY(-4px); }
.step .k{ font-family:var(--display); font-size:1.05rem; color:var(--brass); }
.step h3{ font-size:1.28rem; }

/* ---------- Zitat / Statement ---------------------------- */

.quote{ position:relative; }
.quote blockquote{
  font-family:var(--display); font-size:clamp(1.75rem,4.2vw,3.1rem);
  line-height:1.16; letter-spacing:-.015em; max-width:19ch;
}
.quote .who{ margin-top:2rem; display:flex; align-items:center; gap:1rem; }
.quote .who img{ width:56px; height:56px; border-radius:50%; object-fit:cover; }

/* ---------- Split-Layout (Bild + Text) ------------------- */

.split{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,400px),1fr)); gap:clamp(2rem,5vw,4.5rem); align-items:center; }
.split.top{ align-items:start; }
.split .fig{ position:relative; }
.split .fig img{ width:100%; aspect-ratio:4/5; object-fit:cover; }
.split .fig.wide img{ aspect-ratio:5/4; }
.split .fig .cap{
  position:absolute; right:-1px; bottom:-1px; z-index:2;
  background:var(--ink); color:var(--bone); padding:1.1rem 1.4rem; max-width:74%;
  border-top:2px solid var(--brass);
}
.split .fig .cap b{ display:block; font-family:var(--display); font-size:1.15rem; font-weight:400; }
.split .fig .cap span{ font-size:.72rem; letter-spacing:.13em; text-transform:uppercase; color:var(--on-dark-2); }

/* ---------- Formular ------------------------------------- */

.field{ display:flex; flex-direction:column; gap:.55rem; margin-bottom:1.2rem; }
.field label{ font-size:.72rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--on-dark-2); }
.paper .field label, .paper-2 .field label{ color:var(--on-light-2); }
.field input, .field select, .field textarea{
  font-family:var(--sans); font-size:1rem; color:inherit;
  background:transparent; border:1px solid var(--line-dark); border-radius:var(--r);
  padding:1em 1.1em; width:100%;
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.paper .field input, .paper .field select, .paper .field textarea,
.paper-2 .field input, .paper-2 .field select, .paper-2 .field textarea{ border-color:var(--line-light); background:rgba(255,255,255,.55); }
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--brass); }
.field textarea{ min-height:140px; resize:vertical; }
.field select{ appearance:none; background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%); background-position:calc(100% - 22px) 50%,calc(100% - 16px) 50%; background-size:6px 6px,6px 6px; background-repeat:no-repeat; }
.field-2{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr)); gap:0 1.2rem; }

.check{ display:flex; gap:.85rem; align-items:flex-start; font-size:.86rem; line-height:1.5; color:var(--on-dark); }
.paper .check, .paper-2 .check{ color:var(--on-light); }
.check input{ width:18px; height:18px; margin-top:.25em; flex:none; accent-color:var(--brass); }

/* Auswahl-Kacheln im Funnel */
.picks{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,215px),1fr)); gap:.85rem; }
.pick{
  border:1px solid var(--line-dark); border-radius:var(--r);
  padding:1.4rem 1.1rem; text-align:left; display:flex; flex-direction:column; gap:.5rem;
  transition:border-color .3s var(--ease), background .3s var(--ease), transform .3s var(--ease);
}
.paper .pick, .paper-2 .pick{ border-color:var(--line-light); background:rgba(255,255,255,.5); }
.pick:hover{ border-color:var(--brass); transform:translateY(-3px); }
.pick.sel{ border-color:var(--brass); background:rgba(192,139,74,.12); }
.pick .ic{ color:var(--brass); }
.pick b{ font-weight:600; font-size:.98rem; }
.pick small{ font-size:.78rem; color:var(--on-dark-2); line-height:1.45; }
.paper .pick small, .paper-2 .pick small{ color:var(--on-light-2); }

/* Fortschritt */
.prog{ display:flex; align-items:center; gap:.6rem; margin-bottom:2.4rem; }
.prog .dot{ height:2px; flex:1; background:var(--line-light); position:relative; overflow:hidden; }
.night .prog .dot{ background:var(--line-dark); }
.prog .dot::after{ content:""; position:absolute; inset:0; background:var(--brass); transform:scaleX(0); transform-origin:left; transition:transform .6s var(--ease); }
.prog .dot.done::after{ transform:scaleX(1); }

.fstep{ display:none; animation:fade .5s var(--ease) both; }
.fstep.on{ display:block; }
@keyframes fade{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } }

/* ---------- Panel / Box ---------------------------------- */

.panel{
  border:1px solid var(--line-dark); border-radius:var(--r);
  padding:clamp(1.7rem,3.6vw,2.9rem);
  background:linear-gradient(165deg,rgba(245,242,235,.045),transparent 70%);
}
.paper .panel, .paper-2 .panel{ border-color:var(--line-light); background:#fff; }
.panel-brass{ border-color:rgba(192,139,74,.42); background:linear-gradient(165deg,rgba(192,139,74,.12),transparent 72%); }

.note{
  border-left:2px solid var(--brass); padding:.3rem 0 .3rem 1.2rem;
  font-size:.9rem; line-height:1.6; color:var(--on-dark);
}
.paper .note, .paper-2 .note{ color:var(--on-light); }

/* ---------- Akkordeon ------------------------------------ */

.acc{ border-top:1px solid var(--line-light); }
.night .acc{ border-color:var(--line-dark); }
.acc details{ border-bottom:1px solid var(--line-light); }
.night .acc details{ border-color:var(--line-dark); }
.acc summary{
  list-style:none; cursor:pointer; padding-block:1.5rem;
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  font-family:var(--display); font-size:clamp(1.15rem,2vw,1.45rem); line-height:1.25;
  transition:color .3s var(--ease);
}
.acc summary::-webkit-details-marker{ display:none; }
.acc summary:hover{ color:var(--brass); }
.acc summary .pm{ position:relative; width:16px; height:16px; flex:none; }
.acc summary .pm::before,.acc summary .pm::after{ content:""; position:absolute; background:var(--brass); transition:transform .4s var(--ease); }
.acc summary .pm::before{ inset:50% 0 auto 0; height:1.5px; transform:translateY(-50%); }
.acc summary .pm::after{ inset:0 50% auto 50%; width:1.5px; height:100%; transform:translateX(-50%); }
.acc details[open] summary .pm::after{ transform:translateX(-50%) scaleY(0); }
.acc .ans{ padding-bottom:1.7rem; max-width:70ch; }

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

.band{ position:relative; overflow:hidden; }
.band .bg{ position:absolute; inset:0; z-index:0; }
.band .bg img{ width:100%; height:100%; object-fit:cover; }
.band .bg::after{ content:""; position:absolute; inset:0; background:linear-gradient(100deg,rgba(14,18,15,.96) 22%,rgba(14,18,15,.72) 68%,rgba(14,18,15,.5)); }
.band .in{ position:relative; z-index:2; }

/* ---------- Footer --------------------------------------- */

.ftr{ background:var(--ink-2); border-top:1px solid var(--line-dark); padding-block:clamp(3.2rem,6vw,5rem) 0; }
.ftr-grid{
  display:grid; gap:clamp(2.2rem,4vw,3rem);
  grid-template-columns:minmax(240px,1.5fr) repeat(auto-fit,minmax(150px,1fr));
  padding-bottom:clamp(2.6rem,5vw,3.6rem);
}
.ftr h4{ font-family:var(--sans); font-size:.7rem; font-weight:700; letter-spacing:.19em; text-transform:uppercase; color:var(--on-dark-2); margin-bottom:1.25rem; }
.ftr ul{ list-style:none; display:grid; gap:.72rem; }
.ftr a{ color:var(--on-dark); font-size:.94rem; transition:color .3s var(--ease); }
.ftr a:hover{ color:var(--brass); }
.ftr-bar{
  border-top:1px solid var(--line-dark); padding-block:1.6rem;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem;
  font-size:.79rem; color:var(--on-dark-2);
}
.socials{ display:flex; gap:.6rem; }
.socials a{
  width:38px; height:38px; display:grid; place-items:center;
  border:1px solid var(--line-dark); border-radius:var(--r); color:var(--on-dark);
  transition:border-color .3s var(--ease), color .3s var(--ease), background .3s var(--ease);
}
.socials a:hover{ border-color:var(--brass); color:var(--brass); }

/* ---------- Seitenkopf (Unterseiten) --------------------- */

.phead{
  position:relative; padding-top:clamp(140px,17vw,220px); padding-bottom:clamp(52px,7vw,86px);
  border-bottom:1px solid var(--line-dark); overflow:hidden;
}
.phead.img{ border-bottom:none; }
.phead .bg{ position:absolute; inset:0; z-index:0; }
.phead .bg img{ width:100%; height:100%; object-fit:cover; }
.phead .bg::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(14,18,15,.93) 8%,rgba(14,18,15,.62) 52%,rgba(14,18,15,.92)); }
.phead .in{ position:relative; z-index:2; }
.phead h1{ max-width:17ch; margin-top:1.05rem; }
.phead .lead{ margin-top:1.5rem; }

.crumb{ font-size:.72rem; letter-spacing:.15em; text-transform:uppercase; color:var(--on-dark-2); display:flex; gap:.6em; flex-wrap:wrap; }
.crumb a:hover{ color:var(--brass); }

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

.rv{ opacity:0; transform:translateY(26px); transition:opacity .85s var(--ease), transform .85s var(--ease); }
.rv.in{ opacity:1; transform:none; }
.rv-d1{ transition-delay:.09s; } .rv-d2{ transition-delay:.18s; }
.rv-d3{ transition-delay:.27s; } .rv-d4{ transition-delay:.36s; }

/* Hero-Einlauf */
.up{ animation:up 1.05s var(--ease) both; }
.up-1{ animation-delay:.1s; } .up-2{ animation-delay:.22s; }
.up-3{ animation-delay:.34s; } .up-4{ animation-delay:.46s; } .up-5{ animation-delay:.58s; }
@keyframes up{ from{ opacity:0; transform:translateY(26px); } to{ opacity:1; transform:none; } }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-delay:0ms !important; transition-duration:.01ms !important; }
  .rv{ opacity:1; transform:none; }
}

/* ---------- Hilfsklassen --------------------------------- */

.stack{ display:grid; gap:1.35rem; }
.stack-s{ display:grid; gap:.75rem; }
.stack-l{ display:grid; gap:2.2rem; }
.row{ display:flex; flex-wrap:wrap; gap:.9rem; }
.row-b{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1.4rem; }
.hr{ height:1px; background:var(--line-dark); border:none; }
.paper .hr, .paper-2 .hr{ background:var(--line-light); }
.center{ text-align:center; }
.center .eyebrow{ justify-content:center; }
.center .measure, .center .measure-s{ margin-inline:auto; }

.tick{ list-style:none; display:grid; gap:.95rem; }
.tick li{ display:flex; gap:.9rem; align-items:flex-start; line-height:1.55; }
.tick li::before{ content:"—"; color:var(--brass); flex:none; font-weight:600; }

.pills{ display:flex; flex-wrap:wrap; gap:.5rem; }
.pill{
  font-size:.74rem; font-weight:600; letter-spacing:.09em; text-transform:uppercase;
  padding:.55em 1em; border:1px solid var(--line-dark); border-radius:999px; color:var(--on-dark);
}
.paper .pill, .paper-2 .pill{ border-color:var(--line-light); color:var(--on-light); }

/* ---------- Responsive ----------------------------------- */

@media (max-width:1020px){
  .nav{ display:none; }
  .burger{ display:grid; }
  .hdr-cta .btn{ display:none; }
  .svc-row{ grid-template-columns:auto 1fr; row-gap:.9rem; }
  .svc-row .txt{ grid-column:1/-1; }
  .svc-row .ar-c{ display:none; }
  .scroll-cue{ display:none; }
}

@media (max-width:760px){
  /* Auf schmalen Displays steht mehr Text über dem Bild — Overlay nachziehen. */
  .hero-media::after{
    background:
      linear-gradient(180deg, rgba(14,18,15,.9) 0%, rgba(14,18,15,.62) 30%, rgba(14,18,15,.78) 62%, rgba(14,18,15,.98) 100%);
  }
  .shead.split{ grid-template-columns:1fr; align-items:start; }
  .hero-foot{ flex-direction:column; align-items:flex-start; }
  .split .fig .cap{ position:static; max-width:none; }
  .ftr-grid{ grid-template-columns:1fr; }
  /* Inline grid-template-columns (fixe fr-Verhältnisse ohne min(100%,…)-Schutz)
     überschreiben sonst die responsive Basisregel von .split. */
  .split{ grid-template-columns:1fr !important; }
  /* Sehr lange Button-Texte dürfen auf schmalen Displays umbrechen statt die
     Seite in die Breite zu ziehen (white-space:nowrap gilt sonst immer). */
  .btn{ white-space:normal; text-align:center; }
}

@media (min-width:1021px){
  .drawer{ display:none; }
}

/* ---------- Cookie-Hinweis -------------------------------- */

.cookie-note{
  position:fixed; left:0; right:0; bottom:0; z-index:95;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem 1.6rem;
  padding:1.1rem clamp(20px,4vw,var(--gut));
  background:var(--ink-2); border-top:1px solid var(--line-dark);
  transform:translateY(0); transition:transform .5s var(--ease);
}
.cookie-note.hidden{ transform:translateY(120%); }
.cookie-note p{ color:var(--on-dark); font-size:.86rem; line-height:1.6; max-width:62ch; margin:0; }
.cookie-note a{ color:var(--brass); text-decoration:underline; text-underline-offset:2px; }
.cookie-note .acts{ display:flex; gap:.7rem; flex:none; }