/* ===================================================================== */
/* Unterseiten-Piloten (Wohnungsbau 1–3)                                  */
/* Abgeleitet aus den Referenzen „Codex 13_55_09“ und „Codex 13_54_11“:   */
/* offener heller Hero, dünne Ziffern, Zahlenband – keine Kästen.         */
/* Präfix u- ; Animationen in js/unterseiten.js (nur ohne reduced motion).*/
/* ===================================================================== */

:root {
  /* --font-num (Barlow Condensed) steht global in styles.css */
  --u-gap: clamp(24px, 5vw, 96px);
}

.u-page {
  background: var(--color-hero-bg);
}

.u-section {
  padding-block: var(--section-pad-y);
}

.u-eyebrow {
  margin: 0 0 18px;
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--color-accent);
}

.u-eyebrow--muted {
  color: var(--color-ink-soft);
}

.u-eyebrow--light {
  color: var(--color-on-dark-soft);
}

.u-section--tint {
  background: var(--color-page-bg);
}

.u-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.u-hero__media picture {
  display: contents;
}

.u-title {
  margin: 0;
  font-weight: var(--fw-title);
  font-size: var(--fs-section-title);
  line-height: var(--lh-section-title);
  letter-spacing: var(--ls-title);
}

.u-lead {
  margin: 20px 0 0;
  max-width: 46ch;
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  color: var(--color-ink-soft);
}

/* Satzzeichen am Ende einer Überschrift haben immer deren Farbe. */
.u-dot {
  color: inherit;
}

.u-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
  padding-bottom: 3px;
  border-bottom: 1px solid var(--color-line-accent);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--color-accent);
  transition: gap 0.2s ease;
}

.u-link:hover {
  gap: 14px;
}

.u-link svg {
  width: 14px;
  height: 14px;
}

.u-rule {
  display: block;
  width: 64px;
  height: 1px;
  margin-bottom: 16px;
  background: var(--color-accent);
  transform-origin: left center;
}

.u-crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 28px;
  padding: 0;
  list-style: none;
  font-size: 0.8rem;
  color: var(--color-ink-faint);
}

.u-crumbs li + li::before {
  content: "/";
  margin-right: 8px;
  opacity: 0.6;
}

.u-crumbs a:hover {
  color: var(--color-accent);
}

/* --------------------------------------------------------------------- */
/* Hero – gemeinsame Teile                                                */
/* --------------------------------------------------------------------- */

.u-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: calc(100svh - var(--nav-height));
  overflow: hidden;
  background: var(--color-hero-bg);
}

.u-hero__inner {
  position: relative;
  z-index: 3;
  width: 100%;
  padding-block: clamp(40px, 6vw, 96px);
}

.u-hero__content {
  max-width: min(620px, 46%);
}

.u-hero__title {
  margin: 0;
  font-weight: var(--fw-title);
  font-size: var(--fs-page-title);
  line-height: var(--lh-page-title);
  letter-spacing: var(--ls-title);
}

.u-hero__lead {
  margin: 26px 0 0;
  max-width: 40ch;
  font-size: clamp(1rem, 1.1vw, 1.12rem);
  line-height: 1.6;
  color: var(--color-ink-soft);
}

.u-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 34px;
}

.u-year {
  position: absolute;
  z-index: 1;
  margin: 0;
  font-family: var(--font-num);
  font-weight: 300;
  line-height: 0.8;
  letter-spacing: -0.02em;
  color: rgba(20, 20, 20, 0.075);
  pointer-events: none;
  user-select: none;
}

.u-side {
  position: absolute;
  z-index: 3;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 2.1;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--color-ink-faint);
  pointer-events: none;
}

/* Pilot 1: Bildpaneel am rechten Rand ---------------------------------- */

.u-hero--panel .u-hero__media {
  position: absolute;
  z-index: 2;
  top: 0;
  right: 0;
  bottom: 0;
  width: 47vw;
  overflow: hidden;
}

.u-hero--panel .u-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 62%;
  transform-origin: 50% 70%;
}

.u-hero--panel .u-hero__media::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 22%;
  background: linear-gradient(0deg, rgba(20, 20, 20, 0.35), rgba(20, 20, 20, 0));
}

.u-hero--panel .u-year {
  left: calc(var(--container-pad) - 0.06em);
  bottom: -0.08em;
  font-size: clamp(9rem, 22vw, 24rem);
}

.u-hero--panel .u-side {
  right: calc(47vw + 22px);
  bottom: clamp(32px, 5vw, 72px);
  text-align: right;
}

/* Pilot 2: Foto läuft in den Hintergrund aus, Asphaltwelle -------------- */

.u-hero--fade .u-hero__media {
  overflow: hidden;
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  bottom: 0;
  width: 62vw;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 38%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 38%);
}

.u-hero--fade .u-hero__media img {
  width: 100%;
  height: 112%;
  object-fit: cover;
  object-position: 60% 30%;
}

.u-hero__wave {
  position: absolute;
  z-index: 2;
  right: -6vw;
  bottom: -9vw;
  width: 54vw;
  max-width: none;
  pointer-events: none;
}

.u-hero--fade .u-year {
  top: 50%;
  right: calc(var(--container-pad) - 0.1em);
  z-index: 2;
  font-size: clamp(7rem, 13vw, 14rem);
  font-weight: 600;
  color: rgba(253, 253, 253, 0.34);
  writing-mode: vertical-rl;
  transform: translateY(-50%) rotate(180deg);
}

.u-hero--fade .u-side {
  top: clamp(24px, 4vw, 56px);
  right: var(--container-pad);
  color: var(--color-on-dark);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35);
}

/* Pilot 3: Paneel, das beim Scrollen zum Vollbild wird ----------------- */

.u-hero--expand .u-hero__media {
  position: absolute;
  z-index: 1;
  inset: 0;
  overflow: hidden;
  clip-path: inset(clamp(24px, 4vw, 56px) var(--container-pad) clamp(24px, 4vw, 56px) 54%);
}

.u-hero--expand .u-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 55% 60%;
}

.u-hero--expand .u-hero__shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(20, 20, 20, 0.72) 0%, rgba(20, 20, 20, 0.1) 60%);
  opacity: 0;
}

.u-hero--expand .u-hero__claim {
  position: absolute;
  z-index: 3;
  left: var(--container-pad);
  right: var(--container-pad);
  bottom: clamp(40px, 7vw, 110px);
  margin: 0;
  font-weight: 800;
  font-size: clamp(2.6rem, 6.4vw, 6.6rem);
  line-height: 0.98;
  letter-spacing: -0.03em;
  color: var(--color-on-dark);
  opacity: 0;
  visibility: hidden;
}

.u-hero--expand .u-year {
  left: calc(var(--container-pad) - 0.06em);
  bottom: -0.08em;
  font-size: clamp(9rem, 20vw, 22rem);
}

/* Rahmen-Hero (alle Unterseiten): Text und Bild als zwei gleich breite
   Hälften mit gemeinsamer Ober- und Unterkante; in der Fuge dazwischen die
   senkrechte 1895 wie auf der Landingpage. Parallax: js/unterseiten.js. */
.u-hero--frame {
  --u-hero-edge: clamp(24px, 4vw, 56px);
  --u-hero-gap: clamp(64px, 7vw, 128px);
  --u-hero-x: max(var(--container-pad), calc((100% - var(--container-max)) / 2 + var(--container-pad)));
}

.u-hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 24px;
  margin-top: clamp(28px, 4vw, 40px);
  padding-top: 18px;
  border-top: 1px solid var(--color-line);
}

.u-hero__phone {
  display: inline-flex;
  align-items: baseline;
  gap: 14px;
  color: var(--color-ink);
}

.u-hero__phone-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-ink-faint);
}

.u-hero__phone-number {
  font-family: var(--font-num);
  font-size: clamp(1.4rem, 1.8vw, 1.8rem);
  font-weight: 500;
  letter-spacing: 0.02em;
  transition: color 0.2s ease;
}

.u-hero__phone:hover .u-hero__phone-number {
  color: var(--color-accent);
}

.u-hero__hours {
  margin: 0;
  font-size: 0.85rem;
  color: var(--color-ink-faint);
}

@media (min-width: 901px) {
  .u-hero--frame {
    align-items: stretch;
  }

  .u-hero--frame .u-hero__media {
    clip-path: inset(var(--u-hero-edge) var(--u-hero-x) var(--u-hero-edge) calc(50% + var(--u-hero-gap) / 2));
  }

  .u-hero--frame .u-hero__inner {
    display: flex;
    padding-block: var(--u-hero-edge);
  }

  .u-hero--frame .u-hero__content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 32px;
    width: calc((100% - var(--u-hero-gap)) / 2);
    max-width: none;
  }

  .u-hero--frame .u-crumbs {
    margin-bottom: 0;
  }


  .u-hero--frame .u-hero__lead {
    max-width: 44ch;
    font-size: clamp(1.02rem, 1.2vw, 1.22rem);
  }

  .u-hero--frame .u-hero__meta {
    margin-top: 0;
  }

  /* Senkrecht in der Fuge, bündig mit der Bild-Unterkante, liest von unten
     nach oben. rotate/translate als Einzel-Properties, weil GSAP für die
     Parallax transform setzt. */
  .u-hero--frame .u-year {
    left: 50%;
    bottom: var(--u-hero-edge);
    translate: -50% 0;
    rotate: 180deg;
    writing-mode: vertical-rl;
    font-family: var(--font-sans);
    font-size: clamp(3.6rem, 5.4vw, 6.2rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.02em;
    color: rgba(20, 20, 20, 0.12);
  }
}

/* --------------------------------------------------------------------- */
/* Nummerierte Zeilen (Pilot 1, Referenz 1)                               */
/* --------------------------------------------------------------------- */

.u-rows {
  display: grid;
  gap: clamp(40px, 6vw, 88px);
}

.u-row {
  scroll-margin-top: calc(var(--nav-height) + 32px);
  display: grid;
  grid-template-columns: clamp(64px, 7vw, 110px) minmax(0, 4fr) minmax(0, 7fr);
  gap: 0 clamp(20px, 3vw, 48px);
  align-items: center;
}

.u-row__num {
  align-self: start;
  margin: 0;
  font-family: var(--font-num);
  font-weight: 300;
  font-size: clamp(3.2rem, 5.4vw, 5rem);
  line-height: 0.85;
  color: var(--color-accent);
}

.u-row__text h2 {
  margin: 0;
  font-size: var(--fs-card-title);
  font-weight: 800;
  line-height: var(--lh-card-title);
  letter-spacing: -0.02em;
}

.u-row__text p {
  margin: 16px 0 0;
  max-width: 42ch;
  line-height: 1.65;
  color: var(--color-ink-soft);
}

.u-kicker {
  margin: 0 0 12px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
}

.u-row__media {
  margin: 0;
  overflow: hidden;
  aspect-ratio: 2.4 / 1;
  border-radius: 3px;
}

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

/* Anklickbare Leistungszeile (Leistungsübersicht): die ganze Zeile ist ein
   Link. Der Hover-Zoom sitzt auf einem Wrapper, weil GSAP am Bild selbst
   Inline-Transforms setzt (Wisch-Effekt) und CSS-Transforms dort nicht greifen. */
.u-row--link {
  color: inherit;
}

.u-row--link .u-row__text h2 {
  transition: color 0.3s ease;
}

.u-row--link .u-rule {
  transition: width 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.u-row--link .u-link {
  transition: gap 0.3s ease;
}

.u-row__zoom {
  display: block;
  width: 100%;
  height: 100%;
  transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
}

@media (hover: hover) {
  .u-row--link:hover .u-row__text h2 {
    color: var(--color-accent);
  }

  .u-row--link:hover .u-link {
    gap: 16px;
  }
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .u-row--link:hover .u-row__zoom {
    transform: scale(1.05);
  }

  .u-row--link:hover .u-rule {
    width: 120px;
  }
}

.u-row--link:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 12px;
  border-radius: 4px;
}

/* --------------------------------------------------------------------- */
/* Zahlenband                                                             */
/* --------------------------------------------------------------------- */

.u-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.u-stat {
  padding: 8px clamp(12px, 2vw, 32px);
  text-align: center;
}

.u-stat + .u-stat {
  border-left: 1px solid rgba(255, 255, 255, 0.28);
}

.u-stat__value {
  display: block;
  font-family: var(--font-num);
  font-weight: 500;
  font-size: clamp(2.8rem, 5vw, 4.8rem);
  line-height: 1;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.u-stat__label {
  display: block;
  margin-top: 12px;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.u-band {
  padding-block: clamp(44px, 5vw, 72px);
  background: var(--color-accent);
  color: #fff;
}

.u-band .u-stat__label {
  color: rgba(255, 255, 255, 0.72);
}

/* helle Variante (Referenz 2) */
.u-stats--light {
  padding-block: clamp(28px, 3vw, 44px);
  border-block: 1px solid var(--color-line);
}

/* Seit 11.10.2026 mittig wie die rote Variante (Notiz #15: Zahlen überall gleich ausrichten) */
.u-stats--light .u-stat {
  text-align: center;
}

.u-stats--light .u-stat + .u-stat {
  border-left-color: var(--color-line);
}

.u-stats--light .u-stat__value {
  font-weight: 600;
  color: #b3b3b3;
}

.u-stats--light .u-stat__label {
  letter-spacing: 0.04em;
  text-transform: none;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--color-ink-soft);
}

/* Rahmen: Zahlenleiste direkt unter dem Hero. Endzustand Bordeaux – das
   Grau → Bordeaux beim Hochzählen setzt js/unterseiten.js (nur mit Bewegung). */
.u-statsbar {
  padding-block: clamp(12px, 2vw, 28px) 0;
  background: var(--color-hero-bg);
}

.u-statsbar .u-stats {
  border-top: 0;
}

.u-stats--fill .u-stat__value {
  color: var(--color-accent);
}

/* --------------------------------------------------------------------- */
/* Großes Zitat (Pilot 1)                                                 */
/* --------------------------------------------------------------------- */

.u-quote {
  margin: 0;
}

.u-quote blockquote {
  margin: 0;
  max-width: 22ch;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(2.2rem, 5.2vw, 5rem);
  line-height: 1.08;
  letter-spacing: -0.015em;
}

.u-quote figcaption {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 36px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
}

.u-quote figcaption::before {
  content: "";
  width: 48px;
  height: 1px;
  background: var(--color-accent);
}

.u-w {
  display: inline-block;
}

.u-lines .u-w {
  overflow: hidden;
  vertical-align: top;
}

.u-lines .u-w > span {
  display: inline-block;
}

/* --------------------------------------------------------------------- */
/* Ansprechpartner (Pilot 1)                                              */
/* --------------------------------------------------------------------- */

.u-person {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: var(--u-gap);
  align-items: center;
}

.u-person__media {
  margin: 0;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  border-radius: 3px;
}

.u-person__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 55% 35%;
  filter: grayscale(1) contrast(1.06);
}

