/* Start page danwood24.com / danwood24.pl (D5, docs/danwood24/LANDING.md).
   Tokens and fonts come from /design/daemmerung.css (design system 2, copied into the edge
   image next to this file). No inline styles or scripts: the edge sends a strict CSP; the only
   script is /assets/startseite.js (films, house windows), the page is complete without it.

   One bold thing: the evening house. It opens the page as film, comes back as the small house
   whose windows light up chapter by chapter, and closes the page as a still. Everything else is
   quiet: putz ground, graphite text, Danwood red for the stage and the main action. */

.sp {
  /* Deep night red for veils over the films: night red darkened with graphite (tokens only). */
  --sp-nacht: color-mix(in srgb, var(--dw-nachtrot) 65%, var(--dw-graphit));
  margin: 0;
  min-height: 100vh;
  background: var(--dw-putz);
  overflow-x: clip;
}
.sp a { text-underline-offset: 3px; }
.sp .rand { padding-inline: var(--dw-rand); }
.sp img, .sp video { display: block; max-width: 100%; }
.sp figure { margin: 0; }

/* --- Header: over the film on the start page, a solid band on the legal pages ---
   On the start page the header stays fixed while scrolling (Fabian 15.10.2026: "Anmelden" always in
   view); once the page is scrolled it gets a solid night-red band (startseite.js sets .kopf--fest). */
.buehne { background: var(--dw-nachtrot); color: var(--dw-daemmerung-text); }
.kopf {
  display: flex;
  align-items: center;
  gap: clamp(8px, 2vw, 24px);
  padding-block: 18px;
  color: var(--dw-daemmerung-text);
}
.sp > .kopf {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 3;
  background: linear-gradient(color-mix(in srgb, var(--sp-nacht) 55%, transparent), transparent);
  transition: background .25s ease, box-shadow .25s ease;
}
.sp > .kopf.kopf--fest {
  background: var(--dw-nachtrot);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--dw-flaeche) 10%, transparent);
}
/* Targets of in-page links stop below the fixed header. */
.sp [id] { scroll-margin-top: 92px; }
.wortmarke {
  font-family: var(--dw-schrift-titel);
  font-weight: 800;
  font-size: 1.5rem;
  letter-spacing: -0.03em;
  text-decoration: none;
  color: var(--dw-daemmerung-text);
  margin-right: auto;
  display: inline-flex;
  align-items: baseline;
  /* a touch target of 44 px without changing the look */
  padding-block: 9px;
  min-height: 44px;
  box-sizing: border-box;
}
.wortmarke .zahl {
  font-family: var(--dw-schrift-text);
  font-weight: 700;
  color: var(--dw-fensterlicht);
  margin-left: 1px;
}
.kopf-nav { display: none; gap: 4px; }
.kopf-nav a, .sprachen a {
  display: inline-block;
  padding: 10px 12px;
  border-radius: var(--dw-radius-knopf);
  color: var(--dw-daemmerung-text);
  text-decoration: none;
  font-weight: 600;
}
.kopf-nav a:hover, .sprachen a:hover { background: color-mix(in srgb, var(--dw-flaeche) 12%, transparent); }
.sprachen { display: flex; gap: 2px; }
.sprachen a { min-width: 44px; padding-inline: 8px; text-align: center; }
.sprachen a[aria-current='true'] { background: color-mix(in srgb, var(--dw-flaeche) 18%, transparent); }
@media (min-width: 1000px) { .kopf-nav { display: flex; margin-right: 8px; } }

