/* ==========================================================================
   Klee Immoconcept – Objektseite (Template)
   Mobile First · Breakpoints 390 / 768 / 1280
   Alle Klassen mit Präfix "klee-" (WordPress/Elementor-tauglich).
   Jede Sektion ist ein eigenständiger Block.
   Motion siehe Abschnitt 15 am Ende der Datei.
   ========================================================================== */

/* ==========================================================================
   00 – Basis
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body.klee-page {
  margin: 0;
  padding: 0;
  background: var(--surface-page);
  font-family: var(--font-sans);
  color: var(--text-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.klee-page img {
  max-width: 100%;
}

/* Nur Textlinks – Buttons bringen ihre eigene Farbe mit. */
.klee-page a:not(.klee-cta) {
  color: var(--klee-green-deep);
}

/* Nur für Screenreader */
.klee-u-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Sichtbarkeits-Utilities für Beschriftungen, die sich zwischen den
   gelieferten Screens unterscheiden (z.B. Kurz-/Langform der CTA-Labels). */
.klee-u-wide-only {
  display: none;
}

.klee-u-narrow-only {
  display: inline;
}

/* ==========================================================================
   01 – Layout-Grundgerüst
   ========================================================================== */

.klee-section {
  padding: 56px var(--klee-gutter) 60px;
}

.klee-section--dark {
  background: var(--klee-green-deep);
  color: var(--klee-white);
}

.klee-section--light {
  background: var(--surface-page);
  color: var(--text-body);
}

.klee-container {
  width: 100%;
  max-width: var(--klee-container);
  margin: 0 auto;
}

.klee-container--narrow {
  max-width: 900px;
}

.klee-container--table {
  max-width: 760px;
}

/* Reset für alle Listen, die als reine Layout-Container dienen */
.klee-feature-list,
.klee-units__list,
.klee-benefits__list,
.klee-accordion,
.klee-accordion__list,
.klee-partners__list,
.klee-trust {
  margin: 0;
  padding: 0;
  list-style: none;
}

.klee-accordion__heading {
  margin: 0;
  font: inherit;
}

@media (min-width: 768px) {
  .klee-section {
    padding: 72px var(--klee-gutter) 80px;
  }
}

@media (min-width: 1280px) {
  .klee-section {
    padding: 90px var(--klee-gutter) 100px;
  }
}

/* ==========================================================================
   02 – Wiederkehrende Bausteine
   ========================================================================== */

/* --- Eyebrow ------------------------------------------------------------ */
.klee-eyebrow {
  margin: 0;
  font-weight: var(--weight-medium);
  font-size: 15px;
  line-height: 1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--klee-text-muted);
}

/* Leere Kopfzeile verschwindet samt ihrem Abstand. So lässt sich die Zeile
   pro Sektion allein über die Datendatei weglassen, ohne das Template
   anzufassen. */
.klee-eyebrow:empty {
  display: none;
}

.klee-eyebrow--dark {
  color: rgba(255, 255, 255, 0.75);
}

.klee-eyebrow--on-lime {
  color: rgba(40, 67, 61, 0.6);
}

.klee-eyebrow--center {
  text-align: center;
}

/* --- Section-Headline --------------------------------------------------- */
.klee-heading {
  margin: 14px 0 30px;
  font-weight: var(--weight-medium);
  font-size: 28px;
  line-height: 1.12;
  letter-spacing: -0.015em;
  text-wrap: balance;
  color: var(--klee-text-dark);
}

.klee-heading--dark {
  color: var(--klee-white);
}

.klee-heading--left {
  text-align: left;
}

.klee-heading--center {
  text-align: center;
}

@media (min-width: 768px) {
  .klee-heading {
    margin: 18px 0 48px;
    font-size: 38px;
  }
}

@media (min-width: 1280px) {
  .klee-heading {
    margin: 22px 0 72px;
    font-size: 52px;
  }
}

/* --- CTA-Button --------------------------------------------------------- */
.klee-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 15px 30px;
  border: 0;
  border-radius: var(--radius-pill-web);
  font-family: inherit;
  font-weight: var(--weight-semibold);
  font-size: 15.5px;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  background: var(--klee-web-lime);
  color: var(--klee-green-deep);
  transition:
    transform var(--klee-duration-press) var(--klee-ease-out),
    filter var(--klee-duration-press) var(--klee-ease-out);
}

/* Press-Feedback: Wert aus dem gelieferten Design-System (scale 0.98). */
.klee-cta:active {
  transform: scale(0.98);
}

/* Nur für echte Zeigegeräte: Touch löst beim Tap einen Falsch-Hover aus,
   der nach dem Loslassen kleben bleibt. */
@media (hover: hover) and (pointer: fine) {
  .klee-cta:hover {
    filter: brightness(0.95);
  }
}

/* Reduced Motion: Bewegung entfällt, die Helligkeitsrückmeldung bleibt.
   Der Nutzer verliert die Skalierung, nicht die Rückmeldung. */
@media (prefers-reduced-motion: reduce) {
  .klee-cta {
    transition: filter var(--klee-duration-press) var(--klee-ease-out);
  }

  .klee-cta:active {
    transform: none;
  }
}

.klee-cta--sm {
  padding: 13px 26px;
  font-size: 14.5px;
}

.klee-cta--lg {
  padding: 18px 34px;
  font-size: 17px;
}

.klee-cta--dark {
  background: var(--klee-green-deep);
  color: var(--klee-web-lime);
}

/* Auf Mobile spannen die Inline-CTAs über die volle Breite (Screen 390). */
.klee-cta--block {
  display: flex;
  width: 100%;
}

@media (min-width: 768px) {
  .klee-cta--block {
    display: inline-flex;
    width: auto;
  }
}

