/*
 * FAMPOINTS — Website
 *
 * Folgt derselben Corporate Identity wie die App. Zwei Welten, eine Marke:
 * die Kinder-Welt ist violett und rund, die Eltern-Welt besteht aus Papier,
 * Linien und Fotos. Die Website spricht Eltern an — also Papier als Grundton,
 * das Violett nur dort, wo vom Spiel die Rede ist.
 *
 * Höchstens zwei Flächenfarben pro Abschnitt. Gold, Mint und Rosé sind
 * Akzente für Werte und Balken, niemals Hintergründe.
 */

/* Schriften liegen auf diesem Server. Kein Abruf bei Google: das wäre eine
   Verbindung des Besuchers zu einem Dritten, über die er nicht entscheiden
   kann — und auf einer Seite mit Datenschutzerklärung erst recht unpassend. */
@font-face {
  font-family: 'Figtree';
  src: url('fonts/Figtree.woff2') format('woff2-variations');
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Baloo 2';
  src: url('fonts/Baloo2.woff2') format('woff2-variations');
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Kinder-Welt */
  --kind-grund: #4b3f86;
  --kind-flaeche: #5a4d99;
  --kind-tief: #3c3173;
  --lila-akzent: #c4b5fd;
  --lila-text: #d8d1f5;

  /* Akzente — Werte, nie Flächen */
  --gold: #ffd166;
  --mint: #34d1bf;
  --rose: #ff8fa8;

  /* Eltern-Welt */
  --gruen: #2f5d50;
  --gruen-flaeche: #eaf1ec;
  --ocker: #b4552f;
  --papier: #f7f6f2;
  --papier-tief: #eceae4;
  --weiss: #ffffff;

  /* Text und Linien */
  --tinte: #16151b;
  --tinte-weich: #4b4956;
  --grau: #6d6b78;
  --grau-hell: #8b8898;
  --linie: #e7e5dd;
  --linie-fein: #f0efea;
  --linie-kraeftig: #d6d2c8;

  --radius: 14px;
  --radius-gross: 24px;
  --spalte: 1120px;
}

* { box-sizing: border-box; }

html { color-scheme: light; }

body {
  margin: 0;
  /* Kurze Seiten — die Meldungsseiten nach einem Bestätigungslink sind nur
     ein paar Zeilen lang — hörten sonst mitten im Bild auf, mit einer grauen
     Fläche darunter. Die Fußzeile gehört ans untere Ende des Fensters, auch
     wenn der Inhalt es nicht bis dorthin füllt. */
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--papier-tief);
  color: var(--tinte);
  font-family: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.huelle { max-width: var(--spalte); margin: 0 auto; padding: 0 22px; }
.eng { max-width: 680px; }

/* --- Wortmarke ----------------------------------------------------------
   Immer Versalien, ein Wort, Laufweite 0, ohne Satzzeichen. */
.wortmarke {
  font-family: 'Baloo 2', 'Figtree', sans-serif;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1;
  text-transform: uppercase;
}

/* --- Kopfzeile -----------------------------------------------------------
   Klebend, wie im Entwurf. Die Milchglas-Fläche braucht einen Rückfall auf
   eine deckende Farbe: backdrop-filter kennt nicht jeder Browser, und ohne
   Rückfall stünde die Schrift auf dem durchscheinenden Inhalt. */
.kopf {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--papier);
  border-bottom: 1px solid var(--linie);
}
@supports (backdrop-filter: blur(10px)) {
  .kopf {
    background: rgba(247, 246, 242, .92);
    backdrop-filter: blur(10px);
  }
}
.knopf.klein {
  min-height: 0;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--kind-grund);
  color: var(--weiss);
  font-size: 14px;
  font-weight: 700;
}
.knopf.klein:hover { background: var(--kind-tief); }
.kopf .huelle {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 72px;
  flex-wrap: wrap;
}
.kopf .marke { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; }
.kopf .wortmarke { font-size: 26px; color: var(--tinte); }
.kopf nav { margin-left: auto; display: flex; gap: 20px; flex-wrap: wrap; }
.kopf nav a {
  color: var(--tinte-weich);
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
}
.kopf nav a:hover { color: var(--gruen); text-decoration: underline; }

/* --- Zeichen ------------------------------------------------------------- */
.zeichen {
  width: 44px; height: 44px;
  border-radius: 11px;
  background: var(--kind-grund);
  display: grid; place-items: center;
  flex: 0 0 auto;
}

/* --- Abschnitte ---------------------------------------------------------- */
section { padding: 64px 0; }
section.hell { background: var(--papier); }
section.weiss { background: var(--weiss); }

.label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--grau-hell);
  margin: 0 0 12px;
}

h1 {
  font-size: clamp(34px, 6vw, 52px);
  line-height: 1.08;
  letter-spacing: -.02em;
  font-weight: 800;
  margin: 0 0 16px;
}
h2 {
  font-size: clamp(25px, 3.6vw, 34px);
  line-height: 1.15;
  letter-spacing: -.02em;
  font-weight: 700;
  margin: 0 0 14px;
}
h3 { font-size: 19px; font-weight: 700; margin: 0 0 6px; }
p { margin: 0 0 16px; color: var(--tinte-weich); text-wrap: pretty; }
p.gross { font-size: 19px; color: var(--grau); }
a { color: var(--gruen); }

/* --- Aufmacher ----------------------------------------------------------- */
.aufmacher {
  background: var(--kind-grund);
  color: var(--weiss);
  padding: 72px 0 80px;
}
.aufmacher h1 { color: var(--weiss); }
.aufmacher .claim {
  font-size: clamp(19px, 2.4vw, 23px);
  color: var(--lila-text);
  font-weight: 600;
  margin: 0 0 12px;
}
.aufmacher p { color: var(--lila-text); }
.aufmacher .wortmarke { font-size: clamp(46px, 9vw, 74px); color: var(--weiss); }
.aufmacher-raster {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
}
@media (max-width: 860px) {
  .aufmacher-raster { grid-template-columns: 1fr; gap: 36px; }
}