/* --- Buttons --- */
.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 22px;
  border-radius: var(--dw-radius-knopf);
  font: 600 1rem/1.2 var(--dw-schrift-text);
  text-decoration: none;
  border: 2px solid transparent;
  transition: background-color .2s var(--dw-bewegung), transform .2s var(--dw-bewegung);
}
.knopf--klein { min-height: 44px; padding: 10px 16px; white-space: nowrap; }
/* Small phones: the header (mark, language, sign-in) fits into 360 px, also in Polish. */
@media (max-width: 420px) {
  .wortmarke { font-size: 1.15rem; }
  .kopf { gap: 2px; }
  .kopf .knopf--klein, .kopf .knopf--licht { padding-inline: 10px; font-size: .9375rem; }
  .sprachen { gap: 0; }
  .sprachen a { min-width: 36px; padding-inline: 2px; font-size: .875rem; }
}
.sp .knopf--rot {
  background: var(--dw-daemmerung);
  color: var(--dw-flaeche);
  box-shadow: 0 14px 30px -14px var(--dw-schein-rot);
}
.sp .knopf--rot:hover { background: var(--dw-daemmerung-tief); }
.sp .knopf--licht { background: var(--dw-fensterlicht); color: var(--dw-graphit); }
.knopf--licht:hover { background: var(--dw-flaeche); }
.sp .knopf--glas {
  color: var(--dw-flaeche);
  border-color: color-mix(in srgb, var(--dw-flaeche) 55%, transparent);
  background: color-mix(in srgb, var(--sp-nacht) 35%, transparent);
}
.knopf--glas:hover { background: color-mix(in srgb, var(--sp-nacht) 60%, transparent); }
.aktionen { display: flex; flex-wrap: wrap; gap: 12px; }

/* --- Hero: the evening house as film -------------------------------------- */
.held {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-items: end;
  color: var(--dw-flaeche);
  background: var(--dw-nachtrot);
  isolation: isolate;
}
.film-rahmen { position: relative; overflow: hidden; background: var(--dw-nachtrot); }
.film-rahmen .film-standbild, .film-rahmen .film {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.film-rahmen .film {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .8s var(--dw-bewegung);
}
.film-rahmen .film.laeuft { opacity: 1; }
.held-film { position: absolute; inset: 0; z-index: -1; }
.held-film picture, .held-film .film-standbild { width: 100%; height: 100%; }
/* Text stays readable over any frame: a deep night-red ground under the lower part. */
.held-film::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, color-mix(in srgb, var(--sp-nacht) 94%, transparent) 0%, color-mix(in srgb, var(--sp-nacht) 78%, transparent) 34%, color-mix(in srgb, var(--sp-nacht) 12%, transparent) 62%, transparent 80%);
}
.held-text {
  position: relative;
  padding-top: 120px;
  padding-bottom: clamp(32px, 7vh, 72px);
  max-width: 62rem;
}
.held h1 {
  font-size: clamp(2.7rem, 7.6vw, 6.2rem);
  line-height: 0.98;
  letter-spacing: -0.018em;
  font-weight: 750;
  max-width: 11ch;
  text-wrap: balance;
}
/* Low laptop windows: the headline gives way so both buttons stay above the fold (1366 x 650). */
.held h1 { font-size: clamp(2.7rem, min(7.6vw, 11.5vh), 6.2rem); }
.held-text { padding-top: min(120px, 15vh); }
.sp .unterzeile {
  margin-top: clamp(18px, 2.4vw, 32px);
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  line-height: 1.5;
  max-width: 40rem;
  color: color-mix(in srgb, var(--dw-flaeche) 92%, transparent);
}
.held .aktionen { margin-top: 28px; }
.sp .hinweis { margin-top: 18px; font-size: 0.95rem; color: var(--dw-daemmerung-leise); max-width: 40rem; }

@media (min-width: 900px) {
  /* Wide screens: text on the left, the house on the right stays bright. */
  .held-film::after {
    background:
      linear-gradient(to right, color-mix(in srgb, var(--sp-nacht) 92%, transparent) 0%, color-mix(in srgb, var(--sp-nacht) 78%, transparent) 40%, transparent 68%),
      linear-gradient(to top, color-mix(in srgb, var(--sp-nacht) 70%, transparent) 0%, transparent 45%);
  }
  /* The lit house stands on the right, the invitation on night red to its left. */
  .sp .unterzeile { max-width: min(40rem, 46vw); text-shadow: 0 1px 14px color-mix(in srgb, var(--sp-nacht) 85%, transparent); }
  .sp .schluss-bild { left: auto; right: 0; width: 64%; }
  .sp .schluss::before {
    left: 36%;
    background: linear-gradient(to right, var(--dw-nachtrot) 0%, color-mix(in srgb, var(--dw-nachtrot) 55%, transparent) 22%, transparent 50%);
  }
}