/* --- Weiße Karte -------------------------------------------------------- */
.klee-card {
  background: var(--surface-card-light);
  border-radius: var(--radius-card-web);
  box-shadow: var(--klee-card-shadow);
}

/* --- Merkmal-Zeile (lime Punkt + Text) ---------------------------------- */
.klee-feature-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.klee-feature-line {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  font-size: 16px;
  line-height: 1.5;
  color: var(--klee-text-muted);
}

/* Häkchen ersetzt den früheren Punkt – entspricht den ✅ der Inhaltsvorlage. */
.klee-check {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin-top: 2px;
  border-radius: 50%;
  background: var(--klee-web-lime);
  color: var(--klee-green-deep);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.klee-check svg {
  width: 13px;
  height: 13px;
  display: block;
}

@media (min-width: 768px) {
  .klee-feature-line {
    font-size: 17.5px;
  }
}

/* --- Kennzahlen-Tabelle ------------------------------------------------- */
.klee-figure-table {
  padding: 24px;
  box-sizing: border-box;
}

/* Mobile: volle Breite, die Bezeichnung darf umbrechen – sonst passt die
   Tabelle nicht in die Karte. Ab 768px schrumpft sie auf ihren Inhalt und
   wird zentriert, damit Bezeichnung und Wert eng beieinander stehen statt
   über die volle Kartenbreite auseinandergezogen zu werden. */
.klee-figure-table__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  color: var(--klee-text-dark);
}

.klee-figure-table__table th {
  padding: 0 10px 14px;
  text-align: right;
  font-weight: var(--weight-semibold);
  font-size: 14.5px;
  color: var(--klee-text-muted);
}

.klee-figure-table__table th:first-child {
  text-align: left;
}

/* Ohne sichtbare Kopfzeile bleibt der Abstand der Vorlage erhalten. */
.klee-figure-table--headless .klee-figure-table__table {
  margin-top: 14px;
}

.klee-figure-table__table td {
  padding: 13px 0;
  text-align: right;
  border-top: 1px solid var(--klee-page-border);
}

.klee-figure-table__table td:first-child {
  padding-right: 16px;
  text-align: left;
  font-weight: var(--weight-semibold);
}

.klee-figure-table__row--highlight {
  background: var(--klee-web-lime);
}

/* Die lime hinterlegte Zeile braucht seitlich etwas Luft zum Rand. */
.klee-figure-table__row--highlight td:first-child {
  padding-left: 12px;
  border-radius: 8px 0 0 8px;
}

.klee-figure-table__row--highlight td:last-child {
  padding-right: 12px;
  border-radius: 0 8px 8px 0;
}

@media (min-width: 768px) {
  /* Jetzt ist Platz: Tabelle auf Inhaltsbreite, Wert bricht nicht mehr um. */
  .klee-figure-table__table {
    width: auto;
    max-width: 100%;
    margin: 0 auto;
  }

  .klee-figure-table__table td {
    white-space: nowrap;
  }

  .klee-figure-table__table td:first-child {
    padding-right: 32px;
    white-space: normal;
  }
}

.klee-figure-table__row--highlight td {
  font-weight: var(--weight-semibold);
}

.klee-figure-table__note {
  margin: 16px 0 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--klee-text-muted);
}

@media (min-width: 768px) {
  .klee-figure-table {
    padding: 30px;
  }

  .klee-figure-table__table {
    font-size: 16.5px;
  }
}

/* --- Aufklappbare Karte (Lage-Kategorien und FAQ) ----------------------- */
.klee-accordion {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.klee-accordion__item {
  padding: 2px 20px;
}

.klee-accordion__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 17px 0;
  border: 0;
  background: none;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  font-weight: var(--weight-semibold);
  font-size: 17px;
  line-height: 1.3;
  color: var(--klee-text-dark);
}

.klee-accordion__sign {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--klee-web-lime);
  color: var(--klee-green-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: var(--weight-bold);
  line-height: 1;
}

.klee-accordion__sign::before {
  content: '+';
}

.klee-accordion__trigger[aria-expanded='true'] .klee-accordion__sign::before {
  content: '\2212'; /* − */
}

/* Auf-/Zuklappen über grid-template-rows 0fr -> 1fr.
   Bewusst eine Transition und keine Keyframes: Beim schnellen Umschalten
   innerhalb der exklusiven Lage-Gruppe läuft sie vom aktuellen Wert weiter,
   statt bei null neu zu starten.
   Tradeoff: Das animiert Layout pro Frame, ist also nicht GPU-only. Für ein
   Höhen-Reveal gibt es keine reine transform/opacity-Lösung; bei neun
   Elementen, von denen je eines offen ist, ist das vertretbar.
   visibility nimmt den zugeklappten Inhalt aus Tab-Reihenfolge und
   Screenreader-Baum — beim Öffnen sofort, beim Schließen erst am Ende. */
.klee-accordion__panel {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  opacity: 0;
  transition:
    grid-template-rows var(--klee-duration-panel) var(--klee-ease-drawer),
    opacity var(--klee-duration-panel) var(--klee-ease-out),
    visibility 0s linear var(--klee-duration-panel);
}

/* Eigener Wrapper, der clippt. Das Padding muss am Inhalt *innerhalb* dieses
   Elements sitzen — Padding am geclippten Element selbst bliebe im
   zugeklappten Zustand als Resthöhe stehen (min-height wirkt nur auf die
   Content-Box, nicht auf Padding). */
.klee-accordion__panel-inner {
  overflow: hidden;
  min-height: 0;
}

