/* HeimatDigital – Gestaltung
   Dunkler Grund, ein Petrol aus dem Logo als Flaeche fuer den Abschnitt
   "Wer das macht". Keine Leuchtfarbe. Fliesstext traegt vollen Kontrast,
   das gedaempfte Blaugrau nur noch Beschriftungen und Nebensaetze. */

@font-face {
  font-family: "Schibsted Grotesk";
  src: url("fonts/schibsted-grotesk-variable.woff2") format("woff2-variations");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --grund: #101010;
  --grund-erhoben: #17191b;

  /* Trennlinien ohne Bedienfunktion */
  --linie: #333333;
  --linie-leise: #262626;
  /* Raender an Bedienelementen, mindestens 3:1 gegen den Grund */
  --linie-bedien: #6d6d6d;

  --text: #fffdf9;
  --text-leise: #9dafbd;

  --petrol: #004160;
  --petrol-linie: #1d6383;
  /* Nur fuer Grafik und Linien, nie fuer Text: 4,2:1 gegen den Grund */
  --petrol-hell: #2a7ea6;

  --breite: 1280px;
  --rand: clamp(20px, 5vw, 64px);
  --abstand-abschnitt: clamp(72px, 10vw, 104px);
  --kopf-hoehe: 72px;

  --radius-klein: 5px;

  color-scheme: dark;
}

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

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font-family: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  font-size: 1.0625rem;
  line-height: 1.65;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Sprungziele nicht unter der klebenden Kopfzeile parken */
[id] { scroll-margin-top: calc(var(--kopf-hoehe) + 24px); }

.nur-vorleser {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.springmarke {
  position: absolute;
  left: var(--rand); top: 8px;
  transform: translateY(-200%);
  background: var(--text);
  color: var(--grund);
  padding: 10px 16px;
  border-radius: var(--radius-klein);
  text-decoration: none;
  z-index: 100;
  transition: transform 0.16s ease-out;
}
.springmarke:focus { transform: translateY(0); }

.huelle {
  width: 100%;
  max-width: var(--breite);
  margin-inline: auto;
  padding-inline: var(--rand);
}

/* Typografie */

.display {
  font-size: clamp(2.55rem, 6.6vw, 5.6rem);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -0.022em;
  margin: 0;
  text-wrap: balance;
}

h1, h2 {
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.14;
  margin: 0;
  text-wrap: balance;
}

h2 { font-size: clamp(1.85rem, 3.6vw, 2.9rem); }

h3 {
  font-size: clamp(1.2rem, 2vw, 1.45rem);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.01em;
  margin: 0 0 8px;
}

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

.leise { color: var(--text-leise); }

.grosser-text {
  font-size: clamp(1.12rem, 1.7vw, 1.32rem);
  line-height: 1.55;
  max-width: 50ch;
}

.etikett {
  display: block;
  font-size: 0.8125rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-leise);
}

.abstand-oben { margin-top: 24px; }

/* Kopfzeile */

.kopf {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(16, 16, 16, 0.88);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--linie-leise);
}

.kopf-innen {
  display: flex;
  align-items: center;
  gap: clamp(12px, 2vw, 28px);
  min-height: var(--kopf-hoehe);
}

.marke {
  margin-right: auto;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.marke img { height: 40px; width: auto; }

.navigation {
  order: 1;
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.9vw, 26px);
  font-size: 0.98rem;
}

.navigation a { padding: 8px 2px; text-decoration: none; }
.navigation a:hover { text-decoration: underline; text-underline-offset: 6px; }
.navigation a[aria-current="page"] {
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-thickness: 1px;
}

/* Anfrageknopf in der Kopfzeile, auf jedem Bildschirm erreichbar.
   Die Kopfzeile klebt oben, damit ist das der einzige Aufruf, den die
   Startseite braucht. */
.knopf--kopf {
  order: 2;
  min-height: 42px;
  padding: 9px 20px;
  font-size: 0.95rem;
  white-space: nowrap;
}

/* Ohne JavaScript gibt es keinen Schalter, dann steht die Navigation offen */
.nav-schalter {
  order: 3;
  display: none;
  background: none;
  border: 1px solid var(--linie-bedien);
  border-radius: var(--radius-klein);
  color: var(--text);
  font: inherit;
  font-size: 0.95rem;
  padding: 10px 14px;
  min-height: 44px;
  cursor: pointer;
  transition: border-color 0.18s ease;
}
.nav-schalter:hover { border-color: var(--text); }

