/* =========================================================
   BRALE — Design tokens (from Figma: AnCBxXnD4Al0Kh3g1yybj0)
   ========================================================= */
:root{
  /* foundations */
  --putzweiss:#F9F7F5;
  --stahlgrau:#CFD5D4;
  --strukturgrau:#5B6765;
  --anthrazit:#151211;
  --anthrazit-soft:#1F1B1A;
  --pure-white:#FFFFFF;

  /* gruppe */
  --corten:#C95629;

  /* bau */
  --bau-sonnengelb:#F3B900;
  --bau-gold:#DDAE00;
  --bau-bernstein:#FBD663;
  --bau-card-hover:#C29800;

  /* facility */
  --facility-pfirsich:#E0936E;
  --facility-pfirsich-hell:#FBD3C3;

  /* energy */
  --energy-immergruen:#73A541;
  --energy-lebensgruen:#7EC833;
  --energy-sprossen:#A9DD76;

  /* invest */
  --invest-kapital:#016198;
  --invest-blaupause:#1882BF;
  --invest-hellblau:#6CBBE9;

  /* layout */
  --container-w:1248px;
  --side-pad:96px;
  --radius-s:2px;
  --radius-m:4px;
  --radius-l:12px;

  /* motion */
  --ease-out: cubic-bezier(.23,1,.32,1);
  --ease-in-out: cubic-bezier(.77,0,.175,1);
  --dur-fast:160ms;
  --dur-med:280ms;
  --dur-slow:600ms;
}

@media (max-width: 1024px){
  :root{ --side-pad:24px; }
}
@media (max-width: 600px){
  :root{ --side-pad:20px; }
}

/* =========================================================
   Base
   ========================================================= */
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:'Nunito Sans', sans-serif;
  background:var(--putzweiss);
  color:var(--anthrazit);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
h1,h2,h3,h4,p,ul{ margin:0; }
button{ font-family:inherit; cursor:pointer; }
a{ color:inherit; text-decoration:none; }
.container{
  max-width:var(--container-w);
  margin:0 auto;
  padding:0 var(--side-pad);
}
@media (min-width:1441px){
  .container{ padding:0; max-width:1248px; }
}

svg{ display:block; }

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

/* =========================================================
   Scroll-reveal utility (JS toggles .is-visible)
   ========================================================= */
[data-reveal]{ opacity:0; will-change:transform,opacity; transition:opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
[data-reveal="fade-up"]{ transform:translateY(28px); }
[data-reveal="slide-left"]{ transform:translateX(-56px); }
[data-reveal="slide-right"]{ transform:translateX(56px); }
[data-reveal="expand"]{ transition:clip-path 900ms var(--ease-in-out); }
[data-reveal].is-visible{ opacity:1; transform:none; }

/* =========================================================
   Word rotator (S2 headline)
   ========================================================= */
.word-rotator{ display:inline-block; }
.word-rotator__word{
  display:inline-block;
  transition:opacity 360ms var(--ease-out), transform 360ms var(--ease-out), filter 360ms var(--ease-out);
}
.word-rotator__word.is-swapping{
  opacity:0;
  transform:translateY(8px);
  filter:blur(4px);
}

/* =========================================================
   Icon buttons: 4-state CTA (default / hover / pressed / sent)
   ========================================================= */
.brale-btn{
  --accent: var(--dept-accent, var(--invest-kapital));
  --fg: var(--dept-accent-fg, var(--putzweiss));
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:48px;
  padding:0 24px;
  border:2px solid var(--accent);
  border-radius:var(--radius-s);
  background:var(--accent);
  color:var(--fg);
  font-weight:700;
  font-size:12px;
  letter-spacing:.06em;
  text-transform:uppercase;
  transition:background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out),
             box-shadow var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out),
             filter var(--dur-fast) var(--ease-out);
  white-space:nowrap;
}
.brale-btn:hover{ box-shadow:0 8px 12px rgba(21,18,17,.2); filter:brightness(1.05); }
.brale-btn:active,
.brale-btn.is-pressed{ transform:scale(.97); filter:brightness(.78); box-shadow:none; }
.brale-btn.is-sent{
  background:var(--pure-white);
  border-color:var(--pure-white);
  color:var(--accent);
  transform:scale(1);
  filter:none;
}

/* Ghost/secondary buttons: text color follows the SURFACE they sit on,
   not the department accent contrast (see point 9 — this was inverted before). */