/* --- Schaltflächen ------------------------------------------------------- */
.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  padding: 13px 22px;
  border-radius: 12px;
  border: 1px solid transparent;
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.knopf.haupt { background: var(--gruen); color: var(--weiss); }
.knopf.haupt:hover { background: #24493f; }
.knopf.kind { background: var(--gold); color: #3b2a05; border-radius: 16px; }
.knopf.still {
  background: var(--weiss);
  color: var(--tinte);
  border-color: var(--linie-kraeftig);
}
.knopf.still:hover { border-color: var(--grau-hell); }
.knopf:disabled { opacity: .55; cursor: default; }
.knopf-reihe { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 22px; }

/* --- Karten -------------------------------------------------------------- */
.karten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 18px;
  margin-top: 28px;
}
.karte {
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: 22px 24px;
}
.karte p { margin: 0; font-size: 15.5px; }
.karte .nummer {
  width: 30px; height: 30px;
  border-radius: 9px;
  display: grid; place-items: center;
  font-size: 14px; font-weight: 800;
  color: var(--weiss);
  margin-bottom: 12px;
}
.karte .wer {
  display: inline-block;
  margin-top: 10px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--gruen);
}

/* --- Zwei Welten --------------------------------------------------------- */
.welten { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 22px; margin-top: 28px; }
.welt { border-radius: 20px; padding: 28px 30px; }
.welt.kind { background: var(--kind-grund); color: var(--weiss); }
.welt.kind h3 { font-family: 'Baloo 2', sans-serif; font-size: 26px; color: var(--weiss); }
.welt.kind .unterzeile { color: var(--lila-akzent); font-weight: 600; font-size: 15px; }
.welt.kind li { color: var(--weiss); }
.welt.eltern { background: var(--papier); border: 1px solid var(--linie); }
.welt.eltern h3 { font-size: 26px; letter-spacing: -.02em; }
.welt.eltern .unterzeile { color: var(--gruen); font-weight: 600; font-size: 15px; }
.welt ul { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 11px; }
.welt li { font-size: 15.5px; line-height: 1.5; color: var(--tinte-weich); }
.welt.kind hr, .welt.eltern hr { border: 0; border-top: 1px solid currentColor; opacity: .18; margin: 18px 0 0; }

/* --- Formulare ----------------------------------------------------------- */
.feld { display: block; margin-bottom: 18px; }
.feld > span {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--tinte-weich);
  margin-bottom: 6px;
}
.feld input {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  font-family: inherit;
  font-size: 16px;
  color: var(--tinte);
  background: var(--weiss);
  border: 1px solid var(--linie-kraeftig);
  border-radius: 10px;
}
.feld input:focus { outline: 2px solid var(--gruen); outline-offset: 1px; border-color: var(--gruen); }
.feld .hinweis { font-size: 13.5px; color: var(--grau-hell); margin-top: 6px; }

/* --- Meldungen ----------------------------------------------------------- */
.meldung {
  border-radius: var(--radius);
  padding: 18px 20px;
  margin: 0 0 24px;
  border: 1px solid;
}
.meldung h2 { margin: 0 0 6px; font-size: 21px; }
.meldung p:last-child { margin-bottom: 0; }
.meldung.gut { background: var(--gruen-flaeche); border-color: #c6dcd0; color: #1f423a; }
.meldung.gut h2 { color: #1f423a; }
.meldung.schlecht { background: #fdf6f2; border-color: #f0dcd0; color: #8a5a42; }
.meldung.schlecht h2 { color: var(--ocker); }

/* --- Inhaltsseiten ------------------------------------------------------- */
.inhalt { background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius-gross); padding: 40px; }
@media (max-width: 640px) { .inhalt { padding: 26px 22px; } }
.inhalt h2 { margin-top: 34px; font-size: 24px; }
.inhalt h2:first-of-type { margin-top: 0; }
.inhalt h3 { margin-top: 22px; }
.inhalt ul { padding-left: 22px; color: var(--tinte-weich); }
.inhalt li { margin-bottom: 8px; }
.inhalt table { width: 100%; border-collapse: collapse; margin: 16px 0 22px; font-size: 15.5px; }
.inhalt th, .inhalt td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--linie-fein); vertical-align: top; }
.inhalt th { color: var(--grau-hell); font-size: 13px; text-transform: uppercase; letter-spacing: .06em; }
.zu-fuellen {
  background: #fff8e6;
  border: 1px dashed #e0c36a;
  border-radius: 10px;
  padding: 14px 16px;
  margin: 0 0 22px;
  font-size: 15px;
  color: #6b551d;
}

/* --- Fußzeile ------------------------------------------------------------ */
/* Schiebt die Fußzeile nach unten, sobald darüber Platz bleibt.
   Der Hintergrund gehört an main und nicht an body: sonst endet die helle
   Fläche dort, wo der Abschnitt aufhört, und darunter steht ein grauer
   Streifen bis zur Fußzeile. */
main { flex: 1 0 auto; background: var(--papier); }
.fuss { flex: none; }

.fuss {
  background: var(--weiss);
  border-top: 1px solid var(--linie);
  padding: 34px 0;
  margin-top: 0;
}
.fuss .huelle { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; }
.fuss a { color: var(--tinte-weich); text-decoration: none; font-weight: 600; font-size: 15px; }
.fuss a:hover { color: var(--gruen); text-decoration: underline; }
.fuss .rechts { margin-left: auto; color: var(--grau-hell); font-size: 14px; }

/* --- Tastaturbedienung --------------------------------------------------- */
a:focus-visible, .knopf:focus-visible, button:focus-visible {
  outline: 2px solid var(--gruen);
  outline-offset: 2px;
}
.zum-inhalt {
  position: absolute;
  left: -9999px;
}
.zum-inhalt:focus {
  left: 12px; top: 12px;
  z-index: 10;
  background: var(--weiss);
  padding: 12px 18px;
  border-radius: 10px;
  border: 1px solid var(--gruen);
}

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

/* --- Vorschau des Begleiters im Aufmacher -------------------------------
   Eigene Klassen statt Stilangaben im HTML: die Content-Security-Policy
   verbietet style-Attribute (style-src 'self'), und das soll sie auch.
   Alles Gestalterische gehört ohnehin hierher. */
.kompi-schau { background: var(--kind-flaeche); }
.kompi-schau .werte { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 12px; }
.kompi-schau .werte li { display: flex; align-items: center; gap: 12px; }
.balken {
  flex: 1;
  height: 10px;
  border-radius: 99px;
  background: rgba(0, 0, 0, .22);
  overflow: hidden;
}
.balken i { display: block; height: 100%; }
.balken i.energie { width: 78%; background: var(--mint); }
.balken i.laune   { width: 64%; background: var(--rose); }
.balken i.hunger  { width: 41%; background: var(--gold); }
.balken-name {
  width: 64px;
  color: var(--lila-text);
  font-weight: 700;
  font-size: 14px;
}
.kompi-schau .spruch { margin: 18px 0 0; color: var(--lila-text); font-size: 15px; }