@media (max-width: 860px) {
  .marke img { height: 34px; }
  .knopf--kopf { order: 1; padding: 9px 16px; }

  /* Ohne JavaScript rutscht die Navigation als eigene Zeile unter das Logo */
  .kopf-innen { flex-wrap: wrap; }
  .navigation {
    order: 4;
    flex-basis: 100%;
    flex-wrap: wrap;
    gap: 2px 20px;
    padding-bottom: 8px;
  }

  /* Mit JavaScript wird daraus ein Klappmenue */
  .js .nav-schalter { display: block; }
  .js .navigation {
    position: absolute;
    inset: 100% 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--grund);
    border-bottom: 1px solid var(--linie-leise);
    padding: 8px var(--rand) 20px;
  }
  .js .navigation[hidden] { display: none; }
  .js .navigation a {
    padding: 14px 0;
    border-bottom: 1px solid var(--linie-leise);
    font-size: 1.1rem;
  }
}

/* Abschnitte */

.abschnitt { padding-block: var(--abstand-abschnitt); }
.abschnitt + .abschnitt { border-top: 1px solid var(--linie-leise); }

.kopfzeile-abschnitt { max-width: 58ch; margin-bottom: clamp(36px, 5vw, 60px); }

/* Aufmacher */

.aufmacher {
  padding-top: clamp(52px, 8vw, 108px);
  padding-bottom: clamp(52px, 8vw, 104px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
  gap: clamp(36px, 5vw, 72px);
  align-items: center;
}

@media (max-width: 940px) {
  .aufmacher { grid-template-columns: 1fr; gap: clamp(32px, 6vw, 48px); }
}

.aufmacher .display { max-width: 15ch; }

.knopfreihe {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(28px, 3.5vw, 40px);
}

.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 50px;
  padding: 12px 26px;
  border: 1px solid var(--text);
  border-radius: var(--radius-klein);
  font-size: 1rem;
  letter-spacing: 0.01em;
  background: var(--text);
  color: var(--grund);
  cursor: pointer;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: color 0.3s ease, border-color 0.35s ease;
}
.knopf::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--petrol);
  transform: translateX(-101%);
  transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.knopf:hover { color: var(--text); border-color: var(--petrol-hell); text-decoration: none; }
.knopf:hover::before { transform: none; }
.knopf:active { transform: translateY(1px); }
.knopf:disabled,
.knopf[aria-disabled="true"] {
  border-color: var(--linie-bedien);
  color: var(--text-leise);
  background: none;
  cursor: default;
  transform: none;
}
.knopf svg { flex: none; width: 16px; height: 16px; fill: currentColor; }

.knopf--leise {
  background: none;
  color: var(--text);
  border-color: var(--linie-bedien);
}
.knopf--leise::before { background: var(--text); }
.knopf--leise:hover { border-color: var(--text); color: var(--grund); }

/* Handyrahmen */

.rahmen {
  display: block;
  position: relative;
  aspect-ratio: 390 / 844;
  border-radius: clamp(22px, 7%, 34px);
  padding: 6px;
  background: linear-gradient(160deg, #34383c, #101010 55%, #24282b);
  box-shadow: 0 16px 30px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}

.rahmen::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid rgba(255, 253, 249, 0.14);
  pointer-events: none;
}

.rahmen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  border-radius: clamp(17px, 5.5%, 28px);
  background: var(--grund-erhoben);
}

/* ======================================================================
   Unsere Arbeiten

   Auf arbeiten.html liegt pro Arbeit das Bild der Seite am Rechner in
   einem Browserfenster, das Handy steht rechts unten davor. Auf der
   Startseite stehen die drei Fenster klein nebeneinander und fuehren auf
   die Unterseite. Alle Bilder sind lokale WebP, nichts wird nachgeladen.
   ====================================================================== */

/* Browserfenster, gezeichnet in CSS */

.fenster {
  display: block;
  border: 1px solid var(--linie);
  border-radius: 10px;
  overflow: hidden;
  background: var(--grund-erhoben);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.45);
}