.brale-btn--ghost{
  background:transparent;
  color:var(--surface-fg, var(--fg));
}
.brale-btn--ghost:hover{ background:rgba(255,255,255,.12); filter:none; box-shadow:0 8px 12px rgba(21,18,17,.2); }
.brale-btn--ghost.is-pressed{ background:var(--accent); color:var(--fg); filter:none; transform:scale(.97); }
.brale-btn--ghost.is-sent{ background:var(--pure-white); border-color:var(--pure-white); color:var(--accent); }

.brale-btn--sm{ height:44px; font-size:11px; }

.dept__ctas{ display:flex; flex-wrap:wrap; gap:16px; }

@media (max-width:700px){
  .brale-btn{ width:100%; }
}

/* Nav ghost cta */
.btn-ghost-nav{
  display:inline-flex; align-items:center; justify-content:center;
  height:32px; padding:0 20px;
  border:2px solid var(--corten);
  color:var(--putzweiss);
  font-weight:800; font-size:10px; letter-spacing:.12em;
  border-radius:var(--radius-s);
  transition:background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.btn-ghost-nav:hover{ background:var(--corten); color:var(--putzweiss); }
.btn-ghost-nav:active{ transform:scale(.95); }

/* =========================================================
   NAV
   ========================================================= */
.nav{
  position:fixed; top:28px; left:96px; right:96px; z-index:1000;
  border-radius:var(--radius-l);
  background:rgba(31,27,26,.85);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  transition:top .3s var(--ease-out), left .3s var(--ease-out), right .3s var(--ease-out), background .3s;
}
.nav.is-scrolled{ top:16px; }
.nav__inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 24px;
}
.nav__logo{ display:inline-flex; align-items:center; padding:6px 4px; }
.nav__logo img{ height:36px; width:auto; }
.nav__menu{ display:flex; align-items:baseline; gap:28px; }
.nav__menu a{
  color:var(--putzweiss); font-weight:800; font-size:10px; letter-spacing:.12em; text-transform:uppercase;
  transition:color var(--dur-fast) var(--ease-out), opacity var(--dur-fast);
  opacity:.9;
}
/* Each link hovers to its own department accent: BAUEN / SANIEREN / INVESTIEREN / VERWALTEN */
.nav__menu a:nth-child(1):hover, .nav__mobile a:nth-child(1):hover{ color:var(--bau-sonnengelb); opacity:1; }
.nav__menu a:nth-child(2):hover, .nav__mobile a:nth-child(2):hover{ color:var(--energy-immergruen); opacity:1; }
.nav__menu a:nth-child(3):hover, .nav__mobile a:nth-child(3):hover{ color:var(--invest-hellblau); opacity:1; }
.nav__menu a:nth-child(4):hover, .nav__mobile a:nth-child(4):hover{ color:var(--facility-pfirsich); opacity:1; }
.nav__burger{ display:none; background:none; border:none; color:var(--putzweiss); padding:6px; }
/* Overlay + fade instead of a height-based reveal: the dropdown sits
   absolutely positioned below the pill at its full natural height at
   all times, so nothing is ever clipping-in mid-transition — it just
   fades and slides as one complete unit, and the pill's own height
   never changes when opening/closing. */
.nav__mobile{
  position:absolute; top:100%; left:0; right:0; margin-top:8px;
  background:rgba(31,27,26,.97);
  border-radius:var(--radius-l);
  padding:8px 24px 20px;
  opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:opacity .25s var(--ease-out), transform .25s var(--ease-out), visibility 0s .25s;
  pointer-events:none;
}
.nav__mobile.is-open{
  opacity:1; visibility:visible; transform:translateY(0);
  transition:opacity .25s var(--ease-out), transform .25s var(--ease-out), visibility 0s;
  pointer-events:auto;
}
.nav__mobile-inner{ display:flex; flex-direction:column; gap:4px; }
.nav__mobile a{
  color:var(--putzweiss); font-weight:800; font-size:12px; letter-spacing:.1em;
  padding:12px 4px; border-top:1px solid rgba(255,255,255,.1);
  transition:color var(--dur-fast) var(--ease-out);
}
.nav__mobile a:first-child{ border-top:none; }
.btn-ghost-nav--mobile{
  margin-top:28px; width:100%; height:44px;
  background:var(--corten); border-color:var(--corten); color:var(--putzweiss);
}

