/*
  Die Landingpage von SimplyDay (Neubau 07.10.2026).

  Farben aus dem Zeichen: Sand, Waldgrün, ein Gold. Schrift ist Fira Sans
  vom eigenen Server -- keine Schriften eines Werbekonzerns, keine, die
  man von jeder zweiten erzeugten Seite kennt.
*/

@font-face {
  font-family: "Fira Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/media/schrift/fira-sans-400-latin.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Fira Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/media/schrift/fira-sans-600-latin.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}

:root {
  --sand: #fcfaf6;
  --sand-tief: #f3eee4;
  --flaeche: #ffffff;
  --tinte: #17201d;
  --tinte-leise: #5a6661;
  --wald: #2f6a50;
  --wald-tief: #1f4034;
  --wald-hell: #e3efe7;
  --gold: #f2b54e;
  --gold-tief: #b97a12;
  --rose: #e8a6a0;
  --himmel: #9cc3d8;
  --haarlinie: rgba(23, 32, 29, 0.1);
  --auf-dunkel: #fcfaf6;
  --rinne: clamp(20px, 5vw, 64px);
  --breite: 72rem;
  --rund: 22px;
  /* Messen (Entwurf 78): Wasser und Strom wie in der App. */
  --ms-runde: 13s;
  --ms-wasser: #2f6690;
  --ms-wasser-hell: #e3eef6;
  --ms-strom: #a86a10;
  --ms-strom-hell: #fbf0d9;
  --ms-stopp: #b8463c;
  --ms-schatten:
    0 1px 2px rgba(23, 32, 29, 0.06), 0 8px 24px rgba(23, 32, 29, 0.07);
}

@media (prefers-color-scheme: dark) {
  :root {
    --sand: #101614;
    --sand-tief: #161e1b;
    --flaeche: #1a2421;
    --tinte: #ebf1ee;
    --tinte-leise: #9eaca6;
    --wald: #86c3a3;
    --wald-tief: #12201b;
    --wald-hell: #20332a;
    --gold: #eab460;
    --gold-tief: #eab460;
    --haarlinie: rgba(235, 241, 238, 0.14);
    --ms-wasser: #8dbad4;
    --ms-wasser-hell: #1d2f3a;
    --ms-strom: #eab460;
    --ms-strom-hell: #3a2f18;
    --ms-stopp: #e3958d;
    --ms-schatten: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.35);
  }
}

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--sand);
  color: var(--tinte);
  font-family:
    "Fira Sans",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Nichts ragt über den Rand: `clip` statt `hidden` an Wurzel und Körper.
   Mit `hidden` am Körper blieb die Seite für Safari breiter, sobald etwas
   hinausragte (die Bühne „Alles in einem“) -- man konnte herauszoomen, und
   die Seite stand verschoben mit weißem Streifen da (Inhaber 19.10.2026).
   `clip` schafft keinen eigenen Scrollbereich; `position: sticky` bleibt. */
html,
body {
  overflow-x: clip;
}

h1,
h2,
h3 {
  margin: 0;
  font-weight: 600;
  /* Normal gesetzt (Entwurf 83): stark verringerter Abstand und Zeilen
     unter 1,1 sind der Stil vieler Vorlagen; Fira Sans braucht das nicht. */
  letter-spacing: -0.01em;
  line-height: 1.15;
  text-wrap: balance;
}

h1 {
  /* Am Handy so groß, dass „Euer Familienalltag“ in eine Zeile passt. */
  font-size: clamp(2.3rem, 6.4vw, 4.6rem);
  letter-spacing: -0.01em;
}

h2 {
  font-size: clamp(2rem, 4.4vw, 3.1rem);
}

h3 {
  font-size: 1.35rem;
}

p {
  margin: 0;
}

img,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
}

.versteckt {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.skip {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 20;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--wald-tief);
  color: var(--auf-dunkel);
}

.skip:focus {
  top: 12px;
}

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

.fuehrung {
  font-size: clamp(1.08rem, 1.6vw, 1.25rem);
  color: var(--tinte-leise);
  max-width: 34rem;
  text-wrap: pretty;
}

.beiwerk {
  font-size: 0.88rem;
  color: var(--tinte-leise);
}

.spalte {
  display: grid;
  gap: 16px;
  width: 100%;
}

.spalte > * {
  max-width: 40rem;
}

/* Knöpfe */
.knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 24px;
  border-radius: 999px;
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  border: 0;
  transition:
    transform 160ms ease,
    background-color 160ms ease;
}

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

.knopf-voll {
  background: var(--wald-tief);
  color: var(--auf-dunkel);
}

.knopf-voll:hover {
  background: var(--wald);
}

.knopf-still {
  background: transparent;
  color: var(--tinte);
  box-shadow: inset 0 0 0 1.5px var(--haarlinie);
}

.knopf-still:hover {
  background: var(--sand-tief);
}

.knopf-hell {
  background: rgba(252, 250, 246, 0.12);
  color: var(--auf-dunkel);
  box-shadow: inset 0 0 0 1px rgba(252, 250, 246, 0.3);
}

@media (prefers-color-scheme: dark) {
  .knopf-voll {
    background: var(--wald);
    color: #0d1714;
  }
}

/* Kopf */
.kopf {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px var(--rinne);
  background: color-mix(in srgb, var(--sand) 78%, transparent);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border-bottom: 1px solid var(--haarlinie);
}

.marke {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-size: 1.2rem;
  letter-spacing: -0.02em;
}

.marke b,
.fuss b {
  font-weight: 600;
}

.marke-zeichen {
  width: 34px;
  height: 34px;
  color: var(--wald-tief);
}

.zeichen-gold {
  stroke: var(--gold);
}

@media (prefers-color-scheme: dark) {
  .marke-zeichen {
    color: var(--tinte);
  }
}

.kopf-nav {
  display: flex;
  align-items: center;
  gap: 22px;
}

.kopf-nav a:not(.knopf) {
  text-decoration: none;
  color: var(--tinte-leise);
  font-size: 0.95rem;
}

.kopf-nav a:not(.knopf):hover {
  color: var(--tinte);
}

.kopf-nav .knopf {
  min-height: 40px;
  padding: 0 18px;
}

@media (max-width: 760px) {
  .kopf-nav a:not(.knopf) {
    display: none;
  }
}

/* Abschnitte */
main > section {
  position: relative;
  padding: clamp(72px, 11vw, 140px) var(--rinne);
}

main > section > * {
  max-width: var(--breite);
  margin-inline: auto;
}

/* Abschnitte mit eigenem Raster (Text neben Telefon) setzen die Ränder
   ihrer Teile auf null; sie bleiben trotzdem in derselben Breite wie alle
   anderen, mittig -- am großen Bildschirm standen Text und Telefon sonst an
   den Rändern weit auseinander (Inhaber 19.10.2026). */
.auftakt,
.abrechnung,
.spass {
  padding-inline: max(var(--rinne), calc((100% - var(--breite)) / 2));
}

/* Telefon-Rahmen um die Bildschirmfotos */
.telefon {
  margin: 0;
  justify-self: center;
  width: min(300px, 78vw);
  padding: 9px;
  border-radius: 46px;
  background: #0c1210;
  box-shadow:
    0 2px 0 1px rgba(255, 255, 255, 0.06) inset,
    0 40px 80px -28px rgba(15, 32, 26, 0.45),
    0 16px 32px -12px rgba(15, 32, 26, 0.25);
}

.telefon img,
.telefon video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 38px;
}

/* Das Video hat feste Maße (440 × 956), damit beim Laden nichts springt. */
.telefon video {
  aspect-ratio: 440 / 956;
  object-fit: cover;
  background: #0c1210;
}

/* Auftakt */
.auftakt {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  align-items: center;
  gap: clamp(40px, 6vw, 80px);
  min-height: min(92vh, 900px);
  overflow: hidden;
  isolation: isolate;
}

.auftakt > * {
  max-width: none;
  margin: 0;
}

.auftakt-text {
  display: grid;
  gap: 26px;
  justify-items: start;
}

.auftakt-zeichen {
  position: relative;
  width: 96px;
  height: 96px;
  color: var(--wald-tief);
}

.pixelregen,
.auftakt-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Mit Skript erscheint das scharfe Zeichen erst nach dem Pixelregen. */
.js .auftakt-svg {
  opacity: 0;
  transition: opacity 400ms ease;
}

.js .auftakt-zeichen.fertig .auftakt-svg {
  opacity: 1;
}

.pixelregen {
  overflow: visible;
}

@media (prefers-color-scheme: dark) {
  .auftakt-zeichen {
    color: var(--tinte);
  }
}

.telefon-auftakt {
  transform: rotate(2.5deg);
}

@media (max-width: 860px) {
  .auftakt {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
    padding-top: 48px;
  }
  .telefon-auftakt {
    width: min(260px, 70vw);
  }
}

/* Was SimplyDay tut: vier Bildschirme zum Umschalten */
.zeigen {
  display: grid;
  gap: 40px;
  background: var(--sand-tief);
}

.schalter {
  display: grid;
  gap: 32px;
  width: 100%;
}

.schalter > input,
.blasen > input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* Eine Zeile, nie umbrechen (Befund Inhaber 07.10. am iPhone): Reicht der
   Platz bei großer Schrift nicht, lässt sich die Leiste seitlich schieben. */
.schalter-reiter {
  display: inline-flex;
  justify-self: start;
  flex-wrap: nowrap;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  background: var(--flaeche);
  box-shadow: inset 0 0 0 1px var(--haarlinie);
}

.schalter-reiter::-webkit-scrollbar {
  display: none;
}

.schalter-reiter label {
  flex: 0 0 auto;
  white-space: nowrap;
  padding: 9px 18px;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--tinte-leise);
  transition:
    background-color 200ms ease,
    color 200ms ease;
}

@media (max-width: 560px) {
  /* Sechs Reiter (seit Entwurf 69 ohne „Heute“) passen auf 375 px nur mit
     knappen Abständen. */
  .schalter-reiter {
    justify-self: stretch;
    gap: 2px;
  }
  .schalter-reiter label {
    flex: 1 0 auto;
    padding: 9px 5px;
    font-size: min(0.95rem, 3.4vw);
    text-align: center;
  }
}

#zeigen-einkauf:checked ~ .schalter-reiter [for="zeigen-einkauf"],
#zeigen-geld:checked ~ .schalter-reiter [for="zeigen-geld"],
#zeigen-essen:checked ~ .schalter-reiter [for="zeigen-essen"],
#zeigen-chat:checked ~ .schalter-reiter [for="zeigen-chat"],
#zeigen-auto:checked ~ .schalter-reiter [for="zeigen-auto"],
#zeigen-vertrag:checked ~ .schalter-reiter [for="zeigen-vertrag"] {
  background: var(--wald-tief);
  color: var(--auf-dunkel);
}

#zeigen-einkauf:focus-visible ~ .schalter-reiter [for="zeigen-einkauf"],
#zeigen-geld:focus-visible ~ .schalter-reiter [for="zeigen-geld"],
#zeigen-essen:focus-visible ~ .schalter-reiter [for="zeigen-essen"],
#zeigen-chat:focus-visible ~ .schalter-reiter [for="zeigen-chat"],
#zeigen-auto:focus-visible ~ .schalter-reiter [for="zeigen-auto"],
#zeigen-vertrag:focus-visible ~ .schalter-reiter [for="zeigen-vertrag"] {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}

@media (prefers-color-scheme: dark) {
  #zeigen-einkauf:checked ~ .schalter-reiter [for="zeigen-einkauf"],
  #zeigen-geld:checked ~ .schalter-reiter [for="zeigen-geld"],
  #zeigen-essen:checked ~ .schalter-reiter [for="zeigen-essen"],
  #zeigen-chat:checked ~ .schalter-reiter [for="zeigen-chat"],
  #zeigen-auto:checked ~ .schalter-reiter [for="zeigen-auto"],
  #zeigen-vertrag:checked ~ .schalter-reiter [for="zeigen-vertrag"] {
    background: var(--wald);
    color: #0d1714;
  }
}

.schalter-buehne {
  display: grid;
}

.szene {
  grid-area: 1 / 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(32px, 6vw, 96px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition:
    opacity 380ms ease,
    transform 380ms ease,
    visibility 0s 380ms;
}

.szene > div {
  display: grid;
  gap: 14px;
  max-width: 30rem;
}

.szene h3 {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
}

.szene p {
  font-size: 1.1rem;
  color: var(--tinte-leise);
}

#zeigen-einkauf:checked ~ .schalter-buehne .szene-einkauf,
#zeigen-geld:checked ~ .schalter-buehne .szene-geld,
#zeigen-essen:checked ~ .schalter-buehne .szene-essen,
#zeigen-chat:checked ~ .schalter-buehne .szene-chat,
#zeigen-auto:checked ~ .schalter-buehne .szene-auto,
#zeigen-vertrag:checked ~ .schalter-buehne .szene-vertrag {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition:
    opacity 380ms ease,
    transform 380ms ease;
}

