body.page-home:not(.page-subpage) {
  --home-card-radius: 20px;
  --home-card-radius-small: 14px;
  --home-card-border: 1px solid var(--color-border);
  --home-panel-shadow: 0 16px 40px rgba(0, 0, 0, 0.08);
  --home-catalog-tone: #f5f1ea;
  --home-catalog-tone-strong: #ece5da;
  --home-catalog-ink-soft: #6f6354;
  --home-catalog-star: #a2794d;
  --home-quote-gap-equal: clamp(5.14rem, 8.32vw, 7.28rem);
}

body.page-home:not(.page-subpage) .home-section {
  padding-top: clamp(4rem, 7vw, 6.6rem);
  padding-bottom: clamp(4rem, 7vw, 6.6rem);
  scroll-margin-top: calc(var(--header-height) + var(--header-offset) + 1rem);
  background: #ffffff;
}

body.page-home:not(.page-subpage) .hero + .home-section {
  padding-top: clamp(4.8rem, 8vw, 7rem);
}

body.page-home:not(.page-subpage) .hero + .home-hero-quote {
  padding-block: 0;
}

body.page-home:not(.page-subpage) .home-hero-quote {
  border-top: 0;
  padding-block: 0;
}

body.page-home:not(.page-subpage) #leistungen.home-hero-quote {
  padding-top: var(--home-quote-gap-equal);
  padding-bottom: var(--home-quote-gap-equal);
}

body.page-home:not(.page-subpage) #seiner-wohnen.hero.hero--home {
  padding-bottom: 0;
}

body.page-home:not(.page-subpage) #produkte.home-products {
  padding-top: 0;
}

body.page-home:not(.page-subpage) .home-hero-quote__title {
  margin: 0 auto clamp(0.85rem, 1.8vw, 1.35rem);
  text-align: center;
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.25;
  color: var(--color-accent);
}

body.page-home:not(.page-subpage) .home-hero-quote__text {
  margin: 0 auto;
  max-width: min(32ch, 100%);
  text-align: center;
  font-family: var(--font-display);
  font-size: var(--fs-display);
  line-height: 0.98;
  letter-spacing: 0.01em;
}

body.page-home:not(.page-subpage) .home-hero-quote__reveal {
  --quote-reveal-progress: 0%;
  color: rgba(0, 0, 0, 0.45);
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  body.page-home:not(.page-subpage) .home-hero-quote__reveal {
    background-image: linear-gradient(
      90deg,
      #000000 0,
      #000000 var(--quote-reveal-progress),
      rgba(0, 0, 0, 0.45) var(--quote-reveal-progress),
      rgba(0, 0, 0, 0.45) 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
}

@media (max-width: 759px) {
  body.page-home:not(.page-subpage) .home-hero-quote__text {
    max-width: 24ch;
    line-height: 1.08;
  }
}

body.page-home:not(.page-subpage) .home-section-head {
  display: grid;
  gap: 0.6rem;
  max-width: 760px;
  margin-bottom: clamp(1.4rem, 2.8vw, 2.4rem);
}

/* Siehe styles.css: identisch zur Vorlage "Vom Wohntraum zum Wohnraum". */
body.page-home:not(.page-subpage) .home-kicker {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--color-accent);
}

body.page-home:not(.page-subpage) .home-lead {
  font-size: var(--fs-body-strong);
  max-width: 68ch;
}

body.page-home:not(.page-subpage) .home-intro {
  border-top: 1px solid var(--color-border);
}

body.page-home:not(.page-subpage) .home-intro__grid {
  display: grid;
  gap: clamp(1.1rem, 2.2vw, 2.2rem);
}

body.page-home:not(.page-subpage) .home-intro__content {
  display: grid;
  gap: clamp(0.8rem, 1.4vw, 1.2rem);
}

body.page-home:not(.page-subpage) .home-intro__content h2 {
  font-size: var(--fs-h1);
  line-height: 0.98;
  letter-spacing: 0.01em;
  text-transform: none;
}

body.page-home:not(.page-subpage) .home-inline-cta {
  justify-self: start;
}

body.page-home:not(.page-subpage) .home-steps {
  list-style: none;
  display: grid;
  gap: clamp(0.75rem, 1.6vw, 1rem);
}

body.page-home:not(.page-subpage) .home-step {
  border: var(--home-card-border);
  border-radius: var(--home-card-radius-small);
  padding: clamp(0.9rem, 1.9vw, 1.2rem);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(0.8rem, 1.6vw, 1.2rem);
  background: #ffffff;
}

body.page-home:not(.page-subpage) .home-step__number {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  line-height: 1;
  color: var(--color-ink);
  min-width: 2.4ch;
}

body.page-home:not(.page-subpage) .home-step__body {
  display: grid;
  gap: 0.22rem;
}

body.page-home:not(.page-subpage) .home-step__body h3 {
  font-size: var(--fs-h4);
  line-height: 1.15;
}

body.page-home:not(.page-subpage) .home-products {
  border-top: 1px solid var(--color-border);
}

body.page-home:not(.page-subpage) .home-product-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.76fr) minmax(0, 1.24fr);
  gap: clamp(1rem, 2.2vw, 1.8rem);
  align-items: stretch;
  margin-bottom: clamp(1.1rem, 2.4vw, 1.8rem);
}

body.page-home:not(.page-subpage) .home-product-editorial {
  display: grid;
  align-content: center;
  gap: clamp(0.55rem, 1vw, 0.8rem);
}

body.page-home:not(.page-subpage) .home-product-editorial h2 {
  max-width: 12ch;
  font-size: var(--fs-h2);
  line-height: 0.95;
  letter-spacing: 0.01em;
  text-transform: none;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: manual;
  text-wrap: balance;
}

body.page-home:not(.page-subpage) .home-product-editorial .home-lead {
  max-width: 35ch;
  color: var(--color-ink-muted);
  font-size: var(--fs-small);
}

body.page-home:not(.page-subpage) .home-product-links {
  list-style: none;
  margin: 0.18rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.42rem;
}

body.page-home:not(.page-subpage) .home-product-links a {
  display: inline-flex;
  align-items: center;
  gap: 0.38rem;
  min-height: 34px;
  padding: 0.35rem 0.74rem;
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.22);
  color: var(--color-ink);
  text-decoration: none;
  background: #ffffff;
  font-size: var(--fs-caption);
  font-weight: 600;
  letter-spacing: 0.01em;
}

body.page-home:not(.page-subpage) .home-product-links a::after {
  content: "\2192";
  font-size: var(--fs-small);
  line-height: 1;
  transform: translateX(0);
  transition: transform 0.2s ease;
}

body.page-home:not(.page-subpage) .home-product-links a:hover,
body.page-home:not(.page-subpage) .home-product-links a:focus-visible {
  border-color: var(--color-ink);
  color: var(--color-ink);
}

body.page-home:not(.page-subpage) .home-product-links a:hover::after,
body.page-home:not(.page-subpage) .home-product-links a:focus-visible::after {
  transform: translateX(4px);
}

body.page-home:not(.page-subpage) .home-product-editorial__cta {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  margin-top: 0.28rem;
  padding: 0.44rem 0.98rem;
  border-radius: 999px;
  border: 1px solid var(--color-accent);
  background: var(--color-accent);
  color: #ffffff;
  text-decoration: none;
  font-size: var(--fs-button);
  font-weight: 500;
  transition:
    background-color 0.3s ease-in-out,
    border-color 0.3s ease-in-out,
    color 0.22s ease-in-out;
}

body.page-home:not(.page-subpage) .home-product-editorial__cta:hover,
body.page-home:not(.page-subpage) .home-product-editorial__cta:focus-visible {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #ffffff;
}

body.page-home:not(.page-subpage) .home-product-feature {
  display: grid;
  gap: clamp(0.86rem, 1.7vw, 1.2rem);
  min-height: 0;
  background: transparent;
}

body.page-home:not(.page-subpage) .home-product-feature img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: var(--home-card-radius);
  box-shadow: none;
  filter: none;
}

body.page-home:not(.page-subpage) .home-product-feature::after {
  content: none;
}

body.page-home:not(.page-subpage) .home-product-feature__content {
  position: static;
  padding: 0;
  display: grid;
  gap: 0.28rem;
}

body.page-home:not(.page-subpage) .home-product-feature__content h3 {
  color: var(--color-ink);
  font-size: var(--fs-h3);
  text-transform: none;
}

body.page-home:not(.page-subpage) .home-product-feature__content p {
  color: var(--color-ink-muted);
  font-size: var(--fs-small);
}

body.page-home:not(.page-subpage) .home-product-mosaic {
  display: grid;
  grid-template-columns: minmax(0, 1.22fr) minmax(0, 1fr);
  grid-auto-rows: minmax(0, 1fr);
  column-gap: clamp(0.72rem, 1.6vw, 1.12rem);
  row-gap: clamp(1.2rem, 2.6vw, 1.9rem);
}

body.page-home:not(.page-subpage) .home-product-story {
  position: relative;
  overflow: hidden;
  border-radius: var(--home-card-radius);
  min-height: clamp(220px, 27vw, 340px);
  background: #ece5da;
}

body.page-home:not(.page-subpage) .home-product-story--large {
  grid-row: span 2;
  min-height: clamp(460px, 58vw, 700px);
}

body.page-home:not(.page-subpage) .home-product-story img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body.page-home:not(.page-subpage) .home-product-story::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 58%;
  background: linear-gradient(to top, rgba(21, 16, 12, 0.74), rgba(21, 16, 12, 0));
}

body.page-home:not(.page-subpage) .home-product-story__content {
  position: absolute;
  inset: auto 0 0;
  z-index: 1;
  padding: clamp(0.92rem, 1.8vw, 1.25rem);
  display: grid;
  gap: 0.36rem;
}

body.page-home:not(.page-subpage) .home-product-story__content h3 {
  color: #f9f5ef;
  font-size: clamp(1.9rem, 3vw, 2.65rem);
  line-height: 0.98;
}

body.page-home:not(.page-subpage) .home-product-story__content a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: start;
  min-width: clamp(11.5rem, 18vw, 13rem);
  min-height: 44px;
  padding: 0.55rem 1rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.86);
  color: #fff8ef;
  text-decoration: none;
  font-size: var(--fs-caption);
  text-align: center;
  background: rgba(15, 11, 8, 0.35);
}

body.page-home:not(.page-subpage) .home-product-story__content a:hover,
body.page-home:not(.page-subpage) .home-product-story__content a:focus-visible {
  background: #fff8ef;
  color: #1d1610;
  border-color: #fff8ef;
}

body.page-home:not(.page-subpage) .home-product-tail {
  margin-top: clamp(0.95rem, 2.2vw, 1.6rem);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.55rem, 1vw, 0.82rem);
}

body.page-home:not(.page-subpage) .home-product-tail__card {
  display: grid;
  gap: 0.42rem;
  min-width: 0;
}

body.page-home:not(.page-subpage) .home-product-tail__card img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 12px;
}

body.page-home:not(.page-subpage) .home-product-tail__card--zirben img {
  object-fit: cover;
  object-position: center;
  background: #f2eee8;
}

body.page-home:not(.page-subpage) .home-product-tail__card a {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.35rem;
  width: fit-content;
  max-width: 100%;
  color: var(--color-ink);
  text-decoration: none;
  font-size: var(--fs-caption);
  font-weight: 600;
  line-height: 1.35;
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
}

body.page-home:not(.page-subpage) .home-product-tail__card a::after {
  content: "\2192";
  font-size: var(--fs-small);
  line-height: 1;
  flex: 0 0 auto;
  margin-top: 0;
  transform: translateX(0);
  transition: transform 0.2s ease;
}

body.page-home:not(.page-subpage) .home-product-tail__card a:hover,
body.page-home:not(.page-subpage) .home-product-tail__card a:focus-visible {
  color: var(--color-ink);
  text-decoration: none;
}

body.page-home:not(.page-subpage) .home-product-tail__card a:hover::after,
body.page-home:not(.page-subpage) .home-product-tail__card a:focus-visible::after {
  transform: translateX(4px);
}

body.page-home:not(.page-subpage) .home-catalog {
  border-top: 1px solid var(--color-border);
  background: var(--color-surface);
  padding-top: clamp(2.25rem, 4.6vw, 4rem);
}

body.page-home:not(.page-subpage) .home-catalog .home-section-head {
  max-width: 860px;
  margin-bottom: clamp(1.6rem, 3vw, 2.4rem);
}

body.page-home:not(.page-subpage) .home-section-head--catalog {
  justify-items: start;
  text-align: left;
  gap: 0.7rem;
}

body.page-home:not(.page-subpage) .home-section-head--catalog h2 {
  font-size: var(--fs-h1);
  line-height: 0.98;
  letter-spacing: 0.01em;
}

