/* =========================================================================
   DictaMind – Webseite

   Gestaltung
   - Grund in Lichtgrau wie Gehäuse von Bürotechnik. Weißes Papier trägt, was
     mit Text zu tun hat (Satzzeichen, Fachvokabular, Fenster, Blätter).
   - net97-Rot nur dort, wo DictaMind etwas tut: Aufnahme, gesetzte Zeichen,
     Hauptaktion. Rot ist Signal, keine Dekoration.
   - Titel: Archivo in breiter Laufweite. Text: Atkinson Hyperlegible Next,
     gezeichnet, damit sich 0/O und 1/l/I nicht verwechseln lassen.
   - Bewegung gibt es nur in der Vorführung.

   Schriften liegen unter assets/fonts (SIL Open Font License 1.1).
   ========================================================================= */

@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-breite.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("../fonts/atkinson-hyperlegible-next.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Atkinson Hyperlegible Mono";
  src: url("../fonts/atkinson-hyperlegible-mono.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;

  /* Farben */
  --grund: #e6e9e8;          /* Lichtgrau, Seitengrund */
  --grund-tief: #d9dedc;     /* Schreibtisch der Vorführung, Szenen */
  --papier: #ffffff;
  --flaeche: #ffffff;        /* Innenflächen; auf Papier etwas dunkler */
  --tinte: #1b1f22;          /* Text */
  --tinte-sanft: #4f575c;    /* Nebentext: 6,0:1 auf Grund */
  --linie: #c5ccc9;
  --linie-papier: #e1e5e3;
  --signal: #be1522;         /* net97-Rot: 5,2:1 auf Grund, 6,3:1 auf Weiß */
  --signal-dunkel: #a01019;
  --signal-sanft: #f6dcde;
  --kappe-flanke: #121517;
  --balken-ruhe: #6b7074;
  --code-grund: #23272a;
  --code-text: #e9ecea;
  --code-sanft: #aab3b0;

  /* Schrift */
  --schrift-titel: "Archivo", "Arial Nova", "Helvetica Neue", Arial, sans-serif;
  --schrift-text: "Atkinson Hyperlegible Next", system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  --schrift-mono: "Atkinson Hyperlegible Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --groesse-h1: clamp(2.375rem, 1.2rem + 4.8vw, 4.5rem);
  --groesse-h2: clamp(1.875rem, 1.3rem + 2.2vw, 3rem);
  --groesse-zwischen: clamp(1.25rem, 1.08rem + 0.6vw, 1.5rem);
  --groesse-lead: clamp(1.1875rem, 1.05rem + 0.55vw, 1.4375rem);
  --groesse-text: 1.0625rem;
  --groesse-klein: 0.9375rem;
  --groesse-etikett: 0.8125rem;

  /* Raum: 4-px-Raster */
  --raum-1: 0.25rem;
  --raum-2: 0.5rem;
  --raum-3: 0.75rem;
  --raum-4: 1rem;
  --raum-5: 1.5rem;
  --raum-6: 2rem;
  --raum-7: 3rem;
  --raum-8: 4rem;

  --rand: clamp(1rem, 4vw, 2.5rem);
  --abschnitt-abstand: clamp(4.5rem, 3rem + 6vw, 8rem);

  --radius: 10px;
  --radius-gross: 14px;

  --schatten-fenster: 0 1px 0 rgb(0 0 0 / 0.04), 0 16px 36px -14px rgb(22 32 28 / 0.32);
  --kurve: cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* =========================================================================
   Grundlagen
   ========================================================================= */

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

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

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  background: var(--grund);
  color: var(--tinte);
  font-family: var(--schrift-text);
  font-size: var(--groesse-text);
  line-height: 1.6;
}

svg {
  display: block;
}

h1,
h2,
h3 {
  margin: 0;
  text-wrap: balance;
}

p,
ul,
ol,
dl,
dd,
figure {
  margin: 0;
}

p {
  text-wrap: pretty;
}

a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  text-decoration-color: var(--signal);
}

a:hover {
  color: var(--signal-dunkel);
}

/* Sichtbarer Fokus ist Pflicht */
:focus-visible {
  outline: 3px solid var(--signal);
  outline-offset: 3px;
}

code,
kbd,
pre {
  font-family: var(--schrift-mono);
}

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

.sprunglink {
  position: absolute;
  top: -5rem;
  left: var(--rand);
  z-index: 100;
  padding: 0.625rem 1rem;
  border-radius: var(--radius);
  background: var(--tinte);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
}

.sprunglink:focus {
  top: 1rem;
  color: #fff;
}

.rahmen {
  width: 100%;
  max-width: 78rem;
  margin-inline: auto;
  padding-inline: var(--rand);
}

.rahmen--schmal {
  max-width: 48rem;
}

.etikett {
  display: block;
  font-family: var(--schrift-mono);
  font-size: var(--groesse-etikett);
  font-weight: 500;
  color: var(--tinte-sanft);
}

/* =========================================================================
   Bedienelemente
   ========================================================================= */

.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: 0 1.375rem;
  border: 0;
  border-radius: 8px;
  background: var(--signal);
  box-shadow: inset 0 -2px 0 rgb(0 0 0 / 0.2);
  color: #fff;
  font: inherit;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  transition: background-color 150ms ease, transform 80ms ease;
}

.knopf:hover {
  background: var(--signal-dunkel);
  color: #fff;
}

.knopf:active {
  box-shadow: none;
  transform: translateY(1px);
}

.textlink {
  font-weight: 700;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.3em;
}

.textknopf {
  padding: 0.25rem 0;
  border: 0;
  background: none;
  color: var(--tinte);
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--signal);
  text-underline-offset: 0.2em;
  cursor: pointer;
}