.fenster-leiste {
  display: flex;
  align-items: center;
  gap: 7px;
  height: clamp(24px, 2.8vw, 36px);
  padding-inline: clamp(10px, 1.4vw, 16px);
  background: #1c1e21;
  border-bottom: 1px solid var(--linie-leise);
}
.fenster-leiste i {
  flex: none;
  width: clamp(6px, 0.7vw, 9px);
  height: clamp(6px, 0.7vw, 9px);
  border-radius: 50%;
  background: rgba(255, 253, 249, 0.22);
}
.fenster-adresse {
  min-width: 0;
  margin-left: clamp(6px, 1.2vw, 14px);
  padding: 4px 14px;
  border-radius: 999px;
  background: rgba(255, 253, 249, 0.06);
  color: var(--text-leise);
  font-size: clamp(0.66rem, 0.9vw, 0.8rem);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fenster img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top center;
}

/* Auf der Unterseite fuehrt das Fenster zur Live-Seite */
a.fenster { text-decoration: none; transition: border-color 0.3s ease; }
@media (hover: hover) {
  a.fenster:hover { border-color: var(--linie-bedien); }
}

/* Aufmacher der Unterseite */

.arbeiten-aufmacher {
  padding-top: clamp(52px, 8vw, 108px);
  padding-bottom: clamp(44px, 6vw, 72px);
}
.arbeiten-aufmacher .grosser-text { max-width: 54ch; }

.arbeiten-sprung {
  list-style: none;
  margin: clamp(24px, 3vw, 36px) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0 28px;
}
.arbeiten-sprung a { display: inline-block; padding-block: 10px; }

/* Eine Arbeit */

.arbeit {
  padding-block: var(--abstand-abschnitt);
  border-top: 1px solid var(--linie-leise);
}

/* Etikett immer unter dem Namen, damit Name und Branche als Einheit lesen */
.arbeit-kopf { margin-bottom: clamp(28px, 4vw, 48px); }
.arbeit-kopf .etikett { margin: 10px 0 0; }

/* Fenster links, Handy rechts unten davor. Das Polster rechts und unten
   ist der Platz, in den das Handy hinausragt. */
.schaufenster {
  position: relative;
  margin: 0;
  padding: 0 clamp(44px, 12%, 160px) clamp(48px, 10%, 120px) 0;
}
.schaufenster .rahmen {
  position: absolute;
  right: 0;
  bottom: 0;
  width: clamp(96px, 22%, 260px);
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.6);
}

.arbeit-text {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: clamp(28px, 5vw, 72px);
  margin-top: clamp(36px, 5vw, 56px);
}
.arbeit-text h3 { margin-bottom: 10px; }
.arbeit-text p { max-width: 60ch; }

@media (max-width: 800px) {
  .arbeit-text { grid-template-columns: 1fr; }
}

/* Eine, zwei oder vier Spalten, nie drei: sonst stuende der Link zur
   Seite allein in einer zweiten Reihe */
.arbeit-daten {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px clamp(24px, 3vw, 40px);
  margin: clamp(36px, 5vw, 56px) 0 0;
}
.arbeit-daten > div { border-top: 1px solid var(--linie); padding-top: 14px; }
.arbeit-daten dt { font-size: 0.9rem; color: var(--text-leise); }
.arbeit-daten dd { margin: 4px 0 0; }
.arbeit-daten a { display: inline-block; padding-block: 8px; margin-block: -8px; }