body.page-home:not(.page-subpage) .home-section-head--catalog .home-lead {
  max-width: 60ch;
  font-size: var(--fs-body-strong);
}

body.page-home:not(.page-subpage) .catalog-atelier {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1rem, 2vw, 1.8rem);
  align-items: start;
}

body.page-home:not(.page-subpage) .catalog-atelier__feature {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.85rem, 1.6vw, 1.35rem);
  align-items: center;
  padding: clamp(0.9rem, 1.8vw, 1.3rem) 0;
  border: 1px solid var(--color-border);
  border-radius: var(--home-card-radius);
  background: #ffffff;
  min-width: 0;
}

body.page-home:not(.page-subpage) .catalog-atelier__feature-media {
  display: block;
  overflow: hidden;
  border-radius: var(--home-card-radius);
  background: #ffffff;
}

body.page-home:not(.page-subpage) .catalog-atelier__feature-media img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: contain;
}

body.page-home:not(.page-subpage) .catalog-atelier__feature-copy {
  display: grid;
  align-content: center;
  gap: clamp(0.68rem, 1.4vw, 1rem);
  padding-top: 0;
  min-width: 0;
}

body.page-home:not(.page-subpage) .catalog-atelier__label {
  margin: 0;
  text-transform: none;
  letter-spacing: 0.15em;
  font-size: var(--fs-caption);
  font-weight: 500;
  color: var(--color-accent);
}

body.page-home:not(.page-subpage) .catalog-atelier__feature-copy h3 {
  margin: 0;
  max-width: 100%;
  font-size: var(--fs-h2);
  line-height: 0.94;
  letter-spacing: 0.01em;
  text-transform: none;
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
}

body.page-home:not(.page-subpage) .catalog-atelier__feature-copy p {
  margin: 0;
  max-width: 72ch;
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--color-ink);
}

body.page-home:not(.page-subpage) .catalog-atelier__points {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.46rem;
}

body.page-home:not(.page-subpage) .catalog-atelier__points li {
  position: relative;
  padding-left: 1rem;
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--color-ink);
}

body.page-home:not(.page-subpage) .catalog-atelier__points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.54em;
  width: 0.35rem;
  height: 0.35rem;
  border-radius: 50%;
  background: var(--color-accent);
}

body.page-home:not(.page-subpage) .catalog-shelf {
  --catalog-shelf-gap: clamp(0.68rem, 1.2vw, 1rem);
  grid-column: 1 / -1;
  margin-top: clamp(0.95rem, 1.8vw, 1.5rem);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--catalog-shelf-gap);
}

body.page-home:not(.page-subpage) .catalog-shelf-card {
  display: grid;
  gap: 0.52rem;
  align-content: start;
  min-width: 0;
}

body.page-home:not(.page-subpage) .catalog-shelf-card__media {
  display: block;
  overflow: hidden;
  border-radius: 12px;
}

body.page-home:not(.page-subpage) .catalog-shelf-card__media img {
  width: 100%;
  aspect-ratio: 7 / 9;
  object-fit: cover;
}

body.page-home:not(.page-subpage) .catalog-shelf-card__kicker {
  margin: 0;
  padding-inline: 0;
  color: var(--color-accent);
  font-size: var(--fs-caption);
  text-transform: none;
  letter-spacing: 0.12em;
  font-weight: 700;
  white-space: nowrap;
}

body.page-home:not(.page-subpage) .catalog-shelf-card h3 {
  margin: 0;
  padding-inline: 0;
  font-family: var(--font-body);
  font-size: var(--fs-small);
  line-height: 1.26;
  text-transform: none;
  letter-spacing: 0.02em;
}

body.page-home:not(.page-subpage) .catalog-link {
  display: inline;
  max-width: 100%;
  color: var(--color-ink);
  text-decoration: none;
  font-size: var(--fs-small);
  font-weight: 600;
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
}

body.page-home:not(.page-subpage) .catalog-link::after {
  content: "\00a0\2192";
  display: inline-block;
  font-size: var(--fs-small);
  line-height: 1;
  transform: translateX(0);
  transition: transform 0.2s ease;
}

body.page-home:not(.page-subpage) .catalog-link:hover,
body.page-home:not(.page-subpage) .catalog-link:focus-visible {
  color: var(--color-ink);
  text-decoration: none;
}

body.page-home:not(.page-subpage) .catalog-link:hover::after,
body.page-home:not(.page-subpage) .catalog-link:focus-visible::after {
  transform: translateX(4px);
}

/* Materialhover: Tiefe statt Versatz.
   Vorher lag der Ausloeser auf dem <img> selbst — wer die Bildunterschrift
   beruehrte, loeste nichts aus, und mit der Tastatur passierte gar nichts.
   Jetzt reagiert die ganze Kachel, per :hover UND :focus-within. */
body.page-home:not(.page-subpage) .catalog-atelier__feature-media img,
body.page-home:not(.page-subpage) .home-product-story img,
body.page-home:not(.page-subpage) .home-product-feature img,
body.page-home:not(.page-subpage) .catalog-shelf-card__media img,
body.page-home:not(.page-subpage) .home-product-tail__card img {
  transition: transform 0.9s cubic-bezier(0.23, 1, 0.32, 1);
  will-change: transform;
}

body.page-home:not(.page-subpage) .catalog-atelier__feature-media:hover img,
body.page-home:not(.page-subpage) .catalog-atelier__feature-media:focus-within img,
body.page-home:not(.page-subpage) .home-product-feature:hover img,
body.page-home:not(.page-subpage) .home-product-story:hover img,
body.page-home:not(.page-subpage) .home-product-story:focus-within img,
body.page-home:not(.page-subpage) .catalog-shelf-card:hover img,
body.page-home:not(.page-subpage) .catalog-shelf-card:focus-within img,
body.page-home:not(.page-subpage) .home-product-tail__card:hover img,
body.page-home:not(.page-subpage) .home-product-tail__card:focus-within img {
  transform: scale(1.045);
}

/* Der Verlauf ueber dem Bild zieht beim Hover leicht an — dadurch wirkt die
   Kachel raeumlich, ohne dass sich etwas verschiebt. */
body.page-home:not(.page-subpage) .home-product-story::after,
body.page-home:not(.page-subpage) .home-product-tail__card::after {
  transition: opacity 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

body.page-home:not(.page-subpage) .home-product-story:hover::after,
body.page-home:not(.page-subpage) .home-product-story:focus-within::after,
body.page-home:not(.page-subpage) .home-product-tail__card:hover::after,
body.page-home:not(.page-subpage) .home-product-tail__card:focus-within::after {
  opacity: 0.82;
}

@media (prefers-reduced-motion: reduce) {
  body.page-home:not(.page-subpage) .home-product-story img,
  body.page-home:not(.page-subpage) .home-product-feature img,
  body.page-home:not(.page-subpage) .home-product-tail__card img,
  body.page-home:not(.page-subpage) .catalog-shelf-card__media img,
  body.page-home:not(.page-subpage) .catalog-atelier__feature-media img {
    transition: none;
  }
}

body.page-home:not(.page-subpage) .home-news {
  border-top: 1px solid var(--color-border);
  background: var(--color-surface);
}

body.page-home:not(.page-subpage) .home-section-head--news {
  max-width: 860px;
  margin: 0 auto clamp(1.45rem, 3vw, 2.5rem);
  justify-items: center;
  text-align: center;
}

body.page-home:not(.page-subpage) .home-section-head--news .home-lead {
  max-width: 56ch;
}

body.page-home:not(.page-subpage) .home-news-chips {
  list-style: none;
  margin: clamp(0.42rem, 1vw, 0.7rem) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  justify-content: center;
}

body.page-home:not(.page-subpage) .home-news-chips li {
  padding: 0.46rem 0.88rem;
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  background: var(--color-surface);
  color: var(--color-ink-muted);
  font-size: var(--fs-caption);
  letter-spacing: 0.08em;
  text-transform: none;
  font-weight: 600;
}

body.page-home:not(.page-subpage) .home-news-chips li:first-child {
  background: var(--color-ink);
  border-color: var(--color-ink);
  color: var(--color-surface);
}

body.page-home:not(.page-subpage) .home-carousel {
  --nav-size: 48px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(0.6rem, 1.6vw, 0.95rem);
}

body.page-home:not(.page-subpage) .home-carousel .news-editorial {
  gap: clamp(0.7rem, 1.4vw, 1.1rem);
  padding: 0.3rem 0.1rem 0.8rem;
}

body.page-home:not(.page-subpage) .home-news-track {
  align-items: stretch;
  overflow-y: hidden;
  scroll-behavior: auto;
}

body.page-home:not(.page-subpage) .home-carousel .news-nav {
  width: var(--nav-size);
  height: var(--nav-size);
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 50%;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  background: var(--color-surface);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-ink);
  box-shadow: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
}

body.page-home:not(.page-subpage) .home-carousel .news-nav:hover {
  border-color: rgba(0, 0, 0, 0.15);
  color: var(--color-ink);
  background: var(--color-surface);
  transform: none;
  box-shadow: none;
}

body.page-home:not(.page-subpage) .home-carousel .news-nav:focus-visible {
  border-color: rgba(0, 0, 0, 0.15);
  color: var(--color-ink);
  background: var(--color-surface);
  /* Vorher: outline:none, Ersatz nur ueber die JS-Klasse .user-is-tabbing und
     dann mit 1,45:1. Jetzt der globale Ring aus styles.css, 5,53:1, ohne JS. */
  outline: 3px solid var(--color-accent);
  outline-offset: 3px;
  transform: none;
  box-shadow: none;
}

body.page-home:not(.page-subpage) .home-carousel .news-nav:active {
  border-color: rgba(0, 0, 0, 0.15);
  color: var(--color-ink);
  background: var(--color-surface);
  transform: none;
  box-shadow: none;
}

body.page-home:not(.page-subpage) .home-carousel .news-nav[aria-disabled="true"] {
  opacity: 1;
  border-color: rgba(0, 0, 0, 0.16);
  background: transparent;
  color: rgba(0, 0, 0, 0.22);
  -webkit-text-fill-color: rgba(0, 0, 0, 0.22);
  cursor: default;
  box-shadow: none;
  transform: none;
  transition: opacity 0.2s ease, background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

body.page-home:not(.page-subpage) .home-carousel .news-nav[aria-disabled="true"]:hover,
body.page-home:not(.page-subpage) .home-carousel .news-nav[aria-disabled="true"]:focus-visible {
  opacity: 1;
  border-color: rgba(0, 0, 0, 0.16);
  background: transparent;
  color: rgba(0, 0, 0, 0.22);
  -webkit-text-fill-color: rgba(0, 0, 0, 0.22);
  box-shadow: none;
  transform: none;
}

body.page-home:not(.page-subpage) .home-carousel .news-nav[aria-disabled="true"]:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 3px;
}

body.page-home:not(.page-subpage) .home-news-track > .home-news-card {
  flex: 0 0 100%;
  scroll-snap-align: start;
  border: 0;
  border-radius: 0;
  background: transparent;
  display: grid;
  grid-template-rows: auto 1fr;
  align-self: stretch;
  overflow: visible;
  box-shadow: none;
  transition: transform 0.32s ease, box-shadow 0.32s ease;
}

body.page-home:not(.page-subpage) .home-news-track > .home-news-card:hover,
body.page-home:not(.page-subpage) .home-news-track > .home-news-card:focus-within {
  transform: none;
  box-shadow: none;
}

body.page-home:not(.page-subpage) .home-news-card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-m);
}

body.page-home:not(.page-subpage) .home-news-card[aria-labelledby="home-news-jubilaeum"] img {
  object-position: center 44%;
}

body.page-home:not(.page-subpage) .home-news-card[aria-labelledby="home-news-liebherr"] img {
  object-position: center 35%;
}

body.page-home:not(.page-subpage) .home-news-card[aria-labelledby="home-news-farben"] img {
  object-position: center 80%;
}

body.page-home:not(.page-subpage) .home-news-card__body {
  padding: clamp(1.05rem, 2.1vw, 1.5rem) 0;
  display: grid;
  align-content: start;
  justify-items: start;
  gap: 0.6rem;
}

body.page-home:not(.page-subpage) .home-news-card__copy {
  display: grid;
  gap: 0.6rem;
  width: 100%;
}

body.page-home:not(.page-subpage) .home-news-card__meta {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  font-size: var(--fs-caption);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: none;
  color: var(--color-ink-muted);
  min-height: 2rem;
}

body.page-home:not(.page-subpage) .home-news-card__meta span {
  border: 0;
  background: transparent;
  color: inherit;
  padding: 0;
  line-height: 1;
  white-space: nowrap;
}

body.page-home:not(.page-subpage) .home-news-card__meta time {
  white-space: nowrap;
}