.u-person__name {
  margin: 0;
  font-size: clamp(2rem, 3.4vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.05;
}

.u-person__phone {
  display: inline-block;
  margin-top: 26px;
  font-family: var(--font-num);
  font-weight: 500;
  font-size: clamp(2.2rem, 3.6vw, 3.2rem);
  letter-spacing: 0.02em;
  color: var(--color-accent);
}

.u-person__phone:hover {
  color: var(--color-accent-hover);
}

/* --------------------------------------------------------------------- */
/* Anspruch mit Wort-Einfärbung (Pilot 2, Referenz 2)                     */
/* --------------------------------------------------------------------- */

.u-statement {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: var(--u-gap);
  align-items: start;
}

.u-statement__text {
  margin: 0;
  font-size: clamp(1.25rem, 1.9vw, 1.7rem);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.01em;
}

/* Grundfarbe bewusst lesbar (seit 30.09.: 42 % statt 16 %) – der Text ist
   vor dem Einfärben vollständig lesbar, die Einfärbung ist nur Akzent. */
.u-words.is-enhanced .u-w {
  color: rgba(20, 20, 20, 0.42);
}

/* Wohnungsbau: Stand vor dem Umbau vom 30.09. (auf Wunsch zurückgesetzt) */
.u-page--wohnungsbau .u-words.is-enhanced .u-w {
  color: rgba(20, 20, 20, 0.16);
}

/* --------------------------------------------------------------------- */
/* Versetzte Zeilen mit Parallax (Pilot 2, Referenz 2)                    */
/* --------------------------------------------------------------------- */

.u-zig {
  display: grid;
  gap: clamp(56px, 8vw, 120px);
}

.u-zig__item {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: var(--u-gap);
  align-items: center;
}

.u-zig__item:nth-child(even) .u-zig__media {
  order: 2;
}

.u-zig__media {
  margin: 0;
  overflow: hidden;
  aspect-ratio: 16 / 11;
  border-radius: 3px;
}

.u-zig__media img {
  width: 100%;
  height: 118%;
  object-fit: cover;
  transform: translateY(-8%);
}

.u-zig__head {
  display: flex;
  align-items: baseline;
  gap: 18px;
}

.u-zig__num {
  font-family: var(--font-num);
  font-weight: 600;
  font-size: clamp(2.6rem, 4vw, 3.6rem);
  line-height: 1;
  color: rgba(20, 20, 20, 0.16);
}

.u-zig__text h2,
.u-zig__text h3 {
  margin: 6px 0 0;
  font-size: clamp(1.7rem, 2.6vw, 2.5rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.u-zig__text p {
  margin: 18px 0 0;
  max-width: 44ch;
  line-height: 1.65;
  color: var(--color-ink-soft);
}

/* --------------------------------------------------------------------- */
/* Horizontale Raum-Strecke (Pilot 3)                                     */
/* --------------------------------------------------------------------- */

.u-hs {
  position: relative;
  overflow: hidden;
  padding-block: var(--section-pad-y);
  background: var(--color-dark);
  color: var(--color-on-dark);
}

/* Gleiches Raster wie der Anspruch (.u-statement, 5 : 6): Titel und
   Untertext stehen auf denselben Achsen wie der Abschnitt darüber. */
.u-hs__head {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: var(--u-gap);
  align-items: end;
  margin-bottom: clamp(36px, 4vw, 56px);
}

.u-hs__head .u-lead {
  color: var(--color-on-dark-soft);
}

.u-hs__viewport {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.u-hs__viewport::-webkit-scrollbar {
  display: none;
}

/* Rand wie .container – auch über 1680 px beginnt die erste Kachel auf der
   Textachse (--u-hs-x); gleicher Rand für den Fortschrittsbalken. */
.u-hs {
  --u-hs-x: max(var(--container-pad), calc((100vw - var(--container-max)) / 2 + var(--container-pad)));
}

.u-hs__track {
  display: flex;
  gap: clamp(16px, 2vw, 32px);
  width: max-content;
  padding-inline: var(--u-hs-x);
}

.u-hs__panel {
  position: relative;
  flex: 0 0 auto;
  width: min(62vw, 980px);
  height: min(68svh, 640px);
  margin: 0;
  overflow: hidden;
  border-radius: 3px;
  scroll-snap-align: start;
}

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

.u-hs__panel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(20, 20, 20, 0.82) 0%, rgba(20, 20, 20, 0) 55%);
}

.u-hs__caption {
  position: absolute;
  z-index: 1;
  left: clamp(20px, 3vw, 44px);
  right: clamp(20px, 3vw, 44px);
  bottom: clamp(20px, 3vw, 40px);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0 clamp(16px, 2vw, 32px);
  align-items: end;
}

.u-hs__num {
  font-family: var(--font-num);
  font-weight: 300;
  font-size: clamp(4rem, 8vw, 8rem);
  line-height: 0.8;
  color: var(--color-on-dark);
}

.u-hs__caption h3 {
  margin: 0;
  font-size: var(--fs-card-title);
  font-weight: 800;
  line-height: var(--lh-card-title);
}

.u-hs__caption p {
  margin: 10px 0 0;
  max-width: 46ch;
  line-height: 1.55;
  color: var(--color-on-dark-soft);
}

.u-hs__progress {
  position: relative;
  height: 1px;
  margin: clamp(28px, 3vw, 44px) var(--u-hs-x) 0;
  background: var(--color-on-dark-line);
}

.u-hs__progress span {
  position: absolute;
  inset: 0;
  background: var(--color-on-dark);
  transform: scaleX(0);
  transform-origin: left center;
}

/* Desktop (fixiert): Strecke genau so hoch wie das Fenster – die Kacheln
   nehmen nur den Platz unter dem Kopf ein, nichts ragt über den Rand.
   Die Bilder sind breiter als die Kachel, damit die Parallax beim
   Querlauf (js/unterseiten.js) keine Ränder freilegt. */
@media (min-width: 901px) {
  .u-hs {
    display: flex;
    flex-direction: column;
    height: 100svh;
    min-height: 600px;
    padding-block: calc(var(--nav-height) + clamp(8px, 1.6vw, 24px)) clamp(24px, 3vw, 40px);
  }

  /* width: Als Flex-Element mit margin-inline:auto (.container) würde der
     Kopf sonst nur inhaltsbreit und mittig stehen – also eingerückt. */
  .u-hs__head {
    flex: none;
    width: 100%;
    margin-bottom: clamp(20px, 2.4vw, 36px);
  }

  .u-hs__viewport {
    flex: 1 1 auto;
    min-height: 0;
  }

  .u-hs__track,
  .u-hs__panel {
    height: 100%;
  }

  .u-hs__panel img {
    width: 116%;
    max-width: none;
    margin-left: -8%;
  }

  .u-hs__progress {
    flex: none;
    margin-top: clamp(16px, 2vw, 28px);
  }
}

/* Bildunterschrift als Block unten links: Nummer mit Linie, Titel, Text */
.u-hs--reveal .u-hs__panel::after {
  background: linear-gradient(0deg, rgba(20, 20, 20, 0.88) 0%, rgba(20, 20, 20, 0.35) 38%, rgba(20, 20, 20, 0) 62%);
}

.u-hs--reveal .u-hs__caption {
  display: block;
  left: clamp(22px, 3vw, 48px);
  right: clamp(22px, 3vw, 48px);
  bottom: clamp(22px, 3vw, 44px);
  max-width: 600px;
}

.u-hs__index {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: clamp(10px, 1.2vw, 18px);
  overflow: hidden;
  font-family: var(--font-num);
  font-size: clamp(2.8rem, 4.2vw, 4.6rem);
  font-weight: 300;
  line-height: 0.9;
  color: var(--color-on-dark);
}

.u-hs__index > span {
  display: inline-block;
}

.u-hs__index::after {
  content: "";
  flex: 0 0 clamp(48px, 5vw, 96px);
  height: 1px;
  background: rgba(244, 244, 244, 0.6);
}

.u-hs--reveal .u-hs__caption h3 .u-w {
  overflow: hidden;
  vertical-align: top;
  padding-bottom: 0.1em;
  margin-bottom: -0.1em;
}

.u-hs--reveal .u-hs__caption h3 .u-w > span {
  display: inline-block;
}

/* Text-Animation: aktiv erst, wenn js/unterseiten.js .is-animated setzt
   (ohne JS / reduzierte Bewegung bleibt alles statisch sichtbar).
   .is-in kommt an die Kachel, sobald sie zu 75 % im Bild ist. */
@media (prefers-reduced-motion: no-preference) {
  .u-hs--reveal.is-animated .u-hs__index > span {
    transform: translateY(105%);
    transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
  }

  .u-hs--reveal.is-animated .u-hs__index::after {
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.2s;
  }

  .u-hs--reveal.is-animated .u-hs__caption h3 .u-w > span {
    transform: translateY(110%);
    transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
    transition-delay: calc(0.15s + var(--i, 0) * 0.05s);
  }

  .u-hs--reveal.is-animated .u-hs__caption p {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.7s ease 0.45s, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) 0.45s;
  }

  .u-hs--reveal.is-animated .is-in .u-hs__index > span,
  .u-hs--reveal.is-animated .is-in .u-hs__caption h3 .u-w > span,
  .u-hs--reveal.is-animated .is-in .u-hs__caption p {
    opacity: 1;
    transform: none;
  }

  .u-hs--reveal.is-animated .is-in .u-hs__index::after {
    transform: scaleX(1);
  }
}

/* --------------------------------------------------------------------- */
/* Laufband auf Asphalt (Pilot 3)                                          */
/* --------------------------------------------------------------------- */

/* Asphalt und Schrift wie Band 01–04 der Startseite (seit 12.10.2026):
   Fläche über die gemeinsame Komponente .asphalt (styles.css, js/asphalt.js),
   Wörter weiß und fett, jedes zweite halbtransparent wie die Zahlen. */
.u-marquee {
  position: relative;
  padding-block: clamp(28px, 3.4vw, 48px);
  color: var(--asphalt-text);
}

.u-marquee__line {
  position: relative;
  display: flex;
  gap: 0.5em;
  width: max-content;
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(2.4rem, 5.6vw, 5.6rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.u-marquee__line span:nth-child(even) {
  color: var(--asphalt-text-leise);
}

/* --------------------------------------------------------------------- */
/* Schleif-Effekt: roh → geschliffen (Pilot 3)                            */
/* --------------------------------------------------------------------- */

.u-grind__head {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: var(--u-gap);
  align-items: end;
  margin-bottom: clamp(32px, 4vw, 56px);
}

.u-grind__stage {
  position: relative;
  overflow: hidden;
  aspect-ratio: 21 / 9;
  border-radius: 3px;
  background: var(--color-dark);
}

.u-grind__stage img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.u-grind__after {
  clip-path: inset(0 50% 0 0);
}

.u-grind__edge {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  background: var(--color-on-dark);
  box-shadow: 0 0 24px rgba(255, 255, 255, 0.6);
}

.u-grind__label {
  position: absolute;
  top: 20px;
  padding: 6px 12px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-on-dark);
  background: rgba(13, 13, 13, 0.55);
}

.u-grind__label--after { left: 20px; }
.u-grind__label--before { right: 20px; }

.u-grind__steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 48px);
  margin: clamp(28px, 3vw, 44px) 0 0;
  padding: 0;
  list-style: none;
}

.u-grind__steps li {
  padding-top: 16px;
  border-top: 1px solid var(--color-line);
  transition: border-color 0.3s ease, opacity 0.3s ease;
}

.u-grind__steps strong {
  display: block;
  font-size: 1.05rem;
}

.u-grind__steps span {
  display: block;
  margin-top: 6px;
  line-height: 1.55;
  color: var(--color-ink-soft);
}

.u-grind.is-enhanced .u-grind__steps li {
  opacity: 0.35;
}

.u-grind.is-enhanced .u-grind__steps li.is-active {
  opacity: 1;
  border-top-color: var(--color-accent);
}

/* --------------------------------------------------------------------- */
/* Team (Pilot 3)                                                         */
/* --------------------------------------------------------------------- */

.u-team {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(20px, 2.4vw, 36px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.u-team img {
  width: 100%;
  aspect-ratio: 2 / 1;
  object-fit: cover;
  filter: grayscale(1) contrast(1.05);
  transition: filter 0.4s ease;
}

.u-team li:hover img {
  filter: none;
}

.u-team h3 {
  margin: 16px 0 0;
  font-size: 1.05rem;
  font-weight: 700;
}

.u-team a {
  display: inline-block;
  margin-top: 4px;
  font-family: var(--font-num);
  font-weight: 500;
  font-size: 1.35rem;
  color: var(--color-accent);
}

/* Kopfzeile für Abschnitte (Titel links, Text rechts) */
.u-head {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: var(--u-gap);
  align-items: end;
  margin-bottom: clamp(40px, 5vw, 72px);
}

/* Kopf ohne folgenden Inhalt (Straßenbau „Warum Gussasphalt“, seit 13.10.2026): Text oben bündig,
   kein Abstand nach unten */
.u-head--text {
  align-items: start;
  margin-bottom: 0;
}

.u-head--text .u-lead + .u-lead {
  margin-top: 16px;
}

/* Erklärblöcke als eigener Abschnitt (Straßenbau „Leistungen im Detail“): erster Block ohne Linie */
.container > .u-layers__more:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

/* Nachweise als eigener Abschnitt (Straßenbau): oben kein zusätzlicher Abstand */
.container > .u-proofs:first-child {
  margin-top: 0;
}

/* Prüfstellen (intern, ?review=1) */
html.show-review [data-review] {
  outline: 2px dashed #c77d00;
  outline-offset: 4px;
}

html.show-review [data-review]::before {
  content: "Freigabe: " attr(data-review);
  display: block;
  width: max-content;
  max-width: 320px;
  margin-bottom: 6px;
  padding: 4px 8px;
  border-radius: 4px;
  background: #c77d00;
  color: #fff;
  font: 600 11px/1.35 var(--font-sans);
  letter-spacing: 0;
  text-transform: none;
}

/* --------------------------------------------------------------------- */
/* Gussasphalt: Vorteile in vier großen Wörtern                           */
/* Wort links, rechts Kernsatz + Text + Chips; Text beginnt auf der        */
/* Seitenmitte (gleiche Achse wie der Einleitungstext, .u-head--half).     */
/* Auftritt (js/unterseiten.js, nur mit Bewegung): Wort steigt aus der     */
/* Maske und füllt sich von links nach rechts von Grau zu Bordeaux; rechts */
/* wächst die Linie, dann Kernsatz, Text und Chips nacheinander.           */
/* Ohne JS / reduzierte Bewegung: fertiger Zustand (Bordeaux, alles da).   */
/* --------------------------------------------------------------------- */

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

.u-props {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--color-line);
}

.u-props__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--u-gap);
  align-items: center;
  /* Ohne Eigenschafts-Chips (Andrés Feedback 30.09.): alle vier Bereiche
     gleich gebaut – Schlagwort links, Überschrift und ein Absatz rechts */
  padding-block: clamp(44px, 5.2vw, 80px);
  border-bottom: 1px solid var(--color-line);
}

.u-props__word {
  margin: 0;
  font-size: clamp(3.2rem, 8.6vw, 8.6rem);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.045em;
  color: var(--color-accent);
}

/* Maske für das Aufsteigen; Innenabstand, damit Umlaute nicht abgeschnitten werden */
.u-props__mask {
  display: block;
  overflow: hidden;
  padding-block: 0.12em 0.06em;
  margin-block: -0.12em -0.06em;
}

.u-props__inner {
  display: inline-block;
}

.u-props__text .u-rule {
  margin-bottom: 18px;
}

.u-props__text p {
  margin: 0;
  max-width: 44ch;
  font-size: clamp(1.02rem, 1.15vw, 1.12rem);
  line-height: 1.65;
  color: rgba(20, 20, 20, 0.78);
}

.u-props__text .u-props__key {
  margin-bottom: 12px;
  max-width: 26ch;
  font-size: clamp(1.35rem, 1.9vw, 1.8rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--color-ink);
}

/* Füllung Grau → Bordeaux als Verlauf durch die Buchstaben (nur mit JS);
   der Punkt (.u-dot) wird wie das Wort mit eingefärbt. */
@media (prefers-reduced-motion: no-preference) {
  .u-props.is-animated .u-props__inner {
    background: linear-gradient(90deg, var(--color-accent) 0 50%, #b3b3b3 50% 100%);
    background-size: 200.5% 100%;
    background-position: 100% 0;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

/* Laufband mit zwei gegenläufigen Zeilen (Einsatzorte innen / außen) */
.u-marquee--double .u-marquee__line {
  font-size: clamp(2.2rem, 5.2vw, 5.2rem);
}

.u-marquee--double .u-marquee__line + .u-marquee__line {
  margin-top: clamp(6px, 1vw, 14px);
}

/* Herkunft */
.u-origin__lead {
  margin-top: clamp(28px, 3vw, 44px);
}

/* FAQ-Schriftzug: seit 2026-09-30 für alle Seiten in styles.css (.faq-section__ghost) */

/* Schichtaufbau auf Unterseiten (Gussasphalt), nur Desktop mit Bewegung:
   Schritte als verbundene Zeitleiste – Linie mit Knoten links, Akzent füllt
   sich beim Scrollen; der Schritt auf Höhe der Bildmitte ist groß, die
   übrigen treten kleiner und blasser zurück (Fokus, js/unterseiten.js).
   Startseite und Smartphone behalten die einfache Liste aus layers.css. */
@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
  .u-page .layers.is-enhanced .layers__steps {
    position: relative;
    padding-left: clamp(40px, 3.6vw, 60px);
  }

  .u-page .layers.is-enhanced .layers__step {
    min-height: 58svh;
    opacity: 1;
    transition: none;
  }

  .u-page .layers.is-enhanced .layers__body {
    transform-origin: left center;
  }

  .u-page .layers.is-enhanced .layers__num {
    font-size: clamp(3.4rem, 5.2vw, 5.4rem);
  }

  .u-page .layers.is-enhanced .layers__title {
    font-size: clamp(2.4rem, 3.8vw, 3.6rem);
  }

  .u-page .layers.is-enhanced .layers__text {
    max-width: 460px;
    font-size: 1.08rem;
  }

  .layers__track {
    position: absolute;
    left: 0;
    width: 1px;
    list-style: none;
    background: var(--color-line);
    pointer-events: none;
  }

  .layers__track-fill {
    position: absolute;
    inset: 0;
    background: var(--color-accent);
    transform: scaleY(0);
    transform-origin: top center;
  }

  .layers__node {
    position: absolute;
    left: 0;
    width: 11px;
    height: 11px;
    margin: -5.5px 0 0 -5px;
    border: 1px solid rgba(20, 20, 20, 0.28);
    border-radius: 50%;
    background: var(--color-page-bg);
    transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
  }

  .layers__node.is-passed {
    border-color: var(--color-accent);
    background: var(--color-accent);
  }

  .layers__node.is-current {
    box-shadow: 0 0 0 6px rgba(227, 6, 19, 0.14);
  }
}

/* Abschnittskopf ohne Folgeinhalt (z. B. Brücke zum Schichtaufbau) */
.u-head--flush {
  margin-bottom: 0;
}

@media (max-width: 900px) {
  .u-props__item {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    align-items: start;
  }
}

/* --------------------------------------------------------------------- */
/* Responsive                                                             */
/* --------------------------------------------------------------------- */

@media (max-width: 1024px) {
  .u-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 32px;
  }

  .u-stat:nth-child(3) {
    border-left: 0;
  }

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

@media (max-width: 900px) {
  .u-hero {
    display: block;
    min-height: 0;
  }

  .u-hero__content {
    max-width: none;
  }

  .u-hero--panel .u-hero__media,
  .u-hero--fade .u-hero__media {
    position: relative;
    width: auto;
    height: 58svh;
    margin-inline: 0;
  }

  .u-hero--fade .u-hero__media {
    -webkit-mask-image: linear-gradient(0deg, #000 70%, transparent 100%);
    mask-image: linear-gradient(0deg, #000 70%, transparent 100%);
  }

  .u-hero--fade .u-hero__media img {
    height: 100%;
  }

  .u-hero__wave {
    width: 130vw;
    right: -20vw;
  }

  .u-hero--panel .u-side,
  .u-hero--panel .u-year {
    display: none;
  }

  .u-hero--fade .u-year {
    top: auto;
    bottom: 12px;
    transform: rotate(180deg);
    font-size: 6rem;
  }

  .u-hero--expand {
    min-height: 0;
  }

  .u-hero--expand .u-hero__media {
    position: relative;
    height: 62svh;
    clip-path: none;
  }

  .u-hero--expand .u-hero__claim {
    display: none;
  }

  .u-hero--expand .u-year {
    display: none;
  }

  .u-row {
    grid-template-columns: 56px minmax(0, 1fr);
    row-gap: 24px;
  }

  .u-row__media {
    grid-column: 1 / -1;
    aspect-ratio: 16 / 9;
  }

  .u-person,
  .u-statement,
  .u-zig__item,
  .u-hs__head,
  .u-grind__head,
  .u-head {
    grid-template-columns: minmax(0, 1fr);
  }


  .u-zig__item:nth-child(even) .u-zig__media {
    order: 0;
  }

  .u-hs__panel {
    width: 82vw;
    height: 62svh;
  }

  .u-grind__stage {
    aspect-ratio: 4 / 3;
  }

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

@media (max-width: 560px) {
  .u-stat {
    padding-inline: 10px;
  }

  .u-stat__label {
    letter-spacing: 0.12em;
  }

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

  .u-hero__actions .btn {
    flex: 1 1 100%;
    justify-content: center;
  }
}

/* --------------------------------------------------------------------- */
/* Referenzen (referenzen.html): Raster ausgeführter Arbeiten + Auftrag-  */
/* geberliste. Neue Referenz = weiteres <li class="u-ref">; das Raster     */
/* wächst von selbst (3 / 2 / 1 Spalten).                                 */
/* --------------------------------------------------------------------- */

.u-refs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(40px, 5vw, 72px) clamp(20px, 2.4vw, 36px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.u-ref__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: inherit;
}

.u-ref__media {
  display: block;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  margin-bottom: 22px;
  border-radius: 3px;
  background: var(--color-page-bg);
}

.u-ref__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.u-ref__num {
  font-family: var(--font-num);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--color-accent);
}

.u-ref__title {
  margin-top: 8px;
  font-size: var(--fs-card-title);
  font-weight: 800;
  line-height: var(--lh-card-title);
  letter-spacing: -0.02em;
  transition: color 0.3s ease;
}

.u-ref__text {
  margin-top: 8px;
  line-height: 1.6;
  color: var(--color-ink-soft);
}

.u-ref__more {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding-top: 18px;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--color-accent);
  transition: gap 0.2s ease;
}

.u-ref__more svg {
  width: 14px;
  height: 14px;
}

@media (hover: hover) {
  .u-ref__link:hover .u-ref__title {
    color: var(--color-accent);
  }

  .u-ref__link:hover .u-ref__more {
    gap: 14px;
  }
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .u-ref__link:hover .u-ref__media img {
    transform: scale(1.04);
  }
}

.u-ref__link:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 8px;
  border-radius: 4px;
}

@media (max-width: 1024px) {
  .u-refs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

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

  .u-ref__media {
    aspect-ratio: 4 / 3;
  }
}

/* ===================================================================== */
/* Leistungsseiten (Wohnungsbau, Straßenbau, WHG, Hallen) – seit 30.09.  */
/* Gemeinsamer Aufbau: Hero → Einordnung (.u-statement) → Auf einen Blick  */
/* (.u-glance) → ein dominantes Modul → Beispiele/Nachweise → Für Ihre     */
/* Anfrage (.u-ask) → Weitere Leistungen → (FAQ) → Anfrage.                */
/* Module: Raum-Strecke (.u-hs, Wohnungsbau), fixierter Bildbereich        */
/* (.u-focus, Straßenbau), Themenfolge (.u-seq, WHG), gestaffeltes         */
/* Bildpaar (.u-pair, Hallen). Bewegung in js/unterseiten.js; ohne JS und  */
/* bei reduzierter Bewegung ist alles sichtbar und statisch.               */
/* ===================================================================== */

.u-section--dark {
  background-color: var(--color-dark);
  color: var(--color-on-dark);
}

/* Dunkle Abschnitte mit Gussasphalt wie Band 01–04 (gemeinsame Komponente
   .asphalt in styles.css, Körnung aus js/asphalt.js); z. B. „Ein Blick in
   unsere Arbeit“ auf Über uns (seit 12.10.2026) */
.u-section--dark.asphalt {
  position: relative;
  background-color: var(--asphalt-grund);
}

/* Fließtext auf der Körnung etwas heller (wie „Unsere Referenzen“) */
.u-section--dark.asphalt .u-lead,
.u-section--dark.asphalt .u-cap {
  color: rgba(244, 244, 244, 0.88);
}

.u-section--dark .u-lead,
.u-section--dark .u-cap {
  color: var(--color-on-dark-soft);
}

.u-section--dark .u-link {
  color: var(--color-on-dark);
  border-bottom-color: var(--color-on-dark-line);
}

/* Sprungziele unter der schwebenden Leiste (Wohnungsbau: wie vor dem Umbau ohne) */
.u-page:not(.u-page--wohnungsbau) [id] {
  scroll-margin-top: calc(var(--nav-height) + 24px);
}

/* Bildunterschrift */
.u-cap {
  margin: 12px 0 0;
  max-width: 62ch;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--color-ink-soft);
}

/* --- Auf einen Blick ------------------------------------------------- */

.u-glance__cols {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: var(--u-gap);
  align-items: start;
}

.u-glance__cols--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 56px);
}