.textknopf:hover {
  color: var(--signal-dunkel);
}

.aktionen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--raum-4) var(--raum-5);
}

kbd {
  display: inline-block;
  padding: 0.05em 0.4em 0.1em;
  border: 1px solid #b9c1bd;
  border-radius: 5px;
  background: var(--papier);
  box-shadow: 0 2px 0 #b9c1bd;
  font-size: 0.85em;
  font-weight: 600;
  line-height: 1.3;
}

/* =========================================================================
   Kopf
   ========================================================================= */

.kopf {
  padding-block: var(--raum-4);
}

.kopf__innen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--raum-3) var(--raum-5);
}

.marke {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--tinte);
  text-decoration: none;
}

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

.marke__zeichen {
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  fill: var(--signal);
}

.marke__name {
  font-family: var(--schrift-titel);
  font-size: 1.375rem;
  font-weight: 760;
  font-stretch: 108%;
  line-height: 1;
  letter-spacing: -0.01em;
}

.knopf--kopf {
  min-height: 2.5rem;
  margin-left: auto;
  padding: 0 1rem;
  font-size: var(--groesse-klein);
}

.kopf__navigation {
  flex-basis: 100%;
  order: 3;
}

.kopf__navigation ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--raum-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.kopf__navigation a {
  display: inline-block;
  padding-block: 0.375rem;
  font-size: var(--groesse-klein);
  font-weight: 600;
  text-decoration: none;
}

.kopf__navigation a:hover {
  color: var(--tinte);
  text-decoration: underline;
  text-decoration-color: var(--signal);
  text-decoration-thickness: 2px;
}

@media (min-width: 56rem) {
  .kopf {
    padding-block: var(--raum-5);
  }

  .kopf__navigation {
    flex-basis: auto;
    order: 0;
    margin-left: auto;
  }

  .kopf__navigation ul {
    gap: var(--raum-6);
  }

  .knopf--kopf {
    margin-left: var(--raum-3);
  }
}

/* =========================================================================
   Bühne
   ========================================================================= */

.buehne {
  padding-block: clamp(1.5rem, 1rem + 3vw, 4rem) var(--abschnitt-abstand);
}

.buehne__raster {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--raum-7);
  align-items: start;
}

@media (min-width: 64rem) {
  .buehne__raster {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
    gap: clamp(2.5rem, 5vw, 5rem);
  }

  .buehne__text {
    padding-top: var(--raum-6);
  }
}

.buehne__titel {
  margin-bottom: var(--raum-6);
  font-family: var(--schrift-titel);
  font-size: var(--groesse-h1);
  font-weight: 760;
  font-stretch: 112%;
  line-height: 0.98;
  letter-spacing: -0.02em;
}

.buehne__schritt {
  display: block;
  transition: color 200ms ease;
}

/* Die Vorführung markiert, welcher Schritt gerade dran ist */
.buehne__schritt--aktiv {
  color: var(--signal);
}

.buehne__lead {
  max-width: 30ch;
  margin-bottom: var(--raum-4);
  font-size: var(--groesse-lead);
  line-height: 1.45;
}

.buehne__absatz {
  max-width: 40ch;
  color: var(--tinte-sanft);
}

.buehne__text .aktionen {
  margin-top: var(--raum-6);
}

.buehne__fuss {
  margin-top: var(--raum-6);
  color: var(--tinte-sanft);
  font-size: var(--groesse-klein);
}

/* =========================================================================
   Vorführung
   ========================================================================= */

.vorfuehrung {
  position: relative;
}

.vorfuehrung__kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--raum-3);
  margin-bottom: var(--raum-3);
}

.vorfuehrung__titel {
  color: var(--tinte-sanft);
  font-family: var(--schrift-mono);
  font-size: var(--groesse-etikett);
  font-weight: 600;
}

.beispielwahl {
  display: inline-flex;
  gap: 2px;
  margin: 0;
  padding: 3px;
  border: 0;
  border-radius: 9px;
  background: var(--grund-tief);
}

.beispielwahl__eintrag {
  position: relative;
}

.beispielwahl__eintrag input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.beispielwahl__eintrag span {
  display: block;
  padding: 0.375rem 0.875rem;
  border-radius: 6px;
  color: var(--tinte-sanft);
  font-size: 0.875rem;
  font-weight: 600;
  transition: background-color 150ms ease, color 150ms ease;
}

.beispielwahl__eintrag input:hover + span {
  color: var(--tinte);
}

.beispielwahl__eintrag input:checked + span {
  background: var(--papier);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.14);
  color: var(--tinte);
}

.beispielwahl__eintrag input:focus-visible + span {
  outline: 3px solid var(--signal);
  outline-offset: 1px;
}

/* Der Bildschirm mit Fenster und schwebendem Knopf */
.schreibtisch {
  position: relative;
  padding: clamp(0.875rem, 2.5vw, 1.5rem) clamp(0.875rem, 2.5vw, 1.5rem) 6rem;
  border-radius: var(--radius-gross);
  background: var(--grund-tief);
}

.fenster {
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--papier);
  box-shadow: var(--schatten-fenster);
}

.fenster__leiste {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--raum-3);
  height: 2.25rem;
  padding: 0 0.875rem;
  border-bottom: 1px solid var(--linie-papier);
  background: #f4f6f5;
  color: var(--tinte-sanft);
  font-size: var(--groesse-etikett);
  font-weight: 600;
}

.fenster__steuerung {
  display: inline-flex;
  align-items: center;
  gap: 1.125rem;
  color: #6d7479;
}

.fenster__steuerung i {
  display: block;
  width: 10px;
  height: 10px;
}

.fenster__steuerung i:nth-child(1) {
  height: 1px;
  background: currentColor;
}