body.page-home:not(.page-subpage) .home-news-card__copy h3 {
  margin: 0;
  font-size: var(--fs-h4);
  line-height: 1.15;
}

body.page-home:not(.page-subpage) .home-news-card__copy > p:not(.home-news-card__meta) {
  margin: 0;
  font-size: var(--fs-body);
  color: var(--color-ink-muted);
}

body.page-home:not(.page-subpage) .home-news-card__body a {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.2rem;
  color: var(--color-ink);
  text-decoration: none;
  font-weight: 600;
  font-size: var(--fs-body);
}

body.page-home:not(.page-subpage) .home-news-card__body a::after {
  content: "\2192";
  transition: transform 0.22s ease;
}

body.page-home:not(.page-subpage) .home-news-card__body a:hover,
body.page-home:not(.page-subpage) .home-news-card__body a:focus-visible {
  text-decoration: none;
}

body.page-home:not(.page-subpage) .home-news-card__body a:hover::after,
body.page-home:not(.page-subpage) .home-news-card__body a:focus-visible::after {
  transform: translateX(3px);
}

body.page-home:not(.page-subpage) .home-partners {
  padding-top: var(--section-pad-top);
  padding-bottom: var(--section-pad);
  border-top: 1px solid var(--color-border);
}

body.page-home:not(.page-subpage) .home-contact {
  border-top: 1px solid var(--color-border);
}

body.page-home:not(.page-subpage) .home-contact-layout {
  display: grid;
  gap: clamp(1.6rem, 3.2vw, 3rem);
  align-items: center;
}

body.page-home:not(.page-subpage) .home-contact-head {
  display: none;
}

body.page-home:not(.page-subpage) .home-contact-copy {
  display: grid;
  gap: clamp(0.8rem, 1.7vw, 1.2rem);
  max-width: 560px;
}

body.page-home:not(.page-subpage) .home-contact-copy-intro {
  display: grid;
  gap: clamp(0.8rem, 1.7vw, 1.2rem);
}

body.page-home:not(.page-subpage) .home-contact-head h2,
body.page-home:not(.page-subpage) .home-contact-copy-intro h2 {
  font-size: var(--fs-h1);
  line-height: 0.95;
  letter-spacing: 0.01em;
  text-transform: none;
}

body.page-home:not(.page-subpage) .home-contact-lead {
  font-size: var(--fs-body-strong);
  max-width: 54ch;
}

body.page-home:not(.page-subpage) .home-contact-list {
  display: grid;
  gap: 0.7rem;
}

body.page-home:not(.page-subpage) .home-contact-list dt {
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0.12em;
  font-size: var(--fs-caption);
  color: var(--color-ink);
  margin-bottom: 0.2rem;
}

body.page-home:not(.page-subpage) .home-contact-list dd {
  margin: 0;
  color: var(--color-ink-muted);
  font-size: var(--fs-body);
}

body.page-home:not(.page-subpage) .home-contact-list a {
  color: var(--color-accent);
  transition: color 0.22s ease-in-out;
}

body.page-home:not(.page-subpage) .home-contact-list a:hover,
body.page-home:not(.page-subpage) .home-contact-list a:focus-visible {
  color: var(--color-accent-hover);
}

body.page-home:not(.page-subpage) .home-contact-image {
  margin: 0;
  border-radius: var(--home-card-radius);
  overflow: hidden;
  border: var(--home-card-border);
}

body.page-home:not(.page-subpage) .home-contact-image img {
  width: 100%;
  height: clamp(340px, 50vw, 620px);
  object-fit: cover;
}

@media (min-width: 760px) {
  body.page-home:not(.page-subpage) .home-news-track > .home-news-card {
    flex: 0 0 calc((100% - 1.1rem) / 2);
    height: 100%;
  }

  body.page-home:not(.page-subpage) .home-news-card__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    height: 100%;
  }

  body.page-home:not(.page-subpage) .home-news-card__copy {
    flex: 1 1 auto;
    align-content: start;
    min-width: 0;
  }

  body.page-home:not(.page-subpage) .home-news-card__body a {
    margin-top: auto;
    white-space: nowrap;
  }
}

@media (min-width: 980px) {
  body.page-home:not(.page-subpage) .home-intro__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    align-items: end;
  }

  body.page-home:not(.page-subpage) .home-contact-layout {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  }

  body.page-home:not(.page-subpage) .home-contact-image {
    order: 1;
  }

  body.page-home:not(.page-subpage) .home-contact-copy {
    order: 2;
  }
}

@media (min-width: 1280px) {
  body.page-home:not(.page-subpage) .home-news-track > .home-news-card {
    flex: 0 0 calc((100% - (2 * 1.1rem)) / 3);
  }
}

@media (min-width: 760px) {
  body.page-home:not(.page-subpage) .catalog-shelf > .catalog-shelf-card {
    grid-column: auto;
    min-width: 0;
  }

  body.page-home:not(.page-subpage) .catalog-shelf > .catalog-shelf-card:nth-last-child(4):nth-child(3n + 1) {
    grid-column: 1;
  }

  body.page-home:not(.page-subpage) .catalog-shelf > .catalog-shelf-card:nth-last-child(4):nth-child(3n + 1) + .catalog-shelf-card {
    grid-column: 2;
  }

  body.page-home:not(.page-subpage) .catalog-shelf > .catalog-shelf-card:nth-last-child(4):nth-child(3n + 1) + .catalog-shelf-card + .catalog-shelf-card {
    grid-column: 1;
  }

  body.page-home:not(.page-subpage) .catalog-shelf > .catalog-shelf-card:nth-last-child(4):nth-child(3n + 1) + .catalog-shelf-card + .catalog-shelf-card + .catalog-shelf-card {
    grid-column: 2;
  }
}