.u-glance__label {
  margin: 0;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--color-ink);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-ink);
}

.u-glance__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.u-glance__item {
  display: grid;
  grid-template-columns: 2.6rem minmax(0, 1fr);
  gap: 0 12px;
  padding-block: clamp(18px, 2vw, 26px);
  border-bottom: 1px solid var(--color-line);
}

.u-glance__num {
  font-family: var(--font-num);
  font-size: 1.1rem;
  font-weight: 500;
  line-height: 1.55;
  color: var(--color-accent);
}

.u-glance__item h3,
.u-glance__h {
  margin: 0;
  font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.55rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.u-glance__item p {
  margin: 8px 0 0;
  max-width: 52ch;
  line-height: 1.6;
  color: var(--color-ink-soft);
}

.u-glance__item .u-link {
  margin-top: 12px;
}

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

.u-seq__cta {
  margin-top: 28px;
}

.u-glance__list--plain li {
  padding-block: 14px;
  border-bottom: 1px solid var(--color-line);
  font-size: 1.05rem;
  font-weight: 600;
}

/* --- Für Ihre Anfrage ------------------------------------------------ */

.u-ask {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: var(--u-gap);
  align-items: start;
}

.u-ask .btn {
  margin-top: 28px;
}

.u-ask__list {
  counter-reset: ask;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--color-ink);
}

.u-ask__list li {
  display: grid;
  grid-template-columns: 2.6rem minmax(0, 1fr);
  gap: 0 12px;
  padding-block: 16px;
  border-bottom: 1px solid var(--color-line);
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 1.5;
}

.u-ask__list li::before {
  counter-increment: ask;
  content: counter(ask, decimal-leading-zero);
  font-family: var(--font-num);
  font-size: 1.05rem;
  color: var(--color-accent);
}

/* --- Straßenbau: fixierter Bildbereich (Idee A) ----------------------
   Das Bild steht per CSS sticky (kein JS-Pin, kein Scrollweg ohne Inhalt).
   js/unterseiten.js schaltet .is-active je Abschnitt; das Bild blendet in
   0,6 s über und setzt sich aus 104 % auf 100 %. Ohne JS bleibt Bild 1. */

.u-focus__grid {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: var(--u-gap);
  align-items: start;
}

.u-focus__media {
  position: sticky;
  top: calc(var(--nav-height) + 24px);
  margin: 0;
}

.u-focus__frame {
  position: relative;
  height: min(calc(100svh - var(--nav-height) - 72px), 820px);
  min-height: 420px;
  overflow: hidden;
  border-radius: 3px;
  background: #0d0d0d;
}

.u-focus__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(13, 13, 13, 0.7) 0%, rgba(13, 13, 13, 0) 30%);
  pointer-events: none;
}

.u-focus__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 0.6s ease, transform 1s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.u-focus__img.is-active {
  opacity: 1;
  transform: none;
}

.u-focus__caption {
  position: absolute;
  z-index: 1;
  left: clamp(18px, 2vw, 28px);
  right: clamp(18px, 2vw, 28px);
  bottom: clamp(16px, 2vw, 24px);
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.45;
  color: rgba(244, 244, 244, 0.9);
}

.u-focus__steps {
  margin: 0;
  padding: 0;
  list-style: none;
}

.u-focus__step {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 60svh;
  padding-block: 32px;
}

.u-focus__num {
  font-family: var(--font-num);
  font-size: clamp(2.8rem, 4vw, 4.2rem);
  font-weight: 300;
  line-height: 0.9;
  transition: color 0.4s ease;
}

.u-focus__line {
  display: block;
  width: 48px;
  height: 1px;
  margin: 20px 0 18px;
  background: var(--color-on-dark-line);
  transform-origin: left center;
  transition: background-color 0.4s ease, transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.u-focus__step h3 {
  margin: 0;
  font-size: var(--fs-card-title);
  font-weight: 800;
  line-height: var(--lh-card-title);
  letter-spacing: -0.02em;
  transition: color 0.4s ease;
}

.u-focus__step p {
  margin: 12px 0 0;
  max-width: 44ch;
  line-height: 1.65;
  color: var(--color-on-dark-soft);
}

.u-focus__inline {
  display: none;
}

/* Hervorhebung nur mit JS: inaktive Abschnitte bleiben gut lesbar */
.u-focus.is-enhanced .u-focus__step h3,
.u-focus.is-enhanced .u-focus__num {
  color: rgba(244, 244, 244, 0.58);
}

.u-focus.is-enhanced .u-focus__step.is-active h3 {
  color: var(--color-on-dark);
}

.u-focus.is-enhanced .u-focus__step.is-active .u-focus__num {
  color: var(--color-accent);
}

.u-focus.is-enhanced .u-focus__step.is-active .u-focus__line {
  background: var(--color-accent);
  transform: scaleX(2);
}

/* --- WHG: Themenfolge mit fixiertem Seitenindex (Idee D) -------------- */

.u-seq__grid {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 8fr);
  gap: var(--u-gap);
  align-items: start;
}

.u-seq__index {
  position: sticky;
  top: calc(var(--nav-height) + 40px);
}

.u-seq__index ol {
  margin: 0;
  padding: 0;
  list-style: none;
  border-left: 1px solid var(--color-line);
}

.u-seq__index a {
  display: flex;
  gap: 12px;
  margin-left: -1px;
  padding: 12px 0 12px 20px;
  border-left: 2px solid transparent;
  font-weight: 600;
  color: var(--color-ink-soft);
  transition: color 0.3s ease, border-color 0.3s ease;
}

.u-seq__index a span {
  font-family: var(--font-num);
  font-weight: 500;
  color: var(--color-accent);
}

.u-seq__index a:hover,
.u-seq__index a.is-active {
  color: var(--color-ink);
}

.u-seq__index a.is-active {
  border-left-color: var(--color-accent);
}

.u-seq__index a:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.u-seq__part {
  padding-block: clamp(44px, 5vw, 80px);
  border-top: 1px solid var(--color-line);
}

.u-seq__part:first-child {
  padding-top: 0;
  border-top: 0;
}

.u-seq__part:last-child {
  padding-bottom: 0;
}

.u-seq__part > h3 {
  margin: 0;
  font-size: var(--fs-card-title);
  font-weight: 800;
  line-height: var(--lh-card-title);
  letter-spacing: -0.02em;
}

.u-seq__part > p {
  margin: 16px 0 0;
  max-width: 62ch;
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  color: var(--color-ink-soft);
}

.u-seq__part > .u-ask__list {
  margin-top: 28px;
}

.u-seq__part > .u-glance__cols {
  margin-top: clamp(32px, 3vw, 44px);
}

/* Nachweis: Originalsiegel flach und ruhig, mit Beschreibung */
.u-proof {
  display: grid;
  grid-template-columns: minmax(140px, 200px) minmax(0, 1fr);
  gap: clamp(24px, 3vw, 48px);
  align-items: center;
  margin: 32px 0 0;
  padding: clamp(20px, 2.5vw, 32px);
  background: #fff;
  border: 1px solid var(--color-line);
}

.u-proof img {
  display: block;
  width: 100%;
  height: auto;
}

.u-proof figcaption p {
  overflow-wrap: break-word;   /* lange Wörter sprengen die Spalte nicht (WHG, 901–935 px) */
  margin: 0;
  line-height: 1.6;
  color: var(--color-ink-soft);
}

.u-proof figcaption p + p {
  margin-top: 10px;
}

.u-proof__title {
  font-weight: 700;
  color: var(--color-ink);
}

/* Zwei Nachweise nebeneinander (Straßenbau, seit 10.10.2026). Das Dokument
   hebt sich beim Darüberfahren leicht an wie ein Blatt auf dem Tisch. */
.u-proofs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 28px);
  margin-top: clamp(40px, 5vw, 72px);
}

.u-proofs > .u-glance__label {
  grid-column: 1 / -1;
}

.u-proofs .u-proof {
  grid-template-columns: minmax(96px, 140px) minmax(0, 1fr);
  margin: 0;
}

.u-proofs .u-proof img {
  box-shadow: 0 12px 28px -14px rgba(20, 20, 20, 0.45);
  transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.45s ease;
}

.u-proofs .u-proof:hover img {
  transform: translateY(-4px) rotate(-1.5deg);
  box-shadow: 0 20px 36px -16px rgba(20, 20, 20, 0.5);
}

/* Straßenbau (seit 13.10.2026): Dokumente größer; die Höhe gibt der Text ohnehin vor */
@media (min-width: 901px) {
  #qualifikation .u-proof:not(.u-proof--text) {
    grid-template-columns: minmax(120px, 180px) minmax(0, 1fr);
  }
}

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

@media (max-width: 480px) {
  .u-proofs .u-proof {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .u-proofs .u-proof img {
    transition: none;
  }

  .u-proofs .u-proof:hover img {
    transform: none;
  }
}

/* --- Hallen: gestaffeltes Bildpaar (Idee C) ---------------------------
   Übersicht groß, Detail kleiner davor. js/unterseiten.js verschiebt nur
   das Detail minimal gegen die Übersicht (Desktop, ±36 px). */

.u-pair {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: var(--u-gap);
  align-items: center;
}

.u-pair__media {
  position: relative;
  padding-bottom: 14%;
}

.u-pair__main,
.u-pair__detail {
  margin: 0;
  overflow: hidden;
  border-radius: 3px;
}

.u-pair__main {
  width: 78%;
  aspect-ratio: 1 / 1.05;
}

.u-pair__detail {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 46%;
  aspect-ratio: 1 / 1.05;
  box-shadow: 0 0 0 8px var(--color-dark), 0 30px 60px -24px rgba(0, 0, 0, 0.7);
}

.u-pair__main img,
.u-pair__detail img,
.u-duo__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.u-pair__caps {
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}

.u-pair__caps li {
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--color-on-dark-soft);
}

/* Bild und Text nebeneinander (Hoffläche, Aufbau) */
.u-duo {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: var(--u-gap);
  align-items: center;
  margin-top: clamp(72px, 9vw, 140px);
}

.u-duo__media {
  margin: 0;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  border-radius: 3px;
}

.u-duo p {
  max-width: 52ch;
  line-height: 1.65;
}

/* --- Wohnungsbau: Blick in den Aufbau --------------------------------- */

.u-build__main {
  margin: 0;
}

.u-build__img {
  overflow: hidden;
  aspect-ratio: 1800 / 646;
  border-radius: 3px;
}

.u-build__img img,
.u-build__sample img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.u-build__samples {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 48px);
  margin-top: clamp(28px, 3vw, 48px);
}

.u-build__sample {
  margin: 0;
}

.u-build__sample > div {
  overflow: hidden;
  aspect-ratio: 2.3 / 1;
  border-radius: 3px;
}

/* --- Hallen: Zusatzangebote ------------------------------------------ */

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

.u-extra__item {
  padding-top: 24px;
  border-top: 1px solid var(--color-ink);
}

.u-extra__item h3 {
  margin: 0;
  font-size: var(--fs-card-title);
  font-weight: 800;
  line-height: var(--lh-card-title);
  letter-spacing: -0.02em;
}

.u-extra__item p {
  margin: 14px 0 0;
  max-width: 48ch;
  line-height: 1.65;
  color: var(--color-ink-soft);
}

/* --- Responsive ------------------------------------------------------- */

@media (max-width: 1024px) {
  .u-glance__cols--three {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .u-glance__cols,
  .u-ask,
  .u-focus__grid,
  .u-seq__grid,
  .u-pair,
  .u-duo {
    grid-template-columns: minmax(0, 1fr);
  }

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

  /* Straßenbau: normaler Fluss, Bild direkt über dem jeweiligen Text */
  .u-focus__media {
    display: none;
  }

  .u-focus__inline {
    display: block;
    margin: 0 0 22px;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    border-radius: 3px;
  }

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

  .u-focus__step {
    min-height: 0;
    padding-block: 32px;
    border-top: 1px solid var(--color-on-dark-line);
  }

  .u-focus__step:first-child {
    padding-top: 0;
    border-top: 0;
  }

  .u-seq__index {
    display: none;
  }

  .u-pair__media {
    padding-bottom: 0;
  }

  .u-pair__main {
    width: 100%;
  }

  .u-pair__detail {
    position: relative;
    width: 62%;
    margin: -22% 0 0 auto;
  }

  .u-duo__media {
    aspect-ratio: 4 / 3;
  }

  .u-duo--reverse .u-duo__media {
    order: 0;
  }
}

@media (max-width: 700px) {
  .u-build__samples,
  .u-extra {
    grid-template-columns: minmax(0, 1fr);
  }
}

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

  .u-proof img {
    max-width: 150px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .u-focus__img,
  .u-focus__num,
  .u-focus__line,
  .u-focus__step h3,
  .u-seq__index a {
    transition: none;
  }

  .u-focus__img {
    transform: none;
  }
}

/* --------------------------------------------------------------------- */
/* Gussasphalt-Seite: „Unsere Leistungen im Überblick“ (seit 30.09.),      */
/* Leistungsseiten: „Weitere Leistungen“ ohne die eigene (seit 02.10.).    */
/* Heller Grund (wie die ausgesparte Welle des folgenden FAQ – dadurch ein */
/* nahtloser Übergang), Rot nur für Nummer, Pfeil und aktive Linie.        */
/* Vier Zeilen über die volle Breite, jede komplett ein Link.              */
/* Desktop mit Maus: Bild erscheint bei Hover/Fokus als Zeilenhintergrund  */
/* (0,5 s, Bild 100 → 103 %, Pfeil +6 px). Touch und Smartphone: Bild      */
/* steht kompakt über dem Block, ein Tipp öffnet direkt die Seite.         */
/* --------------------------------------------------------------------- */

.u-svc {
  padding-block: clamp(56px, 6vw, 96px) clamp(24px, 3vw, 48px);
  background: var(--color-hero-bg);
}

.u-svc__head {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: var(--u-gap);
  align-items: end;
  margin-bottom: clamp(32px, 4vw, 60px);
}

.u-svc__head .u-lead {
  margin-top: 0;
}

.u-svc__list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--color-line);
}

