/* ==========================================================================
   Seitenspezifische Bausteine
   ========================================================================== */

/* Abwechselnde Sektionstiefe - Bänder statt endloser gleicher Fläche. */
.band {
  background: linear-gradient(180deg, var(--void), var(--base) 55%, var(--void));
  border-block: 1px solid var(--edge-soft);
}

/* --------------------------------------------------------------------------
   Hero - Phase 00 BAUSTELLE
   Vollflächiges Senkrechtluftbild. Kein Splitscreen, keine eingeschobene
   zweite Aufnahme: das Luftbild IST das Raster, das die Marke behauptet.
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: end;
  min-height: min(92svh, 900px);
  padding-block: var(--sp-7) var(--sp-6);
  background: var(--void);
  overflow: clip;
  isolation: isolate;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* Grading des Leitbilds. Steht bewusst NACH .gr-air, damit der Hero dunkler
   läuft als die übrigen Luftbilder - links liegt die helle Betonplatte. */
.hero__media img {
  object-position: 58% 50%;
  filter: brightness(0.72) saturate(0.9) contrast(1.05);
}

/* Gerichteter Scrim. Ohne ihn steht über der hellen Betonplatte links kein
   lesbarer Text - gemessen, nicht geschätzt. */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image: linear-gradient(
    100deg,
    rgb(8 8 10 / 95%) 0 32%,
    rgb(8 8 10 / 72%) 52%,
    rgb(8 8 10 / 24%) 100%
  );
}

/* Der diagonale Keil: die Arbeitskante aus detail-diagonalkante, aufs
   Layout übertragen. Liegt auf ::before, nie auf dem beobachteten Element. */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  background: rgb(8 8 10 / 82%);
  clip-path: polygon(0 0, 44% 0, 32% 100%, 0 100%);
}

.hero__in {
  position: relative;
  z-index: 3;
  width: min(100% - var(--gutter) * 2, var(--shell));
  margin-inline: auto;
}

.hero__col {
  max-width: min(44rem, 58%);
}

.hero__eyebrow {
  margin-bottom: var(--sp-4);
}

.hero__h {
  font-size: clamp(2.2rem, 0.9rem + 3.9vw, 4.9rem);
  font-weight: 800;
  line-height: 0.92;
  letter-spacing: -0.03em;
  margin-bottom: var(--sp-4);
  text-wrap: nowrap;
}

/* Zeilenmaske für den Einlauf: jede Zeile fährt aus ihrem eigenen Fenster. */
.hero__line {
  display: block;
  overflow: hidden;
}

.hero__line > span {
  display: block;
}

.js .hero__line > span {
  transform: translateY(1.1em);
  transition: transform 620ms var(--ease-out);
}

.js .hero.is-in .hero__line > span {
  transform: none;
}

.js .hero__line:nth-child(2) > span {
  transition-delay: 80ms;
}

.js .hero__line:nth-child(3) > span {
  transition-delay: 160ms;
}

/* Genau EIN Hervorhebungsblock in der H1. Geschert wie der Logo-Balken,
   nur flacher - 4 Grad statt 45, sonst kippt der Satz. */
.hero__h em {
  font-style: normal;
  position: relative;
  white-space: nowrap;
  padding-inline: 0.14em;
  margin-inline: -0.14em;
  isolation: isolate;
}

.hero__h em::before {
  content: '';
  position: absolute;
  inset: 0.09em 0 0.17em;
  z-index: -1;
  background: var(--orange);
  transform: skewX(-4deg);
}

.js .hero__h em::before {
  transform: skewX(-4deg) scaleX(0);
  transform-origin: left;
  transition: transform 420ms var(--ease-out) 380ms;
}

.js .hero.is-in .hero__h em::before {
  transform: skewX(-4deg) scaleX(1);
}

.hero__h em {
  color: var(--orange-ink);
}

.hero__lead {
  max-width: 58ch;
  color: var(--ink-2);
  font-size: var(--step-1);
  line-height: 1.55;
}

.hero__acts {
  margin-top: var(--sp-5);
}

/* Phasenlegende: die sieben Zustände der Seite in einer Zeile. */
.phaselegend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.1rem;
  margin-top: var(--sp-6);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--edge);
}

.phaselegend a {
  font-family: var(--mono);
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  /* Die Legende steht über dem Foto - --ink-4 bliebe dort unter 4,5:1. */
  color: var(--ink-3);
  text-shadow: 0 1px 6px rgb(0 0 0 / 85%);
  text-decoration: none;
  padding-block: 0.3rem;
  transition: color var(--t-fast) var(--ease-out);
}

.phaselegend a:hover,
.phaselegend a.is-active {
  color: var(--orange);
}

/* Bildannotation direkt auf dem Foto, ohne Kasten. */
.hero__annot {
  right: var(--gutter);
  bottom: calc(var(--sp-4) + 6.2rem);
  z-index: 3;
  max-width: min(60ch, 46vw);
}

/* Flugfenster. Die Videoquelle ist 848x478 - nie über 848 CSS-Pixel zeigen. */
.hero__flight {
  position: absolute;
  right: var(--gutter);
  bottom: var(--sp-5);
  z-index: 3;
  width: min(620px, 42vw);
  display: none;
}

@media (min-width: 1025px) {
  .hero__flight {
    display: block;
  }
}

.vid {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--void);
}

.vid video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.78) contrast(1.06);
}

/* Feine Kornschicht gegen die Kompressionsartefakte der Quelle, dazu eine
   Innenvignette. Beides klein - es soll das Bild tragen, nicht verstecken. */
.vid__grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.5;
  background-image:
    radial-gradient(circle at 20% 30%, rgb(255 255 255 / 6%) 0 1px, transparent 1px),
    radial-gradient(circle at 70% 60%, rgb(255 255 255 / 5%) 0 1px, transparent 1px),
    radial-gradient(ellipse at 50% 50%, transparent 62%, rgb(0 0 0 / 42%) 100%);
  background-size: 5px 5px, 7px 7px, 100% 100%;
}

.vid__btn {
  position: absolute;
  left: 8px;
  bottom: 8px;
  z-index: 3;
  min-height: 34px;
  padding: 0.3rem 0.7rem;
  background: color-mix(in srgb, var(--void) 82%, transparent);
  border: 1px solid var(--edge);
  color: var(--ink-2);
  font-family: var(--mono);
  font-size: var(--step--2);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}

.vid__btn:hover {
  border-color: var(--orange);
  color: var(--orange);
}

@media (max-width: 900px) {
  .hero {
    align-content: start;
    min-height: min(80svh, 720px);
    padding-block: var(--sp-5) var(--sp-5);
  }

  .hero__col {
    max-width: none;
  }

  /* Auf dem Telefon steht der Satz oben, das Foto trägt die untere Hälfte.
     Der Keil bleibt als linke Diagonale erhalten, verdunkelt aber nicht
     mehr das ganze Bild. */
  .hero::before {
    clip-path: polygon(0 0, 34% 0, 14% 100%, 0 100%);
    background: rgb(8 8 10 / 70%);
  }

  .hero__scrim {
    background-image: linear-gradient(
      180deg,
      rgb(8 8 10 / 92%) 0 34%,
      rgb(8 8 10 / 52%) 68%,
      rgb(8 8 10 / 8%) 100%
    );
  }

  /* Das Luftbild darf auf dem Telefon nicht in Schwarz absaufen - es ist
     die Substanz des ersten Bildschirms, nicht sein Hintergrund. */
  .hero__media img {
    filter: brightness(0.94) saturate(0.92) contrast(1.04);
  }

  .hero__annot {
    position: static;
    width: min(100% - var(--gutter) * 2, var(--shell));
    margin: var(--sp-5) auto 0;
    max-width: none;
  }

  .phaselegend {
    margin-top: var(--sp-5);
  }
}

/* --------------------------------------------------------------------------
   Handwerk-Sektion
   -------------------------------------------------------------------------- */

.craft__in {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
  gap: var(--sp-6);
  align-items: center;
}

/* Detail-Triptychon: eine große Aufnahme links, zwei kleinere rechts
   gestapelt. Asymmetrisch, damit es nicht wie eine Bildergalerie wirkt. */
/* Querformatige Ausschnitte brauchen ein querformatiges Leitfeld - sonst
   schneidet object-fit die Motive seitlich weg. */
.details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: 1.32fr 1fr;
  gap: 0.7rem;
  aspect-ratio: 1 / 1;
}

.detail {
  position: relative;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--edge);
  border-radius: var(--r-md);
  background: var(--panel-2);
}

.detail--lead {
  grid-column: 1 / span 2;
}

.detail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--ease-out);
}

.detail:hover img {
  transform: scale(1.04);
}

.detail figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 1.6rem 0.9rem 0.75rem;
  font-size: var(--step--2);
  line-height: 1.35;
  color: var(--ink);
  background: linear-gradient(180deg, transparent, rgb(6 6 8 / 88%) 46%);
}

/* Der orange Balken aus dem Logo an der Kante des Leitbilds. */
.detail--lead::after {
  content: '';
  position: absolute;
  left: 0;
  top: 22%;
  width: 4px;
  height: 40%;
  background: var(--orange);
  box-shadow: 0 0 26px rgb(240 156 0 / 55%);
}

@media (max-width: 980px) {
  .craft__in {
    grid-template-columns: 1fr;
  }

  .details {
    aspect-ratio: 3 / 2;
  }
}

@media (max-width: 560px) {
  .details {
    grid-template-rows: 1.15fr 1fr;
    aspect-ratio: 4 / 5;
  }
}

.ticks {
  list-style: none;
  padding: 0;
  margin-top: var(--sp-5);
  display: grid;
  gap: 0.75rem;
}

.ticks li {
  position: relative;
  padding-left: 1.8rem;
  font-size: var(--step--1);
  color: var(--ink-2);
  line-height: 1.55;
}

.ticks li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.52em;
  width: 10px;
  height: 10px;
  background: var(--orange);
  transform: rotate(45deg);
}

/* --------------------------------------------------------------------------
   Projekte
   -------------------------------------------------------------------------- */

.projgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: var(--sp-4);
}

.proj {
  margin: 0;
  border: 1px solid var(--edge-soft);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--panel);
  transition:
    border-color var(--t-fast) var(--ease-out),
    transform var(--t-mid) var(--ease-out);
}

.proj:hover {
  border-color: var(--stone-600);
  transform: translateY(-3px);
}

.proj__media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--panel-2);
}

.proj__media picture,
.proj__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 900ms var(--ease-out);
}

.proj:hover .proj__media img {
  transform: scale(1.035);
}

.proj__cap {
  padding: var(--sp-4);
  display: grid;
  gap: 0.5rem;
}

.proj__cap h3 {
  font-size: var(--step-1);
}

.proj__cap p {
  font-size: var(--step--1);
  color: var(--ink-3);
  line-height: 1.55;
}

/* --------------------------------------------------------------------------
   Inhaber
   -------------------------------------------------------------------------- */

.owner__in {
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1fr);
  gap: var(--sp-6);
  align-items: center;
}

.owner__media .fig {
  aspect-ratio: 4 / 5;
  border: 1px solid var(--edge);
}

@media (max-width: 900px) {
  .owner__in {
    grid-template-columns: 1fr;
  }
}

.ownerbox {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
  gap: 0.7rem;
  margin-top: var(--sp-5);
}

.ownerbox a {
  display: grid;
  gap: 0.3rem;
  padding: var(--sp-3) var(--sp-4);
  background: var(--panel);
  border: 1px solid var(--edge);
  border-radius: var(--r-sm);
  text-decoration: none;
  transition:
    border-color var(--t-fast) var(--ease-out),
    background var(--t-fast) var(--ease-out);
}

.ownerbox a:hover {
  border-color: var(--orange);
  background: var(--panel-2);
}

.ownerbox b {
  font-family: var(--mono);
  font-size: var(--step-0);
  font-weight: 500;
  letter-spacing: -0.01em;
}

/* --------------------------------------------------------------------------
   Abschluss-Aufforderung
   -------------------------------------------------------------------------- */

.cta {
  position: relative;
  overflow: clip;
  background: var(--void);
  border-top: 1px solid var(--edge);
  padding-block: var(--sp-8);
  isolation: isolate;
}

.cta__bars {
  position: absolute;
  inset: -30% -10%;
  z-index: -1;
  opacity: 0.11;
  background: repeating-linear-gradient(
    var(--brand-angle),
    var(--orange) 0 40px,
    transparent 40px 150px
  );
  mask-image: linear-gradient(280deg, #000, transparent 62%);
}

.cta__in {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 24rem);
  gap: var(--sp-6);
  align-items: center;
}

