/*
 * Smart Home, Access & Intercoms. Nur Layout dieser Seite, nur Tokens (tokens.css).
 * Mobil zuerst (390 px). Umschaltpunkte wie im Fundament: 36em, 48em, 60em, dazu 75em für den Held.
 */

/* ============================================================ Held
   Bühne in der Tönung: Die Gerätebilder stehen auf derselben Fläche, das Bild hat deshalb keinen Rand. */
.sh-held {
  position: relative;
  background: var(--color-tint);
  overflow: hidden;
}

.sh-held__innen {
  padding-block: var(--space-7) var(--space-6);
}

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

.sh-held__titel {
  max-width: 14em;
}

.sh-held__aktionen {
  margin-block-start: var(--space-6);
}

.sh-held__fakten {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  margin-block-start: var(--space-5);
  color: var(--color-text-2);
  font-size: var(--text-small);
  line-height: var(--leading-small);
}

.sh-held__fakten li {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.sh-held__fakten .icon {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--color-link);
}

.sh-held__bild .bild__rahmen {
  border-radius: 0;
  background: none;
}

.sh-held__bild img {
  display: block;
}

@media (min-width: 48em) {
  .sh-held__innen {
    padding-block: var(--space-10) var(--space-7);
  }

  .sh-held__text {
    max-width: 38rem;
  }

  /* Das Querformat hat links eine leere Fläche für Text. Gestapelt wird sie weggeschnitten. */
  .sh-held__bild img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
    object-position: 100% 50%;
  }
}

/* Ab 1200 px: Bild füllt die Bühne, der Text steht links auf der freien Fläche des Motivs.
   Die Höhe ist an die Breite gebunden (höchstens 60vw), damit das Telefon nie unter den Text rutscht. */
@media (min-width: 75em) {
  .sh-held__innen {
    position: relative;
    z-index: 1;
    display: grid;
    align-items: center;
    min-height: min(calc(100svh - var(--header-h)), 60vw, 60rem);
    padding-block: var(--space-12) var(--space-10);
  }

  .sh-held__text {
    max-width: 28rem;
  }

  .sh-held__bild,
  .sh-held__bild .bild,
  .sh-held__bild .bild__rahmen,
  .sh-held__bild picture,
  .sh-held__bild img {
    height: 100%;
  }

  .sh-held__bild {
    position: absolute;
    inset: 0;
  }

  .sh-held__bild :is(.bild, .bild__rahmen, picture) {
    display: block;
  }

  .sh-held__bild img {
    width: 100%;
    aspect-ratio: auto;
  }
}

@media (min-width: 90em) {
  .sh-held__text {
    max-width: 31rem;
  }
}

/* ============================================================ Zeilen mit Linie (Geräte der App, Vorteile des Schlosses) */
.sh-zeilen {
  border-block-end: var(--border) solid var(--color-line);
}

.sh-zeilen__zeile {
  padding-block: var(--space-4);
  border-block-start: var(--border) solid var(--color-line);
}

.sh-zeilen dt {
  font-weight: var(--weight-bold);
}

.sh-zeilen dd {
  margin: var(--space-1) 0 0;
  color: var(--color-text-2);
  text-wrap: pretty;
}

.sh-zeilen__zeile--icon {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--space-4);
}

.sh-zeilen__icon {
  grid-row: 1 / span 2;
  margin-block-start: 0.15em;
  color: var(--color-link);
}

/* ============================================================ App */
.sh-app__raster {
  display: grid;
  gap: var(--space-7);
}

.sh-app__zusatz {
  margin-block-start: var(--space-4);
  max-width: var(--measure);
}

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

  .sh-app__bild {
    position: sticky;
    inset-block-start: calc(var(--header-h-compact) + var(--space-7));
  }
}

/* ---- Szenen: drei Zustände des Hauses, umschaltbar. Läuft ohne Skript über die Auswahlfelder. */
.sh-szene-block {
  display: grid;
  gap: var(--space-6);
  margin-block-start: var(--space-10);
}

.sh-szene-block__text {
  max-width: var(--container-narrow);
}