.u-svc__row {
  position: relative;
  isolation: isolate;
  display: block;
  overflow: hidden;
  border-bottom: 1px solid var(--color-line);
  color: var(--color-ink);
  transition: border-color 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.u-svc__media {
  position: absolute;
  inset: 0;
  z-index: -1;
  display: block;
  overflow: hidden;
  background: var(--color-dark);
  opacity: 0;
  transition: opacity 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.u-svc__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.55s cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* Ruhige, flache Abdunklung für weiße Schrift auf dem Bild */
.u-svc__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(20, 20, 20, 0.64);
}

.u-svc__inner {
  display: grid;
  grid-template-columns: clamp(3rem, 5vw, 5rem) minmax(0, 7fr) minmax(0, 4fr) clamp(44px, 4.4vw, 68px);
  gap: 0 clamp(20px, 2.4vw, 40px);
  align-items: center;
  padding-block: clamp(26px, 2.8vw, 46px);
}

.u-svc__num {
  font-family: var(--font-num);
  font-size: clamp(1.3rem, 1.8vw, 1.9rem);
  font-weight: 500;
  line-height: 1;
  color: var(--color-accent);
  transition: color 0.4s ease;
}

.u-svc__title {
  margin: 0;
  font-size: clamp(2rem, 0.8rem + 3vw, 4.25rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: var(--color-ink);
  transition: color 0.4s ease;
}

.u-svc__text {
  /* mindestens zwei Zeilen: alle vier Zeilen gleich hoch */
  min-height: calc(2 * 1.55em);
  display: flex;
  align-items: center;
  max-width: 42ch;
  font-size: 1.02rem;
  line-height: 1.55;
  color: var(--color-ink-soft);
  transition: color 0.4s ease;
}

.u-svc__arrow {
  justify-self: end;
  width: 100%;
  height: auto;
  color: var(--color-accent);
  transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1), color 0.4s ease;
}

.u-svc__row:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: -2px;
}

/* Desktop mit Maus: Bild als Zeilenhintergrund bei Hover und Tastaturfokus */
@media (hover: hover) and (min-width: 901px) {
  .u-svc__row:hover,
  .u-svc__row:focus-visible {
    border-bottom-color: var(--color-accent);
  }

  .u-svc__row:hover .u-svc__media,
  .u-svc__row:focus-visible .u-svc__media {
    opacity: 1;
  }

  .u-svc__row:hover .u-svc__media img,
  .u-svc__row:focus-visible .u-svc__media img {
    transform: scale(1.03);
  }

  .u-svc__row:hover .u-svc__title,
  .u-svc__row:focus-visible .u-svc__title,
  .u-svc__row:hover .u-svc__arrow,
  .u-svc__row:focus-visible .u-svc__arrow {
    color: #fff;
  }

  .u-svc__row:hover .u-svc__num,
  .u-svc__row:focus-visible .u-svc__num,
  .u-svc__row:hover .u-svc__text,
  .u-svc__row:focus-visible .u-svc__text {
    color: rgba(255, 255, 255, 0.88);
  }

  .u-svc__row:hover .u-svc__arrow,
  .u-svc__row:focus-visible .u-svc__arrow {
    transform: translateX(6px);
  }

  /* Fokus auf dem Bild: weißer Rahmen innen, gut sichtbar */
  .u-svc__row:focus-visible {
    outline-color: #fff;
    outline-offset: -8px;
  }
}

/* Touch-Geräte und schmale Fenster: Bild kompakt über dem Text, keine
   Hover-Voraussetzung; Nummer, Titel und Pfeil in der ersten Zeile. */
@media (hover: none), (max-width: 900px) {
  .u-svc__row {
    padding-block: clamp(20px, 3vw, 32px);
  }

  .u-svc__media {
    position: relative;
    inset: auto;
    z-index: 0;
    margin: 0 var(--container-pad) 18px;
    aspect-ratio: 5 / 1;
    border-radius: 3px;
    opacity: 1;
  }

  .u-svc__media::after {
    content: none;
  }

  .u-svc__inner {
    grid-template-columns: 2.4rem minmax(0, 1fr) 44px;
    grid-template-areas:
      "num title arrow"
      ". text text";
    gap: 8px 14px;
    padding-block: 0;
  }

  .u-svc__num {
    grid-area: num;
  }

  .u-svc__title {
    grid-area: title;
    font-size: clamp(1.7rem, 1.1rem + 3vw, 2.6rem);
  }

  .u-svc__text {
    grid-area: text;
    min-height: 0;
  }

  .u-svc__arrow {
    grid-area: arrow;
  }
}

/* Schmalere Desktopfenster: Kurztexte brechen dreizeilig um */
@media (min-width: 901px) and (max-width: 1200px) and (hover: hover) {
  .u-svc__text {
    min-height: calc(3 * 1.55em);
  }
}

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

@media (max-width: 600px) {
  .u-svc__media {
    aspect-ratio: 16 / 7;
  }
}

@media (prefers-reduced-motion: reduce) {
  .u-svc__row,
  .u-svc__media,
  .u-svc__media img,
  .u-svc__num,
  .u-svc__title,
  .u-svc__text,
  .u-svc__arrow {
    transition: none;
  }

  .u-svc__row:hover .u-svc__media img,
  .u-svc__row:focus-visible .u-svc__media img,
  .u-svc__row:hover .u-svc__arrow,
  .u-svc__row:focus-visible .u-svc__arrow {
    transform: none;
  }
}

/* --------------------------------------------------------------------- */
/* Gussasphalt-Seite: Kennzahlen unter dem Hero (seit 30.09.)             */
/* 130+ Jahre · 4,7/5 Google (Link) · 2–4 Std. · 100 %. Alle vier Werte    */
/* gleich groß auf einer Grundlinie; nur die Google-Bewertung ist ein      */
/* Link (ganze Fläche). Daten zentral in werkzeuge/pilot_bauen.py: GOOGLE,  */
/* STATS_GUSSASPHALT. Gilt nur mit .u-stats--fakten.                        */
/* --------------------------------------------------------------------- */

.u-stats--fakten .u-stat__value {
  font-size: clamp(2.6rem, 4.6vw, 4.6rem);
}

.u-stats--fakten .u-stat__link {
  display: block;
  height: 100%;
  color: inherit;
  border-radius: 4px;
}

.u-stats--fakten .u-stat__link .u-stat__value {
  transition: color 0.25s ease, transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.u-stats--fakten .u-stat__link .u-stat__label {
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
  transition: text-decoration-color 0.25s ease;
}

.u-stat__meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 10px;
}

/* Sterne nur als Zierde (aria-hidden); die Bewertung steht als Text daneben
   und vollständig in der Linkbezeichnung. Füllung = Bewertung / 5. */
.u-stat__stars {
  position: relative;
  display: inline-block;
  font-size: 0.95rem;
  line-height: 1;
  letter-spacing: 2px;
  color: #d4d4d4;
}

.u-stat__stars-fill {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  white-space: nowrap;
  color: var(--color-accent);
}

.u-stat__ext {
  width: 16px;
  height: 16px;
  color: var(--color-accent);
  transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.u-stats--fakten .u-stat__link:hover .u-stat__value,
.u-stats--fakten .u-stat__link:focus-visible .u-stat__value {
  color: var(--color-accent-hover);
  transform: translateY(-3px);
}

.u-stats--fakten .u-stat__link:hover .u-stat__label,
.u-stats--fakten .u-stat__link:focus-visible .u-stat__label {
  text-decoration-color: currentColor;
}

.u-stats--fakten .u-stat__link:hover .u-stat__ext,
.u-stats--fakten .u-stat__link:focus-visible .u-stat__ext {
  transform: translate(2px, -2px);
}

.u-stats--fakten .u-stat__link:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 8px;
}

/* Tablet und Smartphone: zwei Spalten mit feinen Linien in beide Richtungen */
@media (max-width: 1024px) {
  .u-stats--fakten {
    row-gap: 0;
  }

  .u-stats--fakten .u-stat {
    padding-block: 20px;
  }

  .u-stats--fakten .u-stat:nth-child(n + 3) {
    border-top: 1px solid var(--color-line);
  }
}

@media (max-width: 560px) {
  .u-stats--fakten .u-stat__value {
    font-size: clamp(2rem, 9.2vw, 2.6rem);
  }

  .u-stats--fakten .u-stat__label {
    font-size: 0.85rem;
    letter-spacing: 0.02em;
  }
}

/* Sehr schmale Displays: eine Spalte */
@media (max-width: 359px) {
  .u-stats--fakten {
    grid-template-columns: minmax(0, 1fr);
  }

  .u-stats--fakten .u-stat + .u-stat {
    border-left: 0;
    border-top: 1px solid var(--color-line);
  }
}

@media (prefers-reduced-motion: reduce) {
  .u-stats--fakten .u-stat__link .u-stat__value,
  .u-stat__ext {
    transition: none;
  }

  .u-stats--fakten .u-stat__link:hover .u-stat__value,
  .u-stats--fakten .u-stat__link:focus-visible .u-stat__value,
  .u-stats--fakten .u-stat__link:hover .u-stat__ext,
  .u-stats--fakten .u-stat__link:focus-visible .u-stat__ext {
    transform: none;
  }
}

/* Gemeinsame Kennzahlenleiste: Zahl mit fester Breite, damit Vorzeichen,
   Einheit, „+“ und „%“ beim Hochzählen nicht springen (seit 30.09.) */
.u-stats--fakten .u-stat__num {
  display: inline-block;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* --------------------------------------------------------------------- */
/* Über uns + Karriere (seit 01.10.2026, werkzeuge/pilot/ueber-uns.html)  */
/* Steht am Ende, weil die Stellenzeilen auf dem Überblick (.u-svc)        */
/* aufbauen und dessen Regeln gezielt überschreiben.                      */
/* --------------------------------------------------------------------- */

/* Ein Blick in unsere Arbeit: Film (4:3, links) und zwei Fotos (rechts).
   Der Film von 2017 hat nur 640 × 480 px, deshalb nicht breiter als die Spalte. */
.u-work {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(14px, 1.6vw, 24px);
  margin-top: clamp(32px, 4vw, 56px);
}

/* grid-area: Der Film-Baustein der Startseite (.about-preview__figure) sitzt
   dort im Bereich „figure“; hier gibt es den Bereich nicht. */
.u-film {
  grid-area: auto;
  margin-top: 0;
  aspect-ratio: 4 / 3;
  border-radius: 3px;
}

.u-work__photos {
  display: grid;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 24px);
  min-height: 0;
}

/* Fotos ohne Eigenhöhe: Die Spalte richtet sich nach dem Film (4:3) */
.u-work__photo {
  position: relative;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  border-radius: 3px;
}

.u-work__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Drei Fotos (seit 10.10.2026): oben das Firmengebäude über die volle
   Breite, darunter zwei Fotos vom Einbau (wie der Satz darüber: vom
   Firmenschild bis zum Einbau von Hand) */
.u-work__photos--drei {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.u-work__photo--breit {
  grid-column: 1 / -1;
}

/* Stellenzeilen: Mischung aus den Leistungszeilen (Leistungsseite: große
   Nummer, Linie, Kicker) und dem Überblick (Gussasphalt-Seite, .u-svc: ganze
   Zeile als Link, Foto beim Darüberfahren als Hintergrund). Merkmale als
   kleine Etiketten. Ein Klick springt zur Kurzbewerbung und wählt die Stelle
   aus (js/unterseiten.js, „Kurzbewerbung“). */
.u-jobs {
  margin-top: clamp(8px, 1vw, 16px);
}

.u-jobs__inner {
  grid-template-columns: clamp(64px, 7vw, 110px) minmax(0, 6fr) minmax(0, 4fr) clamp(44px, 4.4vw, 68px);
}

.u-jobs__num {
  align-self: start;
  font-family: var(--font-num);
  font-size: clamp(3.2rem, 5.4vw, 5rem);
  font-weight: 300;
  line-height: 0.85;
  color: var(--color-accent);
  transition: color 0.4s ease;
}

.u-jobs__main {
  display: block;
}

.u-jobs__main .u-rule {
  transition: width 0.45s cubic-bezier(0.2, 0.7, 0.2, 1), background-color 0.4s ease;
}

.u-jobs__main .u-kicker {
  display: block;
  transition: color 0.4s ease;
}

.u-jobs__title {
  font-size: clamp(1.9rem, 0.9rem + 2.6vw, 3.6rem);
}

/* Zusatzinfos als schlichte Stichpunkte mit kurzem roten Strich, nicht als
   Knöpfe (Notiz 22, 11.10.2026: André findet Knopf-Etiketten in solchen
   Zwischenfeldern „KI-artig“). Gilt auch für .u-fold__tags und .u-help. */
.u-jobs__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  margin-top: 14px;
}

.u-jobs__tags span {
  position: relative;
  font-size: 0.86rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--color-ink-soft);
  transition: color 0.4s ease;
}

/* Stichworte der Leistungsseiten (.u-fold__tags) behalten ihren roten Strich;
   auf der Karriereseite gibt es seit 12.10.2026 keine Stichworte mehr */
.u-fold__tags span {
  padding-left: 15px;
}

.u-fold__tags span::before,
.u-help span:not(.u-kicker)::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.66em;
  width: 7px;
  height: 2px;
  background: var(--color-accent);
}

@media (hover: hover) and (min-width: 901px) {
  .u-jobs__row:hover .u-jobs__num,
  .u-jobs__row:focus-visible .u-jobs__num,
  .u-jobs__row:hover .u-kicker,
  .u-jobs__row:focus-visible .u-kicker,
  .u-jobs__row:hover .u-jobs__tags span,
  .u-jobs__row:focus-visible .u-jobs__tags span {
    color: #fff;
  }

  .u-jobs__row:hover .u-rule,
  .u-jobs__row:focus-visible .u-rule {
    width: 120px;
    background-color: #fff;
  }
}

/* Touch und schmale Fenster: Foto als Streifen über dem Text (wie .u-svc),
   Nummer, Titelblock und Pfeil in der ersten Zeile. */
@media (hover: none), (max-width: 900px) {
  .u-jobs__inner {
    grid-template-columns: 3.2rem minmax(0, 1fr) 44px;
    grid-template-areas:
      "num main arrow"
      ". text text";
  }

  .u-jobs__num {
    grid-area: num;
    font-size: 2.6rem;
  }

  .u-jobs__main {
    grid-area: main;
  }

  .u-jobs__title {
    font-size: clamp(1.7rem, 1.1rem + 3vw, 2.6rem);
  }
}

.u-jobs__extra {
  margin-top: clamp(48px, 6vw, 88px);
}

/* „Was wir bieten“ (seit 12.10.2026 ruhiger): nur die Linie unter der
   Überschrift (.u-glance__label) bleibt; keine Linien zwischen oder unter
   den Vorteilen, gegliedert nur durch Abstand */
.u-jobs__benefits {
  margin-top: 0;
  padding-block: clamp(36px, 4vw, 56px) 0;
  border-block: 0;
  row-gap: clamp(36px, 5vw, 48px);
}

.u-jobs__benefits .u-stat,
.u-jobs__benefits .u-stat + .u-stat {
  border: 0;
}

.u-jobs__benefits .u-stat__label {
  margin-top: 14px;
}

/* Kurzbewerbung: Formular-Bausteine des Anfrage-Fensters (styles.css,
   .inquiry__…) als Karte im Seitenfluss, flacher Schatten statt Fenster. */
.u-apply .inquiry__panel {
  width: 100%;
  margin: 0;
  box-shadow: 0 24px 60px -40px rgba(0, 0, 0, 0.45);
}

.u-apply .inquiry__form {
  padding-top: clamp(24px, 3vw, 36px);
}

.u-apply__call {
  margin: 28px 0 0;
  font-weight: 600;
  line-height: 1.6;
}

.u-apply__call a {
  color: var(--color-accent);
}

/* Standortkarte unter „In zwei Minuten beworben“ (seit 12.10.2026): dieselbe
   Zwei-Klick-Karte wie im Abschluss (styles.css .final-cta__map, js/main.js),
   so breit wie die Textspalte mit der Überschrift, auf hellem Grund */
.u-apply__map {
  margin-top: clamp(28px, 3.5vw, 44px);
}

.u-apply__karte .final-cta__map-frame {
  aspect-ratio: 16 / 10;
  height: auto;
  border: 0;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 24px 60px -40px rgba(0, 0, 0, 0.45);
}

.u-apply__karte .final-cta__map-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.u-apply__karte .final-cta__map-note {
  padding: 12px 2px 0;
  color: var(--color-ink-soft);
}

.u-apply__karte .final-cta__map-note a {
  color: var(--color-ink);
}

/* Unterlagen anhängen (seit 12.10.2026): drei freiwillige Dateifelder.
   Das echte <input type="file"> bleibt bedienbar (Tastatur, Screenreader);
   js/unterseiten.js zeigt Name und Größe der Datei und „Entfernen“. */
.u-upload {
  margin: 22px 0 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.u-upload legend {
  display: block;
  padding: 0;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--color-ink);
}

.u-upload__hint {
  margin: 4px 0 12px;
  font-size: 0.84rem;
  line-height: 1.5;
  color: var(--color-ink-soft);
}

.u-upload__list {
  display: grid;
  gap: 10px;
}

.u-upload__item {
  padding: 12px 14px;
  border: 1px solid rgba(20, 20, 20, 0.14);
  border-radius: 10px;
  background: #fff;
}

.u-upload__item.has-file {
  border-color: rgba(20, 20, 20, 0.3);
}

.u-upload__label {
  display: block;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--color-ink);
}

.u-upload__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin-top: 8px;
  min-width: 0;
}