.cta__h {
  font-size: var(--step-5);
  margin-block: var(--sp-3) var(--sp-4);
}

.cta__acts {
  display: grid;
  gap: 0.75rem;
}

@media (max-width: 900px) {
  .cta__in {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   Innenseiten: Kopfbereich
   -------------------------------------------------------------------------- */

.phead {
  position: relative;
  padding-top: calc(var(--header-h) / 2 + var(--sp-6));
  padding-bottom: var(--sp-6);
  border-bottom: 1px solid var(--edge-soft);
  /* clip statt hidden: verhindert, dass die überstehenden Diagonalbalken
     die Dokumentbreite aufblähen (scrollWidth > clientWidth). */
  overflow: clip;
}

.phead__bars {
  position: absolute;
  inset: -40% -10% auto;
  height: 220%;
  z-index: -1;
  opacity: 0.07;
  background: repeating-linear-gradient(
    var(--brand-angle),
    var(--orange) 0 30px,
    transparent 30px 118px
  );
  mask-image: linear-gradient(250deg, #000, transparent 60%);
}

.phead h1 {
  max-width: 18ch;
  margin-block: var(--sp-3) var(--sp-4);
}

.phead__in {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 26rem);
  gap: var(--sp-5);
  align-items: end;
}

@media (max-width: 900px) {
  .phead__in {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   Leistungsdetail
   -------------------------------------------------------------------------- */

.svc__hero {
  position: relative;
  margin: 0 0 var(--sp-7);
  aspect-ratio: 21 / 9;
  border: 1px solid var(--edge);
  border-radius: var(--r-md);
  overflow: hidden;
  /* Diagonaler Anschnitt an der oberen Kante - dasselbe Motiv wie im Hero. */
  clip-path: polygon(0 3.2vw, 100% 0, 100% 100%, 0 100%);
}

.svc__hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.svc__heroCap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  gap: 0.3rem;
  padding: 3rem var(--sp-4) var(--sp-3);
  font-size: var(--step--1);
  color: var(--ink);
  background: linear-gradient(180deg, transparent, rgb(6 6 8 / 88%) 52%);
}

@media (max-width: 720px) {
  .svc__hero {
    aspect-ratio: 4 / 3;
  }
}

/* Einstieg: Text links, Merkposten-Spalte rechts. */
.svc__intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 20rem);
  gap: var(--sp-6);
  align-items: start;
}

@media (max-width: 1024px) {
  .svc__intro {
    grid-template-columns: 1fr;
  }
}

.railcol {
  display: grid;
  gap: var(--sp-4);
  position: sticky;
  top: calc(var(--header-h) + 1.5rem);
}

@media (max-width: 1024px) {
  .railcol {
    position: static;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  }
}

.rail {
  padding: var(--sp-4) 0 var(--sp-4) var(--sp-4);
  background: none;
  border: 0;
  border-left: 1px solid var(--orange);
  border-radius: 0;
}

.rail ul {
  list-style: none;
  padding: 0;
  margin-top: var(--sp-3);
  display: grid;
  gap: 0.6rem;
}

.rail li {
  position: relative;
  padding-left: 1.4rem;
  font-size: var(--step--1);
  line-height: 1.45;
  color: var(--ink-2);
}

.rail li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 7px;
  height: 7px;
  background: var(--orange);
  transform: rotate(45deg);
}

.railfig {
  margin: 0;
  border: 1px solid var(--edge);
  overflow: hidden;
  background: var(--panel);
  box-shadow: var(--cast-sm);
}

.railfig img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.railfig figcaption {
  padding: 0.7rem 0.85rem 0.9rem;
  font-size: var(--step--2);
  line-height: 1.4;
  color: var(--ink-3);
  border-top: 1px solid var(--edge-soft);
}

.rail__cta {
  display: grid;
  gap: 0.35rem;
  padding: var(--sp-4) 0;
  background: none;
  border: 0;
  border-top: 1px solid var(--edge);
  border-bottom: 1px solid var(--edge);
  border-radius: 0;
  text-decoration: none;
  transition:
    border-color var(--t-fast) var(--ease-out),
    background var(--t-fast) var(--ease-out);
}

.rail__cta:hover {
  border-color: var(--orange);
  background: none;
}

.rail__cta b {
  font-family: var(--display);
  font-size: var(--step-0);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
}

/* Schichtliste neben der Zeichnung */
.layerlist {
  display: grid;
  gap: 6px;
}

/* Einstiegstext der Leistungs- und Regionsseiten */
.intro {
  max-width: 68ch;
}

.intro p {
  max-width: 68ch;
  color: var(--ink-2);
  line-height: 1.72;
}

.intro p + p {
  margin-top: 1.05em;
}

.intro__lead {
  font-size: var(--step-1);
  line-height: 1.52;
  letter-spacing: -0.014em;
  color: var(--ink);
}

/* Drei Spalten statt auto-fit: die Leistungslisten haben 5 bis 9 Punkte,
   bei vier Spalten bleibt fast immer eine fast leere Zeile stehen. */
.scope {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
  gap: 0 var(--sp-5);
  border-top: 1px solid var(--edge);
}

@media (min-width: 1100px) {
  .scope {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.scope__item {
  padding: var(--sp-4) 0 var(--sp-5);
  border-bottom: 1px solid var(--edge);
  display: grid;
  gap: 0.5rem;
  align-content: start;
}

.scope__item h3 {
  font-size: var(--step-1);
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
}

.scope__item p {
  font-size: var(--step--1);
  color: var(--ink-3);
  line-height: 1.6;
  max-width: 44ch;
}

/* Ablauf als Zeitstrahl mit diagonalen Marken.
   Ab Desktop zweispaltig - einspaltig bliebe die halbe Seite leer. */
.steps {
  display: grid;
  gap: 0 var(--sp-6);
  margin-left: 0.6rem;
}

@media (min-width: 1100px) {
  .steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.step {
  position: relative;
  padding: 0 0 var(--sp-5) var(--sp-5);
  border-left: 1px solid var(--edge);
}

.step::before {
  content: '';
  position: absolute;
  left: -7px;
  top: 0.5rem;
  width: 13px;
  height: 13px;
  background: var(--orange);
  transform: rotate(45deg);
}

.step h3 {
  font-size: var(--step-1);
  margin-bottom: 0.35rem;
}

.step p {
  color: var(--ink-3);
  font-size: var(--step--1);
  line-height: 1.6;
  max-width: 56ch;
}

.step__n {
  font-family: var(--mono);
  font-size: var(--step--2);
  color: var(--orange);
  letter-spacing: 0.1em;
  display: block;
  margin-bottom: 0.3rem;
}

/* Materialtafel */
.mats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: 1px;
  border-radius: var(--r-md);
  overflow: hidden;
}

.mat {
  background: var(--panel);
  box-shadow: 0 0 0 1px var(--edge);
  padding: var(--sp-4);
  display: grid;
  gap: 0.4rem;
  align-content: start;
}

.mat b {
  font-family: var(--display);
  font-size: var(--step-0);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.mat span {
  font-size: var(--step--1);
  color: var(--ink-3);
  line-height: 1.55;
}

/* --------------------------------------------------------------------------
   Aufklappbare Fragen
   -------------------------------------------------------------------------- */

.faq {
  border-top: 1px solid var(--edge);
  max-width: 78ch;
}

.faq details {
  border-bottom: 1px solid var(--edge);
}

.faq summary {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: var(--sp-4) 2.5rem var(--sp-4) 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--display);
  font-size: var(--step-1);
  font-weight: 700;
  letter-spacing: -0.022em;
  position: relative;
  transition: color var(--t-fast) var(--ease-out);
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary:hover {
  color: var(--orange);
}

.faq summary::after {
  content: '';
  position: absolute;
  right: 0.4rem;
  top: calc(var(--sp-4) + 0.45em);
  width: 11px;
  height: 11px;
  border-right: 2px solid var(--orange);
  border-bottom: 2px solid var(--orange);
  transform: rotate(45deg);
  transition: transform var(--t-mid) var(--ease-out);
}

.faq details[open] summary::after {
  transform: rotate(-135deg);
}

.faq details > div {
  padding: 0 2.5rem var(--sp-4) 0;
  color: var(--ink-2);
  max-width: 68ch;
  line-height: 1.65;
}

/* --------------------------------------------------------------------------
   Ratgeber
   -------------------------------------------------------------------------- */

.artmeta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.4rem;
  align-items: center;
  font-family: var(--mono);
  font-size: var(--step--2);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-4);
}

/* Harte Obergrenze für die Zeilenlänge. Die Absätze der Content-Pipeline sind
   lang; ohne diese Grenze laufen sie auf 90+ Zeichen und werden unlesbar. */
.article {
  max-width: 68ch;
}

.article p,
.article li {
  max-width: 68ch;
}

.article h2 {
  font-size: var(--step-2);
  margin-top: var(--sp-6);
  margin-bottom: var(--sp-3);
  scroll-margin-top: calc(var(--header-h) + 2rem);
}

.article p + p {
  margin-top: 1.05em;
}

.article p {
  color: var(--ink-2);
  line-height: 1.72;
}

.article ul {
  margin-top: 1em;
  padding-left: 0;
  list-style: none;
  display: grid;
  gap: 0.6rem;
}

.article ul li {
  position: relative;
  padding-left: 1.6rem;
  color: var(--ink-2);
  line-height: 1.6;
}

.article ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 8px;
  height: 8px;
  background: var(--orange);
  transform: rotate(45deg);
}

/* Die Tabelle ist breiter als die Textspalte. Damit sie auf dem Telefon
   nicht abgeschnitten und unerreichbar ist, bekommt sie einen eigenen
   Scrollbereich - inklusive sichtbarem Hinweis und Tastaturfokus. */
.tablewrap {
  position: relative;
  margin-top: var(--sp-4);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--edge);
  border-radius: var(--r-md);
  /* Verlauf am rechten Rand signalisiert: hier geht es weiter. */
  background:
    linear-gradient(90deg, var(--base) 30%, transparent) left / 40px 100% no-repeat,
    linear-gradient(-90deg, var(--base) 30%, transparent) right / 40px 100% no-repeat;
  background-attachment: local, local;
}

.tablewrap:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
}

.tablehint {
  display: none;
  margin-top: 0.5rem;
  font-family: var(--mono);
  font-size: var(--step--2);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-4);
}

@media (max-width: 760px) {
  .tablehint {
    display: block;
  }
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--step--1);
  min-width: 34rem;
}

thead th {
  text-align: left;
  padding: 0.85rem 1rem;
  background: var(--panel-2);
  border-bottom: 1px solid var(--edge);
  font-family: var(--mono);
  font-size: var(--step--2);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
  white-space: nowrap;
}

tbody td {
  padding: 0.8rem 1rem;
  border-bottom: 1px solid var(--edge-soft);
  color: var(--ink-2);
  vertical-align: top;
}

tbody tr:last-child td {
  border-bottom: 0;
}

tbody tr:hover td {
  background: var(--panel);
}

caption {
  caption-side: bottom;
  padding: 0.7rem 1rem;
  font-size: var(--step--2);
  color: var(--ink-4);
  text-align: left;
}

/* Leitbild der Ratgeberbeiträge. Bewusst breiter als die Textspalte -
   das bricht die Textwand auf und nutzt die sonst tote rechte Fläche. */
.artvisual {
  margin: 0 0 var(--sp-6);
  max-width: min(100%, 62rem);
}

.artvisual--img {
  border: 1px solid var(--edge);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--panel);
}

.artvisual--img img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.artvisual--img figcaption {
  padding: 0.8rem 1rem 1rem;
  font-size: var(--step--2);
  color: var(--ink-3);
  border-top: 1px solid var(--edge-soft);
}

.takeaways {
  margin-top: var(--sp-6);
  padding: var(--sp-5);
  background: var(--panel);
  border: 1px solid var(--edge);
  border-left: 3px solid var(--orange);
  border-radius: var(--r-md);
}

.takeaways h2 {
  margin-top: 0;
  font-size: var(--step-1);
}

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

.formwrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 22rem);
  gap: var(--sp-6);
  align-items: start;
}

@media (max-width: 980px) {
  .formwrap {
    grid-template-columns: 1fr;
  }
}

.form {
  display: grid;
  gap: var(--sp-5);
}

.formstep {
  display: grid;
  gap: var(--sp-3);
  padding-bottom: var(--sp-5);
  border-bottom: 1px solid var(--edge-soft);
}

