/* ============================================================
   ConFlow — Website
   Gestaltung folgt der App (src/App.css): gleiche Farben,
   gleiche Schrift, gleiche Rundungen.
   Keine fremden Dienste: Schriften liegen lokal, keine Zaehler,
   keine eingebetteten Videos von Dritten -> kein Cookie-Banner.

   Aufbau: Die Seite besteht aus "Tafeln". Jede Tafel fuellt den
   Bildschirm, bleibt beim Scrollen stehen und wird von der
   naechsten von unten her ueberdeckt (position: sticky).
   Das sanfte Einrasten macht "einrasten.js".
   ============================================================ */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/inter/Inter-Variable.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2074, U+20AC, U+2122, U+2212;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/inter/Inter-Variable-LatinExt.woff2") format("woff2-variations");
  unicode-range: U+0100-024F, U+1E00-1EFF, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url("fonts/ibm-plex-sans/IBMPlexSans-Variable.woff2") format("woff2-variations");
}

:root {
  --font: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text", Helvetica, Arial, sans-serif;
  --font-button: "IBM Plex Sans", "Inter", -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;

  /* identisch mit der App */
  --bg: #ffffff;
  --bg-grau: #f5f5f7;
  --border: #e2e2e5;
  --text: #1d1d1f;
  --text-muted: #6e6e73;
  --accent: #0071e3;
  --accent-hover: #0077ed;
  --ok: #1d7a3d;

  --schatten: 0 1px 2px rgba(0, 0, 0, 0.04), 0 12px 32px rgba(0, 0, 0, 0.08);
  --schatten-tafel: 0 -18px 44px rgba(0, 0, 0, 0.10), 0 -1px 0 rgba(0, 0, 0, 0.06);
  --breite: 1120px;
  --radius: 12px;
  --kopfhoehe: 52px;

  /* Wie weit die naechste Tafel die aktuelle ueberdeckt, wenn beide
     zur Ruhe gekommen sind. Verkuerzt den Scrollweg je Tafel um
     denselben Betrag -- kostet aber Bildhoehe, und zwar rund das
     Anderthalbfache (Kopfzeile und Ueberschrift schrumpfen nicht mit).
     0vh = kein Ueberlappen. */
  --ueberlappung: 5vh;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #131314;
    --bg-grau: #1c1c1e;
    --border: #2e2e30;
    --text: #f5f5f7;
    --text-muted: #9a9a9e;
    --accent: #2997ff;
    --accent-hover: #47a3ff;
    --ok: #30d158;
    --schatten: 0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 32px rgba(0, 0, 0, 0.5);
    --schatten-tafel: 0 -18px 44px rgba(0, 0, 0, 0.55), 0 -1px 0 rgba(255, 255, 255, 0.06);
  }
}

* { box-sizing: border-box; }

/* Nur fuer Klicks auf die Kopfzeile. Das Scrollen selbst wird
   nirgends angefasst -- die Tafeln folgen genau der Eingabe. */
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.55;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); text-decoration: underline; }

.mitte { max-width: var(--breite); margin: 0 auto; padding: 0 24px; width: 100%; }
.schmal { max-width: 720px; }

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

.kopf {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: var(--kopfhoehe);
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--border);
}
.kopf .mitte {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  gap: 16px;
}
.wortmarke { font-weight: 650; font-size: 19px; letter-spacing: -0.01em; color: var(--text); }
.wortmarke:hover { text-decoration: none; }
.kopf nav { display: flex; align-items: center; gap: 28px; font-size: 14px; }
.kopf nav a { color: var(--text-muted); }
.kopf nav a:hover { color: var(--text); text-decoration: none; }

/* ---------- Schaltflaechen ---------- */