@media (min-width: 560px) {
  .arbeit-daten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .arbeit-daten { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.arbeiten-schluss { border-top: 1px solid var(--linie-leise); }

/* Vorschau auf der Startseite */

/* Am Handy untereinander, am Tablet die erste gross und zwei darunter,
   am Rechner drei nebeneinander. Nie zwei plus eine einzelne. */
.vorschau {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(32px, 3.5vw, 44px);
}
@media (min-width: 600px) {
  .vorschau { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vorschau li:first-child { grid-column: 1 / -1; }
}
@media (min-width: 940px) {
  .vorschau { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .vorschau li:first-child { grid-column: auto; }
}

.vorschau-link { display: block; text-decoration: none; }
.vorschau-link:hover { text-decoration: none; }

.vorschau .fenster {
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.4);
  transition:
    transform 0.5s cubic-bezier(0.2, 0.7, 0.3, 1),
    border-color 0.3s ease;
}
.vorschau .fenster-leiste { height: 26px; padding-inline: 11px; gap: 6px; }
.vorschau .fenster-leiste i { width: 7px; height: 7px; }
.vorschau .fenster-adresse { font-size: 0.7rem; padding: 3px 12px; margin-left: 8px; }

.vorschau h3 { margin: 20px 0 2px; }

@media (hover: hover) {
  .vorschau-link:hover .fenster { transform: translateY(-6px); border-color: var(--linie-bedien); }
  .vorschau-link:hover h3 { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
}

/* Liste der Leistungen */

.liste {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--linie-leise);
}

.liste > li {
  position: relative;
  border-bottom: 1px solid var(--linie-leise);
  transition: padding-left 0.4s cubic-bezier(0.2, 0.7, 0.3, 1);
  padding-block: clamp(22px, 3vw, 36px);
  display: grid;
  grid-template-columns: minmax(170px, 22%) minmax(0, 1fr);
  gap: clamp(8px, 2vw, 40px);
  align-items: baseline;
}

.liste > li::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 1px;
  background: var(--petrol-hell);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.55s cubic-bezier(0.2, 0.7, 0.3, 1);
}

@media (hover: hover) {
  .liste > li:hover { padding-left: 14px; }
  .liste > li:hover::after { transform: scaleX(1); }
}

.liste h3 { margin: 0; }
.liste p { max-width: 62ch; }

@media (max-width: 700px) {
  .liste > li { grid-template-columns: 1fr; gap: 6px; }
}

/* Ablauf */

.zahl {
  display: block;
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--text-leise);
  font-variant-numeric: tabular-nums;
}

.schritte {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1px;
  background: var(--linie-leise);
  border-block: 1px solid var(--linie-leise);
}

.schritte li {
  background: var(--grund);
  padding: clamp(20px, 2.8vw, 32px) 0 clamp(20px, 2.8vw, 32px) 20px;
  border-left: 2px solid var(--linie-leise);
  display: grid;
  grid-template-columns: 2.6rem 1fr;
  transition: border-color 0.5s ease, opacity 0.6s ease;
  gap: clamp(12px, 2vw, 28px);
  align-items: start;
}

.schritte .zahl { margin: 0; padding-top: 4px; }
.schritte p { margin: 6px 0 0; max-width: 60ch; }

/* Haeufige Fragen */

.fragen { border-top: 1px solid var(--linie-leise); max-width: 78ch; }

.fragen details {
  border-bottom: 1px solid var(--linie-leise);
}

.fragen summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: clamp(18px, 2.4vw, 26px) 0;
  cursor: pointer;
  list-style: none;
  font-size: clamp(1.08rem, 1.7vw, 1.25rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  min-height: 44px;
}
.fragen summary::-webkit-details-marker { display: none; }
.fragen summary:hover { color: var(--text-leise); }

.fragen summary::after {
  content: "";
  flex: none;
  width: 13px; height: 13px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-3px, -3px);
  transition: transform 0.2s ease;
}
.fragen details[open] summary::after { transform: rotate(225deg) translate(-3px, -3px); }

.fragen-antwort { padding-bottom: clamp(20px, 2.6vw, 28px); overflow: hidden; }
.fragen-antwort p { max-width: 62ch; color: var(--text-leise); }

/* Kontakt */

.kontakt-raster {
  display: grid;
  gap: clamp(32px, 5vw, 64px);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  align-items: start;
}

@media (max-width: 860px) {
  .kontakt-raster { grid-template-columns: 1fr; }
}

.direkt {
  list-style: none;
  margin: 30px 0 0;
  padding: 0;
  display: grid;
  gap: 18px;
  font-size: 1.1rem;
}
.direkt span { margin-bottom: 2px; }
.direkt a {
  display: inline-block;
  text-decoration: none;
  padding-block: 6px;
  min-height: 34px;
}
.direkt a:hover { text-decoration: underline; text-underline-offset: 4px; }

.feld { display: grid; gap: 8px; margin-bottom: 18px; }

.feld label { font-size: 0.95rem; color: var(--text-leise); }
.feld .zusatz { color: var(--text-leise); }

.feld input,
.feld textarea {
  width: 100%;
  font: inherit;
  font-size: 1rem;
  color: var(--text);
  background: var(--grund-erhoben);
  border: 1px solid var(--linie-bedien);
  border-radius: var(--radius-klein);
  padding: 13px 14px;
  min-height: 50px;
}

