/* ============================================================
   AllesNachPlan Ingenieure OG — Landing Page Styles
   ============================================================ */

:root {
  --bg:        #ffffff;
  --bg-alt:    #f4f5f6;
  --ink:       #0a0a0a;
  --ink-soft:  #5a5a5a;
  --line:      #e1e2e4;
  --brand:     #111111;       /* near-black, primary */
  --brand-2:   #4a4a4a;       /* mid grey accent     */
  --accent:    #1a1a1a;       /* deep accent        */
  --accent-2:  #6b6b6b;
  --shadow:    0 1px 2px rgba(0,0,0,.06), 0 8px 24px rgba(0,0,0,.08);
  --radius:    14px;
  --maxw:      1180px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto,
               "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--brand-2); text-decoration: none; }
a:hover { text-decoration: underline; }

.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 28px;
}

/* ----------- Header / Nav ----------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255,255,255,.9);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--line);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--brand);
  text-decoration: none;
}

.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
}

.brand-text strong {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.brand-text em {
  font-style: normal;
  font-size: 12px;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.18em;
}

.nav-links {
  display: flex;
  gap: 28px;
  align-items: center;
}

.nav-links a {
  color: var(--ink);
  font-size: 14px;
  font-weight: 500;
}

.nav-links a:hover { color: var(--brand-2); text-decoration: none; }

.cta-link {
  background: var(--brand);
  color: #fff !important;
  padding: 9px 16px;
  border-radius: 999px;
}
.cta-link:hover { background: var(--brand-2); }

/* ----------- Hero ----------- */
.hero {
  position: relative;
  padding: 96px 0 88px;
  background:
    radial-gradient(900px 540px at 10% 0%, #eeeeee 0%, transparent 60%),
    radial-gradient(700px 420px at 100% 100%, #f4f4f4 0%, transparent 60%),
    var(--bg);
  overflow: hidden;
}

/* ----- Hero with full-bleed procedural 3D background +
   copy on the left, portrait office photo on the right ----- */
.hero--bg3d {
  background: #faf9f7;
  color: var(--ink);
  overflow: hidden;
  isolation: isolate;
}
.hero.hero--bg3d .eyebrow { color: var(--brand-2); letter-spacing: .08em; }
.hero.hero--bg3d h1 { color: var(--ink); }
.hero.hero--bg3d .lede { color: var(--ink-soft); }
.hero.hero--bg3d .hero-meta { border-top-color: var(--line); }
.hero.hero--bg3d .hero-meta strong { color: var(--ink); }
.hero.hero--bg3d .hero-meta span { color: var(--ink-soft); }
.hero.hero--bg3d .btn-ghost { color: var(--brand); border-color: var(--brand); backdrop-filter: blur(4px); background: rgba(255,255,255,.55); }
.hero.hero--bg3d .btn-ghost:hover { background: var(--brand); color: #fff; }

/* Darkening + warm gradient overlay so text on the left stays legible
   while the 3D model on the right remains visible. The strong linear
   gradient creates an opaque navy "wall" on the left 40% of the hero
   that fades out through the middle, leaving the 3D visible on the right. */
.hero-bg-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(64% 86% at 26% 50%,
      rgba(250,249,247,.88) 0%,
      rgba(250,249,247,.55) 55%,
      rgba(250,249,247,0)   100%),
    linear-gradient(90deg,
      rgba(250,249,247,.97) 0%,
      rgba(250,249,247,.93) 30%,
      rgba(250,249,247,.62) 48%,
      rgba(250,249,247,0)   68%),
    linear-gradient(180deg, rgba(250,249,247,.5) 0%, rgba(250,249,247,0) 18%);
}

.hero--bg3d .hero-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 620px);
  gap: 0;
  align-items: center;
  max-width: var(--maxw);
}

.hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 56px;
  align-items: center;
  max-width: 820px;
}

.hero h1 { max-width: 16ch; }

.eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--brand-2);
  margin-bottom: 14px;
}

.hero h1 {
  font-size: clamp(36px, 5vw, 60px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 18px;
  color: var(--ink);
  font-weight: 700;
}

.lede {
  font-size: 18px;
  color: var(--ink-soft);
  max-width: 56ch;
  margin: 0 0 28px;
}

.hero-cta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 36px;
}

.btn {
  display: inline-block;
  padding: 13px 22px;
  font-size: 15px;
  font-weight: 600;
  border-radius: 999px;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .15s ease, background .2s ease, border-color .2s ease;
}

.btn:hover { transform: translateY(-1px); text-decoration: none; }

.btn-primary {
  background: var(--brand);
  color: #fff;
}
.btn-primary:hover { background: var(--brand-2); }