.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-button);
  font-size: 16px;
  font-weight: 500;
  padding: 12px 26px;
  border-radius: 980px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
  white-space: nowrap;
}
.knopf:hover { text-decoration: none; }
.knopf-voll { background: var(--accent); color: #fff; }
.knopf-voll:hover { background: var(--accent-hover); color: #fff; }
.knopf-leer { border-color: var(--border); color: var(--text); }
.knopf-leer:hover { border-color: var(--text-muted); color: var(--text); }

.knopfzeile { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ============================================================
   Der Tafelstapel
   ============================================================ */

.stapel { position: relative; }

.tafel {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--bg);
  border-radius: 22px 22px 0 0;
  box-shadow: var(--schatten-tafel);

  /* Der Aussenabstand nach unten ist negativ: Die naechste Tafel
     rueckt dadurch frueher nach. Der zusaetzliche Innenabstand
     unten haelt den Inhalt aus dem Bereich heraus, der spaeter
     verdeckt ist -- sonst saesse er nicht mehr mittig. */
  margin-bottom: calc(-1 * var(--ueberlappung));
  padding: calc(var(--kopfhoehe) + 28px) 0 calc(44px + var(--ueberlappung));
}
.tafel.grau { background: var(--bg-grau); }

/* Die erste Tafel wird von nichts ueberdeckt und braucht
   deshalb weder Rundung noch Schattenkante. */
.tafel:first-child { border-radius: 0; box-shadow: none; }

/* Die letzte Tafel ueberdeckt niemand -- sie bekommt ihre
   volle Hoehe zurueck. */
.tafel:last-child { margin-bottom: 0; padding-bottom: 44px; }

.tafel-inhalt {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  min-height: 0;
}

.tafel-text { max-width: 660px; margin: 0 auto; text-align: center; flex: 0 0 auto; }
.tafel-text.weit { max-width: 780px; }
.tafel-text h2 {
  font-size: clamp(28px, 3.6vw, 44px);
  line-height: 1.14;
  letter-spacing: -0.02em;
  font-weight: 660;
  margin: 0 0 14px;
}
.tafel-text p { font-size: clamp(16px, 1.5vw, 19px); color: var(--text-muted); margin: 0; }

.augenbraue {
  font-family: var(--font-button);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 12px;
}

.schritt-nummer {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-family: var(--font-button);
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 14px;
}

/* Bildbereich: nimmt den Rest der Tafel und schrumpft mit. */
.tafel-bild {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  margin-top: 26px;
}
.fenster {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--schatten);
  border: 1px solid var(--border);
  background: var(--bg);
  max-height: 100%;
  min-height: 0;
  display: flex;
}
.tafel-bild .fenster img { max-height: 100%; width: auto; object-fit: contain; }

/* Rechnung: das fertige PDF liegt als Blatt ueber dem Programmfenster.
   Nebeneinander waeren beide zu klein zum Erkennen. */
/* Gestapelte Blätter über dem Programmfenster. Der Platz rechts muss für ZWEI
   versetzte Blätter reichen, deshalb 14 % statt der früheren 7 %. */
.tafel-bild.ueberlagert { position: relative; padding-right: 14%; }
.blatt {
  position: absolute;
  right: 7%;
  bottom: 0;
  height: 78%;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: #fff;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.26);
  z-index: 2;
}
.blatt img { height: 100%; width: auto; max-height: none; }

/* Das obere Blatt: dieselbe Gestaltung, nur weiter nach rechts und nach oben
   versetzt, damit die Anlage als zweites Blatt hinter der Rechnung hervorsieht. */
.blatt-oben { right: 0; bottom: 16%; z-index: 3; }

/* Ein einzelnes Blatt, das fuer sich steht -- die E-Rechnung. Anders als `.blatt`
   liegt es nicht ueber einem Programmfenster, sondern allein in der Tafel. */
.blatt-einzeln {
  height: 100%;
  min-height: 0;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: #fff;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.18);
  display: flex;
}
/* Hoehe fuehrt, Breite folgt -- sonst zieht der Flexverbund das Blatt auf die
   volle Tafelbreite und die Seite steht als schmaler Streifen darin. */
.blatt-einzeln img { height: 100%; width: auto; max-height: none; }

@media (prefers-color-scheme: dark) {
  /* Die Bildschirmfotos sind hell. Im dunklen Modus wuerden sie
     blenden -- deshalb leicht abgesenkt, ohne sie zu verfaelschen. */
  .fenster img { filter: brightness(0.9); }
}

/* ---------- Aufmacher ---------- */

.tafel-aufmacher { text-align: center; }
.tafel-aufmacher h1 {
  font-size: clamp(40px, 6.4vw, 72px);
  line-height: 1.06;
  letter-spacing: -0.028em;
  font-weight: 680;
  margin: 0 0 22px;
}
.tafel-aufmacher .unterzeile {
  font-size: clamp(18px, 2.2vw, 22px);
  color: var(--text-muted);
  margin: 0 auto 34px;
  max-width: 640px;
  line-height: 1.5;
}
.kleingedrucktes { font-size: 14px; color: var(--text-muted); margin-top: 18px; }

/* Die beiden Abstaende darunter brauchen den Aufmacher als Vorsatz, sonst gewinnt
   `.tafel-text p { margin: 0 }` und beide Zeilen kleben aneinander. Aufgefallen erst,
   als am 11.08.2026 die Knopfzeile aus dem Aufmacher entfiel -- vorher hielten die
   Knoepfe die Zeilen ohnehin auseinander. */
.tafel-aufmacher .kleingedrucktes { margin-top: 18px; }
.tafel-aufmacher .hinweis-scrollen { margin-top: 44px; }

.hinweis-scrollen {
  margin-top: 44px;
  font-size: 13px;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}
.hinweis-scrollen span {
  display: block;
  margin: 10px auto 0;
  width: 18px;
  height: 18px;
  border-right: 1.5px solid var(--text-muted);
  border-bottom: 1.5px solid var(--text-muted);
  transform: rotate(45deg);
  animation: wippen 2.2s ease-in-out infinite;
}
@keyframes wippen {
  0%, 100% { transform: rotate(45deg) translate(0, 0); opacity: 0.5; }
  50%      { transform: rotate(45deg) translate(4px, 4px); opacity: 1; }
}

/* ---------- Karten (drei Spalten) ---------- */

.dreier { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 34px; }
.karte {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 26px;
  text-align: left;
}
.karte h3 { font-size: 20px; font-weight: 620; letter-spacing: -0.01em; margin: 0 0 10px; }
.karte p { margin: 0; color: var(--text-muted); font-size: 15px; }
.karte .zeichen { font-size: 24px; line-height: 1; margin-bottom: 14px; display: block; }

/* ---------- Preis ---------- */

.preis-paar { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; max-width: 840px; margin: 32px auto 0; }
/* Solange es nur die jaehrliche Zahlweise gibt (Beschluss 17.08.2026), steht
   eine einzelne Karte mittig statt in halber Breite. Die Klasse kommt weg,
   sobald die monatliche Karte zurueckkehrt. */
.preis-paar.preis-einzeln { grid-template-columns: 1fr; max-width: 420px; }
.preis-karte {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 30px 28px;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  text-align: left;
}
.preis-karte.hervor { border-color: var(--accent); border-width: 2px; }
.preis-karte h3 {
  font-size: 14px;
  font-family: var(--font-button);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 12px;
}
.preis-karte.hervor h3 { color: var(--accent); }
.betrag { font-size: 36px; font-weight: 660; letter-spacing: -0.02em; line-height: 1.1; margin: 0 0 4px; }
.betrag-zusatz { color: var(--text-muted); font-size: 14px; margin: 0 0 20px; }
.preis-karte ul { list-style: none; padding: 0; margin: 0 0 24px; }
.preis-karte li { padding: 7px 0 7px 26px; position: relative; font-size: 15px; border-bottom: 1px solid var(--border); }
.preis-karte li:last-child { border-bottom: 0; }
.preis-karte li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 14px;
  width: 11px;
  height: 6px;
  border-left: 2px solid var(--ok);
  border-bottom: 2px solid var(--ok);
  transform: rotate(-45deg);
}
.preis-karte .knopf { margin-top: auto; }

