/* ==========================================================================
   Ingenieurbüro Leupold — dark editorial design system
   Manrope display (uppercase) · Inter text · image grid · pill buttons · hairlines
   Minimum rendered text size: 15px
   ========================================================================== */

/* --- Fonts ---------------------------------------------------------------- */
@font-face {
  font-family: 'Manrope';
  src: url('../fonts/manrope-var.woff2') format('woff2');
  font-weight: 300 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* --- Tokens --------------------------------------------------------------- */
:root {
  --dark:      #16181B;            /* page background            */
  --dark-2:    #1B1E22;            /* raised panels              */
  --card:      #23262B;            /* contact card               */
  --cream:     #FFFFFF;            /* heller Header oben, helle Pills */
  --ink:       #141518;            /* text on cream              */
  --white:     #F4F3EF;            /* headings on dark           */
  --mut:       #A9ADB2;            /* body copy on dark          */
  --faint:     #6E7378;            /* labels, ghost text on dark */
  --hair:      rgba(244, 243, 239, .16);
  --hair-soft: rgba(244, 243, 239, .09);
  --hair-ink:  rgba(20, 21, 24, .18);
  --hair-strong: rgba(244, 243, 239, .3);  /* Maßlinien, Passermarken     */

  --display: 'Manrope', 'Helvetica Neue', Arial, sans-serif;
  --sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  /* type scale — floor is 15px */
  --fs-word:  clamp(4.5rem, 17vw, 16rem);      /* hero wordmark            */
  --fs-giant: clamp(2.25rem, 5.4vw, 4.75rem);       /* section display headings */
  --fs-title: clamp(2.25rem, 5vw, 4.25rem);   /* page titles              */
  --fs-num:   clamp(4rem, 9vw, 8rem);          /* stat numerals            */
  --fs-tag:   clamp(1.25rem, 1rem + 1vw, 1.75rem);    /* taglines        */
  --fs-item:  clamp(1.25rem, 1rem + 1vw, 1.875rem);    /* list items      */
  --fs-body:  1.0625rem;                       /* 17px */
  --fs-cap:   1rem;                            /* 16px */
  --fs-lbl:   .9375rem;                        /* 15px — hard floor */

  --pad: clamp(1.375rem, 4vw, 3.5rem);
  --sec: clamp(4.5rem, 9vw, 8rem);
  --max: 1440px;

  --ease: cubic-bezier(.23, .68, .32, 1);
}

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

html {
  -webkit-text-size-adjust: 100%;
  font-synthesis: none;
  scroll-behavior: smooth;
  scroll-padding-top: 6.5rem;
}

body {
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: 1.7;
  background: var(--dark);
  color: var(--mut);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

img, picture, svg { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
h1, h2, h3, h4 { font-weight: 400; line-height: 1; color: var(--white); }
a { color: inherit; }
p { text-wrap: pretty; }

:focus-visible {
  outline: 2px solid var(--cream);
  outline-offset: 3px;
  border-radius: 2px;
}
.on-cream :focus-visible, .hero :focus-visible { outline-color: var(--ink); }

::selection { background: var(--cream); color: var(--ink); }

/* nur für Screenreader und Suchmaschinen sichtbar */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.hero__title { margin: 0; line-height: 0; }

.skip {
  position: absolute;
  left: -9999px; top: 0;
  z-index: 300;
  background: var(--cream);
  color: var(--ink);
  padding: .875rem 1.5rem;
  font-size: var(--fs-cap);
  text-decoration: none;
  border-radius: 999px;
}
.skip:focus { left: 1rem; top: 1rem; }

/* --- Layout --------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--pad);
}
.sec { padding-block: var(--sec); }
.sec--top { padding-top: var(--sec); }

/* --- Typography ----------------------------------------------------------- */
.lbl {
  font-family: var(--display);
  font-weight: 500;
  font-size: var(--fs-lbl);
  line-height: 1.3;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--faint);
}
.tag {
  font-family: var(--display);
  font-weight: 300;
  font-size: var(--fs-tag);
  line-height: 1.3;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--white);
}
.giant {
  font-family: var(--display);
  font-weight: 300;
  font-size: var(--fs-giant);
  line-height: 1.04;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--white);
  text-wrap: balance;
}
.copy {
  font-size: var(--fs-body);
  line-height: 1.75;
  color: var(--mut);
  max-width: 46ch;
}

/* --- Pill buttons ---------------------------------------------------------- */
.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .625rem;
  padding: .8125rem 2rem;
  border-radius: 999px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: .9375rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1.2;
  white-space: nowrap;
  border: 1px solid transparent;
  transition: background-color .3s var(--ease), color .3s var(--ease),
              border-color .3s var(--ease), transform .3s var(--ease);
}
.pill:hover { transform: translateY(-2px); }
.pill:active { transform: none; }

