/* DigitWave – Gestaltung der Website (Stand 2026-11-03): Startseite mit den vier Leistungen, je Leistung eine eigene
   Seite, dazu Preise und Fragen.
   Ein Motiv: die abgerundete Kachel aus dem Logo. Sie ist die Bühne für Bilder und Live-Demos, die Form der Kacheln
   und das kleine Zeichen vor jedem Listenpunkt.
   Farben: Tiefblau-Schwarz #16202b aus dem Logo für Text, fleetstation-Blau #0071e3 als einzige Akzentfarbe,
   heller kühler Grund. Schrift: Inter, lokal eingebunden. */

@font-face {
  font-family: "Inter";
  src: url("/schrift/inter.woff2") format("woff2-variations"), url("/schrift/inter.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #f4f6f9;
  --papier: #ffffff;
  --surface: #e6eaf0;
  --surface-dunkel: #d6dce5;
  --ink: #16202b;
  --muted: #4b5866;
  --accent: #0071e3; /* fleetstation-Blau: weiße Schrift darauf 4,7:1 */
  --accent-tief: #0062c4; /* für Links und blaue Schrift: 5,8:1 auf Weiß */
  --accent-hauch: #e3eefc;
  --weiss: #ffffff;

  /* Farben in den nachgebauten App-Ausschnitten (Chat, Formular) */
  --ui-grau: #f2f4f8;
  --ui-verlauf: #e9eef5;
  --ui-leise: #56636f;

  --schrift: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Schriftgrößen: Überschrift oben, Abschnittstitel, Zwischentitel, Text, klein */
  --t-held: clamp(2.25rem, 1.2rem + 2.6vw, 3.5rem);
  --t-gross: clamp(1.75rem, 1rem + 1.8vw, 2.5rem);
  --t-mittel: clamp(1.1875rem, 1rem + 0.5vw, 1.5rem);
  --t-text: 1rem;
  --t-klein: 0.875rem;

  --rand: clamp(16px, 2.2vw, 32px);
  --abstand: clamp(56px, 6.5vw, 104px);
  --kopf-hoehe: 72px;

  /* Das Motiv in drei Größen */
  --ecke: clamp(28px, 3.6vw, 56px);
  --ecke-mittel: clamp(20px, 2.2vw, 32px);
  --kachel: 24.4%; /* Eckenrundung der Logo-Kachel, für kleine Quadrate */
  --knopf-ecke: 13px;

  --raus: cubic-bezier(0.23, 1, 0.32, 1);
  --rein-raus: cubic-bezier(0.77, 0, 0.175, 1);
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--kopf-hoehe) + 16px);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--schrift);
  font-size: var(--t-text);
  line-height: 1.55;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Auf kurzen Seiten (404) sitzt der Fuß trotzdem unten */
  display: flex;
  flex-direction: column;
  min-height: 100svh;
}

body > main {
  flex: 1;
}

h1,
h2,
h3,
p,
ul,
ol,
dl,
dd,
figure,
fieldset {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

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

a {
  color: inherit;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.18em;
}

button,
input {
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

::selection {
  background: var(--accent);
  color: var(--weiss);
}

:root {
  accent-color: var(--accent);
  caret-color: var(--accent);
}

/* Keine einzelnen Wörter am Zeilenende, Zwischentitel ausgewogen */
p,
li {
  text-wrap: pretty;
}

h3 {
  text-wrap: balance;
}

[hidden] {
  display: none !important;
}

.nur-vorlesen {
  position: absolute;
  width: 1px;
  height: 1px; /* taste-skill-ignore: Text nur für Screenreader, keine Linie */
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.springen {
  position: absolute;
  left: var(--rand);
  top: -100px;
  z-index: 50;
  padding: 12px 18px;
  background: var(--ink);
  color: var(--weiss);
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--knopf-ecke);
}

.springen:focus {
  top: 12px;
}

.rahmen {
  width: min(100% - 2 * var(--rand), 1376px);
  margin-inline: auto;
}

h1 {
  font-size: var(--t-held);
  font-weight: 750;
  line-height: 1.02;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

h2 {
  font-size: var(--t-gross);
  font-weight: 720;
  line-height: 1.06;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

h3 {
  font-size: var(--t-text);
  font-weight: 700;
  line-height: 1.3;
}

.einleitung {
  max-width: 46ch;
  color: var(--muted);
}

/* ---------- Knöpfe ---------- */

.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 24px;
  border: 0;
  border-radius: var(--knopf-ecke);
  background: var(--accent);
  color: var(--weiss);
  font-weight: 650;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 160ms ease, transform 160ms var(--raus);
}

.knopf:active {
  transform: scale(0.97);
}

/* Während eine Demo läuft, ist ihr Knopf sichtbar gesperrt */
.knopf:disabled {
  opacity: 0.55;
  cursor: default;
  pointer-events: none;
}

/* Ohne JavaScript tun die Demo-Knöpfe nichts. Dann steht dort nur der Hinweis aus <noscript>. */
html:not(.js) [data-anruf-start],
html:not(.js) [data-senden],
html:not(.js) [data-ki-fragen] {
  display: none;
}

.knopf-zweit {
  background: var(--surface);
  color: var(--ink);
}

.knopf-weiss {
  background: var(--weiss);
  color: var(--accent-tief);
}

@media (hover: hover) and (pointer: fine) {
  .knopf:hover {
    background: var(--accent-tief);
  }

  .knopf-zweit:hover {
    background: var(--surface-dunkel);
  }

  .knopf-weiss:hover {
    background: var(--accent-hauch);
  }
}

.weiter {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  color: var(--accent-tief);
  font-weight: 650;
  text-decoration: none;
}

.weiter span {
  transition: transform 200ms var(--raus);
}

@media (hover: hover) and (pointer: fine) {
  .weiter:hover span {
    transform: translateX(4px);
  }
}

/* Aufzählung mit der kleinen Kachel als Zeichen */
.punkte li {
  position: relative;
  padding-left: 1.5em;
}

.punkte li + li {
  margin-top: 8px;
}

.punkte li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.42em;
  width: 0.7em;
  height: 0.7em;
  border-radius: var(--kachel);
  background: var(--accent);
}

/* Häkchen-Liste „Das ist drin“: das Häkchen sitzt in der kleinen Kachel */
.haken li {
  position: relative;
  padding-left: 1.85em;
}

.haken li + li {
  margin-top: 10px;
}

.haken li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.18em;
  width: 1.2em;
  height: 1.2em;
  border-radius: var(--kachel);
  background: var(--accent-hauch)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='%230062c4' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / 78% no-repeat;
}

/* ---------- Kopfzeile ---------- */

.kopf {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--bg);
}

.kopf-innen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: var(--kopf-hoehe);
}

.kopf-marke {
  display: flex;
  align-items: center;
  min-height: 44px;
}

.kopf-marke img {
  width: 152px;
  height: auto;
}

/* Unter 1100 px: Kontakt immer erreichbar, daneben das Menü */
.kopf-handy {
  display: flex;
  align-items: center;
  gap: 8px;
}

.kopf .kopf-kontakt {
  padding: 0 16px;
}

@media (max-width: 359px) {
  .kopf-kontakt {
    display: none;
  }
}

.kopf-nav {
  display: none;
  align-items: center;
  gap: 32px;
}

.kopf-nav ul {
  display: flex;
  gap: 22px;
}

.kopf-nav a:not(.knopf) {
  padding: 8px 0;
  font-size: var(--t-klein);
  font-weight: 550;
  text-decoration: none;
  transition: color 160ms ease;
}