.btn-ghost {
  background: transparent;
  color: var(--brand);
  border-color: var(--brand);
}
.btn-ghost:hover { background: var(--brand); color: #fff; }

.hero-meta {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 18px;
  border-top: 1px solid var(--line);
  padding-top: 22px;
  max-width: 640px;
}

.hero-meta li { display: flex; flex-direction: column; gap: 2px; }
.hero-meta strong { color: var(--ink); font-size: 15px; }
.hero-meta span { color: var(--ink-soft); font-size: 13px; }

.hero-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px 28px 22px;
  box-shadow: var(--shadow);
}

.hero-card h2 {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--brand-2);
  margin: 0 0 18px;
}

.hero-card dl { margin: 0; }
.hero-card dl > div {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
}
.hero-card dl > div:first-child { border-top: none; padding-top: 0; }
.hero-card dt { color: var(--ink-soft); font-size: 13px; }
.hero-card dd { margin: 0; font-size: 14px; color: var(--ink); }

/* ----------- Sections ----------- */
.section {
  padding: 96px 0;
}
.section-alt {
  background: var(--bg-alt);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.section-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 56px;
}

.section-head h2 {
  font-size: clamp(28px, 3.4vw, 40px);
  margin: 0 0 14px;
  letter-spacing: -0.015em;
  color: var(--ink);
}

.section-lede {
  color: var(--ink-soft);
  font-size: 17px;
  margin: 0;
}

/* ----------- Projects ----------- */
.projects {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 24px;
}

.proj-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  color: inherit;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.proj-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
  border-color: #b8bcc2;
}

.proj-thumb {
  position: relative;
  height: 240px;
  background: linear-gradient(180deg, #f1f2f4 0%, #e6e7e9 100%);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}

.proj-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  background: #fff;
}

.proj-thumb::after {
  /* subtle top + bottom fade so the cropped edges read as "peek" */
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(255,255,255,.35) 0%, rgba(255,255,255,0) 18%),
    linear-gradient(180deg, rgba(255,255,255,0) 78%, rgba(0,0,0,.06) 100%);
  pointer-events: none;
}

.thumb-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  font-weight: 700;
  color: var(--brand);
  letter-spacing: 0.12em;
}

.proj-body {
  position: relative;
  padding: 22px 22px 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* Service icon chip, top-right of the card body */
.proj-icon {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 46px;
  height: 46px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  object-fit: contain;
}

.proj-body .tag {
  display: inline-block;
  align-self: flex-start;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink);
  background: #ececee;
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 10px;
}

.proj-body h3 {
  font-size: 18px;
  margin: 0 0 6px;
  color: var(--ink);
  letter-spacing: -0.01em;
}

.proj-body p {
  margin: 0 0 16px;
  font-size: 14px;
  color: var(--ink-soft);
  flex: 1;
}

.proj-open {
  align-self: flex-start;
  font-size: 13px;
  font-weight: 600;
  color: var(--brand);
  text-decoration: none;
  padding: 8px 14px;
  border-radius: 999px;
  background: #ececee;
  transition: background .15s ease, color .15s ease, transform .15s ease;
}
.proj-open:hover {
  background: var(--brand);
  color: #fff;
  text-decoration: none;
  transform: translateY(-1px);
}

/* ----------- Multi-PDF Slider inside a card ----------- */
.slider {
  position: absolute;
  inset: 0;
}
.slider .slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s ease;
}
.slider .slide.is-active {
  opacity: 1;
  visibility: visible;
}

.slider-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 0;
  background: rgba(255,255,255,.92);
  color: var(--brand);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
  transition: background .15s ease, color .15s ease, transform .15s ease;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0 2px;
}
.slider-btn:hover {
  background: var(--brand);
  color: #fff;
}
.slider-prev { left: 10px; }
.slider-next { right: 10px; }

.slider-dots {
  position: absolute;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.85);
  box-shadow: 0 2px 6px rgba(0,0,0,.10);
  z-index: 3;
}
.slider-dots .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #c8c9cc;
  transition: background .15s ease, transform .15s ease;
  cursor: pointer;
}
.slider-dots .dot.is-active {
  background: var(--brand);
  transform: scale(1.25);
}

.slider-count {
  position: absolute;
  top: 10px;
  right: 12px;
  background: rgba(17,17,17,.82);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  padding: 4px 9px;
  border-radius: 999px;
  z-index: 3;
}
.slider-count em { font-style: normal; }

/* ----------- Team ----------- */
/* Team: photoreal office still as section background, washed toward the
   paper so header and member cards stay legible (hero treatment logic) */