.klee-accordion__item[data-open='true'] .klee-accordion__panel {
  grid-template-rows: 1fr;
  visibility: visible;
  opacity: 1;
  transition:
    grid-template-rows var(--klee-duration-panel) var(--klee-ease-drawer),
    opacity var(--klee-duration-panel) var(--klee-ease-out),
    visibility 0s;
}

/* Reduced Motion: die Höhenbewegung entfällt, die Ein-/Ausblendung bleibt
   als Orientierungshilfe erhalten. */
@media (prefers-reduced-motion: reduce) {
  .klee-accordion__panel {
    transition:
      opacity var(--klee-duration-press) var(--klee-ease-out),
      visibility 0s linear var(--klee-duration-press);
  }

  .klee-accordion__item[data-open='true'] .klee-accordion__panel {
    transition:
      opacity var(--klee-duration-press) var(--klee-ease-out),
      visibility 0s;
  }
}

/* Panel-Variante: Liste mit Punkten (Lage) */
.klee-accordion__list {
  margin: 0;
  padding: 2px 0 20px;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.klee-accordion__entry {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 15px;
  line-height: 1.55;
  color: var(--klee-text-muted);
}

.klee-accordion__entry::before {
  content: '';
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  margin-top: 8px;
  border-radius: 50%;
  background: var(--klee-web-lime);
  outline: 1px solid rgba(40, 67, 61, 0.25);
}

/* Panel-Variante: Fließtext (FAQ) */
.klee-accordion__answer {
  margin: 0;
  padding: 0 0 20px;
  max-width: 760px;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--klee-text-muted);
}

@media (min-width: 1280px) {
  .klee-accordion {
    gap: 14px;
  }

  .klee-accordion__item {
    padding: 4px 28px;
  }

  .klee-accordion__trigger {
    gap: 20px;
    padding: 20px 0;
    font-size: 19px;
  }

  .klee-accordion__sign {
    width: 30px;
    height: 30px;
    font-size: 19px;
  }

  .klee-accordion__list {
    padding: 2px 0 24px;
    gap: 12px;
  }

  .klee-accordion__entry {
    gap: 13px;
    font-size: 16.5px;
  }

  .klee-accordion__entry::before {
    width: 9px;
    height: 9px;
  }

  .klee-accordion__answer {
    padding: 0 0 22px;
    font-size: 17px;
  }
}

/* --- Trust-Badges ------------------------------------------------------- */
.klee-trust {
  display: flex;
  align-items: center;
  gap: 22px;
  opacity: 0.92;
}

.klee-trust__badge {
  height: 24px;
  width: auto;
}

@media (min-width: 1280px) {
  .klee-trust {
    gap: 28px;
  }

  .klee-trust__badge {
    height: 30px;
  }
}

/* --- Partner-Reihe ------------------------------------------------------ */
.klee-partners {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: flex-start;
}

.klee-partners__title {
  margin: 0;
  font-weight: var(--weight-medium);
  font-size: 14px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.8);
}

.klee-partners__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 18px 24px;
  align-items: center;
}

.klee-partners__item {
  display: inline-flex;
  align-items: center;
  font-weight: var(--weight-semibold);
  font-size: 18px;
  color: rgba(255, 255, 255, 0.8);
  opacity: 0.8;
}

/* Weißer Chip, sobald ein Logo geladen ist.
   Grund: Alle gelieferten Bank-Logos sind für weißen Grund gezeichnet – in
   Originalfarbe (schwarz bzw. blau) wären sie auf dem Dunkelgrün unlesbar.
   Sie stattdessen weiß einzufärben scheitert bei Volksbank und Schwäbisch
   Hall: Deren Logos enthalten eine gefüllte Farbfläche, aus der dabei ein
   weißer Kasten würde. Der Chip löst beides und lässt die Markenfarben
   unangetastet – was Bank-Markenrichtlinien ohnehin verlangen. */
.klee-partners__item--logo {
  background: var(--klee-card);
  border-radius: var(--radius-badge);
  padding: 10px 14px;
  opacity: 1;
}

/* Logos werden weiß eingefärbt, damit farbige Bankmarken auf dem dunklen
   Grund einheitlich wirken. Fehlt eine Datei, bleibt der Name als Text.

   Feste Box statt fester Höhe: Die Seitenverhältnisse reichen von 2,9:1
   (Sparkasse) bis 7,6:1 (Schwäbisch Hall). Bei reiner Höhenvorgabe wäre das
   breiteste Logo fast dreimal so breit wie das schmalste. object-fit:contain
   passt jedes Logo in ein gleich großes Feld ein. */
.klee-partners__logo {
  width: 104px;
  height: 24px;
  object-fit: contain;
  object-position: center;
  display: block;
}

.klee-partners__logo[hidden],
.klee-partners__name[hidden] {
  display: none;
}

@media (min-width: 1280px) {
  .klee-partners {
    align-items: center;
  }

  .klee-partners__list {
    justify-content: center;
    gap: 24px 36px;
  }

  .klee-partners__item {
    font-size: 20px;
  }

  .klee-partners__logo {
    width: 124px;
    height: 30px;
  }
}

/* ==========================================================================
   03 – Header
   ========================================================================== */

.klee-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px var(--klee-gutter);
  background: var(--klee-green-deep);
}

.klee-header__logo {
  height: 26px;
  width: auto;
  display: block;
}

@media (min-width: 768px) {
  .klee-header {
    padding: 18px var(--klee-gutter);
  }

  .klee-header__logo {
    height: 34px;
  }

  .klee-u-wide-only {
    display: inline;
  }

  .klee-u-narrow-only {
    display: none;
  }
}

/* ==========================================================================
   04 – Sektion 1: Hero
   ========================================================================== */

.klee-hero {
  position: relative;
  overflow: hidden;
  padding: 64px var(--klee-gutter) 48px;
  color: var(--klee-white);
}