.feld textarea { min-height: 150px; resize: vertical; line-height: 1.5; }

.feld input:focus,
.feld textarea:focus {
  border-color: var(--text);
  outline: 2px solid var(--text);
  outline-offset: 1px;
}

.honig {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.formular-hinweis { font-size: 0.9rem; color: var(--text-leise); margin-top: 16px; }
.formular-hinweis a { color: var(--text); }

/* Fußzeile */

.fuss {
  border-top: 1px solid var(--linie-leise);
  padding-block: clamp(40px, 6vw, 64px);
  font-size: 0.98rem;
}

.fuss-innen {
  display: flex;
  flex-wrap: wrap;
  gap: 28px 48px;
  justify-content: space-between;
  align-items: flex-start;
}

.fuss img { height: 44px; width: auto; margin-bottom: 18px; }
.fuss address { font-style: normal; color: var(--text-leise); }

.fuss-links {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.fuss-links a {
  display: inline-block;
  text-decoration: none;
  padding-block: 10px;
}
.fuss-links a:hover { text-decoration: underline; text-underline-offset: 4px; }

.fuss-schluss {
  margin-top: 36px;
  padding-top: 20px;
  border-top: 1px solid var(--linie-leise);
  font-size: 0.9rem;
  color: var(--text-leise);
}
.fuss-schluss--nackt { margin-top: 0; padding-top: 0; border-top: 0; }

/* Rechtsseiten und Antwortseiten */

.text-seite { max-width: 70ch; padding-block: clamp(52px, 7vw, 88px); }
.text-seite h2 { font-size: clamp(1.4rem, 2.4vw, 1.85rem); margin: 44px 0 14px; }
.text-seite h3 { margin-top: 30px; }
.text-seite ul { padding-left: 1.2em; }
.text-seite li { margin-bottom: 8px; }
.text-seite .zurueck { margin-top: 48px; }

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

   Alles hier ist Zierde. Ohne JavaScript und bei reduzierter Bewegung
   steht jeder Inhalt sofort sichtbar da, nichts haengt an einer
   Animation. Bewegt werden nur transform und opacity, damit auch
   aeltere Handys das ohne Ruckeln schaffen.
   ====================================================================== */

/* Lesefortschritt */

.fortschritt {
  position: fixed;
  inset: 0 0 auto 0;
  height: 2px;
  z-index: 60;
  pointer-events: none;
}
.fortschritt span {
  display: block;
  height: 100%;
  background: var(--petrol-hell);
  transform: scaleX(0);
  transform-origin: left;
}

/* Kopfzeile schrumpft beim Scrollen */

.kopf { transition: background-color 0.3s ease; }
.kopf-innen { transition: min-height 0.35s cubic-bezier(0.2, 0.7, 0.3, 1); }
.marke img { transition: height 0.35s cubic-bezier(0.2, 0.7, 0.3, 1); }

.kopf--klein { background: rgba(16, 16, 16, 0.94); }
.kopf--klein .kopf-innen { min-height: 58px; }
.kopf--klein .marke img { height: 32px; }
@media (max-width: 860px) {
  .kopf--klein .marke img { height: 28px; }
}

/* Einblenden beim Scrollen */

.js [data-erscheint] {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.75s cubic-bezier(0.2, 0.7, 0.3, 1) var(--verzoegerung, 0s),
    transform 0.75s cubic-bezier(0.2, 0.7, 0.3, 1) var(--verzoegerung, 0s);
}
.js [data-erscheint].sichtbar { opacity: 1; transform: none; }

/* Ueberschrift Wort fuer Wort, jedes Wort in eigener Blende */

.wort {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-bottom: 0.14em;
  margin-bottom: -0.14em;
}
.wort-innen {
  display: inline-block;
  transform: translateY(105%);
  transition: transform 0.85s cubic-bezier(0.16, 0.9, 0.3, 1) var(--verzoegerung, 0s);
}
.wort-innen.sichtbar { transform: none; }

/* Bauplan im Aufmacher */

.bauplan-halt { width: 100%; }
.bauplan { width: 100%; height: auto; display: block; overflow: visible; }

/* Strichlaengen sind ausgerechnet, weil pathLength auf rect nicht in
   jedem Browser greift. Etwas zu lang gesetzt schadet nicht. */
.bp-rahmen {
  fill: none;
  stroke: rgba(255, 253, 249, 0.3);
  stroke-width: 1.4;
  stroke-dasharray: 1400;
  stroke-dashoffset: 1400;
}
.bp-rahmen.bp-t2 { stroke-dasharray: 400; stroke-dashoffset: 400; }
.bp-rahmen.bp-handy { stroke-dasharray: 680; stroke-dashoffset: 680; }
.bp-grund { fill: var(--grund); }
.bp-fuellung { fill: rgba(255, 253, 249, 0.13); }
.bp-punkt { fill: rgba(255, 253, 249, 0.26); }
.bp-balken { fill: rgba(255, 253, 249, 0.32); }
.bp-karte { fill: rgba(255, 253, 249, 0.07); stroke: rgba(255, 253, 249, 0.12); stroke-width: 1; }
.bp-akzent { fill: var(--petrol-hell); }

/* Startzustand: alles unsichtbar, damit nichts aufblitzt */
.bp-fuellung,
.bp-punkt,
.bp-balken,
.bp-karte,
.bp-akzent,
.bp-grund { opacity: 0; }

.bauplan rect,
.bauplan circle { transform-box: fill-box; }

@keyframes bp-zeichnen { to { stroke-dashoffset: 0; } }

@keyframes bp-auf {
  from { opacity: 0; transform: translateY(9px); }
  to   { opacity: 1; transform: none; }
}

@keyframes bp-breit {
  from { opacity: 0; transform: scaleX(0); }
  to   { opacity: 1; transform: scaleX(1); }
}

@keyframes bp-pop {
  from { opacity: 0; transform: scale(0.55); }
  60%  { opacity: 1; transform: scale(1.06); }
  to   { opacity: 1; transform: scale(1); }
}

.bp-rahmen { animation: bp-zeichnen 1.15s cubic-bezier(0.5, 0, 0.2, 1) 0.25s both; }
.bp-t2 { animation-duration: 0.5s; animation-delay: 0.95s; }

.bp-punkt,
.bp-fuellung,
.bp-karte,
.bp-grund { animation: bp-auf 0.6s cubic-bezier(0.2, 0.7, 0.3, 1) both; }
.bp-balken { animation: bp-breit 0.75s cubic-bezier(0.2, 0.7, 0.3, 1) both; transform-origin: left center; }
.bp-akzent { animation: bp-pop 0.55s cubic-bezier(0.3, 1.3, 0.5, 1) both; }

.bp-t3  { animation-delay: 1.15s; }
.bp-t3b { animation-delay: 1.22s; }
.bp-t3c { animation-delay: 1.30s; }
.bp-t4  { animation-delay: 1.48s; }
.bp-t4b { animation-delay: 1.56s; }
.bp-t4c { animation-delay: 1.63s; }
.bp-t5  { animation-delay: 1.78s; }
.bp-t5b { animation-delay: 1.92s; }
.bp-t6  { animation-delay: 2.12s; }
.bp-t6b { animation-delay: 2.22s; }
.bp-t7  { animation-delay: 2.38s; }
.bp-t8  { animation-delay: 2.58s; }
.bp-t8b { animation-delay: 2.68s; }
.bp-t8c { animation-delay: 2.78s; }
.bp-t9  { animation-delay: 3.00s; }
.bp-t10  { animation-delay: 3.32s; }
.bp-t10b { animation-delay: 3.42s; }
.bp-t11  { animation-delay: 3.56s; }
.bp-t11b { animation-delay: 3.66s; }
.bp-t12  { animation-delay: 3.82s; }

/* Der Handyrahmen wird gezeichnet statt eingeblendet */
rect.bp-rahmen.bp-handy { animation: bp-zeichnen 0.9s cubic-bezier(0.5, 0, 0.2, 1) 3s both; opacity: 1; }

/* Prueflinie, laeuft dauerhaft langsam durch */
.bp-pruefer {
  fill: var(--petrol-hell);
  opacity: 0;
  animation: bp-pruefen 6.5s cubic-bezier(0.6, 0, 0.4, 1) 4.2s infinite;
}
@keyframes bp-pruefen {
  0%        { opacity: 0; transform: translateY(0); }
  8%        { opacity: 0.55; }
  55%       { opacity: 0.55; transform: translateY(398px); }
  62%, 100% { opacity: 0; transform: translateY(398px); }
}

/* Zeiger tippt erst auf den Knopf im Entwurf, dann auf den am Handy */
.bp-zeiger { opacity: 0; animation: bp-zeiger-lauf 8.5s cubic-bezier(0.5, 0, 0.2, 1) 4.4s infinite; }
.bp-zeiger-kern { fill: var(--text); opacity: 0.9; }
.bp-zeiger-ring {
  fill: none;
  stroke: var(--petrol-hell);
  stroke-width: 1.5;
  transform-box: fill-box;
  transform-origin: center;
  animation: bp-klick 8.5s linear 4.4s infinite;
}

@keyframes bp-zeiger-lauf {
  0%        { opacity: 0; transform: translate(300px, 350px); }
  7%        { opacity: 1; }
  20%, 30%  { opacity: 1; transform: translate(77px, 217px); }
  48%, 58%  { opacity: 1; transform: translate(411px, 282px); }
  78%       { opacity: 1; transform: translate(300px, 350px); }
  88%, 100% { opacity: 0; transform: translate(300px, 350px); }
}

@keyframes bp-klick {
  0%, 20%   { transform: scale(0); opacity: 0; }
  24%       { transform: scale(0.45); opacity: 0.6; }
  36%       { transform: scale(1.35); opacity: 0; }
  37%, 48%  { transform: scale(0); opacity: 0; }
  52%       { transform: scale(0.45); opacity: 0.6; }
  64%       { transform: scale(1.35); opacity: 0; }
  65%, 100% { transform: scale(0); opacity: 0; }
}

/* Laufband */

.band {
  overflow: hidden;
  border-block: 1px solid var(--linie-leise);
  background: var(--grund-erhoben);
  padding-block: clamp(14px, 2vw, 20px);
  user-select: none;
}
.band-lauf {
  display: flex;
  width: max-content;
  animation: band-lauf 42s linear infinite;
}
.band:hover .band-lauf { animation-play-state: paused; }
.band-inhalt {
  display: flex;
  align-items: center;
  white-space: nowrap;
  font-size: clamp(1.05rem, 2.2vw, 1.6rem);
  letter-spacing: -0.01em;
  color: var(--text-leise);
}
.band-inhalt i {
  display: inline-block;
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--petrol-hell);
  margin-inline: clamp(20px, 3vw, 44px);
}
@keyframes band-lauf { to { transform: translateX(-50%); } }

/* Zahlen */

.zahlen { background: var(--petrol); padding-block: var(--abstand-abschnitt); }

.zahlen-raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: clamp(26px, 3.5vw, 44px);
  margin: clamp(34px, 5vw, 54px) 0 0;
}