.pill--cream { background: var(--cream); color: var(--ink); }
.pill--cream:hover { background: #E6E8EB; }

.pill--line { border-color: var(--hair); color: var(--white); }
.pill--line:hover { background: var(--cream); border-color: var(--cream); color: var(--ink); }

.pill--ink { background: var(--ink); color: var(--cream); }
.pill--ink:hover { background: #000; }

.pill--line-ink { border-color: var(--hair-ink); color: var(--ink); }
.pill--line-ink:hover { background: var(--ink); border-color: var(--ink); color: var(--cream); }

/* --- Header ---------------------------------------------------------------- */
.header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  transition: background-color .35s var(--ease), border-color .35s var(--ease);
  border-bottom: 1px solid transparent;
}
.header__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 5.25rem;
  gap: 1rem;
}
.header__logo { justify-self: start; display: block; }
.header__logo img { height: 2.5rem; width: auto; }
.header__cta { justify-self: end; }

.nav {
  display: flex;
  align-items: center;
  gap: clamp(1.5rem, 3vw, 3rem);
}
.nav a {
  font-family: var(--sans);
  font-weight: 600;
  font-size: .9375rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--white);
  opacity: .85;
  transition: opacity .25s var(--ease);
  position: relative;
  padding-block: .375rem;
}
.nav a:hover { opacity: 1; }
.nav a[aria-current]::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: currentColor;
}
/* the in-nav pill exists only for the mobile drawer */
.nav > .pill { display: none; }
@media (max-width: 900px) { .nav > .pill { display: inline-flex; } }

/* dark veil once scrolled */
.header.is-stuck,
.header.is-open {
  background: rgba(19, 21, 24, .86);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border-bottom-color: var(--hair-soft);
}

/* cream state — homepage top, before scrolling */
.header--cream:not(.is-stuck):not(.is-open) {    /* helles Milchglas über dem Titelbild */
  color: var(--ink);
  background: rgba(255, 255, 255, .5);
  backdrop-filter: blur(18px) saturate(1.5);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  border-bottom-color: rgba(255, 255, 255, .45);
}
.header--cream:not(.is-stuck):not(.is-open) .nav a { color: var(--ink); }
.header--cream:not(.is-stuck):not(.is-open) .burger span { background: var(--ink); }
.header .logo-ink { display: none; }
.header--cream:not(.is-stuck):not(.is-open) .logo-ink { display: block; }
.header--cream:not(.is-stuck):not(.is-open) .logo-light { display: none; }
.header--cream:not(.is-stuck):not(.is-open) .pill--cream {
  background: var(--ink); color: var(--cream);
}

.burger {
  display: none;
  width: 2.75rem; height: 2.75rem;
  position: relative;
  justify-self: end;
}
.burger span {
  position: absolute;
  left: .55rem; right: .55rem;
  height: 1.5px;
  background: var(--white);
  transition: transform .3s var(--ease), opacity .2s var(--ease);
}
.burger span:nth-child(1) { top: 1.05rem; }
.burger span:nth-child(2) { top: 1.4rem; }
.burger span:nth-child(3) { top: 1.75rem; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(.35rem) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-.35rem) rotate(-45deg); }

.nav__meta { display: none; }

/* Handy: Menü als ruhige Vollbildfläche, Logo und Menüknopf bleiben obenauf */
@media (max-width: 900px) {
  .header__inner { grid-template-columns: 1fr auto; min-height: 4.5rem; }
  .header__logo img { height: 2.25rem; }
  .header__cta { display: none; }
  .burger { display: block; }
  .header__logo, .burger { position: relative; z-index: 2; }
  .nav {
    position: fixed;
    inset: 0;
    z-index: 1;
    height: 100dvh;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--dark);
    padding: 6.5rem var(--pad) calc(2rem + env(safe-area-inset-bottom, 0px));
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s var(--ease), visibility .25s;
    overflow-y: auto;
  }
  .nav.is-open { opacity: 1; visibility: visible; }
  .nav a {
    color: var(--white) !important;
    font-family: var(--display);
    font-weight: 300;
    font-size: clamp(1.5rem, 1.1rem + 2vw, 2rem);
    letter-spacing: .06em;
    padding: 1.125rem 0;
    border-bottom: 1px solid var(--hair-soft);
    opacity: 1;
  }
  .nav a:first-child { border-top: 1px solid var(--hair-soft); }
  .nav a[aria-current]::after { display: none; }
  .nav a[aria-current] { color: var(--faint) !important; }
  .nav > .pill {
    margin-top: 2rem;
    padding-block: 1rem;
    font-family: var(--sans);
    font-weight: 600;
    font-size: .9375rem;
    letter-spacing: .12em;
    border: 0;
    background: var(--cream);
    color: var(--ink) !important;
    justify-content: center;
  }
  .nav__meta {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    margin-top: auto;
    padding-top: 2.5rem;
  }
  .nav__meta a {
    font-family: var(--sans) !important;
    font-weight: 400 !important;
    font-size: var(--fs-cap) !important;
    letter-spacing: 0 !important;
    text-transform: none;
    color: var(--mut) !important;
    padding: 0 !important;
    border: 0 !important;
  }
  html.nav-open { overflow: hidden; }
  .header.is-stuck { background: var(--dark); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .header.is-open { background: var(--dark); border-bottom-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }

  /* Startseite ganz oben: kein Balken, nur Menüknopf über dem Titelbild
     (das große Logo steht ohnehin im Bild) */
  .header--cream:not(.is-stuck):not(.is-open) {
    background: linear-gradient(rgba(10, 11, 13, .35), rgba(10, 11, 13, 0)) border-box no-repeat;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom-color: transparent;
  }
  .header--cream:not(.is-stuck):not(.is-open) .header__logo { opacity: 0; pointer-events: none; }
  .header--cream:not(.is-stuck):not(.is-open) .burger span { background: #fff; }
  .header__logo { transition: opacity .3s var(--ease); }
}

/* --- Hero (homepage) -------------------------------------------------------- */
.hero {
  background: var(--dark);
  color: var(--ink);
}
.hero__media {
  position: relative;
}
.hero__media picture { display: block; }
.hero__img {
  width: 100%;
  height: min(100svh, 64rem);
  object-fit: cover;
}
.hero__media::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to top,
    rgba(10, 11, 13, .72) 0%, rgba(10, 11, 13, .34) 38%, rgba(10, 11, 13, .06) 72%);
  pointer-events: none;
}
.hero__overlay {
  position: absolute;
  inset: auto 0 0;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  padding: var(--pad);
  padding-bottom: clamp(1.25rem, 3.5vw, 3rem);
}
.hero__brand { min-width: 0; }
.hero__logo {
  width: min(clamp(28rem, 54vw, 54rem), 86vw);
  height: auto;
  filter: drop-shadow(0 4px 28px rgba(0, 0, 0, .35));
}
.hero__slogan {
  margin-top: clamp(1.25rem, 2.5vw, 2rem);
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1rem, .85rem + .8vw, 1.5rem);
  line-height: 1.3;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #fff;
  text-wrap: balance;
}
@media (max-width: 900px) {
  .hero__img { height: min(82svh, 46rem); }
}