/* Die Beruhigung unter den Karten: Was passiert, wenn die Lizenz auslaeuft.
   Bewusst klein und nuechtern -- es ist eine Antwort, kein Verkaufsargument. */
.preis-fussnote {
  max-width: 640px;
  margin: 22px auto 0;
  text-align: center;
  font-size: 14px;
  color: var(--text-muted);
  flex: 0 0 auto;
}

/* ---------- Platzhalter ---------- */

.platzhalter {
  background: repeating-linear-gradient(
    -45deg,
    color-mix(in srgb, var(--accent) 8%, transparent),
    color-mix(in srgb, var(--accent) 8%, transparent) 10px,
    transparent 10px,
    transparent 20px
  );
  border: 1px dashed var(--accent);
  border-radius: 8px;
  padding: 2px 10px;
  font-family: var(--font-button);
  font-size: 0.85em;
  font-weight: 500;
  color: var(--accent);
  display: inline-block;
}
/* Im Knopf traegt der Platzhalter weder Rahmen noch Schraffur -- der Knopf ist
   schon Flaeche genug. Die Farbe wird GEERBT und nicht auf Weiss gesetzt:
   `knopf-voll` faerbt seinen Text ohnehin weiss, `knopf-leer` dagegen dunkel.
   Fest eingetragenes Weiss ergab dort weissen Text auf weissem Grund -- also
   einen unsichtbaren Knopf. Aufgefallen am 16.08.2026 auf der Kaufseite, dem
   ersten hellen Knopf mit Platzhalter ueberhaupt. */
