/*
 * Locksmith & Safes. Nur Layout dieser Seite, nur Tokens aus tokens.css.
 * Leitgedanke: Beschläge liegen frei auf der Tönung (die Bilder haben genau diesen Grund), dazu zwei große Ziffern
 * (Preis, Fenstermaß) in der Linkfarbe. Rot bleibt dem Anruf vorbehalten.
 */

.ls {
  --ls-ziffer: calc(var(--text-figure) * 1.3);
}

/* Große Ziffer hinter einer Maske: steigt beim ersten Erscheinen aus der Grundlinie. */
.ls-maske {
  display: block;
  overflow: clip;
  /* Unterlängen und das Minus-Tracking brauchen etwas Luft, sonst schneidet die Maske an. */
  padding-block-end: 0.06em;
  padding-inline-end: 0.04em;
}

.ls-ruf__betrag,
.ls-mass__zahl {
  display: block;
  width: max-content;
  color: var(--color-link);
  font-size: var(--ls-ziffer);
  font-weight: var(--weight-bold);
  line-height: 0.92;
  letter-spacing: -0.045em;
  transition: transform calc(var(--dur-reveal) * 1.4) var(--ease-out);
}

.ls-mass__zahl {
  font-size: calc(var(--ls-ziffer) * 0.62);
  letter-spacing: -0.035em;
}

[data-ls-wartet] .ls-ruf__betrag,
[data-ls-wartet] .ls-mass__zahl {
  transform: translateY(104%);
}

/* ============================================================ Hero */

.ls-hero {
  position: relative;
  overflow: clip;
  background: var(--color-tint);
}

.ls-hero__innen {
  position: relative;
  z-index: 1;
  padding-block-start: var(--space-7);
}

.ls-hero__text {
  display: grid;
  gap: var(--space-5);
}

.ls-hero__lead {
  max-width: 34ch;
}

.ls-hero__aktionen {
  margin-block-start: var(--space-1);
}

.ls-hero__fakten {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-7);
  margin: 0;
  padding-block-start: var(--space-4);
  border-block-start: var(--border) solid var(--color-line-soft);
}

.ls-hero__fakten dt {
  color: var(--color-text-3);
  font-size: var(--text-small);
  line-height: var(--leading-small);
}

.ls-hero__fakten dd {
  margin: 0;
  font-weight: var(--weight-bold);
  line-height: var(--leading-h3);
}

/* Der Griff liegt ohne Rahmen auf der Tönung des Heros. */
.ls-hero__bild .bild__rahmen {
  border-radius: 0;
  background: none;
  transform-origin: 60% 50%;
  animation: ls-ankunft calc(var(--dur-reveal) * 2) var(--ease-out) both;
}

@keyframes ls-ankunft {
  from {
    transform: scale(1.06);
  }
}

@media (max-width: 47.99em) {
  .ls-hero__bild .bild__bild img {
    aspect-ratio: 5 / 4;
    object-fit: cover;
    object-position: 50% 46%;
  }

  .ls-hero__buehne {
    margin-block-start: calc(-1 * var(--space-4));
  }
}

@media (min-width: 48em) and (max-width: 59.99em) {
  .ls-hero__lead {
    max-width: 44ch;
  }

  .ls-hero__fakten {
    max-width: 28rem;
  }

  .ls-hero__buehne {
    margin-block-start: calc(-1 * var(--space-9));
  }
}

@media (min-width: 60em) {
  .ls-hero {
    --ls-schub: 8%;
    display: grid;
    align-items: center;
    min-height: max(36rem, calc(100svh - var(--header-h)));
  }

  .ls-hero__innen {
    padding-block: var(--space-10);
  }

  .ls-hero__text {
    max-width: 24rem;
    gap: var(--space-6);
  }

  /* Zwei Knöpfe untereinander, gleich breit: nebeneinander passen sie nicht neben den Griff. */
  .ls-hero__aktionen {
    flex-direction: column;
    width: max-content;
    max-width: 100%;
  }

  /* Bild 16:9, Griff rechts, links ruhige Fläche für den Text. Breite begrenzt, damit der Griff auf sehr
     breiten Bildschirmen nicht unter die Textspalte wächst; der Rand des Bildes ist die Tönung des Heros. */
  .ls-hero__buehne {
    position: absolute;
    inset-block-start: 50%;
    inset-inline: 0;
    width: 100%;
    max-width: 110rem;
    margin-inline: auto;
    translate: var(--ls-schub) -50%;
  }
}

@media (min-width: 81em) {
  .ls-hero {
    --ls-schub: 4%;
  }

  .ls-hero__text {
    max-width: 27rem;
  }
}