.formstep:last-of-type {
  border-bottom: 0;
}

.formstep__h {
  display: flex;
  align-items: baseline;
  gap: 0.8rem;
  margin-bottom: var(--sp-2);
}

.formstep__h h3 {
  font-size: var(--step-1);
}

.aside {
  position: sticky;
  top: calc(var(--header-h) + 1.5rem);
  display: grid;
  gap: var(--sp-4);
  padding: var(--sp-5);
  background: var(--panel);
  border: 1px solid var(--edge);
  border-radius: var(--r-md);
}

.aside h3 {
  font-size: var(--step-1);
}

.aside p {
  font-size: var(--step--1);
  color: var(--ink-3);
  line-height: 1.6;
}

/* --------------------------------------------------------------------------
   Einsatzgebiet
   -------------------------------------------------------------------------- */

/* Rahmen an den Elementen statt Rasterfarbe im Hintergrund: sonst rendern
   leere Rasterzellen als graue Blöcke, sobald die Anzahl nicht aufgeht. */
.places {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  gap: 1px;
  border-radius: var(--r-md);
  overflow: hidden;
}

.place {
  background: var(--panel);
  box-shadow: 0 0 0 1px var(--edge);
  padding: var(--sp-4);
  text-decoration: none;
  display: grid;
  gap: 0.35rem;
  align-content: start;
  transition: background var(--t-fast) var(--ease-out);
}

.place:hover {
  background: var(--panel-2);
}

.place b {
  font-family: var(--display);
  font-size: var(--step-1);
  font-weight: 800;
  letter-spacing: -0.026em;
}

.place span {
  font-size: var(--step--1);
  color: var(--ink-3);
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   Rechtstexte
   -------------------------------------------------------------------------- */

.legal {
  max-width: 68ch;
}

.legal h2 {
  font-size: var(--step-2);
  margin-top: var(--sp-6);
  margin-bottom: var(--sp-3);
}

.legal h3 {
  font-size: var(--step-1);
  margin-top: var(--sp-5);
  margin-bottom: var(--sp-2);
}

.legal p,
.legal li {
  color: var(--ink-2);
  line-height: 1.7;
}

.legal p + p {
  margin-top: 0.9em;
}

.legal ul {
  margin-top: 0.8em;
  padding-left: 1.3rem;
  display: grid;
  gap: 0.4rem;
}

.legal address {
  font-style: normal;
  padding: var(--sp-4);
  background: var(--panel);
  border: 1px solid var(--edge);
  border-left: 3px solid var(--orange);
  border-radius: var(--r-md);
  margin-block: var(--sp-4);
  line-height: 1.7;
}

/* --------------------------------------------------------------------------
   404
   -------------------------------------------------------------------------- */

.nf {
  min-height: 68svh;
  display: grid;
  place-items: center;
  text-align: center;
  padding-block: var(--sp-8);
}

.nf__code {
  font-family: var(--display);
  font-size: var(--step-6);
  font-weight: 900;
  letter-spacing: -0.05em;
  color: var(--orange);
  line-height: 1;
}

/* ==========================================================================
   AUSBAUSTUFE 2 - Phasenlauf der Startseite
   Eine Sektion, ein Schriftfeld, höchstens eine Maßkette. Keine Karten,
   keine Panels, keine weichen Schatten.
   ========================================================================== */

/* Sektionskopf im Register: links die Phasenkennung in Mono, rechts der
   Titel. Das Registergefühl kommt aus der Typografie, nicht aus Icons.
   Nur dort, wo eine Kennung steht - Unterseiten behalten ihren Kopf. */
.shead:has(.shead__n) {
  grid-template-columns: 152px minmax(0, 1fr);
  column-gap: var(--sp-4);
  max-width: none;
  align-items: start;
}

.shead__n {
  grid-column: 1;
  padding-top: 0.55em;
  color: var(--orange);
  line-height: 1.5;
}

.shead:has(.shead__n) h2,
.shead:has(.shead__n) p {
  grid-column: 2;
}

.shead h2 {
  font-size: var(--step-4);
  line-height: 1;
  word-break: keep-all;
}

@media (max-width: 720px) {
  .shead:has(.shead__n) {
    grid-template-columns: minmax(0, 1fr);
  }

  .shead__n {
    grid-column: 1;
    padding-top: 0;
  }

  .shead:has(.shead__n) h2,
  .shead:has(.shead__n) p {
    grid-column: 1;
  }
}

.phase {
  position: relative;
  padding-block: var(--sp-8);
}

.phase--flush {
  padding-block: 0 var(--sp-8);
}

.shead-wrap {
  padding-block: var(--sp-8) var(--sp-6);
}

.ptext {
  max-width: 62ch;
  color: var(--ink-2);
  line-height: 1.62;
}

.ptext + .ptext {
  margin-top: 1.05em;
}

.ptext--small {
  font-size: var(--step--1);
  color: var(--ink-3);
}

/* --------------------------------------------------------------------------
   01 TRAGSCHICHT
   -------------------------------------------------------------------------- */

.tragschicht {
  display: grid;
  gap: var(--sp-4);
  min-width: 0;
}

.crop {
  position: relative;
  margin: 0;
  overflow: hidden;
  background: var(--panel-2);
  box-shadow: var(--cast);
}

.crop--tall {
  aspect-ratio: 4 / 3;
}

.crop--tall img {
  object-position: 22% 60%;
}

/* Schichtliste in Mono: Nummer, Name, Stärke. Trennung nur durch Haarlinien.
   Die Zeile, auf der der Aufbau gerade steht, tritt hervor. */
.blayers {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--edge);
}

.blayer {
  display: grid;
  grid-template-columns: 2.6rem minmax(0, 1fr) auto;
  gap: 0.4rem var(--sp-3);
  align-items: baseline;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--edge);
  transition: color var(--t-mid) var(--ease-out);
}

.blayer__n {
  color: var(--ink-4);
}

.blayer__name {
  font-family: var(--display);
  font-weight: 600;
  font-size: var(--step-0);
  letter-spacing: -0.018em;
  min-width: 0;
}

.blayer__thick {
  color: var(--ink-3);
  text-align: right;
  font-size: var(--step--2);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.js .blayer.is-active .blayer__n,
.js .blayer.is-active .blayer__thick {
  color: var(--orange);
}

.js .blayer.is-passed {
  color: var(--ink-3);
}

/* --------------------------------------------------------------------------
   02 BETTUNG
   -------------------------------------------------------------------------- */

.bettung {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
}

.bettung__main {
  position: relative;
  margin: 0;
  min-height: min(88svh, 860px);
  overflow: hidden;
}

.bettung__main img {
  object-position: 54% 62%;
}

/* Runde 05: Auf 1440 px stand in diesem Rahmen ueber die volle Hoehe ein
   unscharfer Unterarm - die Bildmitte der Hochformat-Aufnahme. Der Rahmen
   ist hier 720 px breit und ueber 790 px hoch, das Foto 739 x 1600: cover
   skaliert nach der Breite und schneidet senkrecht. Die fachliche Aussage
   (Handschuh, Abziehlehre, Splittbett, gesetzte Granitkante) liegt im
   unteren Bilddrittel und ist dort auch scharf - der Fokus sitzt auf der
   Hand, der Hintergrund ist offene Blende. Der Ausschnitt wird deshalb nach
   unten gezogen. Auf dem Telefon ist der Rahmen fast quadratisch (390 x 523),
   dort sitzt 62 % bereits richtig - deshalb nur ab 901 px. */
@media (min-width: 901px) {
  .bettung__main img {
    object-position: 54% 94%;
  }
}

.bettung__annot {
  left: var(--gutter);
  bottom: var(--sp-5);
  max-width: 34ch;
}

.bettung__body {
  padding: var(--sp-8) var(--gutter) var(--sp-7);
  display: grid;
  align-content: center;
  gap: var(--sp-4);
  min-width: 0;
}

.bettung__detail {
  width: min(330px, 100%);
  margin-top: var(--sp-4);
}

/* Hochformat 744 x 992 (planum-ebene). Vorher stand hier 606/544 fuer den
   Abziehlehren-Ausschnitt - der ist entfallen, weil er dasselbe Motiv zeigte
   wie das grosse Bild der Sektion. */
.bettung__detail .plate__body {
  aspect-ratio: 744 / 992;
}

@media (max-width: 900px) {
  .bettung {
    grid-template-columns: minmax(0, 1fr);
  }

  .bettung__main {
    min-height: 62svh;
  }

  .bettung__body {
    padding-block: var(--sp-7);
  }
}

/* Verlauf unter jeder Bildannotation. Kein Kasten - eine Verdunklung, die
   dem Foto folgt und den Mono-Satz auf 4,5:1 hebt. */
.bettung__main::after,
.flaeche > figure::after,
.uebergabe__lead::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  z-index: 1;
  height: 42%;
  pointer-events: none;
  background: linear-gradient(0deg, rgb(8 8 10 / 90%) 0 24%, transparent);
}

/* --------------------------------------------------------------------------
   03 BELAG - Signaturmodul: dieselbe Fläche in drei Zuständen
   -------------------------------------------------------------------------- */

.seq {
  position: relative;
}

.seq__wrap {
  height: 300vh;
}

.seq__stage {
  position: sticky;
  top: var(--header-h);
  height: calc(100svh - var(--header-h));
  overflow: hidden;
  background: var(--void);
}

.seq__layer {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: var(--t, 0);
  filter: brightness(calc(0.82 + var(--t, 0) * 0.18)) saturate(calc(0.92 + var(--t, 0) * 0.08));
}

.seq__layer:first-child {
  opacity: 1;
}

.seq__layer img {
  object-position: 52% 50%;
}

/* Die Zustandsmarke schaltet hart um - kein Übergang. Der Zustand ist ein
   Fakt, kein Übergangszustand. */
.seq__mark {
  position: absolute;
  right: var(--gutter);
  top: var(--sp-5);
  z-index: 4;
  opacity: 0;
  color: var(--ink);
  background: color-mix(in srgb, var(--void) 72%, transparent);
  padding: 0.4rem 0.7rem;
  border-right: 2px solid var(--orange);
  letter-spacing: 0.16em;
}

.seq__layer.is-current .seq__mark {
  opacity: 1;
}

.seq__panel {
  position: absolute;
  z-index: 5;
  left: 0;
  right: 0;
  bottom: 0;
  padding: var(--sp-7) var(--gutter) var(--sp-6);
  background: linear-gradient(0deg, rgb(8 8 10 / 92%) 0 42%, transparent);
  display: grid;
  justify-items: start;
  align-content: end;
  gap: var(--sp-2);
}

.seq__h {
  font-size: var(--step-3);
  line-height: 1;
}

.seq__texts {
  position: relative;
  width: 100%;
  min-height: 6.2em;
  max-width: 56ch;
  margin-top: var(--sp-2);
}

.seq__t {
  position: absolute;
  inset: 0;
  color: var(--ink-2);
  font-size: var(--step--1);
  line-height: 1.6;
  opacity: 0;
  transition: opacity 200ms linear;
}

.seq__t.is-on {
  opacity: 1;
}

@media (min-width: 1100px) {
  .seq__panel {
    left: auto;
    right: 0;
    top: 0;
    bottom: 0;
    width: min(38rem, 42%);
    padding: var(--sp-7) var(--sp-6) var(--sp-7) var(--sp-6);
    align-content: center;
    background: linear-gradient(270deg, rgb(8 8 10 / 92%) 0 62%, transparent);
  }

  .seq__texts {
    min-height: 7.5em;
  }
}

/* Runde 05: Unter 901px stand das Signaturmodul still - drei gestapelte
   Standbilder, kein Scrub. Auf einem T3-Ziel ist das die halbe Seite ohne
   Bewegung, und zwar die Haelfte, die die meisten Besucher sehen. Die
   Buehne ist deshalb auch auf dem Telefon gepinnt, aber KUERZER (230 statt
   300 svh) und formatfuellend: sie ist das Modul selbst, nicht eine
   Randspalte neben Text. Damit bleibt K18 gewahrt - der frueher verbotene
   Fall war ein Pin, der 45 % des Schirms fuer ein Beiwerk belegte.
   Die Basisregeln (absolute Ebenen, --t-Blende, Textwechsel) gelten wieder;
   hier steht nur, was auf dem Telefon anders sein muss.
   Unter prefers-reduced-motion greift weiterhin der lineare Stapel
   (Block „prefers-reduced-motion" weiter unten) - dort ist alles sichtbar. */