.zahl-kachel {
  border-top: 1px solid var(--petrol-linie);
  padding-top: 18px;
}
.zahl-kachel dt {
  font-size: clamp(1.6rem, 2.8vw, 2.2rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.zahl-kachel dd {
  margin: 12px 0 0;
  color: var(--text-leise);
  font-size: 0.96rem;
  line-height: 1.5;
  max-width: 32ch;
}

/* Ablauf: der Schritt im Blick wird hervorgehoben */

.js .schritte li[data-schritt] { opacity: 0.42; }
.js .schritte li[data-schritt].aktiv { opacity: 1; }
.schritte li[data-schritt].aktiv { border-left-color: var(--petrol-hell); }
.schritte .zahl { transition: color 0.45s ease; }
.schritte li[data-schritt].aktiv .zahl { color: var(--text); }

/* Reduzierte Bewegung: alles steht still und sichtbar */

@media (prefers-reduced-motion: reduce) {
  .js [data-erscheint] { opacity: 1 !important; transform: none !important; }
  .wort-innen { transform: none !important; }
  .js .schritte li[data-schritt] { opacity: 1 !important; }
  .band-lauf { animation: none !important; }
  .bauplan * {
    animation: none !important;
    opacity: 1 !important;
    stroke-dashoffset: 0 !important;
    transform: none !important;
  }
  .bp-pruefer, .bp-zeiger { display: none !important; }
  .fortschritt { display: none !important; }
}