.sh-szene-block__text p {
  color: var(--color-text-2);
  max-width: var(--measure);
}

.sh-szene {
  padding: var(--space-4);
  border-radius: var(--radius);
  background: var(--color-surface);
}

.sh-szene__wahl {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-1);
  min-width: 0;
  margin: 0;
  padding: var(--space-1);
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--color-tint);
}

.sh-szene__knopf {
  position: relative;
  display: block;
  cursor: pointer;
}

.sh-szene__knopf span {
  display: grid;
  place-items: center;
  min-height: var(--tap);
  padding-inline: var(--space-2);
  border-radius: var(--radius-pill);
  color: var(--color-text-2);
  font-weight: var(--weight-bold);
  line-height: var(--leading-button);
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}

.sh-szene__knopf:active span {
  transform: scale(var(--press-scale));
  transition-duration: var(--dur-press);
}

.sh-szene__knopf input:checked + span {
  background: var(--color-primary);
  color: var(--color-on-primary);
}

.sh-szene__knopf input:focus-visible + span {
  outline: var(--focus-w) solid var(--color-focus);
  outline-offset: var(--focus-offset);
}

html[data-eingabe="zeiger"] .sh-szene__knopf input:focus-visible + span {
  outline: none;
}

.sh-szene__liste {
  margin-block-start: var(--space-2);
}

.sh-szene__zeile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 3.25rem;
  padding-block: var(--space-2);
  border-block-end: var(--border) solid var(--color-line);
}

.sh-szene__zeile dt {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-weight: var(--weight-semibold);
}

.sh-szene__zeile dt .icon {
  flex: none;
  color: var(--color-link);
}

/* Alle drei Zustände liegen übereinander; sichtbar ist der zur gewählten Szene. */
.sh-szene__zeile dd {
  display: grid;
  margin: 0;
  color: var(--color-text-2);
  text-align: end;
  font-variant-numeric: tabular-nums;
}

.sh-szene__zeile dd span {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transform: translateY(var(--space-1));
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), visibility 0s linear var(--dur-fast);
}

.sh-szene:has(input[value="home"]:checked) [data-szene="home"],
.sh-szene:has(input[value="away"]:checked) [data-szene="away"],
.sh-szene:has(input[value="sleep"]:checked) [data-szene="sleep"] {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity var(--dur) var(--ease-out) calc(var(--dur-press) / 2), transform var(--dur) var(--ease-out) calc(var(--dur-press) / 2), visibility 0s;
}

/* Browser ohne :has(): fester Zustand "Away", Auswahl ausgeblendet. */
@supports not selector(:has(*)) {
  .sh-szene__wahl {
    display: none;
  }

  .sh-szene__zeile dd [data-szene="away"] {
    opacity: 1;
    visibility: visible;
    transform: none;
  }
}

.sh-szene__hinweis {
  margin-block-start: var(--space-3);
}

@media (min-width: 48em) {
  .sh-szene {
    padding: var(--space-6);
  }
}

@media (min-width: 60em) {
  .sh-szene-block {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--space-10);
    align-items: center;
    margin-block-start: var(--space-12);
  }
}

/* ============================================================ Schloss */
.sh-schloss__zusatz {
  margin-block-start: var(--space-5);
  max-width: var(--measure);
  color: var(--color-text-2);
}

@media (min-width: 60em) {
  .sh-schloss__raster {
    align-items: start;
  }

  .sh-schloss__bild {
    position: sticky;
    inset-block-start: calc(var(--header-h-compact) + var(--space-7));
  }
}

/* ============================================================ Ohne WLAN (blaues Band) */
.sh-fern__titel {
  font-size: var(--text-h1);
  line-height: var(--leading-h1);
  letter-spacing: var(--tracking-h1);
}

.sh-fern__liste {
  margin-block-start: var(--space-6);
}

.sh-fern__zusatz {
  color: var(--color-on-primary-2);
}

.sh-fern__bild img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

@media (min-width: 60em) {
  .sh-fern__bild img {
    aspect-ratio: auto;
  }
}

.sh-fern .aktionen {
  margin-block-start: var(--space-6);
}