@media (max-width: 1200px) {
  body.page-home:not(.page-subpage) .home-product-tail {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 980px) {
  body.page-home:not(.page-subpage) .home-section {
    padding-top: clamp(3.5rem, 7vw, 4.8rem);
    padding-bottom: clamp(3.5rem, 7vw, 4.8rem);
  }

  body.page-home:not(.page-subpage) .home-section-head {
    gap: 0.85rem;
    margin-bottom: clamp(1.8rem, 3.6vw, 2.6rem);
  }

  body.page-home:not(.page-subpage) .home-intro__grid,
  body.page-home:not(.page-subpage) .home-product-layout,
  body.page-home:not(.page-subpage) .catalog-atelier,
  body.page-home:not(.page-subpage) .home-contact-layout {
    gap: clamp(1.5rem, 3.2vw, 2.2rem);
  }

  body.page-home:not(.page-subpage) .home-steps,
  body.page-home:not(.page-subpage) .home-product-tail,
  body.page-home:not(.page-subpage) .catalog-shelf {
    gap: clamp(0.9rem, 2vw, 1.2rem);
  }

  body.page-home:not(.page-subpage) .home-product-links,
  body.page-home:not(.page-subpage) .home-news-chips {
    gap: 0.65rem;
  }

  body.page-home:not(.page-subpage) .catalog-atelier__feature,
  body.page-home:not(.page-subpage) .home-carousel .news-editorial {
    padding-block: 0.6rem 1rem;
  }

  body.page-home:not(.page-subpage) .home-news-card__body {
    padding-block: 1.2rem;
    gap: 0.75rem;
  }

  body.page-home:not(.page-subpage) .home-contact-list {
    gap: 0.95rem;
  }

  body.page-home:not(.page-subpage) .home-hero-quote__text,
  body.page-home:not(.page-subpage) .home-intro__content h2,
  body.page-home:not(.page-subpage) .home-product-editorial h2,
  body.page-home:not(.page-subpage) .home-section-head--catalog h2,
  body.page-home:not(.page-subpage) .catalog-atelier__feature-copy h3,
  body.page-home:not(.page-subpage) .home-contact-head h2,
  body.page-home:not(.page-subpage) .home-contact-copy-intro h2 {
    line-height: 1.06;
  }

  body.page-home:not(.page-subpage) .home-lead,
  body.page-home:not(.page-subpage) .home-product-editorial .home-lead,
  body.page-home:not(.page-subpage) .home-product-feature__content p,
  body.page-home:not(.page-subpage) .catalog-atelier__feature-copy p,
  body.page-home:not(.page-subpage) .catalog-atelier__points li,
  body.page-home:not(.page-subpage) .home-news-card__body p,
  body.page-home:not(.page-subpage) .home-contact-lead,
  body.page-home:not(.page-subpage) .home-contact-list dd {
    line-height: 1.62;
  }

  body.page-home:not(.page-subpage) .home-product-editorial .home-lead,
  body.page-home:not(.page-subpage) .home-product-feature__content p {
    font-size: var(--fs-body);
  }

  body.page-home:not(.page-subpage) .home-product-layout {
    grid-template-columns: 1fr;
  }

  body.page-home:not(.page-subpage) .home-product-editorial h2 {
    max-width: 100%;
    font-size: var(--fs-h2);
  }

  body.page-home:not(.page-subpage) .home-product-story__content h3,
  body.page-home:not(.page-subpage) .home-news-card__body h3 {
    line-height: 1.16;
  }

  body.page-home:not(.page-subpage) .catalog-atelier {
    grid-template-columns: 1fr;
  }

  body.page-home:not(.page-subpage) .catalog-atelier__feature {
    grid-column: 1 / -1;
    grid-template-columns: 1fr;
    min-height: auto;
  }

  body.page-home:not(.page-subpage) .catalog-atelier__feature-media img {
    aspect-ratio: 3 / 2;
    min-height: 0;
  }

  body.page-home:not(.page-subpage) .catalog-atelier__feature-media {
    max-width: min(460px, 100%);
    margin: 0 auto;
  }

  body.page-home:not(.page-subpage) .home-product-tail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1023px) {
  body.page-home:not(.page-subpage) .home-carousel {
    grid-template-columns: 1fr auto auto 1fr;
    row-gap: 0;
    column-gap: 0.7rem;
    align-items: start;
  }

  body.page-home:not(.page-subpage) .home-carousel .news-editorial {
    grid-column: 1 / -1;
    order: 1;
    padding-bottom: 0;
  }

  body.page-home:not(.page-subpage) .home-news-card__body {
    padding-top: 1.05rem;
    padding-bottom: 0.35rem;
    gap: 0.65rem;
  }

  body.page-home:not(.page-subpage) .home-carousel .news-nav--prev {
    grid-column: 2;
    justify-self: center;
    align-self: start;
    order: 2;
    margin-top: 0.3rem;
  }

  body.page-home:not(.page-subpage) .home-carousel .news-nav--next {
    grid-column: 3;
    justify-self: center;
    align-self: start;
    order: 3;
    margin-top: 0.3rem;
  }
}

@media (max-width: 900px) {
  body.page-home:not(.page-subpage) .home-news-card__meta {
    flex-wrap: nowrap;
    row-gap: 0;
  }
}

@media (min-width: 760px) and (max-width: 1023px) {
  body.page-home:not(.page-subpage) .home-carousel {
    row-gap: clamp(0.9rem, 2vw, 1.2rem);
  }

  body.page-home:not(.page-subpage) .home-carousel .news-nav--prev,
  body.page-home:not(.page-subpage) .home-carousel .news-nav--next {
    margin-top: 0;
  }

  body.page-home:not(.page-subpage) .home-intro__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    align-items: end;
  }

  body.page-home:not(.page-subpage) .home-product-layout {
    grid-template-columns: minmax(0, 0.76fr) minmax(0, 1.24fr);
  }

  body.page-home:not(.page-subpage) .home-product-editorial h2 {
    max-width: 12ch;
  }

  body.page-home:not(.page-subpage) .home-contact-head {
    display: grid;
    max-width: 760px;
  }

  body.page-home:not(.page-subpage) .home-contact-copy-intro {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  body.page-home:not(.page-subpage) .catalog-atelier__feature {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.page-home:not(.page-subpage) .catalog-atelier__feature-media {
    max-width: none;
    margin: 0;
  }

  body.page-home:not(.page-subpage) .home-product-tail {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  body.page-home:not(.page-subpage) .home-contact-layout {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    align-items: stretch;
  }

  body.page-home:not(.page-subpage) .home-contact-image {
    order: 1;
    height: 100%;
  }

  body.page-home:not(.page-subpage) .home-contact-copy {
    order: 2;
  }

  body.page-home:not(.page-subpage) .home-contact-image img {
    height: 100%;
  }
}

@media (min-width: 1024px) and (max-width: 1366px) and (any-pointer: coarse) {
  body.page-home:not(.page-subpage) .home-contact-head {
    display: grid;
    max-width: 760px;
  }

  body.page-home:not(.page-subpage) .home-contact-copy-intro {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  body.page-home:not(.page-subpage) .home-contact-layout {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    align-items: stretch;
  }

  body.page-home:not(.page-subpage) .home-contact-image {
    order: 1;
    height: 100%;
  }

  body.page-home:not(.page-subpage) .home-contact-copy {
    order: 2;
  }

  body.page-home:not(.page-subpage) .home-contact-image img {
    height: 100%;
  }
}

@media (max-width: 759px) {
  body.page-home:not(.page-subpage) .home-section {
    padding-top: clamp(3.2rem, 9vw, 4rem);
    padding-bottom: clamp(3.2rem, 9vw, 4rem);
  }

  body.page-home:not(.page-subpage) .home-news-chips {
    gap: 0.55rem;
  }

  body.page-home:not(.page-subpage) .home-news-chips li {
    font-size: var(--fs-caption);
    letter-spacing: 0.07em;
    padding: 0.58rem 0.95rem;
  }

  body.page-home:not(.page-subpage) .home-product-mosaic {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  }

  body.page-home:not(.page-subpage) .home-product-story--large {
    min-height: clamp(330px, 74vw, 430px);
  }

  body.page-home:not(.page-subpage) .home-product-story--compact {
    min-height: clamp(150px, 30vw, 220px);
  }

  body.page-home:not(.page-subpage) .home-product-story__content h3 {
    font-size: clamp(1.7rem, 5vw, 2.15rem);
    line-height: 1.1;
  }

  body.page-home:not(.page-subpage) .home-news-card__body {
    padding-bottom: 0.9rem;
    gap: 0.9rem;
  }

  body.page-home:not(.page-subpage) .home-carousel .news-nav--prev,
  body.page-home:not(.page-subpage) .home-carousel .news-nav--next {
    margin-top: 0.55rem;
  }

  body.page-home:not(.page-subpage) .catalog-shelf {
    grid-template-columns: 1fr;
  }

  body.page-home:not(.page-subpage) .home-product-tail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  body.page-home:not(.page-subpage) .home-section-head {
    margin-bottom: 1.75rem;
  }

  body.page-home:not(.page-subpage) .home-product-links a,
  body.page-home:not(.page-subpage) .home-product-editorial__cta,
  body.page-home:not(.page-subpage) .home-news-card__body a,
  body.page-home:not(.page-subpage) .catalog-link {
    min-height: 46px;
  }

  body.page-home:not(.page-subpage) .catalog-atelier__feature,
  body.page-home:not(.page-subpage) .home-news-card__body,
  body.page-home:not(.page-subpage) .home-contact-copy {
    gap: 1rem;
  }

  body.page-home:not(.page-subpage) .home-product-editorial h2 {
    font-size: var(--fs-h2);
    line-height: 1.08;
  }

  body.page-home:not(.page-subpage) .home-hero-quote__text,
  body.page-home:not(.page-subpage) .home-section-head--catalog h2,
  body.page-home:not(.page-subpage) .catalog-atelier__feature-copy h3,
  body.page-home:not(.page-subpage) .home-contact-head h2,
  body.page-home:not(.page-subpage) .home-contact-copy-intro h2 {
    line-height: 1.08;
  }

  body.page-home:not(.page-subpage) .home-product-story__content h3 {
    font-size: var(--fs-h3);
    line-height: 1.12;
  }

  body.page-home:not(.page-subpage) .home-news-card__body h3 {
    line-height: 1.2;
  }

  body.page-home:not(.page-subpage) .home-news-card__meta {
    flex-wrap: wrap;
    row-gap: 0.25rem;
  }

  body.page-home:not(.page-subpage) .home-news-card__meta span,
  body.page-home:not(.page-subpage) .home-news-card__meta time {
    white-space: normal;
  }

  body.page-home:not(.page-subpage) .home-product-mosaic {
    grid-template-columns: 1fr;
  }

  body.page-home:not(.page-subpage) .home-product-story--large {
    grid-row: auto;
    min-height: 320px;
  }

  body.page-home:not(.page-subpage) .home-product-story--compact {
    min-height: 210px;
  }

  body.page-home:not(.page-subpage) .catalog-shelf {
    grid-template-columns: 1fr;
  }

  body.page-home:not(.page-subpage) .home-product-tail {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Cinematische Szene auf der Startseite.

   Ein hoher Scroll-Bereich, in dem eine feststehende Bühne liegt. Beim
   Scrollen fährt die Kamera durch das Bild und die Szenen blenden über.
   Bewegt wird ausschließlich `transform` und `opacity` — beides läuft auf
   der Grafikkarte und löst kein Neu-Layout aus.

   Ohne JavaScript bleibt das erste Bild stehen und ist vollständig sichtbar.
   ========================================================================== */
body.page-home:not(.page-subpage) .home-scene {
  --scene-progress: 0;
  position: relative;
  background: #0d0b09;
}

body.page-home:not(.page-subpage) .home-scene__track {
  height: 320vh;
}

body.page-home:not(.page-subpage) .home-scene__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}

body.page-home:not(.page-subpage) .home-scene__frame {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
}

body.page-home:not(.page-subpage) .home-scene__frame.is-first {
  opacity: 1;
}

body.page-home:not(.page-subpage) .home-scene__frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  will-change: transform;
  transform: scale(1.06);
}

/* Verlauf, damit die Bildunterschrift auf jedem Motiv lesbar bleibt. */
body.page-home:not(.page-subpage) .home-scene__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* Traegt den Text: Ohne diesen Verlauf haengt die Lesbarkeit davon ab,
     welcher Bildausschnitt gerade dahinter liegt. */
  background: linear-gradient(
    to top,
    rgba(8, 8, 8, 0.72) 0%,
    rgba(8, 8, 8, 0.56) 18%,
    rgba(8, 8, 8, 0.3) 36%,
    rgba(8, 8, 8, 0.08) 54%,
    rgba(8, 8, 8, 0) 70%
  );
}

/* Sicherheitsnetz gegen genau diese Falle: Jedes Textelement innerhalb der
   Bildunterschrift bekommt die helle Farbe direkt zugewiesen. */

body.page-home:not(.page-subpage) .home-scene__caption {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  z-index: 2;
  width: min(100% - 2.5rem, var(--container-width));
  margin-inline: auto;
  padding-bottom: clamp(2.5rem, 8vh, 5.5rem);
  color: #ffffff;
}

/* Sicherheitsnetz: Jedes Textelement in der Unterschrift bekommt die helle
   Farbe direkt zugewiesen — ausser dem Untertitel, der sein Rot behaelt.
   `p { color: … }` aus styles.css wuerde sonst Schwarz erzwingen. */
body.page-home:not(.page-subpage) .home-scene__caption
  :is(p, h1, h2, h3, h4, span, li, a):not(.home-scene__kicker) {
  color: inherit;
}

body.page-home:not(.page-subpage) .home-scene__kicker {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--color-accent);
  margin: 0 0 0.7rem;
}

body.page-home:not(.page-subpage) .home-scene__title {
  /* Farbe direkt gesetzt: Dieses Element ist ein <p>, und styles.css setzt
     `p { color: … }` direkt — eine direkt gesetzte Farbe schlaegt immer die
     geerbte. Groesse wie alle Sektionsueberschriften (--fs-h2). */
  color: #ffffff;
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  line-height: 1.06;
  letter-spacing: -0.015em;
  margin: 0;
  text-wrap: balance;
}

body.page-home:not(.page-subpage) .home-scene__text {
  /* Gleiche Groesse wie der Fliesztext aller anderen Sektionen. */
  font-size: var(--fs-body-strong);
  max-width: 52ch;
  margin: 0.9rem 0 0;
  color: #ffffff;
}

body.page-home:not(.page-subpage) .home-scene__progress {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  height: 3px;
  width: calc(var(--scene-progress) * 100%);
  background: var(--color-accent);
}

/* Ohne JavaScript: kein hoher Leerraum, nur das erste Bild als Vollbild. */
html.no-js body.page-home:not(.page-subpage) .home-scene__track {
  height: auto;
}

html.no-js body.page-home:not(.page-subpage) .home-scene__stage {
  position: static;
  height: min(80vh, 40rem);
}

html.no-js body.page-home:not(.page-subpage) .home-scene__frame img {
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  /* Keine Fahrt, kein Sticky — die drei Szenen stehen einfach untereinander. */
  body.page-home:not(.page-subpage) .home-scene__track {
    height: auto;
  }

  body.page-home:not(.page-subpage) .home-scene__stage {
    position: static;
    height: auto;
    display: grid;
    gap: 2px;
  }

  body.page-home:not(.page-subpage) .home-scene__frame {
    position: relative;
    inset: auto;
    opacity: 1;
    min-height: min(70vh, 34rem);
  }

  body.page-home:not(.page-subpage) .home-scene__frame img {
    transform: none;
  }

  body.page-home:not(.page-subpage) .home-scene__progress {
    display: none;
  }
}

/* ==========================================================================
   Zahlenband — ruhiger Gegenpol zur dunklen Szene.
   ========================================================================== */
body.page-home:not(.page-subpage) .home-facts__head {
  max-width: 46ch;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

body.page-home:not(.page-subpage) .home-facts__head h2 {
  margin-top: 0.6rem;
}

body.page-home:not(.page-subpage) .home-facts__grid {
  display: grid;
  gap: clamp(2rem, 4vw, 3rem) clamp(1.5rem, 3vw, 3rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
  margin: 0;
}

/* Fünf Kennzahlen nebeneinander am Desktop; auf dem Tablet zwei Spalten. */
@media (min-width: 560px) and (max-width: 1023px) {
  body.page-home:not(.page-subpage) .home-facts__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  body.page-home:not(.page-subpage) .home-facts__grid {
    column-gap: 1.125rem;
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

body.page-home:not(.page-subpage) .home-facts__item {
  border-top: 1px solid rgba(0, 0, 0, 0.14);
  padding-top: clamp(1rem, 2vw, 1.5rem);
}

body.page-home:not(.page-subpage) .home-facts__value {
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 6vw, 4.6rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--color-ink);
  /* Ziffern gleich breit — sonst zappelt die Zahl beim Hochzaehlen. */
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  margin: 0;
}

body.page-home:not(.page-subpage) .home-facts__label {
  margin: 0.7rem 0 0;
  display: grid;
  gap: 0.35rem;
}

body.page-home:not(.page-subpage) .home-facts__label-main {
  font-size: var(--fs-body-strong);
  font-weight: 600;
  color: var(--color-ink);
}

body.page-home:not(.page-subpage) .home-facts__label-hint {
  font-size: var(--fs-small);
  color: var(--color-ink-muted);
  max-width: 34ch;
}

body.page-home:not(.page-subpage) .home-facts__label-phrase {
  display: inline-block;
  max-width: 100%;
  hyphens: none;
}

/* ==========================================================================
   Produktwelten als redaktioneller Index.

   Links eine nummerierte Liste, rechts ein grosses Vorschaubild, das der
   gerade angesteuerten Zeile folgt. Das Muster stammt aus dem Studio-
   Umfeld (grosse Bilder, ruhige Typografie) statt aus dem Kachelraster.
   ========================================================================== */
body.page-home:not(.page-subpage) .home-index__head {
  max-width: 52ch;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

body.page-home:not(.page-subpage) .home-index__head h2 {
  margin-top: 0.6rem;
}

body.page-home:not(.page-subpage) .home-index__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-top: 1.6rem;
  padding: 0.5rem 0 0.45rem;
  /* Keine Linie und keine Unterstreichung — der Verweis ist durch das Rot
     und den Pfeil erkennbar. Beim Zeigen wandert nur der Pfeil weiter. */
  color: var(--color-accent);
  font-size: var(--fs-body);
  font-weight: 600;
  text-decoration: none;
  transition: gap 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

body.page-home:not(.page-subpage) .home-index__cta::after {
  content: "\2192";
}

body.page-home:not(.page-subpage) .home-index__cta:hover,
body.page-home:not(.page-subpage) .home-index__cta:focus-visible {
  gap: 1.1rem;
  text-decoration: none;
}

body.page-home:not(.page-subpage) .home-index__layout {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}

body.page-home:not(.page-subpage) .home-index__list {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: none;
}

body.page-home:not(.page-subpage) .home-index__row {
  border-top: 1px solid rgba(0, 0, 0, 0.14);
}

body.page-home:not(.page-subpage) .home-index__row:last-child {
  border-bottom: 1px solid rgba(0, 0, 0, 0.14);
}

body.page-home:not(.page-subpage) .home-index__link {
  display: grid;
  grid-template-columns: 3.2rem 1fr auto;
  align-items: baseline;
  gap: 0 1rem;
  padding: clamp(0.9rem, 1.8vw, 1.4rem) 0;
  text-decoration: none;
  color: var(--color-ink);
  transition: padding-left 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

body.page-home:not(.page-subpage) .home-index__link:hover,
body.page-home:not(.page-subpage) .home-index__link:focus-visible {
  padding-left: 0.7rem;
}

body.page-home:not(.page-subpage) .home-index__no {
  font-size: var(--fs-caption);
  letter-spacing: 0.14em;
  color: var(--color-ink-muted);
  font-variant-numeric: tabular-nums;
}

body.page-home:not(.page-subpage) .home-index__name {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.6rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
}

body.page-home:not(.page-subpage) .home-index__note {
  grid-column: 2;
  font-size: var(--fs-small);
  color: var(--color-ink-muted);
  margin-top: 0.25rem;
}

body.page-home:not(.page-subpage) .home-index__arrow {
  grid-row: 1 / span 2;
  grid-column: 3;
  align-self: center;
  font-size: 1.2rem;
  color: var(--color-accent);
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 0.45s cubic-bezier(0.23, 1, 0.32, 1),
    transform 0.45s cubic-bezier(0.23, 1, 0.32, 1);
}

body.page-home:not(.page-subpage) .home-index__link:hover .home-index__arrow,
body.page-home:not(.page-subpage) .home-index__link:focus-visible .home-index__arrow {
  opacity: 1;
  transform: translateX(0);
}

/* Das Vorschaubild bleibt beim Scrollen stehen und sitzt dabei senkrecht
   mittig: Die Flaeche reicht von der Unterkante des Menues bis zum unteren
   Bildschirmrand, das Bild wird darin zentriert. Dadurch ist der Abstand
   nach oben und nach unten gleich. */
body.page-home:not(.page-subpage) .home-index__viewer {
  position: sticky;
  top: calc(var(--header-height) + var(--header-offset));
  height: calc(100svh - var(--header-height) - var(--header-offset));
  display: grid;
  align-content: center;
  overflow: visible;
  background: none;
}

body.page-home:not(.page-subpage) .home-index__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  /* Nie hoeher als die verfuegbare Flaeche, sonst waere es nicht mehr mittig. */
  max-height: calc(100svh - var(--header-height) - var(--header-offset) - 3rem);
  margin-inline: auto;
  overflow: hidden;
  border-radius: var(--radius-s);
  background: var(--color-surface-muted);
}

body.page-home:not(.page-subpage) .home-index__shot {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transition: opacity 0.55s cubic-bezier(0.23, 1, 0.32, 1);
}

body.page-home:not(.page-subpage) .home-index__shot.is-active {
  opacity: 1;
}

body.page-home:not(.page-subpage) .home-index img.home-index__image--sofa {
  object-position: center bottom;
}

body.page-home:not(.page-subpage) .home-index__shot img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body.page-home:not(.page-subpage) .home-index__shot img {
  transform: scale(1.04);
  transition: transform 1.2s cubic-bezier(0.23, 1, 0.32, 1);
}

body.page-home:not(.page-subpage) .home-index__shot.is-active img {
  transform: scale(1);
}

/* Kleine Bildspur in der Zeile — nur dort, wo es keinen Hover gibt. */
body.page-home:not(.page-subpage) .home-index__inline {
  display: none;
}

/* Bis einschliesslich iPad Pro hoch (1024 px) gilt die Tablet- und Handy-
   Ansicht: ein Strang, Bild ueber Text. Erst darueber lohnt sich die
   zweispaltige Fassung mit der stehenden Vorschau. */
@media (max-width: 1024px) {
  body.page-home:not(.page-subpage) .home-index__layout {
    grid-template-columns: 1fr;
  }

  /* Ohne Hover bringt eine schwebende Vorschau nichts — jede Zeile
     bekommt stattdessen ihr eigenes Bild. */
  body.page-home:not(.page-subpage) .home-index__viewer {
    display: none;
  }

  /* Am Handy steht in jeder Zeile zuerst das Bild und darunter der Text —
     dieselbe Reihenfolge wie überall sonst auf der Seite. Im Quelltext
     bleibt der Verweis vorn, damit Vorlesegeräte und Tastatur zuerst auf
     den Namen des Wohnbereichs treffen; nur die Anzeige wird gedreht. */
  body.page-home:not(.page-subpage) .home-index__row {
    display: flex;
    flex-direction: column;
  }

  body.page-home:not(.page-subpage) .home-index__inline {
    order: -1;
    display: block;
    overflow: hidden;
    border-radius: var(--radius-s);
    aspect-ratio: 16 / 9;
    margin-top: clamp(0.9rem, 2.5vw, 1.3rem);
  }

  body.page-home:not(.page-subpage) .home-index__inline img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  body.page-home:not(.page-subpage) .home-index__arrow {
    opacity: 1;
    transform: none;
  }
}

/* Auf Tablets (bis iPad Pro hoch, 1024 px) ist eine einzelne Spalte zu breit
   fuer ein 16:9-Bild — die Liste wuerde endlos lang. Deshalb stehen dort
   immer zwei Wohnbereiche nebeneinander. Die Trennlinie sitzt weiterhin ueber
   jeder Kachel; die Schlusslinie entfaellt, weil sie bei ungerader Anzahl nur
   unter der halben Reihe haengen wuerde. */
@media (min-width: 700px) and (max-width: 1024px) {
  body.page-home:not(.page-subpage) .home-index__list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: clamp(1.5rem, 3.5vw, 2.5rem);
  }

  body.page-home:not(.page-subpage) .home-index__row:last-child {
    border-bottom: 0;
  }

  body.page-home:not(.page-subpage) .home-index__inline {
    aspect-ratio: 4 / 3;
  }

  body.page-home:not(.page-subpage) .home-index__name {
    font-size: clamp(1.4rem, 2.4vw, 2rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  body.page-home:not(.page-subpage) .home-index__link,
  body.page-home:not(.page-subpage) .home-index__arrow,
  body.page-home:not(.page-subpage) .home-index__shot,
  body.page-home:not(.page-subpage) .home-index__shot img,
  body.page-home:not(.page-subpage) .home-index__cta {
    transition: none;
  }
}

/* ==========================================================================
   Kataloge und News als angehaltene Leiste.

   Ein hoher Scrollbereich (`__track`), in dem eine feststehende Bühne
   (`__stage`) liegt. Solange die Bühne steht, verschiebt der senkrechte
   Scroll die Kartenreihe waagrecht — drei Karten sind immer gleichzeitig
   im Bild. Bewegt wird ausschließlich `transform`: läuft auf der
   Grafikkarte, löst kein Neu-Layout aus.

   Die Höhe des Scrollbereichs steht nicht fest, sondern kommt aus
   `--reel-scroll`: Das Skript misst, wie weit die Reihe tatsächlich fahren
   muss, und setzt genau diese Strecke. Acht Kataloge bekommen dadurch mehr
   Weg als fünf Meldungen — beide Leisten fahren gleich schnell.

   Ohne JavaScript und bei prefers-reduced-motion greift der Rückfall ganz
   unten: keine Bühne, kein Anhalten, sondern eine gewöhnliche seitlich
   scrollbare Leiste.
   ========================================================================== */
body.page-home:not(.page-subpage) .home-reel {
  --reel-cols: 3;
  --reel-gap: clamp(1rem, 1.8vw, 1.75rem);
  /* Seitenverhältnis der Bildfläche — hochkant, in beiden Leisten. Zweimal
     derselbe Wert, einmal für CSS (`aspect-ratio`) und einmal als Zahl für
     die Rechnung im Skript (Breite = Höhe × Zahl). */
  --reel-ratio: 3 / 4;
  --reel-ratio-num: 0.75;
  /* Ersatzwert. Sobald das Skript gemessen hat, steht hier ein px-Wert. */
  --reel-card: calc(
    (min(var(--container-width), 100vw - 2rem) - (var(--reel-cols) - 1) * var(--reel-gap)) /
      var(--reel-cols)
  );
  --reel-scroll: 120vh;
  --reel-shift: 0px;
  --reel-progress: 0;
  position: relative;
  background: var(--color-surface);
}

/* Ab 1280 px macht der Container auf 1280 px auf (styles.css). Der
   Ersatzwert oben rechnet die Spalte sonst weiter gegen 1200 px, und die
   Reihe endete rechts vierzig Pixel vor ihrer Überschrift. Sichtbar ist das
   nur ohne JavaScript und bei prefers-reduced-motion — sobald das Skript
   misst, kommt die Breite aus dem Innenabstand der Reihe selbst. */
@media (min-width: 1280px) {
  body.page-home:not(.page-subpage) .home-reel {
    --reel-card: calc(
      (min(1280px, 100vw - 2rem) - (var(--reel-cols) - 1) * var(--reel-gap)) / var(--reel-cols)
    );
  }
}

body.page-home:not(.page-subpage) .home-reel__track {
  height: calc(100vh + var(--reel-scroll));
}

body.page-home:not(.page-subpage) .home-reel__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  /* Hält die verschobene Reihe im Bild — ohne diese Zeile bekäme die ganze
     Seite eine waagrechte Bildlaufleiste. */
  overflow: hidden;
  display: flex;
  flex-direction: column;
  /* Was übrig bleibt, liegt über dem Kopf und unter der Fortschrittslinie —
     nicht mehr zwischen den Karten und der Linie.

     Auf einem hohen Fenster (Tablet hochkant, 912 × 1368) deckelt die
     Spaltenbreite die Karte: Sie darf nicht breiter werden als ihre Hälfte
     der Bühne, und hochkant heisst das auch: nicht höher als vier Drittel
     davon. Von 1024 px freier Reihenhöhe brauchte die Karte damit nur 761 —
     die übrigen 263 standen als Loch zwischen der Kartenreihe und ihrer
     Fortschrittslinie. Jetzt ist die Reihe nur noch so hoch wie ihre Karten
     (siehe „Die Reihe“), die Linie schliesst wieder an sie an, und der Rest
     verteilt sich gleichmässig oben und unten. */
  justify-content: center;
  /* Platz für die Kopfleiste, die über der Bühne liegt. */
  padding-top: calc(var(--header-height) + var(--header-offset) + clamp(0.5rem, 2vh, 1.5rem));
  padding-bottom: clamp(1.25rem, 4vh, 2.5rem);
}

/* --- Kopf: Untertitel, Überschrift, Einleitung — linksbündig untereinander.

   Derselbe Aufbau wie .home-section-head (siehe oben, „Unsere Markenpartner“):
   ein linksbündiger Stapel mit gleichem Abstand. Die Einleitung stand früher
   rechts neben der Überschrift; das war der einzige Kopf der Startseite, der
   aus der Reihe fiel. --- */
/* Die Breite begrenzt hier die Einleitung selbst, nicht der Kopf: Der Kopf ist
   zugleich der `container`, und ein max-width auf ihm zöge ihn mitsamt seiner
   Aussenränder in die Mitte — weg von der Kante, an der die Karten stehen. */
body.page-home:not(.page-subpage) .home-reel__head {
  display: grid;
  justify-items: start;
  gap: 0.6rem;
  margin-bottom: clamp(1.1rem, 3vh, 2.25rem);
}

body.page-home:not(.page-subpage) .home-reel__kicker {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--color-accent);
  margin: 0;
}

body.page-home:not(.page-subpage) .home-reel__head h2 {
  /* Größe aus der globalen H2-Regel — wie in jeder anderen Sektion. */
  margin: 0;
  text-wrap: balance;
}

body.page-home:not(.page-subpage) .home-reel__lead {
  color: var(--color-ink-muted);
  font-size: var(--fs-body-strong);
  max-width: 68ch;
  margin: 0;
  text-wrap: pretty;
}

/* --- Die Reihe --- */
body.page-home:not(.page-subpage) .home-reel__rail {
  list-style: none;
  margin: 0;
  /* Der seitliche Einzug ist der des Containers: Die erste Karte steht
     dadurch genau unter dem ersten Buchstaben der Überschrift.

     Als geteilter Wert (`--container-inset`, styles.css) und nicht mehr
     nachgerechnet: Die Rechnung von Hand ging ab 1280 px auseinander, weil
     der Container dort auf 1280 px aufmacht, die Kopie hier aber weiter
     gegen `--container-width` (1200 px) rechnete — die Reihe stand vierzig
     Pixel rechts neben ihrer eigenen Überschrift. */
  padding: 0 var(--container-inset);
  display: flex;
  /* So hoch wie ihre Karten, nicht so hoch wie die Bühne.

     Vorher stand hier `flex: 1`: Die Reihe nahm alles, was die Bühne übrig
     liess, die Karten füllten davon aber nur so viel, wie ihr Hochformat
     hergibt — der Rest blieb als Leerraum unter den Karten stehen, direkt
     über der Fortschrittslinie. Wo die Höhe der Bühne die Karte bestimmt
     (iPad mini, Schreibtisch), ändert sich dadurch nichts; wo die
     Spaltenbreite sie deckelt (Tablet hochkant), schliesst die Linie jetzt
     an die Karten an.

     Die freie Höhe für die Rechnung im Skript kommt seither aus der Bühne
     statt aus dieser Reihe (animations.js, `freieReihenhoehe`) — sie wäre
     hier das Ergebnis der Rechnung und nicht mehr ihre Grundlage. */
  flex: 0 1 auto;
  min-height: 0;
  align-items: stretch;
  gap: var(--reel-gap);
  width: max-content;
  transform: translate3d(var(--reel-shift), 0, 0);
  will-change: transform;
}

body.page-home:not(.page-subpage) .home-reel__item {
  flex: 0 0 var(--reel-card);
  width: var(--reel-card);
  min-width: 0;
  display: flex;
}

body.page-home:not(.page-subpage) .home-reel__card {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 0;
  color: var(--color-ink);
  text-decoration: none;
}

/* --- Bildfläche --- */
body.page-home:not(.page-subpage) .home-reel__media {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  border-radius: var(--radius-s);
}

body.page-home:not(.page-subpage) .home-reel__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

body.page-home:not(.page-subpage) .home-reel__media img {
  transition: transform 0.9s cubic-bezier(0.23, 1, 0.32, 1);
}

/* Formatfüllend statt eingepasst — in beiden Leisten.

   Die Motive kommen in ganz unterschiedlichen Seitenverhältnissen (von 3:2
   quer bis 1024:1432 hoch). Eingepasst hatte deshalb jede Karte eine andere
   Bildgrösse, und um die Motive herum stand unterschiedlich viel Leerraum —
   die Reihe wirkte zusammengewürfelt. Formatfüllend haben alle Karten
   dieselbe geschlossene Bildfläche, und die Titel darunter stehen auf einer
   Linie. */
body.page-home:not(.page-subpage) .home-reel--covers .home-reel__media,
body.page-home:not(.page-subpage) .home-reel--photos .home-reel__media {
  display: block;
  /* Kein grauer Grund mehr: Die Motive stehen direkt auf der Seite. */
  background: none;

  /* Hochkant statt querformatig.

     Vorher nahm die Bildfläche einfach den Rest der Bühnenhöhe ein
     (`flex: 1`). Bei drei Spalten auf einem flachen Fenster kam dabei ein
     liegendes Rechteck heraus — 385 × 274 —, und darin standen Titelseiten
     und Plakate quer angeschnitten. Jetzt gibt das Seitenverhältnis die Höhe
     vor, und die Spaltenbreite richtet sich danach: Das Skript rechnet sie
     aus der Höhe, die auf der Bühne tatsächlich frei ist (animations.js,
     „Kataloge und News als angehaltene Leiste“).

     `flex-shrink: 1` mit `max-height` ist der Notausgang für sehr flache
     Fenster: Dort gibt die Fläche lieber etwas von ihrer Höhe ab, als unten
     aus der Bühne zu laufen und den Titel abzuschneiden. */
  flex: 0 1 auto;
  aspect-ratio: var(--reel-ratio);
  max-height: 100%;
}

/* Angeschnitten wird von unten, nicht von der Mitte aus.

   In beiden Leisten stehen überwiegend Titelseiten und Plakate, und bei denen
   sitzt oben, was die Karte trägt: Magazinkopf, Markenname, Schlagzeile. Bei
   `center` fiele davon die Hälfte weg, weil die Hochformate (bis 1024×1432)
   in einer querformatigen Bildfläche liegen. Mit `top` bleibt der Kopf des
   Motivs stehen, und weggeschnitten wird der Fuss — dort steht in der Regel
   nur Fläche. */
body.page-home:not(.page-subpage) .home-reel--covers .home-reel__media img,
body.page-home:not(.page-subpage) .home-reel--photos .home-reel__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  border: 0;
  border-radius: var(--radius-s);
}

body.page-home:not(.page-subpage) .home-reel__card:hover .home-reel__media img,
body.page-home:not(.page-subpage) .home-reel__card:focus-visible .home-reel__media img {
  transform: scale(1.04);
}

/* --- Textblock unter dem Bild --- */
body.page-home:not(.page-subpage) .home-reel__body {
  flex: 0 0 auto;
  padding-top: clamp(0.85rem, 1.8vh, 1.25rem);
}

/* Titel und Text sind auf zwei Zeilen festgelegt — reserviert, auch wenn der
   Titel nur eine braucht. Ohne diese Festlegung fällt der Textblock bei jeder
   Karte unterschiedlich hoch aus, und weil die Bildfläche den Rest einnimmt,
   endet jedes Bild in der Reihe auf einer anderen Höhe.

   Wichtig dabei: Die reservierte Höhe muss auf den Zeilenwert passen, den
   `-webkit-line-clamp` stehen lässt. Steht dort auch nur eine Spur mehr, wird
   die Höhe nicht etwa leer gelassen — in ihr erscheint der Kopf der nächsten
   Zeile, waagrecht durchgeschnitten. */
body.page-home:not(.page-subpage) .home-reel__title,
body.page-home:not(.page-subpage) .home-reel__text {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

body.page-home:not(.page-subpage) .home-reel__title {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: 400;
  line-height: 1.18;
  /* Genau zwei Zeilen — siehe oben. Den Platz für den Unterstrich der letzten
     Zeile schafft nicht zusätzliche Höhe, sondern der knappere Abstand des
     Strichs weiter unten (`text-underline-offset`). */
  min-height: calc(2 * 1.18em);
  margin: 0;
}

body.page-home:not(.page-subpage) .home-reel__text {
  font-size: var(--fs-small);
  line-height: 1.5;
  min-height: calc(2 * 1.5em);
  color: var(--color-ink-muted);
  margin: 0.5rem 0 0;
}

/* Die zwei Kennzahlen, durch eine Linie vom Titel getrennt. */
body.page-home:not(.page-subpage) .home-reel__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.35rem 1rem;
  margin-top: clamp(0.7rem, 1.5vh, 1.1rem);
  padding-top: clamp(0.6rem, 1.3vh, 0.95rem);
  border-top: 1px solid rgba(0, 0, 0, 0.12);
}

body.page-home:not(.page-subpage) .home-reel__stat {
  display: grid;
  gap: 0.15rem;
  min-width: 0;
}

body.page-home:not(.page-subpage) .home-reel__stat-label {
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--color-ink-muted);
  opacity: 0.7;
}

/* Zwei Zeilen reserviert, auf jeder Fensterbreite.

   Die Karten sind mit dem Hochformat schmaler geworden; ein längerer Wert wie
   „Wohnen & Speisen“ bricht jetzt auch am Schreibtisch um. Dieselbe Falle wie
   beim Titel: Ohne reservierte Zeile stünde die Unterkante jeder Karte anders.
   Die Regel stand bislang nur unter 719 px. */
body.page-home:not(.page-subpage) .home-reel__stat-value {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--color-ink);
  /* Die Kennzahl steht in einer halben Kartenbreite. Ein einzelnes langes Wort
     — „Küchenmagazin“ — passt dort am Telefon in keine Zeile, und weil es
     keine Stelle zum Umbrechen gibt, lief es aus der Spalte und wurde mitten
     im Wort abgeschnitten. Getrennt wird es jetzt nach den Regeln der Sprache
     (das Dokument ist als de-AT ausgezeichnet); notfalls bricht es hart. */
  hyphens: auto;
  overflow-wrap: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.35;
  min-height: calc(2 * 1.35em);
}

/* Hier stand einmal eine zweite rote Linie: Beim Zeigen wuchs sie über die
   Unterkante der Karte — wenige Pixel über der Fortschrittsleiste und in
   derselben Farbe. Nebeneinander lasen sich die beiden als ein
   widersprüchlicher Doppelstrich, der Verschiedenes misst. In einem
   angehaltenen Abschnitt gehört der eine rote Strich der Fortschrittsleiste.
   Das Zeigen quittiert stattdessen der Titel (siehe unten) — auffällig genug,
   und es sagt zugleich, worauf der Verweis führt. */

/* Die globale Regel unterstreicht beim Zeigen jeden Verweis. Auf einer Karte
   soll das nur den Titel treffen, nicht Bild und Kennzahlen. */
body.page-home:not(.page-subpage) a.home-reel__card:hover,
body.page-home:not(.page-subpage) a.home-reel__card:focus-visible {
  color: var(--color-ink);
  text-decoration: none;
}

/* Die Unterstreichung sitzt auf dem inneren <span>, nicht auf der
   Ueberschrift selbst.

   Vorher war bei zweizeiligen Titeln nur die obere Zeile unterstrichen, und
   zwar aus zwei Gruenden zugleich:

   1. Der Strich der zweiten Zeile lag ausserhalb der Ueberschrift. Nachgemessen
      bei 22 px Schriftgroesse: Die Box ist 52,1 px hoch (zwei Zeilen), der
      Strich saesse mit seinem Abstand bei 60,2 px — `overflow: hidden` (oben,
      fuer die Zeilenbegrenzung) hat ihn abgeschnitten. Dagegen hilft die
      zusaetzliche Zeile Platz in `min-height`.
   2. Wo `display: -webkit-box` tatsaechlich greift, nimmt der Kasten
      `text-decoration` ohnehin nur fuer seine erste Zeile an. Das <span> ist
      ein gewoehnliches Inline-Element und traegt den Strich ueber alle Zeilen. */
body.page-home:not(.page-subpage) a.home-reel__card:hover .home-reel__title,
body.page-home:not(.page-subpage) a.home-reel__card:focus-visible .home-reel__title {
  color: var(--color-accent-hover);
}

/* Der Abstand des Strichs ist knapper als sonst auf der Seite (0.28em): Die
   Titelbox ist jetzt genau zwei Zeilen hoch, und der Strich der zweiten Zeile
   muss in den Raum unter der Grundlinie passen, den die Zeile selbst mitbringt.
   Bei 0.28em stünde er darunter und würde weggeschnitten. */
body.page-home:not(.page-subpage) a.home-reel__card:hover .home-reel__title-text,
body.page-home:not(.page-subpage) a.home-reel__card:focus-visible .home-reel__title-text {
  text-decoration: underline;
  text-decoration-thickness: 1.6px;
  text-underline-offset: 0.14em;
}

body.page-home:not(.page-subpage) a.home-reel__card:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 5px;
  border-radius: 2px;
}

/* --- Fortschritt ---

   Der einzige Strich des Abschnitts, und er sagt zweierlei: dass es hier
   seitwärts weitergeht (Hinweis und Pfeil) und wie weit man schon ist (die
   wachsende Linie dazwischen). Eine Haarlinie statt zwei Pixel — sie soll die
   Reihe abschließen, nicht mit ihr um Aufmerksamkeit ringen. */
body.page-home:not(.page-subpage) .home-reel__progress {
  flex: 0 0 auto;
  /* Dieselbe Breite wie der Kopf darüber — der Strich schliesst die Reihe ab
     und endet dort, wo die Überschrift endet. */
  width: var(--container-span);
  margin: clamp(1rem, 2.5vh, 1.75rem) auto 0;
  display: flex;
  align-items: center;
  gap: clamp(0.85rem, 1.6vw, 1.4rem);
}

body.page-home:not(.page-subpage) .home-reel__progress-hint {
  flex: 0 0 auto;
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--color-ink-muted);
  opacity: 0.7;
}

