/* =================================================================
   site.css — Sektionen, Komponenten, Motion-States, Responsive
   ================================================================= */

/* -----------------------------------------------------------------
   1. ImageFrame — einheitliches Bildtreatment (§13.2)
   Entsaettigung + Gruenschleier + feine Koernung gegen Anti-Patterns
----------------------------------------------------------------- */
.frame {
  position: relative;
  overflow: hidden;
  background: var(--graphit-2);
  isolation: isolate;
}
.frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(.42) contrast(1.05) brightness(.9) saturate(.85);
}
/* Gruenschleier */
.frame::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(45,68,58,.10), rgba(20,20,18,.32));
  mix-blend-mode: multiply;
  z-index: 1; pointer-events: none;
}
/* feine Koernung */
.frame::after {
  content: "";
  position: absolute; inset: 0;
  z-index: 2; pointer-events: none;
  opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}
.frame--ratio-wide   { aspect-ratio: 16 / 9; }
.frame--ratio-tall   { aspect-ratio: 3 / 4; }
.frame--ratio-square { aspect-ratio: 1 / 1; }
.frame--ratio-photo  { aspect-ratio: 3 / 2; }

/* -----------------------------------------------------------------
   2. PrecisionCTA — Textlink mit praeziser Unterlinie (§16.10)
----------------------------------------------------------------- */
.cta {
  display: inline-flex;
  align-items: center;
  gap: .7em;
  font-family: var(--font-mono);
  font-size: clamp(13px, 1.1vw, 15px);
  letter-spacing: .04em;
  padding-bottom: 7px;
  position: relative;
  color: inherit;
  transition: color var(--t-hover) var(--ease-ui);
}
.cta::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transform-origin: right;
  transform: scaleX(1);
  opacity: .35;
  transition: transform .34s var(--ease-out), opacity var(--t-hover);
}
.cta::before {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--gruen-line);
  transform-origin: left;
  transform: scaleX(0);
  transition: transform .42s var(--ease-out);
}
.cta:hover::after  { transform: scaleX(0); }
.cta:hover::before { transform: scaleX(1); }
.cta .arrow { transition: transform .3s var(--ease-out); }
.cta:hover .arrow { transform: translateX(4px); }
.cta--accent { color: var(--gruen-line); }

/* -----------------------------------------------------------------
   3. SectionHeader / EditorialTextBlock
----------------------------------------------------------------- */
.sec-head { margin-bottom: var(--space-lg); }
.sec-head .eyebrow { display: block; margin-bottom: var(--space-sm); }
.sec-head__title {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.0;
  font-size: clamp(2rem, 5vw, 3.4rem);
  letter-spacing: -.01em;
  max-width: 16ch;
}
.editorial p { max-width: var(--c-text); }
.editorial p + p { margin-top: 1.1em; }

/* =================================================================
   NAVBAR (§19)
   ================================================================= */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background .35s var(--ease-ui), border-color .35s;
}
/* Solid-Zustand: nach dem Scrollen aus dem Hero heraus */
.nav--solid {
  background: color-mix(in srgb, var(--weiss) 86%, transparent);
  backdrop-filter: blur(12px) saturate(120%);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
  border-bottom: 1px solid var(--line-light);
}
.nav__inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 80px;
  position: relative; z-index: 60; /* ueber dem Mobile-Panel (z-40) */
}
.brand { display: flex; align-items: baseline; gap: .6rem; }
.brand__mark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.35rem;
  letter-spacing: .02em;
  color: var(--weiss);
  text-transform: uppercase;
  transition: color .3s var(--ease-ui);
}
.brand__place {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--stahl);
  transition: color .3s var(--ease-ui);
}
.nav__links { display: flex; align-items: center; gap: clamp(1.4rem, 3vw, 2.8rem); }
.nav__link {
  font-family: var(--font-mono);
  font-size: 13px; letter-spacing: .04em;
  color: rgba(243, 241, 236, .72);
  position: relative; padding: 4px 0;
  transition: color var(--t-hover);
}
.nav__link:hover { color: var(--weiss); }
.nav__link[aria-current="page"] { color: var(--weiss); }
.nav__link[aria-current="page"]::after {
  content: ""; position: absolute; left: 0; bottom: -2px;
  width: 100%; height: 1px; background: var(--gruen-line);
}
.nav__cta { margin-left: clamp(.5rem, 2vw, 1.5rem); }