@media (max-width: 900px) {
  .seq__wrap {
    height: 230svh;
  }

  .seq__stage {
    height: calc(100svh - var(--header-h));
  }

  .seq__layer img {
    object-position: 50% 46%;
  }

  .seq__mark {
    top: var(--sp-3);
    right: var(--gutter);
  }

  .seq__panel {
    padding: var(--sp-7) var(--gutter) var(--sp-5);
    background: linear-gradient(0deg, rgb(8 8 10 / 94%) 0 58%, transparent);
  }

  /* Der laengste der drei Texte braucht auf 390px fuenf Zeilen. Ohne
     reservierte Hoehe springt das Paneel beim Wechsel (CLS). */
  .seq__texts {
    min-height: 9.6em;
    margin-top: var(--sp-1);
  }

  .seq__t {
    border-left: 1px solid var(--edge);
    padding-left: 0.8rem;
  }
}

/* --------------------------------------------------------------------------
   03b DIE KANTE - Zäsur
   -------------------------------------------------------------------------- */

.kante {
  position: relative;
  padding-block: var(--sp-8);
  background: var(--void);
}

.kante__in {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: var(--sp-7);
  align-items: center;
}

.kante__plate {
  max-width: 900px;
}

.kante__plate .plate__body {
  aspect-ratio: 942 / 707;
}

.kante__body {
  display: grid;
  gap: var(--sp-3);
  align-content: center;
  min-width: 0;
}

.kante__art {
  width: min(220px, 60%);
  aspect-ratio: 4 / 3;
  border: 1px solid var(--edge);
  margin-top: var(--sp-2);
}

.kante__art svg {
  width: 100%;
  height: 100%;
}

.kante__label {
  color: var(--orange);
}

.kante__act {
  margin-top: var(--sp-3);
}

@media (max-width: 900px) {
  .kante__in {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-5);
  }
}

/* --------------------------------------------------------------------------
   04 FLÄCHE
   -------------------------------------------------------------------------- */

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

.flaeche > figure {
  position: relative;
  margin: 0;
  min-height: min(92svh, 900px);
  overflow: hidden;
}

.flaeche__annot {
  left: var(--sp-4);
  bottom: var(--sp-4);
  right: var(--sp-4);
}

.flaeche__pair {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  gap: var(--sp-5);
  margin-top: var(--sp-7);
  align-items: end;
}

.flaeche__pair figure {
  margin: 0;
  display: grid;
  gap: 0;
}

.flaeche__mediaW {
  position: relative;
  aspect-ratio: 2.2 / 1;
  overflow: hidden;
  background: var(--panel-2);
  box-shadow: var(--cast);
  margin-bottom: var(--sp-3);
}

.flaeche__mediaS {
  position: relative;
  aspect-ratio: 990 / 600;
  overflow: hidden;
  background: var(--panel-2);
  box-shadow: var(--cast-sm);
  margin-bottom: var(--sp-3);
}

/* Maßkette an der Rinnenflucht. Sie bezeichnet die Flucht, sie misst nicht -
   deshalb ohne Zahlenwert (Regel K1). */
.dimline {
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 16%;
  height: 1px;
  background: var(--orange);
  opacity: 0.85;
}

.dimline::before,
.dimline::after {
  content: '';
  position: absolute;
  top: -5px;
  width: 1px;
  height: 11px;
  background: var(--orange);
}

.dimline::before {
  left: 0;
}

.dimline::after {
  right: 0;
}