.fenster__steuerung i:nth-child(2) {
  border: 1px solid currentColor;
  border-radius: 1px;
}

.fenster__steuerung i:nth-child(3) {
  background:
    linear-gradient(45deg, transparent calc(50% - 0.6px), currentColor calc(50% - 0.6px) calc(50% + 0.6px), transparent calc(50% + 0.6px)),
    linear-gradient(-45deg, transparent calc(50% - 0.6px), currentColor calc(50% - 0.6px) calc(50% + 0.6px), transparent calc(50% + 0.6px));
}

.fenster__blatt {
  height: clamp(11rem, 9rem + 6vw, 14.5rem);
  padding: 1.125rem 1.375rem 1.5rem;
  overflow-y: auto;
  font-size: 1rem;
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.schreibmarke {
  display: inline-block;
  width: 2px;
  height: 1.2em;
  margin-left: 1px;
  vertical-align: -0.22em;
  background: var(--tinte);
  animation: blinken 1.1s steps(1, end) infinite;
}

@keyframes blinken {
  50% {
    opacity: 0;
  }
}

/* Frisch eingefügter Text leuchtet kurz auf */
.eingefuegt {
  border-radius: 3px;
  background: transparent;
  color: inherit;
  animation: eingefuegt 1.8s ease-out;
}

@keyframes eingefuegt {
  from {
    background: var(--signal-sanft);
  }
  to {
    background: transparent;
  }
}

/* Der schwebende Knopf – Form und Farben wie im Programm */
.schwebeknopf {
  position: absolute;
  bottom: 1.25rem;
  left: 50%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  padding: 0;
  overflow: hidden;
  border: 1px solid #cdd3d0;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 8px 20px -8px rgb(0 0 0 / 0.4);
  transform: translateX(-50%);
  cursor: pointer;
  transition: width 240ms var(--kurve), border-color 150ms ease;
}

.schwebeknopf:hover {
  border-color: #9fa8a4;
}

.vorfuehrung[data-zustand="aufnahme"] .schwebeknopf {
  width: 10.5rem;
}

.schwebeknopf__balken {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  height: 1.75rem;
}

.schwebeknopf__balken i {
  display: block;
  flex: none;
  width: 3px;
  height: calc(3px + var(--h, 0) * 25px);
  border-radius: 2px;
  background: var(--signal);
}

/* Ruhe und Verarbeitung: graue Balken in fester Höhe */
.vorfuehrung:not([data-zustand="aufnahme"]) .schwebeknopf__balken i {
  height: calc(4px + var(--ruhe, 0) * 20px);
  background: var(--balken-ruhe);
}

.vorfuehrung:not([data-zustand="aufnahme"]) .schwebeknopf__balken i:nth-child(-n + 4),
.vorfuehrung:not([data-zustand="aufnahme"]) .schwebeknopf__balken i:nth-child(n + 12) {
  display: none;
}

.vorfuehrung[data-zustand="verarbeitung"] .schwebeknopf__balken i:nth-child(5),
.vorfuehrung[data-zustand="verarbeitung"] .schwebeknopf__balken i:nth-child(11) {
  display: none;
}

.vorfuehrung[data-zustand="verarbeitung"] .schwebeknopf__balken {
  animation: pulsieren 1.1s ease-in-out infinite;
}

.schwebeknopf__balken i:nth-child(5),
.schwebeknopf__balken i:nth-child(11) {
  --ruhe: 0.3;
}

.schwebeknopf__balken i:nth-child(6),
.schwebeknopf__balken i:nth-child(10) {
  --ruhe: 0.55;
}

.schwebeknopf__balken i:nth-child(7),
.schwebeknopf__balken i:nth-child(9) {
  --ruhe: 0.82;
}

.schwebeknopf__balken i:nth-child(8) {
  --ruhe: 1;
}

@keyframes pulsieren {
  50% {
    opacity: 0.35;
  }
}

/* Taste, Hinweis und Mitschrift */
.bedienung {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "taste hinweis"
    "mitschrift mitschrift";
  align-items: center;
  gap: var(--raum-4) var(--raum-5);
  margin-top: var(--raum-5);
}

@media (min-width: 40rem) {
  .bedienung {
    grid-template-areas:
      "taste hinweis"
      "taste mitschrift";
    align-items: start;
  }
}

.bedienung__text {
  display: contents;
}

.taste {
  grid-area: taste;
  padding: 0 0 0.5rem;
  border: 0;
  background: none;
  cursor: pointer;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

.taste:focus-visible {
  outline: none;
}

.taste:focus-visible .taste__kappe {
  outline: 3px solid var(--signal);
  outline-offset: 5px;
}

.taste__kappe {
  position: relative;
  display: block;
  width: 7.5rem;
  height: 5.25rem;
  border-radius: 12px;
  background: linear-gradient(180deg, #3a4045 0%, #2b3034 45%, #23272b 100%);
  box-shadow:
    0 7px 0 var(--kappe-flanke),
    0 14px 24px -8px rgb(0 0 0 / 0.5),
    inset 0 1px 0 rgb(255 255 255 / 0.14);
  transition: transform 60ms ease, box-shadow 60ms ease;
}

/* Die Mulde, in der der Finger liegt */
.taste__kappe::before {
  position: absolute;
  inset: 6px 7px 9px;
  border-radius: 9px;
  background: radial-gradient(120% 90% at 50% 40%, rgb(255 255 255 / 0.07), transparent 70%);
  box-shadow: inset 0 2px 3px rgb(0 0 0 / 0.25), inset 0 -1px 0 rgb(255 255 255 / 0.05);
  content: "";
}

.taste__beschriftung {
  position: absolute;
  top: 0.75rem;
  left: 1rem;
  color: #f1f2f0;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1;
}

.taste:active .taste__kappe,
.taste--gedrueckt .taste__kappe {
  box-shadow:
    0 1px 0 var(--kappe-flanke),
    0 4px 10px -4px rgb(0 0 0 / 0.45),
    inset 0 1px 0 rgb(255 255 255 / 0.1);
  transform: translateY(6px);
}

.bedienung__hinweis {
  grid-area: hinweis;
  min-height: 3.2em;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.6;
}

/* Platz ist reserviert, damit nichts springt, wenn die Wörter kommen */
.mitschrift {
  grid-area: mitschrift;
  min-height: 4.5em;
  font-family: var(--schrift-mono);
  font-size: var(--groesse-klein);
  line-height: 1.5;
}

.mitschrift .etikett {
  display: inline;
  margin-right: 0.25rem;
}

.mitschrift:has(.mitschrift__woerter:empty) .etikett {
  visibility: hidden;
}

/* Ein gesprochenes Befehlswort */
.befehl {
  padding: 0 0.25em;
  border-radius: 4px;
  background: rgb(190 21 34 / 0.09);
  color: var(--signal-dunkel);
  font-family: var(--schrift-mono);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.vorfuehrung__vermerk {
  margin-top: var(--raum-4);
  color: var(--tinte-sanft);
  font-size: var(--groesse-etikett);
}

/* Ohne JavaScript bleibt ein ruhendes Beispiel stehen */
.ohne-js .beispielwahl,
.ohne-js .bedienung,
.ohne-js .vorfuehrung__vermerk,
.ohne-js .schwebeknopf {
  display: none;
}

.ohne-js .schreibtisch {
  padding-bottom: clamp(0.875rem, 2.5vw, 1.5rem);
}

/* =========================================================================
   Abschnitte
   ========================================================================= */

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

/* Papier: Themen rund um Text */
.abschnitt--papier {
  --flaeche: #eef1f0;
  background: var(--papier);
}

/* Zwei graue Abschnitte hintereinander: eine Linie statt doppeltem Abstand */
.buehne + .abschnitt:not(.abschnitt--papier),
.abschnitt:not(.abschnitt--papier) + .abschnitt:not(.abschnitt--papier) {
  padding-top: 0;
}

.buehne + .abschnitt:not(.abschnitt--papier) > .rahmen,
.abschnitt:not(.abschnitt--papier) + .abschnitt:not(.abschnitt--papier) > .rahmen {
  padding-top: var(--abschnitt-abstand);
  border-top: 1px solid var(--linie);
}

.abschnitt__kopf {
  max-width: 44rem;
  margin-bottom: var(--raum-7);
}

.abschnitt__kopf h2,
.kontakt__text h2 {
  margin-bottom: var(--raum-4);
  font-family: var(--schrift-titel);
  font-size: var(--groesse-h2);
  font-weight: 740;
  font-stretch: 110%;
  line-height: 1.04;
  letter-spacing: -0.015em;
}

.abschnitt__kopf p {
  max-width: 60ch;
  font-size: 1.125rem;
}

.abschnitt__kopf p + p {
  margin-top: var(--raum-4);
}

.abschnitt__kopf--spalte {
  margin-bottom: 0;
}

.zwischentitel {
  margin-bottom: var(--raum-4);
  font-family: var(--schrift-titel);
  font-size: var(--groesse-zwischen);
  font-weight: 720;
  font-stretch: 106%;
  line-height: 1.2;
}

.raster-zwei {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--raum-7);
  align-items: start;
}

@media (min-width: 64rem) {
  .raster-zwei {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(3rem, 6vw, 6rem);
  }
}

/* ---------- Ablauf: Filmstreifen der Knopfzustände ---------- */

.filmstreifen {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--raum-6);
  padding: 0;
  list-style: none;
}

@media (min-width: 40rem) {
  .filmstreifen {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--raum-6) var(--raum-5);
  }
}

@media (min-width: 64rem) {
  /* Die Szenen stoßen aneinander wie Bilder auf einem Streifen */
  .filmstreifen {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
  }

  .bild__titel,
  .bild p {
    padding-right: var(--raum-5);
  }

  .bild .bild__szene {
    border-radius: 0;
  }

  .bild:first-child .bild__szene {
    border-radius: var(--radius-gross) 0 0 var(--radius-gross);
  }

  .bild:last-child .bild__szene {
    border-radius: 0 var(--radius-gross) var(--radius-gross) 0;
  }

  .bild:not(:last-child) .bild__szene {
    box-shadow: inset -1px 0 0 rgb(0 0 0 / 0.08);
  }
}

.bild__szene {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  place-items: center;
  height: 8.5rem;
  padding-inline: var(--raum-4);
  border-radius: var(--radius-gross);
  background: var(--grund-tief);
}

.bild__titel {
  display: flex;
  align-items: baseline;
  gap: 0.625rem;
  margin: var(--raum-4) 0 var(--raum-2);
  font-family: var(--schrift-titel);
  font-size: 1.25rem;
  font-weight: 720;
  font-stretch: 106%;
  line-height: 1.2;
}

.bild__nr {
  color: var(--signal);
  font-family: var(--schrift-mono);
  font-size: var(--groesse-etikett);
  font-weight: 700;
}

.bild p {
  font-size: var(--groesse-klein);
}

.knopfbild {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: 3.25rem;
  height: 3.25rem;
  border: 1px solid #cdd3d0;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 8px 18px -8px rgb(0 0 0 / 0.35);
}

.knopfbild i {
  display: block;
  flex: none;
  width: 3px;
  height: calc(4px + var(--b, 0) * 20px);
  border-radius: 2px;
  background: var(--balken-ruhe);
}

.knopfbild[data-stand="aufnahme"] {
  width: 9.75rem;
}

.knopfbild[data-stand="aufnahme"] i {
  height: calc(3px + var(--b, 0) * 24px);
  background: var(--signal);
}

.knopfbild[data-stand="verarbeitung"] i {
  animation: pulsieren 1.1s ease-in-out infinite;
}

.knopfbild[data-stand="bereit"] i:nth-child(1),
.knopfbild[data-stand="bereit"] i:nth-child(7) { --b: 0.3; }
.knopfbild[data-stand="bereit"] i:nth-child(2),
.knopfbild[data-stand="bereit"] i:nth-child(6) { --b: 0.55; }
.knopfbild[data-stand="bereit"] i:nth-child(3),
.knopfbild[data-stand="bereit"] i:nth-child(5) { --b: 0.82; }
.knopfbild[data-stand="bereit"] i:nth-child(4) { --b: 1; }

.knopfbild[data-stand="aufnahme"] i:nth-child(1) { --b: 0.5; }
.knopfbild[data-stand="aufnahme"] i:nth-child(2) { --b: 0.78; }
.knopfbild[data-stand="aufnahme"] i:nth-child(3) { --b: 0.95; }
.knopfbild[data-stand="aufnahme"] i:nth-child(4) { --b: 0.66; }
.knopfbild[data-stand="aufnahme"] i:nth-child(5) { --b: 1; }
.knopfbild[data-stand="aufnahme"] i:nth-child(6) { --b: 0.84; }
.knopfbild[data-stand="aufnahme"] i:nth-child(7) { --b: 0.62; }
.knopfbild[data-stand="aufnahme"] i:nth-child(8) { --b: 0.74; }
.knopfbild[data-stand="aufnahme"] i:nth-child(9) { --b: 0.5; }
.knopfbild[data-stand="aufnahme"] i:nth-child(10) { --b: 0.4; }
.knopfbild[data-stand="aufnahme"] i:nth-child(11) { --b: 0.33; }
.knopfbild[data-stand="aufnahme"] i:nth-child(12) { --b: 0.22; }
.knopfbild[data-stand="aufnahme"] i:nth-child(13) { --b: 0.12; }
.knopfbild[data-stand="aufnahme"] i:nth-child(14) { --b: 0.05; }
.knopfbild[data-stand="aufnahme"] i:nth-child(15) { --b: 0; }
.knopfbild[data-stand="aufnahme"] i:nth-child(16) { --b: 0; }

.knopfbild[data-stand="verarbeitung"] i:nth-child(1) { --b: 0.35; }
.knopfbild[data-stand="verarbeitung"] i:nth-child(2) { --b: 0.7; }
.knopfbild[data-stand="verarbeitung"] i:nth-child(3) { --b: 1; }
.knopfbild[data-stand="verarbeitung"] i:nth-child(4) { --b: 0.6; }
.knopfbild[data-stand="verarbeitung"] i:nth-child(5) { --b: 0.3; }

.textprobe {
  display: inline-block;
  max-width: 100%;
  padding: 0.625rem 0.875rem;
  overflow: hidden;
  border-radius: 8px;
  background: var(--papier);
  box-shadow: var(--schatten-fenster);
  font-size: var(--groesse-klein);
  white-space: nowrap;
}

/* ---------- Ablauf: wie der Text ankommt ---------- */

.ankunft {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--raum-7);
  align-items: center;
  margin-top: clamp(4rem, 3rem + 4vw, 6.5rem);
}