.nav__toggle { display: none; width: 40px; height: 40px; position: relative; }
.nav__toggle span {
  position: absolute; left: 8px; right: 8px; height: 1.5px; background: var(--nebel);
  transition: transform .3s var(--ease-out), opacity .2s, background .3s;
}

/* Solid-Navbar (heller Grund): dunkle Schrift */
.nav--solid .brand__mark { color: var(--ink); }
.nav--solid .brand__place { color: var(--stahl-dim); }
.nav--solid .nav__link { color: var(--stahl-dim); }
.nav--solid .nav__link:hover,
.nav--solid .nav__link[aria-current="page"] { color: var(--ink); }
.nav--solid .nav__toggle span { background: var(--ink); }

/* Offenes Mobile-Menue: Bar verschmilzt mit dunklem Panel (gewinnt ueber --solid) */
.nav.is-open { background: transparent; border-color: transparent; }
.nav.is-open .brand__mark { color: var(--weiss); }
.nav.is-open .brand__place { color: var(--stahl); }
.nav.is-open .nav__toggle span { background: var(--nebel); }
.nav__toggle span:nth-child(1) { top: 15px; }
.nav__toggle span:nth-child(2) { bottom: 15px; }

/* Mobile-Panel */
.nav__panel { display: none; }

/* =================================================================
   HERO — bespoke, hell/editorial (§16.3, helle Variante)
   ================================================================= */
.hero {
  position: relative;
  min-height: 100svh;
  min-height: clamp(600px, 100svh, 1040px);
  display: flex; align-items: flex-end;
  overflow: hidden;
  background: var(--ink-deep);
  color: var(--nebel);
}
.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__media .frame--hero { width: 100%; height: 100%; box-shadow: none; }
.frame--hero img {
  filter: grayscale(.14) contrast(1.04) brightness(.98) saturate(.9);
  transform: scale(1.08);
  will-change: transform;
}
.frame--hero::before { display: none; }
.frame--hero::after { opacity: .26; }
/* Scrim: oben leicht (Navbar lesbar), unten kraeftig (Text lesbar),
   Mitte bleibt hell -> bewusste Kombination aus hell und dunkel */
.hero__media::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    linear-gradient(to top, rgba(14,14,12,.95) 0%, rgba(14,14,12,.62) 28%, rgba(14,14,12,.2) 54%, rgba(14,14,12,0) 74%),
    linear-gradient(105deg, rgba(14,14,12,.72) 0%, rgba(14,14,12,.34) 38%, rgba(14,14,12,.04) 64%, rgba(14,14,12,0) 80%),
    linear-gradient(to bottom, rgba(14,14,12,.5) 0%, rgba(14,14,12,0) 15%);
}
.hero__inner {
  position: relative; z-index: 3; width: 100%;
  padding-bottom: clamp(44px, 8vh, 104px);
  padding-top: clamp(120px, 20vh, 220px);
}
.hero__eyebrow { display: block; margin-bottom: var(--space-md); color: rgba(243, 241, 236, .82); text-shadow: 0 1px 12px rgba(0, 0, 0, .45); }
.hero__title {
  font-weight: 600;
  font-size: clamp(2.9rem, 8.4vw, 7.4rem);
  line-height: .93;
  letter-spacing: -.015em;
  color: var(--weiss);
  text-shadow: 0 2px 34px rgba(0, 0, 0, .3);
}
.hero__line { display: block; }
.hero__sub {
  margin-top: var(--space-md);
  max-width: 48ch;
  color: var(--nebel);
  font-size: clamp(17px, 1.5vw, 20px);
  text-shadow: 0 1px 18px rgba(0, 0, 0, .4);
}
.hero__actions {
  margin-top: var(--space-lg);
  display: flex; flex-wrap: wrap; gap: clamp(1.4rem, 4vw, 3rem);
  align-items: center;
}
.hero__utility {
  margin-top: clamp(28px, 5vh, 56px);
  display: flex; flex-wrap: wrap; gap: 1rem 1.8rem;
  font-family: var(--font-mono);
  font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--stahl);
  border-top: 1px solid var(--line-dark);
  padding-top: var(--space-md);
}
.hero__utility span { display: inline-flex; align-items: center; gap: .6rem; }
.hero__utility span::before { content: ""; width: 5px; height: 5px; background: var(--gruen-line); border-radius: 50%; }