/* --- Abschnittskopf ---------------------------------------------------------- */
.sechead { margin-bottom: clamp(2.25rem, 4.5vw, 4rem); }
.sechead__t {
  font-family: var(--display);
  font-weight: 500;
  font-size: var(--fs-lbl);
  line-height: 1.3;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--faint);
}

/* --- Section head pattern --------------------------------------------------- */
.shead { margin-bottom: clamp(2.75rem, 6vw, 5rem); }
.shead .lbl { display: block; margin-bottom: 1.25rem; }

/* --- About ------------------------------------------------------------------
   Der Bildrahmen behält seine Größe, das Foto darin zoomt beim Scrollen heraus
   und bewegt sich langsamer als die Seite (Parallaxe). CSS Scroll-Driven Animation,
   Rückfall für ältere Browser in main.js. */
.about__grid {
  display: grid;
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: start;
}
@media (min-width: 980px) {
  .about__grid {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    column-gap: clamp(3rem, 7vw, 7rem);
    align-items: stretch;
  }
  /* Bild so hoch wie der Text daneben */
  .about__grid .about__img { aspect-ratio: auto; min-height: 24rem; }
}
.about__img {
  position: relative;
  aspect-ratio: 1024 / 584;          /* Seitenverhältnis des Fotos, kaum beschnitten */
  overflow: clip;
  background-color: var(--dark-2);
}
.about__img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 45% 50%;          /* Haus mittig, auch bei schmalem Rahmen */
  transform: scale(1.1);
  transform-origin: 45% 50%;
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .about__img img {
      animation: about-par linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }
  }
}
/* beim Durchscrollen: Foto zoomt deutlich heraus und gleitet dabei nach unten.
   Am Ende ist fast das ganze Haus zu sehen. Die Verschiebung bleibt in jedem
   Moment innerhalb des Zooms, es entsteht nie ein Rand. */
@keyframes about-par {
  from { transform: scale(1.32) translateY(-9.5%); }
  to   { transform: scale(1.05) translateY(2.2%); }
}
.about__lead {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(1.375rem, 1rem + 1.2vw, 2rem);
  line-height: 1.18;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--white);
  text-wrap: balance;
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}
.about__text > p + p,
.about__more > p + p { margin-top: 1.5rem; }
/* Handy: Text nach drei Zeilen gekürzt, „Mehr anzeigen“ klappt ihn auf.
   Ohne JavaScript bleibt er vollständig sichtbar. */