@media (min-width: 64rem) {
  .ankunft {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: clamp(3rem, 6vw, 6rem);
  }
}

.modi__eintrag {
  padding-block: var(--raum-4);
  border-top: 1px solid var(--linie);
}

.modi__eintrag:last-child {
  border-bottom: 1px solid var(--linie);
}

.modi dt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--raum-2) var(--raum-3);
  font-weight: 700;
}

.modi dd {
  margin-top: var(--raum-1);
}

/* Hinweis unter den Einfügearten */
.ankunft__zusatz {
  margin-top: var(--raum-4);
  color: var(--tinte-sanft);
  font-size: var(--groesse-klein);
}

.ankunft__zusatz strong {
  color: var(--tinte);
}

.plakette {
  display: inline-block;
  padding: 0.125rem 0.5rem;
  border: 1px solid var(--linie);
  border-radius: 999px;
  background: var(--papier);
  color: var(--tinte-sanft);
  font-family: var(--schrift-mono);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.4;
}

.diktierfeld__fenster {
  padding: 1.125rem;
  border-radius: var(--radius-gross);
  background: var(--papier);
  box-shadow: var(--schatten-fenster);
}

.diktierfeld__hinweis {
  margin-bottom: 0.625rem;
  color: var(--tinte-sanft);
  font-size: var(--groesse-etikett);
}