.team--bg { position: relative; overflow: hidden; }
.team-bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 28%;
  z-index: 0;
  filter: grayscale(.55) contrast(.98);
  pointer-events: none;
}
.team-bg-wash {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(250,249,247,.96) 0%,
    rgba(250,249,247,.86) 20%,
    rgba(250,249,247,.62) 42%,
    rgba(250,249,247,.62) 60%,
    rgba(250,249,247,.9)  86%,
    rgba(250,249,247,.97) 100%);
}

.team {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 28px;
  max-width: 920px;
  margin: 0 auto;
}

.member {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 34px;
  text-align: left;
  box-shadow: var(--shadow);
}

.avatar {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color: #fff;
  font-weight: 700;
  font-size: 26px;
  letter-spacing: 0.04em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 18px;
}

.member h3 { margin: 0 0 4px; font-size: 19px; color: var(--ink); }
.member .role {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--brand-2);
  margin: 0 0 12px;
}
.member p { margin: 0; color: var(--ink-soft); font-size: 15px; }

/* ----------- Kontakt ----------- */
.kontakt-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 56px;
  align-items: start;
}

.kontakt-grid h2 {
  font-size: clamp(28px, 3.4vw, 40px);
  margin: 0 0 14px;
  letter-spacing: -0.015em;
}

.contact-list {
  list-style: none;
  padding: 0;
  margin: 24px 0 0;
}

.contact-list li {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 16px;
  padding: 16px 0;
  border-top: 1px solid var(--line);
}
.contact-list li:first-child { border-top: none; }

.contact-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-soft);
  font-weight: 600;
}

/* ----------- Footer ----------- */
.site-footer {
  background: var(--ink);
  color: #c9cacd;
  padding: 56px 0 36px;
  margin-top: 0;
}

