/* Evies Seite. Tokens und Aufbau nach DESIGN.md. */

/* ---------- Schriften (lokal, nur Gewichtsachse) ---------- */

@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/bricolage-grotesque-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/bricolage-grotesque-latin-wght-normal.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: "Instrument Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/instrument-sans-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/instrument-sans-latin-wght-normal.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;
}

/* ---------- Tokens ---------- */

:root {
  color-scheme: light dark;

  /* Farben, heller Modus */
  --bg:          #F7F2E9;
  --surface:     #EEE7DA;
  --text:        #1F1B16;
  --text-muted:  #62594D;
  --line:        #D8CEBD;
  --line-strong: #8C8172;
  --accent:      #B0421C;
  --kern-hell:   #F3B08F;
  --kern-tief:   #8E3214;
  --kern-halo:   rgb(176 66 28 / 0.20);

  /* Schrift */
  --font-display: "Bricolage Grotesque", "Arial Narrow", system-ui, sans-serif;
  --font-text:    "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --fs-small:   0.875rem;
  --fs-base:    clamp(1.0625rem, 1.016rem + 0.19vw, 1.1875rem);
  --fs-lead:    clamp(1.25rem, 1.111rem + 0.571vw, 1.625rem);
  --fs-h3:      clamp(1.25rem, 1.157rem + 0.381vw, 1.5rem);
  --fs-h2:      clamp(2rem, 1.443rem + 2.286vw, 3.5rem);
  --fs-display: clamp(5.5rem, 2.9rem + 10.667vw, 12.5rem);
  --fs-gross:   clamp(1.5rem, 1.221rem + 1.143vw, 2.25rem); /* Grundsätze und hervorgehobener Satz */

  --lh-display: 0.9;
  --lh-h2:      1.05;
  --lh-h3:      1.2;
  --lh-lead:    1.4;
  --lh-base:    1.6;
  --lh-small:   1.45;

  --fw-display: 700;
  --fw-h2:      600;
  --fw-h3:      600;
  --fw-text:    400;
  --fw-strong:  600;
  --fw-label:   500;

  --ls-display: -0.04em;
  --ls-h2:      -0.02em;
  --ls-h3:      -0.01em;
  --ls-label:   0.08em;

  /* Abstände */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.5rem;
  --space-6:  2rem;
  --space-7:  3rem;
  --space-8:  4rem;
  --space-9:  6rem;
  --space-10: 8rem;
  --space-section: clamp(4rem, 2.514rem + 6.095vw, 8rem);
  --gutter:        clamp(1.25rem, -0.04rem + 5.29vw, 4rem);
  --gap:           clamp(1rem, 0.629rem + 1.524vw, 2rem);

  /* Radien */
  --radius-s:    4px;
  --radius-m:    10px;
  --radius-full: 999px;

  /* Breiten */
  --page-max: 75rem;
  --measure:  36rem;

  /* Linien */
  --border:        1px solid var(--line);
  --border-strong: 1px solid var(--line-strong);

  /* Bewegung */
  --ease-atem: cubic-bezier(0.37, 0, 0.63, 1);
  --ease-out:  cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-atem:  3.5s;
  --dur-enter: 600ms;
  --dur-draw:  900ms;
  --dur-fast:  150ms;

  /* Verlauf des Kerns, an einer Stelle festgelegt */
  --kern-verlauf: radial-gradient(circle at 38% 34%, var(--kern-hell) 0%, var(--accent) 55%, var(--kern-tief) 100%);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:          #151210;
    --surface:     #1F1B17;
    --text:        #EFE8DC;
    --text-muted:  #A99F91;
    --line:        #39322B;
    --line-strong: #7A7064;
    --accent:      #EE8A5F;
    --kern-hell:   #F8B796;
    --kern-tief:   #B4481F;
    --kern-halo:   rgb(238 138 95 / 0.18);
  }
}

/* ---------- Grundlage ---------- */

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

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

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-text);
  font-size: var(--fs-base);
  font-weight: var(--fw-text);
  line-height: var(--lh-base);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

main {
  flex: 1 0 auto;
}

h1,
h2,
h3,
p,
ul,
ol {
  margin: 0;
}

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