/* Pause button the script adds to every film (WCAG 2.2.2). */
.film-knopf {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 2;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--dw-flaeche) 40%, transparent);
  border-radius: 50%;
  background: color-mix(in srgb, var(--sp-nacht) 55%, transparent);
  color: var(--dw-flaeche);
  cursor: pointer;
}
.film-knopf svg { width: 18px; height: 18px; fill: currentColor; }
.film-knopf:focus-visible { outline: 3px solid var(--dw-fensterlicht); outline-offset: 2px; }
.held .film-knopf { top: 84px; bottom: auto; right: var(--dw-rand); }
/* The phone sits bottom right over the contract film; the button moves out of its way. */
.mit-handy .film-knopf { right: auto; left: 14px; }

/* --- Section rhythm --- */
.gross-titel {
  font-size: clamp(2.1rem, 5vw, 4rem) !important;
  line-height: 1.02 !important;
  letter-spacing: -0.02em !important;
  font-weight: 750 !important;
  text-wrap: balance;
}
.sp .einleitung {
  margin-top: clamp(16px, 1.8vw, 26px);
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
  line-height: 1.55;
  max-width: 40rem;
  color: var(--dw-grau);
}
.dw-nacht .einleitung { color: var(--dw-daemmerung-leise); }
main > section { padding-block: clamp(64px, 10vw, 140px); }

/* --- Story: five windows -------------------------------------------------- */
.geschichte-kopf { max-width: 48rem; }
.geschichte-raster {
  margin-top: clamp(40px, 6vw, 80px);
  display: grid;
  gap: 32px;
}
.geschichte-haus { display: none; }
.kapitel-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(56px, 9vw, 120px); }
.kapitel { display: grid; gap: 22px; }
.kapitel-bild {
  border-radius: var(--dw-radius-karte);
  aspect-ratio: 16 / 9;
  box-shadow: var(--dw-schatten-weich);
}
.kapitel-bild.bildschirm { overflow: hidden; background: var(--dw-flaeche); aspect-ratio: auto; }
.kapitel-bild.bildschirm img { width: 100%; height: auto; }
.kapitel-nr { color: var(--dw-daemmerung); font-weight: 600; }
.kapitel-nr .zahl { font-variant-numeric: tabular-nums; }
.kapitel h3 {
  margin-top: 6px;
  font-size: clamp(1.6rem, 2.8vw, 2.4rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  font-weight: 800;
}
.kapitel-text p:not(.kapitel-nr) { margin-top: 14px; font-size: 1.08rem; line-height: 1.6; max-width: 36rem; }
.kapitel-text .bei-ihnen {
  padding-left: 14px;
  border-left: 3px solid var(--dw-fensterlicht);
  color: var(--dw-graphit);
}
/* Phone with the real portal, laid over a film. */
.handy {
  border-radius: 34px;
  padding: 8px;
  background: var(--dw-graphit);
  box-shadow: 0 40px 70px -30px color-mix(in srgb, var(--sp-nacht) 75%, transparent), 0 0 0 1px color-mix(in srgb, var(--dw-flaeche) 8%, transparent) inset;
}
.handy img { border-radius: 27px; width: 100%; height: auto; }
.mit-handy { overflow: visible; }
.mit-handy .film-standbild, .mit-handy .film { border-radius: var(--dw-radius-karte); }
.handy--klein {
  position: absolute;
  right: clamp(10px, 4%, 36px);
  bottom: -28px;
  width: clamp(120px, 30%, 210px);
}

@media (max-width: 699px) {
  .kapitel-bild.bildschirm, .einblick .bildschirm--gross {
    width: min(300px, 82%);
    justify-self: center;
    padding: 8px;
    border-radius: 34px;
    background: var(--dw-graphit);
  }
  .kapitel-bild.bildschirm img, .bildschirm--gross img {
    border-radius: 27px;
    aspect-ratio: 390 / 700;
    object-fit: cover;
    object-position: top;
  }
  .mit-handy { margin-bottom: 40px; }
  .einblick-buehne { grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
  .einblick .bildschirm--gross, .einblick .handy--rollen { width: 100%; }
  /* Two phones side by side: short captions on the bezel, no band (beats the wide rule below). */
  .einblick .bildschirm--gross figcaption, .einblick .handy--rollen figcaption {
    background: none; padding: 10px 4px 4px; text-align: center; font-size: 0.82rem; line-height: 1.3; text-wrap: balance;
  }
  .handy-fenster { aspect-ratio: 390 / 700; }
}

@media (min-width: 1000px) {
  .geschichte-raster { grid-template-columns: 220px 1fr; gap: clamp(40px, 5vw, 96px); align-items: start; }
  .geschichte-haus { display: block; position: sticky; top: 120px; }
  .kapitel { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(32px, 4vw, 64px); align-items: center; }
  .kapitel:nth-child(even) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); }
  .kapitel:nth-child(even) .kapitel-bild { order: 2; }
}