/* --- Light-Surface Varianten fuer dunkel-konzipierte Komponenten --- */
.surface-white .prow, .surface-light .prow,
.surface-white .prow:last-child, .surface-light .prow:last-child { border-color: var(--line-light); }
.surface-white .prow__title, .surface-light .prow__title { color: var(--graphit); }
.surface-white .prow__num, .surface-light .prow__num,
.surface-white .prow__desc, .surface-light .prow__desc { color: var(--stahl-dim); }
.surface-white .prow.is-active .prow__title, .surface-light .prow.is-active .prow__title { color: var(--ink); }
.surface-white .prow.is-active .prow__num, .surface-light .prow.is-active .prow__num { color: var(--gruen); }
.surface-white .seq-cap, .surface-light .seq-cap { border-color: var(--line-light); color: var(--stahl-dim); }

/* =================================================================
   STATEMENT (§16.4)
   ================================================================= */
.statement__grid { row-gap: var(--space-md); align-items: start; }
.statement__label { grid-column: 1 / 4; }
.statement__body  { grid-column: 4 / 13; }
.statement__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.9rem, 4.6vw, 3.6rem);
  line-height: 1.04;
  letter-spacing: -.01em;
  max-width: 18ch;
}
.statement__title em { font-style: normal; color: var(--gruen); }
.statement__p { margin-top: var(--space-md); max-width: 52ch; color: var(--graphit); }

/* =================================================================
   PROCESS ROWS (§16.5) — keine Karten
   ================================================================= */
.process { }
.prow {
  display: grid;
  grid-template-columns: 4rem 1fr;
  gap: clamp(1rem, 4vw, 3rem);
  padding-block: clamp(28px, 4vw, 48px);
  border-top: 1px solid var(--line-dark);
  position: relative;
  transition: background .5s var(--ease-ui);
}
.prow:last-child { border-bottom: 1px solid var(--line-dark); }
.prow__num {
  font-family: var(--font-mono);
  font-size: 13px; color: var(--stahl);
  letter-spacing: .05em;
  padding-top: .4em;
}
.prow__body { display: grid; grid-template-columns: 1fr; gap: .6rem; max-width: 60ch; }
.prow__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.7rem, 4vw, 3rem);
  line-height: 1;
  color: var(--nebel);
  transition: color .4s, transform .5s var(--ease-out);
}
.prow__desc { color: var(--stahl); max-width: 48ch; }
/* aktiver Zustand via JS .is-active */
.prow::before {
  content: ""; position: absolute; left: 0; top: -1px;
  width: 0; height: 2px; background: var(--gruen-line);
  transition: width .6s var(--ease-out);
}
.prow.is-active::before { width: 4rem; }
.prow.is-active .prow__num { color: var(--gruen-line); }
.prow.is-active .prow__title { color: var(--weiss); }

/* =================================================================
   LEISTUNGSFENSTER (§16.6) — Liste + wechselndes Bild
   ================================================================= */
.window__grid { gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.window__list { grid-column: 1 / 8; }
.window__media { grid-column: 8 / 13; position: sticky; top: 120px; }
.window__visual { position: relative; }
.window__visual .frame { position: absolute; inset: 0; opacity: 0; transition: opacity .5s var(--ease-ui); }
.window__visual .frame.is-shown { opacity: 1; }
.window__visual { aspect-ratio: 3/4; }

.wrow {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1.5rem;
  padding-block: clamp(20px, 2.6vw, 32px);
  border-top: 1px solid var(--line-dark);
  cursor: default;
}
.window__list .wrow:last-child { border-bottom: 1px solid var(--line-dark); }
.wrow__name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.6rem, 3.6vw, 2.8rem);
  line-height: 1.02;
  color: var(--stahl);
  transition: color .3s var(--ease-ui), transform .4s var(--ease-out);
}
.wrow__desc { max-width: 30ch; color: var(--stahl-dim); font-size: clamp(14px,1.2vw,16px); text-align: right; flex-shrink: 0; }
.wrow__idx { font-family: var(--font-mono); font-size: 12px; color: var(--stahl-dim); }
.wrow:hover .wrow__name,
.wrow.is-active .wrow__name { color: var(--weiss); transform: translateX(6px); }