body.page-home:not(.page-subpage) .home-reel__progress-track {
  position: relative;
  flex: 1;
  min-width: 0;
  height: 1px;
  background: rgba(0, 0, 0, 0.14);
}

/* Gestaucht statt in der Breite gerechnet: Eine Verformung läuft im Compositor
   und zwingt bei jedem Scrollschritt kein neues Layout an. */
body.page-home:not(.page-subpage) .home-reel__progress-bar {
  position: absolute;
  inset: 0;
  display: block;
  background: var(--color-accent);
  transform: scaleX(var(--reel-progress));
  transform-origin: left center;
}

body.page-home:not(.page-subpage) .home-reel__progress-arrow {
  flex: 0 0 auto;
  font-size: var(--fs-small);
  line-height: 1;
  color: var(--color-accent);
}

/* --- Die stehende Reihe mit der Maus ziehen ---

   Hier standen bis August 2026 zwei runde Pfeilknöpfe unter der Reihe. Sie
   waren für die Maus gedacht — das Rad scrollt die Seite, und macOS blendet
   die Bildlaufleiste aus, solange nichts scrollt —, aber sie standen nur auf
   flachen Fenstern da: Derselbe Abschnitt trug dort zwei Knöpfe und einen
   Strich, auf jedem anderen Fenster nur den Strich. Nest Hub sah anders aus
   als Nest Hub Max.

   Jetzt zieht man die Reihe stattdessen mit der Maus (animations.js, „Die
   stehende Reihe mit der Maus ziehen“). Das ist dieselbe Bewegung wie mit dem
   Finger, und es bringt nichts mit, was man sehen könnte: Der Abschnitt sieht
   auf jedem Fenster gleich aus. Sichtbar wird es nur am Zeiger — und nur dort,
   wo die Reihe tatsächlich über das Fenster hinausreicht. */