/* The house that keeps track: windows light up to the chapter in view (startseite.js sets
   data-schritt; without the script every window is lit). */
.haus-zeiger { width: 100%; height: auto; overflow: visible; }
.hz-dach { fill: none; stroke: var(--dw-daemmerung); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.hz-wand { fill: var(--dw-daemmerung); }
.hz-f { fill: var(--dw-fensterlicht); transition: fill .5s var(--dw-bewegung), filter .5s var(--dw-bewegung); }
.geschichte-haus[data-schritt] .hz-f { fill: var(--dw-fenster-aus); }
.geschichte-liste { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 4px; }
.geschichte-liste li {
  padding: 8px 12px;
  border-radius: 10px;
  color: var(--dw-graphit);
  font-weight: 600;
  transition: background-color .3s var(--dw-bewegung), color .3s var(--dw-bewegung);
}
.geschichte-haus[data-schritt] .geschichte-liste li { color: var(--dw-grau); }
.geschichte-haus[data-schritt='1'] .hz-f[data-f='1'],
.geschichte-haus[data-schritt='2'] .hz-f:is([data-f='1'], [data-f='2']),
.geschichte-haus[data-schritt='3'] .hz-f:is([data-f='1'], [data-f='2'], [data-f='3']),
.geschichte-haus[data-schritt='4'] .hz-f:not([data-f='5']),
.geschichte-haus[data-schritt='5'] .hz-f { fill: var(--dw-fensterlicht); filter: drop-shadow(0 0 6px var(--dw-fensterlicht-glanz)); }
.geschichte-haus[data-schritt='1'] li[data-f='1'],
.geschichte-haus[data-schritt='2'] li[data-f='2'],
.geschichte-haus[data-schritt='3'] li[data-f='3'],
.geschichte-haus[data-schritt='4'] li[data-f='4'],
.geschichte-haus[data-schritt='5'] li[data-f='5'] { background: var(--dw-daemmerung); color: var(--dw-flaeche); }

/* --- A look inside: the real apps on the night-red stage --------------------- */
.einblick {
  background:
    radial-gradient(90% 70% at 70% 0%, var(--dw-daemmerung) 0%, var(--dw-daemmerung-tief) 45%, var(--dw-nachtrot) 100%);
  color: var(--dw-daemmerung-text);
}
.einblick-kopf { max-width: 52rem; box-sizing: content-box; }
.einblick-buehne {
  position: relative;
  margin-top: clamp(40px, 6vw, 80px);
  display: grid;
  gap: 28px;
  justify-items: center;
}
.bildschirm--gross {
  width: 100%;
  border-radius: 14px;
  overflow: hidden;
  background: var(--dw-flaeche);
  box-shadow: 0 50px 90px -40px color-mix(in srgb, var(--sp-nacht) 65%, transparent), 0 0 0 1px color-mix(in srgb, var(--dw-flaeche) 10%, transparent);
}
.bildschirm--gross img { width: 100%; height: auto; }
.einblick figcaption {
  padding: 12px 4px 0;
  color: var(--dw-daemmerung-leise);
  font-size: 0.95rem;
}
.bildschirm--gross figcaption { background: var(--dw-nachtrot); padding: 10px 14px; }
.handy--rollen { width: min(300px, 78vw); }
.handy-fenster {
  aspect-ratio: 390 / 760;
  overflow: hidden;
  border-radius: 27px;
  background: var(--dw-putz);
}
.handy-fenster img { border-radius: 0; }
.handy--rollen figcaption { text-align: center; padding-top: 14px; }
/* The portal scrolls slowly from the top to "your way home" and back, only while in view. */
@keyframes portal-rollen {
  0%, 12% { transform: translateY(0); }
  48%, 62% { transform: translateY(-42%); }
  100% { transform: translateY(0); }
}
.handy--rollen.sichtbar .handy-fenster img { animation: portal-rollen 18s var(--dw-bewegung) infinite; }
.sp .einblick-fuss { margin-top: 36px; font-size: 0.95rem; color: var(--dw-daemmerung-leise); }
@media (min-width: 900px) {
  .sp .einblick-buehne { display: block; padding-right: calc(var(--dw-rand) + clamp(220px, 21vw, 320px) - 72px); }
  .handy--rollen {
    position: absolute;
    right: var(--dw-rand);
    bottom: -40px;
    width: clamp(220px, 21vw, 320px);
  }
}

/* --- Trust --- */
.vertrauen-kopf { max-width: 48rem; }
.vertrauen-raster {
  margin-top: clamp(36px, 5vw, 64px);
  display: grid;
  gap: 16px;
}
.vertrauen-raster article {
  background: var(--dw-flaeche);
  border-radius: var(--dw-radius-karte);
  padding: clamp(22px, 2.6vw, 32px);
  box-shadow: var(--dw-schatten-zeile);
}
.vertrauen-raster h3 { font-size: 1.25rem; line-height: 1.25; }
.vertrauen-raster p { margin-top: 10px; line-height: 1.6; color: var(--dw-grau); }
.vertrauen-raster .vertrauen-haupt {
  background: var(--dw-graphit);
  color: var(--dw-flaeche);
}
.vertrauen-haupt h3 { font-size: clamp(1.5rem, 2.4vw, 2.1rem); letter-spacing: -0.02em; max-width: 22ch; }
.vertrauen-raster .vertrauen-haupt > p { color: color-mix(in srgb, var(--dw-flaeche) 81%, var(--dw-graphit)); max-width: 40rem; }
.symbol {
  width: 40px;
  height: 40px;
  padding: 8px;
  margin-bottom: 14px;
  border-radius: 12px;
  background: var(--dw-fehler-weich);
  fill: none;
  stroke: var(--dw-daemmerung);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  box-sizing: border-box;
}
/* The house is the Danwood logo (frontend/public/danwood-icon.svg, scaled 1:5): filled, no stroke. */
.symbol--marke { fill: var(--dw-daemmerung); stroke: none; }
.tausch { margin-top: 24px; display: grid; gap: 10px; }
.tausch-zeile {
  border-radius: 14px;
  padding: 14px 16px;
  background: color-mix(in srgb, var(--dw-flaeche) 7%, transparent);
  border: 1px solid color-mix(in srgb, var(--dw-flaeche) 12%, transparent);
}
.vertrauen-raster .tausch-wer { margin: 0; font-size: 0.9rem; font-weight: 600; color: var(--dw-fensterlicht); }
.vertrauen-raster .tausch-text { margin-top: 6px; color: var(--dw-flaeche); line-height: 1.55; overflow-wrap: anywhere; }
.tausch mark {
  background: color-mix(in srgb, var(--dw-fensterlicht) 20%, transparent);
  color: var(--dw-flaeche);
  border-radius: 6px;
  padding: 1px 5px;
}
.tausch-zeile--modell mark { background: color-mix(in srgb, var(--dw-daemmerung-hell) 55%, transparent); }
@media (min-width: 900px) {
  .vertrauen-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .vertrauen-haupt { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); column-gap: 48px; align-items: start; }
  .vertrauen-haupt .tausch { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; }
}