/* =================================================================
   BILDSEQUENZ — bespoke (§16.7) asymmetrisch + Parallax
   ================================================================= */
.sequence__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 1fr;
  gap: clamp(16px, 2.4vw, 32px);
}
.seq-a { grid-column: 1 / 8;  }
.seq-b { grid-column: 8 / 13; }
.seq-c { grid-column: 1 / 5;  }
.seq-d { grid-column: 5 / 13; }
.seq-cap {
  margin-top: var(--space-lg);
  display: flex; justify-content: space-between; gap: 2rem;
  border-top: 1px solid var(--line-dark); padding-top: var(--space-md);
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em;
  color: var(--stahl); text-transform: uppercase;
}

/* =================================================================
   BERATUNGSVERSPRECHEN (§16.8)
   ================================================================= */
.promise__grid { gap: clamp(2rem,5vw,4rem); align-items: end; }
.promise__title { grid-column: 1 / 8; }
.promise__principles { grid-column: 8 / 13; }
.promise__big {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.2rem, 6vw, 5rem);
  line-height: .98;
  letter-spacing: -.015em;
  color: var(--weiss);
  max-width: 12ch;
}
.principle {
  display: grid; grid-template-columns: 2rem 1fr; gap: 1rem;
  padding-block: 1.1rem;
  border-top: 1px solid var(--line-dark);
  color: var(--nebel);
}
.principle:last-child { border-bottom: 1px solid var(--line-dark); }
.principle__n { font-family: var(--font-mono); font-size: 12px; color: var(--gruen-line); padding-top: .15em; }

/* =================================================================
   LOKALE VERANKERUNG (§16.9)
   ================================================================= */
.local__grid { gap: clamp(2rem,5vw,4rem); align-items: center; }
.local__text { grid-column: 1 / 6; }
.local__media { grid-column: 6 / 13; }
.local__title {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.8rem, 4vw, 3rem); line-height: 1.02;
  max-width: 16ch; margin-bottom: var(--space-md);
}
.local__meta { display: grid; gap: .4rem; font-family: var(--font-mono); font-size: 13px; color: var(--stahl); line-height: 1.7; }
.local__meta strong { color: var(--nebel); font-weight: 500; }

/* =================================================================
   ABSCHLUSS-CTA — bespoke (§16.10)
   ================================================================= */
.endcta { text-align: left; }
.endcta__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.4rem, 7vw, 6rem);
  line-height: .96;
  letter-spacing: -.015em;
  color: var(--weiss);
  max-width: 18ch;
}
.endcta__row { margin-top: var(--space-lg); display: flex; flex-wrap: wrap; gap: clamp(1.4rem,4vw,3rem); }

/* =================================================================
   FOOTER (§20)
   ================================================================= */
.footer { background: var(--ink-deep); color: var(--nebel); padding-block: var(--space-lg) var(--space-md); }
.footer__line {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.8rem, 5vw, 3.6rem); line-height: 1; letter-spacing: -.01em;
  color: var(--weiss); max-width: 16ch;
  padding-bottom: var(--space-lg); margin-bottom: var(--space-lg);
  border-bottom: 1px solid var(--line-dark);
}
.footer__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem); }
.footer__col h3 {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--stahl); font-weight: 500; margin-bottom: 1rem;
}
.footer__col a, .footer__col p { display: block; color: var(--nebel); font-size: 15px; line-height: 1.9; }
.footer__col a { color: var(--stahl); transition: color var(--t-hover); }
.footer__col a:hover { color: var(--nebel); }
.footer__bottom {
  margin-top: var(--space-lg); padding-top: var(--space-md);
  border-top: 1px solid var(--line-dark);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; color: var(--stahl-dim);
}
.footer__bottom a { color: var(--stahl-dim); }
.footer__bottom a:hover { color: var(--stahl); }

/* =================================================================
   LEISTUNGSSEITE (§17)
   ================================================================= */