/* Beim Weiterscrollen sinkt der Griff leicht nach (nur wo der Browser es ohne Skript kann). */
@supports (animation-timeline: view()) {
  @media (min-width: 60em) and (prefers-reduced-motion: no-preference) {
    .ls-hero__bild {
      animation: ls-nachsinken linear both;
      animation-timeline: view();
      animation-range: exit 0% exit 100%;
    }
  }
}

@keyframes ls-nachsinken {
  to {
    transform: translateY(9%);
  }
}

html[data-motion="aus"] .ls-hero__bild,
html[data-motion="aus"] .ls-hero__bild .bild__rahmen {
  animation: none;
}

@media (prefers-reduced-motion: reduce) {
  .ls-hero__bild .bild__rahmen {
    animation: none;
  }
}

/* ============================================================ Anfahrt: der Preis */

.ls-ruf__raster {
  display: grid;
  gap: var(--space-7);
}

.ls-ruf__zusatz {
  display: block;
  max-width: 18rem;
  margin-block-start: var(--space-3);
  color: var(--color-text-2);
  font-size: var(--text-small);
  line-height: var(--leading-small);
}

.ls-ruf__liste {
  margin-block-start: var(--space-6);
  gap: 0;
}

.ls-ruf__liste li {
  padding-block: var(--space-3);
  border-block-start: var(--border) solid var(--color-line-soft);
}

.ls-ruf__liste li:last-child {
  border-block-end: var(--border) solid var(--color-line-soft);
}

@media (min-width: 60em) {
  .ls-ruf__raster {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--space-10);
    align-items: start;
  }

  .ls-ruf__text {
    max-width: 38rem;
  }
}

/* ============================================================ Schließanlage */

.ls-anlage__raster {
  display: grid;
  gap: var(--space-8);
}

.ls-anlage__zwischen {
  margin-block-start: var(--space-7);
}

/* Schaubild "wer öffnet was": Tabelle im Markup, Raster in der Darstellung. */
.ls-plan {
  margin: 0;
  padding: var(--space-5);
  border-radius: var(--radius);
  background: var(--color-surface);
}

.ls-plan__tabelle,
.ls-plan__tabelle thead,
.ls-plan__tabelle tbody {
  display: block;
  width: 100%;
}

.ls-plan__titel {
  display: block;
  margin-block-end: var(--space-5);
  color: var(--color-text-3);
  font-size: var(--text-small);
  line-height: var(--leading-small);
  text-align: start;
}

.ls-plan__tabelle tr {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3);
  align-items: end;
}

.ls-plan__tabelle th,
.ls-plan__tabelle td {
  padding: 0;
  font-weight: var(--weight-regular);
}

.ls-plan__tabelle thead th {
  color: var(--color-text-2);
  font-size: var(--text-small);
  line-height: var(--leading-small);
  text-align: center;
  hyphens: auto;
}

.ls-plan__tabelle tbody tr {
  margin-block-start: var(--space-4);
  padding-block-start: var(--space-4);
  border-block-start: var(--border) solid var(--color-line-soft);
}

.ls-plan__tabelle tbody th {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: var(--weight-bold);
  line-height: var(--leading-h3);
  text-align: start;
}

.ls-plan__tabelle tbody th .icon {
  color: var(--color-link);
}

.ls-plan__tabelle tbody td {
  display: grid;
  place-items: center;
}

.ls-plan__punkt {
  display: grid;
  place-items: center;
  width: var(--tap);
  height: var(--tap);
  border: var(--border-control) solid var(--color-line);
  border-radius: var(--radius-round);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
  transition-delay: calc(var(--n, 0) * var(--stagger) * 1.5 + var(--dur));
}

.ls-plan__punkt--auf {
  border-color: transparent;
  background: var(--color-primary);
  color: var(--color-on-primary);
}

[data-ls-wartet] .ls-plan__punkt--auf {
  opacity: 0;
  transform: scale(0.8);
}

@media (min-width: 60em) {
  .ls-anlage__raster {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    gap: var(--space-10);
    align-items: center;
  }

  .ls-plan {
    padding: var(--space-7);
  }
}

/* ============================================================ Beschläge */

.ls-werk__raster {
  display: grid;
  gap: var(--space-8) var(--space-5);
  margin: 0;
}

.ls-stueck__bild {
  margin-block-end: var(--space-4);
}

.ls-stueck__bild .bild__bild img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.ls-stueck__text {
  max-width: 34rem;
  margin-block-start: var(--space-2);
  color: var(--color-text-2);
}