.diktierfeld__feld {
  min-height: 8.5rem;
  padding: 0.875rem 1rem;
  border: 2px solid var(--signal);
  border-radius: var(--radius);
  font-size: 1rem;
  line-height: 1.55;
}

.diktierfeld__knoepfe {
  display: flex;
  justify-content: flex-end;
  gap: 0.625rem;
  margin-top: 0.875rem;
}

.attrappe {
  display: inline-flex;
  align-items: center;
  height: 2.5rem;
  padding: 0 1rem;
  border: 1px solid #cdd3d0;
  border-radius: var(--radius);
  background: #fff;
  font-size: var(--groesse-klein);
  font-weight: 700;
}

.attrappe--haupt {
  border-color: var(--signal);
  background: var(--signal);
  color: #fff;
}

.diktierfeld figcaption {
  margin-top: var(--raum-3);
  color: var(--tinte-sanft);
  font-size: var(--groesse-etikett);
}

/* ---------- Satzzeichen ---------- */

.umwandlung {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--raum-3) var(--raum-7);
  padding-block: var(--raum-5);
  border-top: 1px solid var(--linie-papier);
}

.umwandlung:last-child {
  border-bottom: 1px solid var(--linie-papier);
}

@media (min-width: 56rem) {
  .umwandlung {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
  }
}