.svc-intro__title {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(2.4rem, 6.5vw, 5.2rem); line-height: .98;
  letter-spacing: -.015em; max-width: 16ch; color: var(--weiss);
}
.svc-intro__body { margin-top: var(--space-md); max-width: 54ch; color: var(--nebel); font-size: clamp(17px,1.5vw,20px); }

.svc__layout { display: grid; grid-template-columns: 220px 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.svc__nav { position: sticky; top: 110px; align-self: start; }
.svc__nav ol { display: grid; gap: .2rem; counter-reset: ch; }
.svc__nav a {
  display: flex; gap: .8rem; align-items: baseline;
  font-family: var(--font-mono); font-size: 13px; color: var(--stahl-dim);
  padding: .5rem 0; border-left: 1px solid transparent; padding-left: 1rem;
  margin-left: -1px;
  transition: color .3s, border-color .3s;
}
.svc__nav a .num { color: var(--stahl-dim); }
.svc__nav a:hover { color: var(--nebel); }
.svc__nav a.is-active { color: var(--weiss); border-left-color: var(--gruen-line); }
.svc__nav a.is-active .num { color: var(--gruen-line); }

.chapter { padding-block: clamp(48px, 8vw, 110px); border-top: 1px solid var(--line-dark); }
.chapter:first-child { border-top: none; padding-top: 0; }
.chapter__eyebrow { display:flex; gap:1rem; align-items:center; margin-bottom: var(--space-md); }
.chapter__title {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(2rem, 5vw, 3.8rem); line-height: 1; letter-spacing: -.01em;
  color: var(--weiss); max-width: 18ch; margin-bottom: var(--space-md);
}
.chapter__summary { font-size: clamp(18px,1.6vw,22px); line-height:1.45; max-width: 40ch; color: var(--nebel); margin-bottom: var(--space-lg); }
.chapter__cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,4vw,4rem); align-items: start; }
.chapter__block h4 {
  font-family: var(--font-mono); font-size: 11px; letter-spacing:.14em; text-transform: uppercase;
  color: var(--stahl); font-weight: 500; margin-bottom: 1rem;
}
.chapter__sits { display: flex; flex-wrap: wrap; gap: .5rem; }
.chapter__sits li {
  font-family: var(--font-mono); font-size: 12.5px; letter-spacing:.03em;
  color: var(--nebel); border: 1px solid var(--line-dark);
  padding: .4rem .7rem; border-radius: 2px;
}
.chapter__logic { color: var(--stahl); max-width: 46ch; }
.chapter__media { margin-top: var(--space-lg); }

/* Diagnose bespoke (featured) */
.chapter--featured {
  background: var(--ink-deep);
  margin-inline: calc(var(--pad) * -1);
  padding-inline: var(--pad);
  border-radius: 0;
}
.diag__grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem,5vw,4.5rem); align-items: center; }
.diag__status {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--gruen-line); margin-bottom: var(--space-md);
}
.diag__status::before { content:""; width: 7px; height: 7px; border-radius: 50%; background: var(--gruen-line); box-shadow: 0 0 0 4px rgba(78,110,94,.18); }
.diag__title {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(2.2rem,5.5vw,4.4rem); line-height:.98; letter-spacing:-.015em;
  color: var(--weiss); max-width: 14ch; margin-bottom: var(--space-md);
}
.diag__media .frame { aspect-ratio: 4/3; }
.diag__media .frame img { filter: grayscale(.2) contrast(1.1) brightness(1); }

/* =================================================================
   KONTAKTSEITE (§18)
   ================================================================= */
.ksero__title {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(2.4rem, 6.5vw, 5rem); line-height: 1; letter-spacing: -.015em;
  color: var(--weiss); max-width: 18ch;
}
.ksero__body { margin-top: var(--space-md); max-width: 52ch; color: var(--nebel); font-size: clamp(17px,1.5vw,20px); }