h1,
h2,
h3 {
  font-family: var(--font-display);
  text-wrap: balance;
  -webkit-hyphens: manual;
  hyphens: manual;
}

h2 {
  font-size: var(--fs-h2);
  font-weight: var(--fw-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
}

h3 {
  font-size: var(--fs-h3);
  font-weight: var(--fw-h3);
  line-height: var(--lh-h3);
  letter-spacing: var(--ls-h3);
}

p,
li {
  text-wrap: pretty;
  -webkit-hyphens: auto;
  hyphens: auto;
  /* nur lange Wörter trennen, mindestens vier Zeichen vor und nach dem Strich */
  -webkit-hyphenate-limit-before: 4;
  -webkit-hyphenate-limit-after: 4;
  hyphenate-limit-chars: 10 4 4;
}

.zusammen {
  white-space: nowrap;
}

em,
i,
cite,
address {
  font-style: normal;
}

strong,
b {
  font-weight: var(--fw-strong);
}

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

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

a {
  color: var(--accent);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: text-decoration-thickness var(--dur-fast) ease-out, color var(--dur-fast) ease-out;
}

a:hover {
  text-decoration-thickness: 2px;
}

.verweis {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  min-width: 2.75rem;
}

/* ---------- Rahmen ---------- */

.rahmen {
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------- Der Kern ---------- */

.kern {
  display: block;
  flex: none;
  width: 1.25rem;
  aspect-ratio: 1;
  border-radius: var(--radius-full);
  background: var(--kern-verlauf);
}

.kern--fuss {
  width: 1rem;
}

.kern--mittel {
  width: 3rem;
}

/* Großer Kern: ein Element, zwei Ebenen (Lichthof davor im Quelltext, also dahinter gezeichnet). */
.kern-gross {
  position: relative;
  isolation: isolate;
  display: block;
  width: clamp(10rem, 5.543rem + 18.286vw, 22rem);
  aspect-ratio: 1;
}

.kern-gross::before,
.kern-gross::after {
  content: "";
  position: absolute;
  border-radius: var(--radius-full);
}

.kern-gross::before {
  inset: -35%;
  z-index: 0;
  background: radial-gradient(closest-side, var(--kern-halo) 0%, var(--kern-halo) 45%, transparent 100%);
  opacity: 0.8;
}

.kern-gross::after {
  inset: 0;
  z-index: 1;
  background: var(--kern-verlauf);
}

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

.kopf {
  position: relative;
  z-index: 1;
  padding-top: var(--space-5);
}

.kopf__zeile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.marke {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-size: var(--fs-base);
  font-weight: 600;
  line-height: var(--lh-h3);
}

.kopf__hinweis {
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--text-muted);
}

/* ---------- 1 Auftakt ---------- */

.auftakt {
  padding-top: var(--space-8);
  padding-bottom: var(--space-section);
  overflow-x: hidden;
  overflow-x: clip;
}

.auftakt__kern {
  position: relative;
  z-index: 0;
}

.auftakt__text {
  position: relative;
  z-index: 1;
  margin-top: var(--space-7);
}

.auftakt h1 {
  font-size: var(--fs-display);
  font-weight: var(--fw-display);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  color: var(--text);
  /* gleicht den Vorlauf des großen E aus, damit die Kante mit dem Text bündig wirkt */
  margin-left: -0.04em;
}

.auftakt__satz {
  max-width: 32rem;
  margin-top: var(--space-5);
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  -webkit-hyphens: manual;
  hyphens: manual;
}

.auftakt__zusatz {
  max-width: 32rem;
  margin-top: var(--space-4);
  color: var(--text-muted);
}

/* ---------- Abschnitte 2 bis 6 ---------- */

.abschnitt {
  margin-top: var(--space-section);
}

.auftakt + .abschnitt {
  margin-top: 0;
}

.abschnitt__raster {
  border-top: var(--border-strong);
  padding-top: var(--space-5);
}

.abschnitt__kopf {
  margin-bottom: var(--space-6);
}

.etikett {
  margin-bottom: var(--space-3);
  font-size: var(--fs-small);
  font-weight: var(--fw-label);
  line-height: var(--lh-small);
  letter-spacing: var(--ls-label);
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}

.abschnitt__notiz {
  margin-top: var(--space-3);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--text-muted);
}