.klee-hero__media,
.klee-hero__scrim {
  position: absolute;
  inset: 0;
}

.klee-hero__media {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.klee-hero__scrim {
  background: var(--klee-hero-scrim);
}

.klee-hero__inner {
  position: relative;
  width: 100%;
  max-width: var(--klee-container);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
}

.klee-hero__badge {
  display: inline-flex;
  align-items: center;
  padding: 8px 18px;
  border-radius: var(--radius-pill-web);
  border: 1px solid rgba(192, 245, 144, 0.5);
  color: var(--klee-lime);
  font-size: 13.5px;
  font-weight: var(--weight-medium);
  letter-spacing: 0.02em;
}

.klee-hero__title {
  margin: 0;
  font-weight: var(--weight-medium);
  font-size: 32px;
  line-height: 1.14;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.klee-hero__title-accent {
  display: block;
  color: var(--klee-lime);
}

.klee-hero__subline {
  margin: 0;
  font-size: 16.5px;
  font-weight: var(--weight-light);
  line-height: 1.45;
  opacity: 0.9;
}

.klee-hero__actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  align-self: stretch;
  gap: 18px;
}

@media (min-width: 768px) {
  .klee-hero {
    padding: 100px var(--klee-gutter) 84px;
  }

  .klee-hero__inner {
    gap: 22px;
  }

  .klee-hero__badge {
    padding: 10px 22px;
    font-size: 15px;
  }

  .klee-hero__title {
    max-width: 860px;
    font-size: 44px;
    line-height: 1.1;
    letter-spacing: -0.02em;
  }

  .klee-hero__subline {
    font-size: 20px;
  }

  .klee-hero__actions {
    flex-direction: row;
    align-items: center;
    align-self: flex-start;
    flex-wrap: wrap;
    gap: 36px;
    margin-top: 14px;
  }
}

@media (min-width: 1280px) {
  .klee-hero {
    padding: 130px var(--klee-gutter) 110px;
  }

  .klee-hero__inner {
    gap: 26px;
  }

  .klee-hero__title {
    font-size: 58px;
  }

  .klee-hero__subline {
    font-size: 23px;
  }
}

/* ==========================================================================
   05 – Sektion 2: Geschichte
   ========================================================================== */

.klee-story__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 26px;
  align-items: center;
}

.klee-story__heading {
  margin-bottom: 0;
}

.klee-story__text p {
  margin: 14px 0 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--klee-text-muted);
}

.klee-story__text p:first-of-type {
  margin-top: 0;
}

.klee-story__emphasis {
  font-weight: var(--weight-semibold);
  color: var(--klee-text-dark);
}

.klee-story__media {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.klee-story__image {
  width: 100%;
  height: 210px;
  object-fit: cover;
  border-radius: var(--radius-card-web);
  display: block;
}

.klee-story__features {
  margin-top: 28px;
}

@media (min-width: 768px) {
  .klee-story__grid {
    grid-template-columns: 1.05fr 1fr;
    gap: 40px;
  }

  .klee-story__text p {
    font-size: 17.5px;
    margin-top: 18px;
  }

  .klee-story__image {
    height: 240px;
  }

  .klee-story__features {
    margin-top: 48px;
  }

  .klee-story__features .klee-feature-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px 40px;
  }
}

@media (min-width: 1280px) {
  .klee-story__grid {
    gap: 60px;
  }

  .klee-story__text p {
    margin-top: 18px;
  }

  .klee-story__text p:first-of-type {
    margin-top: 26px;
  }

  .klee-story__features {
    margin-top: 56px;
  }

  .klee-story__features .klee-feature-list {
    gap: 18px 48px;
  }
}

/* ==========================================================================
   05b – Sektion 2b: Bildband vor dem Umbau

   Endlosband. Der Streifen enthält alle Bilder zweimal und wandert um genau
   seine halbe Breite – in dem Moment steht die Kopie exakt dort, wo das
   Original begonnen hat, und der Sprung zurück auf null ist unsichtbar.

   Damit die halbe Breite stimmt, trägt JEDES Element denselben rechten
   Abstand, auch das letzte. Mit "gap" fehlte der letzte Abstand und das Band
   würde bei jeder Runde um einen halben Abstand versetzt springen.

   Bewegt wird ausschließlich transform, also auf der GPU und nicht im
   Layout. Zeitkurve linear, weil gleichförmige Bewegung weder beschleunigen
   noch abbremsen darf.
   ========================================================================== */