/* --- Nummern der sechs Schritte ------------------------------------------ */
.nummer.eltern { background: var(--gruen); }
.nummer.kind   { background: var(--kind-grund); }
.nummer.beide  { background: var(--tinte); }

/* --- Kleinigkeiten, die vorher im HTML standen --------------------------- */
p.gross { max-width: 760px; }
.mitte { text-align: center; }
.knopf-reihe.mitte { justify-content: center; }
.abstand-oben { margin-top: 24px; }
.knopf.gefahr { background: var(--ocker); color: var(--weiss); }
.knopf.gefahr:hover { background: #97441f; }
.leise { margin-top: 22px; font-size: 15px; color: var(--grau-hell); }

/* --- Geräterahmen --------------------------------------------------------
   Übernommen aus dem Entwurf: die Kinder-Ansicht sitzt in einem violetten
   Rahmen, die Eltern-Ansicht in einem dunklen. Das trennt die beiden Welten
   schon, bevor man den Inhalt gelesen hat. */
.geraet {
  border-radius: 34px;
  padding: 9px;
  width: 100%;
  max-width: 270px;
  flex: 0 0 auto;
}
.geraet.kind   { background: var(--kind-tief); box-shadow: 0 26px 50px rgba(60, 49, 115, .30); }
.geraet.eltern { background: #1f1e24;          box-shadow: 0 26px 50px rgba(31, 30, 36, .26); }
.geraet img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 26px;
}

/* --- Die beiden Geräte im Aufmacher --------------------------------------
   Das violette Kindergerät liegt hinten links, das dunkle Elterngerät schräg
   davor. Beide Maße in Prozent des Stapels, damit sie beim Schrumpfen ihr
   Verhältnis behalten — mit festen Pixelwerten würde das kleine Gerät auf dem
   Handy fast so groß wie das große.

   Der Stapel steht mittig in seiner Spalte. Vorher hieß die Regel dafür
   .aufmacher .geraet, der Abschnitt aber .aufmacher-hell — sie griff also
   nirgends, und das Gerät klebte am linken Rand seiner 478 Pixel breiten
   Spalte. */
.geraete-stapel {
  position: relative;
  width: 100%;
  max-width: 340px;
  margin: 0 auto;
  /* Platz für die Drehung, damit nichts über den Rand ragt und auf dem Handy
     eine waagerechte Bildlaufleiste erzeugt. */
  padding: 10px 6px 16px;
}
.geraete-stapel .geraet {
  max-width: none;
  margin: 0;
}
.geraete-stapel .geraet.kind {
  width: 71%;
  transform: rotate(-3deg);
}
.geraete-stapel .geraet.eltern {
  position: absolute;
  right: 6px;
  bottom: 16px;
  width: 45%;
  transform: rotate(7deg);
  z-index: 2;
}

@media (max-width: 860px) {
  /* Einspaltig steht der Stapel unter dem Text — dort mittig und etwas
     kleiner, damit der Aufmacher nicht den ganzen Bildschirm füllt. */
  .geraete-stapel { max-width: 340px; }
}

/* --- Bildergalerie ------------------------------------------------------- */
.galerie {
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 34px;
}
.galerie figure { margin: 0; max-width: 270px; }
.galerie figcaption {
  margin-top: 16px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--grau);
  text-align: center;
}
.galerie figcaption strong { display: block; color: var(--tinte); font-size: 16px; }

/* --- Schmale Bildschirme -------------------------------------------------
   Auf dem Handy passen Wortmarke und drei Verweise nicht in eine Zeile. Statt
   sie unschön umbrechen zu lassen, bekommt die Navigation eine eigene Zeile
   über die volle Breite. */
@media (max-width: 560px) {
  .kopf .huelle { min-height: 0; padding-top: 12px; padding-bottom: 10px; }
  .kopf .wortmarke { font-size: 20px; }
  .kopf nav { margin-left: auto; width: auto; gap: 14px; }
  .kopf nav a { font-size: 13.5px; }
  /* Die Handlungsaufforderung entfällt in der klebenden Leiste: sie steht im
     Aufmacher und bei den Preisen ohnehin, und drei Zeilen Kopf sind auf
     einem 812 px hohen Bildschirm zu viel für etwas, das immer mitläuft. */
  .kopf .knopf.klein { display: none; }
  section { padding: 48px 0; }
  .aufmacher { padding: 52px 0 60px; }
  .galerie { gap: 40px; }
}

/* =========================================================================
   Landingpage — Aufbau nach der Vorlage aus dem Entwurf
   ========================================================================= */

/* --- Merkzeichen über der Überschrift ------------------------------------ */
.merker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 999px;
  background: #eee9ff;
  border: 1px solid #d9d0f7;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--kind-grund);
}
.merker::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--kind-grund);
}

/* --- Aufmacher -----------------------------------------------------------
   Vorher stand er auf Papier: die Seite spricht Eltern an, und die Eltern-
   Welt ist laut CI Papier. Das war richtig gedacht und sah trotzdem aus wie
   ein Merkblatt — schwarze Schrift auf Grau, und nichts, was jemanden hält.

   Jetzt trägt ihn das Markenviolett. Die Eltern-Welt beginnt unmittelbar
   darunter und bekommt dadurch sogar mehr Gewicht: Sie hebt sich gegen den
   dunklen Aufmacher ab, statt in ihm unterzugehen. Höchstens zwei
   Flächenfarben pro Abschnitt bleibt gewahrt — Violett und Papier; Gold und
   Mint treten nur als Akzente auf. */
.aufmacher-neu {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--kind-grund);
  color: var(--weiss);
  padding: 54px 0 74px;
}

/* Die Farbwolken. Drei weiche Kreise und ein feines Punktraster darüber —
   zusammen ergibt das Tiefe, ohne dass ein einziges Bild geladen wird. */