/* Eigener Knopf „Datei wählen“ / „Ersetzen“ (der Browser-Knopf wäre je
   nach Sprache des Browsers englisch). Das echte Feld liegt unsichtbar
   darüber: Klick, Tastatur und Screenreader bleiben die des Browsers. */
.u-upload__pick {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
}

.u-upload__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.u-upload__pick-text {
  padding: 8px 16px;
  border: 1px solid rgba(20, 20, 20, 0.22);
  border-radius: 999px;
  background: var(--color-hero-bg);
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--color-ink);
  white-space: nowrap;
  transition: border-color 0.2s ease;
}

.u-upload__pick:hover .u-upload__pick-text {
  border-color: var(--color-ink);
}

.u-upload__input:focus-visible + .u-upload__pick-text {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

.u-upload__input[aria-invalid="true"] + .u-upload__pick-text {
  border-color: #b3261e;
}

.u-upload__empty {
  font-size: 0.86rem;
  color: var(--color-ink-soft);
}

.u-upload__file {
  flex: 1 1 12em;
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--color-ink);
}

.u-upload__file small {
  font-weight: 400;
  color: var(--color-ink-soft);
}

.u-upload__remove {
  padding: 6px 2px;
  border: 0;
  background: none;
  font: inherit;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.u-upload__remove:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.u-upload__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

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

  .u-work__photos {
    grid-template-rows: none;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .u-work__photo {
    aspect-ratio: 4 / 3;
  }

  .u-work__photo--breit {
    aspect-ratio: 21 / 10;
  }
}

@media (prefers-reduced-motion: reduce) {
  .u-jobs__num,
  .u-jobs__main .u-rule,
  .u-jobs__main .u-kicker,
  .u-jobs__tags span {
    transition: none;
  }
}

/* ===================================================================== */
/* Hallen, Höfe & mehr (seit 02.10.2026, Variante 2 „Zeilen“ aus dem     */
/* Vergleich; alle Entwürfe im Archiv „Zwischenstand vor Übernahme        */
/* Hallen-Variante 2“). Interaktion in js/unterseiten.js; ohne JS und bei */
/* reduzierter Bewegung steht immer der fertige Zustand.                  */
/* ===================================================================== */

/* --- Asphalt mit großem Wort: für Angebote ohne Foto (Abbruch) -------
   Fläche wie Band 01–04: im HTML zusätzlich die Klasse .asphalt (derzeit
   auf keiner Seite verwendet). */
.u-word {
  position: relative;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  padding: clamp(20px, 2.6vw, 40px);
  background-color: var(--asphalt-grund);
  color: var(--asphalt-text);
}

.u-word__text {
  position: relative;
  font-size: clamp(2rem, 1rem + 3.4vw, 4.25rem);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.025em;
}

/* --- Auswahlknöpfe (Schritt für Schritt) ---------------------------- */
.u-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  clear: both;
}

.u-chip {
  position: relative;
  display: inline-flex;
  cursor: pointer;
}

.u-chip input {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}

.u-chip span {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 8px 16px;
  border: 1px solid rgba(20, 20, 20, 0.22);
  border-radius: 999px;
  background: var(--color-hero-bg);
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--color-ink);
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.u-chip input:checked + span {
  border-color: var(--color-ink);
  background: var(--color-ink);
  color: #fff;
}

.u-chip input:checked + span::before {
  content: "";
  width: 7px;
  height: 7px;
  margin-right: 9px;
  border-radius: 50%;
  background: var(--color-accent);
}

.u-chip input:focus-visible + span {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

@media (hover: hover) {
  .u-chip:hover input:not(:checked) + span {
    border-color: var(--color-ink);
  }
}

.u-chips--large .u-chip span {
  min-height: 48px;
  padding: 10px 20px;
  font-size: 1rem;
}

/* --- Überblick als Zeilen (.u-arearows) -----------------------------
   Stellenzeilen von Über uns (.u-svc + .u-jobs). Flächen ohne Foto zeigen
   beim Darüberfahren die Asphalt-Textur, auf Touch und Smartphone einen
   Asphalt-Streifen mit großem Wort. */
.u-section--rows {
  padding-bottom: clamp(48px, 6vw, 88px);
}

/* Fläche wie Band 01–04: im HTML zusätzlich .asphalt (derzeit ungenutzt) */
.u-svc__media--asphalt {
  background-color: var(--asphalt-grund);
}

.u-svc__word {
  display: none;
}

@media (hover: none), (max-width: 900px) {
  .u-svc__media--asphalt {
    display: flex;
    align-items: flex-end;
    padding: 14px 18px;
  }

  .u-svc__word {
    position: relative;
    display: block;
    font-size: clamp(1.3rem, 4.6vw, 2.2rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--color-on-dark);
  }
}

.u-arearows__more {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 20px;
  margin: clamp(28px, 3vw, 44px) 0 0;
  font-weight: 600;
}

.u-arearows__more .u-kicker {
  margin: 0;
}

.u-arearows__more .u-link {
  margin-top: 0;
}

/* --- Zusatzangebote mit Umschalter (.u-switcher) --------------------
   Zwei Reiter wie ein Schalter; Bild und Text blenden über. Ohne JS stehen
   beide Angebote untereinander. */
.u-switcher__tabs {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: clamp(20px, 2.4vw, 32px);
  padding: 6px;
  border: 1px solid var(--color-line);
  border-radius: 30px;
  background: var(--color-page-bg);
}

.u-switcher__tab {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 10px 22px;
  border: 0;
  border-radius: 999px;
  background: none;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  text-align: left;
  color: var(--color-ink-soft);
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.u-switcher__tabnum {
  font-family: var(--font-num);
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--color-accent);
}

.u-switcher__tab[aria-selected="true"] {
  background: var(--color-ink);
  color: #fff;
}

.u-switcher__tab:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

@media (hover: hover) {
  .u-switcher__tab:hover {
    color: var(--color-ink);
  }

  .u-switcher__tab[aria-selected="true"]:hover {
    color: #fff;
  }
}

.u-switcher__panels {
  display: grid;
  gap: clamp(32px, 4vw, 56px);
}

.u-switcher.is-enhanced .u-switcher__panels {
  gap: 0;
}

.u-switcher.is-enhanced .u-switcher__panel {
  grid-area: 1 / 1;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.45s ease, visibility 0s linear 0.45s;
}

.u-switcher.is-enhanced .u-switcher__panel.is-active {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.45s ease, visibility 0s;
}

.u-switcher__panel {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  overflow: hidden;
  border: 1px solid var(--color-line);
  border-radius: 4px;
  background: #fff;
}

.u-switcher__media {
  position: relative;
  min-height: clamp(320px, 34vw, 520px);
  margin: 0;
  overflow: hidden;
  background-color: var(--color-dark);
}

.u-switcher__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.05);
  transition: transform 1.2s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.u-switcher.is-enhanced .u-switcher__panel.is-active .u-switcher__media img,
.u-switcher:not(.is-enhanced) .u-switcher__media img {
  transform: none;
}

.u-switcher__big {
  position: absolute;
  top: clamp(16px, 2vw, 28px);
  right: clamp(18px, 2.4vw, 32px);
  font-family: var(--font-num);
  font-size: clamp(3.4rem, 6vw, 6rem);
  font-weight: 300;
  line-height: 0.85;
  color: #fff;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35);
}

.u-switcher__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(28px, 3.4vw, 56px);
}

.u-switcher__title {
  margin: 0;
  font-size: clamp(1.7rem, 1rem + 1.8vw, 2.6rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.u-switcher__text {
  margin: 14px 0 0;
  max-width: 44ch;
  line-height: 1.65;
  color: var(--color-ink-soft);
}

.u-switcher__label {
  margin: 26px 0 10px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-ink-faint);
}

.u-switcher__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.u-switcher__list li {
  padding: 5px 12px;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-ink-soft);
}

.u-switcher__body .btn {
  margin-top: 28px;
}

/* --- Schritt für Schritt (.u-stepper) -------------------------------
   Eine Frage nach der anderen mit Fortschrittsbalken; eine Antwort führt
   zur nächsten Frage, am Ende stehen alle Angaben und der Knopf zur
   Anfrage. Ohne JS stehen alle Fragen untereinander. */
.u-stepper {
  position: relative;
  padding: clamp(24px, 3vw, 44px);
  border: 1px solid var(--color-line);
  border-radius: 4px;
  background: var(--color-hero-bg);
}

.u-stepper__top {
  display: grid;
  gap: 10px;
  margin-bottom: 26px;
}

.u-stepper__count {
  margin: 0;
  font-size: 0.9rem;
  color: var(--color-ink-soft);
}

.u-stepper__count b {
  font-family: var(--font-num);
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--color-accent);
}

.u-stepper__form {
  margin: 0;
}