.knopf .platzhalter { border: 0; background: none; color: inherit; padding: 0; }

/* ---------- Voraussetzungen ---------- */

.fakten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  border-top: 1px solid var(--border);
  max-width: 880px;
  margin: 34px auto 0;
  text-align: left;
}
.fakt { padding: 18px 18px; border-bottom: 1px solid var(--border); }
.fakt dt {
  font-size: 12px;
  font-family: var(--font-button);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 5px;
}
.fakt dd { margin: 0; font-size: 16px; font-weight: 500; }

/* ---------- Fuss ---------- */

.fuss {
  position: relative;
  z-index: 1;
  background: var(--bg);
  border-top: 1px solid var(--border);
  padding: 40px 0;
  font-size: 14px;
  color: var(--text-muted);
}
.fuss .mitte { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
.fuss nav { display: flex; gap: 24px; }
.fuss a { color: var(--text-muted); }
.fuss a:hover { color: var(--text); }

/* ============================================================
   Kaufseite (kaufen.html)

   Eine gewoehnliche, durchlaufende Seite -- KEIN Tafelstapel.
   Wer hier landet, hat sich schon entschieden und will nicht
   durch neun Bildschirme scrollen, sondern bezahlen.

   Bewusst ohne eigene Farben und Schriften: alles kommt aus den
   Variablen oben, damit Startseite und Kaufseite nicht mit der
   Zeit auseinanderlaufen.
   ============================================================ */

body.kaufseite { padding-top: var(--kopfhoehe); }

.kauf-block { padding: 64px 0; border-top: 1px solid var(--border); }
.kauf-block:first-of-type { border-top: 0; }
.kauf-block.grau { background: var(--bg-grau); }

.kauf-kopf { text-align: center; max-width: 680px; margin: 0 auto; }
.kauf-kopf h1 {
  font-size: clamp(32px, 4.6vw, 52px);
  line-height: 1.08;
  letter-spacing: -0.025em;
  font-weight: 680;
  margin: 0 0 16px;
}
.kauf-kopf p { font-size: clamp(16px, 1.6vw, 19px); color: var(--text-muted); margin: 0; }

.kauf-block h2 {
  font-size: clamp(22px, 2.4vw, 30px);
  letter-spacing: -0.018em;
  font-weight: 660;
  margin: 0 0 8px;
  text-align: center;
}
.kauf-block > .mitte > .kauf-vorspann {
  text-align: center;
  color: var(--text-muted);
  margin: 0 auto 28px;
  max-width: 620px;
}

/* Die beiden Zahlweisen. Nutzt .preis-paar/.preis-karte der Startseite mit --
   eine zweite Definition derselben Karte waere genau die Doppelung, die spaeter
   auseinanderlaeuft. */
.zahlweise-marke {
  display: inline-block;
  font-family: var(--font-button);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ok);
  border: 1px solid var(--ok);
  border-radius: 980px;
  padding: 1px 9px;
  margin-left: 8px;
  vertical-align: 2px;
}