/* ============================================================ Türklingel und Gegensprechanlage */
.sh-tuer__raster {
  display: grid;
  gap: var(--space-9);
}

.sh-tuer__art > * + * {
  margin-block-start: var(--space-3);
}

.sh-tuer__art > .bild + * {
  margin-block-start: var(--space-5);
}

.sh-tuer__art > p:not(.klein) {
  color: var(--color-text-2);
  text-wrap: pretty;
}

ul.sh-punkte {
  display: grid;
  gap: var(--space-2);
  margin-block: var(--space-4);
  padding-inline-start: var(--space-4);
  border-inline-start: var(--border-control) solid var(--color-light);
}

.sh-punkte li {
  text-wrap: pretty;
}

@media (min-width: 60em) {
  .sh-tuer__raster {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-10);
  }
}

/* ============================================================ Zutritt */
.sh-daten {
  display: grid;
  gap: var(--space-6);
}

.sh-daten__feld {
  padding-block-start: var(--space-4);
  border-block-start: var(--border-control) solid var(--color-primary);
}

.sh-daten dt {
  display: grid;
  gap: var(--space-1);
}

.sh-daten__zahl {
  font-size: var(--text-h1);
  font-weight: var(--weight-bold);
  line-height: var(--leading-h1);
  letter-spacing: var(--tracking-h1);
  color: var(--color-link);
}

.sh-daten__name {
  font-weight: var(--weight-bold);
}

.sh-daten dd {
  margin: var(--space-2) 0 0;
  color: var(--color-text-2);
  text-wrap: pretty;
}

.sh-zutritt__zusatz {
  margin-block-start: var(--space-6);
  max-width: var(--measure);
  color: var(--color-text-2);
}

.sh-wege__titel {
  margin-block: var(--space-10) var(--space-5);
  font-size: var(--text-h2);
  line-height: var(--leading-h2);
  letter-spacing: var(--tracking-h2);
}

.sh-wege {
  display: grid;
  gap: var(--space-6);
}

.sh-wege__weg {
  padding-block-start: var(--space-4);
  border-block-start: var(--border) solid var(--color-line-strong);
}

.sh-wege__weg > * + * {
  margin-block-start: var(--space-2);
}

@media (min-width: 36em) {
  .sh-daten {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-7) var(--space-6);
  }
}

@media (min-width: 60em) {
  .sh-daten {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .sh-wege {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-9);
  }
}

/* ============================================================ Geräteliste aus dem Editor */
.sh-geraete__text > * + * {
  margin-block-start: var(--stack);
}

.sh-geraete__text > h2 + p {
  max-width: var(--measure);
  color: var(--color-text-2);
  font-size: var(--text-lead);
  line-height: var(--leading-lead);
}

.sh-geraete__text .sh-modelle {
  display: grid;
  gap: var(--space-6);
  margin-block-start: var(--space-7);
}

.sh-geraete__text .sh-modell {
  padding-block-start: var(--space-4);
  border-block-start: var(--border) solid var(--color-line);
}

.sh-geraete__text .sh-modell > * + * {
  margin-block-start: var(--space-2);
}

.sh-geraete__text .sh-modell p {
  color: var(--color-text-2);
  text-wrap: pretty;
}

.sh-geraete__text .sh-modell .sh-preis {
  color: var(--color-text);
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
}

.sh-geraete__text .sh-fuss {
  max-width: var(--measure);
  color: var(--color-text-3);
  font-size: var(--text-small);
  line-height: var(--leading-small);
}

@media (min-width: 48em) {
  .sh-geraete__text .sh-modelle {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-7) var(--space-9);
  }
}

/* ============================================================ Fragen und Verweise */
.sh-fragen__raster {
  display: grid;
  gap: var(--space-9);
}

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

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

@media (min-width: 60em) {
  .sh-fragen__raster {
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    gap: var(--space-11);
    align-items: start;
  }
}

/* ============================================================ Weniger Bewegung */
@media (prefers-reduced-motion: reduce) {
  .sh-szene__zeile dd span {
    transform: none;
  }
}

html[data-motion="aus"] .sh-szene__zeile dd span {
  transform: none;
}