.u-stepper__step {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.u-stepper__step + .u-stepper__step {
  margin-top: 30px;
  padding-top: 26px;
  border-top: 1px solid var(--color-line);
}

.u-stepper.is-enhanced .u-stepper__step + .u-stepper__step {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.u-stepper.is-enhanced .u-stepper__step:not(.is-current) {
  display: none;
}

.u-stepper.is-enhanced .u-stepper__step.is-current,
.u-stepper.is-enhanced .u-stepper__summary:not([hidden]) {
  animation: u-step-in 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.u-stepper.is-back .u-stepper__step.is-current {
  animation-name: u-step-back;
}

@keyframes u-step-in {
  from { opacity: 0; transform: translateX(22px); }
  to { opacity: 1; transform: none; }
}

@keyframes u-step-back {
  from { opacity: 0; transform: translateX(-22px); }
  to { opacity: 1; transform: none; }
}

.u-stepper__legend {
  float: left;
  width: 100%;
  margin: 0 0 18px;
  padding: 0;
  font-size: clamp(1.3rem, 1rem + 1vw, 1.75rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.015em;
}

.u-stepper__num {
  display: block;
  margin-bottom: 8px;
  font-family: var(--font-num);
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--color-accent);
}

.u-stepper__step:focus,
.u-stepper__summary {
  outline: none;
}

.u-stepper__list {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px 22px;
  clear: both;
  margin: 0;
}

.u-stepper__list dt {
  font-size: 0.88rem;
  color: var(--color-ink-faint);
}

.u-stepper__list dd {
  margin: 0;
  font-weight: 700;
}

.u-stepper__summary .btn {
  margin-top: 26px;
}

.u-stepper__restart {
  display: block;
  margin-top: 18px;
}

.u-stepper__nav {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid var(--color-line);
}

.u-stepper__back[disabled] {
  visibility: hidden;
}

.u-stepper__field {
  display: block;
  clear: both;
  margin-bottom: 14px;
}

.u-stepper__field input {
  width: 100%;
  max-width: 420px;
  min-height: 52px;
  padding: 10px 18px;
  border: 1px solid rgba(20, 20, 20, 0.22);
  border-radius: 999px;
  background: var(--color-hero-bg);
  font: inherit;
  font-size: 1rem;
  color: var(--color-ink);
}

.u-stepper__field input:focus-visible {
  border-color: var(--color-ink);
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.u-stepper__bar {
  position: relative;
  display: block;
  height: 3px;
  overflow: hidden;
  border-radius: 3px;
  background: var(--color-line);
}

.u-stepper__fill {
  position: absolute;
  inset: 0;
  background: var(--color-accent);
  transform: scaleX(var(--p, 0));
  transform-origin: left center;
  transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.u-stepper__back,
.u-stepper__next,
.u-stepper__restart {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-ink-soft);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.u-stepper__back:focus-visible,
.u-stepper__next:focus-visible,
.u-stepper__restart:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

/* --- Hallen: Tablet und Smartphone ------------------------------------ */
@media (max-width: 900px) {
  .u-switcher__panel {
    grid-template-columns: minmax(0, 1fr);
  }

  .u-switcher__media {
    min-height: 0;
    aspect-ratio: 16 / 10;
  }

  .u-switcher__tabs {
    display: flex;
    border-radius: 24px;
  }

  .u-switcher__tab {
    flex: 1 1 auto;
    justify-content: center;
    padding: 10px 16px;
    font-size: 0.9rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .u-chip span,
  .u-stepper__fill,
  .u-switcher__tab,
  .u-switcher.is-enhanced .u-switcher__panel,
  .u-switcher.is-enhanced .u-switcher__panel.is-active,
  .u-switcher__media img {
    transition: none;
  }

  .u-switcher__media img {
    transform: none;
  }

  .u-stepper.is-enhanced .u-stepper__step.is-current,
  .u-stepper.is-enhanced .u-stepper__summary:not([hidden]) {
    animation: none;
  }
}

/* ===================================================================== */
/* Über uns, Team „Direkter Draht“ (seit 04.10.2026; Variante 3 aus dem   */
/* Vergleich vom 03.10., nach Domenics Idee erweitert; alle Entwürfe im   */
/* Archiv „Zwischenstand vor Übernahme Team-Variante 3“). Links die       */
/* Ansprechpartner mit rundem Porträt und Aufgabe, rechts ein dunkles     */
/* Fenster mit der freigestellten Person, Name und Nummer. Die gewählte   */
/* Person wird schwarz hinterlegt, das Foto rechts blendet über, die      */
/* Nummer rollt Ziffer für Ziffer ein (.is-rolling, js/unterseiten.js).   */
/* Ohne JS: Telefon-Links, Fenster mit Person 1. Bilder: KI-Platzhalter,  */
/* bis echte Fotos kommen (werkzeuge/team_bilder.py).                     */
/* ===================================================================== */

.u-line {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--u-gap);
  align-items: stretch;
}

.u-line__people {
  display: grid;
  align-content: center;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.u-line__person {
  position: relative;
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  padding: 12px 22px 12px 12px;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  background: var(--color-hero-bg);
  color: var(--color-ink);
  transition: background-color 0.35s ease, border-color 0.35s ease, color 0.35s ease, box-shadow 0.35s ease, transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.u-line__avatar {
  position: relative;
  width: 76px;
  height: 76px;
  overflow: hidden;
  border-radius: 50%;
  background: #e2e2e2;
}

.u-line__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1);
  transition: filter 0.4s ease;
}

.u-line__avatar::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: inset 0 0 0 0 var(--color-accent);
  transition: box-shadow 0.35s ease;
}

.u-line__who {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.u-line__pname {
  font-size: 1.08rem;
  font-weight: 800;
  line-height: 1.2;
}

.u-line__role {
  font-size: 0.85rem;
  line-height: 1.35;
  color: var(--color-ink-soft);
  transition: color 0.35s ease;
}

.u-line__person.is-active {
  border-color: var(--color-ink);
  background: var(--color-ink);
  color: #fff;
  box-shadow: 0 14px 30px rgba(20, 20, 20, 0.18);
  transform: translateX(8px);
}

.u-line__person.is-active .u-line__role {
  color: rgba(255, 255, 255, 0.72);
}

.u-line__person.is-active .u-line__avatar img {
  filter: none;
}

.u-line__person.is-active .u-line__avatar::after {
  box-shadow: inset 0 0 0 3px var(--color-accent);
}

.u-line__person:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

@media (hover: hover) {
  .u-line__person:hover {
    border-color: var(--color-ink);
  }

  .u-line__person:hover .u-line__avatar img {
    filter: none;
  }
}

/* Fenster: Text links, freigestellte Person rechts unten bündig */
.u-line__display {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  min-height: clamp(460px, 40vw, 620px);
  padding: clamp(28px, 3.4vw, 52px);
  overflow: hidden;
  border-radius: 6px;
  background:
    radial-gradient(ellipse 55% 65% at 76% 62%, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0) 72%),
    linear-gradient(160deg, #262626 0%, #131313 72%);
  color: #fff;
}

/* Röfe-Lkw mit Firmennummer als feine Textur */
.u-line__bg {
  position: absolute;
  inset: 0;
  z-index: -3;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 100%;
  filter: grayscale(1);
  opacity: 0.16;
}

/* Unten und links abdunkeln: Text bleibt lesbar, die Person läuft unten ins Dunkel aus */
.u-line__display::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to top, rgba(13, 13, 13, 0.9) 0%, rgba(13, 13, 13, 0) 34%),
    linear-gradient(90deg, rgba(13, 13, 13, 0.55) 0%, rgba(13, 13, 13, 0) 52%);
  pointer-events: none;
}

.u-line__stage {
  position: absolute;
  z-index: -2;
  top: clamp(18px, 2.4vw, 36px);
  right: clamp(8px, 2vw, 32px);
  bottom: 0;
  width: 50%;
  pointer-events: none;
}

.u-line__figure {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: 50% 100%;
  opacity: 0;
  transform: translateY(16px) scale(0.985);
  transform-origin: 50% 100%;
  transition: opacity 0.5s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.u-line__figure.is-active {
  opacity: 1;
  transform: none;
}

/* Freigestellt: ohne den hellen Ladehintergrund für Bilder (styles.css, img[loading='lazy']) */
.u-line__stage .u-line__figure {
  background: none;
}

.u-line__screen,
.u-line__call,
.u-line__meta {
  max-width: 50%;
}

.u-line__screen {
  width: 100%;
}

.u-line__kicker {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}

.u-line__name {
  margin: 8px 0 0;
  font-size: clamp(1.6rem, 1rem + 1.5vw, 2.5rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.u-line__task {
  margin: 8px 0 0;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.74);
}

.u-line__number {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 14px;
  margin: 18px 0 0;
}

.u-line__label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}

.u-line__digits {
  display: inline-flex;
  font-family: var(--font-num);
  font-size: clamp(2.2rem, 1rem + 2.2vw, 3.6rem);
  font-weight: 300;
  line-height: 0.95;
  color: #fff;
  white-space: nowrap;
}

.u-line__digits:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 6px;
}

.u-line__d {
  display: inline-block;
  white-space: pre;
}

.u-line.is-rolling .u-line__d {
  animation: u-digit-in 0.55s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  animation-delay: calc(var(--i) * 30ms);
}

@keyframes u-digit-in {
  from { opacity: 0; transform: translateY(60%); }
  to { opacity: 1; transform: none; }
}

.u-line__call {
  margin-top: 24px;
}

.u-line__meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 20px 0 0;
  font-size: 0.86rem;
  color: rgba(255, 255, 255, 0.74);
}

.u-line__meta a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Tablet und Smartphone: Auswahl über dem Fenster, Person oben im Fenster */
@media (max-width: 900px) {
  .u-line {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }

  .u-line__people {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .u-line__person {
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 10px;
    padding: 8px 12px 8px 8px;
  }

  .u-line__person.is-active {
    transform: none;
  }

  .u-line__avatar {
    width: 46px;
    height: 46px;
  }

  .u-line__pname {
    font-size: 0.88rem;
  }

  .u-line__role {
    display: none;
  }

  .u-line__display {
    min-height: 0;
    padding: 0 22px 28px;
    background:
      radial-gradient(ellipse 70% 50% at 50% 34%, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0) 72%),
      linear-gradient(170deg, #262626 0%, #131313 72%);
  }

  .u-line__display::before {
    background: linear-gradient(to top, rgba(13, 13, 13, 0.92) 0%, rgba(13, 13, 13, 0.6) 45%, rgba(13, 13, 13, 0) 62%);
  }

  .u-line__stage {
    position: relative;
    top: auto;
    right: auto;
    width: calc(100% + 44px);
    height: clamp(300px, 70vw, 420px);
    margin: 0 -22px -28px;
  }

  .u-line__screen,
  .u-line__call,
  .u-line__meta {
    max-width: none;
  }
}

@media (max-width: 480px) {
  .u-line__digits {
    font-size: 2.15rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .u-line__person,
  .u-line__avatar img,
  .u-line__avatar::after,
  .u-line__role,
  .u-line__figure {
    transition: none;
  }

  .u-line__person.is-active,
  .u-line__figure {
    transform: none;
  }

  .u-line.is-rolling .u-line__d {
    animation: none;
  }
}

/* ===================================================================== */
/* Referenzen, „Unsere Auftraggeber“ (seit 04.10.2026): „Namen im Fokus“ */
/* (.u-spot, Variante 3 aus dem Vergleich). Dazu die Vorschau „Projekte   */
/* nach Bereich“ (.u-ledger, nur referenzen-2.html) zum Besprechen mit    */
/* André; nach dem Gespräch übernehmen oder entfernen. Bewegung in        */
/* js/unterseiten.js; ohne JS und bei reduzierter Bewegung steht der      */
/* fertige Zustand. Inhalte nur aus der alten Referenzseite (data-review).*/
/* ===================================================================== */

/* --- Vorschau: Projekte nach Bereich (.u-ledger, referenzen-2.html) ----
   Filter (Auswahlknöpfe .u-chip) blenden Projekte weich aus und ein, die
   Summe der Flächen zählt mit (js/unterseiten.js). Ohne JS: alle Projekte
   und die Gesamtsumme. Darunter die Auftraggeber als Etiketten. */
.u-ledger__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px 48px;
  margin-bottom: clamp(24px, 2.6vw, 36px);
}

.u-ledger__filters {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.u-ledger__n {
  margin-left: 6px;
  font-family: var(--font-num);
  font-style: normal;
  font-weight: 500;
  color: var(--color-accent);
}

.u-chip input:checked + span .u-ledger__n {
  color: #fff;
}

.u-ledger__sum {
  display: grid;
  justify-items: end;
  gap: 4px;
  margin: 0 0 0 auto;
  text-align: right;
}

.u-ledger__total {
  font-family: var(--font-num);
  font-size: clamp(3rem, 1.4rem + 4vw, 5.6rem);
  font-weight: 300;
  line-height: 0.9;
  color: var(--color-accent);
  font-variant-numeric: tabular-nums;
}

.u-ledger__total small {
  font-size: 0.42em;
  color: var(--color-ink-soft);
}

.u-ledger__label {
  font-size: 0.9rem;
  color: var(--color-ink-soft);
}

.u-ledger__list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--color-ink);
}

.u-ledger__row {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 0.5s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.35s ease;
}

.u-ledger__row.is-out {
  grid-template-rows: 0fr;
  opacity: 0;
}

.u-ledger__inner {
  min-height: 0;
  overflow: hidden;
}

.u-ledger__line {
  position: relative;
  display: grid;
  grid-template-columns: 4.2rem minmax(0, 1fr) minmax(0, 11rem) minmax(7.5rem, auto);
  align-items: center;
  gap: 0 clamp(16px, 2vw, 32px);
  padding: clamp(16px, 1.8vw, 24px) 0;
  border-bottom: 1px solid var(--color-line);
}

.u-ledger__line::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 2px;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.u-ledger__year {
  font-family: var(--font-num);
  font-size: 1.15rem;
  color: var(--color-ink-faint);
}

.u-ledger__name {
  font-size: clamp(1.2rem, 0.8rem + 1.1vw, 1.85rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.015em;
  transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.u-ledger__place {
  display: block;
  margin-top: 3px;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--color-ink-soft);
}

.u-ledger__cat {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
}

.u-ledger__m2 {
  font-family: var(--font-num);
  font-size: clamp(1.6rem, 2.3vw, 2.5rem);
  font-weight: 400;
  line-height: 1;
  text-align: right;
  white-space: nowrap;
  color: var(--color-accent);
}

.u-ledger__m2 small {
  font-size: 0.55em;
  color: var(--color-ink-soft);
}

@media (hover: hover) {
  .u-ledger__line:hover::after {
    transform: scaleX(1);
  }

  .u-ledger__line:hover .u-ledger__name {
    transform: translateX(8px);
  }
}

.u-ledger__clients {
  margin-top: clamp(52px, 6vw, 88px);
}

.u-ledger__clients-label {
  margin: 0 0 16px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
}

.u-ledger__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.u-ledger__pills li {
  padding: 9px 16px;
  border: 1px solid rgba(20, 20, 20, 0.16);
  border-radius: 999px;
  background: var(--color-hero-bg);
  font-size: 0.92rem;
  font-weight: 600;
  transition: border-color 0.3s ease, transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.u-ledger__pills li span {
  font-weight: 500;
  color: var(--color-ink-soft);
}

@media (hover: hover) {
  .u-ledger__pills li:hover {
    border-color: var(--color-ink);
    transform: translateY(-2px);
  }
}

/* --- Namen im Fokus (.u-spot) -----------------------------------------
   Große Namen untereinander; der Name auf Höhe der Bildschirmmitte wird
   schwarz und rückt ein (js/unterseiten.js, auch bei reduzierter Bewegung,
   dann ohne Übergang). Links fest: Zähler, Fortschrittslinie, Ort. Ohne
   JS: alle Namen schwarz, kein Zähler. */
.u-spot {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--u-gap);
  align-items: start;
}

/* Spalte so hoch wie die Liste, damit der Inhalt darin stehen bleibt */
.u-spot__aside {
  align-self: stretch;
}

.u-spot__sticky {
  position: sticky;
  top: calc(var(--nav-height) + 48px);
}

.u-spot__meter {
  margin-top: clamp(36px, 4.4vw, 64px);
}

.u-spot__counter {
  display: flex;
  align-items: baseline;
  gap: 0.25em;
  margin: 0;
  overflow: hidden;
  font-family: var(--font-num);
}

.u-spot__now {
  display: inline-block;
  font-size: clamp(4.6rem, 2rem + 6vw, 8.6rem);
  font-weight: 300;
  line-height: 0.85;
  color: var(--color-accent);
  font-variant-numeric: tabular-nums;
}

.u-spot__now.is-tick {
  animation: u-spot-tick 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
}

@keyframes u-spot-tick {
  from { opacity: 0; transform: translateY(35%); }
  to { opacity: 1; transform: none; }
}

.u-spot__total {
  font-size: 1.7rem;
  color: var(--color-ink-faint);
}

.u-spot__bar {
  position: relative;
  display: block;
  width: min(100%, 320px);
  height: 2px;
  margin-top: 18px;
  overflow: hidden;
  background: var(--color-line);
}

.u-spot__fill {
  position: absolute;
  inset: 0;
  background: var(--color-accent);
  transform: scaleX(var(--p, 0));
  transform-origin: left center;
  transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.u-spot__place {
  min-height: 1.5em;
  margin: 14px 0 0;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
}

.u-spot__list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--color-ink);
}

.u-spot__item {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  align-items: baseline;
  gap: 2px 16px;
  padding: clamp(14px, 1.7vw, 24px) 0;
  border-bottom: 1px solid var(--color-line);
}

.u-spot__num {
  font-family: var(--font-num);
  font-size: 1.1rem;
  color: var(--color-accent);
  transition: color 0.4s ease;
}

.u-spot__name {
  font-size: clamp(1.35rem, 0.8rem + 1.7vw, 2.6rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  transition: color 0.4s ease, transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.u-spot__inplace {
  grid-column: 2;
  font-size: 0.88rem;
  color: var(--color-ink-soft);
}

.u-spot.is-enhanced .u-spot__inplace {
  display: none;
}

.u-spot.is-enhanced .u-spot__name {
  color: rgba(20, 20, 20, 0.2);
}

.u-spot.is-enhanced .u-spot__num {
  color: var(--color-ink-faint);
}

.u-spot.is-enhanced .u-spot__item.is-active .u-spot__name {
  color: var(--color-ink);
  transform: translateX(12px);
}

.u-spot.is-enhanced .u-spot__item.is-active .u-spot__num {
  color: var(--color-accent);
}

/* --- Auftraggeber: Tablet und Smartphone ------------------------------- */
@media (max-width: 900px) {
  .u-ledger__line {
    grid-template-columns: 3.2rem minmax(0, 1fr) auto;
    grid-template-areas:
      "year name m2"
      "year cat m2";
    row-gap: 6px;
  }

  .u-ledger__year { grid-area: year; }
  .u-ledger__name { grid-area: name; }
  .u-ledger__cat { grid-area: cat; }
  .u-ledger__m2 { grid-area: m2; }

  .u-ledger__sum {
    justify-items: start;
    margin-left: 0;
    text-align: left;
  }

  .u-spot {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }

  .u-spot__sticky {
    position: static;
  }

  .u-spot__meter {
    display: none;
  }

  .u-spot.is-enhanced .u-spot__inplace {
    display: block;
  }

  .u-spot.is-enhanced .u-spot__item.is-active .u-spot__name {
    transform: translateX(6px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .u-ledger__row,
  .u-ledger__line::after,
  .u-ledger__name,
  .u-ledger__pills li,
  .u-spot__num,
  .u-spot__name,
  .u-spot__fill {
    transition: none;
  }

  .u-ledger__line:hover .u-ledger__name,
  .u-ledger__pills li:hover,
  .u-spot.is-enhanced .u-spot__item.is-active .u-spot__name {
    transform: none;
  }

  .u-spot__now.is-tick {
    animation: none;
  }
}

/* ===================================================================== */
/* Gussasphalt · Gestaltung mit farbigen Splitten (04.10.2026)            */
/* Splitt-Palette, aus drei Varianten gewählt (die anderen im Archiv      */
/* „Zwischenstand vor Übernahme Gestaltung-Variante A“).                  */
/* ===================================================================== */

/* Punkte mit fettem Stichwort */
.u-points {
  margin: clamp(24px, 3vw, 36px) 0 clamp(24px, 3vw, 32px);
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--color-line);
}

.u-points li {
  display: grid;
  grid-template-columns: minmax(0, 11rem) minmax(0, 1fr);
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--color-line);
}

.u-points strong {
  font-weight: 700;
  color: var(--color-ink);
}

.u-points span {
  color: var(--color-ink-soft);
}

/* Splitt-Palette: 24 Ausschnitte aus einem Foto (6 × 4 Fächer) */
.u-palette {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: var(--u-gap);
  align-items: center;
}

.u-palette__grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(4px, 0.6vw, 8px);
}

.u-palette__grid span {
  position: relative;
  aspect-ratio: 1;
  border-radius: 3px;
  background: url('../assets/images/unterseiten/splitte-auswahl.jpg') calc(var(--x) * 20%) calc(var(--y) * 33.333%) / 600% 400% no-repeat;
  transition: transform 0.4s var(--motion-ease, ease), filter 0.4s ease, box-shadow 0.4s ease;
}

@media (hover: hover) {
  .u-palette__grid:hover span {
    filter: saturate(0.55) brightness(0.8);
  }

  .u-palette__grid span:hover {
    z-index: 2;
    transform: scale(1.4);
    filter: none;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
  }
}

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

@media (max-width: 640px) {
  .u-points li {
    grid-template-columns: 1fr;
    gap: 2px;
  }
}

/* --- Straßenbau „Was wir übernehmen“ als Aufklapp-Paneele (.u-fold) -----
   Seit 10.10.2026 (Notiz #6, Variante C). Drei Fotostreifen nebeneinander; der berührte (sonst
   der erste) klappt auf, wird farbig und zeigt Text, Bereiche und Link.
   Touch und Smartphone: untereinander, alles offen. */
.u-fold {
  display: flex;
  gap: clamp(10px, 1vw, 14px);
  height: clamp(420px, 58vh, 580px);
  margin-top: clamp(40px, 5vw, 72px);
}

.u-fold__panel {
  scroll-margin-top: calc(var(--nav-height, 84px) + 24px);
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  border-radius: 3px;
  background: var(--color-dark);
  color: var(--color-on-dark);
  transition: flex-grow 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.u-fold__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) brightness(0.8);
  transform: scale(1.04);
  transition: filter 0.7s ease, transform 1.2s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.u-fold__shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(13, 13, 13, 0.88) 0%, rgba(13, 13, 13, 0.3) 55%, rgba(13, 13, 13, 0.1) 100%);
}

/* Helles Motiv (Wohnungsbau 04, Splitt-Nahaufnahme): unten kräftiger abdunkeln, damit der
   Text lesbar bleibt; oben bleibt die Körnung sichtbar */
.u-fold__panel--hell .u-fold__shade {
  background: linear-gradient(0deg, rgba(13, 13, 13, 0.94) 0%, rgba(13, 13, 13, 0.72) 40%, rgba(13, 13, 13, 0.25) 75%, rgba(13, 13, 13, 0.15) 100%);
}

.u-fold__num {
  position: absolute;
  top: clamp(18px, 2vw, 28px);
  left: clamp(18px, 2vw, 28px);
  font-family: var(--font-num);
  font-size: clamp(2.6rem, 4.4vw, 4.2rem);
  font-weight: 300;
  line-height: 0.85;
  color: var(--color-accent);
}

.u-fold__body {
  position: absolute;
  right: clamp(18px, 2vw, 28px);
  bottom: clamp(20px, 2.4vw, 32px);
  left: clamp(18px, 2vw, 28px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.u-fold__body .u-kicker {
  margin-bottom: 8px;
  color: var(--color-on-dark-soft);
}

.u-fold__body h3 {
  margin: 0;
  font-size: clamp(1.3rem, 2vw, 1.9rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.u-fold__text,
.u-fold__tags,
.u-fold__body .u-link {
  max-height: 0;
  margin-top: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.6s ease, margin-top 0.6s ease, opacity 0.35s ease;
}

.u-fold__text {
  max-width: 40ch;
  line-height: 1.6;
  color: var(--color-on-dark-soft);
}

.u-fold__tags span {
  color: var(--color-on-dark);
}

.u-fold__body .u-link {
  border-bottom-color: rgba(244, 244, 244, 0.45);
  color: var(--color-on-dark);
}

.u-fold:not(:hover):not(:focus-within) .u-fold__panel.is-open,
.u-fold__panel:hover,
.u-fold__panel:focus-visible {
  flex-grow: 3.2;
}

.u-fold:not(:hover):not(:focus-within) .u-fold__panel.is-open .u-fold__img,
.u-fold__panel:hover .u-fold__img,
.u-fold__panel:focus-visible .u-fold__img {
  filter: none;
  transform: none;
}

.u-fold:not(:hover):not(:focus-within) .u-fold__panel.is-open :is(.u-fold__text, .u-fold__tags, .u-link),
.u-fold__panel:hover :is(.u-fold__text, .u-fold__tags, .u-link),
.u-fold__panel:focus-visible :is(.u-fold__text, .u-fold__tags, .u-link) {
  max-height: 8em;
  margin-top: 12px;
  opacity: 1;
  transition-delay: 0.15s;
}

.u-fold__panel:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 4px;
}

@media (max-width: 900px), (hover: none) {
  .u-fold {
    flex-direction: column;
    height: auto;
  }

  .u-fold__panel {
    display: flex;
    flex: none;
    flex-direction: column;
    justify-content: flex-end;
    min-height: clamp(280px, 70vw, 400px);
    padding: clamp(78px, 18vw, 96px) clamp(18px, 4vw, 28px) clamp(20px, 5vw, 28px);
  }

  .u-fold__body {
    position: relative;
    inset: auto;
  }

  .u-fold__shade {
    background: linear-gradient(0deg, rgba(13, 13, 13, 0.88) 0%, rgba(13, 13, 13, 0.55) 70%, rgba(13, 13, 13, 0.35) 100%);
  }

  .u-fold__panel--hell .u-fold__shade {
    background: linear-gradient(0deg, rgba(13, 13, 13, 0.9) 0%, rgba(13, 13, 13, 0.8) 70%, rgba(13, 13, 13, 0.6) 100%);
  }

  .u-fold .u-fold__img {
    filter: none;
    transform: none;
  }

  .u-fold .u-fold__panel :is(.u-fold__text, .u-fold__tags, .u-link) {
    max-height: none;
    margin-top: 10px;
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .u-fold__panel,
  .u-fold__img,
  .u-fold__text,
  .u-fold__tags,
  .u-fold__body .u-link {
    transition: none;
  }
}

/* --- Geschichte als Archiv-Album (.g-album) -------------------------
   Über uns, seit 10.10.2026 (Notiz #7, Variante B). Desktop mit Bewegung:
   Der Abschnitt bleibt stehen, die Kapitel laufen waagerecht durch
   (js/unterseiten.js „Archiv-Album“), die Fotos liegen wie Abzüge schräg
   übereinander und richten sich beim Darüberfahren auf. Ohne JS, bei
   reduzierter Bewegung und auf dem Handy stehen die Kapitel untereinander. */


.g-album {
  overflow: hidden;
}

.g-album__viewport {
  margin-top: clamp(40px, 5vw, 72px);
}

.g-album__track {
  display: grid;
  gap: clamp(64px, 8vw, 110px);
  padding-inline: var(--container-pad);
}

.g-album__page {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
  gap: clamp(28px, 4vw, 72px);
  align-items: center;
  max-width: 1240px;
  margin-inline: auto;
}

.g-album__mark {
  margin: 0 0 14px;
  font-family: var(--font-num);
  font-size: clamp(4rem, 9vw, 8.4rem);
  font-weight: 600;
  line-height: 0.85;
  letter-spacing: -0.01em;
  color: var(--color-accent);
}

.g-album__text h3 {
  margin: 0;
  font-size: clamp(1.5rem, 2.6vw, 2.4rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.02em;
}

.g-album__text h3 + p {
  max-width: 40ch;
  margin: 16px 0 0;
  line-height: 1.65;
  color: var(--color-ink-soft);
}

.g-album__prints {
  position: relative;
  display: flex;
  align-items: flex-start;
}

.g-print {
  position: relative;
  margin: 0;
}

.g-print--1 {
  z-index: 1;
  width: 66%;
}

.g-print--2 {
  z-index: 2;
  width: 46%;
  margin: 22% 0 0 -12%;
}

.g-album__page--heute .g-print--1 {
  width: 70%;
}

.g-print__card {
  padding: 10px 10px 0;
  background: #fbfaf7;
  box-shadow: 0 26px 50px -26px rgba(20, 20, 20, 0.6), 0 2px 6px rgba(20, 20, 20, 0.08);
  transform: rotate(var(--r, 0deg));
  transition: transform 0.55s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.55s ease;
}

.g-print__card img {
  display: block;
  width: 100%;
  height: auto;
}

.g-print__card figcaption {
  padding: 8px 2px 10px;
  font-family: var(--font-serif);
  font-size: 0.86rem;
  font-style: italic;
  color: var(--color-ink-soft);
}

@media (hover: hover) {
  .g-print:hover {
    z-index: 5;
  }

  .g-print:hover .g-print__card {
    box-shadow: 0 40px 70px -30px rgba(20, 20, 20, 0.65), 0 2px 8px rgba(20, 20, 20, 0.1);
    transform: rotate(0deg) scale(1.06);
  }
}

.g-album__timeline {
  display: none;
}

/* Bewegung (Desktop): waagerechte Strecke, Abschnitt wird beim Scrollen festgehalten */
.g-album.is-enhanced {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100vh;
  min-height: 100svh;
  padding-block: calc(var(--nav-height, 84px) + 20px) 48px;
}

.g-album.is-enhanced > .container {
  width: 100%;
}

.g-album.is-enhanced .u-head {
  margin-bottom: 0;
}

.g-album.is-enhanced .g-album__viewport {
  margin-top: clamp(20px, 3vw, 40px);
}

.g-album.is-enhanced .g-album__track {
  display: flex;
  gap: 0;
  width: max-content;
  padding-inline: var(--container-pad) 0;
}

.g-album.is-enhanced .g-album__page {
  flex: none;
  width: min(1120px, 78vw);
  max-width: none;
  margin: 0;
  padding-right: 7vw;
}

.g-album.is-enhanced .g-print__card img {
  max-height: 46vh;
  object-fit: cover;
}

.g-album.is-enhanced .g-album__timeline {
  position: relative;
  display: block;
  height: 2px;
  margin-top: clamp(24px, 3vw, 40px);
  background: var(--color-line);
}

.g-album__fill {
  position: absolute;
  inset: 0;
  background: var(--color-accent);
  transform: scaleX(var(--p, 0));
  transform-origin: 0 50%;
}

.g-album__tick {
  position: absolute;
  top: 10px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-ink-faint);
  transform: translateX(-50%);
  transition: color 0.3s ease;
}

.g-album__tick::before {
  content: "";
  position: absolute;
  top: -15px;
  left: 50%;
  width: 9px;
  height: 9px;
  border: 2px solid var(--color-accent);
  border-radius: 50%;
  background: var(--color-page-bg);
  transform: translateX(-50%);
  transition: background 0.3s ease;
}

.g-album__tick.is-reached {
  color: var(--color-ink);
}

.g-album__tick.is-reached::before {
  background: var(--color-accent);
}

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

  .g-print--2 {
    margin-top: 18%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .g-print__card {
    transition: none;
  }
}

/* --- Nachweis ohne Bild und Zusatzangebote als Karten ----------------
   Seit 11.10.2026 (Notiz #13): WHG „Rechtsrahmen und Qualifikation“ mit
   einem Textkasten neben dem SOUTEC-Nachweis (.u-proof--text), Hallen
   „Zusatzangebote“ als zwei ruhige Karten statt Umschalter (.u-offers). */
.u-proofs .u-proof--text {
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

.u-proof--text p {
  overflow-wrap: break-word;
  margin: 0;
  line-height: 1.6;
  color: var(--color-ink-soft);
}

.u-proof--text p + p {
  margin-top: 10px;
}

.u-proof--text .u-proof__title {
  color: var(--color-ink);
}

.u-proof--text .u-link {
  margin-top: 16px;
}

.u-offers {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 28px);
  margin-top: clamp(32px, 4vw, 56px);
}

.u-offer {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(24px, 3vw, 40px);
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: 3px;
}

.u-offer__num {
  margin-bottom: 18px;
  font-family: var(--font-num);
  font-size: clamp(2.8rem, 4.6vw, 4.2rem);
  font-weight: 300;
  line-height: 0.85;
  color: var(--color-accent);
}

.u-offer .u-kicker {
  margin-bottom: 8px;
}

.u-offer__title {
  margin: 0;
  font-size: clamp(1.3rem, 2vw, 1.8rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.02em;
}

.u-offer__text {
  max-width: 46ch;
  margin: 12px 0 0;
  line-height: 1.65;
  color: var(--color-ink-soft);
}

.u-offer__label {
  margin: 22px 0 8px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-ink);
}

.u-offer__list {
  margin: 0 0 26px;
  padding-left: 1.1em;
  line-height: 1.7;
  color: var(--color-ink-soft);
}

.u-offer .btn {
  margin-top: auto;
}

/* Nur noch eine Karte (seit 19.10.2026, Hallen: Kocher-Vermietung entfernt):
   volle Breite, Beschreibung links, Hinweise und Knopf rechts – keine Lücke. */
.u-offers--einzeln {
  grid-template-columns: minmax(0, 1fr);
}

.u-offers--einzeln .u-offer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: clamp(24px, 4vw, 64px);
  align-items: start;
}

.u-offers--einzeln .u-offer > * {
  grid-column: 1;
}

.u-offers--einzeln .u-offer__side {
  grid-column: 2;
  grid-row: 1 / span 4;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.u-offers--einzeln .u-offer__label {
  margin-top: 0;
}

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

  .u-offers--einzeln .u-offer {
    display: flex;
  }

  .u-offers--einzeln .u-offer__side {
    width: 100%;
  }

  .u-offers--einzeln .u-offer__label {
    margin-top: 22px;
  }
}

/* --- Wohnungsbau: Aufbau erkunden und Weg zur Anfrage ----------------
   Seit 11.10.2026 (Notiz #16, Variante C). Anruf-Link (.u-call), Hinweis-
   Etiketten (.u-help), Schichten erkunden (.u-layers, seit 13.10.2026 mit JS) und Zeitstrahl
   mit Anfragekarte (.u-route). */

.u-call {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  font-weight: 700;
  color: var(--color-ink);
}

.u-call span {
  font-weight: 500;
  color: var(--color-ink-soft);
}

.u-section--dark .u-call,
.u-section--dark .u-call span {
  color: var(--color-on-dark);
}

/* Zwei Spalten nach Inhaltsbreite (seit 13.10.2026): Einträge beginnen untereinander, Zeilen
   auf gleicher Höhe. Ist die Anfragekarte innen schmaler als 430 px, eine Spalte. */
.u-help {
  display: grid;
  grid-template-columns: max-content max-content;
  justify-content: start;
  gap: 8px 28px;
  margin: clamp(22px, 2.6vw, 32px) 0 0;
}

.u-help .u-kicker {
  grid-column: 1 / -1;
  margin: 0 0 2px;
}

@container (max-width: 430px) {
  .u-help {
    grid-template-columns: minmax(0, 1fr);
  }
}

.u-help span:not(.u-kicker) {
  position: relative;
  padding-left: 15px;
  font-size: 0.86rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--color-ink-soft);
}

/* Schichten erkunden (seit 13.10.2026). Ohne JS: Wechsel per Radio, alle
   Beschreibungen offen. Mit JS (.is-ready, js/unterseiten.js): Register mit
   gleitender Linie, eine Beschreibung offen, Schicht im Foto markiert.
   Die Schichtformen (.u-layers__map) sind SVG-Pfade in Bildpixeln entlang der
   gemessenen Kanten; sie skalieren mit dem Foto. */
.u-layers {
  margin-top: clamp(32px, 4vw, 56px);
}

.u-layers__radio {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* Register: aktive Seite dunkel und fett, feine rote Linie darunter */
.u-layers__switch {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 0 clamp(24px, 3vw, 40px);
  margin-bottom: clamp(22px, 2.4vw, 32px);
  border-bottom: 1px solid var(--color-line);
}

.u-layers__switch label {
  display: inline-grid;
  padding: 4px 0 14px;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  font-size: 1rem;
  font-weight: 500;
  color: var(--color-ink-soft);
  cursor: pointer;
  transition: color 0.2s ease;
}

/* Platz für die fette Schrift reservieren: beim Wechsel bleibt jedes Register an seiner Stelle */
.u-layers__switch label::after {
  content: attr(data-label);
  height: 0;
  overflow: hidden;
  font-weight: 700;
  visibility: hidden;
}

.u-layers__switch label:hover {
  color: var(--color-ink);
}

#aufbau-ohne:checked ~ .u-layers__switch label[for="aufbau-ohne"],
#aufbau-mit:checked ~ .u-layers__switch label[for="aufbau-mit"] {
  border-bottom-color: var(--color-accent);
  font-weight: 700;
  color: var(--color-ink);
}

#aufbau-ohne:focus-visible ~ .u-layers__switch label[for="aufbau-ohne"],
#aufbau-mit:focus-visible ~ .u-layers__switch label[for="aufbau-mit"] {
  outline: 2px solid var(--color-accent);
  outline-offset: 4px;
}

/* Mit JS gleitet eine Linie zum gewählten Register (Lage aus --tab-x/-y/-w, auch bei Umbruch) */
.u-layers.is-ready .u-layers__switch label {
  border-bottom-color: transparent !important;
}

.u-layers.is-ready .u-layers__switch::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: var(--tab-w, 0);
  height: 2px;
  background: var(--color-accent);
  transform: translate(var(--tab-x, 0), var(--tab-y, 0));
  transition: transform 0.22s ease, width 0.22s ease;
}

.u-layers__panel {
  display: none;
  grid-template-columns: var(--u-layers-cols);
  gap: var(--u-layers-gap);
  align-items: start;
}

#aufbau-ohne:checked ~ .u-layers__panel--1,
#aufbau-mit:checked ~ .u-layers__panel--2 {
  display: grid;
}