.foot {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 28px;
  font-size: 14px;
  align-items: start;
}
.foot strong { color: #fff; }
.foot a { color: #c9cacd; }
.foot a:hover { color: #fff; }

.foot-legal {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.foot-legal span { color: #555555; }

.copy {
  grid-column: 1 / -1;
  border-top: 1px solid #222222;
  margin-top: 18px;
  padding-top: 18px;
  font-size: 12px;
  color: #8c8d90;
}

/* ----------- Legal pages (Impressum, Datenschutz) ----------- */
.legal {
  padding: 80px 0 96px;
  background:
    radial-gradient(900px 500px at 50% -10%, #ececee 0%, transparent 60%),
    var(--bg);
}

.legal-wrap {
  max-width: 820px;
}

.legal-head {
  text-align: center;
  margin-bottom: 56px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--line);
}

.legal-head h1 {
  font-size: clamp(32px, 4vw, 46px);
  margin: 6px 0 14px;
  letter-spacing: -0.015em;
  color: var(--ink);
}

.legal-head .lede {
  color: var(--ink-soft);
  font-size: 17px;
  max-width: 56ch;
  margin: 0 auto;
}

.legal-section {
  margin-bottom: 44px;
}

.legal-section h2 {
  font-size: 19px;
  margin: 0 0 14px;
  color: var(--brand);
  letter-spacing: -0.005em;
  padding-left: 12px;
  border-left: 3px solid var(--accent);
}

.legal-section p {
  margin: 0 0 12px;
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--ink-soft);
}

.legal-section p:last-child { margin-bottom: 0; }

.legal-section a {
  color: var(--brand-2);
  word-break: break-word;
}

.legal-list {
  margin: 8px 0 0;
  padding-left: 20px;
  color: var(--ink-soft);
  font-size: 15.5px;
  line-height: 1.7;
}

.legal-dl {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 0;
  margin: 8px 0 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}

.legal-dl > div {
  display: contents;
}

.legal-dl dt,
.legal-dl dd {
  padding: 14px 18px;
  border-top: 1px solid var(--line);
  font-size: 14.5px;
  margin: 0;
}

.legal-dl > div:first-child dt,
.legal-dl > div:first-child dd {
  border-top: none;
}

.legal-dl dt {
  background: #f4f5f6;
  font-weight: 600;
  color: var(--ink);
}

.legal-dl dd {
  color: var(--ink-soft);
}

.placeholder {
  color: #555555;
  background: #ececee;
  padding: 1px 8px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
}

.legal-note {
  text-align: center;
  color: var(--ink-soft);
  font-size: 13px;
  margin: 48px 0 24px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

.legal-back {
  text-align: center;
  margin: 0;
}

/* Legal pages — responsive tweaks */
@media (max-width: 640px) {
  .legal-dl {
    grid-template-columns: 1fr;
  }
  .legal-dl dt {
    padding-bottom: 4px;
    border-top: 1px solid var(--line);
  }
  .legal-dl dd {
    padding-top: 4px;
    padding-bottom: 14px;
    border-top: none;
  }
  .legal-dl > div:first-child dt { border-top: none; }
}

/* ----------- Eckdaten strip ----------- */
.eckdaten {
  background: #fff;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 32px 0;
}

/* ----------- Trust strip ----------- */
.trust-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 48px;
  padding: 28px 0;
  margin: 0 auto;
  max-width: 820px;
}
.trust-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.trust-item strong {
  font-size: 28px;
  font-weight: 700;
  color: var(--brand);
  letter-spacing: -0.01em;
  line-height: 1;
}
.trust-item span {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: 6px;
}

/* ----------- Map embed ----------- */
.kontakt-map {
  margin-top: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  background: #ececee;
}
.kontakt-map iframe {
  display: block;
  width: 100%;
  height: 280px;
  border: 0;
  /* Brand-critical: the map must be monochrome (see anp-brand) */
  filter: grayscale(1) contrast(1.05);
}
.kontakt-map-note {
  font-size: 12px;
  color: var(--ink-soft);
  text-align: center;
  padding: 8px 12px;
  background: #f4f5f6;
  border-top: 1px solid var(--line);
  margin: 0;
}
.kontakt-map-note a { color: var(--brand-2); }

/* ----------- Upgraded avatars ----------- */
.avatar-svg {
  width: 96px;
  height: 96px;
  display: block;
  margin: 0 0 20px;
}

.member-foci {
  list-style: none;
  margin: 18px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--line);
}
.member-foci li {
  position: relative;
  padding-left: 20px;
  color: var(--ink-soft);
  font-size: 14.5px;
  line-height: 1.55;
}
.member-foci li + li { margin-top: 8px; }
.member-foci li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .68em;
  width: 11px;
  height: 1px;
  background: var(--brand-2);
}

/* ============================================================
   AWARD UPGRADE — CAD-precision motion language
   Monochrome only. Every effect is gated:
   - `html.js` → no-JS visitors always see full content
   - `prefers-reduced-motion: no-preference` → a11y
   ============================================================ */

/* ----------- Film grain (print-paper texture) ----------- */
.grain {
  position: fixed;
  inset: -120px;
  z-index: 9000;
  pointer-events: none;
  opacity: .038;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ----------- Scroll progress hairline ----------- */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: 0 50%;
  z-index: 90;
  pointer-events: none;
}

/* ----------- Nav link underline (drafting stroke) ----------- */
.nav-links a:not(.cta-link) {
  position: relative;
}
.nav-links a:not(.cta-link)::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -5px;
  width: 100%;
  height: 1px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: 100% 50%;
  transition: transform .32s cubic-bezier(.22,.61,.36,1);
}
.nav-links a:not(.cta-link):hover::after {
  transform: scaleX(1);
  transform-origin: 0 50%;
}

/* ----------- Hero: plan-sheet frame corners ----------- */
.hero-frame {
  position: absolute;
  inset: 18px;
  z-index: 2;
  pointer-events: none;
}
.hero-frame i {
  position: absolute;
  width: 22px;
  height: 22px;
  border: 0 solid rgba(10,10,10,.28);
}
.hero-frame i:nth-child(1) { top: 0;    left: 0;   border-top-width: 1px; border-left-width: 1px; }
.hero-frame i:nth-child(2) { top: 0;    right: 0;  border-top-width: 1px; border-right-width: 1px; }
.hero-frame i:nth-child(3) { bottom: 0; left: 0;   border-bottom-width: 1px; border-left-width: 1px; }
.hero-frame i:nth-child(4) { bottom: 0; right: 0;  border-bottom-width: 1px; border-right-width: 1px; }

/* ----------- Hero: CAD crosshair + coordinate readout ----------- */
.hero-crosshair {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transition: opacity .35s ease;
}
.hero--bg3d:hover .hero-crosshair { opacity: 1; }
.hero-crosshair .ch-x,
.hero-crosshair .ch-y {
  position: absolute;
  background: rgba(10,10,10,.14);
  will-change: transform;
}
.hero-crosshair .ch-x { left: 0; right: 0; height: 1px; top: 0; }
.hero-crosshair .ch-y { top: 0; bottom: 0; width: 1px; left: 0; }
.hero-coords {
  position: absolute;
  top: 0;
  left: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  letter-spacing: .04em;
  color: rgba(10,10,10,.72);
  background: rgba(255,255,255,.85);
  border: 1px solid rgba(10,10,10,.16);
  border-radius: 4px;
  padding: 3px 8px;
  white-space: nowrap;
  will-change: transform;
}
@media (hover: none), (max-width: 980px) {
  .hero-crosshair { display: none; }
}

/* ----------- Hero: dimension line under headline ----------- */
.dim-line {
  display: block;
  width: min(100%, 430px);
  height: 30px;
  margin: 2px 0 16px;
  overflow: visible;
}
.dim-line line,
.dim-line path {
  stroke: rgba(10,10,10,.45);
  stroke-width: 1;
  fill: none;
}
.dim-line text {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10px;
  letter-spacing: .08em;
  fill: rgba(10,10,10,.62);
}

/* ----------- Hero: scroll cue ----------- */
.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 20px;
  z-index: 2;
  width: 1px;
  height: 46px;
  background: rgba(10,10,10,.16);
  overflow: hidden;
  pointer-events: none;
}
.scroll-cue i {
  display: block;
  width: 100%;
  height: 16px;
  background: rgba(10,10,10,.75);
}