.umwandlung .etikett {
  margin-bottom: var(--raum-2);
}

.umwandlung__gesprochen {
  color: var(--tinte-sanft);
  font-family: var(--schrift-mono);
  font-size: var(--groesse-klein);
  line-height: 1.75;
}

.umwandlung__geschrieben {
  font-size: 1.25rem;
  line-height: 1.5;
}

.zeichen {
  color: var(--signal);
  font-weight: 800;
}

.umwandlung__notiz {
  grid-column: 1 / -1;
  color: var(--tinte-sanft);
  font-size: var(--groesse-klein);
}

.satzzeichen__raster {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--raum-7);
  margin-top: var(--raum-8);
}

@media (min-width: 64rem) {
  .satzzeichen__raster {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: clamp(3rem, 6vw, 6rem);
  }
}

.befehlstafel {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  gap: var(--raum-2);
}

.befehlstafel > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--raum-3);
  min-height: 3rem;
  padding: 0.5rem 0.875rem;
  border-radius: 8px;
  background: var(--flaeche);
}

.befehlstafel dt {
  font-size: var(--groesse-klein);
  line-height: 1.3;
}

.befehlstafel dd {
  color: var(--signal);
  font-family: var(--schrift-mono);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
}

.befehlstafel dd.befehlstafel__wort {
  color: var(--tinte-sanft);
  font-family: var(--schrift-text);
  font-size: var(--groesse-etikett);
  font-weight: 600;
}

/* Umbrüche haben kein sichtbares Zeichen: Befehl und Wirkung untereinander */
.befehlstafel > div:has(> .befehlstafel__wort) {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0.125rem;
}

.regeln {
  display: grid;
  gap: var(--raum-5);
  padding: 0;
  list-style: none;
}

.regeln strong {
  display: block;
  margin-bottom: var(--raum-1);
}

/* ---------- Ihre Daten ---------- */

.tabellenrahmen {
  overflow-x: auto;
  border-radius: var(--radius-gross);
  background: var(--papier);
}

.datentabelle {
  width: 100%;
  border-collapse: collapse;
}

.datentabelle th,
.datentabelle td {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--linie-papier);
  text-align: left;
  vertical-align: top;
}

.datentabelle thead th {
  padding-block: 0.75rem;
  color: var(--tinte-sanft);
  font-family: var(--schrift-mono);
  font-size: var(--groesse-etikett);
  font-weight: 600;
}

.datentabelle tbody tr:last-child > * {
  border-bottom: 0;
}

.datentabelle tbody th {
  width: 17%;
  font-weight: 700;
}

.datentabelle tbody td:nth-of-type(1) {
  width: 27%;
}

/* Schmal: jede Zeile als Block, Spaltennamen vor den Werten */
@media (max-width: 47.99rem) {
  .datentabelle thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .datentabelle,
  .datentabelle tbody,
  .datentabelle tr,
  .datentabelle th,
  .datentabelle td {
    display: block;
    width: auto;
  }

  .datentabelle tbody tr {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--linie-papier);
  }

  .datentabelle tbody tr:last-child {
    border-bottom: 0;
  }

  .datentabelle tbody th,
  .datentabelle tbody td {
    padding: 0;
    border: 0;
  }

  .datentabelle tbody th {
    width: auto;
    margin-bottom: 0.375rem;
  }

  .datentabelle tbody td:nth-of-type(1) {
    width: auto;
  }

  .datentabelle tbody td + td {
    margin-top: 0.375rem;
  }

  .datentabelle tbody td::before {
    color: var(--tinte-sanft);
    font-weight: 600;
    content: attr(data-titel) ": ";
  }
}

.grenze {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--raum-4);
  margin-top: var(--raum-5);
}

@media (min-width: 64rem) {
  .grenze {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  }
}

/* Gestrichelte Linie: die Grenze des eigenen Rechners */
.grenze__innen {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--raum-5);
  border: 2px dashed #8f9995;
  border-radius: var(--radius-gross);
  background: var(--papier);
}

.grenze__weg {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--raum-2);
  margin-block: var(--raum-3);
  padding: 0;
  font-size: 1.125rem;
  font-weight: 700;
  list-style: none;
}

.grenze__weg li:not(:last-child)::after {
  margin-left: var(--raum-2);
  color: var(--signal);
  content: "›";
}

.grenze__satz {
  color: var(--tinte-sanft);
}

.grenze__aussen {
  padding: var(--raum-5);
  border: 1px solid var(--linie);
  border-radius: var(--radius-gross);
}

.grenze__liste {
  display: grid;
  gap: var(--raum-3);
  margin-top: var(--raum-3);
  padding: 0;
  list-style: none;
}

/* ---------- Fachvokabular ---------- */

.dateien {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--raum-4);
}

@media (min-width: 36rem) {
  .dateien {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.datei {
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--flaeche);
}

.datei--eigen {
  background: var(--papier);
  box-shadow: inset 0 0 0 1px #d6dcd9;
}

.datei__kopf {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--raum-1) var(--raum-3);
  padding: 0.625rem 0.875rem;
  border-bottom: 1px solid rgb(0 0 0 / 0.08);
  font-size: var(--groesse-etikett);
  font-weight: 700;
}