.kinfo__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1.5rem, 4vw, 3rem) clamp(2rem,6vw,5rem); }
.kinfo__item { border-top: 1px solid var(--line-light); padding-top: 1rem; }
.surface-dark .kinfo__item, .surface-deep .kinfo__item { border-color: var(--line-dark); }
.kinfo__label { font-family: var(--font-mono); font-size: 11px; letter-spacing:.14em; text-transform: uppercase; color: var(--stahl); margin-bottom: .6rem; }
.kinfo__value { font-family: var(--font-display); font-weight:500; font-size: clamp(1.3rem,2.4vw,1.8rem); line-height:1.1; }
.kinfo__value a { transition: color var(--t-hover); }
.kinfo__value a:hover { color: var(--gruen-line); }
.kinfo__note { color: var(--stahl); font-size: 14px; font-family: var(--font-body); margin-top:.4rem; }

/* Formular */
.form__layout { display: grid; grid-template-columns: 1.4fr .8fr; gap: clamp(2rem,5vw,4.5rem); align-items: start; }
.form { display: grid; gap: var(--space-md); }
.field { display: grid; gap: .5rem; }
.field--row { grid-template-columns: 1fr 1fr; gap: var(--space-md); display: grid; }
.field label { font-family: var(--font-mono); font-size: 12px; letter-spacing:.08em; text-transform: uppercase; color: var(--stahl); }
.field input, .field textarea, .field select {
  background: transparent;
  border: none; border-bottom: 1px solid var(--stahl-dim);
  color: var(--weiss); padding: .7rem 0; border-radius: 0;
  transition: border-color .3s var(--ease-ui);
}
.field input::placeholder, .field textarea::placeholder { color: var(--stahl-dim); opacity: .7; }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-bottom-color: var(--gruen-line);
}
.field textarea { resize: vertical; min-height: 90px; }
.field.is-error input, .field.is-error textarea { border-bottom-color: #B4584C; }
.field__err { font-family: var(--font-mono); font-size: 11px; color: #C97468; min-height: 1em; }
.form__submit { margin-top: var(--space-sm); justify-self: start; }
.form__hint { font-family: var(--font-mono); font-size: 11px; color: var(--stahl-dim); }

.help { }
.help h3 { font-family: var(--font-mono); font-size: 11px; letter-spacing:.14em; text-transform: uppercase; color: var(--stahl); margin-bottom: 1.2rem; }
.help li { display: grid; grid-template-columns: 1.5rem 1fr; gap: .6rem; padding-block: .7rem; border-top: 1px solid var(--line-dark); color: var(--nebel); font-size: 15px; }
.help li::before { content: "—"; color: var(--gruen-line); }

.form__success {
  border: 1px solid var(--gruen-line);
  padding: var(--space-md);
  background: rgba(45,68,58,.14);
  font-size: 17px; color: var(--nebel);
  display: none;
}
.form__success.is-shown { display: block; }

.block-eyebrow {
  display: block;
  margin-bottom: var(--space-md);
}

.section--intro { padding-top: clamp(120px,18vh,220px); }
.section--flush-top { padding-top: 0; }
.window__cta { margin-top: var(--space-lg); }
.local__intro { color: var(--graphit); max-width: 38ch; }
.local__meta--muted { margin-top: var(--space-md); color: var(--stahl-dim); }
.sec-head__title--ink { color: var(--ink); }
.kinfo__value--compact {
  font-size: clamp(1rem,1.6vw,1.2rem);
  line-height: 1.5;
}
.local__meta--compact { font-size: 14px; line-height: 1.8; }
.endcta__title--compact {
  font-size: clamp(1.8rem,4.5vw,3.4rem);
  max-width: 24ch;
}

/* Anfahrt */
.map__grid { display: grid; grid-template-columns: 1fr 320px; gap: clamp(1.5rem,4vw,3rem); align-items: stretch; }
.map__embed { position: relative; min-height: 360px; border: 1px solid var(--line-dark); overflow: hidden; background: var(--graphit-2); }
.map__embed iframe { width: 100%; height: 100%; min-height: 360px; border: 0; filter: grayscale(.6) invert(.92) contrast(.9); }
.map__side { display: grid; align-content: center; gap: var(--space-md); }

/* =================================================================
   MOTION-STATES (§14 / §27) — Reveals
   ================================================================= */
[data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .8s var(--ease-out), transform .9s var(--ease-out); }
[data-reveal].is-in { opacity: 1; transform: none; }
[data-reveal="mask"] { display: inline-block; clip-path: inset(0 0 100% 0); transform: none; opacity: 1; transition: clip-path .85s var(--ease-out); will-change: clip-path; }
[data-reveal="mask"].is-in { clip-path: inset(0 0 0 0); }
[data-reveal="settle"] { opacity: 0; transition: opacity 1.1s var(--ease-out); }
[data-reveal="settle"] img { transform: scale(1.08); transition: transform 1.25s var(--ease-out); }
[data-reveal="settle"].is-in { opacity: 1; }
[data-reveal="settle"].is-in img { transform: scale(1); }
[data-delay="1"] { transition-delay: .08s; }
[data-delay="2"] { transition-delay: .16s; }
[data-delay="3"] { transition-delay: .24s; }
[data-delay="4"] { transition-delay: .32s; }

.no-js [data-reveal],
.no-js [data-reveal="mask"],
.no-js [data-reveal="settle"] { opacity: 1; transform: none; clip-path: none; }
.no-js [data-reveal="settle"] img { transform: none; }

/* =================================================================
   RESPONSIVE (§25)
   ================================================================= */
@media (max-width: 760px) {
  /* Mobile: staerkeres Scrim, damit der Text auf dem Vollbild-Hero klar lesbar bleibt */
  .hero__media::after {
    background:
      linear-gradient(to top, rgba(14,14,12,.96) 0%, rgba(14,14,12,.72) 32%, rgba(14,14,12,.32) 60%, rgba(14,14,12,.08) 82%),
      linear-gradient(to bottom, rgba(14,14,12,.55) 0%, rgba(14,14,12,0) 14%);
  }
  .hero__title { font-size: clamp(2.8rem, 13vw, 4.4rem); }
}

@media (max-width: 1024px) {
  .statement__label { grid-column: 1 / 13; }
  .statement__body  { grid-column: 1 / 13; }
  .window__list { grid-column: 1 / 13; }
  .window__media { display: none; }
  .promise__title, .promise__principles { grid-column: 1 / 13; }
  .local__text, .local__media { grid-column: 1 / 13; }
  .seq-a,.seq-b,.seq-c,.seq-d { grid-column: 1 / 13; }
  .svc__layout { grid-template-columns: 1fr; }
  .svc__nav { display: none; }
  .diag__grid { grid-template-columns: 1fr; }
  .form__layout { grid-template-columns: 1fr; }
  .map__grid { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .nav__links { display: none; }
  .nav__toggle { display: block; }
  .nav.is-open .nav__toggle span:nth-child(1) { top: 19px; transform: rotate(45deg); }
  .nav.is-open .nav__toggle span:nth-child(2) { bottom: 20px; transform: rotate(-45deg); }
  .nav__panel {
    display: grid; align-content: start; position: fixed; inset: 0;
    height: 100dvh;
    background: var(--ink-deep); color: var(--nebel);
    padding: calc(80px + var(--space-lg)) var(--pad) var(--space-lg);
    gap: .2rem; transform: translateY(-8px); opacity: 0; pointer-events: none;
    transition: opacity .32s var(--ease-ui), transform .4s var(--ease-out);
    z-index: 40;
  }
  .nav.is-open .nav__panel { opacity: 1; transform: none; pointer-events: auto; }
  .nav__panel a {
    font-family: var(--font-display); font-weight: 500; font-size: clamp(2rem, 9vw, 2.8rem);
    color: var(--nebel); padding: .7rem 0; border-bottom: 1px solid var(--line-dark);
    transition: color var(--t-hover);
  }
  .nav__panel a[aria-current="page"] { color: var(--gruen-line); }
  .nav__panel .cta {
    margin-top: var(--space-lg); font-size: 15px;
    font-family: var(--font-mono); color: var(--gruen-line);
    border-bottom: none; padding-bottom: 7px;
  }

  .footer__grid { grid-template-columns: repeat(2, 1fr); row-gap: var(--space-md); }
  .prow { grid-template-columns: 2.6rem 1fr; }
  .chapter__cols { grid-template-columns: 1fr; }
  .field--row { grid-template-columns: 1fr; }
  .wrow { flex-direction: column; gap: .5rem; }
  .wrow__desc { text-align: left; }
  .kinfo__grid { grid-template-columns: 1fr; }
}