.about__toggle { display: none; }
@media (max-width: 760px) {
  html:not(.no-js) .about__more:not(.is-open) {
    max-height: calc(var(--fs-body) * 1.75 * 3);
    overflow: hidden;
    -webkit-mask-image: linear-gradient(#000 45%, transparent);
            mask-image: linear-gradient(#000 45%, transparent);
  }
  html:not(.no-js) .about__toggle {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-top: .25rem;
    padding: .5rem 0;
    font-family: var(--display);
    font-weight: 500;
    font-size: var(--fs-lbl);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--white);
  }
  .about__toggle::after {
    content: '';
    width: .45rem; height: .45rem;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: translateY(-.15rem) rotate(45deg);
    transition: transform .25s var(--ease);
  }
  .about__toggle[aria-expanded="true"]::after { transform: translateY(.1rem) rotate(-135deg); }
}
.about__text .copy { max-width: 52ch; }

/* --- Geometrie: Passermarken, Raster -----------------------------
   Zurückhaltende Zeichen aus der technischen Zeichnung. */
.marks { position: relative; }
.marks::after {                      /* Passermarken an den Bildecken */
  --m: var(--hair-strong);
  --l: 1.125rem;
  content: '';
  position: absolute;
  inset: -.75rem;
  pointer-events: none;
  background:
    linear-gradient(var(--m), var(--m)) left top / var(--l) 1px,
    linear-gradient(var(--m), var(--m)) left top / 1px var(--l),
    linear-gradient(var(--m), var(--m)) right top / var(--l) 1px,
    linear-gradient(var(--m), var(--m)) right top / 1px var(--l),
    linear-gradient(var(--m), var(--m)) left bottom / var(--l) 1px,
    linear-gradient(var(--m), var(--m)) left bottom / 1px var(--l),
    linear-gradient(var(--m), var(--m)) right bottom / var(--l) 1px,
    linear-gradient(var(--m), var(--m)) right bottom / 1px var(--l);
  background-repeat: no-repeat;
}

/* --- Showcase (Überschrift, darunter drei Bilder im Raster) ------------------ */
/* feines Dreiecksraster als Hintergrund, zum Rand hin ausgeblendet.
   Sparsam einsetzen: Leistungen auf der Startseite und die Seitenköpfe. */
.blueprint { position: relative; isolation: isolate; }
.blueprint::before {
  --at: 50% 55%;
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='83.138'><path d='M0 0H48M0 41.569H48M0 83.138H48M0 0L48 83.138M48 0L0 83.138' fill='none' stroke='%23F4F3EF' stroke-opacity='.065' stroke-width='1'/></svg>");
  background-size: 48px 83.138px;
  background-position: center center;
  -webkit-mask-image: radial-gradient(ellipse 58% 52% at var(--at), #000 25%, transparent 100%);
          mask-image: radial-gradient(ellipse 58% 52% at var(--at), #000 25%, transparent 100%);
}
.phead.blueprint::before { --at: 16% 62%; opacity: .6; }   /* hinter der Seitenüberschrift */

.showcase__title {
  text-align: center;
  margin-bottom: clamp(2.25rem, 5vw, 4.25rem);
}
.showcase__stage {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));   /* drei gleich große Bilder */
  column-gap: clamp(1.5rem, 3.4vw, 3.25rem);
  align-items: start;
  max-width: 72rem;
  margin-inline: auto;
}
.showcase__img img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: var(--dark-2);
}
.showcase__foot {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1.25rem 3rem;
}
.showcase__foot .copy { max-width: 38ch; font-size: var(--fs-cap); }
/* das mittlere Bild ist durch Passermarken hervorgehoben */
.showcase__img--c.marks::after { --m: var(--faint); }
@media (max-width: 760px) {
  .showcase__stage { column-gap: 1.125rem; }
  .showcase__img--c.marks::after { inset: -.5rem; --l: .75rem; }
  .showcase__foot { justify-content: flex-start; text-align: left; }
}

/* --- Grundsätze (schmale, ruhige Leiste) ------------------------------------- */
.sec--slim { padding-block: clamp(3rem, 6vw, 5rem); }
.principles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--hair-soft);
  border: 1px solid var(--hair-soft);
}
.principle {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: clamp(1.5rem, 2.6vw, 2.25rem);
  background: var(--dark);
}
.principle__i { color: var(--faint); }
.principle__t {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1rem, .95rem + .35vw, 1.1875rem);
  line-height: 1.35;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #D9D8D3;
}
@media (max-width: 760px) {
  .principles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .principles { grid-template-columns: minmax(0, 1fr); }
  .principle { flex-direction: row; align-items: center; gap: 1.25rem; padding: 1.125rem 1.25rem; }
}

/* --- Collage rows ------------------------------------------------------------ */
.collage {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: center;
}
@media (min-width: 980px) {
  .collage { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); column-gap: clamp(3rem, 6vw, 6rem); }
  .collage--flip { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); }
  .collage--flip > .collage__text { order: 2; }
}
.collage__text { position: relative; }
.collage__text .lbl { display: block; margin-bottom: 1.25rem; }
.collage__text .giant { font-size: clamp(2.25rem, 4.6vw, 4rem); }
.collage__text .copy { margin-top: 1.75rem; font-size: var(--fs-cap); max-width: 50ch; }
.collage__text .pill { margin-top: 2.25rem; }
.collage__imgs {                     /* zwei Bilder nebeneinander, gleich hoch */
  display: flex;
  align-items: flex-start;
  gap: clamp(.75rem, 2vw, 1.5rem);
}
/* Jedes Bild im eigenen Seitenverhältnis (--ar), Breite im selben Verhältnis
   verteilt: alle Bilder gleich hoch, kaum beschnitten. Die Summe der --ar
   ist in beiden Reihen gleich, daher sind auch die Reihen gleich hoch. */