@media (max-width:1024px){
  .nav{ left:16px; right:16px; top:16px; }
  .nav__inner{ padding:9px 32px; }
  .nav__menu{ display:none; }
  .nav__inner > .btn-ghost-nav{ display:none; }
  .nav__burger{ display:inline-flex; }
  .nav__logo img{ height:18px; }
}

/* =========================================================
   01 HERO
   ========================================================= */
.hero{ position:relative; min-height:100dvh; display:flex; align-items:flex-end; overflow:hidden; }
.hero__bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero__scrim{
  position:absolute; inset:0;
  background:linear-gradient(to bottom, rgba(21,18,17,0) 0%, rgba(21,18,17,.45) 55%, rgba(21,18,17,.9) 100%);
}
.hero__content{
  position:relative; z-index:2; width:100%;
  display:flex; flex-direction:column; align-items:center; gap:48px;
  padding:64px var(--side-pad) 64px;
}
.hero__headline-wrap{ display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; }
.hero__headline{
  font-family:'Nunito Sans';
  font-weight:900;
  font-size:clamp(40px, 6.6vw, 96px);
  line-height:.95;
  letter-spacing:.02em;
  color:#cfd5d4;
  mix-blend-mode:exclusion;
  margin:0;
}
.hero__sub{ color:var(--putzweiss); font-size:clamp(15px,2vw,24px); font-weight:300; }
.hero__sub strong{ font-weight:600; }
.hero__badges{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:clamp(20px,4vw,64px); }
.hero__badges img{ height:clamp(34px,5vw,52px); width:auto; filter:brightness(0) invert(1); opacity:.95; }

@media (max-width:600px){
  .hero__content{ gap:28px; padding:32px 20px 40px; }
  .hero__badges{ gap:16px 24px; }
}

/* =========================================================
   02 GRUPPE
   ========================================================= */
.gruppe{ padding:96px 0 64px; background:var(--putzweiss); }
.gruppe__title{
  font-size:clamp(30px,4.4vw,48px); font-weight:600; line-height:1.1; letter-spacing:-.03em;
  margin-bottom:64px;
}
.gruppe__title strong{ font-weight:800; }
.gruppe__row{ display:flex; justify-content:space-between; gap:64px; margin-bottom:64px; }
.gruppe__media{ width:58%; max-width:720px; }
.gruppe__img-frame{ aspect-ratio:775/542; overflow:hidden; border-radius:var(--radius-m); }
.gruppe__img-frame img{ width:100%; height:100%; object-fit:cover; }
.gruppe__caption{ margin-top:24px; }
.gruppe__caption-name{ font-weight:700; font-size:16px; }
.gruppe__caption-role{ color:var(--strukturgrau); font-size:14px; margin-top:4px; }
.gruppe__text{ width:34%; max-width:420px; color:var(--strukturgrau); font-size:18px; line-height:1.4; display:flex; flex-direction:column; gap:16px; align-self:flex-start; }

@media (max-width:900px){
  .gruppe__row{ flex-direction:column; }
  .gruppe__media, .gruppe__text{ width:100%; max-width:none; }
}