.ls-stueck--text {
  padding-block-start: var(--space-4);
  border-block-start: var(--border) solid var(--color-line-soft);
}

@media (max-width: 59.99em) {
  /* Drei Textstücke in Folge rücken zusammen, damit sie als Gruppe lesbar bleiben. */
  .ls-stueck--text + .ls-stueck--text {
    margin-block-start: calc(-1 * var(--space-5));
  }
}

@media (min-width: 60em) {
  .ls-werk__raster {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--space-9) var(--space-6);
  }

  .ls-stueck--breit {
    grid-column: span 7;
  }

  .ls-stueck--schmal {
    grid-column: span 5;
  }

  .ls-stueck--text {
    grid-column: span 4;
  }

  /* Gleiche Höhe in einer Zeile, obwohl die Kacheln verschieden breit sind. */
  .ls-stueck__bild .bild__bild img {
    aspect-ratio: auto;
    height: 20rem;
  }
}

@media (min-width: 81em) {
  .ls-stueck__bild .bild__bild img {
    height: 23rem;
  }
}

/* ============================================================ Tresore */

.ls-tresor__raster {
  display: grid;
  gap: var(--space-6);
}

.ls-tresor__text > * + * {
  margin-block-start: var(--space-4);
}

/* Wie im Hero: Das Bild hat die Tönung als Grund und liegt ohne Rahmen in der getönten Sektion. */
.ls-tresor__bild .bild__rahmen {
  border-radius: 0;
  background: none;
  transition: transform calc(var(--dur-reveal) * 1.6) var(--ease-out);
}

[data-ls-wartet] .ls-tresor__bild .bild__rahmen {
  transform: scale(1.05);
}

.ls-tresor__buehne {
  margin-inline: calc(-1 * var(--gutter));
  margin-block: calc(-1 * var(--space-6)) calc(-1 * var(--space-7));
}

.ls-tresor__liste {
  margin-block: var(--space-7) 0;
}

.ls-tresor__liste > div {
  padding-block: var(--space-4);
  border-block-start: var(--border) solid var(--color-line-soft);
}

.ls-tresor__liste dt {
  font-size: var(--text-h3);
  font-weight: var(--weight-bold);
  line-height: var(--leading-h3);
}

.ls-tresor__liste dd {
  max-width: 34rem;
  margin: var(--space-1) 0 0;
  color: var(--color-text-2);
}

@media (min-width: 60em) {
  .ls-tresor__raster {
    grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
    gap: var(--space-9);
    align-items: center;
  }

  .ls-tresor__buehne {
    order: -1;
    margin: calc(-1 * var(--space-8)) 0 calc(-1 * var(--space-8)) calc(-1 * var(--space-9));
  }
}

/* ============================================================ Verwaltung, Vermieter */

.ls-verwaltung__raster {
  display: grid;
  gap: var(--space-8);
}

.ls-mass > * + *,
.ls-notiz > * + * {
  margin-block-start: var(--space-2);
}

.ls-mass h3 {
  margin-block-start: var(--space-5);
}

.ls-mass p:not(.ls-maske),
.ls-notiz p {
  max-width: 34rem;
  color: var(--color-text-2);
}

.ls-verwaltung__spalte {
  display: grid;
  gap: var(--space-6);
  align-content: start;
}

.ls-notiz {
  padding-block-start: var(--space-4);
  border-block-start: var(--border) solid var(--color-line-soft);
}

@media (min-width: 60em) {
  .ls-verwaltung__raster {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    gap: var(--space-10);
    align-items: start;
  }
}

/* ============================================================ Weniger Bewegung */

@media (prefers-reduced-motion: reduce) {
  [data-ls-wartet] .ls-ruf__betrag,
  [data-ls-wartet] .ls-mass__zahl,
  [data-ls-wartet] .ls-plan__punkt--auf,
  [data-ls-wartet] .ls-tresor__bild .bild__rahmen {
    opacity: 1;
    transform: none;
  }
}

html[data-motion="aus"] [data-ls-wartet] .ls-ruf__betrag,
html[data-motion="aus"] [data-ls-wartet] .ls-mass__zahl,
html[data-motion="aus"] [data-ls-wartet] .ls-plan__punkt--auf,
html[data-motion="aus"] [data-ls-wartet] .ls-tresor__bild .bild__rahmen {
  opacity: 1;
  transform: none;
}

/* Das Tresorbild wird beim Scrollen leicht vergrößert (scale): Der Abschnitt schneidet seitlich ab, sonst scrollt die Seite mobil quer. */
.ls-tresor {
  overflow-x: clip;
}