/* Die Seite, auf der man gerade ist */
.kopf-nav a[aria-current="page"],
.menue-liste a[aria-current="page"],
.fuss-links a[aria-current="page"] {
  color: var(--accent-tief);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

@media (hover: hover) and (pointer: fine) {
  .kopf-nav a:not(.knopf):hover {
    color: var(--accent-tief);
  }
}

.kopf .knopf {
  min-height: 44px;
  padding: 0 20px;
  font-size: var(--t-klein);
}

.menue {
  position: relative;
}

.menue summary {
  display: grid;
  place-items: center;
  min-width: 44px;
  height: 44px;
  padding: 0 16px;
  border-radius: var(--knopf-ecke);
  background: var(--surface);
  font-size: var(--t-klein);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.menue summary::-webkit-details-marker {
  display: none;
}

.menue-liste {
  position: fixed;
  left: 0;
  right: 0;
  top: var(--kopf-hoehe);
  bottom: 0;
  display: flex;
  flex-direction: column;
  padding: 16px var(--rand) 32px;
  background: var(--bg);
  overflow-y: auto;
}

.menue-liste a:not(.knopf) {
  padding: 10px 0;
  font-size: var(--t-mittel);
  font-weight: 700;
  letter-spacing: -0.02em;
  text-decoration: none;
}

.menue-liste .knopf {
  margin-top: 24px;
}

.menue:not([open]) .menue-liste {
  display: none;
}

@media (min-width: 1100px) {
  .kopf-nav {
    display: flex;
  }

  .kopf-handy {
    display: none;
  }
}

/* ---------- Erster Bildschirm ---------- */

/* Bis 959 px: Text, Leistungen, Bühne untereinander. Ab 960 px steht die Bühne neben dem Text,
   die vier Leistungen laufen darunter über die volle Breite. Am Handy gilt eine eigene Reihenfolge, siehe unter der Bühne. */
.held {
  padding: clamp(20px, 3vw, 40px) 0 clamp(48px, 6vw, 88px);
}

.held-raster {
  display: grid;
  grid-template-areas:
    "text"
    "angebot"
    "buehne";
  gap: 32px;
}

.held-text {
  grid-area: text;
  align-self: center;
}

.held-raster > .buehne {
  grid-area: buehne;
}

.angebot {
  grid-area: angebot;
}

.held-satz {
  max-width: 48ch;
  margin-top: 18px;
  font-size: 1.0625rem;
  line-height: 1.5;
}

/* Die vier Leistungen: Name, wofür, Preis. Jede Kachel führt zur Seite der Leistung und steuert die Bühne. */
.leistungen {
  display: grid;
  gap: 8px;
}

.leistung {
  --kachel-rand: 16px;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "name preis"
    "was was"
    "dazu mehr";
  gap: 2px 12px;
  align-items: baseline;
  height: 100%;
  padding: 14px var(--kachel-rand) 16px;
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: 16px;
  background: var(--papier);
  text-decoration: none;
  transition: background-color 200ms ease, border-color 200ms ease;
}

.leistung.ist-aktiv {
  border-color: var(--accent);
}

.l-name {
  grid-area: name;
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.l-was {
  grid-area: was;
  color: var(--muted);
  font-size: var(--t-klein);
  line-height: 1.4;
}

.l-preis {
  grid-area: preis;
  justify-self: end;
  font-size: var(--t-klein);
  font-weight: 600;
  white-space: nowrap;
}

.l-zahl {
  font-size: 1.1875rem;
  font-weight: 750;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.l-dazu {
  grid-area: dazu;
  margin-top: 4px;
  color: var(--muted);
  font-size: var(--t-klein);
  font-variant-numeric: tabular-nums;
}

.l-mehr {
  grid-area: mehr;
  justify-self: end;
  color: var(--accent-tief);
  font-size: var(--t-klein);
  font-weight: 650;
  white-space: nowrap;
}

.l-mehr span {
  display: inline-block;
  transition: transform 200ms var(--raus);
}

/* fleetstation, das Hauptprodukt: blau gefüllt, alle Schrift weiß */
.leistung-haupt {
  background: var(--accent);
  color: var(--weiss);
}

.leistung-haupt .l-was,
.leistung-haupt .l-dazu,
.leistung-haupt .l-mehr {
  color: var(--weiss);
}

.leistung-haupt:focus-visible {
  outline-color: var(--ink);
}

/* Fortschritt des Films in der aktiven Kachel: seite.js lässt ihn laufen, er ist zugleich die Uhr des Films */
.l-balken {
  position: absolute;
  left: var(--kachel-rand);
  right: var(--kachel-rand);
  bottom: 6px;
  height: 3px; /* taste-skill-ignore: Fortschrittsbalken, keine Trennlinie */
  border-radius: 3px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
}

.leistung-haupt .l-balken {
  background: var(--weiss);
}

@media (hover: hover) and (pointer: fine) {
  .leistung:not(.leistung-haupt):hover {
    background: var(--accent-hauch);
  }

  .leistung-haupt:hover {
    background: var(--accent-tief);
  }

  .leistung:hover .l-mehr span {
    transform: translateX(3px);
  }
}

.held-klein {
  margin-top: 12px;
  color: var(--muted);
  font-size: var(--t-klein);
}

.knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

/* Ab 600 px werden die Leistungen zu Kacheln. Alle Kacheln einer Reihe teilen dieselben Zeilen,
   so stehen Namen und Preise auf einer Höhe. */
@media (min-width: 600px) {
  .leistungen {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .leistungen > li {
    display: grid;
    grid-row: span 5;
    grid-template-rows: subgrid;
    row-gap: 0;
  }

  .leistung {
    --kachel-rand: 18px;
    grid-row: 1 / -1;
    grid-template-rows: subgrid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "name"
      "was"
      "preis"
      "dazu"
      "mehr";
    row-gap: 0;
    align-items: start;
    padding: 16px var(--kachel-rand) 20px;
  }

  .l-was {
    margin-top: 4px;
  }

  .l-preis {
    justify-self: start;
    margin-top: 14px;
    white-space: normal;
  }

  .l-zahl {
    font-size: 1.5rem;
  }

  .l-mehr {
    align-self: end;
    justify-self: start;
    margin-top: 14px;
  }
}

@media (min-width: 960px) {
  .held-raster {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    grid-template-areas:
      "text buehne"
      "angebot angebot";
    gap: 28px clamp(32px, 4vw, 64px);
  }

  .leistungen {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 599px) {
  .knoepfe .knopf {
    flex: 1 1 100%;
  }
}

/* ---------- Die Bühne: die Kachel aus dem Logo, gefüllt mit Bild oder Demo ---------- */

.buehne {
  position: relative;
  width: 100%;
  max-width: 560px;
  margin-inline: auto;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--ecke);
  background: var(--surface);
  container-type: inline-size;
}

@media (min-width: 600px) {
  .buehne {
    aspect-ratio: 4 / 3;
  }
}

@media (min-width: 960px) {
  .buehne {
    max-width: none;
  }
}

/* Am Handy steht der Film im ersten Bildschirm: Überschrift, Reiter, Film, Name und Preis, darunter Satz, Knöpfe und Kacheln.
   Der Film füllt, was der Bildschirm hergibt; 289 px sind Kopfzeile, Überschrift, Reiter, Preiszeile und ihre Abstände. */
.reiter,
.film-preise {
  display: none;
}

@media (max-width: 599px) {
  .held {
    padding-top: 12px;
  }

  .held h1 {
    font-size: clamp(1.75rem, 9.4vw, 2.25rem);
  }

  .held-raster {
    grid-template-areas:
      "titel"
      "reiter"
      "buehne"
      "preis"
      "satz"
      "knoepfe"
      "angebot";
    gap: 0;
  }

  .held-text {
    display: contents;
  }

  .held-text h1 {
    grid-area: titel;
  }

  .held-satz {
    grid-area: satz;
    margin-top: 24px;
  }

  .knoepfe {
    grid-area: knoepfe;
    margin-top: 20px;
  }

  .angebot {
    margin-top: 32px;
  }

  .reiter {
    display: flex;
    grid-area: reiter;
    gap: 4px;
    margin-top: 12px;
  }

  .reiter button {
    position: relative;
    flex: 1 1 auto;
    min-height: 44px;
    padding: 0 6px;
    overflow: hidden;
    border: 0;
    border-radius: var(--knopf-ecke);
    background: var(--surface);
    color: var(--ink);
    font: inherit;
    font-size: clamp(0.75rem, 3.4vw, 0.8125rem);
    font-weight: 650;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 200ms ease, color 200ms ease, transform 160ms var(--raus);
  }

  .reiter button:active {
    transform: scale(0.97);
  }

  .reiter button.ist-aktiv {
    background: var(--accent);
    color: var(--weiss);
  }

  .reiter .l-balken {
    --kachel-rand: 10px;
    bottom: 4px;
    height: 2px; /* taste-skill-ignore: Fortschrittsbalken, keine Trennlinie */
    background: var(--weiss);
  }

  .reiter button:not(.ist-aktiv) .l-balken {
    visibility: hidden;
  }

  .held-raster > .buehne {
    height: 363px;
    height: clamp(363px, calc(100svh - 289px), 448px);
    margin-top: 8px;
    aspect-ratio: auto;
  }

  /* Der Name steht schon im Reiter und in der Preiszeile */
  .film-text strong {
    display: none;
  }

  .film-preise {
    display: grid;
    grid-area: preis;
    margin-top: 8px;
  }

  .film-preis {
    display: grid;
    grid-area: 1 / 1;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "name mehr"
      "wert mehr";
    column-gap: 12px;
    align-items: center;
    min-height: 52px;
    padding: 7px 16px;
    border-radius: 16px;
    background: var(--papier);
    font-size: var(--t-klein);
    line-height: 1.35;
    text-decoration: none;
    transition: opacity 260ms ease 120ms;
  }

  .film-preis:not(.ist-aktiv) {
    opacity: 0;
    visibility: hidden;
    transition: opacity 120ms ease, visibility 0s linear 120ms;
  }

  .film-preis-name {
    grid-area: name;
    font-weight: 700;
  }

  .film-preis-wert {
    grid-area: wert;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
  }
}

/* Sehr schmale Handys: Die Texte im Film brechen früher um, die Preiszeile bleibt zweizeilig */
@media (max-width: 359px) {
  .held-raster > .buehne {
    height: 392px;
  }

  .film-preis {
    column-gap: 8px;
    padding-inline: 12px;
    font-size: 0.8125rem;
  }

  .film-preis .l-mehr {
    font-size: 0.8125rem;
  }
}

.anhalten {
  position: absolute;
  right: 6px;
  bottom: 4px;
  z-index: 5;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
}

.anhalten svg {
  width: 30px;
  height: 30px;
  padding: 8px;
  border-radius: 50%;
  background: rgba(22, 32, 43, 0.78);
  fill: var(--weiss);
  transition: transform 160ms var(--raus), background-color 160ms ease;
}

.anhalten:active svg {
  transform: scale(0.97);
}

@media (hover: hover) and (pointer: fine) {
  .anhalten:hover svg {
    background: var(--ink);
  }
}

.zeichen-weiter,
.anhalten[aria-pressed="true"] .zeichen-pause {
  display: none;
}

.anhalten[aria-pressed="true"] .zeichen-weiter {
  display: inline;
}

/* Angehalten: jede Bewegung steht */
.angehalten *,
.angehalten *::before,
.angehalten *::after {
  animation-play-state: paused !important;
}

/* Ein Film je Leistung, immer nur einer ist zu sehen */
.dia {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 10px;
  padding: clamp(10px, 3.2cqi, 18px) clamp(10px, 3.2cqi, 18px) 14px;
  opacity: 0;
  transform: translateY(12px);
  visibility: hidden;
  /* Der gehende Film blendet an Ort und Stelle aus. Erst wenn er unsichtbar ist, springt er nach unten zurück. */
  transition: opacity 420ms var(--raus), transform 0s linear 420ms, visibility 0s linear 420ms;
}

.dia.ist-aktiv {
  opacity: 1;
  transform: none;
  visibility: visible;
  transition: opacity 420ms var(--raus), transform 420ms var(--raus), visibility 0s;
}

/* ---------- Die Teile eines Films: seite.js schaltet je Schritt .an ---------- */

.film [data-ab] {
  transition: opacity 260ms var(--raus), transform 360ms var(--raus);
}

.spielt [data-ab]:not(.an) {
  opacity: 0;
  transform: translateY(0.5em);
}

/* Ohne Skript und bei „Bewegung reduzieren“ steht das letzte Bild */
.dia:not(.spielt) [data-bis] {
  display: none;
}

/* Beim Zurückspringen auf den Anfang läuft nichts sichtbar rückwärts */
.film-springt,
.film-springt * {
  transition: none !important;
}

.film {
  position: relative;
  display: grid;
  gap: 10px;
  min-height: 0;
  font-size: clamp(13px, 2.6cqi, 14.5px);
  line-height: 1.4;
  text-align: left;
  overflow-wrap: break-word;
}

.film-seite {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  border-radius: calc(var(--ecke) * 0.5);
  background: var(--papier);
  transition: opacity 320ms ease, visibility 0s;
}

/* Zwei Seiten, Kunde und Betrieb: im schmalen Fenster die, die gerade dran ist, sonst nebeneinander */
.film-zwei > .film-seite {
  grid-area: 1 / 1;
}

.spielt[data-seite="links"] .film-rechts,
.spielt[data-seite="rechts"] .film-links {
  opacity: 0;
  visibility: hidden;
  transition: opacity 320ms ease, visibility 0s linear 320ms;
}

@container (min-width: 480px) {
  .film-zwei {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .film-zwei > .film-seite {
    grid-area: auto;
  }

  .spielt[data-seite="links"] .film-rechts,
  .spielt[data-seite="rechts"] .film-links {
    opacity: 0.5;
    visibility: visible;
    transition: opacity 320ms ease;
  }
}

.film-ansichten {
  display: grid;
  flex: 1;
  min-height: 0;
}

.film-ansicht {
  grid-area: 1 / 1;
  min-height: 0;
}

.film-anruf {
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2em;
  padding: 1em;
  background: var(--papier);
  text-align: center;
}

.film .anruf-kachel {
  width: 2.8em;
  height: 2.8em;
  margin-bottom: 0.5em;
  font-size: 1.3em;
}

.spielt[data-schritt="0"] .ring {
  animation: klingeln 1.6s var(--raus) infinite;
}

.spielt[data-schritt="0"] .ring-2 {
  animation-delay: 0.5s;
}

.film-gross {
  font-size: 1.08em;
  font-weight: 650;
}

.film-stapel {
  display: grid;
}

.film-stapel > * {
  grid-area: 1 / 1;
}

.film-verpasst {
  font-weight: 650;
}

/* Die Nachricht wandert sichtbar vom Kunden zum Betrieb */
.film-flug {
  position: absolute;
  top: 58%;
  left: calc(25% - 3.2em);
  z-index: 3;
  display: none;
  padding: 0.35em 0.85em;
  border-radius: 999px;
  background: var(--accent);
  color: var(--weiss);
  font-weight: 650;
  white-space: nowrap;
}

@container (min-width: 480px) {
  .film-flug {
    display: block;
  }
}

.spielt .film-flug.an {
  animation: fliegen 800ms var(--rein-raus) both;
}

@keyframes fliegen {
  0% {
    opacity: 0;
    transform: translateX(0) scale(0.95);
  }

  15%,
  85% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translateX(46cqi);
  }
}

/* fleetstation: die vier Stationen des Monats, zuletzt das echte Programm */
.film-monat {
  display: grid;
  flex: 1;
  grid-auto-rows: 1fr;
  min-height: 0;
}

.film-station {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.8em;
  align-items: center;
  padding: 0.3em 1.1em;
}

.film-station + .film-station {
  border-top: 1px solid var(--ui-grau);
}

.spielt .film-station[data-ab]:not(.an) {
  opacity: 0.38;
  transform: none;
}

.film-nr {
  display: grid;
  place-items: center;
  width: 2em;
  height: 2em;
  border-radius: var(--kachel);
  background: var(--accent);
  color: var(--weiss);
  font-weight: 700;
}

.film-name {
  font-weight: 650;
}

.film-name small {
  display: block;
  color: var(--ui-leise);
  font-size: 0.9em;
  font-weight: 400;
}

.film-wert {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Das Bildschirmfoto füllt das Fenster von links oben: Marke, Menü und Monatsübersicht bleiben sichtbar */
.film-foto {
  position: absolute;
  inset: 0;
  background: var(--papier);
}

.film-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 0 0;
}

/* Der Untertitel: erklärt jeden Schritt, der alte geht schneller, als der neue kommt */
.film-text {
  display: grid;
  padding: 0 48px 0 0.6em;
  font-size: clamp(14px, 2.7cqi, 15px);
  line-height: 1.35;
}

.film-text > * {
  grid-area: 1 / 1;
  transition: opacity 260ms ease 120ms, transform 320ms var(--raus) 120ms;
}

.spielt .film-text > :not(.an) {
  opacity: 0;
  transform: translateY(0.3em);
  transition-duration: 120ms;
  transition-delay: 0s;
}

.film-text strong {
  margin-right: 0.35em;
}

/* ---------- Nachgebaute App-Ausschnitte (Chat, Formular, Handy): eigene, kleinere Regeln ---------- */

.ui-kopf {
  display: flex;
  flex: none;
  flex-wrap: wrap;
  column-gap: 0.4em;
  padding: 0.7em 1em;
  background: var(--ui-grau);
  font-weight: 650;
}

.ui-leise {
  color: var(--ui-leise);
  font-weight: 400;
}

.ui-verlauf {
  display: grid;
  flex: 1;
  align-content: end;
  gap: 0.5em;
  min-height: 0;
  padding: 0.8em;
  overflow: hidden;
  background: var(--ui-verlauf);
}

/* Was gleichzeitig ankommt, kommt kurz nacheinander */
.film-gruppe > :nth-child(2) {
  transition-delay: 70ms;
}

.film-gruppe > :nth-child(3) {
  transition-delay: 140ms;
}

.ui-system {
  justify-self: center;
  padding: 0.3em 0.9em;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.85);
  color: #45515d;
  font-size: 0.9em;
  text-align: center;
}

.ui-blase {
  justify-self: start;
  max-width: 96%;
  padding: 0.6em 0.85em;
  border-radius: 1em 1em 1em 0.3em;
  background: var(--papier);
}

.ui-marke {
  color: var(--accent-tief);
  font-size: 0.9em;
  font-weight: 650;
}

.ui-link {
  display: block;
  margin-top: 0.25em;
  color: var(--accent-tief);
  font-weight: 650;
  text-decoration: underline;
}

.ui-karte {
  display: grid;
  gap: 0.35em;
  padding: 0.6em;
  border-radius: 0.9em;
  background: var(--papier);
}

.ui-zeile {
  padding: 0.2em 0.6em;
  border-radius: 0.5em;
  background: var(--ui-grau);
}

.ui-zeile span {
  color: var(--ui-leise);
}

.ui-taste {
  display: grid;
  padding: 0.55em;
  overflow: hidden;
  border-radius: 0.8em;
  background: var(--accent);
  color: var(--weiss);
  font-weight: 650;
  text-align: center;
  transition: opacity 260ms var(--raus), transform 360ms var(--raus), background-color 240ms ease;
}

.ui-wechsel > span {
  grid-area: 1 / 1;
}

/* Gedrückt: kurze Rückmeldung, dann steht das Ergebnis auf dunklem Grund */
.dia:not(.spielt) .ui-wechsel,
.ui-wechsel:has(> :last-child.an) {
  background: var(--ink);
}

.ui-wechsel:has(> :last-child.an) {
  animation: druecken 300ms var(--raus);
}

@keyframes druecken {
  50% {
    transform: scale(0.97);
  }
}

.ui-formular {
  display: grid;
  flex: 1;
  align-content: start;
  gap: 0.5em;
  min-height: 0;
  padding: 0.9em;
}

.ui-feld {
  display: grid;
  padding: 0.45em 0.8em;
  border-radius: 0.8em;
  background: var(--ui-grau);
}

.ui-feld span {
  color: var(--ui-leise);
  font-size: 0.85em;
}

.ui-feld b {
  min-height: 1.4em;
  font-weight: 600;
}

/* Chat auf der Website: rechts schreibt der Besucher, links antwortet der Chatbot */
.ui-frage {
  justify-self: end;
  max-width: 90%;
  padding: 0.6em 0.85em;
  border-radius: 1em 1em 0.3em 1em;
  background: var(--accent);
  color: var(--weiss);
}

/* ---------- Abschnitte allgemein ---------- */

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

.abschnitt-papier {
  background: var(--papier);
}

.abschnitt-kopf {
  display: grid;
  gap: 20px var(--rand);
  align-items: end;
}

.abschnitt-kopf .einleitung {
  margin-top: 0;
}

@media (min-width: 960px) {
  .abschnitt-kopf {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  }
}

/* ---------- Seite einer Leistung: oben Name, Nutzen und Preis, daneben was drin ist ---------- */

.seite {
  padding: clamp(24px, 4vw, 56px) 0 clamp(40px, 5vw, 72px);
}

.seite-raster {
  display: grid;
  gap: 32px var(--rand);
  align-items: start;
}

.seite-kurz {
  max-width: 26em;
  margin-top: 12px;
  font-size: var(--t-mittel);
  font-weight: 650;
  line-height: 1.25;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.seite-fuer {
  max-width: 52ch;
  margin-top: 16px;
  color: var(--muted);
  font-size: var(--t-klein);
}

.seite-fuer strong {
  color: var(--ink);
}

.seite-nutzen {
  max-width: 52ch;
  margin-top: 14px;
}

.seite-nutzen a {
  color: var(--accent-tief);
  font-weight: 600;
}

.seite-preis {
  max-width: 440px;
  margin-top: 24px;
  padding: 16px 20px;
  border-radius: 16px;
  background: var(--papier);
}

.preis {
  font-size: var(--t-klein);
}

.preis-zahl {
  margin-right: 6px;
  font-size: clamp(1.75rem, 1.4rem + 0.8vw, 2.25rem);
  font-weight: 750;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.preis-dazu {
  margin-top: 8px;
  color: var(--muted);
  font-size: var(--t-klein);
}

.drin {
  padding: clamp(20px, 2.4vw, 32px);
  border-radius: var(--ecke-mittel);
  background: var(--papier);
}

.drin-titel {
  margin-bottom: 16px;
  font-size: var(--t-mittel);
  letter-spacing: -0.02em;
}

@media (min-width: 960px) {
  .seite-raster {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  }
}

/* Ergänzungen unter einer Demo: Kombi, Branchen, Hinweise */
.zusatz {
  display: grid;
  gap: 12px;
  margin-top: 16px;
  font-size: var(--t-klein);
}

.zusatz > * {
  padding: 18px 22px;
  border-radius: 16px;
  background: var(--bg);
}

.abschnitt:not(.abschnitt-papier) .zusatz > * {
  background: var(--papier);
}

/* Ein Link mitten im Satz braucht keine eigene Zeilenhöhe */
.zusatz .weiter {
  min-height: 0;
  margin-left: 4px;
}

@media (min-width: 900px) {
  .zusatz {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---------- Was liegen bleibt: je Zeile der Moment aus dem Alltag, daneben die Leistung, die ihn abnimmt ---------- */

.liegen {
  display: grid;
  gap: 10px;
  margin-top: 40px;
}

.liegen li {
  display: grid;
  gap: 4px;
}

.liegen-heute {
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 10px;
  padding: 16px 20px 18px;
  border-radius: 16px 16px 4px 4px;
  background: var(--bg);
}

.liegen-heute p {
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.01em;
}

.liegen-loesung {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-content: center;
  align-items: center;
  gap: 2px 16px;
  padding: 16px 20px 18px;
  border-radius: 4px 4px 16px 16px;
  background: var(--accent-hauch);
  text-decoration: none;
  transition: background-color 200ms ease;
}

.liegen-name {
  color: var(--accent-tief);
  font-weight: 700;
}

.liegen-text {
  grid-column: 1;
  font-size: var(--t-klein);
}

.liegen-pfeil {
  grid-row: 1 / span 2;
  grid-column: 2;
  color: var(--accent-tief);
  font-weight: 650;
  transition: transform 200ms var(--raus);
}

@media (hover: hover) and (pointer: fine) {
  .liegen-loesung:hover {
    background: #d3e3f9;
  }

  .liegen-loesung:hover .liegen-pfeil {
    transform: translateX(3px);
  }
}

@media (min-width: 900px) {
  .liegen li {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  }

  .liegen-heute {
    border-radius: 16px 4px 4px 16px;
  }

  .liegen-loesung {
    padding-inline: 24px;
    border-radius: 4px 16px 16px 4px;
  }
}

/* Kleine Ausschnitte aus dem Alltag: Benachrichtigung, Zettel */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  padding: 0.2em 0.7em 0.22em 0.5em;
  border-radius: 999px;
  background: var(--papier);
  color: var(--ink);
  font-size: 0.8125rem;
  font-weight: 600;
  white-space: nowrap;
}

.chip::before {
  content: "";
  width: 0.85em;
  height: 0.85em;
  border-radius: var(--kachel);
  background: var(--accent);
}

.chip-zettel {
  background: #fff1c2;
}

.chip-zettel::before {
  background: #c98a00;
}

/* ---------- fleetstation: der Monat in vier Stationen, nachgebaut nach der Monatsübersicht im Programm ---------- */

.monat {
  margin-top: 40px;
  padding: clamp(20px, 3vw, 36px);
  border-radius: var(--ecke-mittel);
  background: var(--bg);
}

.monat-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 16px;
}

.monat-titel {
  font-size: 1.0625rem;
  font-weight: 700;
}

.monat-leise {
  color: var(--muted);
  font-size: var(--t-klein);
}

/* Am Handy senkrecht: Zeichen links, die Linie läuft nach unten zur nächsten Station */
.stationen {
  display: grid;
  margin-top: 28px;
}

.station {
  --zeichen: 36px;
  position: relative;
  display: grid;
  grid-template-columns: var(--zeichen) minmax(0, 1fr);
  column-gap: 16px;
  align-content: start;
  padding-bottom: 28px;
}

.station:last-child {
  padding-bottom: 0;
}

.station::before {
  content: "";
  position: absolute;
  left: calc(var(--zeichen) / 2 - 1px);
  top: calc(var(--zeichen) + 6px);
  bottom: 6px;
  border-left: 2px solid var(--accent);
}

/* Nach der aktuellen Station ist der Weg noch offen */
.station.ist-jetzt::before {
  border-left-style: dashed;
  border-left-color: var(--surface-dunkel);
}

.station:last-child::before {
  display: none;
}

.station-zeichen {
  grid-row: 1 / span 3;
  display: grid;
  place-items: center;
  width: var(--zeichen);
  height: var(--zeichen);
  border: 2px solid var(--surface-dunkel);
  border-radius: var(--kachel);
  background: var(--papier);
  color: var(--muted);
  font-size: var(--t-klein);
  font-weight: 750;
}

.ist-jetzt .station-zeichen {
  border-color: var(--accent);
  color: var(--accent-tief);
}

/* Erledigt: blau gefüllt mit Häkchen statt Zahl */
.ist-fertig .station-zeichen {
  border-color: var(--accent);
  background: var(--accent)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / 62% no-repeat;
  color: transparent;
}

.station h3 {
  align-self: center;
  min-height: var(--zeichen);
  display: flex;
  align-items: center;
  font-size: 1.0625rem;
}

.station-wert {
  margin-top: -4px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

.station p:not(.station-wert) {
  margin-top: 6px;
  color: var(--muted);
  font-size: var(--t-klein);
}

/* Ab 900 px waagerecht wie im Programm: die Linie läuft von Zeichen zu Zeichen */
@media (min-width: 900px) {
  .stationen {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 24px;
  }

  .station {
    grid-template-columns: minmax(0, 1fr);
    padding-bottom: 0;
  }

  .station::before {
    left: calc(var(--zeichen) + 8px);
    right: -16px;
    top: calc(var(--zeichen) / 2 - 1px);
    bottom: auto;
    border-left: 0;
    border-top: 2px solid var(--accent);
  }

  .station.ist-jetzt::before {
    border-top-style: dashed;
    border-top-color: var(--surface-dunkel);
  }

  .station-zeichen {
    grid-row: auto;
  }

  .station h3 {
    min-height: 0;
    margin-top: 16px;
  }

  .station-wert {
    margin-top: 2px;
  }
}

/* ---------- Ablauf in Schritten ---------- */

.ablauf {
  display: grid;
  gap: 12px;
  margin-top: 48px;
  counter-reset: schritt;
}

.ablauf li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 16px;
  padding: 20px;
  border-radius: 20px;
  background: var(--bg);
  transition: background-color 260ms ease, color 260ms ease;
}

.abschnitt:not(.abschnitt-papier) .ablauf li {
  background: var(--papier);
}

.ablauf-nr {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--kachel);
  background: var(--accent-hauch);
  color: var(--accent-tief);
  font-weight: 750;
  transition: background-color 260ms ease, color 260ms ease;
}

.ablauf p {
  color: var(--muted);
  font-size: var(--t-klein);
}

/* Während die Demo läuft, leuchtet der passende Schritt */
.ablauf li.ist-aktiv {
  background: var(--accent);
  color: var(--weiss);
}

.ablauf li.ist-aktiv p {
  color: var(--weiss);
}

.ablauf li.ist-aktiv .ablauf-nr {
  background: var(--weiss);
  color: var(--accent-tief);
}

@media (min-width: 760px) {
  .ablauf-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .ablauf-5 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ablauf-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ablauf-3 li,
  .ablauf-4 li,
  .ablauf-5 li {
    grid-template-columns: 1fr;
    align-content: start;
  }

  .ablauf-3 .ablauf-nr,
  .ablauf-4 .ablauf-nr,
  .ablauf-5 .ablauf-nr {
    grid-row: auto;
    margin-bottom: 12px;
  }
}

/* Bei zwei Spalten steht der fünfte Schritt nicht allein */
@media (min-width: 760px) and (max-width: 1099px) {
  .ablauf-5 li:last-child {
    grid-column: 1 / -1;
  }
}

@media (min-width: 1100px) {
  .ablauf-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .ablauf-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

/* ---------- Live-Demos ---------- */

.demo {
  display: grid;
  gap: 32px clamp(32px, 5vw, 80px);
  margin-top: 16px;
  padding: clamp(24px, 4vw, 56px);
  border-radius: var(--ecke);
  background: var(--bg);
}

.abschnitt:not(.abschnitt-papier) .demo {
  background: var(--papier);
}

.demo h3 {
  font-size: var(--t-mittel);
  font-weight: 720;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.demo-text > p {
  max-width: 44ch;
  margin-top: 14px;
}

.demo-hinweis {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--accent-hauch);
  color: var(--accent-tief);
  font-size: var(--t-klein);
  font-weight: 600;
}

.demo-text .knopf {
  margin-top: 28px;
}

.demo-nummer a {
  color: var(--accent-tief);
  font-weight: 650;
  white-space: nowrap;
}

.demo-buehne {
  display: grid;
  place-items: center;
  gap: 20px;
  padding: clamp(24px, 4vw, 48px) 16px;
  border-radius: var(--ecke);
  background: var(--accent);
}

/* Schrittanzeige und Gesprächsknopf liegen übereinander in derselben Zelle: am Ende tauschen sie, ohne dass etwas springt */
.demo-unter {
  display: grid;
  place-items: center;
  min-height: 52px;
}

.demo-unter > * {
  grid-area: 1 / 1;
  transition: opacity 260ms var(--raus), visibility 0s linear 260ms;
}

.demo-schritt {
  color: var(--weiss);
  font-size: var(--t-klein);
  font-weight: 600;
  text-align: center;
}

.demo-weiter {
  padding: 0 18px;
  font-size: var(--t-klein);
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
}

.demo-unter.ist-fertig .demo-schritt {
  opacity: 0;
  visibility: hidden;
}

.demo-unter.ist-fertig .demo-weiter {
  opacity: 1;
  visibility: visible;
  transition: opacity 260ms var(--raus), visibility 0s;
}

.demo-ende {
  margin-top: 20px;
  text-align: center;
}

@media (min-width: 900px) {
  .demo-anruf {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    align-items: center;
  }
}

/* Das Handy der Auffangnetz-Demo */
.handy {
  width: min(300px, 100%, calc((100svh - 250px) * 9 / 19.5)); /* passt auch auf niedrige Laptop-Bildschirme */
  aspect-ratio: 9 / 19.5;
  padding: 9px;
  border-radius: 44px;
  background: var(--ink);
}

.handy-schirm {
  position: relative;
  height: 100%;
  overflow: hidden;
  border-radius: 36px;
  background: var(--papier);
  container-type: inline-size;
  font-size: clamp(12.5px, 4.9cqi, 14.5px);
  line-height: 1.4;
}

.szene {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transition: opacity 260ms var(--raus), visibility 0s linear 260ms;
}

.handy[data-phase="ruhe"] .szene-ruhe,
.handy[data-phase="klingelt"] .szene-anruf,
.handy[data-phase="verpasst"] .szene-anruf,
.handy[data-phase="sms"] .szene-sms,
.handy[data-phase="gruppe"] .szene-gruppe {
  opacity: 1;
  visibility: visible;
  transition: opacity 260ms var(--raus), visibility 0s;
}

.szene-ruhe {
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 24px;
  text-align: center;
}

.ruhe-zeit {
  font-size: 3.4em;
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

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

.szene-anruf {
  align-items: center;
  justify-content: space-between;
  padding: 18% 9% 14%;
  background: var(--ui-grau);
  text-align: center;
}

.anruf-oben {
  color: var(--ui-leise);
}

.anruf-wer {
  display: grid;
  justify-items: center;
  gap: 6px;
}

.anruf-kachel {
  position: relative;
  display: grid;
  place-items: center;
  width: 30cqi;
  height: 30cqi;
  margin-bottom: 14px;
  border-radius: var(--kachel);
  background: var(--accent);
  color: var(--weiss);
  font-size: 1.6em;
  font-weight: 700;
}

.anruf-kachel span {
  position: relative;
}

.anruf-kachel .ring {
  position: absolute;
  inset: 0;
  border-radius: var(--kachel);
  background: var(--accent);
  opacity: 0;
}

.handy[data-phase="klingelt"] .ring {
  animation: klingeln 1.6s var(--raus) infinite;
}

.handy[data-phase="klingelt"] .ring-2 {
  animation-delay: 0.8s;
}

@keyframes klingeln {
  from {
    opacity: 0.35;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(1.7);
  }
}

.anruf-nummer {
  font-size: 1.35em;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

.anruf-tasten {
  display: flex;
  justify-content: center;
  gap: 12px;
  width: 100%;
  transition: opacity 260ms ease;
}

.anruf-taste {
  flex: 1;
  padding: 0.7em 0;
  border-radius: 999px;
  background: var(--surface-dunkel);
  font-weight: 600;
}

.anruf-taste-an {
  background: var(--accent);
  color: var(--weiss);
}

.anruf-verpasst {
  position: absolute;
  left: 9%;
  right: 9%;
  bottom: 14%;
  padding: 0.75em;
  border-radius: 1em;
  background: var(--ink);
  color: var(--weiss);
  font-weight: 650;
  opacity: 0;
  transform: translateY(0.6em);
  transition: opacity 260ms var(--raus), transform 320ms var(--raus);
}

.handy[data-phase="verpasst"] .anruf-verpasst {
  opacity: 1;
  transform: none;
}

.handy[data-phase="verpasst"] .anruf-tasten {
  opacity: 0;
}

.schirm-kopf {
  padding: 2.4em 1.2em 0.8em;
  background: var(--ui-grau);
}

.schirm-titel {
  font-weight: 700;
}

.schirm-leise {
  color: var(--ui-leise);
  font-size: 0.92em;
}

.schirm-verlauf {
  display: grid;
  flex: 1;
  align-content: start;
  gap: 0.7em;
  padding: 1em 0.9em;
  overflow: hidden;
  background: var(--ui-verlauf);
}

.szene-sms .schirm-verlauf {
  background: var(--papier);
}

/* Teile einer Szene erscheinen nacheinander */
[data-teil] {
  opacity: 0;
  transform: translateY(0.7em);
  transition: opacity 300ms var(--raus), transform 420ms var(--raus);
}

[data-teil].zu-sehen {
  opacity: 1;
  transform: none;
}

.blase {
  justify-self: start;
  max-width: 94%;
  padding: 0.7em 0.9em;
  border-radius: 1.05em 1.05em 1.05em 0.3em;
  background: var(--papier);
  overflow-wrap: anywhere;
}

.szene-sms .blase {
  background: var(--ui-grau);
}

.blase p + p {
  margin-top: 2px;
}

.blase-absender {
  color: var(--accent-tief);
  font-size: 0.92em;
  font-weight: 650;
}

/* Was der Besucher selbst schreibt, steht rechts */
.blase-ich {
  justify-self: end;
  border-radius: 1.05em 1.05em 0.3em 1.05em;
  background: var(--accent);
  color: var(--weiss);
}

.blase-link {
  display: inline-block;
  margin-top: 6px;
  color: var(--accent-tief);
  font-weight: 650;
  text-decoration: underline;
}

.mini-form {
  display: grid;
  gap: 0.45em;
  padding: 0.9em;
  border-radius: 1em;
  background: var(--accent-hauch);
}

.mini-titel {
  font-weight: 700;
}

.mini-feld {
  display: grid;
  padding: 0.45em 0.7em;
  border-radius: 0.7em;
  background: var(--papier);
  font-weight: 600;
}

.mini-feld span {
  color: var(--ui-leise);
  font-size: 0.85em;
  font-weight: 400;
}

.mini-knopf {
  padding: 0.6em;
  border-radius: 0.7em;
  background: var(--accent);
  color: var(--weiss);
  font-weight: 650;
  text-align: center;
}

.system {
  justify-self: center;
  padding: 0.3em 0.85em;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.85);
  color: #45515d;
  font-size: 0.9em;
  text-align: center;
}

.uebernehmen {
  min-height: 44px;
  padding: 0.65em;
  border: 0;
  border-radius: 0.8em;
  background: var(--accent);
  color: var(--weiss);
  font-weight: 650;
  cursor: pointer;
  transition: opacity 300ms var(--raus), transform 420ms var(--raus), background-color 200ms ease;
}

.uebernehmen:active {
  transform: scale(0.97);
}

.uebernehmen[aria-pressed="true"],
.uebernehmen:disabled {
  background: var(--ink);
  cursor: default;
}

.handy :focus-visible,
.demo-buehne :focus-visible {
  outline-color: var(--ink);
}

/* Die Demos von Buchungsseite und KI-Chatbot */
.demo-buchung,
.demo-ki {
  grid-template-columns: minmax(0, 1fr);
}

.demo-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
}

.umschalter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.umschalter button {
  min-height: 44px;
  padding: 0 clamp(14px, 1.4vw, 18px);
  border: 0;
  border-radius: 999px;
  background: var(--surface);
  font-size: var(--t-klein);
  font-weight: 600;
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease, transform 160ms var(--raus);
}

.umschalter button:active {
  transform: scale(0.97);
}

.umschalter button[aria-pressed="true"] {
  background: var(--ink);
  color: var(--weiss);
}

@media (hover: hover) and (pointer: fine) {
  .umschalter button:hover:not([aria-pressed="true"]) {
    background: var(--surface-dunkel);
  }
}

.demo-zwei {
  display: grid;
  gap: 16px;
}

@media (min-width: 900px) {
  .demo-zwei {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

.buchung,
.chat {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--ecke-mittel);
  background: var(--papier);
}

.abschnitt:not(.abschnitt-papier) .buchung,
.abschnitt:not(.abschnitt-papier) .chat {
  background: var(--bg);
}

.buchung-kopf,
.chat-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 12px;
  padding: 16px 20px;
  background: var(--surface);
}

.buchung-firma,
.chat-titel {
  font-weight: 700;
}

.buchung-adresse,
.chat-leise {
  color: var(--muted);
  font-size: var(--t-klein);
}

.buchung-felder {
  display: grid;
  gap: 12px;
  padding: 20px;
  border: 0;
}

.buchung-felder legend {
  padding: 0;
  margin-bottom: 4px;
  font-size: var(--t-mittel);
  font-weight: 720;
  letter-spacing: -0.02em;
}

.feld {
  display: grid;
  gap: 4px;
}

.feld label {
  color: var(--muted);
  font-size: var(--t-klein);
}

.feld input {
  width: 100%;
  min-height: 48px;
  padding: 10px 14px;
  border: 2px solid var(--surface);
  border-radius: 12px;
  background: var(--papier);
  font-size: 1rem;
  transition: border-color 160ms ease;
}

.feld input:focus-visible {
  border-color: var(--accent);
  outline: none;
}

.buchung-fuss {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  padding: 0 20px 20px;
}

.chat-verlauf {
  display: grid;
  /* minmax(0, …): Eine eingetippte Adresse ohne Leerzeichen darf die Spalte nicht über den Rand drücken */
  grid-template-columns: minmax(0, 1fr);
  flex: 1;
  align-content: end;
  gap: 10px;
  min-height: 360px;
  padding: 20px;
  background: var(--ui-verlauf);
  font-size: var(--t-klein);
}

.chat-verlauf:has(> .chat-leer) {
  align-content: center;
}

.chat-leer {
  align-self: center;
  justify-self: center;
  max-width: 28ch;
  color: var(--ui-leise);
  text-align: center;
}

.chat-verlauf .blase {
  max-width: 88%;
}

.chat-verlauf > * {
  animation: ankommen 420ms var(--raus) both;
}

.chat-verlauf > .chat-leer {
  animation: none;
}

@keyframes ankommen {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}

.tippt {
  justify-self: start;
  padding: 0.55em 0.9em;
  border-radius: 1em;
  background: var(--papier);
  color: var(--ui-leise);
}

.tippt span {
  display: inline-block;
  animation: tippen 1.2s ease-in-out infinite;
}

.tippt span:nth-child(2) {
  animation-delay: 0.15s;
}

.tippt span:nth-child(3) {
  animation-delay: 0.3s;
}

@keyframes tippen {
  50% {
    opacity: 0.25;
  }
}

/* ---------- So arbeiten wir: drei Schritte, ab 760 px nebeneinander ---------- */

.schritte {
  display: grid;
  gap: 24px;
  margin-top: 32px;
}

.schritte li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
}

.schritt-nr {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--kachel);
  background: var(--accent);
  color: var(--weiss);
  font-size: 1.0625rem;
  font-weight: 750;
}

.schritte h3 {
  font-size: var(--t-mittel);
  font-weight: 720;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.schritte p {
  max-width: 42ch;
  margin-top: 6px;
  color: var(--muted);
}

@media (min-width: 760px) {
  .schritte {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(24px, 3vw, 48px);
  }

  .schritte li {
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    gap: 14px;
  }
}

/* ---------- Preise ---------- */

.preise {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px var(--rand);
  align-items: start;
}

.preise-kopf p {
  max-width: 36ch;
  margin-top: 20px;
  color: var(--muted);
}

.preise-kopf .knopf {
  margin-top: 32px;
}

.preistabelle {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 6px;
  font-variant-numeric: tabular-nums;
}

.preistabelle th,
.preistabelle td {
  padding: 16px 20px;
  text-align: left;
  vertical-align: top;
}

.preistabelle thead th {
  padding-block: 0 4px;
  color: var(--muted);
  font-size: var(--t-klein);
  font-weight: 600;
}

.preistabelle tbody th,
.preistabelle tbody td {
  background: var(--papier);
}

.preistabelle tbody th {
  border-radius: 14px 0 0 14px;
  font-weight: 700;
}

.preistabelle tbody td:last-child {
  border-radius: 0 14px 14px 0;
  font-weight: 650;
}

.zeile-kombi th,
.zeile-kombi td {
  background: var(--accent-hauch) !important;
}

.preise-hinweise {
  margin-top: 24px;
  font-size: var(--t-klein);
}

@media (min-width: 960px) {
  .preise {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  }
}

/* Am Handy wird jede Zeile der Tabelle zu einem eigenen Block */
@media (max-width: 679px) {
  .preistabelle thead {
    position: absolute;
    width: 1px;
    height: 1px; /* taste-skill-ignore: nur für Screenreader */
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .preistabelle,
  .preistabelle tbody,
  .preistabelle tr,
  .preistabelle th,
  .preistabelle td {
    display: block;
  }

  .preistabelle tr {
    margin-bottom: 8px;
    overflow: hidden;
    border-radius: 16px;
    background: var(--papier);
  }

  .preistabelle tr.zeile-kombi {
    background: var(--accent-hauch);
  }

  .preistabelle tbody th,
  .preistabelle tbody td {
    display: grid;
    grid-template-columns: minmax(0, 8.5em) minmax(0, 1fr);
    gap: 12px;
    padding: 4px 18px;
    border-radius: 0 !important;
    background: transparent !important;
  }

  .preistabelle tbody th {
    display: block;
    padding-top: 16px;
    padding-bottom: 6px;
  }

  .preistabelle tbody td:last-child {
    padding-bottom: 16px;
  }

  .preistabelle td::before {
    content: attr(data-label);
    color: var(--muted);
    font-weight: 500;
  }
}

/* ---------- Häufige Fragen ---------- */

.fragen {
  display: grid;
  gap: 32px var(--rand);
  align-items: start;
}

.fragen-liste {
  display: grid;
  gap: 8px;
}

.frage {
  border-radius: 16px;
  background: var(--papier);
}

.frage summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  min-height: 64px;
  padding: 16px 24px;
  font-weight: 650;
  line-height: 1.35;
  cursor: pointer;
  list-style: none;
}

.frage summary::-webkit-details-marker {
  display: none;
}

/* Plus in der Kachel, geöffnet ein Minus */
.frage summary::after {
  content: "";
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: var(--kachel);
  background: var(--accent)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 2v8M2 6h8' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E")
    center / 12px no-repeat;
}

.frage[open] summary::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6h8' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
}

.frage p {
  max-width: 62ch;
  padding: 0 24px 22px;
}

@media (min-width: 960px) {
  .fragen {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  }
}

/* ---------- Kontakt: das blaue Band ---------- */

.kontakt {
  padding-block: var(--abstand);
  background: var(--accent);
  color: var(--weiss);
}

.kontakt-innen {
  display: grid;
  gap: 40px var(--rand);
  align-items: center;
}

.kontakt-text p {
  max-width: 42ch;
  margin-top: 20px;
}

.kontakt-wege {
  display: grid;
  gap: 10px;
}

.kweg {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 2px 16px;
  min-height: 84px;
  padding: 16px 24px;
  border-radius: 20px;
  background: var(--papier);
  color: var(--ink);
  text-decoration: none;
  transition: background-color 160ms ease, transform 160ms var(--raus);
}

.kweg:active {
  transform: scale(0.98);
}

.kweg::after {
  content: "→";
  grid-row: 1 / span 2;
  grid-column: 2;
  color: var(--accent-tief);
  font-weight: 650;
}

.kweg-name {
  font-size: 1.125rem;
  font-weight: 700;
}

.kweg-wert {
  grid-column: 1;
  color: var(--muted);
}

.kweg-haupt {
  background: var(--ink);
  color: var(--weiss);
}

.kweg-haupt .kweg-wert,
.kweg-haupt::after {
  color: var(--weiss);
}

.kontakt :focus-visible {
  outline-color: var(--weiss);
}

@media (hover: hover) and (pointer: fine) {
  .kweg:hover {
    background: var(--accent-hauch);
  }

  .kweg-haupt:hover {
    background: #233142;
  }
}

@media (min-width: 960px) {
  .kontakt-innen {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  }
}

/* ---------- Fuß ---------- */

.fuss {
  padding: 56px 0 40px;
  background: var(--surface);
  font-size: var(--t-klein);
}

.fuss-innen {
  display: grid;
  gap: 28px;
}

.fuss-marke {
  display: flex;
  align-items: center;
  justify-self: start;
  min-height: 44px;
}

.fuss-marke img {
  width: 200px;
  height: auto;
}

.fuss-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0 24px;
}

.fuss-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 550;
  text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {
  .fuss-links a:hover {
    color: var(--accent-tief);
    text-decoration: underline;
  }
}

.fuss-firma {
  color: var(--muted);
}

@media (min-width: 960px) {
  .fuss-innen {
    grid-template-columns: auto 1fr;
    align-items: center;
  }

  .fuss-links {
    justify-content: flex-end;
  }

  .fuss-firma {
    grid-column: 1 / -1;
  }
}

/* ---------- Fenster „Beratungsgespräch buchen“ ---------- */

.fenster {
  width: min(480px, 100% - 32px);
  max-height: calc(100svh - 32px);
  padding: 0;
  border: 0;
  border-radius: 28px;
  background: var(--papier);
  color: var(--ink);
  box-shadow: 0 24px 64px rgba(22, 32, 43, 0.28); /* taste-skill-ignore: ein Dialog schwebt wirklich */
}

.fenster::backdrop {
  background: rgba(22, 32, 43, 0.5);
}

.fenster[open] {
  animation: fenster-auf 220ms var(--raus);
}

@keyframes fenster-auf {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
  }
}

.fenster-innen {
  padding: 32px;
}

.fenster-kopf {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}

.fenster h2 {
  font-size: var(--t-mittel);
}

.fenster-zu {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: var(--knopf-ecke);
  background: var(--surface);
  cursor: pointer;
  transition: background-color 160ms ease, transform 160ms var(--raus);
}

.fenster-zu:active {
  transform: scale(0.95);
}

.fenster-zu svg {
  width: 18px;
  height: 18px;
}

.fenster p {
  margin-top: 12px;
  color: var(--muted);
}

.wege {
  display: grid;
  gap: 8px;
  margin-top: 28px;
}

.weg {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 2px 16px;
  min-height: 72px;
  padding: 14px 20px;
  border-radius: 18px;
  background: var(--bg);
  text-decoration: none;
  transition: background-color 160ms ease, transform 160ms var(--raus);
}

.weg:active {
  transform: scale(0.98);
}

.weg-name {
  font-weight: 650;
}

.weg-wert {
  grid-column: 1;
  color: var(--muted);
  font-size: var(--t-klein);
}

.weg-pfeil {
  grid-row: 1 / span 2;
  grid-column: 2;
  color: var(--accent-tief);
  font-weight: 650;
}

.weg-haupt {
  background: var(--accent);
  color: var(--weiss);
}

.weg-haupt .weg-wert,
.weg-haupt .weg-pfeil {
  color: var(--weiss);
}

@media (hover: hover) and (pointer: fine) {
  .weg:hover {
    background: var(--surface);
  }

  .weg-haupt:hover {
    background: var(--accent-tief);
  }

  .fenster-zu:hover {
    background: var(--surface-dunkel);
  }
}

/* ---------- Impressum, Datenschutz, Fehlerseite ---------- */

.rechtstext {
  max-width: 760px;
  padding: 64px 0 120px;
}

.rechtstext h1 {
  margin-bottom: 40px;
  font-size: var(--t-gross);
}

.rechtstext h2 {
  margin: 40px 0 12px;
  font-size: var(--t-text);
  letter-spacing: 0;
}

.rechtstext h3 {
  margin: 24px 0 8px;
}

.rechtstext p + p,
.rechtstext p + ul,
.rechtstext ul + p {
  margin-top: 1em;
}

.rechtstext a:not(.knopf) {
  color: var(--accent-tief);
}

.rechtstext .punkte {
  margin-top: 1em;
}

.rechtstext h4 {
  margin: 20px 0 6px;
  color: var(--muted);
  font-size: var(--t-text);
  font-weight: 600;
  line-height: 1.3;
}

/* Langer Text: drei Ebenen müssen sich beim Überfliegen klar trennen, die Zeilen bleiben lesbar kurz */
.rechtstext-lang {
  max-width: 640px;
}

.rechtstext-lang h2 {
  margin: 56px 0 16px;
  font-size: var(--t-mittel);
  line-height: 1.2;
  letter-spacing: -0.015em;
}

.rechtstext-lang h3 {
  margin: 32px 0 8px;
}

.rechtstext-lang h2 + h3 {
  margin-top: 16px;
}

.rechtstext-lang h3 + h4 {
  margin-top: 12px;
}

/* ---------- Auftritt beim Scrollen (nur mit Skript, nur am großen Bildschirm) ---------- */

@media (prefers-reduced-motion: no-preference) {
  .wartet {
    opacity: 0;
    transform: translateY(20px);
  }

  .erscheint {
    transition: opacity 600ms var(--raus), transform 600ms var(--raus);
  }
}

/* ---------- Bewegung reduzieren: keine Wege und keine Endlosschleifen, alle Inhalte bleiben ---------- */

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

  .dia,
  .dia.ist-aktiv,
  [data-teil],
  .anruf-verpasst {
    transform: none !important;
  }

  .ring,
  .tippt span {
    animation: none !important;
  }

  /* Neue Nachrichten und der Dialog blenden nur noch ein, ohne Weg */
  .chat-verlauf > * {
    animation-name: einblenden;
  }

  .fenster[open] {
    animation-name: einblenden;
  }

  .l-balken {
    display: none;
  }
}

@keyframes einblenden {
  from {
    opacity: 0;
  }
}