@media (max-width: 900px) {
  .flaeche {
    grid-template-columns: minmax(0, 1fr);
  }

  .flaeche > figure {
    min-height: 68svh;
  }

  .flaeche__pair {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --------------------------------------------------------------------------
   04b MATERIAL - Materialleiste
   Der Streifen unter dem Zeiger geht auf, die übrigen teilen den Rest.
   Auf Touch: Schnappscrollen statt Interpolation.
   -------------------------------------------------------------------------- */

.matstrip {
  display: flex;
  height: 22vh;
  min-height: 190px;
  background: var(--void);
  overflow: hidden;
}

.matstrip__s {
  position: relative;
  margin: 0;
  flex: var(--f, 1) 1 0;
  min-width: 0;
  overflow: hidden;
  border-left: 1px solid var(--void);
  transition: flex-grow 340ms var(--ease-out);
}

.matstrip__s:first-child {
  border-left: 0;
}

.matstrip__s img {
  filter: brightness(0.62) saturate(0.85);
  transition: filter 340ms var(--ease-out);
}

.matstrip__s.is-active img {
  filter: brightness(0.92) saturate(0.95);
}

.matstrip__s::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 45%;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(0deg, rgb(8 8 10 / 88%) 0 30%, transparent);
}

.matstrip__l {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  padding: 0.6rem 0.7rem;
  text-align: center;
  color: var(--tone, var(--kalkstein));
  text-shadow: 0 1px 8px rgb(0 0 0 / 95%);
  letter-spacing: 0.14em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-bottom: 2px solid var(--tone-line, transparent);
}

.matstrip__s.is-active .matstrip__l {
  color: var(--orange);
}

.matstrip__s[data-tone='klinker'] { --tone: #e2a99d; --tone-line: var(--klinker); }
.matstrip__s[data-tone='kalkstein'] { --tone: #e8e2d6; --tone-line: var(--kalkstein); }
.matstrip__s[data-tone='beton'] { --tone: #d6d3cd; --tone-line: var(--beton); }
.matstrip__s[data-tone='wasser'] { --tone: #a7cbc3; --tone-line: var(--wasser); }

@media (max-width: 900px) {
  .matstrip {
    height: 30vh;
    min-height: 220px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .matstrip::-webkit-scrollbar {
    display: none;
  }

  .matstrip__s {
    flex: 0 0 62vw;
    scroll-snap-align: start;
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   05 WASSER
   -------------------------------------------------------------------------- */

.wasser__note {
  color: var(--wasser);
  letter-spacing: 0.18em;
}

.wasser {
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1fr);
  gap: var(--sp-5);
  align-items: start;
}

.wasser figure {
  margin: 0;
}

.wasser__media {
  position: relative;
  overflow: hidden;
  background: var(--panel-2);
  box-shadow: var(--cast);
  margin-bottom: var(--sp-3);
}

.wasser__media--tall {
  aspect-ratio: 3 / 4;
}

.wasser__media--wide {
  aspect-ratio: 4 / 3;
}

.wasser__text {
  margin-top: var(--sp-6);
}

@media (max-width: 900px) {
  .wasser {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --------------------------------------------------------------------------
   06 ÜBERGABE
   -------------------------------------------------------------------------- */

.uebergabe__lead {
  position: relative;
  margin: 0;
  min-height: min(86svh, 860px);
  overflow: hidden;
}

.uebergabe__annot {
  left: var(--gutter);
  right: var(--gutter);
  bottom: var(--sp-5);
}

.uebergabe__head {
  margin-top: var(--sp-7);
}

.uebergabe__note {
  color: var(--ink-4);
  letter-spacing: 0.18em;
  margin-bottom: var(--sp-3);
}

.uebergabe__pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-5);
}

.uebergabe__pair figure {
  margin: 0;
}

.uebergabe__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--panel-2);
  box-shadow: var(--cast);
  margin-bottom: var(--sp-3);
}

@media (max-width: 900px) {
  .uebergabe__lead {
    min-height: 60svh;
  }

  .uebergabe__pair {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --------------------------------------------------------------------------
   07 LEISTUNGEN - Index ohne Karten, mit Hintergrundfoto
   -------------------------------------------------------------------------- */

.svcindex {
  position: relative;
  padding-block: var(--sp-8);
  overflow: clip;
  isolation: isolate;
}

.svcindex__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.svcindex__ph {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 420ms var(--ease-out);
}

.svcindex__ph.is-on {
  opacity: 0.18;
}

.svcrows {
  border-top: 1px solid var(--edge);
}

.svcrow {
  position: relative;
  display: grid;
  grid-template-columns: 4.2rem minmax(0, 1fr) minmax(0, 30ch) 9rem 2.5rem;
  align-items: center;
  gap: var(--sp-4);
  padding: clamp(1.3rem, 2.2vw, 2.2rem) 0;
  border-bottom: 1px solid var(--edge);
  text-decoration: none;
  min-height: 56px;
}

/* Die 2-px-Regel fährt von links über die Zeile - nichts hebt sich an. */
.svcrow::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 260ms var(--ease-out);
}

.svcrow:hover::after,
.svcrow:focus-visible::after,
.svcrow.is-on::after {
  transform: scaleX(1);
}

.svcrow__n {
  color: var(--ink-4);
}

.svcrow__t {
  font-family: var(--display);
  font-size: var(--step-3);
  font-weight: 700;
  letter-spacing: -0.032em;
  line-height: 1;
  min-width: 0;
}

.svcrow__d {
  font-size: var(--step--1);
  color: var(--ink-3);
  line-height: 1.5;
  min-width: 0;
}

.svcrow__p {
  color: var(--ink-4);
  font-size: var(--step--2);
  letter-spacing: 0.1em;
  white-space: nowrap;
}

.svcrow:hover .svcrow__p,
.svcrow.is-on .svcrow__p {
  color: var(--orange);
}

.svcrow__go {
  justify-self: end;
  color: var(--ink-4);
  transition: color var(--t-fast) var(--ease-out);
}

.svcrow:hover .svcrow__go {
  color: var(--orange);
}

@media (max-width: 1100px) {
  .svcrow {
    grid-template-columns: 3rem minmax(0, 1fr) 2.5rem;
    row-gap: 0.4rem;
  }

  .svcrow__d {
    grid-column: 2 / -1;
  }

  .svcrow__p {
    grid-column: 2 / -1;
  }
}

/* --------------------------------------------------------------------------
   08 STIMMEN - reiner Satz auf hellem Grund
   -------------------------------------------------------------------------- */

.voices {
  position: relative;
  padding-block: var(--sp-8);
  overflow: clip;
  isolation: isolate;
}

.voices__tex {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.06;
  mix-blend-mode: multiply;
  filter: grayscale(1);
  pointer-events: none;
}

.voices__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  gap: var(--sp-6);
}

@media (min-width: 900px) {
  .voices__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.voice {
  margin: 0;
  display: grid;
  gap: var(--sp-3);
  align-content: start;
  border-top: 1px solid var(--edge);
  padding-top: var(--sp-4);
  min-width: 0;
}

.voice p {
  font-size: var(--step-0);
  line-height: 1.6;
  color: var(--ink-2);
}

.voice footer {
  color: var(--ink-3);
  letter-spacing: 0.12em;
}

.voices__src {
  margin-top: var(--sp-6);
  color: var(--ink-3);
  letter-spacing: 0.18em;
}

/* --------------------------------------------------------------------------
   09 BETRIEB + FELDAUFNAHME
   -------------------------------------------------------------------------- */

.betrieb {
  position: relative;
  background: var(--void);
  padding-block: var(--sp-8);
}

.betrieb__in {
  display: grid;
  grid-template-columns: minmax(0, 0.6fr) minmax(0, 1fr);
  gap: var(--sp-7);
  align-items: start;
}

.betrieb__portrait {
  margin: 0;
}

.betrieb__media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--panel-2);
  box-shadow: var(--cast);
  margin-bottom: var(--sp-3);
}

.betrieb__body {
  min-width: 0;
}

.betrieb__k {
  margin-top: var(--sp-6);
  color: var(--ink-4);
  letter-spacing: 0.18em;
}

.places-list {
  list-style: none;
  padding: 0;
  margin-top: var(--sp-3);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  border-top: 1px solid var(--edge);
}

.places-list a {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--edge);
  font-family: var(--mono);
  font-size: var(--step--1);
  letter-spacing: 0.06em;
  color: var(--ink-2);
  text-decoration: none;
  transition: color var(--t-fast) var(--ease-out);
}

.places-list a:hover {
  color: var(--orange);
}

.feld {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: var(--sp-5);
  margin-top: var(--sp-8);
  align-items: start;
}

.feld__side {
  display: grid;
  gap: var(--sp-3);
  align-content: start;
  padding-top: var(--sp-4);
  min-width: 0;
}

.feld__meta {
  color: var(--ink-4);
  letter-spacing: 0.12em;
}

/* Quelle ist 848x478. Nie über 848 CSS-Pixel anzeigen.

   11.09.2026 (Runde 05): Deckel auf 640 px. Die Startseite laed denselben
   36-Sekunden-Drohnenflug zweimal - im Hero-Fenster (605 px breit, also die
   640er Fassung, 1,23 MB) und hier. Bei 848 px Anzeigebreite griff die
   Quellenwahl in site.js auf die 848er Fassung (3,09 MB) zu: 4,3 MB fuer ein
   und dieselbe Aufnahme. Mit dem Deckel liegt diese Platte unter der
   700-px-Schwelle und zieht dieselbe Datei wie das Hero-Fenster - die zweite
   Anforderung kommt aus dem Cache. Anzeige 640 px = native Breite der
   kleinen Fassung, also kein Qualitaetsverlust. */
.feld__plate {
  width: 100%;
  max-width: 640px;
}

.betrieb__act {
  margin-top: var(--sp-7);
  gap: var(--sp-5);
}

@media (max-width: 900px) {
  .betrieb__in,
  .feld {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --------------------------------------------------------------------------
   10 ANFRAGE - Felder ohne Kasten
   -------------------------------------------------------------------------- */

.ask {
  background: var(--void);
  border-top: 1px solid var(--edge);
  padding-block: var(--sp-8);
}

.ask__in {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--sp-7);
  align-items: start;
}

.ask__h {
  font-size: var(--step-4);
  line-height: 1;
  margin-block: var(--sp-3) var(--sp-4);
}

.ask__tel {
  margin-top: var(--sp-5);
  gap: var(--sp-5);
}

.form--bare {
  gap: var(--sp-4);
}

.form--bare .formstep {
  display: grid;
  gap: var(--sp-5);
  border-bottom: 0;
  padding-bottom: 0;
}

.field--bare input,
.field--bare textarea {
  padding: 0.6rem 0 0.5rem;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--edge);
  border-radius: 0;
  min-height: 44px;
}

.field--bare input:focus,
.field--bare textarea:focus {
  background: none;
  border-bottom: 2px solid var(--orange);
  outline: none;
}

.form--bare .formactions {
  display: grid;
  gap: var(--sp-3);
  justify-items: start;
  margin-top: var(--sp-3);
}

@media (max-width: 900px) {
  .ask__in {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --------------------------------------------------------------------------
   Hero-Einlauf: das Bild kommt aus dem Dunkeln und setzt sich, der Keil
   wischt von links ein. Einmalig, 0 ms nach dem Setzen der js-Klasse.
   -------------------------------------------------------------------------- */

.js .hero__media {
  transform: scale(1.05);
  filter: brightness(0.35);
  transition:
    transform 1100ms var(--ease-out),
    filter 1100ms var(--ease-out);
}

.js .hero.is-in .hero__media {
  transform: none;
  filter: none;
}

.js .hero::before {
  transform: translateX(-102%);
  transition: transform 900ms var(--ease-out) 120ms;
}

.js .hero.is-in::before {
  transform: none;
}

@media (max-width: 900px) {
  .js .hero::before {
    transform: translateY(-102%);
  }

  .js .hero.is-in::before {
    transform: none;
  }
}

/* ==========================================================================
   AUSBAUSTUFE 2 - Unterseiten
   Dasselbe System: Schriftfeld, Planrahmen, Materialkante, Mono-Bauleitebene.
   Kein Modul, das auf der Startseite schon den Auftritt hatte.
   ========================================================================== */

/* --- Seitenkopf ohne Foto ---------------------------------------------- */

.phead {
  position: relative;
  padding-top: var(--sp-6);
  padding-bottom: var(--sp-7);
  border-bottom: 0;
  overflow: clip;
  background: var(--void);
}

/* Hairline-Raster statt Diagonalbalken: der Kopf ist ein Planblatt. */
.phead__grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.5;
  background-image:
    linear-gradient(var(--edge-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--edge-soft) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(120deg, #000 4%, transparent 62%);
}

.phead .shell {
  position: relative;
  z-index: 1;
}

.phead__in {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 28rem);
  gap: var(--sp-5);
  align-items: end;
  margin-top: var(--sp-5);
}

.phead__k {
  margin-bottom: var(--sp-3);
}

.phead h1 {
  max-width: 20ch;
  word-break: keep-all;
}

.phead__lead {
  max-width: none;
  padding-bottom: 0.4rem;
}

@media (max-width: 900px) {
  .phead__in {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --- Seitenkopf mit Leitbild -------------------------------------------- */

.phero {
  position: relative;
  display: grid;
  align-content: end;
  min-height: min(56svh, 640px);
  padding-block: var(--sp-6) var(--sp-6);
  background: var(--void);
  overflow: clip;
}

.phero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.phero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image: linear-gradient(
    100deg,
    rgb(8 8 10 / 94%) 0 30%,
    rgb(8 8 10 / 74%) 54%,
    rgb(8 8 10 / 28%) 100%
  );
}

.phero__in {
  position: relative;
  z-index: 2;
}

.phero__k {
  margin-block: var(--sp-4) var(--sp-3);
}

.phero__h {
  font-size: clamp(2rem, 0.9rem + 3.2vw, 4rem);
  line-height: 0.96;
  letter-spacing: -0.03em;
  max-width: 18ch;
  word-break: keep-all;
}

.phero__lead {
  margin-top: var(--sp-4);
  max-width: 58ch;
}

@media (max-width: 900px) {
  .phero {
    min-height: min(52svh, 520px);
  }

  .phero__scrim {
    background-image: linear-gradient(
      180deg,
      rgb(8 8 10 / 88%) 0 28%,
      rgb(8 8 10 / 72%) 62%,
      rgb(8 8 10 / 88%) 100%
    );
  }
}

/* --- Detailpaar auf den Leistungsseiten -------------------------------- */

.detailpair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-5);
  margin-top: var(--sp-7);
}

.detailpair__media {
  aspect-ratio: 3 / 2;
}

@media (max-width: 760px) {
  .detailpair {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --- Verbandmuster als Reihe, ohne Kartenrahmen ------------------------ */

.bondrow {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: var(--sp-5);
  border-top: 1px solid var(--edge);
  padding-top: var(--sp-5);
}

.bondcell {
  margin: 0;
  min-width: 0;
}

.bondcell__art {
  aspect-ratio: 4 / 3;
  border: 1px solid var(--edge);
  background: var(--void);
  box-shadow: var(--cast-sm);
}

.bondcell__art svg {
  width: 100%;
  height: 100%;
}

.bondcell figcaption {
  display: grid;
  gap: 0.35rem;
  margin-top: var(--sp-3);
}

.bondcell figcaption .mono {
  color: var(--orange);
}

.bondcell__t {
  font-size: var(--step--1);
  color: var(--ink-3);
  line-height: 1.5;
}

/* --- Projektblätter ---------------------------------------------------- */

.sheet {
  position: relative;
  padding-bottom: var(--sp-8);
}

.sheet__lead {
  position: relative;
  margin: 0;
  min-height: 62svh;
  overflow: hidden;
}

.sheet__lead::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  z-index: 1;
  height: 55%;
  pointer-events: none;
  background: linear-gradient(0deg, rgb(8 8 10 / 94%) 0 26%, transparent);
}

.sheet__cap {
  position: absolute;
  z-index: 2;
  left: var(--gutter);
  right: var(--gutter);
  bottom: var(--sp-5);
  display: grid;
  gap: var(--sp-2);
}

.sheet__t {
  font-family: var(--display);
  font-size: var(--step-3);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.02;
  max-width: 22ch;
  word-break: keep-all;
}

.sheet__in {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: var(--sp-6);
  padding-top: var(--sp-6);
  align-items: start;
}

.sheet__body {
  min-width: 0;
}

.sheet__disc {
  color: var(--orange);
  letter-spacing: 0.16em;
  margin-bottom: var(--sp-3);
}

.sheet__k {
  margin-top: var(--sp-5);
  margin-bottom: var(--sp-3);
  color: var(--ink-4);
  letter-spacing: 0.18em;
}

.obslist {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--edge);
}

.obslist li {
  padding: 0.75rem 0 0.75rem 1.5rem;
  position: relative;
  border-bottom: 1px solid var(--edge);
  font-size: var(--step--1);
  line-height: 1.6;
  color: var(--ink-2);
}

.obslist li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 1.35em;
  width: 8px;
  height: 1px;
  background: var(--orange);
}

.sheet__more {
  display: grid;
  gap: var(--sp-4);
  min-width: 0;
}

.sheet__moremedia {
  aspect-ratio: 3 / 2;
}

.sheet__notes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: var(--sp-5);
  margin-top: var(--sp-6);
}

.note {
  min-width: 0;
  border-top: 1px solid var(--edge);
  padding-top: var(--sp-3);
}

.note__h {
  font-size: var(--step-1);
  letter-spacing: -0.024em;
  margin-bottom: 0.5rem;
}

.note__t {
  font-size: var(--step--1);
  color: var(--ink-3);
  line-height: 1.62;
}

@media (max-width: 900px) {
  .sheet__lead {
    min-height: 46svh;
  }

  .sheet__in {
    grid-template-columns: minmax(0, 1fr);
  }

  .sheet__more {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  }
}

/* --- Ortsregister ------------------------------------------------------- */

.placereg {
  border-top: 1px solid var(--edge);
}

.placerow {
  position: relative;
  display: grid;
  grid-template-columns: 3.4rem minmax(0, 14rem) minmax(0, 1fr) 2rem;
  align-items: baseline;
  gap: var(--sp-4);
  padding: var(--sp-4) 0;
  border-bottom: 1px solid var(--edge);
  text-decoration: none;
  min-height: 56px;
}

.placerow::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 260ms var(--ease-out);
}

.placerow:hover::after,
.placerow:focus-visible::after {
  transform: scaleX(1);
}

.placerow__n {
  color: var(--ink-4);
}

.placerow__t {
  font-family: var(--display);
  font-size: var(--step-2);
  font-weight: 700;
  letter-spacing: -0.028em;
  min-width: 0;
}

.placerow__d {
  font-size: var(--step--1);
  color: var(--ink-3);
  line-height: 1.5;
  min-width: 0;
}

.placerow__go {
  justify-self: end;
  color: var(--ink-4);
}

.placerow:hover .placerow__go {
  color: var(--orange);
}

@media (max-width: 860px) {
  .placerow {
    grid-template-columns: 2.8rem minmax(0, 1fr) 2rem;
    row-gap: 0.3rem;
  }

  .placerow__d {
    grid-column: 2 / -1;
  }
}

/* --- Kartenblatt -------------------------------------------------------- */

.mapplate__body {
  aspect-ratio: 8 / 5;
}

.mapplate__svg {
  width: 100%;
  height: 100%;
  display: block;
}

.mapmark {
  color: var(--ink-4);
}

.mapmark.is-active {
  color: var(--orange);
}

.mapmark__t {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  fill: var(--ink-3);
}

.mapmark.is-active .mapmark__t {
  fill: var(--orange);
}

.mapmark__t.is-big {
  fill: var(--ink);
  font-size: 15px;
}

.mapmark__meta {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  fill: var(--ink-4);
}

.regiontop {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: var(--sp-6);
  align-items: start;
}

.regionfoto {
  position: relative;
  margin: 0;
  min-height: min(58svh, 620px);
  overflow: hidden;
}

.regionfoto::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  z-index: 1;
  height: 40%;
  pointer-events: none;
  background: linear-gradient(0deg, rgb(8 8 10 / 90%) 0 24%, transparent);
}

.regionfoto__annot {
  left: var(--gutter);
  right: var(--gutter);
  bottom: var(--sp-4);
}

@media (max-width: 980px) {
  .regiontop {
    grid-template-columns: minmax(0, 1fr);
  }

  .regionfoto {
    min-height: 42svh;
  }
}

/* --- Kontaktblatt ------------------------------------------------------- */

.kontakt {
  position: relative;
  overflow: clip;
  isolation: isolate;
}

/* Auf dunklem Grund trägt die Fugentextur ohne Mischmodus - multiply
   erzeugt dort keine Tiefe, sondern eine helle Fläche. */
.kontakt .voices__tex {
  mix-blend-mode: normal;
  opacity: 0.05;
  filter: grayscale(1) brightness(0.7);
}

.kontakt__in {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--sp-6);
  align-items: start;
}

.kontaktblatt__body {
  padding: var(--sp-5);
  background: var(--void);
}

.kbl {
  display: grid;
  gap: 0;
  margin: 0;
}

.kbl > div {
  display: grid;
  grid-template-columns: 10rem minmax(0, 1fr);
  gap: var(--sp-4);
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--edge);
}

.kbl > div:last-child {
  border-bottom: 0;
}

.kbl dt {
  color: var(--ink-4);
  letter-spacing: 0.16em;
}