/* ----------- Blattleiste: fixed plan-sheet rail ----------- */
.sheet-rail {
  position: fixed;
  left: 22px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 80;
  display: flex;
  gap: 12px;
  align-items: stretch;
}
.sheet-rail ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.sheet-rail .rail-line {
  position: relative;
  width: 1px;
  background: var(--line);
  overflow: hidden;
}
.sheet-rail .rail-line i {
  position: absolute;
  inset: 0;
  background: var(--ink);
  transform: scaleY(var(--sp, 0));
  transform-origin: 0 0;
}
.sheet-rail a {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10px;
  letter-spacing: .08em;
  color: #a3a4a8;
  text-decoration: none;
  transition: color .25s ease;
}
.sheet-rail a:hover,
.sheet-rail a.is-current { color: var(--ink); text-decoration: none; }
.sheet-rail.on-dark .rail-line { background: rgba(255,255,255,.2); }
.sheet-rail.on-dark .rail-line i { background: #fff; }
.sheet-rail.on-dark a { color: rgba(255,255,255,.45); }
.sheet-rail.on-dark a:hover,
.sheet-rail.on-dark a.is-current { color: #fff; }
@media (max-width: 1320px) {
  .sheet-rail { display: none; }
}

/* ----------- Manifest (scroll-scrubbed Leitsatz) ----------- */
.manifest {
  background: var(--ink);
  color: #fff;
  padding: 120px 0;
  border-bottom: 1px solid #222;
}
.manifest .eyebrow { color: rgba(255,255,255,.55); }
.manifest .eyebrow .idx { color: rgba(255,255,255,.35); border-right-color: rgba(255,255,255,.18); }
.manifest-text {
  max-width: 21ch;
  margin: 10px 0 0;
  font-size: clamp(28px, 4.4vw, 52px);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.02em;
}
.manifest-text .mw {
  color: rgba(255,255,255,.16);
  transition: color .35s ease;
}
.manifest-text .mw.is-lit { color: #fff; }
@media (prefers-reduced-motion: reduce) {
  .manifest-text .mw { color: #fff; }
}

/* ----------- Plotter beam (kontakt entry sweep) ----------- */
.beam-host { position: relative; overflow: hidden; }
.plotter-beam {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(10,10,10,.55), transparent);
  opacity: 0;
  pointer-events: none;
  z-index: 1;
}
@media (prefers-reduced-motion: no-preference) {
  html.js .beam-host.is-in .plotter-beam {
    animation: beamSweep 1.4s cubic-bezier(.65,0,.35,1) .1s forwards;
  }
}
@keyframes beamSweep {
  0%   { opacity: 0; transform: translateY(0); }
  8%   { opacity: 1; }
  92%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(640px); }
}

/* ----------- Section index (plan-sheet numbering) ----------- */
.eyebrow .idx {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: #9a9a9a;
  letter-spacing: .06em;
  padding-right: 10px;
  margin-right: 10px;
  border-right: 1px solid var(--line);
}

/* ----------- Trust strip counters ----------- */
.trust-item strong {
  font-variant-numeric: tabular-nums;
  font-size: 34px;
}
.trust-item strong sub {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
  vertical-align: baseline;
  margin-left: 2px;
}

/* ----------- Process (Leistungsphasen) ----------- */
.process-track {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, minmax(0,1fr));
  gap: 20px;
  padding-top: 26px;
}
.process-line {
  position: absolute;
  top: 6px;
  left: 7px;
  right: 7px;
  height: 1px;
  background: var(--line);
}
.process-line i {
  display: block;
  height: 100%;
  width: calc(var(--p, 0) * 100%);
  background: var(--ink);
}
.step {
  position: relative;
}
.step .node {
  position: absolute;
  top: -26px;
  left: 0;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 1.5px solid #b8bcc2;
  background: var(--bg-alt);
  transition: border-color .3s ease, background .3s ease, transform .3s ease;
}
.step.is-active .node {
  border-color: var(--ink);
  background: var(--ink);
  transform: scale(1.15);
}
.step .step-num {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  color: #9a9a9a;
  display: block;
  margin-bottom: 6px;
}
.step h3 {
  font-size: 15px;
  margin: 0 0 6px;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.step p {
  margin: 0;
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.55;
}
/* Step dimming is motion-gated further below (html.js + no-preference)
   so no-JS and reduced-motion visitors always see all steps at full ink. */

/* ----------- Projekt-Werkschau: pinned 3D wheel + window takeover -----------
   Applied by JS only on desktop + fine pointer + motion OK (`.showcase-on`).
   Without the class, the section stays the plain reveal grid — that IS the
   mobile / reduced-motion / no-JS fallback. */
.showcase-on {
  padding: 0;
  background: var(--ink);
  border: 0;
  height: 100vh;
  min-height: 640px;
}
.showcase-on .wrap {
  position: relative;
  height: 100%;
  max-width: none;
  padding: 0;
  overflow: hidden;
}
/* The section header belongs to the grid fallback only — the pinned stage
   speaks through the sheets themselves and the HUD. */
.showcase-on .section-head { display: none; }
.showcase-on .projects {
  position: absolute;
  inset: 0;
  display: block;
  perspective: 1500px;
  perspective-origin: 50% 45%;
}
.showcase-on .proj-card {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(42vw, 640px);
  height: min(68vh, 740px);
  will-change: transform, opacity;
  background: rgba(20,20,22,.82);
  border-color: rgba(255,255,255,.14);
  box-shadow: 0 60px 140px -40px rgba(0,0,0,.85);
  overflow: hidden;
  backdrop-filter: blur(8px);
  /* Side cards are click targets that rotate the wheel */
  cursor: pointer;
}
.showcase-on .proj-card.is-front { cursor: auto; }
.showcase-on .proj-card:not(.is-front):hover { border-color: rgba(255,255,255,.4); }
.showcase-on .proj-thumb {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 58%;
  border-bottom: 1px solid rgba(255,255,255,.1);
  background: #101012;
}
.showcase-on .proj-thumb::after { background: none; }
.showcase-on .proj-body {
  position: absolute;
  left: 0;
  right: 0;
  top: 58%;
  bottom: 0;
  z-index: 2;
  padding: 20px 26px;
  background: none;
  overflow: hidden;
}
.showcase-on .proj-body h3 { color: #fff; }
.showcase-on .proj-body p { color: rgba(255,255,255,.74); }
.showcase-on .proj-body .tag { background: rgba(255,255,255,.14); color: #fff; }
.showcase-on .proj-open { background: #fff; color: #111; }
.showcase-on .proj-open:hover { background: var(--brand-2); color: #fff; }

/* Showcase HUD (sheet counter, dots, progress) */
.show-hud { display: none; }
.showcase-on .show-hud {
  display: flex;
  position: absolute;
  bottom: 4.5vh;
  left: 50%;
  transform: translateX(-50%);
  z-index: 200;
  align-items: center;
  gap: 18px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  letter-spacing: .1em;
  color: rgba(255,255,255,.78);
  /* Dark chip so the HUD survives a white plan page behind it */
  background: rgba(10,10,10,.58);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px;
  padding: 10px 18px;
  backdrop-filter: blur(6px);
}
.show-hud em { font-style: normal; color: #fff; }
.hud-title {
  color: #fff;
  max-width: 240px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-left: 1px solid rgba(255,255,255,.22);
  padding-left: 16px;
}
.hud-dots { display: flex; gap: 9px; }
.hud-dots button {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.45);
  background: transparent;
  cursor: pointer;
  padding: 0;
  transition: background .25s ease, border-color .25s ease, transform .25s ease;
}
.hud-dots button:hover { border-color: #fff; }
.hud-dots button.is-active { background: #fff; border-color: #fff; transform: scale(1.2); }
.hud-bar {
  width: 130px;
  height: 1px;
  background: rgba(255,255,255,.22);
  overflow: hidden;
}
.hud-bar i {
  display: block;
  height: 100%;
  width: 100%;
  background: #fff;
  transform: scaleX(0);
  transform-origin: 0 50%;
}

/* ----------- Footer watermark ----------- */
.site-footer {
  position: relative;
  overflow: hidden;
}
.site-footer .foot { position: relative; z-index: 1; }
.foot-watermark {
  position: absolute;
  right: -14px;
  bottom: -70px;
  font-size: clamp(140px, 24vw, 340px);
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px #2c2c2c;
  pointer-events: none;
  user-select: none;
}

/* ----------- Reveal system + hero entrance (motion-gated) ----------- */
@media (prefers-reduced-motion: no-preference) {

  html.js [data-reveal] {
    transition:
      opacity .75s cubic-bezier(.22,.61,.36,1),
      transform .75s cubic-bezier(.22,.61,.36,1);
    transition-delay: calc(var(--rd, 0) * 90ms);
  }
  html.js [data-reveal]:not(.is-in) {
    opacity: 0;
    transform: translateY(24px);
  }

  /* Hero headline: line-by-line rise out of a clipped box */
  html.js .hero--bg3d h1 .w {
    display: block;
    overflow: hidden;
  }
  html.js .hero--bg3d h1 .w > span {
    display: block;
    transform: translateY(112%);
    animation: wordRise .95s cubic-bezier(.22,.61,.36,1) forwards;
  }
  html.js .hero--bg3d h1 .w:nth-child(1) > span { animation-delay: .18s; }
  html.js .hero--bg3d h1 .w:nth-child(2) > span { animation-delay: .34s; }

  html.js .hero--bg3d .eyebrow,
  html.js .hero--bg3d .lede,
  html.js .hero--bg3d .hero-cta,
  html.js .hero--bg3d .hero-meta {
    opacity: 0;
    animation: fadeUp .85s cubic-bezier(.22,.61,.36,1) forwards;
  }
  html.js .hero--bg3d .eyebrow   { animation-delay: .05s; }
  html.js .hero--bg3d .lede      { animation-delay: .65s; }
  html.js .hero--bg3d .hero-cta  { animation-delay: .8s; }
  html.js .hero--bg3d .hero-meta { animation-delay: .95s; }

  /* Dimension line draws itself */
  html.js .dim-line .dim-stroke {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: drawStroke 1.1s cubic-bezier(.65,0,.35,1) .7s forwards;
  }
  html.js .dim-line text {
    opacity: 0;
    animation: fadeUp .6s ease 1.4s forwards;
  }

  /* Process steps dim until the plotter line reaches them */
  html.js .step { opacity: .45; transition: opacity .4s ease; }
  html.js .step.is-active { opacity: 1; }

  .scroll-cue i { animation: cueDrop 2s cubic-bezier(.65,0,.35,1) infinite; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .scroll-cue { display: none; }
  .hero-crosshair { display: none; }
}

@keyframes wordRise {
  to { transform: translateY(0); }
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes drawStroke {
  to { stroke-dashoffset: 0; }
}
@keyframes cueDrop {
  0%   { transform: translateY(-18px); }
  60%  { transform: translateY(48px); }
  100% { transform: translateY(48px); }
}

/* ============================================================
   SPACE MODE — light paper, sections floating without panels
   The Higgsfield hero still is a fixed full-viewport backdrop that
   drifts gently and fades out on scroll; every section below is
   transparent and floats on the same light paper. Applied via
   <body class="space"> on index.html only — the legal pages keep
   the classic theme. (The Three.js scene was removed 2026-08 on
   partner request; do not reintroduce a WebGL background.)
   ============================================================ */
body.space {
  background: #faf9f7;
  color: var(--ink);
}
body.space .hero--bg3d { background: transparent; }
/* Higgsfield still of the house — fixed hero backdrop, faded out by JS */
body.space .hero-visual {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
  z-index: 0;
  pointer-events: none;
}
/* The hero's paper wall dissolves toward the hero's bottom edge so the
   fixed backdrop blends seamlessly into the paper below. */
body.space .hero-bg-overlay {
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 80%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 80%, transparent 100%);
}
/* Every content wrapper lifts above the fixed backdrop */
body.space .wrap {
  position: relative;
  z-index: 2;
}
/* Monochrome plan-style map */
body.space .kontakt-map iframe {
  filter: grayscale(1) contrast(1.05);
}

/* Header floats on the paper */
body.space .site-header {
  background: rgba(250,249,247,.72);
  border-bottom-color: var(--line);
  backdrop-filter: blur(14px) saturate(120%);
}

/* Sections dissolve — no panels, no borders, just paper and air */
body.space .section { padding: 150px 0; background: transparent; }
body.space .section-alt { background: transparent; border: 0; }

/* Ablauf: faint Lageplan line drawing under the Leistungsphasen — the section
   is a plan sheet, so it gets plan paper. Kept near-invisible so the plotter
   line and steps stay in charge. */
body.space #ablauf { position: relative; overflow: hidden; }
body.space #ablauf::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("assets/lageplan.webp") center 30% / cover no-repeat;
  opacity: .07;
  filter: grayscale(1);
  pointer-events: none;
}
body.space .eckdaten { background: transparent; border: 0; padding: 90px 0; }
body.space .manifest { background: transparent; border: 0; padding: 170px 0; }
body.space .manifest .eyebrow { color: var(--brand-2); }
body.space .manifest .eyebrow .idx { color: #9a9a9a; border-right-color: var(--line); }
body.space .manifest-text .mw { color: rgba(10,10,10,.15); }
body.space .manifest-text .mw.is-lit { color: var(--ink); }
@media (prefers-reduced-motion: reduce) {
  body.space .manifest-text .mw { color: var(--ink); }
}

/* Werkschau wheel: white plan sheets on the light stage */
body.space .showcase-on { background: transparent; }
body.space .section.showcase-on { padding: 0; }
body.space .showcase-on .proj-card {
  background: rgba(255,255,255,.94);
  border-color: var(--line);
  box-shadow: 0 40px 110px -40px rgba(0,0,0,.3);
}
body.space .showcase-on .proj-card:not(.is-front):hover { border-color: #9aa0a6; }
body.space .showcase-on .proj-thumb { background: #fff; border-bottom-color: var(--line); }
body.space .showcase-on .proj-body h3 { color: var(--ink); }
body.space .showcase-on .proj-body p { color: var(--ink-soft); }
body.space .showcase-on .proj-body .tag { background: #ececee; color: var(--ink); }
body.space .showcase-on .proj-open { background: var(--brand); color: #fff; }
body.space .showcase-on .proj-open:hover { background: var(--brand-2); color: #fff; }
body.space .show-hud {
  color: rgba(10,10,10,.75);
  background: rgba(255,255,255,.72);
  border-color: var(--line);
}
body.space .show-hud em,
body.space .hud-title { color: var(--ink); }
body.space .hud-title { border-left-color: var(--line); }
body.space .hud-dots button { border-color: rgba(10,10,10,.4); }
body.space .hud-dots button:hover { border-color: var(--ink); }
body.space .hud-dots button.is-active { background: var(--ink); border-color: var(--ink); }
body.space .hud-bar { background: rgba(10,10,10,.18); }
body.space .hud-bar i { background: var(--ink); }

/* Footer floats at the bottom of the page */
body.space .site-footer {
  background: transparent;
  border-top: 1px solid var(--line);
  color: var(--ink-soft);
}
body.space .foot strong { color: var(--ink); }
body.space .foot a { color: var(--ink-soft); }
body.space .foot a:hover { color: var(--ink); }
body.space .copy { border-top-color: var(--line); }
body.space .foot-watermark { -webkit-text-stroke-color: #dcdddb; }
body.space .plotter-beam { background: linear-gradient(90deg, transparent, rgba(10,10,10,.4), transparent); }

/* ----------- Award-upgrade responsive ----------- */
@media (max-width: 980px) {
  .process-track { grid-template-columns: repeat(2, minmax(0,1fr)); row-gap: 30px; padding-top: 0; }
  .process-line { display: none; }
  .step .node { display: none; }
  .foot-watermark { bottom: -30px; font-size: clamp(110px, 30vw, 220px); }
}
@media (max-width: 640px) {
  .process-track { grid-template-columns: 1fr; }
  .dim-line { width: 100%; }
}

/* ----------- Responsive ----------- */
@media (max-width: 980px) {
  .hero { padding: 72px 0 64px; }
  .hero-grid { grid-template-columns: 1fr; gap: 36px; }
  .hero-meta { grid-template-columns: 1fr 1fr; }

  .hero--bg3d .hero-grid { grid-template-columns: 1fr; }
  /* Portrait crop of the hero still: center it on the house body, not the
     right facade edge (the composition parks the house on the right). */
  body.space .hero-visual { object-position: 62% center; }
  .hero-bg-overlay {
    background:
      linear-gradient(180deg,
        rgba(250,249,247,.95) 0%,
        rgba(250,249,247,.82) 42%,
        rgba(250,249,247,.55) 68%,
        rgba(250,249,247,.92) 100%);
  }

  .services,
  .projects { grid-template-columns: repeat(2, minmax(0,1fr)); }

  .team { grid-template-columns: 1fr; }
  .kontakt-grid { grid-template-columns: 1fr; gap: 32px; }
  .foot { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
  /* Keep brand + CTA, drop only the section links (skill: no hamburger) */
  .nav-links a:not(.cta-link) { display: none; }
  .nav { height: 64px; }
  .section { padding: 64px 0; }

  .services,
  .projects { grid-template-columns: 1fr; }

  .hero-meta { grid-template-columns: 1fr; }
  .foot { grid-template-columns: 1fr; }

  .hero-card dl > div { grid-template-columns: 100px 1fr; }
  .contact-list li { grid-template-columns: 100px 1fr; }

  .trust-strip { gap: 28px; }
  .trust-item strong { font-size: 22px; }
}