.collage__imgs img {
  --ar: 1.5;
  flex: var(--ar) 1 0;
  min-width: 0;
  aspect-ratio: var(--ar);
  object-fit: cover;
}
.collage__imgs .im-big { order: 2; }
.collage__imgs .im-small { order: 1; }
.collage--flip .collage__imgs .im-big { order: 1; }
.collage--flip .collage__imgs .im-small { order: 2; }
/* nur ein Bild: volle Spaltenbreite, mit Passermarken */
.collage__imgs .im-big:only-child {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
@media (max-width: 979px) {
  .collage + .collage { margin-top: clamp(4rem, 9vw, 7rem); }
}
.collage + .collage { margin-top: clamp(4rem, 7vw, 6.5rem); }

/* --- Ablauf (Leistungen): Bauplan als feine Linien im Hintergrund ---------------
   Grundriss des VW Verwaltungsgebäudes in Emden (aus dem PDF, tools/medien.py):
   helle Linien auf Schwarz, per „screen“ auf den dunklen Grund gelegt, dabei
   verschwindet das Schwarz. Das Bild lädt erst kurz bevor der Abschnitt
   sichtbar wird (Klasse is-near aus main.js). */
.process { position: relative; isolation: isolate; background: var(--dark); }
.plan-lines {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: auto min(46rem, 96%);
  background-position: 14% 50%;         /* Saal mit den Sitzreihen in der Mitte */
  mix-blend-mode: screen;
  opacity: .2;
  -webkit-mask-image: radial-gradient(ellipse 50% 58% at 44% 50%, #000 30%, transparent 100%);
          mask-image: radial-gradient(ellipse 50% 58% at 44% 50%, #000 30%, transparent 100%);
}
.plan-lines.is-near,
html.no-js .plan-lines { background-image: url('../img/plan-emden-2200.webp'); }
@media (max-width: 760px) {
  .plan-lines {
    background-size: auto 24rem;
    background-position: 24% 14%;
    -webkit-mask-image: radial-gradient(ellipse 90% 34% at 50% 22%, #000 30%, transparent 100%);
            mask-image: radial-gradient(ellipse 90% 34% at 50% 22%, #000 30%, transparent 100%);
  }
  .plan-lines.is-near,
  html.no-js .plan-lines { background-image: url('../img/plan-emden-1300.webp'); }
}

/* Leistungen: vier Phasen im gerahmten Raster */
.process__title { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.process--phases .plan-lines { background-position: 30% 62%; }
.process--phases .plan-lines {
  -webkit-mask-image: radial-gradient(ellipse 60% 55% at 40% 60%, #000 30%, transparent 100%);
          mask-image: radial-gradient(ellipse 60% 55% at 40% 60%, #000 30%, transparent 100%);
}
.phases {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--hair-soft);
}
.phase {
  display: flex;
  flex-direction: column;
  gap: .875rem;
  padding: clamp(1.5rem, 2.6vw, 2.25rem);
  background: rgba(22, 24, 27, .8);
}
.phase + .phase { border-left: 1px solid var(--hair-soft); }
.phase__i { color: var(--faint); margin-bottom: .625rem; }
.phase__t {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1rem, .95rem + .35vw, 1.1875rem);
  line-height: 1.35;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #D9D8D3;
}
.phase__d { font-size: var(--fs-cap); line-height: 1.6; color: var(--mut); }
@media (max-width: 979px) {
  .phases { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .phase:nth-child(3) { border-left: 0; }
  .phase:nth-child(n+3) { border-top: 1px solid var(--hair-soft); }
}
@media (max-width: 560px) {
  .phases { grid-template-columns: minmax(0, 1fr); }
  .phase + .phase { border-left: 0; border-top: 1px solid var(--hair-soft); }
  .process--phases .plan-lines { background-position: 30% 30%; }
}

/* --- Innenraum: Rundgang läuft beim Scrollen ---------------------------------------
   Der Abschnitt ist höher als der Bildschirm, das Bild bleibt stehen (sticky)
   und main.js spult das Video passend zur Scrollposition vor und zurück.
   --e (0..1) öffnet den Rahmen beim Hereinscrollen auf volle Breite,
   --p (0..1) füllt die feine Fortschrittslinie. Ohne JavaScript oder bei
   reduzierter Bewegung bleibt ein ruhiges Standbild. */
.reel { position: relative; background: var(--dark); }
.sec--to-reel { padding-bottom: clamp(1rem, 3vw, 2.5rem); }   /* das Video bringt eigenen Abstand mit */
.reel__track { height: 280vh; }
.reel__stick {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: clip;
}
.reel__media {
  position: absolute;
  inset: 0;
  overflow: clip;
  background: var(--dark-2);
  clip-path: inset(calc((1 - var(--e, 1)) * 11vh) calc((1 - var(--e, 1)) * var(--pad)));
}
.reel__poster img,
.reel__v {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.reel__v { opacity: 0; transition: opacity .5s var(--ease); }
.reel.is-ready .reel__v { opacity: 1; }
.reel__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10, 11, 13, .62) 0%, rgba(10, 11, 13, .2) 30%, rgba(10, 11, 13, 0) 50%);
  pointer-events: none;
}
.reel__cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(clamp(1.5rem, 4vw, 3rem) + (1 - var(--e, 1)) * 11vh);
  z-index: 1;
  color: #fff;
}
.reel__k {
  font-family: var(--display);
  font-weight: 500;
  font-size: var(--fs-lbl);
  line-height: 1.3;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .72);
}
.reel__t {
  margin-top: .5rem;
  font-family: var(--display);
  font-weight: 300;
  font-size: var(--fs-tag);
  line-height: 1.3;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.reel__bar {
  position: relative;
  display: block;
  width: min(15rem, 40vw);
  height: 1px;
  margin-top: 1.25rem;
  background: rgba(255, 255, 255, .28);
}
.reel__bar::after {
  content: '';
  position: absolute;
  inset: 0;
  background: #fff;
  transform: scaleX(var(--p, 0));
  transform-origin: 0 50%;
}
html.no-js .reel__track,
.reel--static .reel__track { height: auto; }
html.no-js .reel__stick,
.reel--static .reel__stick { position: relative; height: min(100svh, 56.25vw); }
html.no-js .reel__bar,
.reel--static .reel__bar { display: none; }

/* Handy: Hochformat 4:5 im Seitenrand, Beschriftung darunter */
@media (max-width: 760px) {
  .reel__track { height: 240vh; }
  .reel__stick {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 4.5rem var(--pad) 1rem;     /* oben Platz für die Kopfzeile */
  }
  .reel__media {
    position: relative;
    inset: auto;
    width: 100%;
    aspect-ratio: 4 / 5;
    max-height: calc(100svh - 14rem);
    clip-path: none;
  }
  .reel__media::after { display: none; }
  .reel__cap { position: static; padding-inline: 0; margin-top: 1.25rem; color: var(--white); }
  .reel__k { color: var(--faint); }
  .reel__bar { background: var(--hair); width: 9rem; }
  .reel__bar::after { background: var(--white); }
  html.no-js .reel__stick,
  .reel--static .reel__stick { height: auto; padding-block: 1rem var(--sec); }
}

/* --- Numbered list (Leistungen) --------------------------------------------- */
.nlist { }
.nrow {
  display: grid;
  grid-template-columns: minmax(4.5rem, auto) 1fr;
  gap: .5rem clamp(1.5rem, 4vw, 4rem);
  align-items: baseline;
  padding: clamp(1.5rem, 3vw, 2.25rem) 0;
  border-bottom: 1px solid var(--hair-soft);
}
.nrow__n {
  font-family: var(--display);
  font-weight: 500;
  font-size: var(--fs-lbl);
  letter-spacing: .14em;
  font-variant-numeric: tabular-nums;
  color: var(--faint);
  white-space: nowrap;
}
.nrow__t {
  font-family: var(--display);
  font-weight: 300;
  font-size: var(--fs-item);
  line-height: 1.2;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--white);
}
.nrow__d {
  grid-column: 2;
  font-size: var(--fs-cap);
  line-height: 1.6;
  color: var(--mut);
  max-width: 58ch;
}
@media (min-width: 980px) {
  .nrow { grid-template-columns: 6rem minmax(0, 1.15fr) minmax(0, .85fr); }
  .nrow__d { grid-column: 3; }
}

/* --- Project grid ------------------------------------------------------------ */
.pgrid {
  display: grid;
  gap: clamp(3rem, 6vw, 5rem) clamp(1.5rem, 3.5vw, 3.5rem);
  grid-template-columns: minmax(0, 1fr);
}
.pgrid > * { min-width: 0; }
@media (min-width: 720px) {
  .pgrid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.pcard { display: block; }
.pcard figure {
  background: transparent;
}
.pcard img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
/* Einzelbild: leichter Zoom beim Überfahren */
.pcard figure:not([class]) { overflow: clip; background: var(--dark-2); }
.pcard figure:not([class]) img { transition: transform .7s var(--ease); }
.pcard:hover figure:not([class]) img { transform: scale(1.045); }

/* overlapping two-image collage inside a project card */
.pcard__stack {
  position: relative;
  padding-bottom: 11%;
}
.pcard__stack > img {
  width: 86%;
  margin-left: auto;
  display: block;
}
.pcard__over {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 46%;
  display: block;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .45);
}
.pcard__over img { aspect-ratio: 4 / 3; }
/* Projekte mit drei Bildern: eigene volle Zeile. Großes Bild, daneben zwei
   kleinere Ansichten übereinander, sauber im Raster ohne Überlappung. */
.pgrid > .pcard--wide {
  grid-column: 1 / -1;
  transform: none !important;
  --g: clamp(.625rem, 1.2vw, 1rem);
}
.pcard__trio {
  position: relative;
  aspect-ratio: 9 / 4;               /* großes Bild ≈ 3:2 bei zwei Dritteln Breite */
}
.pcard__trio img { position: absolute; object-fit: cover; }
.pcard__trio .pcard__a {
  left: 0; top: 0;
  width: calc((100% - var(--g)) * 2 / 3);
  height: 100%;
  aspect-ratio: auto;
}
.pcard__trio .pcard__b,
.pcard__trio .pcard__c {
  right: 0;
  width: calc((100% - var(--g)) / 3);
  height: calc(50% - var(--g) / 2);
  aspect-ratio: auto;
}
.pcard__trio .pcard__b { top: 0; }
.pcard__trio .pcard__c { bottom: 0; }
.pcard--wide .pcard__meta { width: calc((100% - var(--g)) * 2 / 3); }
/* jede zweite Collage gespiegelt */
.pcard--flip .pcard__trio .pcard__a { left: auto; right: 0; }
.pcard--flip .pcard__trio .pcard__b,
.pcard--flip .pcard__trio .pcard__c { right: auto; left: 0; }
.pcard--flip .pcard__meta { margin-left: auto; }
@media (max-width: 719px) {
  .pcard__trio {
    aspect-ratio: auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--g);
  }
  .pcard__trio img { position: static; }
  .pcard__trio .pcard__a { grid-column: 1 / -1; width: 100%; height: auto; aspect-ratio: 3 / 2; }
  .pcard__trio .pcard__b,
  .pcard__trio .pcard__c { width: 100%; height: auto; aspect-ratio: 4 / 3; }
  .pcard--wide .pcard__meta { width: 100%; }
}
/* Projekte mit zwei Bildern: volle Zeile, beide nebeneinander und gleich hoch */
.pcard__pair { display: flex; gap: var(--g); }
.pcard__pair img {
  flex: var(--ar) 1 0;
  min-width: 0;
  aspect-ratio: var(--ar);
  object-fit: cover;
  background: var(--dark-2);
}
.pcard--pair .pcard__meta { width: auto; }
@media (max-width: 719px) {
  .pcard__pair { flex-direction: column; }
  .pcard__pair img { flex: none; width: 100%; }
}
.pcard__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .375rem 1rem;
  padding-top: 0;
  margin-top: 1.25rem;
}
.pcard__t {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.0625rem, .95rem + .5vw, 1.375rem);
  line-height: 1.3;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--white);
  min-width: 0;
}
.pcard__k {
  font-size: var(--fs-lbl);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--faint);
  text-align: right;
  flex: 0 1 auto;
  min-width: 0;
}