.u-layers__figure {
  margin: 0;
  container-type: inline-size;
}

.u-layers__img {
  position: relative;
  overflow: hidden;
  border-radius: 3px;
}

/* Fotos minimal aufgehellt, Farben bleiben */
.u-layers__img img {
  display: block;
  width: 100%;
  height: auto;
  filter: brightness(1.06);
}

.u-layers__map {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.u-layers__rest,
.u-layers__fill {
  fill: transparent;
  transition: fill 0.18s ease;
}

.u-layers__edge {
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 2;
  stroke-opacity: 0;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
  transition: stroke-opacity 0.18s ease;
}

.u-layers.is-ready .u-layers__rest,
.u-layers.is-ready .u-layers__fill {
  fill: rgba(13, 13, 13, 0.28);
}

.u-layers.is-ready .u-layers__shape {
  cursor: pointer;
}

.u-layers.is-ready .u-layers__shape.is-active .u-layers__fill {
  fill: color-mix(in srgb, var(--color-accent) 16%, transparent);
}

.u-layers.is-ready .u-layers__shape.is-active .u-layers__edge {
  stroke-opacity: 1;
}

/* Kupferrohre: feine Ringe um die Querschnitte, Bemaßungslinie mit Beschriftung */
.u-layers__pipes {
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}

.u-layers__pipes circle {
  vector-effect: non-scaling-stroke;
}

/* Ringe: Radius 26 px um die Rohrmitten (236 | 102) und (574 | 95,5) im 800 × 415 px Foto */
.u-layers__pipe-note {
  position: absolute;
  left: calc(29.5% + 3.25%);
  right: calc(28.25% + 3.25%);
  top: 23.8%;
  pointer-events: none;
}

.u-layers__pipe-line {
  display: block;
  height: 1px;
  background: var(--color-accent);
}

.u-layers__pipe-text {
  position: absolute;
  bottom: 8px;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  color: #fff;
}

.u-layers__pipe-text strong {
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.u-layers__pipe-legend {
  display: none;
  align-items: center;
  gap: 10px;
  margin: 12px 0 0;
  font-size: 0.86rem;
  line-height: 1.4;
  color: var(--color-ink-soft);
}

.u-layers__pipe-legend strong {
  color: var(--color-ink);
}

.u-layers__pipe-ring {
  flex: none;
  width: 14px;
  height: 14px;
  border: 1.5px solid var(--color-accent);
  border-radius: 50%;
}

/* Schmales Foto: Beschriftung unter das Bild, die Ringe bleiben */
@container (max-width: 600px) {
  .u-layers__pipe-note {
    display: none;
  }

  .u-layers__pipe-legend {
    display: flex;
  }
}

.u-layers__pipes,
.u-layers__pipe-note {
  animation: u-layers-in 0.2s ease both;
}

@keyframes u-layers-in {
  from { opacity: 0; }
}

/* Liste: Nummer, Bezeichnung, Pfeil; Beschreibung klappt auf */
.u-layers__list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--color-line);
}

.u-layers__list li {
  border-bottom: 1px solid var(--color-line);
  transition: border-color 0.2s ease;
}

.u-layers__row {
  display: grid;
  grid-template-columns: 2.1em minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  width: 100%;
  min-height: 52px;
  padding: 13px 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.35;
  text-align: left;
  color: var(--color-ink);
  cursor: pointer;
}

.u-layers__row:hover .u-layers__chev {
  color: var(--color-ink);
}

.u-layers__row:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.u-layers__num {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
  color: var(--color-accent);
}

.u-layers__name {
  transition: color 0.18s ease;
}

.u-layers__chev {
  width: 16px;
  height: 16px;
  color: var(--color-ink-faint);
  transition: transform 0.22s ease, color 0.18s ease;
}

.u-layers__desc {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 0.22s ease;
}

.u-layers__desc > div {
  overflow: hidden;
}

.u-layers__desc p {
  margin: 0;
  padding: 0 28px 16px calc(2.1em + 14px);
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--color-ink-soft);
}

.u-layers.is-ready .u-layers__list li:not(.is-open) .u-layers__desc {
  grid-template-rows: 0fr;
}

.u-layers__list li.is-shown .u-layers__name {
  color: var(--color-accent);
}

.u-layers__list li.is-open {
  border-bottom-color: var(--color-line-accent);
}

.u-layers__list li.is-open .u-layers__chev {
  transform: rotate(180deg);
  color: var(--color-accent);
}

.u-layers__hint {
  margin: 14px 0 0;
  font-size: 0.85rem;
  color: var(--color-ink-faint);
}

/* Gut zu wissen (seit 13.10.2026, statt des Baustellenfotos): Designboden-Foto und Erklärung.
   Gleiches Raster wie der Bodenaufbau darüber (.u-layers__panel): Spalten 3fr/2fr, gleicher
   Abstand, Text oben bündig mit dem Bild. */
.u-layers__panel,
.u-layers__more {
  --u-layers-cols: minmax(0, 3fr) minmax(0, 2fr);
  --u-layers-gap: clamp(28px, 4vw, 64px);
}

.u-layers__more {
  display: grid;
  grid-template-columns: var(--u-layers-cols);
  gap: var(--u-layers-gap);
  align-items: start;
  margin-top: clamp(48px, 5vw, 80px);
  padding-top: clamp(40px, 4.5vw, 64px);
  border-top: 1px solid var(--color-line);
}

/* Quadratisches Foto im Format 3:2; Ausschnitt mit Tisch und viel Boden */
.u-layers__more-media {
  margin: 0;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  border-radius: 3px;
}

.u-layers__more-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
}

.u-layers__more-title {
  margin: 0 0 20px;
  font-size: clamp(1.6rem, 2.4vw, 2.25rem);
  font-weight: var(--fw-title);
  line-height: 1.12;
  letter-spacing: var(--ls-title);
}

.u-layers__more-text > p:not(.u-eyebrow) {
  margin: 0 0 14px;
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  color: var(--color-ink-soft);
}

.u-layers__facts {
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--color-line);
}

.u-layers__facts li {
  position: relative;
  padding: 13px 0 13px 26px;
  border-bottom: 1px solid var(--color-line);
  font-weight: 600;
  line-height: 1.35;
}

.u-layers__facts li::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 2px;
  width: 10px;
  height: 2px;
  background: var(--color-accent);
}

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

  .u-layers__more-media {
    aspect-ratio: 4 / 3;
  }

  .u-layers__hint {
    display: none;
  }
}

@media (max-width: 480px) {
  .u-layers__switch {
    gap: 0 14px;
  }

  .u-layers__switch label {
    font-size: 0.82rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .u-layers *,
  .u-layers *::after,
  .u-layers__switch::after {
    transition: none !important;
    animation: none !important;
  }
}

/* Zeitstrahl mit Anfragekarte */
.u-route {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
  margin-top: clamp(36px, 4vw, 60px);
}

.u-route__steps {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
}

.u-route__steps::before {
  content: "";
  position: absolute;
  top: 12px;
  bottom: 12px;
  left: 27px;
  width: 2px;
  background: var(--color-line-accent);
}

.u-route__step {
  position: relative;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 20px;
  padding-bottom: clamp(22px, 2.6vw, 34px);
}

.u-route__num {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border: 2px solid var(--color-accent);
  border-radius: 50%;
  background: var(--color-page-bg);
  font-family: var(--font-num);
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--color-accent);
}