.kbl dd {
  margin: 0;
  color: var(--ink-2);
  font-size: var(--step--1);
  line-height: 1.5;
  min-width: 0;
}

.kbl dd .telline {
  min-height: 32px;
  font-size: var(--step--1);
  border-bottom: 0;
}

.kbl--two {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  column-gap: var(--sp-6);
}

.kbl__note {
  margin-top: var(--sp-4);
  font-size: var(--step--1);
  color: var(--ink-3);
  line-height: 1.6;
}

.kbl__steps {
  margin-top: var(--sp-5);
  color: var(--ink-4);
  letter-spacing: 0.18em;
}

.kbl__ol {
  margin: var(--sp-3) 0 0;
  padding-left: 1.1rem;
  display: grid;
  gap: 0.5rem;
  color: var(--ink-3);
  font-size: var(--step--1);
  line-height: 1.5;
}

.kontakt__media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--panel-2);
  box-shadow: var(--cast);
  margin-bottom: var(--sp-3);
}

.kontakt__portrait {
  margin: 0;
}

@media (min-width: 981px) {
  .kontaktblatt--sticky {
    position: sticky;
    top: calc(var(--header-h) + 1.5rem);
  }
}

@media (max-width: 900px) {
  .kontakt__in {
    grid-template-columns: minmax(0, 1fr);
  }

  .kbl > div {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.25rem;
  }
}

/* --- Merkposten als Raster mit Haarlinien, nicht als Karten ------------- */

.ruledgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: 0 var(--sp-6);
  border-top: 1px solid var(--edge);
}

.ruledcell {
  padding: var(--sp-4) 0 var(--sp-5);
  border-bottom: 1px solid var(--edge);
  min-width: 0;
}

.ruledcell__n {
  color: var(--orange);
  letter-spacing: 0.16em;
}

.ruledcell__h {
  margin-top: 0.6rem;
  font-size: var(--step-1);
  letter-spacing: -0.024em;
}

.ruledcell__t {
  margin-top: 0.5rem;
  font-size: var(--step--1);
  color: var(--ink-3);
  line-height: 1.6;
  max-width: 46ch;
}

/* --- Abschluss-Aufforderung ohne Panel ---------------------------------- */

.cta {
  position: relative;
  background: var(--void);
  border-top: 0;
  padding-block: var(--sp-8);
  overflow: clip;
  isolation: isolate;
}

.cta__in {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 22rem);
  gap: var(--sp-6);
  align-items: start;
}

.cta__h {
  font-size: var(--step-4);
  line-height: 1;
  margin-block: var(--sp-3) var(--sp-4);
}

.cta__acts {
  display: grid;
  gap: var(--sp-3);
  justify-items: start;
}

/* Der Ratgeber-Index trägt lange Titel - dort steht der Titel enger. */
.svcrow--guide .svcrow__t {
  font-size: var(--step-2);
  line-height: 1.08;
}

/* --------------------------------------------------------------------------
   Bewegung aus: alles steht auf Endzustand.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .js .hero__line > span,
  .js .hero.is-in .hero__line > span {
    transform: none;
  }

  .js .hero__h em::before,
  .js .hero.is-in .hero__h em::before {
    transform: skewX(-4deg) scaleX(1);
    transition: none;
  }

  .js .hero__media {
    transform: none;
    filter: none;
    transition: none;
  }

  .js .hero::before,
  .js .hero.is-in::before {
    transform: none;
    transition: none;
  }

  .seq__wrap {
    height: auto;
  }

  .seq__stage {
    position: static;
    height: auto;
    display: grid;
  }

  .seq__layer {
    position: relative;
    inset: auto;
    opacity: 1;
    aspect-ratio: 16 / 9;
    filter: brightness(0.86) saturate(0.94);
  }

  .seq__layer .seq__mark {
    opacity: 1;
    top: auto;
    bottom: var(--sp-3);
  }

  .seq__panel {
    position: static;
    background: var(--void);
    padding-block: var(--sp-6);
  }

  .seq__texts {
    position: static;
    min-height: 0;
    display: grid;
    gap: 0.9rem;
  }

  .seq__t {
    position: static;
    opacity: 1;
    padding-left: 0.9rem;
    border-left: 1px solid var(--edge);
  }

  .matstrip__s {
    flex: 1 1 0;
    transition: none;
  }

  .svcindex__ph:first-child {
    opacity: 0.14;
  }
}

/* --------------------------------------------------------------------------
   Schichtliste der Leistungsseiten auf dasselbe System wie die Startseite:
   Haarlinien statt Kästen. Die aktive Schicht wird über die Mono-Ebene
   markiert, nicht über eine Kachel.
   -------------------------------------------------------------------------- */

.layerlist {
  gap: 0;
  border-top: 1px solid var(--edge);
}

.layer {
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 0.9rem 0;
  margin-bottom: 0;
  border: 0;
  border-bottom: 1px solid var(--edge);
  border-left: 0;
  border-radius: 0;
  background: none;
  min-height: 0;
}

.layer:nth-child(1),
.layer:nth-child(2),
.layer:nth-child(3),
.layer:nth-child(4),
.layer:nth-child(n + 5) {
  --layer-bg: none;
  --layer-h: auto;
}

.js .layer.is-active.is-in {
  border-color: var(--orange);
  box-shadow: none;
}

.js .layer.is-active.is-in .layer__name {
  color: var(--ink);
}

.layer__thick {
  color: var(--ink-3);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: var(--step--2);
}

.js .layer.is-active.is-in .layer__thick {
  color: var(--orange);
}

.buildup__note {
  border-left: 1px solid var(--orange);
  background: none;
  padding: var(--sp-2) 0 var(--sp-2) var(--sp-4);
}

.drawing {
  border-radius: 0;
  box-shadow: var(--cast);
}

.buildup__stack {
  border-radius: 0;
}

/* In der schmalen Spalte des Anfrageformulars steht die Beschriftung über
   dem Wert - nebeneinander bräche die Rufnummer mitten in der Zahl. */
.kontaktblatt--sticky .kbl > div {
  grid-template-columns: minmax(0, 1fr);
  gap: 0.25rem;
}

.kontaktblatt--sticky .kbl dd {
  overflow-wrap: anywhere;
}

.formwrap {
  grid-template-columns: minmax(0, 1fr) minmax(0, 24rem);
}

@media (max-width: 980px) {
  .formwrap {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ==========================================================================
   Nachtrag: gemessene Korrekturen (Ueberlaufpruefung 390/768/1024/1440)
   Diese Regeln stehen bewusst am DATEIENDE. Ein nackter Selektor nach einer
   max-width-Media-Query gewinnt sonst auf ALLEN Viewports - die Regel hat
   auf diesem Server schon einmal 54 Seiten auf Mobil zerlegt (FEHLER-019).
   ========================================================================== */

/* Der neue .cta__in-Selektor stand nach der alten Mobil-Regel und hat sie
   ausgehebelt: die linke Spalte fiel auf Breite 0. */
@media (max-width: 900px) {
  .cta__in {
    grid-template-columns: minmax(0, 1fr);
  }

  .ask__in {
    grid-template-columns: minmax(0, 1fr);
  }

  .kontakt__in {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Deutsche Komposita sind länger als jede Spalte. Umbruch erlauben, ohne
   die Silbentrennung zu erzwingen. */
.svcrow__t,
.placerow__t,
.sheet__t,
.shead h2,
.phead h1,
.phero__h,
.cta__h,
.ask__h,
.seq__h,
.blayer__name,
.ruledcell__h,
.note__h {
  overflow-wrap: break-word;
}

.phead__in > div,
.betrieb__body,
.kante__body,
.bettung__body {
  min-width: 0;
}

/* Eingabefelder bringen eine intrinsische Mindestbreite mit. Ohne min-width:0
   weigern sich die Rasterzellen zu schrumpfen und laufen unsichtbar über
   (FEHLER-008). */
.field,
.fieldrow,
.formstep,
.form {
  min-width: 0;
}

.field input,
.field textarea,
.field select {
  min-width: 0;
  width: 100%;
}

/* ==========================================================================
   Nachtrag Runde 2 - gemessene Befunde der Design-Kritik
   ========================================================================== */

/* 1. Die Zustandsmarke lag ab 1100px UNTER dem Textpaneel (dessen Verlauf
      deckt rechts 92 % ab) - gemessen 1,2:1 statt 4,5:1. Sie wandert dorthin,
      wo das Foto frei liegt: nach links. */
@media (min-width: 1100px) {
  .seq__mark {
    left: var(--gutter);
    right: auto;
  }
}

/* 2. Aktionszeile an den Phasengrenzen: Rufnummer und Anfrageweg dürfen auf
      keiner Bildschirmhöhe fehlen. Kein Kasten - Mono-Zeile an einer Kante. */
.phaseact {
  gap: var(--sp-5);
  padding-block: var(--sp-6);
  align-items: baseline;
}

.phaseact .mono {
  color: var(--ink-4);
  letter-spacing: 0.18em;
}

.phaseact--inline {
  padding-block: var(--sp-5) 0;
}

/* 3. Die mobile Phasenleiste ist entfallen. Unter 1081px trägt die
      Phasenkennung in der Kopfzeile dieselbe Information; zwei
      Fortschrittsbalken 13 px übereinander waren widersprüchlich. */

/* 6. Die SVG-Beschriftung der Schnittzeichnung überlappt unter 720px zu
      unlesbarem Brei. Dort trägt die Mono-Liste darunter die Beschriftung -
      die Zeichnung selbst wird auf ihren Zeichenteil beschnitten. */
@media (max-width: 720px) {
  .drawing__name,
  .drawing__dim,
  .drawing__leader {
    display: none;
  }

  .drawing__gok {
    display: block;
  }
}

/* 7. Der Scrim hat auf dem Telefon das Leitfoto ausgelöscht. */
@media (max-width: 900px) {
  .hero__scrim {
    background-image: linear-gradient(
      180deg,
      rgb(8 8 10 / 78%) 0 30%,
      rgb(8 8 10 / 55%) 62%,
      rgb(8 8 10 / 20%) 100%
    );
  }

  .hero__media img {
    filter: brightness(0.96) saturate(0.92) contrast(1.06);
  }

  .phero__scrim {
    background-image: linear-gradient(
      180deg,
      rgb(8 8 10 / 62%) 0 22%,
      rgb(8 8 10 / 45%) 48%,
      rgb(8 8 10 / 90%) 100%
    );
  }
}

/* 8. Trefferhöhe der Rufnummer im Kontaktblatt lag bei 32px. */
.kbl dd .telline {
  min-height: 44px;
}

/* Zweites choreografiertes Modul: die Materialleiste läuft beim Scrollen
   durch die fünf Oberflächen und driftet dabei seitlich. Der Zeiger
   übersteuert sie auf dem Desktop. */
.matband {
  position: relative;
}

@media (min-width: 901px) {
  .matband {
    height: 190vh;
  }

  .matband .matstrip {
    position: sticky;
    top: calc(var(--header-h) + 8vh);
    height: 46vh;
    min-height: 320px;
    /* Breiter als der Rahmen, damit die seitliche Drift an keiner Kante
       eine Lücke aufreißt. */
    width: 110%;
    transform: translate3d(calc(var(--drift, 0) * -9%), 0, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .matband {
    height: auto;
  }

  .matband .matstrip {
    position: static;
    height: 30vh;
    transform: none;
  }

}

/* Der Beckenrohbau liegt im unteren Bilddrittel - mittiger Zuschnitt zeigte
   die Hecke dahinter. */
.wasser__a .wasser__media img {
  object-position: 50% 66%;
}

/* Der Materialton als Textfarbe wäre auf Dunkel unter 4,5:1 - aufgehellte
   Fassung desselben Tons. */
.wasser__note {
  color: color-mix(in srgb, var(--wasser) 45%, #e8f0ee);
}

/* ==========================================================================
   Runde 3 - die drei Übersichtsseiten tragen jetzt Fotografie
   Ein Linkindex ohne ein einziges Bild ist auf einer Marketingseite genau
   die Bildlosigkeit, die der Owner an anderer Stelle abgelehnt hat.
   Jede der drei Seiten bekommt zusätzlich ein EIGENES Kopfschema.
   ========================================================================== */

/* --- Gewerkeblatt (/leistungen) ---------------------------------------- */

.gwblatt {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: stretch;
  background: var(--void);
}

.gwblatt--flip .gwblatt__media {
  order: 2;
}

.gwblatt__media {
  position: relative;
  margin: 0;
  min-height: min(72svh, 720px);
  overflow: hidden;
}

.gwblatt__media::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  z-index: 1;
  height: 40%;
  pointer-events: none;
  background: linear-gradient(0deg, rgb(8 8 10 / 90%) 0 22%, transparent);
}

.gwblatt__annot {
  left: var(--sp-4);
  right: var(--sp-4);
  bottom: var(--sp-4);
}

.gwblatt__body {
  display: grid;
  align-content: center;
  gap: var(--sp-3);
  padding: var(--sp-8) var(--gutter);
  min-width: 0;
}

.gwblatt__n {
  font-size: var(--step-1);
  color: var(--orange);
  letter-spacing: 0.14em;
}

.gwblatt__h {
  font-size: var(--step-4);
  line-height: 1;
  letter-spacing: -0.032em;
  overflow-wrap: break-word;
}

.gwblatt__p {
  color: var(--ink-4);
  letter-spacing: 0.14em;
}

.gwblatt__scope {
  list-style: none;
  padding: 0;
  margin: var(--sp-3) 0 0;
  border-top: 1px solid var(--edge);
  max-width: 46ch;
}

.gwblatt__scope li {
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--edge);
  font-family: var(--mono);
  font-size: var(--step--2);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.gwblatt__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--sp-5);
  margin-top: var(--sp-4);
}

.gwblatt__detail {
  width: min(240px, 46%);
}

.gwblatt__detailmedia {
  aspect-ratio: 4 / 3;
}

@media (max-width: 900px) {
  .gwblatt {
    grid-template-columns: minmax(0, 1fr);
  }

  .gwblatt--flip .gwblatt__media {
    order: 0;
  }

  .gwblatt__media {
    min-height: 52svh;
  }

  .gwblatt__body {
    padding-block: var(--sp-7);
  }
}

/* --- Bildband-Kopf (/ratgeber) ----------------------------------------- */

.rgband {
  position: relative;
  display: grid;
  align-content: end;
  min-height: min(46svh, 480px);
  padding-block: var(--sp-6);
  background: var(--void);
  overflow: clip;
}

.rgband__media {
  position: absolute;
  inset: 0;
  margin: 0;
  z-index: 0;
}

.rgband__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image: linear-gradient(
    180deg,
    rgb(8 8 10 / 88%) 0 28%,
    rgb(8 8 10 / 66%) 60%,
    rgb(8 8 10 / 92%) 100%
  );
}

.rgband__in {
  position: relative;
  z-index: 2;
}

.rgband__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 26rem);
  gap: var(--sp-5);
  align-items: end;
  margin-top: var(--sp-5);
}

.rgband__h {
  font-size: clamp(2rem, 0.9rem + 3.2vw, 4rem);
  line-height: 0.96;
  word-break: keep-all;
  overflow-wrap: break-word;
}

.rgband__lead {
  max-width: none;
}

@media (max-width: 900px) {
  .rgband__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --- Registerzeile mit Bildplatte (/ratgeber, /einsatzgebiet) ----------- */

.rgrows {
  border-top: 1px solid var(--edge);
}

.rgrow {
  position: relative;
  display: grid;
  grid-template-columns: 9rem 3rem minmax(0, 1fr) minmax(0, 34ch) 2rem;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4) 0;
  border-bottom: 1px solid var(--edge);
  text-decoration: none;
  min-height: 56px;
}

.rgrow::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 260ms var(--ease-out);
}