/* --- Contact (photo + card) -------------------------------------------------- */
.cta {
  position: relative;
  isolation: isolate;
  overflow: clip;
}
.cta__bg, .cta__bg img {
  position: absolute;
  inset: 0 0 var(--cta-cut, clamp(8rem, 18vw, 15rem)) 0;
  width: 100%; height: auto;
  object-fit: cover;
  z-index: -2;
}
.cta__bg img { height: 100%; }
.cta::after {
  content: '';
  position: absolute;
  inset: 0 0 var(--cta-cut, clamp(8rem, 18vw, 15rem)) 0;
  background: linear-gradient(100deg, rgba(11, 12, 14, .88) 0%, rgba(11, 12, 14, .55) 55%, rgba(11, 12, 14, .35) 100%);
  z-index: -1;
}
.cta__grid {
  display: grid;
  gap: clamp(3rem, 6vw, 5rem);
  align-items: center;
}
@media (min-width: 980px) {
  .cta__lead { padding-bottom: var(--cta-cut, clamp(8rem, 18vw, 15rem)); }
}
@media (min-width: 980px) {
  .cta__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 30rem); column-gap: clamp(3rem, 7vw, 7rem); }
}
.cta__lead .tag { margin-top: 1.25rem; display: block; }
.cta__lead .copy { margin-top: 1.75rem; font-size: var(--fs-cap); }
.cta-card {
  background: #272C32;
  padding: clamp(2rem, 4vw, 3rem);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
}
@media (max-width: 979px) {
  /* Foto endet wie auf dem Laptop mitten in der Adresskarte, statt den ganzen
     hohen Abschnitt zu füllen (sonst stark vergrößert und unscharf) */
  .cta__bg, .cta__bg img, .cta::after { bottom: auto; height: calc(17rem + 60vw); }
}
.cta-card__row {
  padding: 1.125rem 0;
}
.cta-card__row:first-child { padding-top: 0; }
.cta-card__row:last-child { padding-bottom: 0; }
.cta-card__l {
  font-size: var(--fs-lbl);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: .5rem;
}
.cta-card__v {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(1.0625rem, 1rem + .4vw, 1.3125rem);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--white);
  line-height: 1.5;
}
/* e-mail bleibt einzeilig: keine Versalien, leicht kleiner, kein Umbruch */
.cta-card__v a[href^="mailto"] {
  text-transform: none;
  letter-spacing: 0;
  font-size: clamp(1.0625rem, .95rem + .6vw, 1.375rem);
  white-space: nowrap;
}
.cta-card__v a {
  text-decoration: none;
  border-bottom: 1px solid var(--hair);
  transition: border-color .25s var(--ease);
}
.cta-card__v a:hover { border-color: var(--white); }