.schleier {
  position: absolute;
  inset: -20% -10% -30%;
  z-index: -1;
  background:
    radial-gradient(42% 46% at 78% 18%, rgba(255, 209, 102, .30), transparent 68%),
    radial-gradient(40% 45% at 12% 8%, rgba(196, 181, 253, .34), transparent 70%),
    radial-gradient(52% 55% at 62% 96%, rgba(52, 209, 191, .20), transparent 72%);
  filter: blur(6px);
}
.schleier::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, .11) 1px, transparent 1.4px);
  background-size: 24px 24px;
  /* Nach unten auslaufen lassen: ein Raster, das hart aufhört, sieht aus wie
     ein Fehler in der Kachelung. */
  -webkit-mask-image: linear-gradient(to bottom, #000 12%, transparent 78%);
          mask-image: linear-gradient(to bottom, #000 12%, transparent 78%);
}

/* Die klebende Kopfzeile sitzt auf dem dunklen Aufmacher. Papierfarben wäre
   dort ein heller Riegel quer über dem Bild. */
body.start .kopf {
  background: var(--kind-tief);
  border-bottom-color: rgba(255, 255, 255, .12);
}
@supports (backdrop-filter: blur(10px)) {
  body.start .kopf { background: rgba(60, 49, 115, .86); }
}
body.start .kopf .wortmarke { color: var(--weiss); }
body.start .kopf nav a { color: #cfc7f0; }
body.start .kopf nav a:hover { color: var(--weiss); }
body.start .kopf .zeichen { background: rgba(255, 255, 255, .14); }
body.start .kopf .knopf.klein { background: var(--gold); color: #3b2a05; }
body.start .kopf .knopf.klein:hover { background: #ffdd8c; }

.aufmacher-neu h1 {
  font-size: clamp(32px, 4.4vw, 50px);
  letter-spacing: -.03em;
  line-height: 1.05;
  color: var(--weiss);
  margin: 18px 0 0;
  text-wrap: balance;
}
/* Der Farbverlauf sitzt auf der Schrift selbst. Ein Rückfall auf Gold steht
   davor: Browser ohne background-clip zeigen sonst durchsichtige Buchstaben. */
.aufmacher-neu h1 .gold {
  color: var(--gold);
  background: linear-gradient(96deg, #ffd166 12%, #ffb1c1 58%, #c4b5fd 96%);
  -webkit-background-clip: text;
          background-clip: text;
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .aufmacher-neu h1 .gold { color: transparent; }
}

.aufmacher-neu .unter {
  font-size: 17.5px;
  color: #ded6ff;
  line-height: 1.58;
  margin-top: 16px;
  max-width: 520px;
}
.aufmacher-neu .unter b { color: var(--weiss); font-weight: 700; }

.merker.hell {
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .22);
  color: var(--weiss);
}
.merker.hell::before { background: var(--gold); }

/* --- Der Ablauf in drei Zügen -------------------------------------------
   Drei Kacheln, dazwischen ein Pfeil. Sie beantworten die Frage, die eine
   Überschrift nur behaupten kann: was passiert hier eigentlich? */
.ablauf {
  list-style: none;
  padding: 0;
  margin: 24px 0 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.zug {
  position: relative;
  padding: 15px 15px 16px;
  border-radius: 16px;
  background: rgba(255, 255, 255, .09);
  border: 1px solid rgba(255, 255, 255, .15);
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.zug .ziffer {
  font-family: 'Baloo 2', 'Figtree', sans-serif;
  font-weight: 800;
  font-size: 13px;
  width: 24px; height: 24px;
  border-radius: 8px;
  display: grid; place-items: center;
  margin-bottom: 5px;
}
.zug.eltern .ziffer { background: var(--mint); color: #12403a; }
.zug.kind .ziffer   { background: var(--gold); color: #3b2a05; }
.zug.beide .ziffer  { background: var(--rose); color: #5c1c2b; }
.zug .wer { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--lila-akzent); }
.zug strong { font-size: 15px; font-weight: 700; line-height: 1.25; }
.zug .was { font-size: 12.5px; line-height: 1.45; color: #cbc2ee; }

/* Der Pfeil zwischen den Kacheln. Er sitzt am linken Rand der zweiten und
   dritten Kachel und liegt in der Lücke — deshalb kein eigenes Element. */
.zug + .zug::before {
  content: "";
  position: absolute;
  left: -11px;
  top: 50%;
  width: 7px; height: 7px;
  margin-top: -4px;
  border-right: 2px solid rgba(255, 255, 255, .45);
  border-bottom: 2px solid rgba(255, 255, 255, .45);
  transform: rotate(-45deg);
}

@media (max-width: 700px) {
  /* Einspaltig wird aus jeder Kachel eine Zeile: die Ziffer links, der Text
     rechts daneben. Untereinander gestapelte Kästen mit je vier Zeilen
     schöben sonst alles Übrige — Knöpfe, Belege, Bild — vom Schirm. */
  .ablauf { grid-template-columns: 1fr; gap: 8px; }
  .zug {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr);
    column-gap: 12px;
    row-gap: 1px;
    padding: 12px 14px 13px;
  }
  .zug .ziffer { grid-row: 1 / span 3; margin: 2px 0 0; }
  .zug .wer, .zug strong, .zug .was { grid-column: 2; }
  /* Einspaltig zeigt der Pfeil nach unten und steht über der Kachel. */
  .zug + .zug::before {
    left: 22px;
    top: -9px;
    margin-top: 0;
    transform: rotate(45deg);
  }
}

@media (max-width: 560px) {
  .aufmacher-neu { padding: 38px 0 58px; }
  .aufmacher-neu .unter { font-size: 16px; margin-top: 14px; }
  .nutzen-band { padding: 34px 0 40px; }
}

.belege { display: flex; gap: 10px 18px; flex-wrap: wrap; margin-top: 22px; padding: 0; }
.belege li {
  list-style: none;
  font-size: 13px;
  font-weight: 600;
  color: var(--grau);
}
.belege.hell li {
  color: #bdb3e8;
  font-size: 12.5px;
  display: flex;
  align-items: center;
  gap: 7px;
}
/* Ein Haken vor jedem Beleg. Als Rahmenwinkel gezeichnet, damit kein Zeichen
   nötig ist, das in irgendeiner Schrift fehlen könnte. */
.belege.hell li::before {
  content: "";
  width: 5px; height: 9px;
  border-right: 2px solid var(--mint);
  border-bottom: 2px solid var(--mint);
  transform: rotate(42deg);
  margin-top: -3px;
  flex: 0 0 auto;
}

/* --- Das Bild im Aufmacher ----------------------------------------------- */
.aufmacher-bild { position: relative; }
/* Ein warmer Schein hinter den Geräten, damit sie nicht auf der Fläche kleben. */
.aufmacher-bild::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 118%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 209, 102, .22), transparent 62%);
  z-index: 0;
  pointer-events: none;
}
.aufmacher-bild .geraete-stapel { position: relative; z-index: 1; }

/* --- Die schwebenden Marken ---------------------------------------------
   Sie zeigen, was eine erledigte Aufgabe einbringt. Die Bewegung ist winzig
   und langsam; wer sie abbestellt hat, bekommt sie gar nicht (die Regel für
   prefers-reduced-motion steht weiter oben und schaltet alle Animationen ab). */
.flugmarke {
  position: absolute;
  z-index: 3;
  padding: 8px 13px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
  box-shadow: 0 10px 24px rgba(23, 18, 51, .34);
  animation: schweben 5.5s ease-in-out infinite;
}
.flugmarke.xp {
  top: 12%; left: -6%;
  background: var(--mint); color: #12403a;
}
.flugmarke.punkte {
  top: 36%; right: -7%;
  background: var(--gold); color: #3b2a05;
  animation-delay: -1.8s;
}
.flugmarke.haken {
  bottom: 8%; left: -4%;
  background: var(--weiss); color: var(--gruen);
  animation-delay: -3.4s;
  display: flex; align-items: center; gap: 7px;
}
.flugmarke.haken::before {
  content: "";
  width: 5px; height: 10px;
  border-right: 2.5px solid var(--gruen);
  border-bottom: 2.5px solid var(--gruen);
  transform: rotate(42deg);
  margin-top: -3px;
}
@keyframes schweben {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}

@media (max-width: 860px) {
  /* Einspaltig ist links und rechts der Geräte kein Platz mehr; die Marken
     rücken nach innen, sonst ragen sie aus dem Bild und erzeugen eine
     waagerechte Bildlaufleiste. */
  .flugmarke.xp     { left: 0; }
  .flugmarke.punkte { right: 0; }
  .flugmarke.haken  { left: 4%; }
}
@media (max-width: 460px) {
  .flugmarke { font-size: 11.5px; padding: 6px 10px; }
}

/* --- Das Nutzenband unter dem Aufmacher ----------------------------------
   Der Übergang von Violett auf Papier: das Band legt sich mit abgerundeter
   Oberkante über den Aufmacher, wie ein Blatt, das darüber geschoben wird. */
.nutzen-band {
  background: var(--papier);
  border-radius: 28px 28px 0 0;
  margin-top: -28px;
  position: relative;
  z-index: 2;
  padding: 44px 0 52px;
}
.nutzen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
  margin-top: 18px;
}
.nutzen-karte {
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-left: 3px solid var(--gruen);
  border-radius: var(--radius);
  padding: 20px 22px;
}
.nutzen-karte h3 { font-size: 16.5px; letter-spacing: -.01em; margin: 0 0 6px; }
.nutzen-karte p { margin: 0; font-size: 14.5px; line-height: 1.55; }

/* --- Ein größerer Hauptknopf und ein stiller auf dunklem Grund ----------- */
.knopf.gross { min-height: 54px; padding: 15px 28px; font-size: 17px; font-weight: 700; }
.knopf.kind:hover { background: #ffdd8c; }
.knopf.geist {
  background: transparent;
  color: var(--weiss);
  border-color: rgba(255, 255, 255, .34);
}
.knopf.geist:hover { background: rgba(255, 255, 255, .10); border-color: rgba(255, 255, 255, .55); }

/* --- Der Kreislauf ------------------------------------------------------- */
.schritte {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 20px;
  margin-top: 38px;
}
.schritt {
  padding: 24px 24px 26px;
  border: 1px solid #ecebe5;
  border-radius: 18px;
  background: #fdfdfc;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.schritt .kopfzeile { display: flex; align-items: center; gap: 11px; }
.schritt .nummer {
  width: 28px; height: 28px;
  border-radius: 9px;
  display: grid; place-items: center;
  font-size: 13.5px; font-weight: 800;
  color: var(--weiss);
  margin: 0;
}
.schritt .wer { font-size: 12px; font-weight: 700; color: var(--grau-hell); }
.schritt h3 { font-size: 17px; letter-spacing: -.01em; margin: 0; }
.schritt p { margin: 0; font-size: 14px; }

/* --- Kindermodus, auf Violett -------------------------------------------- */
.kindermodus { background: var(--kind-grund); color: var(--weiss); }
.kindermodus .label { color: var(--lila-akzent); }
.kindermodus h2 {
  font-family: 'Baloo 2', 'Figtree', sans-serif;
  font-weight: 800;
  font-size: clamp(28px, 4vw, 40px);
  color: var(--weiss);
  margin: 12px 0 14px;
}
.kindermodus p { color: #e4dcff; font-size: 16px; line-height: 1.65; max-width: 520px; }
.zweispalt {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 44px;
  align-items: center;
}
.punkte { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 11px; }
.punkte li {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--weiss);
}
.punkte li::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 999px;
  background: var(--gold);
  margin-top: 8px;
  flex: 0 0 auto;
}

/* --- Die Figuren --------------------------------------------------------- */
.figuren {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  background: var(--kind-tief);
  border-radius: 26px;
  padding: 16px;
}
@media (max-width: 420px) { .figuren { grid-template-columns: repeat(2, 1fr); } }
.figur {
  background: var(--kind-flaeche);
  border-radius: 16px;
  padding: 14px 10px 12px;
  text-align: center;
  position: relative;
}
.figur .scheibe {
  width: 46px; height: 46px;
  border-radius: 999px;
  margin: 0 auto 10px;
  display: block;
}
/* Ein img.scheibe ist eine gezeichnete Figur — die soll nicht rund
   beschnitten werden, sonst fehlen Ohren, Hörner und Schwanz. */
.figur img.scheibe { border-radius: 0; object-fit: contain; }

/* Die Farben stammen aus lib/domain/kompi_arten.dart und gelten für die
   Gattungen, die noch nicht gezeichnet sind. tool/web_bilder.py legt für die
   gezeichneten ein Bild unter assets/bilder/kompi/ ab; index.php nimmt dann
   das Bild. */
.scheibe.drache    { background: #17AA66; }
.scheibe.katze     { background: #FBC54F; }
.scheibe.hund      { background: #CD7D3C; }
.scheibe.robo      { background: #C0A8F2; }
.scheibe.alpaka    { background: #F58A9A; }
.scheibe.axolotl   { background: #FC9773; }
.scheibe.greif     { background: #8AB5EF; }
.scheibe.astronaut { background: #AAB8C8; }
.scheibe.einhorn   { background: #E2A7E9; }
.figur .name {
  font-family: 'Baloo 2', 'Figtree', sans-serif;
  font-weight: 700;
  font-size: 13.5px;
  color: var(--weiss);
}
.figur .stufe { font-size: 11px; font-weight: 700; color: var(--lila-akzent); margin-top: 2px; }
.figur.frei { outline: 2px solid var(--gold); }

/* --- Elternmodus --------------------------------------------------------- */
.zeilen {
  border: 1px solid #ecebe5;
  border-radius: 16px;
  overflow: hidden;
  margin-top: 26px;
}
.zeile {
  padding: 15px 18px;
  border-bottom: 1px solid var(--linie-fein);
  display: flex;
  gap: 14px;
  align-items: center;
}
.zeile:last-child { border-bottom: 0; }
.zeile .platz {
  width: 34px; height: 34px;
  border-radius: 8px;
  background: var(--papier);
  border: 1px solid var(--linie);
  display: grid; place-items: center;
  flex: 0 0 auto;
}
.zeile .text { flex: 1; min-width: 0; }
.zeile .titel { font-size: 14.5px; font-weight: 600; }
.zeile .meta { font-size: 12.5px; color: var(--grau-hell); }
.marke-offen, .marke-fertig {
  padding: 6px 11px;
  border-radius: 8px;
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
  border: 1px solid;
}
.marke-offen { background: #fdf1ea; color: var(--ocker); border-color: #f0dcd0; }
.marke-fertig { background: #eef3f1; color: var(--gruen); border-color: #dbe6e2; }

/* --- Preise -------------------------------------------------------------- */
.preise {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 20px;
  margin-top: 34px;
}
.tarif {
  border-radius: 20px;
  padding: 30px 30px 34px;
  display: flex;
  flex-direction: column;
}
.tarif.frei { background: var(--weiss); border: 1px solid var(--linie-kraeftig); }
.tarif.pro { background: var(--kind-grund); color: var(--weiss); }
.tarif .name { font-size: 19px; font-weight: 700; }
.tarif .zahl {
  font-size: 42px;
  font-weight: 800;
  letter-spacing: -.03em;
  margin: 8px 0 2px;
}
.tarif.pro .zahl { font-family: 'Baloo 2', 'Figtree', sans-serif; letter-spacing: -.01em; }
.tarif .dazu { font-size: 13px; font-weight: 600; color: var(--grau-hell); }
.tarif.pro .dazu { color: var(--lila-akzent); }
.tarif .strich { height: 1px; background: #ecebe5; margin: 22px 0; }
.tarif.pro .strich { background: rgba(255, 255, 255, .22); }
.tarif ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 11px; }
.tarif li { font-size: 14px; line-height: 1.5; color: var(--tinte-weich); }
.tarif.pro li { color: var(--weiss); }
.empfohlen {
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--gold);
  color: var(--kind-grund);
  font-size: 11.5px;
  font-weight: 800;
}
.tarif .kopfzeile { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* Die drei Zahlweisen */
.zahlweisen { display: grid; gap: 8px; margin: 18px 0 0; }
.zahlweise {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 11px 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .12);
}
.zahlweise b { font-size: 16px; font-weight: 800; }
.zahlweise span { font-size: 13px; color: var(--lila-akzent); }
.zahlweise .hinweis { margin-left: auto; font-size: 11.5px; font-weight: 700; color: var(--gold); }

/* --- Häufige Fragen ------------------------------------------------------ */
.fragen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px 44px;
  margin-top: 24px;
}
.fragen h3 { font-size: 15.5px; margin-bottom: 6px; }
.fragen p { font-size: 14px; margin: 0; }

/* --- Schlussaufruf ------------------------------------------------------- */
.schluss { background: var(--kind-grund); text-align: center; }
.schluss h2 {
  font-family: 'Baloo 2', 'Figtree', sans-serif;
  font-weight: 800;
  font-size: clamp(28px, 4vw, 40px);
  color: var(--weiss);
  margin-bottom: 14px;
}
.schluss p { color: #e4dcff; font-size: 16.5px; max-width: 520px; margin: 0 auto 28px; }

/* --- Dunkle Fußzeile ----------------------------------------------------- */
.fuss.dunkel { background: var(--tinte); border-top: 0; }
.fuss.dunkel a { color: #9b98a8; }
.fuss.dunkel a:hover { color: var(--weiss); }
.fuss.dunkel .rechts { color: #6f6c7c; }
.fuss.dunkel .marke { display: flex; align-items: center; gap: 10px; }
.fuss.dunkel .wortmarke { font-size: 16px; color: var(--weiss); }

/* =========================================================================
   Feinschliff der Landingpage
   -------------------------------------------------------------------------
   Der Aufmacher war nicht das einzige Problem: darunter folgten weiße Kästen
   auf weißem Grund, ohne Schatten, ohne Bewegung, ohne einen Punkt, an dem
   das Auge hängen bleibt. Die Seite las sich wie ein Merkblatt. Was hier
   folgt, ändert keinen einzigen Satz — nur ihr Gewicht.
   ========================================================================= */

/* Flächen dürfen sich nicht mehr in der Fläche verlieren: ein
   zurückhaltender Schatten und eine Bewegung beim Überfahren. Der Schatten
   hat einen Violettstich statt reinem Schwarz, sonst wirkt er schmutzig. */
.schritt, .karte, .nutzen-karte, .galerie figure, .zeilen {
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.schritt, .karte, .nutzen-karte {
  box-shadow: 0 1px 2px rgba(60, 49, 115, .05);
}
.schritt:hover, .karte:hover, .nutzen-karte:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(60, 49, 115, .11);
  border-color: var(--linie-kraeftig);
}

/* --- Der Kreislauf ------------------------------------------------------- */
/* Ein Hauch Papier im Verlauf, damit der Abschnitt nicht als weiße Wand
   beginnt, und größere Ziffern: sie sind die Orientierung in diesem Raster. */
#so-gehts { background: linear-gradient(180deg, var(--papier) 0%, var(--weiss) 42%); }
.schritt { background: var(--weiss); }
.schritt .nummer {
  width: 32px; height: 32px;
  border-radius: 10px;
  font-size: 15px;
}
.schritt .wer {
  margin-left: auto;
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--papier-tief);
  font-size: 11px;
  letter-spacing: .05em;
  text-transform: uppercase;
}

/* --- Die Figuren reagieren ----------------------------------------------- */
.figur { transition: transform .18s ease, background-color .18s ease; }
.figur:hover { transform: translateY(-3px); background: #6a5cab; }

/* --- Galerie ------------------------------------------------------------- */
.galerie figure:hover { transform: translateY(-5px); }

/* --- Preise: der empfohlene Tarif bekommt Licht -------------------------- */
.tarif.pro {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  box-shadow: 0 22px 46px rgba(60, 49, 115, .22);
}
.tarif.pro::before {
  content: "";
  position: absolute;
  inset: -40% -30% 40% -30%;
  z-index: -1;
  background:
    radial-gradient(46% 60% at 82% 8%, rgba(255, 209, 102, .32), transparent 70%),
    radial-gradient(44% 58% at 14% 0%, rgba(196, 181, 253, .30), transparent 72%);
}
.tarif.frei { box-shadow: 0 1px 2px rgba(60, 49, 115, .05); }

/* --- Häufige Fragen als Karten ------------------------------------------- */
.fragen { gap: 16px; }
.fragen > div {
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: 20px 22px;
  transition: border-color .18s ease;
}
.fragen > div:hover { border-color: var(--linie-kraeftig); }
.fragen h3 { font-size: 16px; }

/* --- Der Schlussaufruf bekommt dieselbe Tiefe wie der Aufmacher ---------- */
.schluss {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 76px 0 84px;
}
.schluss::before {
  content: "";
  position: absolute;
  inset: -30% -10%;
  z-index: -1;
  background:
    radial-gradient(38% 52% at 22% 6%, rgba(255, 209, 102, .26), transparent 70%),
    radial-gradient(40% 54% at 80% 96%, rgba(52, 209, 191, .22), transparent 72%);
}
.schluss .knopf.kind { min-height: 54px; padding: 15px 28px; font-size: 17px; font-weight: 700; }

/* --- Etwas mehr Luft zwischen den Abschnitten ---------------------------- */
section { padding: 72px 0; }
@media (max-width: 560px) { section { padding: 48px 0; } }

/* =========================================================================
   Anleitung
   -------------------------------------------------------------------------
   Eine lange Lesestrecke, keine Landingpage. Deshalb schmalere Textspalten,
   größere Abstände zwischen den Kapiteln und Abbildungen, die den Text
   unterbrechen statt ihn zu schmücken.
   ========================================================================= */

.anleitung-kopf { padding-top: 56px; }
.anleitung-kopf h1 {
  font-size: clamp(30px, 4.4vw, 44px);
  letter-spacing: -.02em;
  margin: 10px 0 14px;
  text-wrap: balance;
}

/* Eine Textspalte, die sich lesen lässt: etwa 70 Zeichen je Zeile. */
.eng-text { max-width: 720px; }
.eng-text h2, .anleitung-paar h2 { margin-bottom: 16px; }
.eng-text h3 { margin: 26px 0 8px; font-size: 17.5px; }
.eng-text p, .anleitung-paar p { font-size: 16.5px; line-height: 1.7; }

/* --- Inhaltsverzeichnis -------------------------------------------------- */
.inhalt-verzeichnis { margin-top: 30px; }
.inhalt-verzeichnis ol {
  list-style: none;
  counter-reset: kapitel;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 2px 26px;
}
.inhalt-verzeichnis li { counter-increment: kapitel; }
.inhalt-verzeichnis a {
  display: flex;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--linie);
  color: var(--tinte-weich);
  text-decoration: none;
  font-size: 15.5px;
  font-weight: 600;
}
.inhalt-verzeichnis a::before {
  content: counter(kapitel);
  color: var(--grau-hell);
  font-variant-numeric: tabular-nums;
  min-width: 18px;
}
.inhalt-verzeichnis a:hover { color: var(--gruen); }

/* --- Text und Bild nebeneinander ----------------------------------------- */
.anleitung-paar {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
}
@media (max-width: 860px) {
  .anleitung-paar { grid-template-columns: 1fr; gap: 30px; }
  /* Auf dem Handy immer erst der Text, dann das Bild — unabhängig davon, in
     welcher Reihenfolge sie im Quelltext stehen. */
  .anleitung-paar.umgekehrt > figure { order: 2; }
}
.anleitung-paar .bild-rahmen { margin: 0; }
.anleitung-paar .geraet { margin: 0 auto; max-width: 250px; }
.bild-rahmen figcaption,
.breitbild figcaption {
  margin-top: 14px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--grau);
  text-align: center;
}

/* --- Eine Abbildung über die ganze Textbreite ---------------------------- */
.breitbild { margin: 28px 0 0; }
.breitbild img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  border: 1px solid var(--linie);
}

/* --- Begriffslisten ------------------------------------------------------ */
.begriffe { margin: 22px 0 0; }
.begriffe dt {
  font-weight: 700;
  font-size: 16px;
  color: var(--tinte);
  margin-top: 18px;
}
.begriffe dt:first-of-type { margin-top: 0; }
.begriffe dd {
  margin: 5px 0 0;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--tinte-weich);
}

/* --- Aufzählung auf hellem Grund ----------------------------------------- */
.punkte-hell { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 11px; }
/* Kein Flex hier: In einem Flex-Element wird jedes Inline-Element zu einem
   eigenen Kind. Ein <strong> am Zeilenanfang bekam dadurch seine eigene
   schmale Spalte, und „Ohne Foto:" brach mitten im Wort um. Der Punkt steht
   deshalb absolut, der Text fließt normal. */
.punkte-hell li {
  position: relative;
  padding-left: 18px;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--tinte-weich);
}
.punkte-hell li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 7px; height: 7px;
  border-radius: 999px;
  background: var(--gruen);
}

/* --- Eingerückter Hinweis ------------------------------------------------ */
.hinweis-kasten {
  margin: 26px 0 0;
  padding: 18px 22px 20px;
  border-left: 3px solid var(--gruen);
  background: var(--gruen-flaeche);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.hinweis-kasten h3 { margin: 0 0 6px; font-size: 16.5px; color: #1f423a; }
.hinweis-kasten p { margin: 0; font-size: 15.5px; line-height: 1.6; color: #2c4a41; }

/* Sprungmarken: Die Kopfzeile klebt oben und wäre sonst über der Überschrift,
   auf die gerade gesprungen wurde. */
section[id] { scroll-margin-top: 84px; }
@media (max-width: 560px) { section[id] { scroll-margin-top: 70px; } }

/* --- Ratgeberseiten ------------------------------------------------------ */

/* Die Taschengeldtabelle. Auf dem Handy bleibt sie eine Tabelle und wird
   nicht zu Karten umgebaut: Drei kurze Spalten passen, und eine Tabelle, die
   wie eine Tabelle aussieht, ist hier leichter zu lesen. */
.taschengeld-tabelle {
  width: 100%;
  border-collapse: collapse;
  margin: 24px 0 10px;
  font-size: 15.5px;
}
.taschengeld-tabelle caption {
  caption-side: top;
  text-align: left;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--grau-hell);
  padding-bottom: 10px;
}
.taschengeld-tabelle th, .taschengeld-tabelle td {
  text-align: left;
  padding: 11px 12px;
  border-bottom: 1px solid var(--linie-fein);
}
.taschengeld-tabelle thead th {
  font-size: 12.5px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--grau-hell);
  border-bottom-color: var(--linie-kraeftig);
}
.taschengeld-tabelle tbody th { font-weight: 600; color: var(--tinte); }
.taschengeld-tabelle td { color: var(--tinte-weich); }
.taschengeld-tabelle tbody tr:nth-child(even) { background: var(--papier); }
@media (max-width: 480px) {
  .taschengeld-tabelle { font-size: 14px; }
  .taschengeld-tabelle th, .taschengeld-tabelle td { padding: 9px 7px; }
}

/* Die Fragen auf den Ratgeberseiten stehen einspaltig — sie sind länger als
   die auf der Startseite und in zwei Spalten mühsam zu lesen. */
.fragen-lang { grid-template-columns: 1fr; gap: 14px; max-width: 720px; }

/* --- Die Altersstufen ---------------------------------------------------- */
.alters-stufen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 18px;
  margin-top: 28px;
}
.alters-stufe {
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: var(--radius-gross);
  padding: 24px 26px 26px;
  box-shadow: 0 1px 2px rgba(60, 49, 115, .05);
}
.alters-stufe .stufe-kopf {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.alters-stufe .stufe-nummer {
  width: 30px; height: 30px;
  border-radius: 10px;
  background: var(--gruen);
  color: var(--weiss);
  display: grid; place-items: center;
  font-size: 14.5px; font-weight: 800;
  flex: 0 0 auto;
}
.alters-stufe h3 { margin: 0; font-size: 18px; letter-spacing: -.01em; }
.alters-stufe p { font-size: 15px; line-height: 1.6; margin: 0 0 14px; }
.alters-stufe ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.alters-stufe li {
  position: relative;
  padding-left: 20px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--tinte-weich);
}
/* Ein Haken als Rahmenwinkel — kein Zeichen, das in einer Schrift fehlen kann. */
.alters-stufe li::before {
  content: "";
  position: absolute;
  left: 2px; top: 5px;
  width: 5px; height: 9px;
  border-right: 2px solid var(--gruen);
  border-bottom: 2px solid var(--gruen);
  transform: rotate(42deg);
}

/* --- Gegenüberstellung ---------------------------------------------------
   Links, was nicht funktioniert; rechts, was funktioniert. Die Farben tragen
   die Aussage, aber nicht allein: Jede Seite hat zusätzlich ein Zeichen und
   eine Überschrift. Wer Rot und Grün nicht unterscheiden kann — und das ist
   fast jeder zwölfte Mann —, liest es trotzdem. */
.gegenueber {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  margin: 26px 0 22px;
}
.gegenueber .seite {
  border-radius: var(--radius-gross);
  padding: 20px 22px 22px;
  border: 1px solid;
}
.gegenueber .seite-kopf {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.gegenueber .seite-kopf h3 { margin: 0; font-size: 16.5px; }
.gegenueber .zeichen-kreis {
  width: 26px; height: 26px;
  border-radius: 999px;
  display: grid; place-items: center;
  flex: 0 0 auto;
}
.gegenueber ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.gegenueber li { font-size: 15px; line-height: 1.5; }
.gegenueber li + li { padding-top: 8px; border-top: 1px solid; }

.gegenueber .schlecht {
  background: #fdf6f2;
  border-color: #f0dcd0;
}
.gegenueber .schlecht .seite-kopf h3 { color: var(--ocker); }
.gegenueber .schlecht .zeichen-kreis { background: #f7e2d7; color: var(--ocker); }
.gegenueber .schlecht li { color: #7d5340; }
.gegenueber .schlecht li + li { border-top-color: #f0dcd0; }

.gegenueber .gut {
  background: var(--gruen-flaeche);
  border-color: #c6dcd0;
}
.gegenueber .gut .seite-kopf h3 { color: #1f423a; }
.gegenueber .gut .zeichen-kreis { background: #cfe3d8; color: var(--gruen); }
.gegenueber .gut li { color: #2c4a41; }
.gegenueber .gut li + li { border-top-color: #c6dcd0; }

/* Die letzte Zeile ist jeweils die Zusammenfassung — sie darf sich abheben. */
.gegenueber li:last-child { font-style: italic; }

/* Eine nachgestellte Liste steht für sich, sie braucht keinen Bildrahmen. */
.breitbild.nachgestellt .zeilen { background: var(--weiss); margin-top: 0; }

/* Hinweis unter den Ladeknöpfen, solange eine Fassung noch fehlt. */
.knopf-fussnote {
  margin: 12px 0 0;
  font-size: 14px;
  color: var(--lila-text);
}

/* --- Store-Abzeichen -----------------------------------------------------
   Apple und Google geben für ihre Abzeichen Mindestgrößen und einen
   Schutzraum vor, in dem nichts anderes stehen darf. Deshalb steht die Höhe
   hier und nicht in der Bilddatei — so lässt sie sich an einer Stelle
   richtigstellen, wenn die Vorgaben sich ändern. */
.store-abzeichen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin: 0;
}
/* Unter den Preisen steht es für sich und mittig. */
.preise + .store-abzeichen,
.store-abzeichen.mitte { justify-content: center; margin: 30px 0 6px; }
.store-abzeichen a {
  display: inline-flex;
  border-radius: 10px;
}
.store-abzeichen a:focus-visible { outline: 2px solid var(--gruen); outline-offset: 3px; }
.store-abzeichen img {
  display: block;
  height: 54px;
  width: auto;
}
@media (max-width: 420px) {
  /* Apples Mindesthöhe für das Abzeichen liegt bei 40 Punkten — darunter
     darf es nicht fallen, auch nicht auf einem schmalen Gerät. */
  .store-abzeichen img { height: 44px; }
}