body.page-home:not(.page-subpage) .home-reel[data-reel-scrollbar] .home-reel__rail {
  cursor: grab;
}

/* Mit `[data-reel-scrollbar]` davor, obwohl `[data-reel-greifen]` allein
   genügen würde: Die Rasterung kommt aus dem Rückfall weiter unten, und der
   ist spezifischer. Ohne dieses zusätzliche Merkmal bliebe sie beim Ziehen
   stehen. */
body.page-home:not(.page-subpage)
  .home-reel[data-reel-scrollbar]
  .home-reel__rail[data-reel-greifen] {
  cursor: grabbing;
  /* Während des Ziehens nichts markieren: Sonst bleibt am Ende die halbe
     Kartenüberschrift blau hinterlegt stehen. */
  user-select: none;
  /* Und nicht einrasten, solange die Hand die Reihe hält: Mit Rasterung
     sprang sie beim Ziehen von Karte zu Karte, statt der Maus zu folgen —
     200 px gezogen, und sie stand wieder am Anfang. Beim Loslassen greift die
     Rasterung wieder und die Reihe rückt sich zurecht. */
  scroll-snap-type: none;
}

/* --- Schmalere Fenster: weniger Spalten, sonst gleicher Aufbau --- */
@media (max-width: 1024px) {
  body.page-home:not(.page-subpage) .home-reel {
    --reel-cols: 2;
  }

  /* Ab hier bricht die Überschrift auf zwei Zeilen um. Zusammen mit der
     Einleitung nimmt der Kopf den Karten so viel weg, dass vom Bild ein
     Streifen bleibt — die Bühne ist einen Bildschirm hoch, mehr wird sie
     nicht. Dann trägt die Überschrift den Abschnitt allein. */
  body.page-home:not(.page-subpage) .home-reel__lead {
    display: none;
  }
}