.datei__kopf span {
  color: var(--tinte-sanft);
  font-weight: 400;
}

.datei__inhalt {
  margin: 0;
  padding: 0.875rem;
  overflow-x: auto;
  font-size: var(--groesse-klein);
  line-height: 1.75;
}

/* ---------- Für die IT ---------- */

.fakten__eintrag {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--raum-1) var(--raum-5);
  padding-block: var(--raum-4);
  border-top: 1px solid var(--linie);
}

.fakten__eintrag:last-child {
  border-bottom: 1px solid var(--linie);
}

@media (min-width: 40rem) {
  .fakten__eintrag {
    grid-template-columns: 10rem minmax(0, 1fr);
  }
}

.fakten dt {
  font-weight: 700;
}

/* ---------- Lizenz ---------- */

.voraussetzungen {
  padding: var(--raum-5) clamp(1.25rem, 3vw, 2rem);
  border-radius: var(--radius-gross);
  background: var(--papier);
}

.fakten--eng .fakten__eintrag {
  padding-block: var(--raum-3);
  border-color: var(--linie-papier);
}

.fakten--eng .fakten__eintrag:first-child {
  border-top: 0;
}

.fakten--eng .fakten__eintrag:last-child {
  border-bottom: 0;
}

@media (min-width: 40rem) {
  .fakten--eng .fakten__eintrag {
    grid-template-columns: 8rem minmax(0, 1fr);
  }
}

/* Anordnung: links Aussage und Umstieg, rechts Preisblatt und Voraussetzungen.
   Im Quelltext und am Handy folgt das Preisblatt direkt auf die Aussage. */
.lizenz {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--raum-6);
  align-items: start;
}

@media (min-width: 64rem) {
  /* Die mittlere Zeile nimmt die Höhe des Preisblatts auf, damit das Umstiegsangebot links
     direkt unter der Aussage steht */
  .lizenz {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto 1fr auto;
    column-gap: clamp(3rem, 6vw, 6rem);
  }

  .lizenz__kopf {
    grid-column: 1;
    grid-row: 1;
  }

  .lizenz__preis {
    grid-column: 2;
    grid-row: 1 / span 2;
  }

  .lizenz__umstieg {
    grid-column: 1;
    grid-row: 2;
  }

  .lizenz__voraussetzungen {
    grid-column: 2;
    grid-row: 3;
  }
}

/* Preisblatt: Posten wie auf einer Preisliste, Beträge rechtsbündig */
.preisblatt {
  padding: clamp(1.25rem, 3vw, 2rem);
  border-radius: var(--radius-gross);
  background: var(--papier);
}

.preisblatt__titel,
.preisblatt__etikett {
  color: var(--tinte-sanft);
  font-family: var(--schrift-text);
  font-size: var(--groesse-etikett);
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.4;
  text-transform: uppercase;
}

.preisblatt__posten {
  margin-top: var(--raum-2);
}

.preisblatt__zeile {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  column-gap: var(--raum-4);
  padding-block: var(--raum-4);
  border-bottom: 1px solid var(--linie-papier);
}

.preisblatt__zeile dt {
  font-weight: 700;
}

.preisblatt__zeile dt span {
  display: block;
  color: var(--tinte-sanft);
  font-size: var(--groesse-klein);
  font-weight: 400;
}