.kennzahlen{ display:flex; flex-direction:column; gap:64px; }
.kennzahlen__stats{ display:flex; gap:8px; }
.stat{ background:var(--corten); color:var(--putzweiss); padding:24px; flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.stat--wide{ flex:1.3; }
.stat__num{ font-weight:900; font-size:clamp(34px,6vw,96px); line-height:.95; letter-spacing:.02em; }
.stat__label{ font-size:clamp(11px,1.4vw,16px); margin-top:4px; }

@media (max-width:700px){
  .kennzahlen__stats{ flex-wrap:wrap; }
  .stat{ min-width:44%; }
}

.partners{ display:flex; align-items:center; gap:48px; }
.partners__label{ font-weight:800; font-size:12px; text-transform:uppercase; color:var(--anthrazit); flex-shrink:0; line-height:1.4; }
/* min-width:0 is critical: without it this flex child's intrinsic content
   width (the un-clipped marquee track) blows out to ~2900px and overflows
   the whole document horizontally once .partners switches to a column
   layout on mobile — which is also why the mobile nav and Immobilienzyklus
   tap targets broke (see points 2 & 5). */
.partners__viewport{ flex:1; min-width:0; width:100%; overflow:hidden; position:relative; -webkit-mask-image:linear-gradient(to right, transparent, black 4%, black 96%, transparent); mask-image:linear-gradient(to right, transparent, black 4%, black 96%, transparent); }
.partners__track{ display:flex; align-items:center; gap:80px; width:max-content; animation:marquee 32s linear infinite; }
.partners__track img{ height:40px; width:auto; max-height:48px; object-fit:contain; opacity:.85; filter:grayscale(1); transition:opacity .3s, filter .3s; }
.partners__track img:hover{ opacity:1; filter:none; }
@keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

@media (max-width:700px){
  .partners{ flex-direction:column; align-items:flex-start; gap:20px; }
}

/* =========================================================
   03 MARKENSTATEMENT
   ========================================================= */
.marken{ position:relative; min-height:100vh; display:flex; align-items:flex-end; justify-content:center; overflow:hidden; padding:96px var(--side-pad); }
.marken__parallax{ position:absolute; inset:-15% 0; overflow:hidden; z-index:0; }
.marken__parallax img{ width:100%; height:130%; object-fit:cover; will-change:transform; }
.marken__scrim{ position:absolute; inset:0; background:linear-gradient(179deg, rgba(255,255,255,0) 44%, rgba(31,27,26,.1) 58%, rgba(31,27,26,.41) 73%, rgb(21,18,17) 95%); }
.marken__text{ position:relative; z-index:2; text-align:center; color:var(--putzweiss); display:flex; flex-direction:column; gap:4px; }
.marken__row{ font-size:clamp(24px,4.4vw,48px); font-weight:400; line-height:1.1; letter-spacing:-.03em; }
.marken__row strong{ font-weight:600; }

/* =========================================================
   04 IMMOBILIENZYKLUS
   ========================================================= */
.zyklus{ position:relative; padding:96px var(--side-pad); background:linear-gradient(-1deg, #5b6765 1%, #151211 93%); overflow:hidden; color:var(--putzweiss); }
.zyklus__bg-vector{ position:absolute; inset:0; background:radial-gradient(120% 100% at 80% 10%, rgba(255,255,255,.06), transparent 60%); mix-blend-mode:difference; pointer-events:none; }
.zyklus__inner{ display:flex; gap:64px; align-items:center; position:relative; z-index:1; }
.zyklus__copy{ flex:1; min-width:0; max-width:468px; display:flex; flex-direction:column; gap:32px; }
.zyklus__copy h2{ font-size:clamp(28px,4vw,48px); font-weight:400; line-height:1.1; letter-spacing:-.03em; }
.zyklus__copy h2 strong{ font-weight:800; }
.zyklus__copy p{ font-size:18px; line-height:1.4; }
.zyklus__cards{ display:grid; grid-template-columns:1fr 1fr; gap:24px; width:min(615px,100%); flex-shrink:0; }
.zyklus-card{
  --icon-tint: var(--stahlgrau);
  aspect-ratio:1; border:4px solid var(--stahlgrau); border-radius:var(--radius-m);
  background:transparent; color:var(--putzweiss);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px;
  padding:32px 24px; text-align:center;
  font-weight:800; font-size:12px; text-transform:uppercase;
  transition:background var(--dur-med) var(--ease-out), border-color var(--dur-med), transform var(--dur-fast);
}
.zyklus-card:nth-child(odd){ border-color:var(--stahlgrau); }
.zyklus-card:nth-child(even){ border-color:var(--putzweiss); }
.zyklus-card__icon{ width:56%; max-width:120px; filter:brightness(0) invert(1); opacity:.65; transition:opacity var(--dur-med), filter var(--dur-med); }
.zyklus-card:hover{ background:var(--zc-accent); border-color:var(--zc-accent); }
.zyklus-card:hover .zyklus-card__icon{ opacity:1; }
.zyklus-card:active{ transform:scale(.96); }

@media (max-width:900px){
  .zyklus__inner{ flex-direction:column; }
  .zyklus__cards{ width:100%; }
}
@media (max-width:520px){
  .zyklus__cards{ gap:12px; }
  .zyklus-card{ padding:16px 12px; font-size:10px; gap:8px; }
}

/* =========================================================
   05-08 DEPARTMENT STICKY STACK (desktop only — see the mobile
   media query below for the standard-scroll fallback used there)
   Designer annotation (found on the Figma frames):
   "STICKY STACK 1/4. Pins at top. Outgoing: scale 1>0.96,
   scroll-linked, transform only. Incoming panel translates
   over it. Content reveals once on pin."
   Each .dept sticks to the top of the viewport and is covered
   by the next one scrolling up over it (increasing z-index).
   JS (main.js) drives a scroll-end snap so a card always settles
   fully in view rather than stopping mid-transition.
   ========================================================= */
.dept-stack{ position:relative; }
.dept{
  position:sticky; top:0;
  display:flex; height:100vh; min-height:640px;
  background:var(--anthrazit);
}
.dept--reverse{ flex-direction:row-reverse; }
#bau{ z-index:1; }
#facility{ z-index:2; }
#energy{ z-index:3; }
#invest{ z-index:4; }

.dept__col{ width:50%; min-width:0; }
.dept__col--media{ position:relative; overflow:hidden; }
.dept__col--media img{ width:100%; height:100%; object-fit:cover; position:absolute; inset:0; }
.dept__col--text{
  padding:calc(96px + 12px) var(--side-pad) 96px;
  display:flex; flex-direction:column; justify-content:center;
  color:var(--putzweiss);
  --surface-fg: var(--putzweiss);
}
.dept__text-content{ display:flex; flex-direction:column; gap:32px; }
.dept__logo{ height:76px; width:auto; align-self:flex-start; flex-shrink:0; margin-bottom:8px; }
.dept__col--text h3{ font-size:clamp(28px,4vw,48px); font-weight:600; line-height:1.1; letter-spacing:-.03em; }
.dept__col--text p{ font-size:18px; line-height:1.4; color:var(--stahlgrau); max-width:60ch; }
.dept__facts{ list-style:none; padding:0; display:flex; flex-wrap:wrap; gap:8px 24px; }
.dept__facts li{ display:flex; align-items:center; gap:8px; font-size:14px; color:var(--putzweiss); }
.dept__fact-icon{ width:16px; height:16px; flex-shrink:0; color:var(--dept-accent); }
.dept-br{ display:inline; }

@media (max-width:900px){
  /* Standard scroll fallback. The sticky-pin + scroll-linked reveal (a
     fixed-height clipped text window that translates open in step with
     the outer scroll) still left content unreachable on the shortest
     phones (iPhone mini/SE) — a scroll gesture small enough to nudge the
     reveal could still be read as "enough to advance to the next card",
     so the two behaviors raced each other. Simplest reliable fix: don't
     pin or clip anything on mobile. Cards flow in normal document order
     at their natural height and the page scrolls through them exactly
     like every other section — a single scroll container, nothing to
     race. Desktop keeps the sticky-stack + reveal mechanism unchanged. */
  .dept, .dept--reverse{ position:static; flex-direction:column; height:auto; min-height:0; }
  .dept__col{ width:100%; }
  .dept__col--media{ order:1; flex:none; aspect-ratio:4/3; }
  .dept__col--text{ order:2; padding:48px var(--side-pad); max-height:none; overflow:visible; justify-content:flex-start; }
  .dept__text-content{ gap:24px; }
  .dept__logo{ height:52px; margin-bottom:20px; }
  .dept__col--text h3{ font-size:26px; }
  .dept__col--text p{ font-size:14px; }
  .dept__facts{ gap:6px 16px; }
}

/* =========================================================
   09 AKTUELLE PROJEKTE
   ========================================================= */
.projekte{ padding:96px 0 48px; background:var(--putzweiss); overflow:hidden; }
.projekte__head{ display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; margin-bottom:48px; }
.eyebrow{ font-weight:800; font-size:12px; text-transform:uppercase; color:var(--invest-kapital); }
.projekte__head h2{ font-size:clamp(30px,4.4vw,48px); font-weight:900; letter-spacing:-.03em; }

.projekte__pagination{ margin-bottom:24px; }
.projekte__pagination-track{ height:4px; border-radius:2px; background:rgba(207,213,212,.6); overflow:hidden; }
.projekte__pagination-progress{ height:100%; width:20%; background:var(--invest-blaupause); border-radius:2px; transition:width .1s linear; }

.projekte__scroller{ overflow-x:auto; scroll-snap-type:x proximity; scroll-padding-left:var(--side-pad); -webkit-overflow-scrolling:touch; cursor:grab; scrollbar-width:none; }
.projekte__scroller::-webkit-scrollbar{ display:none; }
.projekte__scroller.is-dragging{ cursor:grabbing; scroll-snap-type:none; }
.projekte__track{ display:flex; align-items:flex-start; gap:24px; padding:0 var(--side-pad); width:max-content; }

.proj-card{
  --surface-fg: var(--anthrazit);
  position:relative; width:440px; flex-shrink:0; scroll-snap-align:start;
  border-radius:var(--radius-m); overflow:hidden; background:var(--putzweiss);
  display:flex; flex-direction:column;
}
.proj-card__media{ height:395px; overflow:hidden; transition:height var(--dur-slow) var(--ease-in-out); }
.proj-card__media img{ width:100%; height:100%; object-fit:cover; }
.proj-card__body{ padding:40px 80px; text-align:center; display:flex; flex-direction:column; gap:16px; flex:1; }
.proj-card__body h3{ font-size:24px; font-weight:800; }
.proj-card__facts{ display:flex; flex-wrap:wrap; gap:8px 16px; justify-content:center; }
.proj-card__facts span{ display:inline-flex; align-items:center; gap:4px; font-size:12px; font-weight:800; color:var(--invest-kapital); white-space:nowrap; }
.proj-card__facts img{ width:16px; height:16px; }
.proj-card__hidden{
  display:grid; grid-template-rows:0fr; opacity:0;
  transition:grid-template-rows var(--dur-slow) var(--ease-in-out), opacity var(--dur-med) var(--ease-out);
}
.proj-card__hidden > *{ overflow:hidden; min-height:0; }
.proj-card__hidden p{ font-size:12px; line-height:1.4; color:var(--strukturgrau); margin-bottom:16px; }
.proj-card__toggle{ position:absolute; inset:0; background:none; border:none; z-index:1; }
.proj-card__toggle{ display:none; }

@media (hover:hover) and (pointer:fine){
  .proj-card:hover .proj-card__media{ height:205px; }
  .proj-card:hover .proj-card__hidden{ grid-template-rows:1fr; opacity:1; }
}
.proj-card.is-open .proj-card__media{ height:205px; }
.proj-card.is-open .proj-card__hidden{ grid-template-rows:1fr; opacity:1; }
@media (hover:none){
  .proj-card__toggle{ display:block; }
  .proj-card__body{ pointer-events:none; }
  /* The toggle overlay is absolutely positioned with z-index:1 and comes
     after the body in source order, so it paints ON TOP of the CTA inside
     the card. pointer-events:auto alone only lets the button receive
     events — it does not lift it out from under the overlay, so every tap
     on "DOWNLOAD EXPOSÉ" hit the overlay and merely collapsed the card.
     Giving the button its own stacking context above the overlay is what
     actually makes it tappable on touch devices. */
  .proj-card__body .brale-btn{ pointer-events:auto; position:relative; z-index:2; }
}

/* Desktop: pagination bar removed (mobile keeps it, see below) */
@media (min-width:901px){
  .projekte__pagination{ display:none; }
}

@media (max-width:900px){
  .projekte{ padding:56px 0 32px; }
  .projekte__head{ margin-bottom:28px; }
  .projekte__track{ padding-left:20px; padding-right:20px; }
}
@media (max-width:600px){
  .proj-card{ width:82vw; box-shadow:none; }
  .proj-card__body{ padding:28px 24px; }
}

/* =========================================================
   10 BANNER
   ========================================================= */
.banner{ padding:48px var(--side-pad); background:var(--putzweiss); }
.banner__expand{
  position:relative; border-radius:var(--radius-m); overflow:hidden;
  min-height:700px; display:flex; align-items:flex-end; justify-content:center;
  clip-path:inset(0 18% 0 18%);
}
.banner__expand.is-visible{ clip-path:inset(0 0 0 0); }
.banner__bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.banner__scrim{ position:absolute; inset:0; background:linear-gradient(to bottom, rgba(255,255,255,0) 42%, rgba(31,27,26,.41) 66%, rgba(21,18,17,.75) 90%); }
.banner__content{
  --dept-accent-fg:#F9F7F5;
  --surface-fg:#F9F7F5;
  position:relative; z-index:1; width:100%; padding:64px;
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:24px;
  color:var(--putzweiss);
}
.banner__content h2{ font-size:clamp(32px,5.4vw,64px); font-weight:800; letter-spacing:-.03em; line-height:1.1; }
.banner__row{ display:flex; gap:24px; align-items:center; justify-content:center; flex-wrap:wrap; }
.banner__meta{ display:flex; flex-direction:column; gap:8px; align-items:flex-start; text-align:left; }
.banner__meta p{ display:flex; align-items:center; gap:8px; font-weight:800; font-size:18px; white-space:nowrap; }
.banner__meta img{ width:24px; height:24px; filter:brightness(0) invert(1); }

@media (max-width:700px){
  .banner{ padding:0; }
  .banner__expand{
    border-radius:0; min-height:460px; clip-path:none;
    opacity:0; transform:scale(.97);
    transition:opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
  }
  .banner__expand.is-visible{ opacity:1; transform:scale(1); }
  .banner__content{ align-items:flex-start; text-align:left; padding:28px 20px; height:100%; }
  .banner__content h2{ font-size:clamp(24px,7.5vw,32px); font-weight:700; }
  .banner__row{ flex-direction:column; align-items:stretch; flex:1; justify-content:space-between; width:100%; gap:16px; }
  .banner__meta{ order:1; gap:6px; }
  .banner__meta p{ font-size:12px; font-weight:600; white-space:normal; }
  .banner__meta img{ width:18px; height:18px; }
  .banner__cta{ order:2; }
}

/* =========================================================
   11 KONTAKT
   ========================================================= */
.kontakt{ padding:64px var(--side-pad) 128px; background:linear-gradient(to bottom, rgba(249,247,245,0) 21%, var(--corten) 100%); }
.kontakt__grid{ display:flex; justify-content:space-between; gap:64px; padding:0; }
.kontakt__lead{ width:571px; max-width:47%; display:flex; flex-direction:column; gap:48px; }
.kontakt__lead h2{ font-size:clamp(32px,4.4vw,48px); font-weight:600; letter-spacing:-.03em; line-height:1.1; }
.kontakt__lead h2 strong{ font-weight:800; }
.kontakt__sub{ color:var(--strukturgrau); font-size:18px; line-height:1.4; margin-top:24px; }

.kontakt__card{ background:var(--pure-white); border-radius:var(--radius-m); padding:24px; display:flex; flex-direction:column; gap:20px; }
.kontakt__card-eyebrow{ color:var(--corten); font-weight:800; font-size:18px; }
.kontakt__portrait{ border-radius:var(--radius-m); overflow:hidden; aspect-ratio:523/554; }
.kontakt__portrait img{ width:100%; height:100%; object-fit:cover; }
.kontakt__person{ padding:8px; display:flex; flex-direction:column; }
.kontakt__person-info{ display:flex; gap:16px; align-items:flex-end; flex-wrap:wrap; }
.kontakt__person-name{ font-weight:800; font-size:18px; }
.kontakt__person-role{ color:var(--strukturgrau); font-weight:700; font-size:16px; margin-top:4px; }
.kontakt__person-contact{ display:flex; flex-direction:column; gap:8px; margin-top:16px; }
.kontakt__person-contact p{ display:flex; align-items:center; gap:8px; font-size:14px; color:var(--anthrazit-soft); }
.kontakt__person-contact svg{ opacity:.6; }
.kontakt__person-desc{ flex:1; min-width:180px; font-size:12px; color:var(--strukturgrau); line-height:1.4; margin-top:16px; }

.kontakt__form-wrap{ width:560px; max-width:53%; }
.kontakt__form-card{
  background:var(--putzweiss); border-radius:var(--radius-m); padding:48px;
  box-shadow:0 12px 32px rgba(20,31,13,.12); min-height:400px;
}

@media (max-width:900px){
  .kontakt{ padding:32px var(--side-pad) 56px; }
  .kontakt__grid{ flex-direction:column; gap:40px; }
  .kontakt__lead, .kontakt__form-wrap{ width:100%; max-width:none; }
  .kontakt__lead{ gap:32px; }
  .kontakt__form-card{ padding:24px; }
}

/* =========================================================
   FOOTER
   ========================================================= */
.footer{ background:var(--anthrazit); color:var(--putzweiss); padding:96px 0 0; overflow:hidden; }
.footer__top{ display:flex; gap:64px; padding-bottom:64px; flex-wrap:wrap; }
.footer__brand{ opacity:.85; }
.footer__brand--mobile{ display:none; }
.footer__cols{ display:flex; gap:64px; flex:1; flex-wrap:wrap; }
.footer__col{ font-size:12px; line-height:1.4; display:flex; flex-direction:column; gap:5px; }
.footer__col-title{ font-weight:800; text-transform:uppercase; opacity:.4; margin-bottom:8px; }
.footer__col p{ opacity:.7; }
.footer__address{ margin-top:8px; }
.footer__social{ display:flex; gap:5px; margin-bottom:8px; }
.footer__social img{ width:32px; height:32px; opacity:.8; transition:opacity .2s; }
.footer__social a:hover img{ opacity:1; }
.footer__divider{ width:33px; height:1px; background:var(--stahlgrau); margin:8px 0; }

.footer__brand-claim{ display:flex; flex-direction:column; }
.footer__claim-graphic{ display:none; }
.footer__slogan{ color:var(--corten); font-weight:900; font-size:clamp(40px,7vw,96px); letter-spacing:.02em; line-height:.95; margin-bottom:16px; }
.footer__slogan-sub{ color:var(--stahlgrau); font-size:clamp(15px,2vw,24px); font-weight:300; padding-bottom:16px; }
.footer__slogan-sub strong{ font-weight:600; }
.footer__iso--claim{ display:none; }

.footer__legal{ padding-top:0; padding-bottom:32px; margin-top:32px; }
.footer__legal-rule{ height:1px; background:rgba(207,213,212,.32); margin-bottom:17px; }
.footer__legal-row{ display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-family:'Cairo',sans-serif; font-size:12px; font-weight:600; opacity:.32; }
.footer__legal-links{ display:flex; gap:16px; }
.footer__legal-links a:hover{ opacity:.7; text-decoration:underline; }
.footer__legal-row--mobile{ display:none; flex-direction:column; gap:8px; }
.footer__legal-line-mobile a:hover{ text-decoration:underline; }

@media (max-width:700px){
  .footer{ padding-top:56px; }
  .footer__top{ flex-direction:column; gap:28px; padding-bottom:40px; }
  .footer__brand--desktop{ display:none; }
  .footer__brand--mobile{ display:block; margin-bottom:8px; opacity:.85; }
  .footer__cols{ flex-wrap:nowrap; gap:24px; justify-content:space-between; }
  .footer__col--social{ align-items:flex-end; text-align:right; }
  .footer__col--social .footer__social{ justify-content:flex-end; }

  .footer__claim-graphic{ display:block; width:100%; height:auto; }
  .footer__slogan-live{ display:none; }

  .footer__iso--top{ display:none; }
  .footer__iso--claim{
    display:flex; justify-content:center; gap:16px;
    margin-top:16px; font-size:12px; font-weight:600; opacity:.5;
  }

  .footer__legal-row--desktop{ display:none; }
  .footer__legal-row--mobile{ display:flex; }
}

/* =========================================================
   PDF DOWNLOAD MODAL (point 12)
   ========================================================= */
.pdf-modal{
  position:fixed; inset:0; z-index:2000;
  display:flex; align-items:center; justify-content:center;
  padding:24px;
  visibility:hidden; opacity:0;
  transition:opacity var(--dur-med) var(--ease-out), visibility var(--dur-med);
}
.pdf-modal.is-open{ visibility:visible; opacity:1; }
.pdf-modal__backdrop{ position:absolute; inset:0; background:rgba(21,18,17,.72); backdrop-filter:blur(4px); }
.pdf-modal__panel{
  position:relative; z-index:1; width:min(560px,100%); max-height:88vh; overflow-y:auto;
  background:var(--putzweiss); border-radius:var(--radius-m);
  padding:48px; box-shadow:0 24px 64px rgba(21,18,17,.35);
  transform:scale(.96); opacity:0;
  transition:transform var(--dur-med) var(--ease-out), opacity var(--dur-med) var(--ease-out);
}
.pdf-modal.is-open .pdf-modal__panel{ transform:scale(1); opacity:1; }
.pdf-modal__close{
  position:absolute; top:16px; right:16px; z-index:2;
  width:36px; height:36px; display:flex; align-items:center; justify-content:center;
  background:transparent; border:none; border-radius:50%; color:var(--anthrazit);
  transition:background var(--dur-fast) var(--ease-out);
}
.pdf-modal__close:hover{ background:rgba(21,18,17,.08); }
.pdf-modal__title{ font-size:24px; font-weight:800; letter-spacing:-.01em; margin-bottom:8px; color:var(--anthrazit); }
.pdf-modal__hint{ font-size:14px; color:var(--strukturgrau); line-height:1.4; margin-bottom:24px; }

@media (max-width:600px){
  .pdf-modal{ padding:0; align-items:flex-end; }
  .pdf-modal__panel{ width:100%; max-height:92vh; border-radius:var(--radius-m) var(--radius-m) 0 0; padding:28px 20px; }
}