/* --- Karte ------------------------------------------------------------------- */
.map {
  position: relative;
  margin-top: clamp(3rem, 6vw, 5rem);
  height: clamp(20rem, 48vh, 28rem);
  background: var(--dark-2);
  overflow: clip;
}
.map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  filter: grayscale(1) contrast(1.04);
}
.map__route {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  z-index: 1;
}

/* --- Footer ------------------------------------------------------------------ */
.footer { padding-top: var(--sec); }
.footer__cols {
  display: grid;
  gap: clamp(2.5rem, 5vw, 3.5rem);
}
@media (min-width: 900px) {
  .footer__cols { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr); }
}
.footer__col .lbl {
  display: block;
  margin-bottom: 1.5rem;
  font-size: var(--fs-cap);
}
.footer__logo img { width: min(19rem, 72vw); height: auto; }
.footer__addr {
  font-style: normal;
  font-size: var(--fs-body);
  line-height: 1.9;
  color: var(--mut);
}
.footer__it {
  font-family: var(--display);
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: clamp(1.0625rem, 1rem + .4vw, 1.3125rem);
  line-height: 1.9;
  color: var(--white);
}
.footer__it a[href^="mailto"] {
  text-transform: none;
  letter-spacing: 0;
  font-size: clamp(1.0625rem, .9rem + .8vw, 1.5rem);
  white-space: nowrap;
}
.footer__it a { text-decoration: none; border-bottom: 1px solid var(--hair); transition: border-color .25s var(--ease); }
.footer__it a:hover { border-color: var(--white); }
.footer__nav {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .875rem;
}
.footer__nav a {
  font-family: var(--sans);
  font-size: .9375rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--mut);
  transition: color .25s var(--ease);
}
.footer__nav a:hover { color: var(--white); }
.footer__base {
  margin-top: clamp(3.5rem, 7vw, 6rem);
  padding: 1.75rem 0 2rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .75rem 2rem;
  font-size: var(--fs-lbl);
  color: var(--faint);
}
.footer__base a { color: inherit; text-decoration: none; }
.footer__base a:hover { color: var(--mut); }
.footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: .375rem 1.75rem;
}