.preisblatt__zeile dd {
  font-family: var(--schrift-titel);
  font-size: clamp(1.75rem, 1.5rem + 1vw, 2.25rem);
  font-weight: 760;
  font-stretch: 110%;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.preisblatt__zeile--grund dd {
  font-size: clamp(2.5rem, 2rem + 2vw, 3.25rem);
}

.preisblatt__etikett--enthalten {
  margin-top: var(--raum-5);
}

.preisblatt__enthalten {
  display: grid;
  gap: var(--raum-2);
  margin-top: var(--raum-2);
  padding: 0;
  list-style: none;
}

.preisblatt__enthalten li {
  position: relative;
  padding-left: 1.625rem;
}

/* Haken aus zwei Linien in Tintenfarbe: Rot bleibt Signal */
.preisblatt__enthalten li::before {
  content: "";
  position: absolute;
  top: 0.45em;
  left: 0.25rem;
  width: 0.625rem;
  height: 0.3125rem;
  border-bottom: 2px solid var(--tinte);
  border-left: 2px solid var(--tinte);
  transform: rotate(-45deg);
}

.preisblatt__fuss {
  margin-top: var(--raum-5);
  padding-top: var(--raum-4);
  border-top: 1px solid var(--linie-papier);
  color: var(--tinte-sanft);
  font-size: var(--groesse-klein);
}

/* Umstiegsangebot: ruhig auf dem Grund, die Handlung ist der Knopf */
.umstieg {
  padding-top: var(--raum-5);
  border-top: 1px solid var(--linie);
}

.umstieg__titel {
  margin-bottom: var(--raum-2);
  font-family: var(--schrift-titel);
  font-size: var(--groesse-zwischen);
  font-weight: 720;
  font-stretch: 106%;
  line-height: 1.2;
}

.umstieg .knopf {
  margin-top: var(--raum-4);
}

/* ---------- Zeitersparnis ---------- */

.zeit {
  align-items: center;
}

.zeitvergleich {
  padding: var(--raum-5) clamp(1.25rem, 3vw, 2rem);
  border-radius: var(--radius-gross);
  background: var(--flaeche);
}

.zeitvergleich__titel {
  margin-bottom: var(--raum-3);
  font-weight: 700;
}

/* Schmal: Art und Dauer oben, Balken darunter; breit: alles in einer Zeile */
.zeitvergleich__zeile {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "art dauer"
    "spur spur";
  align-items: center;
  gap: var(--raum-2) var(--raum-4);
  padding-block: var(--raum-3);
}

@media (min-width: 40rem) {
  .zeitvergleich__zeile {
    grid-template-columns: 6.5rem minmax(0, 1fr) 8rem;
    grid-template-areas: "art spur dauer";
  }
}

.zeitvergleich__art {
  grid-area: art;
  font-weight: 600;
}

.zeitvergleich__spur {
  display: block;
  grid-area: spur;
}

.zeitvergleich__balken {
  display: block;
  height: 0.875rem;
  border-radius: 999px;
}

/* Die Balken stehen im Verhältnis der Zeiten: 2 zu 6 Minuten */
.zeitvergleich__balken--tippen {
  width: 100%;
  background: #9aa3a0;
}

.zeitvergleich__balken--sprechen {
  width: 33.3%;
  background: var(--signal);
}

.zeitvergleich__dauer {
  grid-area: dauer;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.zeitvergleich__ergebnis {
  margin-top: var(--raum-3);
  padding-top: var(--raum-4);
  border-top: 1px solid rgb(0 0 0 / 0.08);
  font-family: var(--schrift-titel);
  font-size: var(--groesse-zwischen);
  font-weight: 720;
  font-stretch: 106%;
  line-height: 1.25;
}

.zeitvergleich__notiz {
  margin-top: var(--raum-3);
  color: var(--tinte-sanft);
  font-size: var(--groesse-etikett);
}

/* ---------- Fragen ---------- */

@media (min-width: 64rem) {
  .fragen {
    column-gap: clamp(3rem, 6vw, 6rem);
    columns: 2;
  }
}

.fragen__eintrag {
  padding-block: var(--raum-5);
  border-top: 1px solid var(--linie);
  break-inside: avoid;
}

.fragen dt {
  margin-bottom: var(--raum-2);
  font-family: var(--schrift-titel);
  font-size: 1.1875rem;
  font-weight: 700;
  font-stretch: 104%;
  line-height: 1.3;
}

/* ---------- Kontakt ---------- */

.kontakt__blatt {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--raum-6);
  padding: clamp(1.5rem, 1rem + 3vw, 3.5rem);
  border-radius: 18px;
  background: var(--papier);
}

@media (min-width: 64rem) {
  .kontakt__blatt {
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    align-items: end;
  }
}

.kontakt__text p {
  max-width: 46ch;
  font-size: 1.125rem;
}

.kontakt__text .aktionen {
  margin-top: var(--raum-6);
}

.kontakt__anschrift {
  padding-left: var(--raum-5);
  border-left: 3px solid var(--signal);
  font-style: normal;
  line-height: 1.75;
}

/* =========================================================================
   Fuß
   ========================================================================= */

.fuss {
  padding-block: 0 var(--raum-7);
}

.fuss__innen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--raum-4) var(--raum-6);
  padding-top: var(--raum-6);
  border-top: 1px solid var(--linie);
  font-size: var(--groesse-klein);
}

.fuss__marke {
  display: flex;
  align-items: center;
  gap: var(--raum-2);
}

.fuss__marke .marke__zeichen {
  width: 1.125rem;
  height: 1.125rem;
}

.fuss__navigation ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--raum-2) var(--raum-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.fuss__navigation a {
  display: inline-block;
  padding-block: 0.25rem;
}

.fuss__navigation a[aria-current="page"] {
  font-weight: 700;
}

.fuss__klein {
  color: var(--tinte-sanft);
  font-size: 0.875rem;
}

/* =========================================================================
   Rechtstexte
   ========================================================================= */

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

.rechtstext h1 {
  margin-bottom: var(--raum-6);
  font-family: var(--schrift-titel);
  font-size: clamp(2.25rem, 1.6rem + 2.6vw, 3.5rem);
  font-weight: 760;
  font-stretch: 110%;
  line-height: 1.02;
  letter-spacing: -0.015em;
  hyphens: manual;
}

.rechtstext h2 {
  margin: var(--raum-6) 0 var(--raum-2);
  font-size: 1.1875rem;
  font-weight: 700;
  line-height: 1.3;
}

.rechtstext p,
.rechtstext ul,
.rechtstext address {
  max-width: 68ch;
}

.rechtstext p + p {
  margin-top: var(--raum-3);
}

.rechtstext ul {
  margin-block: var(--raum-2);
  padding-left: 1.25rem;
}

.rechtstext address {
  font-style: normal;
}

.rechtstext__vorspann {
  padding: var(--raum-4) var(--raum-5);
  border-radius: var(--radius-gross);
  background: var(--papier);
  font-size: 1.125rem;
}

/* Platzhalter, der vor der Veröffentlichung ersetzt werden muss */
.offen {
  padding: 0.625rem 0.875rem;
  border-left: 4px solid var(--signal);
  border-radius: 0 6px 6px 0;
  background: var(--signal-sanft);
  font-weight: 700;
}

.rechtstext__zurueck {
  margin-top: var(--raum-7);
}

/* =========================================================================
   Barrierefreiheit und Druck
   ========================================================================= */

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

  .schreibmarke {
    animation: none;
  }
}

/* Windows-Kontrastdesigns: Balken und Schreibmarke sichtbar halten */
@media (forced-colors: active) {
  .schwebeknopf__balken i,
  .knopfbild i,
  .schreibmarke {
    background: CanvasText;
    forced-color-adjust: none;
  }

  .taste__kappe,
  .knopf {
    border: 2px solid ButtonText;
  }
}

@media print {
  .sprunglink,
  .kopf__navigation,
  .knopf--kopf,
  .vorfuehrung {
    display: none;
  }

  body,
  .abschnitt--papier {
    background: #fff;
  }
}