/* Dieselbe Rechnung, nur von der anderen Seite: Auf einem flachen Fenster
   kostet die Einleitung rund siebzig Pixel, die direkt vom Bild abgehen. Die
   Höhe entscheidet hier, nicht die Breite.

   Die Grenze lag bei 760 px und liegt jetzt bei 900 — seit die Bildfläche
   hochkant steht, entscheiden diese siebzig Pixel mehr als vorher. Auf einem
   1280 × 800-Laptop ist es der Unterschied zwischen einer Karte, die ihr
   Seitenverhältnis wirklich erreicht (244 × 325), und einer, die es nicht
   ganz schafft und fast quadratisch endet. Über 900 px bleibt die Einleitung
   stehen; dort ist Platz für beides. */
@media (max-height: 900px) {
  body.page-home:not(.page-subpage) .home-reel__lead {
    display: none;
  }
}

@media (max-width: 719px) {
  body.page-home:not(.page-subpage) .home-reel {
    /* Etwas mehr als eine Karte: Der angeschnittene Rand zeigt, dass es
       seitlich weitergeht. */
    --reel-cols: 1.15;
  }

  /* Die Meldungen tragen lange Titel — „Liebherr Kühl- & Gefriergeräte –
     10 Jahre Herstellergarantie“. Auf einer Karte von rund 300 px braucht der
     längste davon in der Schreibtischgrösse vier Zeilen; zwei davon standen da,
     die dritte zur Hälfte, der Rest fehlte. Eine Spur kleiner passt derselbe
     Titel in drei Zeilen — und drei Zeilen sind hier reserviert, also steht
     jede Meldung vollständig da.

     Die Katalogleiste bleibt bei zwei Zeilen: Dort ist kein Titel länger als
     eine, und reservierte Leerzeilen gingen von der Bildfläche ab. */
  body.page-home:not(.page-subpage) .home-reel--photos .home-reel__title {
    font-size: 1.15rem;
    -webkit-line-clamp: 3;
    min-height: calc(3 * 1.18em);
  }

  /* Die Kennzahlen stehen zu zweit nebeneinander, jede in rund 95 px. Eine
     Spur kleiner, und „August 2026“ passt wieder in eine Zeile, statt getrennt
     zu werden. Lange Einzelwörter („Küchenmagazin“) werden weiterhin getrennt —
     dafür stehen sie vollständig da. */
  body.page-home:not(.page-subpage) .home-reel__stat-value {
    font-size: 0.94rem;
  }

  /* So schmal nimmt der Hinweis der Linie die halbe Breite weg, und der Pfeil
     an ihrem Ende landet genau unter dem schwebenden Anrufknopf. Bleibt die
     Linie allein — auf dem Telefon wischt man ohnehin, statt einen Hinweis zu
     brauchen. */
  body.page-home:not(.page-subpage) .home-reel__progress-hint,
  body.page-home:not(.page-subpage) .home-reel__progress-arrow {
    display: none;
  }
}

/* --- Flache kleine Fenster: die News-Karte bekommt den Zuschnitt der
   Katalogkarte ---

   Ein Tablet oder Klapptelefon im Querformat (Surface Duo 540 × 720, Tablet
   quer) hat nur einen flachen Bildschirm für die ganze Bühne. Von 720 px
   gingen dort ab: Kopfleiste 116, Überschrift 120, Textblock der Karte 229 —
   für die Bildfläche blieben 120 px. So wenig reicht für kein hochkantes Bild,
   und die Leiste verliess deshalb die Bühne und blieb stehen. Die
   Katalogleiste darüber fuhr weiter, weil ihre Karten keinen Fliesstext tragen
   und ihre Überschrift kürzer umbricht — zwei Abschnitte gleicher Bauart, die
   sich unterschiedlich verhielten.

   Hier bekommt die Meldung deshalb denselben Zuschnitt wie der Katalog: Titel,
   darunter die Kennzahlen, kein Fliesstext. Der ganze Wortlaut steht ohnehin
   auf der Unterseite, auf die jede Karte führt. Zusammen mit dem knapperen
   Kopf bleiben 313 px für das Bild — die Karte steht wieder hochkant (236 ×
   313, die Katalogkarte daneben misst 244 × 325), und beide Leisten fahren.

   Der Titel behält seine drei reservierten Zeilen. Zwei hätten eine Spur mehr
   Bildhöhe gebracht (251 × 335), aber „Liebherr Kühl- & Gefriergeräte – 10
   Jahre Herstellergarantie“ endet dann mitten im Wort — die dritte Zeile ist
   die günstigere Ausgabe.

   Nur für flache und zugleich schmale Fenster: Auf einem Laptop (1440 × 780)
   ist die Leiste ohnehin vollständig zu sehen, dort bleibt der Satz stehen. */
@media (max-width: 1024px) and (max-height: 820px) {
  body.page-home:not(.page-subpage) .home-reel--photos .home-reel__text {
    display: none;
  }

  /* Dieselbe Titelgrösse wie auf dem Telefon: Die Karte ist hier ähnlich
     schmal (236–318 px), und „Liebherr Kühl- & Gefriergeräte – 10 Jahre
     Herstellergarantie“ braucht dann drei Zeilen. Mit den zwei reservierten
     Zeilen der Schreibtischgrösse endete er mitten im Wort. */
  body.page-home:not(.page-subpage) .home-reel--photos .home-reel__title {
    font-size: 1.15rem;
    -webkit-line-clamp: 3;
    min-height: calc(3 * 1.18em);
  }

  /* „Aktuelles aus dem Seiner Studio“ bricht in der vollen Grösse auf drei
     Zeilen um und nimmt damit 120 px. Eine Spur kleiner sind es zwei. */
  body.page-home:not(.page-subpage) .home-reel__head h2 {
    font-size: clamp(1.35rem, 4vw, 1.9rem);
  }

  body.page-home:not(.page-subpage) .home-reel__head {
    gap: 0.35rem;
    margin-bottom: 0.9rem;
  }
}

/* --- Sehr flache Fenster: die Karte gibt ab, damit die Leiste fährt ---

   Auf einem Nest Hub (1024 × 600) stand die Leiste bis August 2026 einfach
   da: Der senkrechte Scroll schob sie nicht mehr seitwärts, man musste die
   Reihe selbst wischen. Auf dem iPad daneben fuhr derselbe Abschnitt. Die
   Rechnung dahinter, nachgemessen auf genau diesem Fenster:

     600 px Fenster
     − 116 Platz für die Kopfleiste (Höhe 88 + Abstand)
     −  24 Innenabstand unten
     −  81 Überschrift samt Abstand
     −  40 Fortschrittslinie samt Abstand
     = 339 px für die Reihe
     − 165 Textblock der Karte (Titel + Kennzahlen)
     = 174 px Bildhöhe → 130 px Kartenbreite

   130 px sind eine Briefmarke; unter 200 verlässt die Leiste die Bühne (siehe
   MIN_BREITE in animations.js). Was ihr fehlt, ist nicht Platz auf der Bühne,
   sondern Platz in der Karte: Die beiden Kennzahlen kosten 95 px, der
   Untertitel über der Überschrift 29. Ohne die beiden bleiben 298 px Bild und
   damit 223 px Breite — dieselbe Grössenordnung wie auf einem Nest Hub Max
   (251), und die Leiste fährt wieder mit der Seite.

   Beides ist hier verzichtbar: Der Untertitel wiederholt in einem Wort, was
   die Überschrift daneben ausspricht, und Format und Thema stehen
   vollständig auf der Seite, auf die jede Karte führt.

   Die Grenze bei 700 px ist gerechnet, nicht geschätzt: Mit Kennzahlen reicht
   die Höhe bis hinunter zu 693 px, ohne sie bis 569. Dazwischen liegt genau
   der Bereich, in dem diese Regel den Unterschied macht; darüber ändert sie
   nichts, darunter ist auch damit zu wenig Platz, und die Reihe bleibt
   stehen. */
@media (max-height: 700px) {
  body.page-home:not(.page-subpage) .home-reel__stats,
  body.page-home:not(.page-subpage) .home-reel__kicker {
    display: none;
  }
}

/* ==========================================================================
   Rückfall: ohne JavaScript und bei prefers-reduced-motion.

   Kein hoher Leerraum, keine feststehende Bühne — die Reihe wird zu einer
   gewöhnlichen, seitlich scrollbaren Leiste. Alles bleibt erreichbar, mit
   Trackpad, Touch, Mausrad und Tastatur.
   ========================================================================== */
html.no-js body.page-home:not(.page-subpage) .home-reel,
body.page-home:not(.page-subpage) .home-reel[data-reel-static="true"] {
  padding-block: clamp(3.5rem, 7vw, 6rem);
}

html.no-js body.page-home:not(.page-subpage) .home-reel__track,
body.page-home:not(.page-subpage) .home-reel[data-reel-static="true"] .home-reel__track {
  height: auto;
}

html.no-js body.page-home:not(.page-subpage) .home-reel__stage,
body.page-home:not(.page-subpage) .home-reel[data-reel-static="true"] .home-reel__stage {
  position: static;
  height: auto;
  overflow: visible;
  padding-top: 0;
  padding-bottom: 0;
}

html.no-js body.page-home:not(.page-subpage) .home-reel__rail,
body.page-home:not(.page-subpage) .home-reel[data-reel-static="true"] .home-reel__rail {
  width: auto;
  transform: none;
  will-change: auto;
  flex: 0 0 auto;
  padding-block: 0 1.75rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  /* Derselbe Einzug wie oben im Innenabstand: Ohne ihn rastet die erste Karte
     bündig an der Fensterkante ein statt in der Flucht der Überschrift — die
     Reihe stand nach dem Laden um sechzehn Pixel verrutscht da. */
  scroll-padding-inline: var(--container-inset);
  scrollbar-width: thin;
  scrollbar-color: var(--color-accent) rgba(0, 0, 0, 0.06);
}

html.no-js body.page-home:not(.page-subpage) .home-reel__item,
body.page-home:not(.page-subpage) .home-reel[data-reel-static="true"] .home-reel__item {
  scroll-snap-align: start;
}

/* Ohne feste Bühnenhöhe gibt es keine Höhe, gegen die sich die Fläche wehren
   müsste — hier darf sie ihr Seitenverhältnis ungekürzt behalten. Beide
   Leisten stehen hochkant, wie in der bewegten Fassung. */
html.no-js body.page-home:not(.page-subpage) .home-reel--covers .home-reel__media,
body.page-home:not(.page-subpage) .home-reel--covers[data-reel-static="true"] .home-reel__media,
html.no-js body.page-home:not(.page-subpage) .home-reel--photos .home-reel__media,
body.page-home:not(.page-subpage) .home-reel--photos[data-reel-static="true"] .home-reel__media {
  flex: 0 0 auto;
  aspect-ratio: var(--reel-ratio);
  max-height: none;
}