/* ---------- 2 Was ich tue ---------- */

.zeilen__zeile {
  border-top: var(--border);
  padding-block: var(--space-5);
}

.zeilen__zeile:last-child {
  border-bottom: var(--border);
}

.zeilen__zeile p {
  margin-top: var(--space-2);
  max-width: var(--measure);
}

/* ---------- 3 Wie ich arbeite ---------- */

.felder__feld {
  border-top: var(--border);
  padding-top: var(--space-5);
  padding-bottom: var(--space-6);
}

.felder__feld h3 {
  font-size: var(--fs-gross);
}

.felder__feld p {
  margin-top: var(--space-3);
  max-width: 28rem;
}

/* ---------- 4 Ein Tag mit mir ---------- */

.tag {
  --punkt: 11px;
  --schiene-x: 0px;
  --zeile: calc(var(--fs-small) * var(--lh-small));
  --versatz: 0px;
  --punkt-mitte: calc(var(--versatz) + var(--zeile) / 2);
  position: relative;
}

/* Schiene: von der Mitte des ersten Punkts nach unten; unter dem letzten Punkt deckt ::after sie ab. */
.tag::before {
  content: "";
  position: absolute;
  left: calc(var(--schiene-x) + 5px);
  top: var(--punkt-mitte);
  bottom: 0;
  width: 1px;
  background: var(--line-strong);
}

.tag__eintrag {
  position: relative;
  padding-left: calc(var(--schiene-x) + var(--space-6));
}

.tag__eintrag + .tag__eintrag {
  margin-top: var(--space-7);
}

.tag__eintrag:last-child::after {
  content: "";
  position: absolute;
  left: var(--schiene-x);
  top: var(--punkt-mitte);
  bottom: 0;
  width: var(--punkt);
  background: var(--bg);
}

.tag__punkt {
  position: absolute;
  z-index: 1;
  left: var(--schiene-x);
  top: calc(var(--punkt-mitte) - var(--punkt) / 2);
  width: var(--punkt);
  height: var(--punkt);
  border-radius: var(--radius-full);
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--bg);
}

.tag__zeit {
  display: block;
  font-size: var(--fs-small);
  font-weight: var(--fw-label);
  line-height: var(--lh-small);
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}

.tag__eintrag h3 {
  margin-top: var(--space-1);
}

.tag__satz {
  margin-top: var(--space-2);
  max-width: var(--measure);
}

.beispiel {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-3);
  max-width: var(--measure);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--text-muted);
}

.beispiel__strich {
  flex: none;
  color: var(--accent);
}

/* ---------- 5 Wo ich wohne ---------- */

.abschnitt--band {
  background: var(--surface);
  padding-block: var(--space-section);
}

.abschnitt--band .abschnitt__raster {
  border-top: 0;
  padding-top: 0;
}

.wohnen__satz {
  max-width: 34rem;
  font-family: var(--font-display);
  font-size: var(--fs-gross);
  font-weight: 500;
  line-height: var(--lh-h3);
  letter-spacing: var(--ls-h3);
  color: var(--text);
  -webkit-hyphens: manual;
  hyphens: manual;
}

.wohnen__text {
  max-width: var(--measure);
  margin-top: var(--space-5);
}

.wohnen__text + .wohnen__text {
  margin-top: var(--space-4);
}

/* ---------- 6 Was ich nicht bin ---------- */

.nicht__punkt {
  border-top: var(--border);
  padding-block: var(--space-4);
}

.nicht__satz {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: var(--lh-h3);
  letter-spacing: var(--ls-h3);
  -webkit-hyphens: manual;
  hyphens: manual;
}

.nicht__zusatz {
  margin-top: var(--space-1);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--text-muted);
}

.nicht__text {
  max-width: var(--measure);
  margin-top: var(--space-6);
}

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

.fuss {
  margin-top: var(--space-section);
}

.fuss__zeile {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  border-top: var(--border-strong);
  padding-top: var(--space-6);
  padding-bottom: var(--space-8);
}