/* Merkmalsliste ausserhalb der Preiskarten -- gleicher Haken, gleiche Zeilen. */
.merkmale { list-style: none; padding: 0; margin: 0; }
.merkmale li { padding: 9px 0 9px 28px; position: relative; border-bottom: 1px solid var(--border); }
.merkmale li:last-child { border-bottom: 0; }
.merkmale li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 17px;
  width: 11px;
  height: 6px;
  border-left: 2px solid var(--ok);
  border-bottom: 2px solid var(--ok);
  transform: rotate(-45deg);
}
.merkmale .merkmal-was { font-weight: 550; }
.merkmale .merkmal-wozu { color: var(--text-muted); font-size: 15px; }

.zweispaltig { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 44px; max-width: 940px; margin: 0 auto; }

/* Schritte: nutzt .dreier/.karte der Startseite. Nur die Ziffer ist neu. */
.karte .schritt-ziffer {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-family: var(--font-button);
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 12px;
}

/* Fragen und Antworten */
.faq { max-width: 760px; margin: 0 auto; }
.faq-punkt { padding: 20px 0; border-bottom: 1px solid var(--border); }
.faq-punkt:last-child { border-bottom: 0; }
.faq-punkt h3 { font-size: 17px; font-weight: 620; margin: 0 0 6px; }
.faq-punkt p { margin: 0; color: var(--text-muted); font-size: 16px; }

.kauf-hinweis {
  max-width: 640px;
  margin: 24px auto 0;
  text-align: center;
  font-size: 14px;
  color: var(--text-muted);
}

@media (max-width: 900px) {
  .zweispaltig { grid-template-columns: 1fr; }
  .kauf-block { padding: 48px 0; }
}

/* ============================================================
   Rueckfallebene
   Auf schmalen oder sehr flachen Fenstern wird nicht gestapelt.
   Dann laeuft die Seite ganz normal untereinander weg -- sonst
   wuerde Inhalt abgeschnitten. Die Handy-Fassung bauen wir
   darauf auf.
   ============================================================ */

@media (max-width: 900px), (max-height: 640px) {
  .tafel {
    position: static;
    height: auto;
    min-height: 0;
    display: block;
    overflow: visible;
    border-radius: 0;
    box-shadow: none;
    border-top: 1px solid var(--border);
    margin-bottom: 0;
    padding: 72px 0;
  }
  .tafel:first-child { border-top: 0; padding-top: calc(var(--kopfhoehe) + 56px); }
  .tafel:last-child { padding-bottom: 72px; }
  .tafel-inhalt { display: block; height: auto; }
  .tafel-bild { display: block; margin-top: 28px; }
  .tafel-bild.ueberlagert { padding-right: 0; }
  .tafel-bild .fenster { max-height: none; margin-bottom: 20px; }
  .tafel-bild .fenster img { max-height: none; width: 100%; }
  .blatt { position: static; height: auto; width: 62%; margin: 0 auto; }
  .blatt-oben { margin-top: 18px; }
  .blatt img { height: auto; width: 100%; }
  .hinweis-scrollen { display: none; }
  .dreier, .preis-paar { grid-template-columns: 1fr; }
  .kopf nav { gap: 18px; font-size: 13px; }
  .kopf nav a.nur-breit { display: none; }
  .fuss .mitte { flex-direction: column; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}

/* ── Textseiten (Impressum, Datenschutz) ────────────────────────────────────
   Reine Schriftstuecke: eine schmale Spalte, linksbuendig, ohne Tafeln und
   ohne Bilder. Sie erben Farben und Schriften vom Rest der Seite, damit sie
   nicht wie ein Fremdkoerper wirken. */
.textseite { background: var(--bg); }
.schriftstueck { max-width: 720px; padding-top: 120px; padding-bottom: 96px; text-align: left; }
.schriftstueck h1 { font-size: clamp(30px, 4vw, 42px); letter-spacing: -0.02em; margin: 0 0 8px; }
.schriftstueck h2 { font-size: clamp(18px, 2vw, 21px); margin: 44px 0 10px; letter-spacing: -0.01em; }
.schriftstueck p, .schriftstueck li { font-size: 16px; line-height: 1.7; color: var(--text-muted); margin: 0 0 14px; }
.schriftstueck ul { padding-left: 22px; margin: 0 0 14px; }
.schriftstueck li { margin-bottom: 10px; }
.schriftstueck strong { color: var(--text); font-weight: 600; }