.rgrow:hover::after,
.rgrow:focus-visible::after {
  transform: scaleX(1);
}

.rgrow__media {
  position: relative;
  margin: 0;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--panel-2);
  box-shadow: var(--cast-sm);
}

/* Bildbehandlung beim Überfahren: das Foto tritt aus dem Grundton hervor.
   Nichts hebt sich, nichts skaliert - nur die Gradation ändert sich. */
.rgrow__media img {
  filter: brightness(0.6) saturate(0.8);
  transition: filter 340ms var(--ease-out);
}

.rgrow:hover .rgrow__media img,
.rgrow:focus-visible .rgrow__media img {
  filter: brightness(1) saturate(0.95);
}

.rgrow__n {
  color: var(--ink-4);
}

.rgrow__t {
  font-family: var(--display);
  font-size: var(--step-2);
  font-weight: 700;
  letter-spacing: -0.028em;
  line-height: 1.08;
  min-width: 0;
  overflow-wrap: break-word;
}

.rgrow__d {
  font-size: var(--step--1);
  color: var(--ink-3);
  line-height: 1.5;
  min-width: 0;
}

.rgrow__go {
  justify-self: end;
  color: var(--ink-4);
}

.rgrow:hover .rgrow__go {
  color: var(--orange);
}

@media (max-width: 1080px) {
  .rgrow {
    grid-template-columns: 7rem 2.4rem minmax(0, 1fr) 2rem;
    row-gap: 0.4rem;
  }

  .rgrow__d {
    grid-column: 3 / -1;
  }
}

@media (max-width: 560px) {
  .rgrow {
    grid-template-columns: 5.5rem minmax(0, 1fr) 1.6rem;
  }

  .rgrow__n {
    display: none;
  }

  .rgrow__d {
    grid-column: 2 / -1;
  }
}

/* --- Kopf mit Kartenblatt (/einsatzgebiet) ----------------------------- */

.eghead {
  position: relative;
  padding-block: var(--sp-6) var(--sp-7);
  background: var(--void);
  overflow: clip;
}

.eghead__in {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: var(--sp-6);
  align-items: center;
}

.eghead__text {
  min-width: 0;
}

.eghead__k {
  margin-block: var(--sp-4) var(--sp-3);
}

.eghead__h {
  font-size: clamp(2rem, 0.9rem + 3.4vw, 4.2rem);
  line-height: 0.96;
  word-break: keep-all;
  overflow-wrap: break-word;
}

.eghead__lead {
  margin-top: var(--sp-4);
  max-width: 52ch;
}

.egband {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  background: var(--void);
}

.egband__s {
  position: relative;
  margin: 0;
  min-height: 34vh;
  overflow: hidden;
  border-left: 1px solid var(--void);
}

.egband__s:first-child {
  border-left: 0;
}

@media (max-width: 980px) {
  .eghead__in {
    grid-template-columns: minmax(0, 1fr);
  }

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

  .egband__s {
    min-height: 26vh;
  }
}

/* --- Restbefunde Runde 2 ----------------------------------------------- */

/* Das Band lief unter dem Pin ins Leere und die erste Marke lag hinter der
   Phasenachse. */
@media (min-width: 901px) {
  .matband {
    height: 150vh;
  }

  .matband .matstrip {
    top: calc(var(--header-h) + 6vh);
    height: 52vh;
  }
}

/* Trefferflächen unter 44 px auf dem Telefon. */
@media (max-width: 900px) {
  .phaselegend a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  .field--bare input,
  .field--bare textarea {
    min-height: 44px;
    padding-block: 0.8rem 0.6rem;
  }
}

/* Bildbehandlung beim Überfahren auch für die Projektblätter der Unterseiten. */
.svcrow .svcrow__t,
.placerow .placerow__t {
  transition: color var(--t-fast) var(--ease-out);
}

.svcrow:hover .svcrow__t,
.placerow:hover .placerow__t {
  color: var(--orange);
}

/* Die Anrisse der Content-Pipeline sind lang - im Register werden sie auf
   drei Zeilen begrenzt, sonst wird jede Zeile zum Absatz. */