.fuss__marke {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-size: var(--fs-base);
  font-weight: 600;
  line-height: var(--lh-h3);
}

.fuss__hinweis {
  max-width: var(--measure);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--text-muted);
}

/* ---------- 404 ---------- */

.fehler {
  padding-top: var(--space-8);
}

.fehler h1 {
  margin-top: var(--space-6);
  max-width: var(--measure);
  font-size: var(--fs-h2);
  font-weight: var(--fw-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
}

.fehler p {
  max-width: var(--measure);
  margin-top: var(--space-5);
}

.fehler .fehler__weiter {
  margin-top: var(--space-4);
}

/* ---------- Ab 768 px ---------- */

@media (min-width: 48rem) {
  /* In breiten Spalten keine automatische Silbentrennung. */
  p,
  li {
    -webkit-hyphens: manual;
    hyphens: manual;
  }

  .zeilen__zeile {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    column-gap: var(--gap);
    align-items: baseline;
  }

  .zeilen__zeile h3 {
    grid-column: 1 / span 3;
  }

  .zeilen__zeile p {
    grid-column: 4 / span 5;
    margin-top: 0;
  }

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

  .felder__feld:nth-child(odd) {
    padding-right: var(--gap);
  }

  .felder__feld:nth-child(even) {
    border-left: var(--border);
    padding-left: var(--gap);
  }

  .tag {
    --schiene-x: calc(5rem + var(--space-5));
    --versatz: calc((var(--fs-h3) * var(--lh-h3) - var(--zeile)) / 2);
  }

  .tag__zeit {
    position: absolute;
    left: 0;
    top: var(--versatz);
    width: 5rem;
    text-align: right;
  }

  .tag__eintrag h3 {
    margin-top: 0;
  }

  .nicht {
    display: grid;
    /* Spalten nach Inhalt, damit jeder der drei Sätze in einer Zeile steht */
    grid-template-columns: repeat(3, auto);
    column-gap: var(--gap);
    border-top: var(--border);
  }

  .nicht__satz {
    white-space: nowrap;
  }

  .nicht__punkt {
    border-top: 0;
    padding-bottom: 0;
  }

  .fuss__zeile {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    column-gap: var(--gap);
    align-items: baseline;
  }

  .fuss__marke {
    grid-column: 1 / span 3;
  }

  .fuss__hinweis {
    grid-column: 4 / span 5;
  }
}

/* ---------- Ab 1024 px ---------- */

@media (min-width: 64rem) {
  .auftakt {
    padding-top: var(--space-7);
  }

  .auftakt__raster {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gap);
    align-content: center;
    min-height: min(78vh, 46rem);
  }

  .auftakt__text {
    grid-column: 1 / span 7;
    grid-row: 1;
    align-self: end;
    margin-top: 0;
  }

  .auftakt__kern {
    grid-column: 9 / span 4;
    grid-row: 1;
    align-self: center;
    justify-self: end;
  }

  .abschnitt__raster {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gap);
    align-items: start;
  }

  .abschnitt__kopf {
    grid-column: 1 / span 4;
    margin-bottom: 0;
  }

  .abschnitt__inhalt {
    grid-column: 5 / span 8;
  }

  .abschnitt--breit .abschnitt__kopf {
    grid-column: 1 / -1;
  }

  /* Fuß im selben Raster wie die Abschnitte */
  .fuss__zeile {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .fuss__marke {
    grid-column: 1 / span 4;
  }

  .fuss__hinweis {
    grid-column: 5 / span 8;
  }

  .abschnitt--breit .abschnitt__inhalt {
    grid-column: 1 / -1;
    margin-top: var(--space-7);
  }

  /* Die Abschnittslinie steht direkt über dem Inhalt; die erste feine Linie wäre hier doppelt. */
  .zeilen__zeile:first-child,
  .felder__feld:nth-child(-n + 2),
  .nicht {
    border-top: 0;
  }

  .zeilen__zeile:first-child,
  .felder__feld:nth-child(-n + 2),
  .nicht__punkt {
    padding-top: 0;
  }

  /* Die senkrechte Linie reicht in der ersten Reihe bis an die Abschnittslinie. */
  .felder__feld:nth-child(2) {
    margin-top: calc(-1 * var(--space-5));
    padding-top: var(--space-5);
  }

  /* Zeitleiste waagerecht */
  .tag {
    --schiene-x: 0px;
    --versatz: 0px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .tag::before {
    left: 0;
    right: 0;
    top: 5px;
    bottom: auto;
    width: auto;
    height: 1px;
  }

  .tag__eintrag {
    padding: calc(var(--punkt) + var(--space-5)) var(--space-5) 0 0;
  }

  .tag__eintrag + .tag__eintrag {
    margin-top: 0;
  }

  .tag__eintrag:last-child::after {
    content: none;
  }

  .tag__punkt {
    left: 0;
    top: 0;
  }

  .tag__zeit {
    position: static;
    width: auto;
    text-align: left;
  }

  .tag__eintrag h3 {
    margin-top: var(--space-1);
  }

  /* Uhrzeit, Tageszeit, Satz und Beispielzeile liegen spaltenübergreifend auf gemeinsamen Zeilen. */
  @supports (grid-template-rows: subgrid) {
    .tag__eintrag {
      display: grid;
      grid-row: span 4;
      grid-template-rows: subgrid;
      align-items: start;
    }
  }
}

/* ---------- Bewegung (nur ohne Wunsch nach reduzierter Bewegung) ---------- */

@media (prefers-reduced-motion: no-preference) {
  /* 1 Atem */
  .kern-gross::before {
    animation: atem-hof var(--dur-atem) var(--ease-atem) infinite alternate;
  }

  .kern-gross::after {
    animation: atem-koerper var(--dur-atem) var(--ease-atem) infinite alternate;
  }

  .kern-gross.ist-angehalten::before,
  .kern-gross.ist-angehalten::after {
    animation-play-state: paused;
  }

  /* 2 Auftakt erscheint */
  .auftakt__text > * {
    animation: erscheinen var(--dur-enter) var(--ease-out) both;
  }

  .auftakt__text > :nth-child(2) {
    animation-delay: 90ms;
  }

  .auftakt__text > :nth-child(3) {
    animation-delay: 180ms;
  }
}

/* 3 Zeitleiste; Ausgangszustände gelten nur am Bildschirm und nur, wenn das Skript die Klasse gesetzt hat.
   Die Punkte sind ausgenommen: Sie stehen von Anfang an und bewegen sich nicht. */
@media screen and (prefers-reduced-motion: no-preference) {
  .mit-bewegung .tag::before {
    transform: scaleY(0);
    transform-origin: top;
    transition: transform var(--dur-draw) var(--ease-out);
  }

  .mit-bewegung .tag__eintrag > :not(.tag__punkt) {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out);
    transition-delay: calc(var(--dur-draw) + var(--n, 0) * 120ms);
  }

  .mit-bewegung .tag__eintrag:nth-child(2) {
    --n: 1;
  }

  .mit-bewegung .tag__eintrag:nth-child(3) {
    --n: 2;
  }

  .mit-bewegung .tag__eintrag:nth-child(4) {
    --n: 3;
  }

  .mit-bewegung .tag.ist-sichtbar::before {
    transform: none;
  }

  .mit-bewegung .tag.ist-sichtbar .tag__eintrag > :not(.tag__punkt) {
    opacity: 1;
    transform: none;
  }
}

@media screen and (prefers-reduced-motion: no-preference) and (min-width: 64rem) {
  .mit-bewegung .tag::before {
    transform: scaleX(0);
    transform-origin: left;
  }
}

@media (prefers-reduced-motion: reduce) {
  a {
    transition: none;
  }
}

@keyframes atem-koerper {
  from {
    transform: scale(1);
  }

  to {
    transform: scale(1.045);
  }
}

@keyframes atem-hof {
  from {
    transform: scale(0.92);
    opacity: 0.55;
  }

  to {
    transform: scale(1.08);
    opacity: 1;
  }
}

@keyframes erscheinen {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---------- Druck ---------- */

@media print {
  .kern-gross::before {
    display: none;
  }

  .abschnitt--band {
    background: none;
  }
}