/* --- Steps --- */
.ablauf { background: var(--dw-flaeche); }
.schritte {
  list-style: none;
  counter-reset: schritt;
  margin: clamp(32px, 5vw, 56px) 0 0;
  padding: 0;
  display: grid;
  gap: 28px;
}
.schritte li { counter-increment: schritt; position: relative; padding-top: 64px; }
.schritte li::before {
  content: counter(schritt);
  position: absolute;
  top: 0;
  left: 0;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: var(--dw-daemmerung);
  color: var(--dw-flaeche);
  font: 700 1.2rem/1 var(--dw-schrift-text);
  font-variant-numeric: tabular-nums;
}
.schritte li:last-child::before { background: var(--dw-fensterlicht); color: var(--dw-graphit); }
.schritte h3 { font-size: 1.4rem; }
.schritte p { margin-top: 8px; line-height: 1.6; color: var(--dw-grau); max-width: 30rem; }
@media (min-width: 900px) {
  .schritte { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
  .schritte li:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 24px;
    left: 64px;
    right: -24px;
    border-top: 2px dashed var(--dw-fuge);
  }
}

/* --- Closing: the house with every window lit --- */
.schluss {
  position: relative;
  isolation: isolate;
  min-height: min(80vh, 760px);
  display: grid;
  align-items: end;
  color: var(--dw-flaeche);
  background: var(--dw-nachtrot);
}
.schluss-bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.schluss::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, color-mix(in srgb, var(--sp-nacht) 95%, transparent) 0%, color-mix(in srgb, var(--sp-nacht) 80%, transparent) 40%, color-mix(in srgb, var(--sp-nacht) 15%, transparent) 75%);
}
.schluss-inhalt { padding-block: clamp(48px, 8vw, 96px); max-width: 60rem; }
.schluss .aktionen { margin-top: 28px; }
.kontakt {
  margin-top: 36px;
  font-style: normal;
  display: grid;
  gap: 2px;
  line-height: 1.5;
  color: var(--dw-daemmerung-leise);
}
.kontakt strong { color: var(--dw-flaeche); margin-top: 6px; }