.klee-gallery__viewport {
  /* Aus dem Container ausbrechen, volle Fensterbreite.
     Bewusst über margin und NICHT über transform: translateX(-50%).
     Dieses Element trägt data-klee-reveal, und dessen Regel setzt beim
     Einblenden transform: none – das würde eine Zentrierung per transform
     wieder auslöschen. Außenabstände sind davon unberührt. */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-top: 32px;
  overflow: hidden;

  /* an beiden Rändern weich ausblenden, damit das Band nicht hart
     abgeschnitten wirkt, sondern aus dem Nichts kommt und ins Nichts läuft */
  -webkit-mask-image: linear-gradient(90deg,
    transparent 0, #000 6%, #000 94%, transparent 100%);
          mask-image: linear-gradient(90deg,
    transparent 0, #000 6%, #000 94%, transparent 100%);
}

.klee-gallery__track {
  --klee-gallery-abstand: 12px;
  --klee-gallery-dauer: 80s;   /* vom Renderer an die Bildanzahl angepasst */

  display: flex;
  width: max-content;
  margin: 0;
  padding: 0;
  list-style: none;
  animation: klee-gallery-lauf var(--klee-gallery-dauer) linear infinite;
}

.klee-gallery__item {
  flex: 0 0 auto;
  margin-right: var(--klee-gallery-abstand);
}

.klee-gallery__image {
  display: block;
  height: 200px;

  /* Seitenverhältnis fest, NICHT width: auto.
     Mit "auto" hätte ein noch nicht geladenes Bild die Breite null. Ein
     Element ohne Fläche gilt dem Browser als nie sichtbar, also löst er
     loading="lazy" nie aus – und ohne Ladevorgang bleibt die Breite null.
     Die Bilder hingen dadurch alle bei null fest.

     Mit festem Verhältnis steht die Breite sofort, das Band hat von Anfang
     an seine volle Länge und es ruckelt beim Nachladen nichts.
     Bilder, die nicht 2:1 sind, beschneidet object-fit sauber. */
  aspect-ratio: 2 / 1;
  object-fit: cover;

  border-radius: var(--radius-inner);
  background: var(--klee-page-border);   /* ruhige Fläche, bis das Bild da ist */
}

@keyframes klee-gallery-lauf {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Auf dem Desktop anhalten, wenn jemand hinschaut. Auf Touch gibt es kein
   Hover – dort läuft das Band einfach weiter. */
@media (hover: hover) and (pointer: fine) {
  .klee-gallery__viewport:hover .klee-gallery__track {
    animation-play-state: paused;
  }
}

@media (min-width: 768px) {
  .klee-gallery__track { --klee-gallery-abstand: 16px; }
  .klee-gallery__image { height: 280px; }
  .klee-gallery__viewport { margin-top: 40px; }
}

@media (min-width: 1280px) {
  .klee-gallery__image { height: 340px; }
  .klee-gallery__viewport { margin-top: 48px; }
}

/* Wer Bewegung abgeschaltet hat, bekommt kein laufendes Band, sondern einen
   Streifen zum selbst Wischen. Die Kopien fallen dabei weg, sonst sähe man
   jedes Bild doppelt. */
@media (prefers-reduced-motion: reduce) {
  .klee-gallery__track {
    animation: none;
    width: auto;
  }

  .klee-gallery__item[data-klee-clone] {
    display: none;
  }

  .klee-gallery__viewport {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    -webkit-mask-image: none;
            mask-image: none;
    padding-inline: var(--klee-gutter);
  }

  .klee-gallery__item {
    scroll-snap-align: center;
  }
}

/* ==========================================================================
   06 – Sektion 3: Zahlen
   ========================================================================== */

.klee-facts__cta {
  margin-top: 28px;
  text-align: center;
}

@media (min-width: 1280px) {
  .klee-facts__cta {
    margin-top: 44px;
  }
}

/* ==========================================================================
   07 – Sektion 4: Wohnungstypen
   ========================================================================== */

.klee-units__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.klee-unit {
  padding: 20px;
  display: flex;
  gap: 16px;
  align-items: center;
}

.klee-unit__count {
  flex: 0 0 auto;
  align-self: center;
  min-width: 52px;
  padding: 12px 10px;
  border-radius: var(--radius-badge);
  background: var(--klee-web-lime);
  color: var(--klee-green-deep);
  text-align: center;
  font-size: 22px;
  font-weight: var(--weight-bold);
  line-height: 1;
}

.klee-unit__body {
  flex: 1;
  min-width: 0;
}

.klee-unit__name {
  margin: 0;
  font-size: 17.5px;
  font-weight: var(--weight-semibold);
  line-height: 1.25;
  color: var(--klee-text-dark);
}

.klee-unit__note {
  font-weight: var(--weight-regular);
  font-size: 14px;
  color: var(--klee-text-muted);
}

/* Leerzeichen (Umbruchstelle) + Mittelpunkt + geschütztes Leerzeichen:
   der Trenner wandert mit dem folgenden Wort in die nächste Zeile. */
.klee-unit__note::before {
  content: ' \00b7\00a0';
}

.klee-unit__note:empty {
  display: none;
}

.klee-unit__area {
  margin: 4px 0 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--klee-text-muted);
}

.klee-unit__area-item + .klee-unit__area-item::before {
  content: ' \00b7\00a0';
}

.klee-unit__price {
  flex: 0 0 auto;
  text-align: right;
}

/* Ohne Sperrung und ohne Versalien, direkt über dem Wert. */
.klee-unit__price-label {
  display: block;
  font-size: 13px;
  line-height: 1.2;
  color: var(--klee-text-muted);
}

.klee-unit__price-value {
  display: block;
  font-size: 18px;
  font-weight: var(--weight-semibold);
  color: var(--klee-text-dark);
}

/* --- Summenkarte -------------------------------------------------------- */
.klee-unit-total {
  padding: 20px;
  border-radius: var(--radius-card-web);
  background: var(--klee-web-lime);
  color: var(--klee-green-deep);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.klee-unit-total__count {
  font-size: 20px;
  font-weight: var(--weight-bold);
}

.klee-unit-total__figures {
  display: flex;
  flex-wrap: wrap;
  gap: 0 6px;
}

.klee-unit-total__area,
.klee-unit-total__average {
  font-size: 16px;
  font-weight: var(--weight-medium);
}

.klee-unit-total__average::before {
  content: '\00b7\00a0';
}

.klee-unit-total__note {
  font-size: 13px;
  opacity: 0.75;
}

@media (min-width: 768px) {
  .klee-units__list {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
  }

  /* Ab Tablet stehen die Karten hochkant (Desktop-Screen). */
  .klee-unit {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 26px 24px;
  }

  .klee-unit__count {
    align-self: flex-start;
    min-width: 0;
    padding: 7px 14px;
    font-size: 24px;
  }

  .klee-unit__body {
    flex: 0 0 auto;
  }

  .klee-unit__name {
    margin-top: 20px;
    font-size: 20px;
  }

  .klee-unit__note {
    display: block;
    margin-top: 4px;
    font-size: 14.5px;
  }

  .klee-unit__note::before {
    content: none;
  }

  .klee-unit__area {
    margin-top: 14px;
    font-size: 15.5px;
    line-height: 1.55;
  }

  /* :not() hebt die Spezifität über die Sichtbarkeits-Utility,
     damit die Mobile-Variante ausgeblendet bleibt. */
  .klee-unit__area-item:not(.klee-u-narrow-only) {
    display: block;
  }

  .klee-unit__area-item + .klee-unit__area-item::before {
    content: none;
  }

  .klee-unit__price {
    margin-top: auto;
    padding-top: 20px;
    text-align: left;
  }

  .klee-unit__price-label {
    font-size: 13.5px;
  }

  .klee-unit__price-value {
    margin-top: 2px;
    font-size: 23px;
  }

  /* Summenkarte wird zur Zeile */
  .klee-unit-total {
    margin-top: 20px;
    padding: 26px 34px;
    flex-direction: row;
    align-items: baseline;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 10px 28px;
  }

  .klee-unit-total__count {
    font-size: 24px;
  }

  .klee-unit-total__figures {
    display: contents;
  }

  .klee-unit-total__area,
  .klee-unit-total__average {
    font-size: 18px;
  }

  .klee-unit-total__average::before {
    content: none;
  }

  .klee-unit-total__note {
    font-size: 14.5px;
  }
}

/* ==========================================================================
   08 – Sektion 5: Vorteile
   ========================================================================== */

.klee-benefits__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.klee-benefit {
  display: flex;
  gap: 13px;
  align-items: flex-start;
  font-size: 16px;
  line-height: 1.5;
  opacity: 0.92;
}

/* Häkchen der Vorteile etwas kompakter als in Sektion 2. */
.klee-benefit .klee-check {
  width: 20px;
  height: 20px;
}

.klee-benefit .klee-check svg {
  width: 12px;
  height: 12px;
}

.klee-benefit__strong {
  font-weight: var(--weight-semibold);
  color: var(--klee-lime);
}

@media (min-width: 768px) {
  .klee-benefits__list {
    grid-template-columns: 1fr 1fr;
    gap: 22px 40px;
    max-width: 1020px;
    margin: 0 auto;
  }

  .klee-benefit {
    gap: 14px;
    font-size: 17.5px;
  }

  .klee-benefit .klee-check {
    width: 22px;
    height: 22px;
  }

  .klee-benefit .klee-check svg {
    width: 13px;
    height: 13px;
  }
}

@media (min-width: 1280px) {
  .klee-benefits__list {
    gap: 22px 56px;
  }
}

/* ==========================================================================
   09 – Sektion 6: Beispielrechnung
   ========================================================================== */

.klee-calc__cta {
  margin-top: 28px;
  text-align: center;
}

@media (min-width: 1280px) {
  .klee-calc__cta {
    margin-top: 44px;
  }
}

/* ==========================================================================
   10 – Sektion 7: Lage & Umfeld
   ========================================================================== */

/* --- Anfahrtszeiten ----------------------------------------------------- */
.klee-commute {
  padding: 14px;
  margin-bottom: 28px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.klee-commute__item {
  padding: 16px 20px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.klee-commute__item:first-child {
  background: var(--klee-web-lime);
  border-radius: var(--radius-inner);
}

.klee-commute__item:nth-child(2) {
  border-top: 1px solid var(--klee-page-border);
}

.klee-commute__item:last-child {
  padding-top: 0;
}

.klee-commute__label {
  font-size: 14.5px;
  color: var(--klee-text-dark);
}

.klee-commute__value {
  font-size: 26px;
  font-weight: var(--weight-light);
  line-height: 1;
  color: var(--klee-text-dark);
  white-space: nowrap;
}

@media (min-width: 768px) {
  .klee-commute {
    padding: 22px;
    margin: 0 auto 44px;
    max-width: 900px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
  }

  .klee-commute__item {
    padding: 22px 28px;
    display: block;
  }

  .klee-commute__item:nth-child(2) {
    border-top: 0;
  }

  .klee-commute__item:not(:first-child) {
    border-left: 1px solid var(--klee-page-border);
  }

  .klee-commute__item:last-child {
    padding-top: 22px;
  }

  .klee-commute__label {
    font-size: 15.5px;
  }

  .klee-commute__value {
    display: block;
    margin-top: 12px;
    font-size: 32px;
  }
}

@media (min-width: 1280px) {
  .klee-commute__value {
    font-size: 40px;
  }
}

/* --- Kategorien & Karte ------------------------------------------------- */
.klee-location__categories {
  max-width: 900px;
  margin: 0 auto;
}

.klee-location__map {
  margin-top: 28px;
  padding: 10px;
  overflow: hidden;
}

.klee-location__map-frame {
  display: block;
  width: 100%;
  height: 300px;
  border: 0;
  border-radius: 10px;
}

@media (min-width: 768px) {
  .klee-location__map {
    max-width: 900px;
    margin: 44px auto 0;
    padding: 12px;
  }

  .klee-location__map-frame {
    height: 380px;
  }
}

@media (min-width: 1280px) {
  .klee-location__map {
    margin-top: 52px;
  }

  .klee-location__map-frame {
    height: 420px;
  }
}

/* ==========================================================================
   11 – Sektion 8: Warum Klee Immoconcept
   ========================================================================== */

.klee-about__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

.klee-about__heading {
  margin-bottom: 18px;
}

.klee-about__lead {
  margin: 0 0 28px;
  font-size: 16px;
  line-height: 1.6;
  opacity: 0.92;
}

/* --- Kennzahlen-Karte --------------------------------------------------- */
.klee-stats {
  padding: 14px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.klee-stats__item {
  padding: 20px 22px;
}

.klee-stats__item:first-child {
  background: var(--klee-web-lime);
  border-radius: var(--radius-inner);
}

.klee-stats__item:nth-child(2) {
  border-top: 1px solid var(--klee-page-border);
}

.klee-stats__item:last-child {
  padding-top: 0;
}

.klee-stats__label {
  display: block;
  font-size: 15px;
  line-height: 1.3;
  color: var(--klee-text-dark);
}

.klee-stats__value {
  display: block;
  margin-top: 12px;
  font-size: 46px;
  font-weight: var(--weight-light);
  line-height: 1;
  color: var(--klee-text-dark);
}

.klee-about__partners {
  margin-top: 36px;
}

@media (min-width: 768px) {
  .klee-about__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px;
    align-items: start;
  }

  .klee-about__heading {
    margin-bottom: 0;
  }

  .klee-about__lead {
    margin: 0;
    padding-top: 32px;
    font-size: 18px;
  }

  .klee-stats {
    margin-top: 48px;
    padding: 28px;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
  }

  .klee-stats__item {
    padding: 30px 24px;
  }

  .klee-stats__item:nth-child(2) {
    border-top: 0;
  }

  .klee-stats__item:not(:first-child) {
    border-left: 1px solid var(--klee-page-border);
  }

  .klee-stats__item:last-child {
    padding-top: 30px;
  }

  .klee-stats__label {
    font-size: 16.5px;
  }

  .klee-stats__value {
    margin-top: 22px;
    font-size: 56px;
  }

  .klee-about__partners {
    margin-top: 48px;
  }
}

@media (min-width: 1280px) {
  .klee-about__grid {
    gap: 60px;
  }

  .klee-about__lead {
    padding-top: 40px;
  }

  .klee-stats {
    margin-top: 56px;
  }

  .klee-stats__item {
    padding: 30px 34px;
  }

  .klee-stats__item:last-child {
    padding-top: 30px;
  }

  .klee-stats__value {
    font-size: 72px;
  }

  .klee-about__partners {
    margin-top: 56px;
  }
}

/* ==========================================================================
   12 – Sektion 9: FAQ
   ========================================================================== */

/* nutzt .klee-accordion (siehe Bausteine) */

/* ==========================================================================
   13 – Sektion 10: Finaler CTA
   ========================================================================== */

.klee-final {
  padding-top: 8px;
}

.klee-final__band {
  padding: 44px 26px;
  border-radius: var(--radius-card-web);
  background: var(--klee-web-lime);
  text-align: center;
}

.klee-final__title {
  margin: 16px 0 12px;
  font-weight: var(--weight-medium);
  font-size: 27px;
  line-height: 1.18;
  letter-spacing: -0.015em;
  color: var(--klee-green-deep);
  text-wrap: balance;
}

.klee-final__body {
  margin: 0 auto 24px;
  max-width: 620px;
  font-size: 15.5px;
  line-height: 1.55;
  color: rgba(40, 67, 61, 0.75);
}

@media (min-width: 768px) {
  .klee-final {
    padding-top: 16px;
  }

  .klee-final__band {
    padding: 56px 40px;
  }

  .klee-final__title {
    margin: 18px auto 14px;
    max-width: 700px;
    font-size: 36px;
    line-height: 1.14;
  }

  .klee-final__body {
    margin-bottom: 28px;
    font-size: 17px;
  }
}

@media (min-width: 1280px) {
  .klee-final {
    padding-top: 20px;
  }

  .klee-final__band {
    padding: 64px 40px;
  }

  .klee-final__title {
    font-size: 44px;
  }
}

/* ==========================================================================
   14 – Footer
   ========================================================================== */

/* Aufbau wie im Footer der Hauptseite: links Marke mit Claim, daneben zwei
   schmale Spalten (Adresse/Kontakt, Links), darunter abgetrennt die Zeile mit
   Copyright und Rechtlichem. */

.klee-footer {
  background: var(--klee-green-deep);
  padding: 40px var(--klee-gutter) 28px;
}

.klee-footer__inner,
.klee-footer__bottom {
  max-width: var(--klee-container);
  margin-inline: auto;
}

.klee-footer__inner {
  display: flex;
  flex-direction: column;
  gap: 34px;
}

/* --- Marke --- */
.klee-footer__brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
}

.klee-footer__logo {
  height: 30px;
  width: auto;
  display: block;
}

.klee-footer__slogan {
  margin: 0;
  max-width: 32ch;
  font-size: 15px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.72);
}

/* --- Spalten --- */
.klee-footer__col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.klee-footer__heading {
  margin: 0 0 14px;
  font-size: 18px;
  font-weight: var(--weight-semibold);
  line-height: 1.3;
  color: #fff;
}

/* Zweite Überschrift derselben Spalte braucht Luft nach oben */
.klee-footer__heading:not(:first-child) {
  margin-top: 28px;
}

.klee-footer__address {
  font-style: normal;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 15px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.72);
}

.klee-footer__nav {
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.klee-footer__nav-link,
.klee-footer__contact {
  font-size: 15px;
  text-decoration: none;
  transition: color var(--klee-duration-press) var(--klee-ease-out);
}

/* ---------------------------------------------------------------------------
   Linkfarbe im Footer – bewusst höher gewichtet.

   Die globale Regel .klee-page a:not(.klee-cta) färbt jeden Link dunkelgrün.
   Sie wiegt (0,2,1) und schlägt damit jede einzelne Klasse. Auf dem
   dunkelgrünen Footer heisst das: Schrift in Hintergrundfarbe, also
   unsichtbar. Genau dieser Konflikt hat vorher schon den Abschluss-CTA
   verschluckt.

   Deshalb hier über .klee-page mitgeführt – (0,3,1) gewinnt eindeutig und
   nicht bloss über die Reihenfolge im Dokument.
   --------------------------------------------------------------------------- */
.klee-page .klee-footer a:not(.klee-cta) {
  color: rgba(255, 255, 255, 0.72);
}

.klee-page .klee-footer__bottom a:not(.klee-cta) {
  color: rgba(255, 255, 255, 0.55);
}

/* --- Abschlusszeile --- */
.klee-footer__bottom {
  margin-top: 38px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.klee-footer__copy {
  margin: 0;
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.55);
}

.klee-footer__links {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 28px;
}

.klee-footer__link {
  font-size: 13.5px;
  text-decoration: none;
  transition: color var(--klee-duration-press) var(--klee-ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .klee-page .klee-footer a:not(.klee-cta):hover {
    color: var(--klee-web-lime);
  }
}

@media (min-width: 768px) {
  .klee-footer {
    padding: 56px var(--klee-gutter) 30px;
  }

  .klee-footer__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(170px, auto) minmax(170px, auto);
    gap: 40px;
    align-items: start;
  }

  .klee-footer__bottom {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
  }
}

@media (min-width: 1280px) {
  .klee-footer {
    padding: 72px var(--klee-gutter) 34px;
  }

  .klee-footer__inner {
    grid-template-columns: minmax(0, 1fr) 260px 260px;
    gap: 56px;
  }

  .klee-footer__logo {
    height: 34px;
  }

  .klee-footer__heading {
    font-size: 20px;
  }

  .klee-footer__slogan,
  .klee-footer__address,
  .klee-footer__nav-link,
  .klee-footer__contact {
    font-size: 16px;
  }
}

/* "Seitenanfang" im Footer soll gleiten statt zu springen – ein harter Sprung
   passt nicht zu einer Seite, die sonst durchgehend weich arbeitet. */
html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* ==========================================================================
   15 – Motion: Reveal beim Hereinscrollen
   --------------------------------------------------------------------------
   Alles ausschließlich über transform, opacity und clip-path (GPU).
   Kein Scroll-Listener – die Sichtbarkeit meldet ein IntersectionObserver.

   Schutz: Die Ausgangszustände hängen an .klee-js, das klee-objektseite.js
   setzt. Ohne JavaScript bleibt alles sichtbar, statt unsichtbar zu
   verharren.
   ========================================================================== */

/* --- A · Fade + Rise ---------------------------------------------------- */
.klee-js [data-klee-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 520ms var(--klee-ease-out),
    transform 520ms var(--klee-ease-out);
}

.klee-js [data-klee-reveal].klee-is-visible {
  opacity: 1;
  transform: none;
}

/* --- B · Stagger --------------------------------------------------------
   Der Versatz kommt als transition-delay direkt auf das Kind (aus dem JS),
   nicht über eine CSS-Variable am Elternteil: Das würde die Styles aller
   Kinder neu berechnen. */
.klee-js [data-klee-stagger] > * {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity 420ms var(--klee-ease-out),
    transform 420ms var(--klee-ease-out);
}

.klee-js [data-klee-stagger].klee-is-visible > * {
  opacity: 1;
  transform: none;
}

/* --- C · Zeilen-Reveal --------------------------------------------------
   Die Zeilen werden zur Laufzeit gemessen und gewrappt (siehe JS), damit
   das Template objektneutral bleibt und beliebige Textlängen trägt. */
.klee-line {
  display: block;
  overflow: hidden;
}

.klee-line__inner {
  display: block;
  transform: translateY(105%);
  transition: transform 620ms var(--klee-ease-drawer);
}

.klee-js [data-klee-lines].klee-is-visible .klee-line__inner {
  transform: none;
}

/* --- D · Bild-Reveal per Vorhang ----------------------------------------
   WICHTIG: Beobachtet wird der Container, nicht das geclippte Bild selbst.
   clip-path: inset(0 0 100% 0) setzt die sichtbare Fläche auf null, und der
   IntersectionObserver rechnet Clipping mit ein — ein so verstecktes Element
   wird nie "sichtbar genug" und bliebe für immer unsichtbar. */
.klee-js [data-klee-stagger='clip'] > * {
  opacity: 1;
  transform: none;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 760ms var(--klee-ease-drawer);
}

.klee-js [data-klee-stagger='clip'].klee-is-visible > * {
  clip-path: inset(0 0 0 0);
}

/* --- F · Hero: langsamer Zoom ------------------------------------------
   Läuft einmal und bleibt stehen; kein Dauerloop. */
.klee-js .klee-hero__media {
  transform: scale(1);
  transition: transform 8000ms linear;
}

.klee-js .klee-hero__media.klee-is-visible {
  transform: scale(1.06);
}

/* --- Reduced Motion -----------------------------------------------------
   Bewegung entfällt, die Inhalte sind sofort und vollständig da.
   Der Zoom wird komplett abgeschaltet. */
@media (prefers-reduced-motion: reduce) {
  .klee-js [data-klee-reveal],
  .klee-js [data-klee-stagger] > *,
  .klee-js [data-klee-stagger='clip'] > * {
    opacity: 1;
    transform: none;
    clip-path: none;
    transition: none;
  }

  .klee-line__inner {
    transform: none;
    transition: none;
  }

  .klee-js .klee-hero__media,
  .klee-js .klee-hero__media.klee-is-visible {
    transform: none;
    transition: none;
  }
}