@media (max-width: 760px) {
  .szene {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Abrechnung: der Rechner */
/* Geld nebenbei (Entwurf 65): Wege links, der Monat rechts -- beide Spalten
   gleich hoch, die Wege teilen sich die Höhe. */
.geld {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 36px;
  background: var(--sand-tief);
  --geld-fix: #5f97b8;
  --geld-fix-hell: #e3eef5;
  --geld-abo: #6b5bb5;
  --geld-abo-hell: #ece8f8;
  --geld-alltag: var(--wald);
  --geld-sparen: var(--gold);
  --geld-gold-hell: #fbf0d9;
  --geld-spur: #ece6da;
}

@media (prefers-color-scheme: dark) {
  .geld {
    --geld-fix: #9cc3d8;
    --geld-fix-hell: #1d2f3a;
    --geld-abo: #b9adf0;
    --geld-abo-hell: #2a2640;
    --geld-gold-hell: #3a2f18;
    --geld-spur: #26302c;
  }
}

.geld > .spalte .etikett,
.bausteine > .spalte .etikett {
  color: var(--wald);
}

.geld-feld {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  align-items: stretch;
  gap: clamp(20px, 3vw, 36px);
  width: 100%;
}

.geld-wege {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-auto-rows: 1fr;
  gap: 12px;
}

.geld-wege li {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border-radius: var(--rund);
  background: var(--flaeche);
  box-shadow: inset 0 0 0 1px var(--haarlinie);
  transition:
    transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 220ms ease;
}

.geld-wege li:hover {
  transform: translateY(-3px);
  box-shadow:
    inset 0 0 0 1.5px var(--gold),
    0 18px 32px -24px rgba(15, 32, 26, 0.45);
}

.geld-wege b {
  display: block;
  font-weight: 600;
  line-height: 1.3;
}

.geld-wege span {
  color: var(--tinte-leise);
  font-size: 0.95rem;
  line-height: 1.45;
}

.geld-wege em {
  font-style: normal;
  font-weight: 600;
  color: var(--tinte);
}

.geld-zeichen {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 13px;
  transition: transform 260ms cubic-bezier(0.2, 1.6, 0.4, 1);
}

.geld-wege li:hover .geld-zeichen {
  transform: rotate(-8deg) scale(1.08);
}

.geld-zeichen svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.geld-fix {
  background: var(--geld-fix-hell);
  color: var(--geld-fix);
}
.geld-bon {
  background: var(--wald-hell);
  color: var(--wald);
}
.geld-karte {
  background: var(--geld-fix-hell);
  color: var(--geld-fix);
}
.geld-mail {
  background: var(--geld-abo-hell);
  color: var(--geld-abo);
}
.geld-abo {
  background: var(--geld-gold-hell);
  color: var(--gold-tief);
}

.geld-buehne {
  display: grid;
  align-content: space-between;
  gap: 16px;
  min-width: 0;
  padding: clamp(18px, 3vw, 30px);
  border-radius: 28px;
  background: var(--flaeche);
  box-shadow:
    inset 0 0 0 1px var(--haarlinie),
    0 30px 60px -40px rgba(15, 32, 26, 0.45);
}

.geld-oben {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 12px;
  font-size: 0.9rem;
  color: var(--tinte-leise);
  font-variant-numeric: tabular-nums;
}

.geld-oben span:first-child {
  font-weight: 600;
}

.geld-uebrig {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
}

.geld-uebrig strong {
  font-size: clamp(2.4rem, 5vw, 3.2rem);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1;
  color: var(--wald);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.geld-uebrig span {
  color: var(--tinte-leise);
}

.geld-balken {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.geld-spur {
  fill: var(--geld-spur);
}

.geld-teil {
  transform-box: fill-box;
  transform-origin: left center;
  transition: opacity 200ms ease;
}

.geld-t1 {
  fill: var(--geld-fix);
}
.geld-t2 {
  fill: var(--geld-abo);
}
.geld-t3 {
  fill: var(--geld-alltag);
}
.geld-t4 {
  fill: var(--geld-sparen);
}

.geld-flug {
  transform: translate(var(--x), 12px);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.geld-f1 {
  fill: var(--geld-fix-hell);
  stroke: var(--geld-fix);
}
.geld-f2 {
  fill: var(--geld-abo-hell);
  stroke: var(--geld-abo);
}
.geld-f3,
.geld-f4 {
  fill: var(--wald-hell);
  stroke: var(--wald);
}
.geld-f5 {
  fill: var(--geld-gold-hell);
  stroke: var(--gold-tief);
}

.geld-flug path {
  fill: none;
}

.geld-f3 path:first-child,
.geld-f4 path:first-child {
  fill: var(--wald-hell);
}

.geld-rest path {
  fill: none;
  stroke: var(--wald);
  stroke-width: 1.5;
  stroke-dasharray: 80;
}

.geld-rest text,
.geld-null {
  font-size: 11px;
  font-family: inherit;
}

.geld-rest text {
  fill: var(--wald);
  font-weight: 600;
}

.geld-null {
  fill: var(--tinte-leise);
}

/* Posten: Name und Betrag in einer Zeile, der Betrag bricht nie um. */
.geld-posten {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 18px;
  font-variant-numeric: tabular-nums;
}

.geld-posten li {
  display: grid;
  gap: 2px;
  padding: 8px 10px;
  margin-inline: -10px;
  border-radius: 12px;
  border-top: 1px solid var(--haarlinie);
  transition: background-color 200ms ease;
}

.geld-posten-kopf {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 0.95rem;
}

.geld-posten-kopf b {
  margin-left: auto;
  font-weight: 600;
  white-space: nowrap;
}

.geld-posten i {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  align-self: center;
}

.geld-posten li[data-teil="fix"] i {
  background: var(--geld-fix);
}
.geld-posten li[data-teil="abo"] i {
  background: var(--geld-abo);
}
.geld-posten li[data-teil="alltag"] i {
  background: var(--geld-alltag);
}
.geld-posten li[data-teil="sparen"] i {
  background: var(--geld-sparen);
}

.geld-posten small {
  color: var(--tinte-leise);
  font-size: 0.8rem;
  line-height: 1.35;
}

/* Zeigt man auf einen Posten, tritt sein Teil im Balken hervor -- und
   umgekehrt. */
.geld-posten li:hover {
  background: var(--sand-tief);
}

.geld-buehne:has(.geld-posten li[data-teil="fix"]:hover)
  .geld-teil:not([data-teil="fix"]),
.geld-buehne:has(.geld-posten li[data-teil="abo"]:hover)
  .geld-teil:not([data-teil="abo"]),
.geld-buehne:has(.geld-posten li[data-teil="alltag"]:hover)
  .geld-teil:not([data-teil="alltag"]),
.geld-buehne:has(.geld-posten li[data-teil="sparen"]:hover)
  .geld-teil:not([data-teil="sparen"]) {
  opacity: 0.25;
}

.geld-buehne:has(.geld-teil[data-teil="fix"]:hover)
  .geld-posten
  li[data-teil="fix"],
.geld-buehne:has(.geld-teil[data-teil="abo"]:hover)
  .geld-posten
  li[data-teil="abo"],
.geld-buehne:has(.geld-teil[data-teil="alltag"]:hover)
  .geld-posten
  li[data-teil="alltag"],
.geld-buehne:has(.geld-teil[data-teil="sparen"]:hover)
  .geld-posten
  li[data-teil="sparen"] {
  background: var(--sand-tief);
}

.geld-tipps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.geld-tipps li {
  font-size: 0.85rem;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--sand-tief);
  box-shadow: inset 0 0 0 1px var(--haarlinie);
  transition:
    transform 200ms cubic-bezier(0.2, 1.4, 0.4, 1),
    box-shadow 200ms ease;
}

.geld-tipps li:hover {
  transform: translateY(-2px);
  box-shadow: inset 0 0 0 1.5px var(--gold);
}

.geld-tipps b {
  font-weight: 600;
  color: var(--wald);
  white-space: nowrap;
}

.geld-nochmal {
  justify-self: start;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--wald);
  background: none;
  border: 0;
  border-radius: 999px;
  padding: 6px 12px;
  box-shadow: inset 0 0 0 1px var(--haarlinie);
  cursor: pointer;
}

.geld-nochmal:hover {
  box-shadow: inset 0 0 0 1.5px var(--wald);
}

.geld-klein {
  display: grid;
  gap: 10px;
  width: 100%;
  font-size: 0.88rem;
  color: var(--tinte-leise);
}

.geld-klein p {
  max-width: 52rem;
}

.geld-schloss {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.geld-schloss svg {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 3px;
  fill: none;
  stroke: var(--wald);
  stroke-width: 2;
}

/* Bewegung. „wartet“ setzt das Skript, bis die Bühne im Bild ist; ohne
   Skript bleibt das fertige Bild stehen. */
.geld-buehne.wartet .geld-teil {
  transform: scaleX(0);
}
.geld-buehne.wartet .geld-flug,
.geld-buehne.wartet .geld-tipps li {
  opacity: 0;
}
.geld-buehne.wartet .geld-rest path {
  stroke-dashoffset: 80;
}

.geld-buehne.spielt .geld-teil {
  animation: geld-wachsen 0.7s cubic-bezier(0.2, 0.9, 0.25, 1.15) backwards;
}
.geld-buehne.spielt .geld-t1 {
  animation-delay: 0.35s;
}
.geld-buehne.spielt .geld-t2 {
  animation-delay: 0.85s;
}
.geld-buehne.spielt .geld-t3 {
  animation-delay: 1.2s;
}
.geld-buehne.spielt .geld-t4 {
  animation-delay: 1.75s;
}

.geld-buehne.spielt .geld-flug {
  animation: geld-fallen 0.8s cubic-bezier(0.3, 0.7, 0.2, 1) backwards;
}
.geld-buehne.spielt .geld-f1 {
  animation-delay: 0.05s;
}
.geld-buehne.spielt .geld-f2 {
  animation-delay: 0.55s;
}
.geld-buehne.spielt .geld-f3 {
  animation-delay: 0.85s;
}
.geld-buehne.spielt .geld-f4 {
  animation-delay: 1.1s;
}
.geld-buehne.spielt .geld-f5 {
  animation-delay: 1.45s;
}

.geld-buehne.spielt .geld-rest path {
  animation: geld-zeichnen 0.6s ease-out 2.35s backwards;
}

.geld-buehne.spielt .geld-posten li {
  animation: geld-aufleuchten 0.9s ease-out backwards;
}
.geld-buehne.spielt .geld-posten li[data-teil="fix"] {
  animation-delay: 0.45s;
}
.geld-buehne.spielt .geld-posten li[data-teil="abo"] {
  animation-delay: 0.95s;
}
.geld-buehne.spielt .geld-posten li[data-teil="alltag"] {
  animation-delay: 1.3s;
}
.geld-buehne.spielt .geld-posten li[data-teil="sparen"] {
  animation-delay: 1.85s;
}

.geld-buehne.spielt .geld-tipps li {
  animation: geld-auftauchen 0.5s cubic-bezier(0.2, 1.4, 0.4, 1) backwards;
}
.geld-buehne.spielt .geld-tipps li:nth-child(1) {
  animation-delay: 2.5s;
}
.geld-buehne.spielt .geld-tipps li:nth-child(2) {
  animation-delay: 2.62s;
}
.geld-buehne.spielt .geld-tipps li:nth-child(3) {
  animation-delay: 2.74s;
}
.geld-buehne.spielt .geld-tipps li:nth-child(4) {
  animation-delay: 2.86s;
}

.geld-buehne.spielt .geld-uebrig strong {
  animation: geld-ankommen 0.5s cubic-bezier(0.2, 1.5, 0.4, 1) 2.45s backwards;
}

@keyframes geld-wachsen {
  from {
    transform: scaleX(0);
  }
}

/* Ein Beleg fällt im Bogen in seinen Teil, federt nach und bleibt liegen. */
@keyframes geld-fallen {
  0% {
    opacity: 0;
    transform: translate(calc(var(--x) - 26px), -46px) rotate(-24deg) scale(0.6);
  }
  55% {
    opacity: 1;
    transform: translate(var(--x), 20px) rotate(8deg) scale(1.05);
  }
  78% {
    transform: translate(var(--x), 8px) rotate(-3deg);
  }
  100% {
    transform: translate(var(--x), 12px);
  }
}

@keyframes geld-zeichnen {
  from {
    stroke-dashoffset: 80;
  }
}

@keyframes geld-aufleuchten {
  0% {
    background-color: transparent;
  }
  30% {
    background-color: var(--geld-gold-hell);
  }
  100% {
    background-color: transparent;
  }
}

@keyframes geld-auftauchen {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.9);
  }
}

@keyframes geld-ankommen {
  50% {
    transform: scale(1.06);
  }
}

@media (prefers-reduced-motion: reduce) {
  .geld-buehne * {
    animation: none !important;
  }
}

@media (max-width: 860px) {
  .geld-feld {
    grid-template-columns: minmax(0, 1fr);
  }
  .geld-wege {
    grid-auto-rows: auto;
  }
}

@media (max-width: 460px) {
  .geld-posten {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Die Nachzahlung sehen (Entwurf 99, B): Rechner und Telefon auf einer Fläche,
   das Telefon unten angeschnitten, darunter Home Assistant als Leiste und zwei
   Karten. Vorher eine lange Spalte, das Telefon saß verloren daneben (Inhaber
   04.11.2026). Die Bausteine gibt es auch auf „Zählerstände“, dort bleiben sie
   einspaltig: Alles hier gilt nur unter .abrechnung. */
.ab-kopf {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: clamp(40px, 6vw, 80px);
  align-items: end;
  overflow: hidden;
  padding: clamp(24px, 4.5vw, 56px) clamp(20px, 4.5vw, 56px) 0;
  border-radius: 32px;
  background: var(--wald-hell);
}

.ab-text {
  display: grid;
  gap: 20px;
  min-width: 0;
  padding-bottom: clamp(24px, 4.5vw, 56px);
}

.ab-text h2,
.ab-text .fuehrung {
  margin: 0;
}

.ab-text .fuehrung {
  max-width: 38rem;
}

.ab-kopf .telefon {
  justify-self: end;
  overflow: hidden;
  width: 300px;
  height: 570px;
  padding-bottom: 0;
  border-radius: 46px 46px 0 0;
  box-shadow: 0 30px 60px -20px rgba(15, 32, 26, 0.4);
}

.abrechnung .rechner {
  grid-template-areas:
    "label ergebnis"
    "wert ergebnis"
    "regler ergebnis"
    "weg weg"
    "bei bei";
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px 24px;
  align-items: center;
  max-width: none;
  padding: 24px;
}

.abrechnung .rechner label {
  grid-area: label;
  align-self: end;
}

.abrechnung .rechner output {
  grid-area: wert;
}

.abrechnung .rechner input {
  grid-area: regler;
  align-self: start;
}

.abrechnung .ergebnis {
  grid-area: ergebnis;
  align-self: stretch;
  align-content: center;
  margin: 0;
}

.abrechnung .rechenweg {
  grid-area: weg;
  margin-top: 12px;
  padding-top: 14px;
  border-top: 1px solid var(--haarlinie);
}

.abrechnung .beiwerk {
  grid-area: bei;
  margin: 4px 0 0;
  color: var(--tinte-leise);
  font-size: 0.82rem;
}

.abrechnung .ha-hinweis {
  align-items: center;
  max-width: none;
  margin-top: 16px;
  padding: 18px 24px;
  background: var(--flaeche);
  box-shadow: inset 0 0 0 1px var(--haarlinie);
}

.abrechnung .ha-hinweis h3 {
  margin-bottom: 2px;
}

.ab-wege {
  display: grid;
  grid-template-columns: minmax(0, 9fr) minmax(0, 14fr);
  gap: 16px;
  align-items: stretch;
  margin-top: 16px;
}

.abrechnung .geraete,
.abrechnung .messen {
  gap: 14px;
  align-content: start;
  max-width: none;
  padding: clamp(20px, 3vw, 32px);
  border-radius: 28px;
  background: var(--sand-tief);
}

.abrechnung .geraete h3,
.abrechnung .messen h3 {
  font-size: clamp(1.3rem, 2vw, 1.6rem);
  letter-spacing: -0.01em;
}

.abrechnung .geraete-bilder {
  gap: 12px;
}

/* Neben dem Telefon wird der Rechner zu schmal für zwei Spalten. */
@media (max-width: 1080px) {
  .abrechnung .rechner {
    grid-template-areas: "label" "wert" "regler" "ergebnis" "weg" "bei";
    grid-template-columns: minmax(0, 1fr);
  }

  .abrechnung .ergebnis {
    margin-top: 8px;
  }

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

/* Karten über die volle Breite: Bilder nebeneinander, sonst werden sie riesig. */
@media (min-width: 560px) and (max-width: 1080px) {
  .abrechnung .geraete-bilder,
  .abrechnung .ms-live {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
  }

  .abrechnung .geraete-bilder {
    align-items: center;
  }

  .abrechnung .ms-live p {
    grid-column: 1 / -1;
  }
}

@media (max-width: 860px) {
  .ab-kopf {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    margin-inline: calc(var(--rinne) * -0.5);
    padding-inline: calc(var(--rinne) * 0.75);
    border-radius: 26px;
  }

  .ab-text {
    padding-bottom: 28px;
  }

  .ab-kopf .telefon {
    justify-self: center;
    width: min(270px, 72vw);
    height: 400px;
  }

  .abrechnung .rechner {
    padding: 20px;
  }

  .abrechnung .ha-hinweis {
    align-items: start;
    padding: 16px 18px;
  }

  .abrechnung .geraete,
  .abrechnung .messen {
    margin-inline: calc(var(--rinne) * -0.5);
    padding: 22px calc(var(--rinne) * 0.75);
    border-radius: 26px;
  }
}

/* Home Assistant als eigene Karte (ha-hinweis.ts), damit es nicht
   untergeht (Inhaber 23.10.2026). */
.ha-hinweis {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  max-width: 30rem;
  padding: 20px 22px;
  border-radius: var(--rund);
  background: var(--wald-hell);
  color: var(--tinte);
}

.ha-hinweis h3 {
  margin: 0 0 6px;
  font-size: 1.15rem;
  line-height: 1.3;
}

.ha-hinweis p {
  margin: 0;
  color: var(--tinte-leise);
  line-height: 1.55;
}

.ha-zeichen {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--wald);
  color: var(--auf-dunkel);
}

@media (prefers-color-scheme: dark) {
  .ha-zeichen {
    color: var(--wald-tief);
  }
}

/* Geräte unter dem Stromzähler (Entwurf 83): zwei Bilder aus der App. */
.geraete {
  max-width: 30rem;
  display: grid;
  gap: 12px;
}
.geraete h3 {
  margin: 0;
  font-size: 1.15rem;
  line-height: 1.3;
}
.geraete > p {
  margin: 0;
  color: var(--tinte-leise);
  line-height: 1.55;
}
.geraete-bilder {
  display: grid;
  gap: 14px;
}
.geraete-bilder img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--rund);
  box-shadow: var(--ms-schatten);
}

/* ---------- Messen mit Start und Stopp (Entwurf 78) ------------------
   Unter der Home-Assistant-Karte (messen-szene.ts). Jedes bewegte Teil eine
   eigene Ebene, bewegt nur über transform und opacity; die SVGs sind nur
   Inhalt. Ohne Skript und bei „Bewegung reduzieren“ stehen die Ergebnisse
   da, die Bewegung gibt es nur mit .spielt (marketing.js, „Messen“). */
.messen {
  max-width: 30rem;
  display: grid;
  gap: 12px;
}
.messen h3 {
  margin: 0;
  font-size: 1.15rem;
  line-height: 1.3;
}
.messen > p {
  margin: 0;
  color: var(--tinte-leise);
  line-height: 1.55;
}
.messen .leise {
  font-size: 0.85rem;
}

/* Die Live-Aktivität einer Messung (Aufnahmen aus der App, 03.11.2026):
   nur die Karte vom Sperrbildschirm und die aufgeklappte Anzeige oben am
   Bildschirm, randlos ausgeschnitten (Inhaber); die Rundung schneidet die
   Ecken mit dem Hintergrund weg. Ein Block wie die Kacheln darüber, über
   jedem Bild steht, was es zeigt (Inhaber). Untereinander, auch breit:
   .messen ist nur 30rem schmal, nebeneinander wären die Zahlen im Bild zu
   klein. */
.ms-live {
  display: grid;
  gap: 14px;
  padding: 14px;
  border-radius: 20px;
  background: var(--flaeche);
  box-shadow: var(--ms-schatten);
}
.ms-live figure {
  margin: 0;
  display: grid;
  gap: 6px;
}
.ms-live figcaption {
  color: var(--tinte-leise);
  font-size: 0.85rem;
  line-height: 1.35;
}
.ms-live figcaption strong {
  color: var(--tinte);
  font-weight: 700;
}
.ms-live img {
  display: block;
  width: 100%;
  height: auto;
}
.ms-live-karte {
  border-radius: 4.2% / 10.6%;
}
/* Am Bild gemessen: Die Insel ist oben runder als unten (60 und 50 px von
   566 x 210), sonst blitzt oben der Hintergrund durch. */
.ms-live-insel {
  border-radius: 10.6% 10.6% 8.8% 8.8% / 28.6% 28.6% 23.8% 23.8%;
}
.ms-live p {
  margin: 0;
  color: var(--tinte-leise);
  font-size: 0.9rem;
  line-height: 1.5;
}

.ms-szene {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
@media (max-width: 359px) {
  .ms-szene {
    grid-template-columns: minmax(0, 1fr);
  }
}

.ms-kachel {
  --ton: var(--ms-wasser);
  --ton-hell: var(--ms-wasser-hell);
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 64px auto auto;
  gap: 8px;
  padding: 14px 14px 12px;
  min-height: 236px;
  border-radius: 20px;
  background: var(--flaeche);
  box-shadow: var(--ms-schatten);
  font-variant-numeric: tabular-nums;
}
/* Eine halbe Runde versetzt (setzt das Skript): Es passiert immer etwas,
     nie beides zugleich. */
.ms-kachel.strom {
  --ton: var(--ms-strom);
  --ton-hell: var(--ms-strom-hell);
}

.ms-kopf {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.ms-zeichen {
  flex: none;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 8px;
  background: var(--ton-hell);
  color: var(--ton);
}
.ms-name {
  font-weight: 700;
  font-size: 0.9rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ms-laeuft {
  position: absolute;
  left: 6px;
  top: 6px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--ton);
  padding: 2px 7px;
  border-radius: 99px;
  background: var(--flaeche);
}
.ms-punkt {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

/* Das Bild: Dusche mit Tropfen, Fernseher mit Live-Kurve. */
.ms-bild {
  position: relative;
  border-radius: 12px;
  background: var(--ton-hell);
  overflow: hidden;
}
.ms-brause {
  position: absolute;
  right: 12px;
  top: 4px;
  width: 34px;
  color: var(--ton);
}
.ms-tropfen {
  position: absolute;
  right: 14px;
  top: 21px;
  width: 30px;
  height: 40px;
}
.ms-tropf {
  position: absolute;
  top: 0;
  width: 3px;
  height: 8px;
  border-radius: 2px;
  background: var(--ton);
  opacity: 0;
}
.ms-tropf:nth-child(1) {
  left: 2px;
}
.ms-tropf:nth-child(2) {
  left: 9px;
}
.ms-tropf:nth-child(3) {
  left: 15px;
}
.ms-tropf:nth-child(4) {
  left: 21px;
}
.ms-tropf:nth-child(5) {
  left: 27px;
}
.ms-kurve {
  position: absolute;
  inset: 10px 0 18px;
  overflow: hidden;
}
.ms-kurve-band {
  position: absolute;
  left: 0;
  top: 0;
  width: 200%;
  height: 100%;
  color: var(--ton);
}
.ms-kurve-band svg {
  display: block;
  width: 100%;
  height: 100%;
}
.ms-jetzt {
  position: absolute;
  left: 8px;
  bottom: 6px;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--ton);
}

.ms-zahlen {
  display: grid;
  gap: 0;
}
.ms-menge {
  font-size: 1.55rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.ms-menge small {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--tinte-leise);
  margin-left: 2px;
}
.ms-zeile {
  font-size: 0.78rem;
  color: var(--tinte-leise);
  white-space: nowrap;
}

/* Ein echter Knopf: Stopp hält die Messung an, Start beginnt neu. */
.ms-knopf {
  position: relative;
  display: block;
  width: 100%;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 99px;
  overflow: hidden;
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  -webkit-tap-highlight-color: transparent;
}
.ms-knopf:disabled {
  cursor: default;
}
.ms-knopf:focus-visible {
  outline: 3px solid var(--ton);
  outline-offset: 2px;
}
.ms-knopf span {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: inherit;
}
.ms-start {
  background: var(--wald);
  color: var(--auf-dunkel);
  opacity: 0;
}
.ms-stopp {
  background: var(--ms-stopp);
  color: var(--auf-dunkel);
}
@media (prefers-color-scheme: dark) {
  .ms-start,
  .ms-stopp {
    color: #12201b;
  }
}

/* Das Ergebnis schiebt sich über die Kachel, der Knopf bleibt frei.
     Ohne Bewegung steht es da. */
.ms-ergebnis-rahmen {
  position: absolute;
  inset: 0 0 54px;
  overflow: hidden;
  border-radius: 20px 20px 0 0;
}
.ms-ergebnis {
  position: absolute;
  inset: 0;
  padding: 14px 14px 4px;
  display: grid;
  align-content: start;
  gap: 3px;
  background: var(--flaeche);
}
.ms-gemessen {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--tinte);
  white-space: nowrap;
}
.ms-gemessen svg {
  color: var(--wald);
}
.ms-gemessen svg {
  flex: none;
}
.ms-gross {
  margin-top: 4px;
  font-size: 1.85rem;
  font-weight: 800;
  line-height: 1.1;
  color: var(--ton);
}
.ms-gross small {
  font-size: 0.85rem;
  font-weight: 700;
  margin-left: 2px;
}
.ms-balken-zeile {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 34px;
  margin-top: 6px;
}
.ms-balken {
  flex: 1;
  border-radius: 4px 4px 2px 2px;
  background: var(--ton-hell);
  transform-origin: 50% 100%;
}
.ms-balken.neu {
  background: var(--ton);
}
.ms-unter {
  font-size: 0.75rem;
  color: var(--tinte-leise);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Die Schleife, eine Runde (--ms-runde): bis 50 % läuft die Messung, bei
   50 % Stopp, bis 56 % schiebt sich das Ergebnis darüber, bis 90 % steht
   es, bis 96 % gleitet es weg. Darunter läuft schon die nächste Messung --
   die Runde schließt ohne Sprung an. */
.ms-szene.spielt * {
  animation-duration: var(--ms-runde);
  animation-iteration-count: infinite;
  animation-delay: 0s;
  animation-timing-function: linear;
  animation-fill-mode: both;
}
.ms-szene.spielt .ms-ergebnis {
  animation-name: ms-ergebnis;
}
.ms-szene.spielt .ms-balken {
  animation-name: ms-balken;
}
.ms-szene.spielt .ms-balken:nth-child(2) {
  animation-name: ms-balken-2;
}
.ms-szene.spielt .ms-balken:nth-child(3) {
  animation-name: ms-balken-3;
}
.ms-szene.spielt .ms-balken:nth-child(4) {
  animation-name: ms-balken-4;
}
.ms-szene.spielt .ms-balken:nth-child(5) {
  animation-name: ms-balken-5;
}
.ms-szene.spielt .ms-balken:nth-child(6) {
  animation-name: ms-balken-6;
}
.ms-szene.spielt .ms-start {
  animation-name: ms-start;
}
.ms-szene.spielt .ms-stopp {
  animation-name: ms-stopp;
}
.ms-szene.spielt .ms-knopf {
  animation-name: ms-druck;
}
.ms-szene.spielt .ms-laeuft,
.ms-szene.spielt .ms-tropfen,
.ms-szene.spielt .ms-kurve {
  animation-name: ms-sichtbar;
}
.ms-szene.spielt .ms-punkt {
  animation: ms-puls 1.2s ease-in-out infinite;
}
.ms-szene.spielt .ms-tropf {
  animation: ms-tropf 0.8s linear infinite;
}
.ms-szene.spielt .ms-tropf:nth-child(2) {
  animation-delay: -0.5s;
}
.ms-szene.spielt .ms-tropf:nth-child(3) {
  animation-delay: -0.2s;
}
.ms-szene.spielt .ms-tropf:nth-child(4) {
  animation-delay: -0.65s;
}
.ms-szene.spielt .ms-tropf:nth-child(5) {
  animation-delay: -0.35s;
}
.ms-szene.spielt .ms-kurve-band {
  animation: ms-band 3s linear infinite;
}
.ms-szene.spielt.pausiert .ms-punkt,
.ms-szene.spielt.pausiert .ms-tropf,
.ms-szene.spielt.pausiert .ms-kurve-band {
  animation-play-state: paused;
}

@keyframes ms-ergebnis {
  0%,
  51% {
    transform: translateY(104%);
    animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  56%,
  90% {
    transform: translateY(0);
    animation-timing-function: cubic-bezier(0.5, 0, 0.75, 0);
  }
  96%,
  100% {
    transform: translateY(104%);
  }
}
@keyframes ms-balken {
  0%,
  53% {
    transform: scaleY(0);
    animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  57%,
  100% {
    transform: scaleY(1);
  }
}
@keyframes ms-balken-2 {
  0%,
  53.6% {
    transform: scaleY(0);
    animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  57.6%,
  100% {
    transform: scaleY(1);
  }
}
@keyframes ms-balken-3 {
  0%,
  54.2% {
    transform: scaleY(0);
    animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  58.2%,
  100% {
    transform: scaleY(1);
  }
}
@keyframes ms-balken-4 {
  0%,
  54.8% {
    transform: scaleY(0);
    animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  58.8%,
  100% {
    transform: scaleY(1);
  }
}
@keyframes ms-balken-5 {
  0%,
  55.4% {
    transform: scaleY(0);
    animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  59.4%,
  100% {
    transform: scaleY(1);
  }
}
@keyframes ms-balken-6 {
  0%,
  56% {
    transform: scaleY(0);
    animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  60%,
  100% {
    transform: scaleY(1);
  }
}
/* Die Messung läuft schon, wenn sie ins Bild kommt (Echtzeit statt
     Zeitraffer, Inhaber 25.10.2026: „unrealistisch, wenn … im Sekundentakt
     die Literzahl hochgeht“). Nach dem Ergebnis gleitet es weg, darunter
     läuft die nächste. */
@keyframes ms-start {
  0%,
  49.5% {
    opacity: 0;
  }
  51%,
  92.5% {
    opacity: 1;
  }
  94%,
  100% {
    opacity: 0;
  }
}
@keyframes ms-stopp {
  0%,
  49.5% {
    opacity: 1;
  }
  51%,
  92.5% {
    opacity: 0;
  }
  94%,
  100% {
    opacity: 1;
  }
}
@keyframes ms-druck {
  0%,
  48.5% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.93);
  }
  52%,
  100% {
    transform: scale(1);
  }
}
@keyframes ms-sichtbar {
  0%,
  49% {
    opacity: 1;
  }
  51%,
  92% {
    opacity: 0;
  }
  95%,
  100% {
    opacity: 1;
  }
}
@keyframes ms-puls {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.35;
  }
}
@keyframes ms-tropf {
  0% {
    transform: translateY(0);
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  85% {
    opacity: 1;
  }
  100% {
    transform: translateY(34px);
    opacity: 0;
  }
}
@keyframes ms-band {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* Ohne Bewegung: Ergebnis steht, Tropfen und Kurve sind still. */
.ms-szene:not(.spielt) .ms-laeuft,
.ms-szene:not(.spielt) .ms-tropfen {
  opacity: 0;
}

.rechner {
  display: grid;
  gap: 12px;
  max-width: 30rem;
  padding: 26px;
  border-radius: var(--rund);
  background: var(--flaeche);
  box-shadow:
    inset 0 0 0 1px var(--haarlinie),
    0 24px 48px -30px rgba(15, 32, 26, 0.35);
}

.rechner label {
  font-size: 0.95rem;
  color: var(--tinte-leise);
}

.rechner output {
  font-size: 1.5rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.rechner input[type="range"] {
  width: 100%;
  accent-color: var(--wald);
}

.ergebnis {
  display: grid;
  gap: 2px;
  margin-top: 8px;
  padding: 18px 20px;
  border-radius: 16px;
  background: var(--wald-hell);
  color: var(--wald-tief);
  transition: background-color 300ms ease;
}

.ergebnis strong {
  font-size: clamp(2.2rem, 5vw, 3rem);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}

.ergebnis[data-richtung="nach"] {
  background: #fbe9cc;
  color: #7a4b05;
}

@media (prefers-color-scheme: dark) {
  .ergebnis {
    color: var(--wald);
  }
  .ergebnis[data-richtung="nach"] {
    background: #3a2c12;
    color: var(--gold);
  }
}

.rechenweg {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px 16px;
  margin: 6px 0 0;
  font-size: 0.92rem;
}

.rechenweg dt {
  color: var(--tinte-leise);
}

.rechenweg dd {
  margin: 0;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Kreise: Blasen, die sich bewegen */
.kreise {
  display: grid;
  gap: 40px;
  background: var(--wald-tief);
  color: var(--auf-dunkel);
}

.kreise .fuehrung {
  color: rgba(252, 250, 246, 0.72);
}

.blasen {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  align-items: center;
  gap: 40px;
  width: 100%;
}

.blasen-feld {
  position: relative;
  height: clamp(340px, 46vw, 480px);
}

.du {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  width: 64px;
  height: 64px;
  margin: -32px 0 0 -32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--auf-dunkel);
  color: var(--wald-tief);
  font-weight: 600;
  box-shadow: 0 0 0 8px rgba(252, 250, 246, 0.1);
}

.blase {
  position: absolute;
  display: grid;
  place-items: center;
  padding: 12px;
  text-align: center;
  font-weight: 600;
  font-size: 0.95rem;
  color: #13261f;
  cursor: pointer;
  border-radius: 50%;
  mix-blend-mode: normal;
  opacity: 0.9;
  /* Flache Farbflächen ohne Glanzlicht und ohne Wabern (Entwurf 83). */
  animation: schweben 14s ease-in-out infinite alternate;
  transition:
    transform 300ms ease,
    box-shadow 300ms ease,
    opacity 300ms ease;
}

.blase-familie {
  width: 46%;
  aspect-ratio: 1;
  left: 8%;
  top: 6%;
  background: #b9dcc8;
}

.blase-wg {
  width: 30%;
  aspect-ratio: 1;
  right: 10%;
  top: 2%;
  background: #f5cf8a;
  animation-duration: 17s;
  animation-delay: -4s;
}

.blase-fahrt {
  width: 34%;
  aspect-ratio: 1;
  right: 4%;
  bottom: 6%;
  background: #b6d3e6;
  animation-duration: 16s;
  animation-delay: -8s;
}

.blase-freunde {
  width: 30%;
  aspect-ratio: 1;
  left: 4%;
  bottom: 2%;
  background: #efbcb5;
  animation-duration: 19s;
  animation-delay: -2s;
}

.blase-verein {
  width: 22%;
  aspect-ratio: 1;
  left: 40%;
  bottom: -2%;
  background: #d4c6ee;
  animation-duration: 15s;
  animation-delay: -10s;
}

#kreis-familie:checked ~ .blasen-feld .blase-familie,
#kreis-wg:checked ~ .blasen-feld .blase-wg,
#kreis-fahrt:checked ~ .blasen-feld .blase-fahrt,
#kreis-freunde:checked ~ .blasen-feld .blase-freunde,
#kreis-verein:checked ~ .blasen-feld .blase-verein {
  opacity: 1;
  z-index: 1;
  box-shadow:
    0 0 0 4px var(--auf-dunkel),
    0 20px 50px rgba(0, 0, 0, 0.35);
}

#kreis-familie:focus-visible ~ .blasen-feld .blase-familie,
#kreis-wg:focus-visible ~ .blasen-feld .blase-wg,
#kreis-fahrt:focus-visible ~ .blasen-feld .blase-fahrt,
#kreis-freunde:focus-visible ~ .blasen-feld .blase-freunde,
#kreis-verein:focus-visible ~ .blasen-feld .blase-verein {
  outline: 3px solid var(--gold);
  outline-offset: 4px;
}

@keyframes schweben {
  0% {
    translate: 0 0;
  }
  33% {
    translate: 14px -12px;
  }
  66% {
    translate: -10px 10px;
  }
  100% {
    translate: 8px 16px;
  }
}

.blasen-text {
  display: grid;
}

.blasen-text p {
  grid-area: 1 / 1;
  font-size: 1.2rem;
  line-height: 1.5;
  color: rgba(252, 250, 246, 0.82);
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 300ms ease,
    transform 300ms ease;
}

.blasen-text b {
  color: var(--auf-dunkel);
}

#kreis-familie:checked ~ .blasen-text .text-familie,
#kreis-wg:checked ~ .blasen-text .text-wg,
#kreis-fahrt:checked ~ .blasen-text .text-fahrt,
#kreis-freunde:checked ~ .blasen-text .text-freunde,
#kreis-verein:checked ~ .blasen-text .text-verein {
  opacity: 1;
  transform: none;
}

@media (max-width: 760px) {
  .blasen {
    grid-template-columns: minmax(0, 1fr);
  }
  .blase {
    font-size: 0.82rem;
  }
}

/* Spaß */
.spass {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(40px, 7vw, 110px);
}

.spass > * {
  margin: 0;
}

.spass-text {
  display: grid;
  gap: 22px;
}

.probe {
  display: grid;
  gap: 14px;
  max-width: 26rem;
  padding: 18px;
  border-radius: var(--rund);
  background: var(--flaeche);
  box-shadow:
    inset 0 0 0 1px var(--haarlinie),
    0 24px 48px -30px rgba(15, 32, 26, 0.35);
}

.probe-haken {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 6px;
  border: 0;
  border-radius: 14px;
  background: none;
  color: inherit;
  font: inherit;
  font-size: 1.1rem;
  text-align: left;
  cursor: pointer;
}

.haken {
  position: relative;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px var(--tinte-leise);
  transition:
    background-color 200ms ease,
    box-shadow 200ms ease;
}

.haken::after {
  content: "";
  position: absolute;
  left: 10px;
  top: 6px;
  width: 8px;
  height: 14px;
  border: solid var(--auf-dunkel);
  border-width: 0 3px 3px 0;
  transform: rotate(45deg) scale(0);
  transition: transform 220ms cubic-bezier(0.3, 1.6, 0.5, 1);
}

.probe-wer {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #8a5a12;
  color: #fff;
  font-size: 0;
}

.probe-wer::first-letter {
  font-size: 0.9rem;
}

.probe-haken[aria-pressed="true"] .haken {
  background: var(--wald);
  box-shadow: none;
  animation: plopp 360ms ease;
}

.probe-haken[aria-pressed="true"] .haken::after {
  transform: rotate(45deg) scale(1);
}

.probe-haken[aria-pressed="true"] .probe-titel {
  color: var(--tinte-leise);
  text-decoration: line-through;
}

@keyframes plopp {
  0% {
    transform: scale(1);
  }
  40% {
    transform: scale(1.28);
  }
  100% {
    transform: scale(1);
  }
}

.probe-reaktionen {
  display: flex;
  gap: 8px;
  padding-left: 50px;
}

.probe-reaktionen button {
  position: relative;
  display: inline-flex;
  gap: 6px;
  align-items: center;
  min-height: 36px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: var(--sand-tief);
  color: var(--tinte);
  font: inherit;
  font-size: 0.95rem;
  cursor: pointer;
  font-variant-numeric: tabular-nums;
  transition: transform 160ms ease;
}

.probe-reaktionen button[aria-pressed="true"] {
  background: var(--wald-hell);
  box-shadow: inset 0 0 0 1.5px var(--wald);
}

.probe-reaktionen button.huepft {
  animation: plopp 320ms ease;
}

.funke {
  position: absolute;
  left: 50%;
  top: 0;
  pointer-events: none;
  font-size: 1.1rem;
  animation: aufsteigen 900ms ease-out forwards;
}

@keyframes aufsteigen {
  0% {
    transform: translate(-50%, 0) scale(0.6);
    opacity: 1;
  }
  100% {
    transform: translate(calc(-50% + var(--dx, 0px)), -70px) scale(1.2);
    opacity: 0;
  }
}

.probe-stand {
  padding-left: 50px;
  font-size: 0.92rem;
  color: var(--tinte-leise);
}

.probe-stand b {
  display: inline-block;
  color: var(--tinte);
  font-variant-numeric: tabular-nums;
}

.probe-stand b.zaehlt {
  animation: plopp 320ms ease;
}

/* Telefon mit Video, die Unterschrift steht darunter, nicht im Rahmen. */
.spass-video {
  display: grid;
  justify-items: center;
  gap: 16px;
  margin: 0;
}

.spass-video figcaption {
  max-width: 300px;
  text-align: center;
  font-size: 0.9rem;
  color: var(--tinte-leise);
}

@media (max-width: 860px) {
  .spass {
    grid-template-columns: minmax(0, 1fr);
  }
}

.bausteine {
  display: grid;
  /* Ohne feste Spalte dehnt ein Raster darunter die Seite (375 px). */
  grid-template-columns: minmax(0, 1fr);
  gap: 40px;
  background: var(--sand-tief);
  --ae-schatten: rgba(23, 32, 29, 0.24);
  --ae-mark: #fcfaf6;
}

/* Die Bühne bleibt mittig unter der Kopfleiste stehen (Inhaber 19.10.2026),
   gerechnet mit der großen Fensterhöhe: Beim Runterscrollen ist Safaris
   Leiste eingeklappt. Gilt erst, wenn das Skript die Höhen gesetzt hat. */
.js .ae-buehne[style*="--ae-h"] {
  top: max(
    calc(var(--kopf-h) + 10px),
    calc(var(--kopf-h) + (100lvh - var(--kopf-h) - var(--ae-h)) / 2)
  );
}

/* Das fertige Zeichen, das in die Kopfleiste fliegt (`fliegen` in
   marketing.js). Ohne Skript steht es nirgends; das Skript hängt es an
   `body` und setzt Größe und Lage. Nur `transform` bewegt es. */
.ae-flug {
  display: none;
}

body > .ae-flug {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 11;
  pointer-events: none;
  transform-origin: 0 0;
  visibility: hidden;
  will-change: transform;
}

body > .ae-flug.da {
  visibility: visible;
}

.ae-flug svg {
  display: block;
  width: 100%;
  height: 100%;
}

.ae-flug-ring path {
  fill: none;
  stroke: #fcfaf6;
  stroke-width: 56;
  stroke-linecap: round;
}

.ae-flug-ring .ae-flug-gold {
  stroke: var(--gold);
}

.ae-flug-s {
  fill: #fcfaf6;
}

/* Der Schriftzug der Bühne verblasst, während das Zeichen fliegt
   (`--flug` 0–1 aus marketing.js; `fill-opacity`, weil die Bühne selbst
   `opacity` animiert). */
.ae-wort text {
  fill-opacity: calc(1 - var(--flug, 0));
}

/* Liste links, die Bühne klebt rechts und spielt beim Scrollen ab. */
.bausteine-feld {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  align-items: start;
  gap: clamp(32px, 6vw, 80px);
  width: 100%;
}

.ae-buehne {
  position: sticky;
  /* Ohne Skript ein fester Abstand; mit Skript mittig unter der Kopfleiste
     (`.js .ae-buehne` unten, Höhen aus `marketing.js`). */
  top: clamp(80px, 12vh, 120px);
  order: 2;
  display: grid;
  justify-items: center;
  gap: 14px;
}

/* Das Zeichen als Stapel von Ebenen (`alles-in-einem.ts`): Jede liegt in
   Prozent der Bühne; Bewegt wird nur `transform` und `opacity` -- das
   erledigt die Grafik ohne Neuzeichnen, auch beim schnellen Scrollen. */
.ae {
  position: relative;
  display: block;
  width: 100%;
  max-width: 500px;
  aspect-ratio: 1624 / 1840;
  font-family: inherit;
}

.ae > *,
.ae-ganz > *,
.ae-koerper > *,
.ae-kachel {
  position: absolute;
}

.ae-verlaeufe {
  position: absolute;
  width: 0;
  height: 0;
}

.ae-ganz,
.ae-koerper {
  inset: 0;
}

.ae-kachel {
  inset: 0;
  width: 100%;
  height: auto;
  overflow: visible;
}

.ae-teil,
.ae-s,
.ae-wort {
  overflow: visible;
}

.ae-boden {
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--ae-schatten), transparent);
}

.ae-tiefe {
  background: linear-gradient(#386f57, #2a5342 70%, #12291f);
}

.ae-rand {
  border-radius: 999px;
  background: #5fa383;
}

/* Die Farben des Kartons: ein Verlauf über 1024 Einheiten, auf Deckel
   (0–400) und Vorderwand (400–1024) aufgeteilt. */
.ae-deckel {
  background: linear-gradient(#3f7d61, #326550);
  transform-origin: 50% 0;
}

.ae-deckel-innen {
  inset: 0;
  border-radius: inherit;
  background: #0f2219;
}

.ae-vorne {
  background: linear-gradient(#326550, #1f4034);
}

.ae-zu {
  background: linear-gradient(#3f7d61, #1f4034);
}

/* Bewegte Ebenen bekommen ihre eigene Grafikschicht. */
.ae.spielt .ae-kachel,
.ae.spielt .ae-teil,
.ae.spielt .ae-deckel,
.ae.spielt .ae-koerper,
.ae.spielt .ae-ganz,
.ae.spielt .ae-s {
  will-change: transform, opacity;
}

.ae-leiste {
  display: none;
  width: min(240px, 60%);
  height: 4px;
  border-radius: 999px;
  background: var(--haarlinie);
  overflow: hidden;
}

.ae-leiste i {
  display: block;
  height: 100%;
  width: 100%;
  transform-origin: left center;
  transform: scaleX(var(--p, 1));
  background: var(--wald);
}

.js .ae-leiste {
  display: block;
}

/* Ruhezustand: das fertige Zeichen. Bewegt wird nur mit .spielt. */
.ae-kachel,
.ae-innen,
.ae-deckel-innen {
  opacity: 0;
}

.ae-linie {
  fill: none;
  stroke: #fff;
  stroke-width: 3.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ae-teil {
  fill: none;
  stroke: var(--ae-mark);
  stroke-width: 56;
  stroke-linecap: round;
}

.ae-teil.ae-gold {
  stroke: var(--gold);
}

.ae-s {
  fill: var(--ae-mark);
}

.ae-wort {
  fill: var(--tinte);
}

.ae.spielt .ae-deckel {
  animation: ae-deckel 3.8s both;
}
.ae.spielt .ae-deckel-innen {
  animation: ae-deckel-innen 3.8s both;
}
.ae.spielt .ae-innen {
  animation: ae-innen 3.8s both;
}
.ae.spielt .ae-zu {
  animation: ae-zu 3.8s both;
}
.ae.spielt .ae-koerper {
  animation: ae-koerper 3.8s both;
}
.ae.spielt .ae-kachel {
  /* Schwerkraft: langsam los, dann immer schneller (0,6 s = `fallDauer`). */
  animation: ae-regen 0.6s cubic-bezier(0.45, 0, 0.9, 0.55) var(--d) both;
}
.ae.spielt .ae-teil {
  animation: ae-einrasten 0.5s cubic-bezier(0.2, 1.35, 0.4, 1) var(--d) both;
}
.ae.spielt .ae-s {
  animation: ae-s 3.8s both;
}
.ae.spielt .ae-ganz {
  animation: ae-springen 3.8s both;
}
.ae.spielt .ae-boden {
  animation: ae-boden 3.8s both;
}
.ae.spielt .ae-wort {
  animation: ae-wort 3.8s both;
}

/* Der Karton springt auf, der Deckel klappt nach hinten. */
@keyframes ae-koerper {
  0% {
    transform: scale(0.6);
    opacity: 0;
  }
  6% {
    transform: scale(1.04);
    opacity: 1;
  }
  9%,
  52% {
    transform: scale(1);
    opacity: 1;
  }
  55% {
    transform: scale(1.03, 0.96);
  }
  59%,
  100% {
    transform: none;
    opacity: 1;
  }
}

@keyframes ae-deckel {
  0% {
    transform: scaleY(1);
    opacity: 0;
  }
  6%,
  8% {
    transform: scaleY(1);
    opacity: 1;
  }
  13% {
    transform: scaleY(0);
  }
  17% {
    transform: scaleY(-0.78);
  }
  19%,
  50% {
    transform: scaleY(-0.7);
  }
  54% {
    transform: scaleY(0);
  }
  57% {
    transform: scaleY(1.05);
  }
  59%,
  100% {
    transform: scaleY(1);
    opacity: 1;
  }
}

/* Die Unterseite des Deckels ist etwas dunkler -- derselbe Ton wie innen,
   damit der offene Karton aus einem Guss ist. */
@keyframes ae-deckel-innen {
  0%,
  12.9% {
    opacity: 0;
  }
  13%,
  53.9% {
    opacity: 0.22;
  }
  54%,
  100% {
    opacity: 0;
  }
}

/* Innen ist schon da, sobald der Karton steht (hinter Deckel und Wand
   verborgen) und bleibt, bis das ganze Zeichen die Naht deckt -- sonst
   scheint beim Auf- und Zuklappen ein heller Streifen der Seite durch
   (Inhaber 19.10.2026). */
@keyframes ae-innen {
  0%,
  5% {
    opacity: 0;
  }
  6%,
  58.9% {
    opacity: 1;
  }
  59%,
  100% {
    opacity: 0;
  }
}

/* Geschlossen deckt ein ganzes Zeichen die Naht zwischen Deckel und Karton. */
@keyframes ae-zu {
  0%,
  58% {
    opacity: 0;
  }
  59%,
  100% {
    opacity: 1;
  }
}

/* Regen: Jeder Baustein fällt von oben in die Öffnung und verschwindet
   hinter der Vorderwand; dabei dreht er sich zurück und driftet ein wenig. */
@keyframes ae-regen {
  0% {
    opacity: 0;
    transform: translate(var(--x0), var(--y0)) rotate(var(--r0));
  }
  10% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translate(var(--x1), var(--y1)) rotate(var(--r1));
  }
}

/* Die sieben Tage fliegen von außen herein und rasten ein. */
@keyframes ae-einrasten {
  0% {
    transform: translate(var(--dx), var(--dy)) rotate(var(--r)) scale(0.4);
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  100% {
    transform: none;
    opacity: 1;
  }
}

@keyframes ae-s {
  0%,
  72% {
    transform: scale(0) rotate(-30deg);
    opacity: 0;
  }
  78% {
    transform: scale(1.16) rotate(4deg);
    opacity: 1;
  }
  81%,
  100% {
    transform: none;
    opacity: 1;
  }
}

/* Am Ende ein kurzer Sprung mit Federn. */
@keyframes ae-springen {
  0%,
  81% {
    transform: none;
  }
  86% {
    transform: translateY(-4.35%);
  }
  90% {
    transform: translateY(0) scale(1.06, 0.92);
  }
  93% {
    transform: translateY(-0.65%) scale(0.98, 1.03);
  }
  96%,
  100% {
    transform: none;
  }
}

@keyframes ae-boden {
  0%,
  84% {
    transform: scale(0.4);
    opacity: 0;
  }
  90% {
    transform: scale(1.15);
    opacity: 1;
  }
  96%,
  100% {
    transform: scale(1);
    opacity: 0.9;
  }
}

@keyframes ae-wort {
  0%,
  89% {
    opacity: 0;
    transform: translateY(14%);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ae.spielt * {
    animation: none !important;
  }
}

@media (prefers-color-scheme: dark) {
  .bausteine {
    --ae-schatten: rgba(0, 0, 0, 0.55);
  }
}

.ring-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2px;
}

.ring-liste li {
  position: relative;
  padding: 9px 14px 9px 40px;
  border-radius: 14px;
  color: var(--tinte-leise);
  font-size: 0.95rem;
  line-height: 1.35;
  transition:
    background-color 200ms ease,
    box-shadow 200ms ease;
}

/* Ein Punkt je Baustein; ist er im Zeichen gelandet, wird er golden. */
.ring-liste li::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 15px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--gold);
  transition:
    background-color 250ms ease,
    transform 250ms cubic-bezier(0.2, 1.5, 0.4, 1);
}

.js .ring-liste li::before {
  background: var(--haarlinie);
  transform: scale(0.8);
}

.js .ring-liste li.drin::before {
  background: var(--gold);
  transform: scale(1);
}

.ring-liste li:hover {
  background: var(--flaeche);
  box-shadow: inset 0 0 0 1.5px var(--gold);
}

.ring-liste b {
  display: block;
  color: var(--tinte);
}

.ring-liste b a {
  color: inherit;
  text-decoration-color: var(--haarlinie);
  text-underline-offset: 3px;
}

.ring-liste b a:hover {
  text-decoration-color: var(--gold);
}

/* Auf dem Handy klein neben der Liste (Inhaber 19.10.2026: „nicht so groß
   sondern neben den Bausteinen“): Die Bühne klebt rechts, während die
   Liste vorbeiläuft, und jeder Eintrag wird golden, sobald sein Baustein
   drin ist. Die Leiste entfällt -- das zeigen die Punkte. */
@media (max-width: 860px) {
  .bausteine-feld {
    grid-template-columns: minmax(0, 1fr) clamp(104px, 31vw, 200px);
    gap: 10px;
  }
  .ae-buehne {
    top: 96px;
  }
  /* Das Bild hat viel Rand für die einfliegenden Ringteile -- auf dem Handy
     ragt er über die Spalte hinaus, damit der Karton selbst die Spalte
     füllt; Tippen geht durch auf die Liste. */
  .ae {
    width: 150%;
    max-width: none;
    margin-inline: -25%;
    pointer-events: none;
  }
  /* Feste Spalte: Sonst wächst sie mit dem Bild, und die 150 % wirken
     doppelt (Chromium: Karton ragte über den Bildschirmrand). */
  .ae-buehne {
    grid-template-columns: minmax(0, 1fr);
  }
  .js .ae-leiste {
    display: none;
  }
  .ring-liste li {
    padding: 8px 6px 8px 34px;
  }
  .ring-liste li::before {
    left: 12px;
  }
}

/* Verschlüsselung */
.tresor {
  display: grid;
  gap: 44px;
  justify-items: center;
  text-align: center;
  background: #0f1d18;
  color: var(--auf-dunkel);
}

.tresor-kopf {
  display: grid;
  gap: 16px;
  justify-items: center;
}

.tresor .fuehrung {
  color: rgba(252, 250, 246, 0.72);
}

.etikett {
  font-weight: 600;
  color: var(--gold);
}

.weg {
  margin: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 56px minmax(0, 1fr) 56px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  width: 100%;
  max-width: 62rem;
}

.station {
  display: grid;
  gap: 8px;
  justify-items: center;
  min-width: 0;
}

.station-name {
  font-size: 0.82rem;
  color: rgba(252, 250, 246, 0.66);
}

.station-tat {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--gold);
}

.zettel {
  width: 100%;
  min-height: 74px;
  display: grid;
  align-content: center;
  gap: 2px;
  padding: 12px 14px;
  border-radius: 12px;
  background: #fcfaf6;
  color: #17201d;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
}

.zettel b {
  font-weight: 600;
}

.zettel span {
  font-size: 0.85rem;
  color: #5a6661;
}

.zettel-salat {
  background: rgba(252, 250, 246, 0.08);
  border: 1px dashed rgba(252, 250, 246, 0.35);
  color: var(--auf-dunkel);
  justify-items: center;
  box-shadow: none;
}

.schloss {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: var(--gold);
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.salat {
  display: grid;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.78rem;
}

.salat span {
  grid-area: 1 / 1;
  color: rgba(252, 250, 246, 0.8);
  opacity: 0;
  animation: salat 3.6s steps(1, end) infinite;
}

.salat span:nth-child(1) {
  opacity: 1;
}
.salat span:nth-child(2) {
  animation-delay: 1.2s;
}
.salat span:nth-child(3) {
  animation-delay: 2.4s;
}

@keyframes salat {
  0% {
    opacity: 1;
  }
  33.33% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

.leitung {
  position: relative;
  height: 2px;
  background: repeating-linear-gradient(
    90deg,
    rgba(252, 250, 246, 0.35) 0 6px,
    transparent 6px 11px
  );
}

.leitung i {
  position: absolute;
  top: -4px;
  left: 0;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: var(--gold);
  opacity: 0;
  animation: paket 2.4s ease-in-out infinite;
}

.leitung i:nth-child(2) {
  animation-delay: 0.8s;
}
.leitung i:nth-child(3) {
  animation-delay: 1.6s;
}

@keyframes paket {
  0% {
    transform: translateX(0);
    opacity: 0;
  }
  15%,
  85% {
    opacity: 1;
  }
  100% {
    transform: translateX(46px);
    opacity: 0;
  }
}

@media (max-width: 720px) {
  .weg {
    grid-template-columns: minmax(0, 1fr);
    max-width: 22rem;
  }
  .leitung {
    width: 2px;
    height: 40px;
    justify-self: center;
    background: repeating-linear-gradient(
      180deg,
      rgba(252, 250, 246, 0.35) 0 6px,
      transparent 6px 11px
    );
  }
  .leitung i {
    left: -4px;
    top: 0;
    animation-name: paket-senkrecht;
  }
}

@keyframes paket-senkrecht {
  0% {
    transform: translateY(0);
    opacity: 0;
  }
  15%,
  85% {
    opacity: 1;
  }
  100% {
    transform: translateY(30px);
    opacity: 0;
  }
}

.tresor-punkte {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.tresor-punkte li {
  padding: 10px 18px;
  border-radius: 999px;
  background: rgba(252, 250, 246, 0.07);
  box-shadow: inset 0 0 0 1px rgba(252, 250, 246, 0.16);
  font-size: 0.95rem;
  color: rgba(252, 250, 246, 0.8);
}

.tresor-punkte b {
  color: var(--auf-dunkel);
}

.tresor-fuss {
  display: grid;
  gap: 18px;
  justify-items: center;
  max-width: 36rem;
}

.tresor-fuss p {
  font-size: 0.95rem;
  color: rgba(252, 250, 246, 0.66);
}

.technik {
  width: min(42rem, calc(100vw - 32px));
  max-height: min(84vh, 52rem);
  overflow-y: auto;
  padding: clamp(20px, 4vw, 32px);
  border: 0;
  border-radius: var(--rund);
  background: var(--sand);
  color: var(--tinte);
  text-align: left;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.35);
}

.technik::backdrop {
  background: rgba(10, 18, 15, 0.55);
  backdrop-filter: blur(4px);
}

.technik-kopf {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.technik-zu {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: var(--sand-tief);
  color: var(--tinte);
  font-size: 1rem;
  cursor: pointer;
}

.technik > p {
  color: var(--tinte-leise);
}

.technik dl {
  display: grid;
  grid-template-columns: minmax(0, 10rem) minmax(0, 1fr);
  gap: 12px 20px;
  margin: 20px 0 0;
}

.technik dt {
  font-weight: 600;
}

.technik dd {
  margin: 0;
  color: var(--tinte-leise);
}

@media (max-width: 560px) {
  .technik dl {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }
  .technik dd {
    margin-bottom: 12px;
  }
}

/* Preis */
.preis {
  display: grid;
  gap: 28px;
  justify-items: center;
  text-align: center;
}

.tafeln {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: 16px;
  width: 100%;
  max-width: 44rem;
}

.tafel {
  display: grid;
  gap: 8px;
  padding: 26px;
  border-radius: var(--rund);
  background: var(--flaeche);
  box-shadow: inset 0 0 0 1px var(--haarlinie);
}

.tafel-zeit {
  font-weight: 600;
  color: var(--tinte-leise);
}

.tafel-preis {
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.15;
}

.tafel-preis span {
  display: block;
  font-size: 0.95rem;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--tinte-leise);
}

.tafel-abo {
  box-shadow: inset 0 0 0 2px var(--gold);
}

/* Fragen */
.fragen {
  display: grid;
  gap: 8px;
  max-width: 46rem;
  margin-inline: auto;
}

.fragen > * {
  max-width: 46rem;
  width: 100%;
}

.fragen h2 {
  margin-bottom: 20px;
}

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

.fragen summary {
  padding: 18px 0;
  font-size: 1.12rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 16px;
}

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

.fragen summary::after {
  content: "+";
  color: var(--wald);
  font-size: 1.4rem;
  line-height: 1;
  transition: transform 200ms ease;
}

.fragen details[open] summary::after {
  transform: rotate(45deg);
}

.fragen details p {
  padding: 0 0 20px;
  color: var(--tinte-leise);
  max-width: 40rem;
}

/* Themenseiten (familienplaner, zaehlerstaende, …), aus seiten.mjs */
.thema-kopf {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  align-items: center;
  gap: clamp(40px, 6vw, 80px);
}

.thema-kopf > * {
  margin-inline: 0;
}

/* Brotkrumen über dem Etikett: wo man ist, ein Schritt zurück zur Startseite. */
.krumen {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 0.88rem;
  color: var(--tinte-leise);
}

.krumen a {
  color: inherit;
}

.krumen a::after {
  content: "›";
  margin-left: 6px;
}

.thema-kopf h1 {
  font-size: clamp(2.3rem, 5.4vw, 3.8rem);
}

.thema-kopf .etikett {
  color: var(--gold-tief);
}

.thema-text {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(36px, 5vw, 56px);
  background: var(--sand-tief);
}

.thema-text > article {
  display: grid;
  gap: 14px;
  width: 100%;
  max-width: 46rem;
}

.thema-text h2,
.thema-weiter h2 {
  font-size: clamp(1.6rem, 3.2vw, 2.2rem);
}

.thema-text p {
  color: var(--tinte-leise);
  text-wrap: pretty;
}

.punkte {
  display: grid;
  gap: 10px;
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
}

.punkte li {
  position: relative;
  padding-left: 28px;
}

.punkte li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 0.62em;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--gold);
}

/* minmax(0, 1fr): Sonst misst sich das auto-fill-Raster der Liste an seinem
   breitesten Inhalt und schiebt die Seite seitlich hinaus. */
.thema-weiter {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
}

.thema-weiter > * {
  width: 100%;
}

.thema-weiter ul {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.thema-weiter a {
  display: grid;
  gap: 4px;
  height: 100%;
  padding: 20px 22px;
  border-radius: var(--rund);
  background: var(--flaeche);
  box-shadow: inset 0 0 0 1px var(--haarlinie);
  text-decoration: none;
  transition: box-shadow 200ms ease;
}

.thema-weiter a:hover {
  box-shadow: inset 0 0 0 2px var(--gold);
}

.thema-weiter b {
  font-weight: 600;
}

.thema-weiter span {
  font-size: 0.92rem;
  color: var(--tinte-leise);
}

@media (max-width: 860px) {
  .thema-kopf {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Anreißer für /beispiele im dunklen Abschnitt „Kreise“ der Startseite. */
.kreise-beispiele {
  display: grid;
  gap: 18px;
  width: 100%;
  padding-top: clamp(8px, 2vw, 24px);
}

/* Vier Fälle: vier, zwei oder eine Spalte -- nie drei und einer allein. */
.kreise-beispiele ul {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.kreise-beispiele li a {
  display: grid;
  gap: 4px;
  height: 100%;
  padding: 18px 20px;
  border-radius: var(--rund);
  background: rgba(252, 250, 246, 0.08);
  box-shadow: inset 0 0 0 1px rgba(252, 250, 246, 0.18);
  text-decoration: none;
  transition: box-shadow 200ms ease;
}

.kreise-beispiele li a:hover {
  box-shadow: inset 0 0 0 2px var(--gold);
}

.kreise-beispiele span {
  font-size: 0.92rem;
  color: rgba(252, 250, 246, 0.72);
}

.kreise-beispiele .knopf {
  justify-self: start;
}

@media (max-width: 860px) {
  .kreise-beispiele ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .kreise-beispiele ul {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Beispiele aus dem Alltag (/beispiele): Kreise als Karten, Leas Tag oben.
   Die Kreisfarben sind die der Blasen auf der Startseite. */
.beispiele {
  --kreis-gruen: #8fc7a8;
  --kreis-gold: #f2b54e;
  --kreis-blau: #8dbad4;
  --kreis-rose: #e3958d;
}

.springen {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.springen a {
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--flaeche);
  box-shadow: inset 0 0 0 1px var(--haarlinie);
  font-size: 0.92rem;
  font-weight: 600;
  text-decoration: none;
  transition: box-shadow 200ms ease;
}

.springen a:hover {
  box-shadow: inset 0 0 0 2px var(--gold);
}

.tag-karte {
  display: grid;
  gap: 14px;
  width: 100%;
  max-width: 26rem;
  margin: 0;
  justify-self: center;
  padding: 22px;
  border-radius: 28px;
  background: var(--flaeche);
  box-shadow:
    inset 0 0 0 1px var(--haarlinie),
    0 30px 60px rgba(23, 32, 29, 0.12);
}

.tag-kopf {
  display: grid;
  gap: 2px;
}

.tag-kopf b {
  font-size: 1.3rem;
  letter-spacing: -0.02em;
}

.tag-kopf span,
.tag-karte figcaption {
  font-size: 0.86rem;
  color: var(--tinte-leise);
}

.tag-karte ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tag-karte li {
  display: grid;
  grid-template-columns: 3.4rem minmax(0, 1fr);
  gap: 2px 10px;
  padding: 10px 12px;
  border-radius: 16px;
  background: var(--sand);
}

.tag-karte time {
  grid-row: span 2;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--tinte-leise);
}

.tag-karte li span {
  font-weight: 600;
}

/* Das Kreis-Etikett am Eintrag, wie in der App. */
.tag-karte i {
  justify-self: start;
  padding: 1px 9px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-style: normal;
  font-weight: 600;
  color: #13261f;
}

.tag-karte i.kreis-gruen,
.kreis-gruen figcaption::before {
  background: var(--kreis-gruen);
}

.tag-karte i.kreis-gold,
.kreis-gold figcaption::before {
  background: var(--kreis-gold);
}

.tag-karte i.kreis-blau,
.kreis-blau figcaption::before {
  background: var(--kreis-blau);
}

.tag-karte i.kreis-rose,
.kreis-rose figcaption::before {
  background: var(--kreis-rose);
}

.grundlagen {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
  background: var(--sand-tief);
}

.grundlagen > * {
  width: 100%;
}

.grundlagen h2,
.fall h2 {
  font-size: clamp(1.6rem, 3.2vw, 2.2rem);
}

.grundlagen ul {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr));
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.grundlagen li {
  display: grid;
  align-content: start;
  gap: 6px;
  padding: 20px 22px;
  border-radius: var(--rund);
  background: var(--flaeche);
  box-shadow: inset 0 0 0 1px var(--haarlinie);
}

.grundlagen li p {
  font-size: 0.95rem;
  color: var(--tinte-leise);
}

.faelle {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(64px, 9vw, 112px);
}

.fall {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  gap: clamp(28px, 5vw, 64px);
  width: 100%;
  scroll-margin-top: 24px;
}

.fall-text,
.fall-bild {
  display: grid;
  gap: 16px;
}

.fall-text .etikett {
  color: var(--gold-tief);
}

.fall h3 {
  margin-top: 8px;
  font-size: 1.1rem;
}

.schritte {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: schritt;
}

.schritte li {
  position: relative;
  padding-left: 40px;
  color: var(--tinte-leise);
  text-wrap: pretty;
  counter-increment: schritt;
}

.schritte li::before {
  content: counter(schritt);
  position: absolute;
  left: 0;
  top: 0;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--wald-hell);
  color: var(--wald-tief);
  font-size: 0.85rem;
  font-weight: 600;
}

.fall-tipp {
  padding: 16px 18px;
  border-radius: 18px;
  background: var(--wald-hell);
  color: var(--tinte);
  text-wrap: pretty;
}

.fall-tipp b {
  margin-right: 6px;
  color: var(--wald-tief);
}

.fall-mehr {
  font-size: 0.95rem;
  color: var(--tinte-leise);
}

.kreisbild {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: 12px;
}

.kreis {
  display: grid;
  align-content: start;
  gap: 12px;
  margin: 0;
  padding: 18px;
  border-radius: var(--rund);
  background: var(--flaeche);
  box-shadow: inset 0 0 0 1px var(--haarlinie);
}

.kreis figcaption {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr);
  column-gap: 10px;
  align-items: center;
}

.kreis figcaption::before {
  content: "";
  grid-row: span 2;
  width: 14px;
  height: 14px;
  border-radius: 50%;
}

.kreis figcaption span {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--tinte-leise);
}

.kreis figcaption b {
  font-size: 1.08rem;
  line-height: 1.25;
}

.personen {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.personen li {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}

.kopfbild {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--sand-tief);
  font-weight: 600;
}

.kreis-gruen .kopfbild {
  background: #d9efe2;
  color: #13261f;
}

.kreis-gold .kopfbild {
  background: #fff1d2;
  color: #13261f;
}

.kreis-blau .kopfbild {
  background: #e1eef6;
  color: #13261f;
}

.kreis-rose .kopfbild {
  background: #fbe3df;
  color: #13261f;
}

/* Wer nur Zugeordnetes sieht: gestrichelt, wie halb dabei. */
.eingeschraenkt .kopfbild {
  background: transparent;
  box-shadow: inset 0 0 0 2px var(--tinte-leise);
  outline: 2px dashed var(--flaeche);
  outline-offset: -2px;
}

.person {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 8px;
  line-height: 1.35;
}

.person small {
  font-size: 0.86rem;
  color: var(--tinte-leise);
}

.marke-klein {
  padding: 0 8px;
  border-radius: 999px;
  background: var(--sand-tief);
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--tinte-leise);
}

.hauptkreis {
  padding-top: 10px;
  border-top: 1px solid var(--haarlinie);
  font-size: 0.86rem;
  color: var(--tinte-leise);
}

.hauptkreis::before {
  content: "★";
  margin-right: 6px;
  color: var(--gold);
}

.im-tag {
  display: grid;
  gap: 10px;
  padding: 20px 22px;
  border-radius: var(--rund);
  background: var(--wald-tief);
  color: var(--auf-dunkel);
}

.im-tag h3 {
  margin: 0;
}

.im-tag dl {
  display: grid;
  gap: 12px;
  margin: 0;
}

.im-tag dt {
  font-weight: 600;
}

.im-tag dd {
  margin: 0;
  color: rgba(252, 250, 246, 0.76);
  text-wrap: pretty;
}

@media (prefers-color-scheme: dark) {
  .tag-karte {
    box-shadow:
      inset 0 0 0 1px var(--haarlinie),
      0 30px 60px rgba(0, 0, 0, 0.4);
  }

  .im-tag {
    background: var(--wald-hell);
    color: var(--tinte);
  }

  .im-tag dd {
    color: var(--tinte-leise);
  }
}

@media (max-width: 860px) {
  .fall {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Impressum und Datenschutz: eigene Seiten im selben Kleid */
.recht {
  display: grid;
  gap: clamp(28px, 4vw, 40px);
  max-width: 46rem;
  margin-inline: auto;
  padding: clamp(48px, 8vw, 96px) var(--rinne) clamp(72px, 10vw, 120px);
}

.recht-kopf {
  display: grid;
  gap: 14px;
  padding-bottom: clamp(20px, 3vw, 32px);
  border-bottom: 1px solid var(--haarlinie);
}

.recht-kopf h1 {
  font-size: clamp(2.2rem, 5vw, 3.2rem);
}

.recht-kopf .etikett {
  color: var(--gold-tief);
}

main.recht > section {
  display: grid;
  gap: 12px;
  padding: 0;
}

/* Die Abschnitte der Landingpage zentrieren ihre Kinder; Fließtext nicht. */
main.recht > section > * {
  margin-inline: 0;
}

.recht h2 {
  font-size: 1.35rem;
  letter-spacing: -0.015em;
}

.recht section p {
  color: var(--tinte-leise);
  text-wrap: pretty;
}

.recht strong {
  font-weight: 600;
  color: var(--tinte);
}

.recht .offen {
  padding: 16px 18px;
  border: 1.5px dashed var(--gold);
  border-radius: 14px;
  background: color-mix(in srgb, var(--gold) 8%, transparent);
  color: var(--tinte);
}

.offen span {
  display: block;
  margin-bottom: 4px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--gold-tief);
}

/* Schluss */
.schluss {
  display: grid;
  gap: 24px;
  justify-items: center;
  text-align: center;
  background: var(--wald-tief);
  color: var(--auf-dunkel);
}

.schluss-zeichen {
  width: 84px;
  height: 84px;
  color: var(--auf-dunkel);
}

.schluss .beiwerk {
  color: rgba(252, 250, 246, 0.6);
}

.schluss .knopf-voll {
  background: var(--auf-dunkel);
  color: var(--wald-tief);
}

.fuss {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 28px var(--rinne);
  font-size: 0.92rem;
  color: var(--tinte-leise);
}

.fuss nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
}

/* Die Themen verlinken sich gegenseitig -- für Leser und Suchmaschinen. */
.fuss-themen {
  flex-basis: 100%;
  order: 3;
  padding-top: 16px;
  border-top: 1px solid var(--haarlinie);
}

.fuss a {
  text-decoration: none;
}

.fuss a:hover {
  color: var(--tinte);
}

/* „Bewegung reduzieren“: nichts wandert, wabert oder hüpft. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation: none !important;
    transition-duration: 0.01ms !important;
  }
  .salat span:nth-child(n + 2),
  .leitung i {
    opacity: 0;
  }
  .leitung i:first-child {
    opacity: 1;
    left: 50%;
  }
}

/* ---------- Ein Blick am Morgen (Entwurf 69 A) ------------------------- */
/* Text links, das Telefon rechts; im Telefon echte Ausschnitte des
   Tagesfadens, je Karte eine Ebene (Prinzip „Animationen auf der Webseite“
   in CLAUDE.md). Ohne `.spielt` steht der ganze Tag untereinander da. */
.morgen {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  align-items: center;
  gap: clamp(36px, 6vw, 96px);
  padding-inline: max(var(--rinne), calc((100% - var(--breite)) / 2));
}

.morgen > * {
  max-width: none;
  margin: 0;
}

.morgen-text {
  display: grid;
  gap: 18px;
  justify-items: start;
}

.morgen-liste {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.morgen-liste li {
  position: relative;
  padding-left: 22px;
  color: var(--tinte-leise);
  line-height: 1.45;
}

/* Ein Punkt statt einer Nummer: Die Liste ist ein Ausschnitt, kein
   Inventar der App (Inhaber 19.10.2026). */
.morgen-liste li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.55em;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--gold);
}

.morgen-liste b {
  color: var(--tinte);
}

.morgen-mehr {
  margin: 0;
  color: var(--tinte-leise);
  line-height: 1.45;
}

/* So groß wie die anderen Telefone (`.telefon`, Inhaber 19.10.2026: „warum
   hat das Display … eine kleinere Größe“), aber immer ganz im Bildschirm:
   Höhe = Breite · 2,05 − 19, dazu Kopfleiste 60 und je 10 Luft. */
.morgen-buehne {
  --tel-b: min(300px, 78vw, calc((100svh - 64px) / 2.06));
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  justify-self: center;
  width: var(--tel-b);
}

.morgen-telefon {
  width: 100%;
  padding: 9px;
}

.morgen-schirm {
  position: relative;
  border-radius: 38px;
  overflow: hidden;
  background: #f6f4ef;
}

/* Der Kopf der App liegt über dem Faden, der darunter durchläuft -- wie in
   der App: oben ohne Schatten, gescrollt mit gerader Kante und Schatten
   (zweite Aufnahme, blendet ein, sobald der Faden läuft). */
.morgen-kopf {
  position: absolute;
  inset: 0 0 auto;
  z-index: 4;
}

/* Oben rundet der Bildschirm selbst (`overflow: hidden`). Mit der Rundung
   von `.telefon img` endete der Kopf unten mit zwei Bögen, in der App ist
   die Kante gerade (Inhaber 22.10.2026). */
.morgen-kopf img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0;
}

.morgen-kopf-schatten {
  position: absolute;
  inset: 0 0 auto;
  opacity: 0;
  box-shadow: 0 7px 12px -7px rgba(23, 32, 29, 0.28);
}

.morgen-faden {
  display: grid;
  gap: 4px;
  /* Platz für den Kopf: 333 von 600 Bildpunkten Breite. */
  padding: 55.5% 0 14px;
}

.morgen-karte {
  position: relative;
}

.morgen-karte img {
  display: block;
  width: 100%;
  height: auto;
}

/* Mit Skript: ein fester Bildschirm, durch den der Tag läuft. Das Telefon
   bleibt stehen, sobald es ganz im Bild ist; beim Weiterscrollen läuft nur
   der Inhalt des Bildschirms (Inhaber 19.10.2026: „nur der Handy-Display-
   Inhalt scrollt, nicht die gesamte Seite“). Am Desktop bleibt der Text
   daneben mit stehen. */
.morgen.spielt {
  align-items: start;
}

.morgen.spielt .morgen-buehne {
  height: 230svh;
}

.morgen.spielt .morgen-telefon {
  position: sticky;
  /* Mitte unter der Kopfleiste (60 px): Telefon = Breite · 640/312 + 18. */
  top: max(70px, calc(30px + 50svh - var(--tel-b) * 1.0256 - 9px));
}

.morgen.spielt .morgen-text {
  position: sticky;
  top: max(90px, calc(50svh - 240px));
}

.morgen.spielt .morgen-schirm {
  aspect-ratio: 312 / 640;
}

.morgen.spielt .morgen-kopf-schatten {
  will-change: opacity;
  animation: morgen-schatten 4s linear both;
}

/* Der Schatten kommt, sobald der Faden zu laufen beginnt. */
@keyframes morgen-schatten {
  0%,
  30% {
    opacity: 0;
  }
  34%,
  100% {
    opacity: 1;
  }
}

.morgen.spielt .morgen-faden,
.morgen.spielt .morgen-karte {
  will-change: transform, opacity;
}

.morgen.spielt .morgen-faden {
  animation: morgen-laufen 4s linear both;
}

/* Je Karte taucht sie auf, sobald sie ins Bild kommt: Den Zeitpunkt
   rechnet das Skript aus der Lage der Karte (marketing.js). */
.morgen.spielt .morgen-karte {
  animation: morgen-karte 0.6s cubic-bezier(0.2, 0.9, 0.3, 1.15) both;
}

/* Der Bildschirm läuft vom ersten bis zum letzten Eintrag; wie weit,
   misst das Skript (`--rest`: Anteil des Fadens unter dem Bildschirm). */
/* Erst stehen die ersten Karten ganz im Bild, dann läuft er (Inhaber
   19.10.2026: „startet zu weit oben“). 30 % und 95 % stehen auch in
   marketing.js (`laufen`). */
@keyframes morgen-laufen {
  0%,
  30% {
    transform: none;
  }
  95%,
  100% {
    transform: translateY(calc(var(--rest, 0%) * -1));
  }
}

@keyframes morgen-karte {
  0% {
    opacity: 0;
    transform: translateX(-14%) scale(0.96);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 860px) {
  .morgen {
    grid-template-columns: minmax(0, 1fr);
  }
  /* Am Handy steht der Text davor und scrollt normal weg. */
  .morgen.spielt .morgen-text {
    position: static;
  }
}

/* ---------- Ihr macht · SimplyDay macht (Entwurf 69 B) ----------------- */
.ihr-macht {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  width: 100%;
  display: grid;
  gap: 10px;
}

.ihr-macht li {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) 40px minmax(0, 1.6fr);
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-radius: var(--rund);
  background: var(--flaeche);
  box-shadow: inset 0 0 0 1px var(--haarlinie);
}

.ihr {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 600;
  color: var(--tinte);
  text-decoration: none;
}

.ihr:hover {
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-underline-offset: 3px;
}

.ihr-zeichen {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: var(--farbe);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.ihr-zeichen svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: #fff;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Der Pfeil als Linie mit Spitze -- zeichnet sich von links. */
.ihr-pfeil {
  position: relative;
  height: 2px;
  background: var(--gold);
  border-radius: 2px;
  transform-origin: left center;
}

.ihr-pfeil::after {
  content: "";
  position: absolute;
  right: -1px;
  top: -4px;
  width: 9px;
  height: 9px;
  border-top: 2px solid var(--gold);
  border-right: 2px solid var(--gold);
  transform: rotate(45deg);
}

.ihr-app {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ihr-app span {
  padding: 4px 11px;
  border-radius: 999px;
  background: var(--wald-hell);
  color: var(--wald);
  font-size: 0.9rem;
  font-weight: 600;
}

/* Mit Skript: Pfeil und Ergebnisse kommen, sobald die Zeile im Bild ist. */
.js .ihr-macht .ihr-pfeil {
  transform: scaleX(0);
  transition: transform 450ms ease-out;
  transition-delay: calc(var(--z) * 90ms);
}

.js .ihr-macht .ihr-app span {
  opacity: 0;
  transform: translateY(8px) scale(0.85);
  transition:
    opacity 300ms ease,
    transform 420ms cubic-bezier(0.2, 1.5, 0.4, 1);
  transition-delay: calc(var(--z) * 90ms + 320ms + var(--c) * 110ms);
}

.js .ihr-macht li.da .ihr-pfeil {
  transform: none;
}

.js .ihr-macht li.da .ihr-app span {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .js .ihr-macht .ihr-pfeil,
  .js .ihr-macht .ihr-app span {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

@media (max-width: 640px) {
  .ihr-macht li {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    padding: 14px;
  }
  .ihr-pfeil {
    display: none;
  }
}

/* ---------- Mail weiterleiten (Entwurf 69) ----------------------------- */
/* Eine Bühne mit festen Maßen; alles in Prozent der Bühne, die Schrift in
   Bühnenbreite (`cqw`). Flug und Einträge sind ganze Bühnenebenen und
   verschieben sich in Prozent der Bühne -- dieselben Werte auf jeder
   Breite; am Handy (hochkant) andere Wege über die Variablen.
   Ablauf (Inhaber 19.10.2026): Mail erscheint, „Weiterleiten“ wird
   gedrückt, der Brief hebt ab, das SimplyDay-Zeichen klappt auf wie der
   Karton bei „Alles in einem“, nimmt den Brief auf und schließt sich; dann
   entstehen Bestellung, Paket und Budget. Die Bühne bleibt stehen, solange
   das läuft (Strecke mit `position: sticky`).
   Ganze Bühnenebenen verschieben sich nur; kleiner werden Brief und
   Einträge selbst, um ihre eigene Mitte -- eine Skalierung der Bühnenebene
   zöge sie zur Bühnenmitte, der Brief landete neben dem Zeichen (Inhaber
   19.10.2026). Die Wege stehen als Zahlen in den Keyframes, am Handy in
   eigenen Keyframes gleichen Namens (keine `var()` in Keyframes). */
.post {
  /* Mit `margin-inline: auto` schrumpfte die Bühne sonst auf die Textbreite. */
  width: 100%;
  display: grid;
  gap: 22px;
  margin-top: clamp(48px, 7vw, 88px);
}

.post-text {
  display: grid;
  gap: 10px;
  max-width: 40rem;
}

.post-text h3 {
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
}

.post-text p {
  margin: 0;
  color: var(--tinte-leise);
  font-size: 1.05rem;
}

.post-strecke.spielt {
  height: 170svh;
}

.post-strecke.spielt .post-buehne {
  position: sticky;
  /* Mittig unter der Kopfleiste; die Bühne ist höchstens 484 px hoch. */
  top: max(80px, calc(50svh - min(21vw, 242px) + 30px));
}

.post-buehne {
  position: relative;
  container-type: inline-size;
  /* Ein Bild, kein Text: langes Drücken beim Scrollen markiert nichts. */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  aspect-ratio: 1000 / 420;
}

.post-buehne > * {
  position: absolute;
}

.post-mail {
  left: 0;
  top: 6%;
  width: 38%;
  height: 88%;
  padding: 3.2cqw 3cqw;
  border-radius: 2.2cqw;
  background: var(--flaeche);
  box-shadow:
    inset 0 0 0 1px var(--haarlinie),
    0 30px 60px -36px rgba(15, 32, 26, 0.4);
  display: grid;
  align-content: start;
  gap: 1.2cqw;
  font-size: 1.55cqw;
  color: var(--tinte);
}

.post-mail-kopf {
  display: flex;
  align-items: center;
  gap: 1.2cqw;
  padding-bottom: 1.2cqw;
  border-bottom: 1px solid var(--haarlinie);
}

.post-mail-kopf small {
  display: block;
  color: var(--tinte-leise);
  font-size: 0.85em;
}

.post-absender {
  flex: none;
  width: 3.6cqw;
  height: 3.6cqw;
  border-radius: 50%;
  background: #8b7bd8;
  color: #fff;
  font-weight: 700;
  display: grid;
  place-items: center;
}

.post-mail p {
  margin: 0;
}

.post-artikel {
  display: flex;
  justify-content: space-between;
  gap: 1cqw;
  padding: 1cqw 1.2cqw;
  border-radius: 1.2cqw;
  background: var(--sand-tief);
}

.post-leise {
  color: var(--tinte-leise);
  font-size: 0.9em;
}

.post-knopf {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 0.6cqw;
  padding: 0.8cqw 1.6cqw;
  border-radius: 999px;
  background: #2f6db3;
  color: #fff;
  font-weight: 600;
}

.post-knopf svg {
  width: 1.8cqw;
  height: 1.8cqw;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Der Brief: groß, damit man ihn fliegen sieht. */
.post-flug {
  inset: 0;
  pointer-events: none;
  opacity: 0;
}

.post-brief {
  position: absolute;
  left: 23.5%;
  top: 58.3%;
  width: 9%;
  aspect-ratio: 1;
  border-radius: 22%;
  background: linear-gradient(#4c8dd6, #2f6db3);
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow: 0 14px 26px -12px rgba(0, 0, 0, 0.45);
}

.post-brief svg {
  width: 58%;
  height: 58%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Der Karton aus dem SimplyDay-Zeichen: Inneres, Deckel (oben 40 %),
   Vorderwand und das geschlossene Zeichen darüber. Ecken wie das Zeichen
   (22 % der Breite), je Teil in eigener Höhe umgerechnet. */
.post-innen,
.post-deckel,
.post-vorne,
.post-zu {
  left: 44%;
  width: 12%;
}

.post-innen,
.post-deckel {
  top: 30%;
  height: 11.43%;
  border-radius: 22% 22% 0 0 / 55% 55% 0 0;
}

.post-innen {
  background: linear-gradient(#386f57, #2a5342 70%, #12291f);
  opacity: 0;
}

.post-deckel {
  background: linear-gradient(#3f7d61, #326550);
  transform-origin: 50% 0;
  opacity: 0;
}

.post-deckel i {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: #0f2219;
  opacity: 0;
}

.post-vorne {
  top: 41.43%;
  height: 17.14%;
  border-radius: 0 0 22% 22% / 0 0 36.7% 36.7%;
  background: linear-gradient(#326550, #1f4034);
  box-shadow: 0 16px 30px -14px rgba(15, 32, 26, 0.55);
}

.post-zu {
  top: 30%;
  height: 28.57%;
  border-radius: 22%;
  background: linear-gradient(#3f7d61, #1f4034);
  color: #fcfaf6;
  display: grid;
  place-items: center;
}

.post-zu svg {
  width: 72%;
  height: 72%;
}

.post-ergebnis {
  inset: 0;
  pointer-events: none;
}

.post-eintrag {
  position: absolute;
  left: 62%;
  width: 38%;
  height: 26%;
  padding: 1.4cqw 2cqw;
  border-radius: 1.8cqw;
  background: var(--flaeche);
  box-shadow:
    inset 0 0 0 1px var(--haarlinie),
    0 20px 40px -30px rgba(15, 32, 26, 0.4);
  display: grid;
  align-content: center;
  gap: 0.3cqw;
  font-size: 1.45cqw;
  color: var(--tinte-leise);
}

.post-eintrag b {
  color: var(--tinte);
  font-size: 1.2em;
}

.post-e1 .post-eintrag {
  top: 4%;
}

.post-e2 .post-eintrag {
  top: 37%;
}

.post-e3 .post-eintrag {
  top: 70%;
}

.post-sorte {
  justify-self: start;
  padding: 0.2cqw 0.9cqw;
  border-radius: 999px;
  background: var(--farbe);
  color: #fff;
  font-size: 0.8em;
  font-weight: 700;
}

.post-frei {
  display: grid;
}

.post-frei > span {
  grid-area: 1 / 1;
}

.post-nachher {
  opacity: 0;
}

.post-spur {
  height: 0.7cqw;
  border-radius: 999px;
  background: var(--wald-hell);
  overflow: hidden;
}

.post-spur i {
  display: block;
  height: 100%;
  width: 100%;
  background: #3f8a67;
  transform-origin: left center;
  transform: scaleX(0.62);
}

/* Ohne Skript: die fertigen Einträge, das Budget schon nach der Bestellung. */
.post-strecke:not(.spielt) .post-vorher {
  opacity: 0;
}

.post-strecke:not(.spielt) .post-nachher {
  opacity: 1;
}

.post-strecke:not(.spielt) .post-spur i {
  transform: scaleX(0.72);
}

.post-strecke.spielt .post-buehne > *,
.post-strecke.spielt .post-brief,
.post-strecke.spielt .post-eintrag,
.post-strecke.spielt .post-knopf,
.post-strecke.spielt .post-deckel i,
.post-strecke.spielt .post-spur i,
.post-strecke.spielt .post-frei > span {
  will-change: transform, opacity;
}

.post-strecke.spielt .post-mail {
  animation: post-mail 4s both;
}
.post-strecke.spielt .post-knopf {
  animation: post-knopf 4s both;
}
.post-strecke.spielt .post-flug {
  animation: post-flug 4s both;
}
.post-strecke.spielt .post-brief {
  animation: post-brief 4s both;
}
.post-strecke.spielt .post-innen {
  animation: post-innen 4s both;
}
.post-strecke.spielt .post-deckel {
  animation: post-deckel 4s both;
}
.post-strecke.spielt .post-deckel i {
  animation: post-deckel-innen 4s both;
}
.post-strecke.spielt .post-zu {
  animation: post-zu 4s both;
}
.post-strecke.spielt .post-e1 {
  animation: post-e1 4s both;
}
.post-strecke.spielt .post-e2 {
  animation: post-e2 4s both;
}
.post-strecke.spielt .post-e3 {
  animation: post-e3 4s both;
}
/* Jeder Eintrag wächst aus dem Zeichen, solange seine Ebene heranfährt
   (62 / 68 / 74 % von 4 s, je 9 %). */
.post-strecke.spielt .post-eintrag {
  animation: post-eintrag 0.36s both;
}
.post-strecke.spielt .post-e1 .post-eintrag {
  animation-delay: 2.48s;
}
.post-strecke.spielt .post-e2 .post-eintrag {
  animation-delay: 2.72s;
}
.post-strecke.spielt .post-e3 .post-eintrag {
  animation-delay: 2.96s;
}
.post-strecke.spielt .post-vorher {
  animation: post-weg 4s both;
}
.post-strecke.spielt .post-nachher {
  animation: post-her 4s both;
}
.post-strecke.spielt .post-spur i {
  animation: post-spur 4s both;
}

@keyframes post-mail {
  0% {
    opacity: 0;
    transform: translateY(6%);
  }
  8%,
  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes post-knopf {
  0%,
  12% {
    transform: none;
  }
  15% {
    transform: scale(0.88);
  }
  18%,
  100% {
    transform: none;
  }
}

/* Brief (Mitte 28 % · 69 %) hebt ab, steht über dem Zeichen (Mitte 50 %
   · 15,7 %) und sinkt hinter die Vorderwand (50 % · 47,6 %). */
@keyframes post-flug {
  0%,
  15% {
    opacity: 0;
    transform: none;
  }
  18% {
    opacity: 1;
    transform: translateY(-4%);
  }
  34% {
    opacity: 1;
    transform: translate(22%, -53.3%);
  }
  44% {
    opacity: 1;
    transform: translate(22%, -21.4%);
  }
  46%,
  100% {
    opacity: 0;
    transform: translate(22%, -21.4%);
  }
}

@keyframes post-brief {
  0%,
  15% {
    transform: none;
  }
  18% {
    transform: scale(1.08);
  }
  34% {
    transform: scale(0.8);
  }
  44%,
  100% {
    transform: scale(0.5);
  }
}

/* Inneres: da, sobald der Deckel sich hebt, bis das Zeichen die Naht deckt
   -- sonst schiene die Seite durch (wie beim Karton „Alles in einem“). */
@keyframes post-innen {
  0%,
  18% {
    opacity: 0;
  }
  19%,
  55.9% {
    opacity: 1;
  }
  56%,
  100% {
    opacity: 0;
  }
}

@keyframes post-deckel {
  0%,
  18% {
    opacity: 0;
    transform: scaleY(1);
  }
  19%,
  21% {
    opacity: 1;
    transform: scaleY(1);
  }
  25% {
    transform: scaleY(0);
  }
  28% {
    transform: scaleY(-0.78);
  }
  30%,
  45% {
    transform: scaleY(-0.7);
  }
  49% {
    transform: scaleY(0);
  }
  52% {
    transform: scaleY(1.05);
  }
  54%,
  55.9% {
    opacity: 1;
    transform: scaleY(1);
  }
  56%,
  100% {
    opacity: 0;
    transform: scaleY(1);
  }
}

@keyframes post-deckel-innen {
  0%,
  24.9% {
    opacity: 0;
  }
  25%,
  48.9% {
    opacity: 0.22;
  }
  49%,
  100% {
    opacity: 0;
  }
}

/* Das geschlossene Zeichen: weg, solange der Karton offen ist; danach ein
   kurzes Nicken -- „aufgenommen“. */
@keyframes post-zu {
  0%,
  18.9% {
    opacity: 1;
    transform: none;
  }
  19%,
  55.9% {
    opacity: 0;
    transform: none;
  }
  56% {
    opacity: 1;
    transform: none;
  }
  59% {
    transform: scale(1.12, 0.92);
  }
  62%,
  100% {
    opacity: 1;
    transform: none;
  }
}

/* Die Ebenen fahren aus der Mitte des Zeichens an ihren Platz. */
@keyframes post-e1 {
  0%,
  62% {
    opacity: 0;
    transform: translate(-31%, 27.3%);
  }
  71%,
  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes post-e2 {
  0%,
  68% {
    opacity: 0;
    transform: translate(-31%, -5.7%);
  }
  77%,
  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes post-e3 {
  0%,
  74% {
    opacity: 0;
    transform: translate(-31%, -38.7%);
  }
  83%,
  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes post-eintrag {
  0% {
    transform: scale(0.3);
  }
  100% {
    transform: none;
  }
}

@keyframes post-weg {
  0%,
  86% {
    opacity: 1;
  }
  91%,
  100% {
    opacity: 0;
  }
}

@keyframes post-her {
  0%,
  86% {
    opacity: 0;
  }
  91%,
  100% {
    opacity: 1;
  }
}

@keyframes post-spur {
  0%,
  85% {
    transform: scaleX(0.62);
  }
  95%,
  100% {
    transform: scaleX(0.72);
  }
}

/* Am Handy hochkant (Bühne 360 × 660) und so groß, dass sie ganz ins Bild
   passt: Mail oben, darunter mit Abstand das Zeichen, dann die Einträge. */
@media (max-width: 760px) {
  .post-strecke.spielt .post-buehne {
    top: 70px;
  }
  .post-buehne {
    width: min(100%, calc((100svh - 80px) * 360 / 660));
    margin-inline: auto;
    aspect-ratio: 360 / 660;
  }
  .post-mail {
    top: 0;
    width: 100%;
    height: 34.91%;
    padding: 4.5cqw;
    border-radius: 6cqw;
    gap: 2.2cqw;
    font-size: 3.9cqw;
  }
  .post-mail-kopf {
    gap: 3cqw;
    padding-bottom: 2.2cqw;
  }
  .post-absender {
    width: 9cqw;
    height: 9cqw;
  }
  .post-artikel {
    padding: 2.2cqw 3cqw;
    border-radius: 3cqw;
  }
  .post-knopf {
    gap: 1.6cqw;
    padding: 2cqw 4cqw;
  }
  .post-knopf svg {
    width: 4.6cqw;
    height: 4.6cqw;
  }
  /* Mitte 80,6 % · 29,7 %: auf dem Knopf „Weiterleiten“. */
  .post-brief {
    left: 72.6%;
    top: 25.33%;
    width: 16%;
  }
  /* Zeichen 26 % breit, quadratisch: 93,6 von 660 = 14,18 % hoch, mit
     Luft zur Mail, damit der offene Deckel sie nicht berührt. */
  .post-innen,
  .post-deckel,
  .post-vorne,
  .post-zu {
    left: 37%;
    width: 26%;
  }
  .post-innen,
  .post-deckel {
    top: 42.79%;
    height: 5.673%;
  }
  .post-vorne {
    top: 48.46%;
    height: 8.509%;
  }
  .post-zu {
    top: 42.79%;
    height: 14.18%;
  }
  .post-eintrag {
    left: 0;
    width: 100%;
    height: 13.03%;
    padding: 2.2cqw 4.5cqw;
    border-radius: 4.5cqw;
    font-size: 3.5cqw;
    gap: 0.5cqw;
  }
  .post-e1 .post-eintrag {
    top: 59.09%;
  }
  .post-e2 .post-eintrag {
    top: 73.33%;
  }
  .post-e3 .post-eintrag {
    top: 87.58%;
    height: 12.42%;
  }
  .post-sorte {
    padding: 0.5cqw 2.5cqw;
  }
  .post-spur {
    height: 1.8cqw;
  }
  /* Brief (Mitte 80,6 % · 29,7 %) über das Zeichen (50 % · 35,8 %), dann
     hinter die Vorderwand (50 % · 51,8 %). */
  @keyframes post-flug {
    0%,
    15% {
      opacity: 0;
      transform: none;
    }
    18% {
      opacity: 1;
      transform: translateY(-2%);
    }
    34% {
      opacity: 1;
      transform: translate(-30.56%, 6.06%);
    }
    44% {
      opacity: 1;
      transform: translate(-30.56%, 22.12%);
    }
    46%,
    100% {
      opacity: 0;
      transform: translate(-30.56%, 22.12%);
    }
  }
  /* Einträge aus der Mitte des Zeichens (50 % · 49,88 %). */
  @keyframes post-e1 {
    0%,
    62% {
      opacity: 0;
      transform: translateY(-15.73%);
    }
    71%,
    100% {
      opacity: 1;
      transform: none;
    }
  }
  @keyframes post-e2 {
    0%,
    68% {
      opacity: 0;
      transform: translateY(-29.97%);
    }
    77%,
    100% {
      opacity: 1;
      transform: none;
    }
  }
  @keyframes post-e3 {
    0%,
    74% {
      opacity: 0;
      transform: translateY(-43.91%);
    }
    83%,
    100% {
      opacity: 1;
      transform: none;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .morgen.spielt *,
  .post-strecke.spielt * {
    animation: none !important;
  }
}

/* ---------- Rundgang: die Stadt der Bausteine (stadt.ts) ---------------- */
/* Jede Fläche eine Ebene im 3D-Raum. Die Bühne klebt, die Kapitel scrollen
   darüber; je Kapitel fährt die Kamera (`.stadt-welt`) einmal zu ihrem
   Halt, als Animation des Browsers, nicht dem Finger nachgeführt (wie
   3dmk.com, Inhaber 29.10.2026). Große Flächen einfarbig, ohne Rundung,
   damit Safari sie ohne Bildspeicher zeichnet. Ohne Skript und bei
   „Bewegung reduzieren“ steht der Überblick still da. */
.stadt-strecke {
  --stadt-boden: #bfdcab;
  --stadt-strasse: #a9aea6;
  --stadt-platz: #f1e4c8;
  --stadt-himmel-oben: #bfe0f2;
  --stadt-himmel-unten: #fbefd6;
  position: relative;
}

main > section.stadt-strecke {
  padding: 0;
}

main > section.stadt-strecke > * {
  max-width: none;
}

@media (prefers-color-scheme: dark) {
  .stadt-strecke {
    --stadt-boden: #2b4a33;
    --stadt-strasse: #46514b;
    --stadt-platz: #3a3a30;
    --stadt-himmel-oben: #0f1d2b;
    --stadt-himmel-unten: #263a3a;
  }
}

.stadt-buehne {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  perspective: 1500px;
  perspective-origin: 50% 30%;
}

.stadt-himmel {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    var(--stadt-himmel-oben),
    var(--stadt-himmel-unten)
  );
}

.stadt-zoom {
  position: absolute;
  left: 50%;
  top: 46%;
  width: 0;
  height: 0;
  transform-style: preserve-3d;
  pointer-events: none;
}

.stadt-welt,
.stadt-welt b {
  position: absolute;
  left: 0;
  top: 0;
  transform-style: preserve-3d;
  transform-origin: 0 0;
}

.stadt-welt i {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  transform-origin: 0 0;
}

.stadt-boden {
  background-color: var(--stadt-boden);
}

.stadt-platz {
  background-color: var(--stadt-platz);
}

.ss {
  background-color: var(--stadt-strasse);
}

.sf-schild {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding-top: 18px;
  font-style: normal;
  color: #fff;
  background-image: repeating-linear-gradient(
    90deg,
    transparent 0 22px,
    rgba(255, 255, 255, 0.16) 22px 34px
  );
}

.sf-zeichen {
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: rgba(23, 32, 29, 0.22);
}

.sf-zeichen svg {
  width: 56px;
  height: 56px;
  fill: none;
  stroke: #fff;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sf-name {
  max-width: 92%;
  padding: 4px 12px;
  border-radius: 8px;
  background: rgba(23, 32, 29, 0.3);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.15;
  text-align: center;
}

/* Leben in der Stadt: Bäume, Leute und Ballons sind zwei gekreuzte
   Scheiben, die auf ihrem Fußpunkt stehen. */
.stadt-welt .sz {
  transform-origin: 50% 100%;
}

.sbk,
.sballon-huelle {
  border-radius: 50%;
}

.sballon-huelle {
  background-image: repeating-linear-gradient(
    90deg,
    transparent 0 18px,
    rgba(255, 255, 255, 0.35) 18px 30px
  );
}

.smensch {
  border-radius: 8px 8px 3px 3px;
}

.sbl {
  border-radius: 50%;
}

.ssee {
  border-radius: 50%;
  background-color: #7fb8d9;
}

.sfluss {
  background-color: #7fb8d9;
}

.stadt-welt .swelle {
  left: -170px;
  top: -100px;
  width: 340px;
  height: 200px;
  border: 4px solid rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  transform-origin: 50% 50%;
  opacity: 0;
}

.stadt-welt .swolke i {
  width: 520px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(
    closest-side,
    rgba(255, 255, 255, 0.95),
    rgba(255, 255, 255, 0.75) 55%,
    rgba(255, 255, 255, 0)
  );
}

.stadt-welt .swr-dreh {
  width: 0;
  height: 0;
}

.stadt-welt .swr-fluegel {
  left: -7px;
  top: -130px;
  width: 14px;
  height: 130px;
  border-radius: 7px;
  background-color: #fcfaf6;
  transform-origin: 50% 100%;
}

.stadt-welt .swr-nabe {
  left: -12px;
  top: -12px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: #2b3a35;
}

.stadt-welt .srauch i {
  left: -26px;
  top: -52px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background-color: rgba(240, 240, 236, 0.9);
  transform-origin: 50% 50%;
  opacity: 0;
}

.stadt-welt .slicht i {
  left: -70px;
  top: -70px;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: radial-gradient(
    closest-side,
    rgba(255, 236, 160, 0.95),
    rgba(255, 214, 102, 0.35) 60%,
    rgba(255, 214, 102, 0)
  );
  transform-origin: 50% 50%;
}

/* Das Leben läuft endlos, nur mit Skript und nie bei „Bewegung reduzieren“. */
.stadt-strecke.spielt .skreis {
  animation: stadt-kreisen 60s linear infinite;
}

.stadt-strecke.spielt .skreis-zurueck,
.stadt-strecke.spielt .sfahrt-zurueck {
  animation-direction: reverse;
}

.stadt-strecke.spielt .sfahrt {
  animation: stadt-fahrt 30s linear infinite;
}

.stadt-strecke.spielt .swr-dreh {
  animation: stadt-kreisen 7s linear infinite;
}

.stadt-strecke.spielt .srauch i {
  animation: stadt-rauch 3.9s ease-out infinite;
}

.stadt-strecke.spielt .slicht i {
  animation: stadt-licht 2.4s ease-in-out infinite alternate;
}

.stadt-strecke.spielt .sballon {
  animation: stadt-schweben 7s ease-in-out infinite alternate;
}

.stadt-strecke.spielt .swolke i {
  animation: stadt-ziehen 70s ease-in-out infinite alternate;
}

.stadt-strecke.spielt .swelle {
  animation: stadt-welle 4.8s ease-out infinite;
}

@keyframes stadt-fahrt {
  from {
    transform: translateX(-3300px);
  }
  to {
    transform: translateX(3300px);
  }
}

@keyframes stadt-kreisen {
  to {
    transform: rotateZ(360deg);
  }
}

@keyframes stadt-rauch {
  0% {
    opacity: 0;
    transform: translateY(0) scale(0.5);
  }
  15% {
    opacity: 0.9;
  }
  100% {
    opacity: 0;
    transform: translateY(-190px) scale(1.7);
  }
}

@keyframes stadt-licht {
  from {
    opacity: 0.35;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1.15);
  }
}

@keyframes stadt-schweben {
  from {
    transform: translate3d(0, 0, -40px);
  }
  to {
    transform: translate3d(0, 0, 50px);
  }
}

@keyframes stadt-ziehen {
  from {
    transform: translateX(-260px);
  }
  to {
    transform: translateX(260px);
  }
}

@keyframes stadt-welle {
  from {
    opacity: 0.9;
    transform: scale(0.25);
  }
  to {
    opacity: 0;
    transform: scale(1.3);
  }
}

/* Die Kapitel scrollen über die klebende Bühne. */
.stadt-kapitelfolge {
  position: relative;
  margin-top: -100svh;
  pointer-events: none;
}

.stadt-kapitel {
  display: flex;
  align-items: flex-end;
  min-height: 100svh;
  padding: 0 16px max(20px, env(safe-area-inset-bottom));
}

.stadt-karte {
  width: 100%;
  max-width: 30rem;
  margin: 0 auto;
  padding: 18px 20px;
  border-radius: var(--rund);
  background: var(--flaeche);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.08),
    0 12px 32px rgba(23, 32, 29, 0.16);
  pointer-events: auto;
}

.stadt-karte h1,
.stadt-karte h2 {
  margin: 0 0 8px;
  font-size: clamp(1.35rem, 1.1rem + 1vw, 1.9rem);
  line-height: 1.15;
}

.stadt-karte p {
  margin: 0 0 10px;
  color: var(--tinte-leise);
}

.stadt-karte .stadt-ort {
  font-size: 0.9rem;
  font-weight: 600;
}

.stadt-mehr {
  font-weight: 600;
  color: var(--wald);
}

.stadt-leiste {
  position: absolute;
  right: 10px;
  top: 50%;
  display: grid;
  gap: 7px;
  transform: translateY(-50%);
}

.stadt-punkt {
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--tinte);
  opacity: 0.35;
  transition:
    transform 0.4s ease,
    opacity 0.4s ease;
}

.stadt-punkt.ist-hier {
  opacity: 1;
  transform: scale(1.6);
}

/* Handy: die Stadt oben, die Karte unten. */
@media (max-width: 759px) {
  .stadt-zoom {
    top: 30%;
    transform: scale(0.5);
  }

  .stadt-karte p {
    font-size: 0.95rem;
  }
}

/* Breit: die Karte links, die Stadt rechts davon. */
@media (min-width: 760px) {
  .stadt-zoom {
    left: 62%;
    top: 50%;
  }

  .stadt-kapitel {
    align-items: center;
    padding: 0 max(var(--rinne), calc((100vw - var(--breite)) / 2));
  }

  .stadt-karte {
    width: min(26rem, 38vw);
    margin: 0;
  }

  .stadt-leiste {
    right: 22px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .stadt-strecke.spielt * {
    animation: none !important;
  }
}