.u-route__step:first-child .u-route__num {
  background: var(--color-accent);
  color: #fff;
}

.u-route__step h3 {
  margin: 12px 0 0;
  font-size: 1.12rem;
  font-weight: 800;
  line-height: 1.25;
}

.u-route__step p {
  margin: 6px 0 0;
  line-height: 1.6;
  color: var(--color-ink-soft);
}

.u-route__card {
  position: sticky;
  top: calc(var(--nav-height, 84px) + 24px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  padding: clamp(24px, 3vw, 40px);
  border-radius: 3px;
  background: #fff;
  box-shadow: 0 30px 60px -36px rgba(20, 20, 20, 0.45);
  border: 1px solid var(--color-line);
}

.u-route__card .u-kicker {
  margin: 0;
  color: var(--color-accent);
}

.u-route__card h3 {
  margin: 0;
  font-size: clamp(1.4rem, 2.2vw, 1.9rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.02em;
}

.u-route__card > p:not(.u-kicker):not(.u-help) {
  margin: 0;
  line-height: 1.6;
  color: var(--color-ink-soft);
}

.u-route__card {
  container-type: inline-size;
}

.u-route__card .u-help {
  margin-top: 6px;
}

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

  .u-route__card {
    position: static;
  }
}

@media (prefers-reduced-motion: reduce) {
  .u-layers__band,
  .u-layers__list li,
  .u-layers__switch label {
    transition: none;
  }
}

/* Einsatzbereiche im Detail (Hallen, seit 13.10.2026): links fixierter Kopf mit Fortschritt 01–04,
   rechts vier Schritte. Mit JS (.is-ready, ab 901 px) treten nicht aktive Schritte zurück. */
.u-scrolly {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(32px, 6vw, 112px);
  align-items: start;
}

.u-scrolly__aside {
  align-self: stretch;
}

.u-scrolly__head {
  position: sticky;
  top: calc(var(--nav-height, 84px) + 48px);
}

.u-scrolly__head .u-lead {
  max-width: 40ch;
}

.u-scrolly__nav {
  display: grid;
  gap: 4px;
  margin: clamp(28px, 3vw, 44px) 0 0;
  padding: 0 0 0 18px;
  list-style: none;
  border-left: 1px solid var(--color-line);
}

.u-scrolly__nav li {
  position: relative;
  font-family: var(--font-num);
  font-size: 1.35rem;
  line-height: 1.5;
  color: var(--color-ink-faint);
  transition: color 0.3s ease;
}

.u-scrolly__nav li::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -19px;
  width: 2px;
  background: var(--color-accent);
  transform: scaleY(0);
  transition: transform 0.3s ease;
}

.u-scrolly__nav li.is-active {
  color: var(--color-accent);
}

.u-scrolly__nav li.is-active::before {
  transform: scaleY(1);
}

.u-scrolly__steps {
  margin: 0;
  padding: 0;
  list-style: none;
}

.u-scrolly__step {
  padding: clamp(32px, 4vw, 56px) 0;
  border-top: 1px solid var(--color-line);
}

.u-scrolly__step:first-child {
  padding-top: 0;
  border-top: 0;
}

.u-scrolly__num {
  display: block;
  margin-bottom: 10px;
  font-family: var(--font-num);
  font-size: clamp(2.2rem, 3.4vw, 3.2rem);
  font-weight: 300;
  line-height: 1;
  color: var(--color-accent);
}

.u-scrolly__step .u-eyebrow {
  margin-bottom: 12px;
}

.u-scrolly__title {
  margin: 0 0 18px;
  font-size: clamp(1.6rem, 2.4vw, 2.25rem);
  font-weight: var(--fw-title);
  line-height: 1.12;
  letter-spacing: var(--ls-title);
}

.u-scrolly__step > p:not(.u-eyebrow) {
  margin: 0 0 12px;
  max-width: 54ch;
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  color: var(--color-ink-soft);
}

.u-scrolly__step > p.u-scrolly__where {
  margin-top: 18px;
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--color-ink);
}

.u-scrolly__step .u-link {
  margin-top: 8px;
}

@media (min-width: 901px) {
  .u-scrolly__step {
    min-height: 46vh;
  }

  .u-scrolly.is-ready .u-scrolly__step {
    opacity: 0.32;
    transform: translateY(8px);
    transition: opacity 0.45s ease, transform 0.45s ease;
  }

  .u-scrolly.is-ready .u-scrolly__step.is-active {
    opacity: 1;
    transform: none;
  }
}

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

  .u-scrolly__head {
    position: static;
  }

  .u-scrolly__nav {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .u-scrolly.is-ready .u-scrolly__step,
  .u-scrolly__nav li,
  .u-scrolly__nav li::before {
    transition: none;
  }

  .u-scrolly.is-ready .u-scrolly__step {
    transform: none;
  }
}

/* Link im Fließtext einer FAQ-Antwort (Hallen, seit 13.10.2026): bleibt in der Zeile */
.faq-item__answer .u-link {
  display: inline;
  padding: 0;
}

/* Kundenstimmen (Referenzen, seit 13.10.2026): nach dem Vorbild der Bewertungen auf
   meinzuhause-massivhaus.de, in Röfe-Farben. Hellgraue Karten auf hellem Seitengrund (wie die FAQ), Sterne orange.
   Mit JS (.is-ready) sind die siebte Rezension und die Wertungen ohne Text zugeklappt. */
.u-voices__head {
  max-width: 760px;
  margin: 0 auto clamp(36px, 4vw, 56px);
  text-align: center;
}

.u-voices__head .u-lead {
  margin: 18px auto 0;
}

.u-voices__total {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px 12px;
  margin: 22px 0 0;
  font-size: 0.95rem;
  color: var(--color-ink-soft);
}

.u-voices__total strong {
  color: var(--color-ink);
}

.u-voices__stand {
  font-size: 0.8rem;
  color: var(--color-ink-faint);
}

.u-voices__stars {
  font-size: 1.05rem;
  letter-spacing: 0.08em;
  line-height: 1;
  color: #f29a1f;
}

.u-voices__star-off {
  color: #d9d9d9;
}

.u-voices__grid,
.u-voices__minis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 24px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.u-voices__card,
.u-voices__mini {
  display: flex;
  flex-direction: column;
  background: #f1f1f1;
  border: 1px solid rgba(20, 20, 20, 0.07);
  border-radius: 10px;
}

.u-voices__card {
  padding: clamp(22px, 2.2vw, 30px);
}

.u-voices__text {
  flex: 1;
  margin: 16px 0 22px;
}

.u-voices__text p {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--color-ink);
}

.u-voices__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 4px 12px;
  margin: 0;
  padding-top: 16px;
  border-top: 1px solid var(--color-line);
}

.u-voices__name {
  font-weight: 700;
  color: var(--color-ink);
}

.u-voices__src {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-size: 0.78rem;
  color: var(--color-ink-faint);
}

.u-voices__note {
  font-size: 0.74rem;
}

.u-voices__extra {
  margin-top: clamp(28px, 3vw, 40px);
}

.u-voices__extra-title {
  margin: 0 0 14px;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
}

.u-voices__minis {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.u-voices__mini {
  gap: 8px;
  padding: 18px 20px;
}

.u-voices__mini .u-voices__src {
  align-items: flex-start;
}

.u-voices__foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  margin-top: clamp(32px, 3.5vw, 48px);
}

.u-voices__toggle {
  padding: 11px 22px;
  border: 1px solid rgba(20, 20, 20, 0.2);
  border-radius: 999px;
  background: transparent;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--color-ink);
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.u-voices__toggle:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.u-voices__toggle:focus-visible,
.u-voices__all:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

.u-voices__all {
  padding-bottom: 3px;
  border-bottom: 1px solid currentColor;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--color-ink);
  text-decoration: none;
  transition: color 0.2s ease;
}

.u-voices__all:hover {
  color: var(--color-accent);
}

.u-voices.is-ready:not(.is-open) [data-u-more] {
  display: none;
}

.u-voices.is-open [data-u-more] {
  animation: u-voices-in 0.35s ease both;
}

@keyframes u-voices-in {
  from { opacity: 0; transform: translateY(6px); }
}

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

  .u-voices__minis {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

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

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

@media (prefers-reduced-motion: reduce) {
  .u-voices.is-open [data-u-more] {
    animation: none;
  }
}

/* H1 der Unterseiten (seit 14.10.2026, SEO-Überschriften): Längere Titel wie „Gussasphaltestrich im
   Wohnungsbau.“ sollen nur an Bindestrichen und Trennstellen (&shy;) umbrechen, nicht zusätzlich mitten in
   „Wohnungsbau.“. Die Schrift wird deshalb höchstens so groß, dass rund 7 em („Wohnungsbau.“, „Gussasphalt?“)
   in die Textspalte passen (14cqi, wie die Startseite); sonst gilt die bisherige Größe. Wirkt nur bei 1024–1440 px. */
.u-hero__content {
  container-type: inline-size;
}

.u-hero__title {
  font-size: min(var(--fs-page-title), 14cqi);
}

/* ==========================================================================
   Impressum und Datenschutz (Entwürfe seit 15.10.2026)
   Schlichte Textseiten ohne Hero (pilot_bauen.py, recht=True). Lesespalte ca. 70 Zeichen.
   .u-entwurf  = sichtbarer Entwurfshinweis oben auf der Seite
   .u-offen    = konkrete offene Frage („OFFEN – RÖFE: …“) an der Stelle der fehlenden Angabe.
   Beides stoppt die Veröffentlichung (werkzeuge/freigabe_pruefen.py, Prüfpunkt OFFEN).
   ========================================================================== */
.u-recht {
  padding-block: clamp(40px, 6vw, 72px) var(--section-pad-y);
}

.u-recht__inner {
  max-width: calc(760px + 2 * var(--container-pad));
}

.u-recht .u-crumbs {
  margin-bottom: clamp(20px, 3vw, 32px);
  color: var(--color-ink-soft);
}

.u-recht .u-crumbs a {
  color: inherit;
}

.u-recht__title {
  font-size: clamp(2.1rem, 1.4rem + 3vw, 3.6rem);
  overflow-wrap: anywhere;
  hyphens: auto;
}

.u-entwurf {
  margin: clamp(24px, 3vw, 32px) 0 0;
  padding: 14px 18px;
  border: 1px solid var(--color-line-accent);
  border-left: 4px solid var(--color-accent);
  border-radius: 8px;
  background: #fff;
  font-size: 0.95rem;
  line-height: 1.55;
}

.u-entwurf p {
  margin: 0;
}

.u-recht__toc {
  margin-top: clamp(24px, 3vw, 36px);
  padding: 18px 22px;
  border: 1px solid var(--color-line);
  border-radius: 10px;
  background: #fff;
}

.u-recht__toc ol {
  margin: 0;
  padding-left: 1.4em;
  columns: 2 16rem;
  column-gap: 32px;
  line-height: 1.9;
}

.u-recht__toc a,
.u-recht__text a {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  overflow-wrap: anywhere;
}

.u-recht__text {
  margin-top: clamp(28px, 4vw, 44px);
  font-size: 1.02rem;
  line-height: 1.7;
  color: var(--color-ink);
}

.u-recht__text h2 {
  margin: clamp(36px, 5vw, 52px) 0 12px;
  font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.65rem);
  line-height: 1.25;
  scroll-margin-top: calc(var(--nav-height, 80px) + 16px);
}

.u-recht__text h2:first-child {
  margin-top: 0;
}

.u-recht__text h3 {
  margin: 28px 0 8px;
  font-size: 1.08rem;
  line-height: 1.35;
  scroll-margin-top: calc(var(--nav-height, 80px) + 16px);
}

.u-recht__text p,
.u-recht__text ul {
  margin: 0 0 14px;
}

.u-recht__text ul {
  padding-left: 1.3em;
}

.u-recht__text li + li {
  margin-top: 6px;
}

/* Offene Frage: bewusst auffällig, nicht zu übersehen */
.u-offen {
  display: block;
  margin: 10px 0 16px;
  padding: 10px 14px;
  border: 1px dashed var(--color-accent);
  border-radius: 6px;
  background: rgba(227, 6, 19, 0.06);
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--color-accent-hover);
}

span.u-offen {
  margin-top: 6px;
}

/* Datenschutzerklärung (seit 19.10.2026, Wunsch Domenic: keine sichtbaren Arbeitsanmerkungen):
   offene Fragen öffentlich ausgeblendet, sichtbar mit ?review=1. Im Quelltext bleiben sie
   stehen; die Freigabeprüfung (Prüfpunkt OFFEN) stoppt die Veröffentlichung weiterhin.
   Das Impressum zeigt sie unverändert. */
.u-recht--intern .u-offen {
  display: none;
}

html.show-review .u-recht--intern .u-offen {
  display: block;
}

/* Impressum (seit 19.10.2026): auch der Entwurfshinweis nur intern, sichtbar mit ?review=1.
   Er bleibt im Quelltext, damit die Freigabeprüfung weiter anschlägt. */
.u-recht--intern .u-entwurf--intern {
  display: none;
}

html.show-review .u-recht--intern .u-entwurf--intern {
  display: block;
}

/* --- Sehr schmale Handys (seit 18.10.2026, Geräteprüfung vor der Veröffentlichung) ----
   Bei 320 px lief „Wohnungsbau“ in den Pfeil und „Fugenlos“ an den Bildschirmrand.
   Ab 390 px bleibt alles wie abgestimmt. */
@media (max-width: 359px) {
  .u-svc__title {
    font-size: clamp(1.3rem, 7vw, 1.7rem);
  }
}

@media (max-width: 380px) {
  .u-stat__value {
    font-size: clamp(2rem, 10.5vw, 2.8rem);
  }
}


/* --------------------------------------------------------------------- */
/* Neue Fotos und Videos von Röfe (seit 27.10.2026, WhatsApp 25.10.2026)  */
/* --------------------------------------------------------------------- */

/* Kopfbild als Video (Gussasphalt): wie das Bild im Paneel */
.u-hero--expand .u-hero__media video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 22%;
}

/* Straßenbau: Video „Mit allen Fahrzeugen vor Ort“ */
.u-clip {
  margin: clamp(32px, 4vw, 56px) 0 0;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border-radius: 3px;
  background: #111;
}

.u-clip video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Hallen & Höfe „Aus der Praxis“: zwei Höfe nebeneinander */
.u-pair2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2.4vw, 40px);
  margin-top: clamp(32px, 4vw, 56px);
}

.u-pair2__item {
  margin: 0;
}

.u-pair2__img {
  overflow: hidden;
  aspect-ratio: 1 / 1;
  border-radius: 3px;
}

.u-pair2__img img,
.u-pics__item img,
.u-fleet__item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.u-pair2 figcaption {
  display: grid;
  gap: 4px;
  margin-top: 14px;
}

.u-pair2 figcaption strong {
  font-size: clamp(1.1rem, 1.5vw, 1.35rem);
  font-weight: 600;
}

/* Privatkunde: Text links (mitlaufend), sechs Fotos rechts */
.u-private {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: var(--u-gap, clamp(24px, 4vw, 72px));
  align-items: start;
  margin-top: clamp(72px, 9vw, 140px);
}

.u-private__text {
  position: sticky;
  top: 120px;
}

.u-private__title {
  margin: 8px 0 16px;
  font-size: clamp(1.5rem, 2.4vw, 2.1rem);
  line-height: 1.15;
}

.u-private__text p:not(.u-kicker) {
  max-width: 46ch;
  margin: 0 0 28px;
  line-height: 1.65;
}

.u-pics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(8px, 1vw, 16px);
}

.u-pics__item {
  margin: 0;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  border-radius: 3px;
}

/* Auf dem dunklen Gussasphalt-Grund */
.u-section--dark .u-pair2 figcaption strong,
.u-section--dark .u-private__title {
  color: var(--color-on-dark);
}

.u-section--dark .u-pair2 .u-kicker,
.u-section--dark .u-private .u-kicker,
.u-section--dark .u-private__text p:not(.u-kicker) {
  color: var(--color-on-dark-soft);
}

/* Über uns „Unsere Fahrzeuge“: ein großes Foto, vier kleine */
.u-fleet {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(8px, 1vw, 16px);
  margin-top: clamp(32px, 4vw, 56px);
}

.u-fleet__item {
  margin: 0;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border-radius: 3px;
}

.u-fleet__item:first-child {
  grid-column: span 2;
  grid-row: span 2;
  aspect-ratio: auto;
}

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

  .u-private__text {
    position: static;
  }

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

@media (max-width: 700px) {
  .u-fleet {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .u-pair2 {
    grid-template-columns: 1fr;
  }

  .u-pair2__img {
    aspect-ratio: 4 / 3;
  }
}

/* Rechtliche Textseite (Datenschutz, seit 27.10.2026): ruhige Lesespalte statt Kopfbild */
.u-legal {
  padding-top: clamp(140px, 14vw, 200px);
}

.u-legal__inner {
  max-width: 820px;
}

.u-legal .u-crumbs {
  margin-bottom: clamp(24px, 3vw, 40px);
}

.u-legal .u-lead {
  margin-top: 20px;
}

.u-legal h2 {
  margin: clamp(44px, 5vw, 64px) 0 14px;
  font-size: clamp(1.3rem, 2vw, 1.6rem);
  line-height: 1.25;
  scroll-margin-top: 120px;
}

.u-legal p {
  margin: 0 0 14px;
  max-width: 72ch;
  line-height: 1.7;
}

.u-legal p a,
.u-legal__toc a {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.u-legal__toc {
  margin-top: clamp(28px, 3vw, 40px);
  padding: 20px 24px;
  border-left: 3px solid var(--color-accent);
  background: var(--color-page-bg);
}

.u-legal__toc ol {
  margin: 0;
  padding-left: 1.2em;
  display: grid;
  gap: 6px;
}