/* Ohne JavaScript bleibt die Linie weg: Sie misst nichts von selbst, den Stand
   der Reihe trägt dort allein die native Bildlaufleiste. */
html.no-js body.page-home:not(.page-subpage) .home-reel__progress {
  display: none;
}

/* --- Dieselbe Fortschrittslinie auch in der stehenden Reihe ---

   Auf einem flachen Fenster (Nest Hub 1024 × 600, Tablet quer) verlässt die
   Leiste die Bühne. Bis hierher zeigte dann die native Bildlaufleiste, wo man
   steht — ein anderes Bild als auf jedem anderen Fenster, wo der rote Strich
   diese Aufgabe hat. Jetzt ist es in beiden Betriebsarten derselbe Strich; er
   misst nur etwas anderes: dort den Weg der Seite, hier den Seitenscroll der
   Reihe selbst (animations.js, `reihenStand`).

   Nur wo die Reihe tatsächlich breiter ist als das Fenster — `data-reel-scrollbar`
   setzt das Skript genau dann. Passen alle Karten nebeneinander, gäbe es nichts
   zu messen, und eine leere Linie mit „Scrollen zum Entdecken“ verspräche einen
   Weg, den es nicht gibt. */
body.page-home:not(.page-subpage) .home-reel[data-reel-static="true"] .home-reel__progress {
  display: none;
}

body.page-home:not(.page-subpage)
  .home-reel[data-reel-static="true"][data-reel-scrollbar]
  .home-reel__progress {
  display: flex;
}

/* Wo die Linie steht, geht die Bildlaufleiste: Zwei rote Striche kurz
   untereinander, die dasselbe messen, lesen sich als Widerspruch. Ohne sie
   rückt die Linie ausserdem so nah an die Karten wie auf jedem anderen
   Fenster. */
body.page-home:not(.page-subpage)
  .home-reel[data-reel-static="true"][data-reel-scrollbar]
  .home-reel__rail {
  padding-block: 0;
  scrollbar-width: none;
}

body.page-home:not(.page-subpage)
  .home-reel[data-reel-static="true"][data-reel-scrollbar]
  .home-reel__rail::-webkit-scrollbar {
  display: none;
}

body.page-home:not(.page-subpage) .home-reel__rail::-webkit-scrollbar {
  height: 4px;
  -webkit-appearance: none;
}

body.page-home:not(.page-subpage) .home-reel__rail::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.06);
  border-radius: 999px;
}

body.page-home:not(.page-subpage) .home-reel__rail::-webkit-scrollbar-thumb {
  background: var(--color-accent);
  border-radius: 999px;
}

@media (prefers-reduced-motion: reduce) {
  body.page-home:not(.page-subpage) .home-reel {
    padding-block: clamp(3.5rem, 7vw, 6rem);
  }

  body.page-home:not(.page-subpage) .home-reel__track {
    height: auto;
  }

  body.page-home:not(.page-subpage) .home-reel__stage {
    position: static;
    height: auto;
    overflow: visible;
    padding-top: 0;
    padding-bottom: 0;
  }

  body.page-home:not(.page-subpage) .home-reel__rail {
    width: auto;
    transform: none;
    will-change: auto;
    flex: 0 0 auto;
    padding-block: 0 1.75rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: none;
    /* Dieselbe sichtbare Leiste wie im Rückfall oben: Sie ist hier neben den
       Pfeilen der zweite Hinweis, dass es seitwärts weitergeht. */
    scrollbar-width: thin;
    scrollbar-color: var(--color-accent) rgba(0, 0, 0, 0.06);
  }

  body.page-home:not(.page-subpage) .home-reel--covers .home-reel__media,
  body.page-home:not(.page-subpage) .home-reel--photos .home-reel__media {
    flex: 0 0 auto;
    aspect-ratio: var(--reel-ratio);
    max-height: none;
  }

  /* Wie in der stehenden Reihe oben: Der rote Strich zeigt auch hier, wo man
     in der Reihe steht — dafür braucht es keine Bewegung, nur eine Angabe.
     Das Skript läuft bei prefers-reduced-motion weiter (ohne Bühne, ohne
     Schleife) und pflegt ihn mit. Ohne JavaScript bleibt er weg; dann greift
     die Regel unter `html.no-js` weiter oben. */
  body.page-home:not(.page-subpage) .home-reel__progress {
    display: none;
  }

  body.page-home:not(.page-subpage) .home-reel[data-reel-scrollbar] .home-reel__progress {
    display: flex;
  }

  body.page-home:not(.page-subpage) .home-reel[data-reel-scrollbar] .home-reel__rail {
    padding-block: 0;
    scrollbar-width: none;
  }

  body.page-home:not(.page-subpage) .home-reel[data-reel-scrollbar] .home-reel__rail::-webkit-scrollbar {
    display: none;
  }

  body.page-home:not(.page-subpage) .home-reel__media img {
    transition: none;
  }

  body.page-home:not(.page-subpage) .home-reel__card:hover .home-reel__media img {
    transform: none;
  }
}

/* ==========================================================================
   Kontakt als vollflächige Szene.

   Das Schauraum-Foto trägt die Sektion, die Angaben liegen darüber.
   Alle Textfarben sind direkt gesetzt, nicht geerbt — auf dunklem Grund
   würde ein `p { color: … }` aus styles.css sonst wieder Schwarz erzwingen.
   ========================================================================== */
body.page-home:not(.page-subpage) .home-visit {
  position: relative;
  isolation: isolate;
  padding-block: clamp(4rem, 10vw, 8rem);
  background: var(--color-surface);
  overflow: hidden;
}

body.page-home:not(.page-subpage) .home-visit__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}

body.page-home:not(.page-subpage) .home-visit__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
}

/* Weichzeichnung statt scharfem Foto.

   Der Schauraum soll hier Atmosphäre sein, nicht Motiv — scharf gestellt
   konkurriert er mit den Kontaktangaben, die darauf liegen. Der Verlauf
   darunter bleibt unverändert; die Unschärfe kommt oben drauf und kann die
   Lesbarkeit nur verbessern, weil sie die hellen und dunklen Spitzen des
   Fotos einebnet.

   Die Vergrößerung ist Pflicht, nicht Geschmack: filter: blur() zieht die
   Randpixel nach innen, ohne sie ließe ein heller Saum die Sektion an allen
   vier Kanten ausfransen. */
body.page-home:not(.page-subpage) .home-visit__media img {
  filter: blur(clamp(8px, 1.1vw, 16px)) saturate(1.05);
  transform: scale(1.08);
  transform-origin: center 40%;
  will-change: filter;
}

/* Verlauf, damit jede Zeile lesbar bleibt — nicht dem Zufall des
   Bildausschnitts überlassen. */
body.page-home:not(.page-subpage) .home-visit::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Heller Schleier statt dunklem: Das Foto bleibt sichtbar, der Text ist
     dunkel und das Markenrot haelt hier 5,21:1 statt 3,34:1.

     Die Werte sind aus den weichgezeichneten Bildpixeln zurueckgerechnet, nicht
     geschaetzt. Dunkelste Stelle des Fotos liegt bei einer relativen Leuchtdichte
     von 0,006. Darueber braucht
       – das Markenrot (#d40000) rund 0,89 Deckkraft fuer 4,5:1,
       – schwarzer Text nur rund 0,36.
     Links steht die Schaltflaeche "Termin vereinbaren" in Rot, also bleibt es
     dort bei 0,96. Rechts stehen nur schwarze Angaben, deshalb faellt der
     Schleier bis 0,42 ab — genau der Bereich, in dem die Unschaerfe als
     Stimmung sichtbar wird. Vorher lag er dort bei 0,72 und deckte das Foto
     praktisch zu.

     Nachgemessen am fertig zusammengesetzten Bild (Foto + Weichzeichnung +
     Verlauf), jeweils die dunkelste Stelle unter dem Element:
       Schaltflaeche rot 5,06:1 · Ueberschrift 15,3:1 · Fliesstext 13,3:1 ·
       Kontaktzeilen 5,4:1. Alle ueber den 4,5:1 aus WCAG 1.4.3. */
  background:
    linear-gradient(to right, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.94) 22%, rgba(255, 255, 255, 0.66) 55%, rgba(255, 255, 255, 0.42) 100%);
}

body.page-home:not(.page-subpage) .home-visit__inner {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: start;
}

body.page-home:not(.page-subpage) .home-visit__kicker {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--color-accent);
  margin: 0 0 1rem;
}

body.page-home:not(.page-subpage) .home-visit__copy h2 {
  color: var(--color-ink);
  /* Groesse und Laufweite kommen aus der globalen H2-Regel, damit alle
     Sektionsueberschriften identisch sind. Hier nur die Farbe. */
  margin: 0 0 1.2rem;
}

body.page-home:not(.page-subpage) .home-visit__lead {
  color: var(--color-ink-muted);
  font-size: var(--fs-body-strong);
  max-width: 46ch;
  margin: 0 0 2rem;
}

body.page-home:not(.page-subpage) .home-visit__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0 0.5rem;
  color: var(--color-accent);
  font-size: var(--fs-body);
  font-weight: 600;
  text-decoration: none;
  transition: gap 0.45s cubic-bezier(0.23, 1, 0.32, 1);
}

body.page-home:not(.page-subpage) .home-visit__cta::after {
  content: "\2192";
}

body.page-home:not(.page-subpage) .home-visit__cta:hover,
body.page-home:not(.page-subpage) .home-visit__cta:focus-visible {
  gap: 1.2rem;
  text-decoration: none;
}

body.page-home:not(.page-subpage) .home-visit__facts {
  margin: 0;
  display: grid;
}

body.page-home:not(.page-subpage) .home-visit__row {
  display: grid;
  grid-template-columns: 9.5rem 1fr;
  gap: 1rem;
  padding: clamp(0.9rem, 2vw, 1.3rem) 0;
  border-top: 1px solid rgba(0, 0, 0, 0.14);
}

body.page-home:not(.page-subpage) .home-visit__row:last-child {
  border-bottom: 1px solid rgba(0, 0, 0, 0.14);
}

body.page-home:not(.page-subpage) .home-visit__row dt {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--color-ink-muted);
}

body.page-home:not(.page-subpage) .home-visit__row dd {
  margin: 0;
  color: var(--color-ink);
  font-size: var(--fs-body);
  line-height: 1.5;
}

/* Hier stand eine Unterstreichung, die keine war: ein border-bottom. Optisch
   nicht zu unterscheiden, aber ausserhalb der Regel fuer Verweise — deshalb
   waren Telefonnummer und E-Mail im Abschnitt "Besuch" als einzige auf der
   Website dauerhaft unterstrichen. Jetzt gilt auch hier: im Ruhezustand
   nichts, beim Darueberfahren rot und unterstrichen. */
body.page-home:not(.page-subpage) .home-visit__row dd a {
  color: var(--color-ink);
  text-decoration: none;
  border-bottom: 0;
}

body.page-home:not(.page-subpage) .home-visit__row dd a:hover,
body.page-home:not(.page-subpage) .home-visit__row dd a:focus-visible {
  color: var(--color-accent);
  text-decoration: underline;
  text-decoration-thickness: 1.6px;
  text-underline-offset: 0.28em;
}

@media (max-width: 900px) {
  body.page-home:not(.page-subpage) .home-visit__inner {
    grid-template-columns: 1fr;
  }

  body.page-home:not(.page-subpage) .home-visit__row {
    grid-template-columns: 1fr;
    gap: 0.3rem;
  }

  /* Gestapelt laeuft der Verlauf nach unten: oben die Ueberschrift und der rote
     Link, unten nur schwarze Angaben — dort darf das Foto durchkommen. */
  body.page-home:not(.page-subpage) .home-visit::before {
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.92) 45%, rgba(255, 255, 255, 0.58) 100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  body.page-home:not(.page-subpage) .home-visit__cta {
    transition: none;
  }
}

/* ==========================================================================
   Partnerlogos als seitlich scrollbare Leiste.

   Vorher lief das Band automatisch und brauchte deshalb zwingend einen
   Pause-Knopf (WCAG 2.2.2, Stufe A). Ohne Selbstlauf entfällt diese Pflicht —
   und die Leiste verhält sich wie News und Kataloge: scrollen, Randauslauf,
   rote Scrollleiste.
   ========================================================================== */
body.page-home:not(.page-subpage) .home-partners {
  background: var(--color-surface);
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  padding-block: clamp(3.5rem, 7vw, 6rem);
}

body.page-home:not(.page-subpage) .home-partners .home-section-head {
  max-width: 52ch;
  margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem);
}