.rgrow__d {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.rgrow {
  grid-template-columns: 11rem 3rem minmax(0, 1fr) minmax(0, 34ch) 2rem;
}

@media (max-width: 1080px) {
  .rgrow {
    grid-template-columns: 8rem 2.4rem minmax(0, 1fr) 2rem;
  }
}

@media (max-width: 560px) {
  .rgrow {
    grid-template-columns: 5.5rem minmax(0, 1fr) 1.6rem;
  }
}

/* Das Band ist absichtlich breiter als der Rahmen (seitliche Drift) - der
   Überstand muss am Modul geklammert werden, sonst wächst die Dokumentbreite. */
.matband {
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   Restbefunde Runde 3
   -------------------------------------------------------------------------- */

/* „Fundamentarbeiten" brach unter 430px mitten im Wort. Dort trägt die Zeile
   die volle Breite und eine Stufe kleiner, statt zu zerbrechen. */
@media (max-width: 430px) {
  .svcrow__t,
  .gwblatt__h {
    overflow-wrap: normal;
    hyphens: manual;
  }

  .svcrow__t {
    font-size: var(--step-1);
  }

  .svcrow {
    grid-template-columns: 2.6rem minmax(0, 1fr) 1.8rem;
  }
}

/* Abspieltaste des Videos lag bei 34px Trefferhöhe. */
@media (max-width: 720px) {
  .vid__btn {
    min-height: 44px;
    padding-inline: 0.9rem;
  }
}

/* Die Aktionszeilen an den Phasengrenzen standen auf versetzten Grundlinien. */
.phaseact {
  align-items: center;
  row-gap: var(--sp-3);
}

.phaseact .telline {
  align-self: center;
}

/* Tote Bänder zwischen den Phasenblöcken: die Sektion stößt an die
   Materialkante, statt eine leere Bildschirmhälfte davor zu setzen. */
.phase--flush + .matedge,
.matstrip + .matedge {
  margin-top: 0;
}

.wasser__text {
  margin-top: var(--sp-5);
}

.uebergabe__head {
  margin-top: var(--sp-6);
}

/* Ratgebertitel sind lange Komposita („Doppelstabmattenzaun"). Sie bekommen
   auf schmalen Schirmen eine Stufe weniger, statt zu brechen oder
   überzulaufen. */
@media (max-width: 560px) {
  .rgrow__t {
    font-size: var(--step-1);
    overflow-wrap: break-word;
  }
}

/* In Phase 00 steht dieselbe Kennung schon als Eyebrow im Hero - die Regel
   ist nach components.css gewandert (html[data-phase='00'] .hdr__phase). */


/* ==========================================================================
   Nachtrag Mobil - Hero an das freie Fenster gebunden
   Der Hero war 738-804 px hoch bei einem freien Fenster von 518-722 px:
   Bildunterschrift ausserhalb des Schirms, Rufnummer doppelt, Legende bei
   1,22:1 am hellsten Bildpixel. Alle Regeln haben dieselbe Spezifität wie
   die 900er-Regeln weiter oben - hier entscheidet die Quellreihenfolge
   (FEHLER-214), deshalb stehen sie am Dateiende.
   ========================================================================== */

@media (max-width: 720px) {
  /* 62 px Kopf (real 63) + 59 px Ruf-Leiste. Die vh-Zeile ist der Fallback
     und muss vor der svh-Zeile stehen. */
  .hero {
    min-height: calc(100vh - var(--header-h) - 60px);
    min-height: calc(100svh - var(--header-h) - 60px - env(safe-area-inset-bottom, 0px));
    grid-template-rows: auto 1fr;
    align-content: stretch;
    padding-block: var(--sp-5) var(--sp-4);
  }

  /* Der CSS-Keil laeuft von rechts oben nach links unten, die Betonkante im
     Foto gegenlaeufig - beide kreuzen sich auf halber Hoehe und die Keilkante
     schneidet durch das erste Legendenwort. Sein Kontrastbeitrag ist gemessen
     0,7 Stufen; der 180-Grad-Scrim traegt allein. Ab 721 px unveraendert. */
  .hero::before {
    display: none;
  }

  /* Die Rufnummer stand zweimal in einem Fenster: Hero y 503 und Ruf-Leiste
     y 785. Genau an 720 px gebunden - die Leiste erscheint erst hier.

     Dasselbe galt für jede wiederkehrende Handlungszeile weiter unten: auf der
     Startseite lag die Nummer sechsmal im Inhalt, während die Ruf-Leiste sie
     dauerhaft 59 px über dem Daumen zeigt (gemessen 27.07.2026, 390 px).
     Ausgenommen bleiben .betrieb__act, .ask__tel und .cta__acts - das sind
     keine Handlungszeilen, sondern Kontaktblöcke mit BEIDEN Rufnummern. Die
     zweite Nummer trägt die Ruf-Leiste nicht; mit .cta__acts in der Regel war
     sie auf /leistungen/* und /ueber-uns am Handy nicht mehr erreichbar
     (gegengemessen). Diese Blöcke stehen einmal je Seite, die Dopplung dort
     ist verkraftbar. */
  .hero__acts .telline,
  .kante__act .telline[href^='tel:'],
  .phaseact .telline[href^='tel:'] {
    display: none;
  }

  .hero__eyebrow {
    font-size: 0.7rem;
    letter-spacing: 0.075em;
    margin-bottom: var(--sp-3);
  }

  .hero__h {
    margin-bottom: var(--sp-3);
  }

  .hero__lead {
    font-size: var(--step-0);
    line-height: 1.5;
  }

  .hero__acts {
    margin-top: var(--sp-4);
  }

  /* Zeilenabstand 50,4 -> 40 px: die zweite Reihe liest als Fortsetzung und
     nicht als abgehaengter Rest. 38 px Trefferhoehe erfuellt WCAG 2.5.8
     (24 px); die 44er-Empfehlung wird an diesen sieben sekundaeren
     Sprungmarken bewusst getauscht. CTA, Ruf-Leiste und Telefonzelle im
     Schriftfeld bleiben unberuehrt. */
  .phaselegend {
    margin-top: var(--sp-4);
    padding-top: 0.75rem;
    gap: 2px 0.9rem;
  }

  .phaselegend a {
    min-height: 38px;
    padding-block: 0.2rem;
    color: var(--ink-2);
  }

  .hero__annot {
    align-self: end;
    display: block;
    margin: var(--sp-4) auto 0;
  }

  .hero__annot::before {
    display: block;
    width: 34px;
    margin-bottom: 0.5rem;
  }

  /* Zusaetzlicher Fussverlauf: die untersten 72 px tragen Legende und
     Bildunterschrift. Gemessen am hellsten Grundpixel 1,22 -> 6,41 (Legende)
     und 1,78 -> 6,95 (Bildunterschrift). */
  .hero__scrim {
    background-image:
      linear-gradient(0deg, rgb(8 8 10 / 62%) 0 72px, rgb(8 8 10 / 0%) 190px),
      linear-gradient(180deg, rgb(8 8 10 / 94%) 0 30%, rgb(8 8 10 / 70%) 68%, rgb(8 8 10 / 30%) 100%);
  }
}

@media (max-width: 345px) {
  .hero__eyebrow {
    font-size: 0.66rem;
    letter-spacing: 0.04em;
  }

  .hero__annot {
    display: none;
  }
}

/* ==========================================================================
   Nachtrag Mobil - Bildunterschriften auf ein Muster
   Drei Systeme fuer dieselbe Sache: .hangcap (Haarlinie, Mono, --ink-3, an
   der Gutterkante, 28-45 px), .annot (oranger Leader, 28 px + 11,2 px Luecke,
   Text auf 57,8-62,4 px Einzug) und .sheet__cap (im Bild liegend, verdeckt
   auf /projekte bis 147 px eines 388 px hohen Bildfelds = 37,9 %).
   .hangcap ist das Muster, das auf dem Telefon traegt - alles wird dorthin
   geleitet. .hero__annot ist ausgenommen, sie hat in Stufe 2 ihren Platz
   bekommen.
   ========================================================================== */

@media (max-width: 700px) {
  .annot:not(.hero__annot) {
    position: static;
    display: block;
    margin-inline: var(--gutter);
    margin-top: 0.6rem;
    padding-top: 0.6rem;
    border-top: 1px solid var(--edge);
    color: var(--ink-3);
    text-shadow: none;
    letter-spacing: 0.12em;
    line-height: 1.5;
  }

  .annot:not(.hero__annot)::before {
    display: none;
  }

  /* Abweichung von der Bauanweisung, gemessen: .pic--fill ist
     position:absolute; inset:0 (components.css). Ein rein statisch
     geschaltetes .sheet__cap landet damit OBEN im Bildfeld statt darunter -
     das Bild waere weiterhin verdeckt, nur an der anderen Kante. Damit die
     Bildunterschrift wirklich unter dem Bild steht, traegt das Bildfeld auf
     dem Telefon seine Hoehe selbst. Der Fussverlauf entfaellt dort: er hat
     nur die im Bild liegende Beschriftung lesbar gemacht. */
  .sheet__lead {
    min-height: 0;
    overflow: visible;
  }

  .sheet__lead > .pic--fill {
    position: relative;
    inset: auto;
    height: 46svh;
    overflow: hidden;
  }

  .sheet__lead::after {
    display: none;
  }

  .sheet__cap {
    position: static;
    left: auto;
    right: auto;
    bottom: auto;
    margin-inline: var(--gutter);
    margin-top: 0.6rem;
    padding-top: 0.6rem;
    border-top: 1px solid var(--edge);
  }

  /* Es gibt genau zwei waagerechte Positionen: Zustandsfotos randlos, alles
     Blattartige und aller Text auf var(--gutter). */
  /* .flaeche__pair figure { margin: 0 } hat Spezifitaet 0,1,1 und schlaegt
     .flaeche__wide (0,1,0) - deshalb der Elternteil im Selektor. Ohne ihn
     blieb die Regel wirkungslos, nachgemessen 27.07.2026. */
  .flaeche__pair > .flaeche__wide,
  .crop--tall {
    margin-inline: calc(var(--gutter) * -1);
  }
}

/* ==========================================================================
   Nachtrag Mobil - Zeichnung: Sticky raus, Zeichenkoerper gross
   .buildup__stack--drawing war unter 980 px position:sticky mit top 68,4 px
   und hielt ueber ein Modul von 1712-2051 px - ein Verstoss gegen K.18
   („Kein Sticky-Modul unter 900 px"). Der Pin frass 45 % des Schirms.
   Gleiche Spezifitaet wie die Regel in components.css, hier entscheidet die
   Quellreihenfolge.
   ========================================================================== */

@media (max-width: 900px) {
  .buildup__stack {
    position: static;
  }
}

@media (max-width: 720px) {
  .drawing:not(.drawing--soil) {
    padding-inline: 0;
  }

  .drawing:not(.drawing--soil) .drawing__svg {
    /* 620 = viewBox-Breite, 422 = der Teil, der sichtbar bleiben muss:
       padL 26 + innerW 388 + 8 Einheiten Ueberstand der GOK-Linie.
       Der Beschriftungsstreifen rechts ist unter 720px display:none.
       max-width:none ist zwingend - base.css klemmt svg auf 100 % und hat
       die alte 150-%-Regel seit dem Deploy wirkungslos gemacht. */
    width: calc(100% * 620 / 422);
    max-width: none;
  }

  .drawing:not(.drawing--soil) figcaption {
    margin-inline: var(--gutter);
  }
}

/* Die gefalteten Fachhinweise laufen ueber die volle Blattbreite - die
   68ch/2,5rem des FAQ-Musters sind fuer Fliesstext gedacht, nicht fuer das
   Hinweisraster. */
.sheet__notes-fold details > div {
  max-width: none;
  padding-right: 0;
}

.sheet__notes-fold .sheet__notes {
  margin-top: 0;
}

/* ==========================================================================
   Nachtrag Mobil - Verbandmuster als Snap-Streifen
   Vier .bondcell a 365 px = 1.602 px Reihe, Sektion 2.057 px fuer 102 Woerter.
   Der Teilanschnitt der naechsten Kachel ist die Affordanz, wie bei .matstrip.
   Die Klasse heisst .bondrow, nicht .bondgrid.
   ========================================================================== */

@media (max-width: 900px) {
  .bondrow {
    display: flex;
    grid-template-columns: none;
    gap: 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .bondrow > .bondcell {
    flex: 0 0 62vw;
    scroll-snap-align: start;
  }
}

/* --- Feldaufnahme im Hochformat auf dem Projektblatt --------------------
   Die Quelle grossflaeche.mp4 ist 478 x 850, also stehend. Formatfüllend
   im Breitbild würde sie entweder beschnitten (der Laser und die
   Verlegemaschine liegen oben und unten im Bild) oder auf schwarze Balken
   laufen. Deshalb ein schmales, stehendes Fenster neben dem Text - dasselbe
   Verhältnis wie die Datei, damit object-fit:cover nichts wegschneidet. */
.sheetvid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: var(--sp-5);
  align-items: start;
  margin-top: var(--sp-6);
}

.sheetvid__side {
  display: grid;
  gap: var(--sp-3);
  align-content: start;
  padding-top: var(--sp-4);
  min-width: 0;
}

.sheetvid__plate {
  min-width: 0;
  max-width: 22rem;
  justify-self: end;
  width: 100%;
}

.vid--tall {
  aspect-ratio: 478 / 850;
}

@media (max-width: 900px) {
  .sheetvid {
    grid-template-columns: 1fr;
  }

  .sheetvid__plate {
    justify-self: start;
    max-width: 18rem;
  }
}

/* ==========================================================================
   Runde 05 - Die Schnittzeichnung bekommt auf dem Telefon ihre Beschriftung
   zurueck.

   Befund: unter 720px stehen alle 16 <text>-Knoten der Zeichnung auf
   display:none (die SVG-Beschriftung wurde bei 6,4 px unlesbar, siehe
   /srv/docs/dream-art-bau.md). Uebrig blieb ein grauer Kasten, der sich
   beim Scrollen aufbaut, ohne zu sagen, was da waechst.

   Loesung wie beim Bodenprofil: HTML statt SVG-text. Die Zeilen liegen als
   absolut positionierte Spans ueber der Zeichenflaeche; ihre Hoehe kommt aus
   denselben Zeichenwerten wie die Flaechen (--ly/--lh = y/H bzw. h/H), ihre
   Schriftgroesse aus CSS-Pixeln. Damit skaliert die Zeichnung, die Schrift
   aber nicht mit.

   Waagerecht wird gegen den sichtbaren Ausschnitt gerechnet: unter 720px ist
   das SVG auf 620/422 aufgezogen, sichtbar sind die Einheiten 0..422. 8 %
   Plattenbreite entsprechen also rund Einheit 34 - knapp innerhalb der
   Schichtflaechen, die bei Einheit 26 beginnen.
   ========================================================================== */

.drawing__plate {
  position: relative;
}

/* Ohne display:block traegt das inline-SVG eine Grundlinien-Luecke - die
   Platte waere hoeher als die Zeichnung und die Beschriftung saesse
   systematisch zu hoch. */
.drawing__svg {
  display: block;
}

.drawing__labels {
  display: none;
}

@media (max-width: 720px) {
  .drawing:not(.drawing--soil) .drawing__labels {
    display: block;
    position: absolute;
    inset: 0;
    pointer-events: none;
  }

  .drawing:not(.drawing--soil) .drawing__lab {
    position: absolute;
    left: 8%;
    right: 3%;
    top: var(--ly);
    height: var(--lh);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0 0.5em;
    opacity: var(--lt, 1);
    font-family: var(--mono);
    font-size: 11px;
    line-height: 1.15;
    letter-spacing: 0.02em;
    color: var(--ink-2);
    text-shadow:
      0 1px 2px rgb(8 8 10 / 96%),
      0 0 4px rgb(8 8 10 / 92%),
      0 0 12px rgb(8 8 10 / 85%);
  }

  .drawing:not(.drawing--soil) .drawing__lab-n {
    color: var(--orange);
    font-weight: 700;
  }

  .drawing:not(.drawing--soil) .drawing__lab-t {
    font-family: var(--display);
    font-weight: 700;
    font-size: 12.5px;
    color: var(--ink);
    letter-spacing: 0;
  }

  .drawing:not(.drawing--soil) .drawing__lab.is-active .drawing__lab-t {
    color: var(--orange);
  }

  /* Grau auf der Materialsignatur waren rund 2,5:1. Die Massangabe ist in
     dieser Zeichnung ohnehin orange - das sind gegen den Schichtgrund
     rund 4,9:1. */
  .drawing:not(.drawing--soil) .drawing__lab-d {
    color: var(--orange);
  }
}

/* Runde 05: Die Hero-Zeile nennt jetzt alle sechs Gewerke (vorher fünf, ohne
   Garten- und Landschaftsbau und ohne Poolbau). Damit wuchs die zweite
   Zeile auf 788 px und endete 9 px vor der linken Kante des Flugfensters
   (797 px). 58ch reichen dafür nicht mehr als Deckel - ab 1025 px, wo das
   Fenster überhaupt erst steht, bekommt der Absatz einen harten Deckel mit
   rund 70 px Luft zur Platte. */
@media (min-width: 1025px) {
  .hero__lead {
    /* Die linke Kante des Flugfensters liegt gemessen bei 55,2 % der
       Fensterbreite (606/1100, 707/1280, 797/1440). 140 px Abzug halten
       rund 40 px Luft zwischen letzter Glyphe und Plattenkante. */
    max-width: min(58ch, calc(55vw - 140px));
  }
}