/* --- Page head (subpages) ----------------------------------------------------- */
.phead {
  padding-top: clamp(8rem, 15vh, 11rem);
  padding-bottom: clamp(2.5rem, 5vw, 4.5rem);
}
.phead__grid {
  display: grid;
  gap: 2rem;
  align-items: end;
}
@media (min-width: 980px) {
  .phead__grid { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); column-gap: clamp(3rem, 6vw, 6rem); }
}
.phead h1 {
  font-family: var(--display);
  font-weight: 300;
  font-size: var(--fs-title);
  line-height: 1;
  letter-spacing: .01em;
  text-transform: uppercase;
}
.phead .lbl { display: block; margin-bottom: 1.5rem; }
.phead__aside { font-size: var(--fs-body); color: var(--mut); max-width: 44ch; }

/* --- FAQ ----------------------------------------------------------------------- */
.faq__item {
  display: grid;
  gap: .625rem clamp(2rem, 6vw, 6rem);
  padding: clamp(1.5rem, 3vw, 2.25rem) 0;
  border-bottom: 1px solid var(--hair-soft);
}
.faq__item:first-child { border-top: 1px solid var(--hair-soft); }
@media (min-width: 980px) {
  .faq__item { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: baseline; }
}
.faq__q {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.125rem, 1rem + .5vw, 1.375rem);
  line-height: 1.35;
  color: var(--white);
}
.faq__a { font-size: var(--fs-body); line-height: 1.7; color: var(--mut); max-width: 58ch; }
.faq__a a { color: var(--white); text-underline-offset: .2em; }
/* Bildleiste über der Liste: volle Breite, alle Bilder gleich hoch, jedes im
   eigenen Seitenverhältnis (--ar). Weniger Bilder auf schmaleren Bildschirmen,
   damit die Leiste niedrig bleibt. */
.faq__pics {
  display: flex;
  gap: clamp(.5rem, 1.2vw, 1rem);
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.faq__pics img {
  flex: var(--ar) 1 0;
  min-width: 0;
  aspect-ratio: var(--ar);
  object-fit: cover;
  background: var(--dark-2);
}
@media (max-width: 979px) {
  .faq__pics img:nth-child(n+4) { display: none; }
}
@media (max-width: 559px) {
  .faq__pics img:nth-child(n+3) { display: none; }
}

/* --- Prose (Impressum) --------------------------------------------------------- */
.prose {
  max-width: 70ch;
  font-size: var(--fs-body);
  line-height: 1.75;
  color: var(--mut);
}
.prose > * + * { margin-top: 1.25rem; }
.prose h2 {
  font-family: var(--display);
  font-weight: 300;
  letter-spacing: .02em;
  text-transform: uppercase;
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
  line-height: 1.15;
  margin-top: clamp(3.5rem, 7vw, 5.5rem);
  padding-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--hair-soft);
}
.prose h3 {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(1.125rem, 1rem + .5vw, 1.375rem);
  margin-top: 2.75rem;
  color: var(--white);
}
.prose h4 {
  font-family: var(--sans);
  font-weight: 600;
  font-size: var(--fs-body);
  color: #D4D4CF;
  margin-top: 2rem;
}
.prose strong { color: #D4D4CF; font-weight: 600; }
.prose a { color: var(--white); text-underline-offset: .2em; }
.prose ul, .prose ol { padding-left: 1.25rem; }
.prose li + li { margin-top: .5rem; }
.prose .addr { font-style: normal; line-height: 2; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
  .pill:hover, .pcard:hover img { transform: none; }
}