/* --- Placeholder of missing company data (visible until Gate G-Recht) --- */
.platzhalter {
  background: var(--dw-fensterlicht);
  color: var(--dw-graphit);
  padding: 1px 6px;
  border-radius: 6px;
  font-weight: 600;
}

/* --- Footer --- */
.fuss { padding-block: 32px 40px; background: var(--dw-graphit); color: color-mix(in srgb, var(--dw-flaeche) 89%, var(--dw-graphit)); }
.fuss-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.fuss nav { display: flex; flex-wrap: wrap; gap: 4px 8px; }
.fuss nav a { color: var(--dw-flaeche); padding: 10px 8px; display: inline-block; }
.fuss .klein { margin-top: 16px; font-size: 0.9rem; color: color-mix(in srgb, var(--dw-flaeche) 73%, var(--dw-graphit)); max-width: 60rem; line-height: 1.55; }

/* --- Skip link --- */
.uebersprung {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 10;
  padding: 10px 16px;
  border-radius: var(--dw-radius-knopf);
  background: var(--dw-fensterlicht);
  color: var(--dw-graphit);
  font-weight: 600;
}
.uebersprung:focus { top: 12px; }

/* --- Legal pages --- */
.recht { padding-block: clamp(32px, 6vw, 72px); width: 100%; max-width: calc(52rem + 2 * var(--dw-rand)); box-sizing: border-box; margin-inline: auto; }
@media (min-width: 1500px) { .recht { max-width: calc(62rem + 2 * var(--dw-rand)); font-size: 1.15rem; } }
/* Legal pages and the 404 page: the footer stays at the foot of a tall window. */
.sp:has(> main.recht) { display: grid; grid-template-rows: auto 1fr auto; }
.sp:has(> main.recht) > .uebersprung { grid-area: auto; }
/* Links inside running text: a 44 px hit area on phones without changing the line spacing. */
@media (max-width: 600px) { .recht a { padding-block: 12px; } }
/* Page for an unknown address (404.html). */
.nichts { display: grid; gap: 16px; justify-items: start; align-content: start; }
.nichts .aktionen { margin-top: 12px; }
.sp .nichts .knopf--rot { color: var(--dw-flaeche); }
.recht h1 { font-size: clamp(2rem, 5vw, 3.2rem); letter-spacing: -0.03em; font-weight: 800; }
.recht h2 { font-size: 1.3rem; margin-top: 36px; }
.recht p, .recht ul, .recht address { margin-top: 12px; line-height: 1.6; font-style: normal; }
.recht ul { padding-left: 1.2em; }
.recht .stand { margin-top: 10px; color: var(--dw-grau); }

/* --- Reduced motion: stills only, no scrolling phone, windows simply lit --- */
@media (prefers-reduced-motion: reduce) {
  .film-rahmen .film, .film-knopf { display: none !important; }
  .handy--rollen.sichtbar .handy-fenster img { animation: none; }
  .hz-f, .geschichte-liste li, .knopf { transition: none; }
}