:root {
    --rot: #96000e;
    --blau: #005996;
    --bg: #faf6ef;
    --bg-stage: #ffffff;
    --text: #262322;
    --text-soft: #6b645c;
    --border: #e4ddd0;
    --wort-farbe: var(--text);
    --silbe-farbe-1: var(--rot);
    --silbe-farbe-2: var(--blau);
    --buehne-farbe: #ffffff;
    --zeichenabstand: 0em;
    --zeilenabstand: 1.9;
    --spiegel-farbe-bp: #a85500;
    --spiegel-farbe-dq: #6a3fa0;
  }

  html[data-theme="dunkel"] {
    --bg: #1c1b1a;
    --bg-stage: #2a2826;
    --text: #f2ede3;
    --text-soft: #b8b0a3;
    --border: #47433d;
    --buehne-farbe: #000000;
  }

  * { box-sizing: border-box; }

  body {
    margin: 0;
    padding: 32px 20px 50px;
    background: var(--bg);
    color: var(--text);
    font-family: Verdana, Arial, "Segoe UI", sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: background-color 0.2s ease, color 0.2s ease;
  }

  .app { width: 100%; max-width: 760px; }

  .sprache-zeile {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    font-size: 0.82rem;
    color: var(--text-soft);
    margin-bottom: 4px;
  }
  .sprache-zeile select {
    font-family: inherit;
    font-size: 0.82rem;
    padding: 4px 6px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg-stage);
    color: var(--text);
  }

  h1.app-titel {
    text-align: center;
    color: var(--rot);
    font-size: 1.7rem;
    margin: 4px 0 24px;
  }

  /* ---- Hinweis: Zum Home-Bildschirm hinzufuegen ---- */
  .install-hinweis {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--bg-stage);
    border: 1px solid var(--blau);
    border-left: 5px solid var(--blau);
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 20px;
    font-size: 0.86rem;
    line-height: 1.5;
    color: var(--text);
  }
  .install-hinweis .install-text { flex: 1; }
  .install-hinweis .install-text strong { color: var(--blau); }
  .install-hinweis button {
    background: none;
    border: none;
    font-size: 1.1rem;
    color: var(--text-soft);
    cursor: pointer;
    line-height: 1;
    padding: 4px 6px;
    flex-shrink: 0;
  }

  /* ---- Lizenz-Bereich ---- */
  .lizenz-eingabe {
    width: 100%; font-family: "Courier New", monospace; font-size: 0.82rem;
    padding: 9px 10px; border: 1px solid var(--border); border-radius: 8px;
    background: var(--bg-stage); color: var(--text); resize: vertical;
  }
  .lizenz-status { font-size: 0.92rem; margin: 4px 0 14px; line-height: 1.6; }
  .lizenz-status.ok { color: #1a7a1a; }
  .lizenz-status.warnung { color: var(--rot); }
  .text-eingabe-klein {
    width: 100%; font-size: 0.88rem;
    padding: 9px 10px; border: 1px solid var(--border); border-radius: 8px;
    background: var(--bg-stage); color: var(--text);
  }

  /* ---- Kind-Leiste ("Wer liest heute?") ---- */
  .kind-leiste {
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: var(--bg-stage);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px 16px;
    margin-bottom: 20px;
    font-size: 0.86rem;
  }
  .kind-leiste-zeile {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
  }
  .kind-leiste label { color: var(--text-soft); white-space: nowrap; }
  .kontext-knopf {
    font-family: inherit;
    font-size: 0.84rem;
    font-weight: bold;
    padding: 7px 12px;
    border-radius: 8px;
    border: 2px solid var(--border);
    background: var(--bg-stage);
    color: var(--text);
    cursor: pointer;
  }
  .kontext-knopf.aktiv { border-color: var(--blau); background: var(--blau); color: #fff; }

  .obere-reiter {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 16px;
  }
  .oberer-reiter {
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: bold;
    padding: 12px 20px;
    border-radius: 12px;
    border: 2px solid var(--border);
    background: var(--bg-stage);
    color: var(--text);
    cursor: pointer;
  }
  .oberer-reiter.reiter-aktiv { border-color: var(--rot); background: var(--rot); color: #fff; }
  /* Optisch durch die Kacheln ersetzt (siehe .start-bildschirm unten) -- bleibt im DOM
     funktionsfaehig (dieselben Funktionen wie die Kacheln), nur nicht mehr sichtbar. */
  .obere-reiter { display: none; }

  /* ================= Kachel-Startbildschirm ================= */
  .start-bildschirm { max-width: 520px; margin: 0 auto 24px; }
  .start-frage { font-size: 1.1rem; font-weight: bold; margin: 0 0 16px; text-align: center; }
  .kachel-gitter {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 18px;
  }
  .kachel {
    position: relative;
    font-family: inherit;
    background: var(--bg-stage);
    border: 2px solid var(--border);
    border-radius: 18px;
    padding: 22px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    min-height: 120px;
    justify-content: center;
  }
  .kachel:hover, .kachel:focus-visible { border-color: var(--rot); }
  .kachel-icon { font-size: 2rem; line-height: 1; }
  .kachel-titel { font-size: 1.05rem; font-weight: bold; color: var(--text); }
  .kachel-untertitel { font-size: 0.8rem; color: var(--text-soft); text-align: center; }
  .kachel-status { font-size: 0.8rem; font-weight: bold; color: var(--rot); }
  .kachel-schloss { position: absolute; top: 10px; right: 12px; font-size: 1rem; }
  .start-unten-zeile { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
  .start-unten-knopf {
    font-family: inherit;
    font-size: 0.85rem;
    padding: 10px 16px;
    border-radius: 12px;
    border: 2px dashed var(--border);
    background: transparent;
    color: var(--text-soft);
    cursor: pointer;
  }
  .hilfe-schwebend {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--blau);
    color: #fff;
    font-size: 1.3rem;
    border: none;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
    cursor: pointer;
    z-index: 50;
  }
  .zurueck-zum-start {
    font-family: inherit;
    font-size: 0.85rem;
    background: none;
    border: none;
    color: var(--blau);
    cursor: pointer;
    padding: 4px 0 12px;
    display: block;
  }
  .admin-trenner { border: none; border-top: 1px solid var(--border); margin: 18px 0; }
  .erklaerung-knopf {
    display: block;
    margin-top: 10px;
    font-family: inherit;
    font-size: 0.82rem;
    color: var(--text-soft);
    background: none;
    border: none;
    text-decoration: underline;
    cursor: pointer;
    padding: 4px 0;
  }
  .uebersicht-tabelle { width: 100%; border-collapse: collapse; font-size: 0.86rem; margin-bottom: 6px; }
  .uebersicht-tabelle th, .uebersicht-tabelle td { text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--border); }
  .uebersicht-tabelle th { color: var(--text-soft); font-weight: normal; }
  .uebersicht-tabelle tr.uebersicht-aktiv td { font-weight: bold; color: var(--blau); }
  .uebersicht-tabelle tr[data-kind-id] { cursor: pointer; }
  .uebersicht-tabelle tr[data-kind-id]:hover td { color: var(--blau); }
  .kind-leiste select,
  .admin-panel select {
    font-family: inherit;
    font-size: 0.92rem;
    padding: 7px 8px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg-stage);
    color: var(--text);
    flex: 1;
    min-width: 120px;
  }
  .kind-leiste button,
  .admin-panel .kind-leiste-zeile button {
    font-family: inherit;
    font-size: 1rem;
    padding: 6px 10px;
    border-radius: 8px;
    border: 2px solid var(--border);
    background: var(--bg-stage);
    color: var(--text);
    cursor: pointer;
  }

  /* ---- Ribbon ---- */
  .ribbon {
    background: var(--bg-stage);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 22px 26px 18px;
    margin-bottom: 28px;
  }

  .ribbon-reihe-primaer {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: center;
    gap: 0;
    row-gap: 16px;
  }
  .ribbon-reihe-werkzeuge {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
  }
  .ribbon-werkzeug-knopf {
    font-family: inherit;
    font-size: 0.86rem;
    font-weight: bold;
    padding: 10px 16px;
    border-radius: 10px;
    border: 2px solid var(--border);
    background: var(--bg-stage);
    color: var(--text);
    cursor: pointer;
  }
  .ribbon-werkzeug-knopf.aktiv { border-color: var(--blau); background: var(--blau); color: #fff; }
  .ribbon-werkzeuge-trenner {
    width: 1px;
    height: 26px;
    background: var(--border);
    margin: 0 4px;
  }

  .ribbon-gruppe {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 28px;
  }

  .ribbon-knopf-reihe {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 10px;
    flex-wrap: wrap;
    justify-content: center;
  }

  .ribbon-unter-gruppe {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
  }
  .ribbon-unter-reihe {
    display: flex;
    gap: 8px;
    align-items: center;
  }
  .ribbon-mini-beschriftung {
    font-size: 0.64rem;
    color: var(--text-soft);
    white-space: nowrap;
  }

  .hilfe-eintrag {
    margin-bottom: 14px;
    line-height: 1.55;
    font-size: 0.92rem;
  }
  .hilfe-eintrag strong { color: var(--blau); }

  /* ---- Reizarm-Modus: stoppt saemtliche Uebergangs-Effekte/Animationen ---- */
  /* rc41: Bewegung grundsaetzlich reduziert -- ohne Schalter. Keine Uebergaenge, keine
     Animationen, fuer alle Nutzer. (Der fruehere "Reizarm"-Schalter tat nur genau das.) */
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }

  /* Bezugsrahmen fuer die absolute Positionierung des schwebenden Abbrechen-Knopfs */
  #spielBereich { position: relative; }

  /* ---- Blanko-Modus: beim Training selbst nur noch die Woerter, keine Knoepfe ---- */
  html.blanko #spielBereich.immersiv .knopf-zeile,
  html.blanko #spielBereich.immersiv .fortschritt,
  html.blanko body:has(#spielBereich.immersiv) #resetKnopfZeile {
    display: none !important;
  }
  /* rc40: Der kleine Abbrechen-Knopf bleibt auch im Blanko-Modus sichtbar, nur sehr blass --
     sonst gab es am Tablet ohne Escape-Taste keinen erkennbaren Weg hinaus (das Wisch-/
     Zieh-Bedienfeld findet niemand von allein). "Nochmal von vorn"/"Andere Woerter" dagegen
     werden im Blanko-Modus jetzt wirklich ausgeblendet, wie in der Beschreibung versprochen. */
  html.blanko #spielBereich.immersiv .abbrechen-schwebend { opacity: 0.3; }
  html.blanko #spielBereich.immersiv .abbrechen-schwebend:hover,
  html.blanko #spielBereich.immersiv .abbrechen-schwebend:focus-visible { opacity: 0.9; }

  /* Das Geste-Bedienfeld: NUR im Blanko-Modus genutzt, erscheint kurz bei Wisch-Geste
     (Touch) oder Mausbewegung (Desktop) ueber der Buehne, und verschwindet von selbst
     wieder (siehe JS: blankoBedienfeldZeigen). Deutlich sichtbar, damit man's im Moment
     des Erscheinens gut trifft -- kein Dauer-Element wie der sonstige Abbrechen-Knopf. */
  .blanko-bedienfeld {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 25;
    display: flex;
    gap: 10px;
    background: var(--bg-stage);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 10px 14px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.18);
  }
  .blanko-knopf {
    font-family: inherit;
    font-size: 1.1rem;
    min-width: 44px;
    min-height: 44px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--text);
    cursor: pointer;
  }

  /* Abbrechen bleibt IMMER erreichbar, auch im Blanko-Modus -- klein und unauffaellig
     in der Ecke, damit es die "nur das Wort"-Ruhe kaum stoert, aber niemand ohne
     sichtbaren Ausweg dasteht (kein .knopf-zeile-Kind, daher von obiger Regel unberuehrt). */
  .abbrechen-schwebend {
    position: absolute;
    top: env(safe-area-inset-top, 8px);
    right: env(safe-area-inset-right, 8px);
    z-index: 20;
    font-family: inherit;
    font-size: 0.8rem;
    padding: 6px 10px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--bg-stage);
    color: var(--text-soft);
    opacity: 0.55;
    cursor: pointer;
  }
  .abbrechen-schwebend:hover,
  .abbrechen-schwebend:focus-visible {
    opacity: 1;
  }
  html.blanko .abbrechen-schwebend { opacity: 0.35; }
  html.blanko .abbrechen-schwebend:hover,
  html.blanko .abbrechen-schwebend:focus-visible { opacity: 0.9; }
  /* Ausloggen-Knopf: gleiche Optik wie Abbrechen, aber spiegelverkehrt links -- beide
     erreichbar, ohne sich zu ueberlappen. NEU (25.09.2026): war vorher NUR ausserhalb
     des Vollbilds erreichbar (in der Kind-Auswahl-Zeile), waehrend der eigentlichen
     Uebung aber vom Vollbild-Bereich komplett verdeckt -- "wo ist der Ausloggen-Knopf"
     war deshalb eine berechtigte Frage. Jetzt zusaetzlich hier, direkt im Vollbild. */
  .ausloggen-schwebend { left: env(safe-area-inset-left, 8px); right: auto; }

  .ribbon-regler-reihe {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    margin-bottom: 10px;
    flex-wrap: wrap;
    justify-content: center;
  }
  .ribbon-regler-mini { min-width: 240px; flex: 1 1 240px; }
  .ribbon-regler-mini label {
    display: block;
    font-size: 0.72rem;
    color: var(--text-soft);
    white-space: normal;
    margin-bottom: 3px;
    white-space: nowrap;
  }
  .ribbon-regler-mini input[type="range"] { width: 150px; height: 22px; }

  .ribbon-label {
    font-size: 0.78rem;
    color: var(--text-soft);
    display: flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
  }

  .ribbon-trenner {
    width: 1px;
    align-self: stretch;
    background: var(--border);
    margin: 2px 10px;
  }

  .ribbon-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    font-family: inherit;
    font-size: 0.72rem;
    font-weight: bold;
    line-height: 1.25;
    padding: 12px 16px;
    border-radius: 10px;
    border: 2px solid var(--border);
    background: var(--bg-stage);
    color: var(--text);
    cursor: pointer;
    min-width: 74px;
  }
  .ribbon-tab .icon { font-size: 1.4rem; }
  .ribbon-tab.tab-aktiv {
    border-color: var(--blau);
    background: var(--blau);
    color: #fff;
  }
  .ribbon-tab:disabled { opacity: 0.45; cursor: default; }

  .ribbon-mini-knopf {
    font-family: inherit;
    font-size: 1.2rem;
    padding: 9px 13px;
    border-radius: 10px;
    border: 2px solid var(--border);
    background: var(--bg-stage);
    color: var(--text);
    cursor: pointer;
  }
  .ribbon-mini-knopf.aktiv { border-color: var(--blau); background: var(--blau); color: #fff; }

  .ribbon-farb-eingabe {
    width: 40px;
    height: 40px;
    padding: 2px;
    border: 2px solid var(--border);
    border-radius: 10px;
    cursor: pointer;
    background: none;
  }

  .ribbon-checkbox-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    color: var(--text);
    cursor: pointer;
    white-space: nowrap;
  }
  .ribbon-checkbox-label input { width: 17px; height: 17px; cursor: pointer; }

  .ribbon-pille {
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: bold;
    padding: 0 14px;
    height: 40px;
    border-radius: 10px;
    border: 2px solid var(--border);
    background: var(--bg-stage);
    color: var(--text);
    cursor: pointer;
  }
  .ribbon-pille.aktiv { border-color: var(--blau); background: var(--blau); color: #fff; }
  .ribbon-pille:disabled { opacity: 0.4; cursor: default; }

  /* Punkt 20 (Berater-Feedback): echte Haekchen statt Umschalt-Pillen, die ohne erkennbaren
     Zustand "blau werden" -- fuer manche Kinder war frueher nicht erkennbar, ob eine Pille
     an oder aus ist. Ein Haekchen-Kaestchen mit sichtbarem Haken ist eindeutiger. */
  .haekchen-zeile {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    font-weight: bold;
    padding: 0 14px;
    height: 40px;
    border-radius: 10px;
    border: 2px solid var(--border);
    background: var(--bg-stage);
    color: var(--text);
    cursor: pointer;
  }
  .haekchen-zeile input[type="checkbox"] {
    width: 20px;
    height: 20px;
    accent-color: var(--blau);
    cursor: pointer;
    flex-shrink: 0;
  }
  .haekchen-zeile:has(input:disabled) { opacity: 0.4; cursor: default; }

  /* ---- Hilfe-Tooltip ("?"-Kreis) ---- */
  .hilfe-punkt {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: var(--text-soft);
    color: var(--bg-stage);
    font-size: 0.65rem;
    font-weight: bold;
    cursor: help;
    position: relative;
    flex-shrink: 0;
    border: none;
    padding: 0;
    font-family: inherit;
    line-height: 1;
  }
  /* Touch-Zielgroesse: der sichtbare Kreis bleibt bewusst klein (passt neben Labels/Ueberschriften),
     aber die tatsaechlich antippbare Flaeche wird unsichtbar auf ~40x40px vergroessert -- sonst
     auf Handy/Tablet kaum treffbar (war vorher nur 15x15px). */
  .hilfe-punkt::before {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    width: 40px; height: 40px;
    transform: translate(-50%, -50%);
  }
  .hilfe-punkt .hilfe-text {
    display: none;
    position: absolute;
    bottom: 135%;
    left: 50%;
    transform: translateX(-50%);
    background: #222;
    color: #fff;
    padding: 9px 11px;
    border-radius: 7px;
    font-size: 0.76rem;
    font-weight: normal;
    width: 220px;
    white-space: normal;
    line-height: 1.45;
    z-index: 30;
    text-align: left;
    box-shadow: 0 4px 14px rgba(0,0,0,0.25);
  }
  .hilfe-punkt:hover .hilfe-text,
  .hilfe-punkt:focus .hilfe-text,
  .hilfe-punkt:focus-visible .hilfe-text {
    display: block;
  }

  /* ---- Tab-Inhaltsbereiche ---- */
  .tab-inhalt {
    background: var(--bg-stage);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 26px 30px;
    margin-bottom: 28px;
  }

  .tab-hinweis {
    font-size: 0.9rem;
    color: var(--text-soft);
    margin: 0 0 20px;
    line-height: 1.6;
  }

  /* Punkt 22/25 (Berater-Feedback): mehrere Funktionen auf einer Tab-Seite (Geschichte
     üben, Klassenpaket, Gerätesicherung) brauchen sichtbare Trennung statt einer langen
     Scroll-Seite mit gleich gewichtetem Text überall. */
  .inhalt-karte {
    background: var(--bg-stage);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 18px 20px;
    margin-bottom: 16px;
  }

  /* Punkt (neue Rückmeldung): Wer bei Familie/Praxis antippt und noch keine Lizenz hat,
     soll direkt sehen, was es kostet, und einen Weg zum Kauf finden -- nicht nur ein
     leeres Code-Eingabefeld ohne jeden Hinweis, woher der Code kommt. */
  .kauf-karte {
    background: var(--bg-stage);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px 20px;
    margin: 12px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
  }
  .kauf-preis { font-size: 1.3rem; font-weight: bold; color: var(--blau); }
  .kauf-preis-klein { font-size: 0.8rem; font-weight: normal; color: var(--text-soft); }
  .kauf-knopf-app {
    display: inline-block;
    background: var(--blau);
    color: #fff;
    text-decoration: none;
    border-radius: 10px;
    padding: 12px 22px;
    font-weight: bold;
    font-size: 0.95rem;
  }
  .kauf-knopf-app.rot { background: var(--rot); }
  .preisbadge {
    display: inline-block;
    background: var(--rot);
    color: #fff;
    font-size: 0.72rem;
    font-weight: bold;
    padding: 3px 12px;
    border-radius: 20px;
    margin-bottom: 8px;
  }

  .karte-titel {
    margin: 0 0 10px;
    font-size: 1.05rem;
    color: var(--text);
  }

  /* Punkt 24: "So geht's" als klar getrennte Schritte statt Fließtext. */
  .schritte-liste {
    margin: 0 0 18px;
    padding-left: 22px;
    color: var(--text-soft);
    font-size: 0.9rem;
    line-height: 1.7;
  }
  .schritte-liste li { margin-bottom: 4px; }

  .zeile {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 14px;
  }

  .feld-label {
    display: block;
    font-size: 0.88rem;
    color: var(--text-soft);
    margin-bottom: 10px;
  }

  select, .zahl-eingabe {
    font-family: inherit;
    font-size: 0.95rem;
    padding: 8px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg-stage);
    color: var(--text);
  }
  .zahl-eingabe { width: 70px; }

  .wort-vorschau {
    font-size: 0.85rem;
    color: var(--rot);
    background: color-mix(in srgb, var(--rot) 8%, var(--bg-stage));
    border-radius: 6px;
    padding: 8px 10px;
    margin: 10px 0;
    line-height: 1.5;
  }

  textarea {
    width: 100%;
    font-family: inherit;
    font-size: 1rem;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    resize: vertical;
    background: var(--bg-stage);
    color: var(--text);
  }
  textarea#eigenerText, textarea#geschichteText {
    min-height: 220px;
  }

  .aktions-zeile {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 12px;
  }

  .status-text { font-size: 0.85rem; color: var(--text-soft); }
  .sr-nur { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

  .datei-knopf {
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: bold;
    padding: 9px 14px;
    border-radius: 8px;
    border: 2px solid var(--text-soft);
    background: var(--bg-stage);
    color: var(--text-soft);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
  }
  .datei-knopf:hover { background: color-mix(in srgb, var(--text-soft) 12%, var(--bg-stage)); }

  .sicherung-zeile {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
  }

  /* Punkt 1/2/6 (Berater-Feedback): der Lizenzbereich soll nach erfolgreicher Aktivierung
     nicht mehr dauerhaft im Weg stehen -- klappt zu einem kleinen, unauffaelligen Knopf
     zusammen. Wer den Code doch mal ansehen oder die Lizenz entfernen will, klappt ihn
     wieder auf. */
  .lizenz-verwalten-knopf {
    font-family: inherit;
    font-size: 0.85rem;
    color: var(--text-soft);
    background: none;
    border: none;
    padding: 4px 0;
    cursor: pointer;
    text-decoration: underline;
  }
  .lizenz-verwalten-knopf:hover { color: var(--text); }

  .neben-knopf {
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: bold;
    padding: 9px 14px;
    border-radius: 8px;
    border: 2px solid var(--blau);
    background: var(--bg-stage);
    color: var(--blau);
    cursor: pointer;
  }
  .neben-knopf:hover { background: color-mix(in srgb, var(--blau) 10%, var(--bg-stage)); }

  /* ---- Buehne ---- */
  .stage {
    background: var(--buehne-farbe);
    border: 2px solid var(--border);
    border-radius: 16px;
    min-height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 26px;
    margin-bottom: 22px;
  }
  .stage.manuell { cursor: pointer; }

  #wortAnzeige {
    font-size: clamp(2.2rem, 9vw, 3.6rem);
    font-weight: bold;
    color: var(--wort-farbe);
    text-align: center;
    word-break: break-word;
    letter-spacing: var(--zeichenabstand);
    line-height: var(--zeilenabstand);
  }
  #wortAnzeige.platzhalter {
    color: var(--text-soft);
    font-weight: normal;
    font-size: 1.15rem;
  }

  .fortschritt {
    text-align: center;
    color: var(--text-soft);
    font-size: 0.9rem;
    margin-bottom: 22px;
    min-height: 1.2em;
  }

  .regler-zeile {
    margin-bottom: 22px;
    background: var(--bg-stage);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 18px 24px;
  }
  .regler-label {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 2px 8px;
    font-size: 0.92rem;
    margin-bottom: 6px;
  }
  .regler-label span:last-child { color: var(--blau); font-weight: bold; }
  input[type="range"] { width: 100%; accent-color: var(--blau); height: 28px; }
  .regler-endpunkte {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    color: var(--text-soft);
  }
  .regler-stufen {
    display: flex;
    justify-content: space-between;
    gap: 4px;
    height: auto;
    margin-top: 2px;
  }
  .regler-stufen span {
    font-size: 0.62rem;
    color: var(--text-soft);
    white-space: nowrap;
  }

  .faellig-zeile {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: var(--bg-stage);
    border: 1px solid var(--border);
    border-left: 4px solid var(--blau);
    border-radius: 12px;
    padding: 14px 18px;
    margin-bottom: 20px;
  }
  .faellig-kopf { display: flex; align-items: center; gap: 8px; }
  .faellig-titel { font-weight: bold; color: var(--blau); font-size: 0.92rem; }
  .faellig-status-zeile {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
  }

  .knopf-zeile {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 14px;
  }

  button {
    font-family: inherit;
    font-size: 1.05rem;
    font-weight: bold;
    padding: 14px 24px;
    border-radius: 12px;
    border: 2px solid transparent;
    cursor: pointer;
  }

  #btnStart, #btnKannteIch, #btnLosAuto { background: var(--rot); color: #fff; }
  #btnStart:hover, #btnKannteIch:hover, #btnLosAuto:hover { background: #7a000b; }
  #btnStart:disabled { background: #d7bcc0; cursor: default; }

  #btnPause {
    background: var(--bg-stage); color: var(--blau); border-color: var(--blau);
  }
  #btnPause:hover { background: color-mix(in srgb, var(--blau) 10%, var(--bg-stage)); }
  #btnPause:disabled { color: #a9c4d3; border-color: #cfe1ea; cursor: default; }

  #btnNochmal { background: var(--bg-stage); color: var(--rot); border-color: var(--rot); }
  #btnNochmal:hover { background: color-mix(in srgb, var(--rot) 8%, var(--bg-stage)); }

  .reset-knopf {
    background: var(--bg-stage);
    color: var(--text-soft);
    border-color: var(--border);
    font-size: 0.85rem;
    padding: 10px 16px;
  }
  .reset-knopf:hover { background: color-mix(in srgb, var(--text-soft) 10%, var(--bg-stage)); }

  button:disabled { opacity: 0.5; cursor: default; }

  button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 3px solid var(--blau);
    outline-offset: 2px;
  }

  footer {
    margin-top: 34px;
    text-align: center;
    font-size: 0.8rem;
    color: var(--text-soft);
    line-height: 1.6;
  }

  [hidden] { display: none !important; }

  .stufen-balken {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 14px 0;
  }
  .stufen-zeile {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    color: var(--text-soft);
  }
  .stufen-zeile .stufen-name { width: 92px; flex-shrink: 0; }
  .stufen-zeile .stufen-leiste {
    flex: 1;
    height: 14px;
    background: var(--border);
    border-radius: 7px;
    overflow: hidden;
  }
  .stufen-zeile .stufen-fuellung {
    display: block;
    height: 100%;
    background: var(--blau);
    border-radius: 7px;
  }
  .stufen-zeile .stufen-anzahl { width: 30px; text-align: right; flex-shrink: 0; }

  .wort-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
  }
  .wort-chip {
    background: color-mix(in srgb, var(--blau) 12%, var(--bg-stage));
    color: var(--blau);
    border-radius: 999px;
    padding: 4px 11px;
    font-size: 0.82rem;
    font-weight: bold;
  }

  .stolper-satz {
    font-size: 1.5rem;
    line-height: var(--zeilenabstand);
    letter-spacing: var(--zeichenabstand);
    text-align: center;
    padding: 10px 0;
  }
  .stolper-wort {
    display: inline-block;
    background: none;
    border: none;
    font: inherit;
    font-weight: bold;
    color: var(--text);
    cursor: pointer;
    padding: 4px 8px;
    margin: 2px;
    border-radius: 8px;
  }
  .stolper-eigener-eintrag {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-bottom: 6px;
    font-size: 0.9rem;
  }
  .stolper-eigener-eintrag button {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    flex-shrink: 0;
  }
  .stolper-wort:hover { background: color-mix(in srgb, var(--blau) 10%, var(--bg-stage)); }
  .stolper-wort.richtig-getroffen { background: #2e7d32; color: #fff; }
  .stolper-wort.falsch-getroffen { background: color-mix(in srgb, var(--rot) 15%, var(--bg-stage)); text-decoration: line-through; }

  #spielBereich.immersiv {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: var(--bg);
    width: 100vw;
    height: 100vh;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    overflow: hidden;
  }
  /* Die Buehne selbst zentriert das Wort in der ECHTEN Bildschirmmitte, indem sie
     die komplette Flaeche einnimmt (statt nur den Platz zwischen Kopf- und
     Fusszeile zu teilen -- sonst wandert das Wort durch das Gewicht der
     Knopfzeile darunter sichtbar nach oben). Fortschrittstext und Knoepfe liegen
     als duenne Streifen oben/unten DARUEBER.
     Hintergrund- und Wortfarbe kommen bewusst aus denselben Variablen wie die
     kleine Vorschau vor dem Start (--buehne-farbe / --wort-farbe) -- damit beim
     Start nichts "springt", weil sich die Farbe aendert. Voreinstellung ist
     reines Schwarz/Weiss, aber beides ist ueber die Farbwaehler im Ribbon frei
     einstellbar (z.B. auf Creme). */
  #spielBereich.immersiv .stage {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4vw;
  }
  #spielBereich.immersiv .fortschritt {
    position: absolute;
    top: 2.5vh;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 1.1rem;
  }
  #spielBereich.immersiv .knopf-zeile {
    position: absolute;
    bottom: 3vh;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    gap: 14px;
  }
  /* WICHTIG (Fehler gefunden 25.09.2026): #resetKnopfZeile ist -- anders als autoKnoepfe/
     manuellKnoepfe/pausenKnoepfe -- NIE ausgeblendet, UND liegt in der DOM-Struktur gar nicht
     innerhalb von #spielBereich (ein Geschwister-Element). Im Vollbild deckt #spielBereich.
     immersiv trotzdem den ganzen Bildschirm ab und lag optisch genau ueber resetKnopfZeile,
     das dadurch fuer Klicks komplett unerreichbar war ("Andere Wörter wählen" tat nichts).
     :has() erlaubt, resetKnopfZeile trotz Geschwister-Beziehung passend umzupositionieren,
     sobald irgendwo im Dokument ein #spielBereich.immersiv aktiv ist. */
  body:has(#spielBereich.immersiv) #resetKnopfZeile {
    position: fixed;
    /* rc41: unten ueber der Knopfleiste statt oben ueber dem Wort */
    bottom: calc(3vh + 72px);
    left: 0;
    right: 0;
    z-index: 10000; /* #spielBereich.immersiv selbst nutzt z-index: 9999 (siehe weiter unten) -- muss drueberliegen */
  }
  #spielBereich.immersiv #wortAnzeige {
    font-size: clamp(2.6rem, 11vw, 7rem);
  }
  /* Die Pausen-Erinnerung ist ein ganzer Satz, kein einzelnes Wort -- braucht
     deshalb die kleinere Platzhalter-Schrift, auch mitten im Vollbild (sonst
     ueberschreibt die riesige Wort-Schriftgroesse oben den Satz und er läuft
     oben/unten aus dem Bildschirm). */
  #spielBereich.immersiv #wortAnzeige.platzhalter {
    font-size: clamp(1.1rem, 3.4vw, 1.6rem);
    font-weight: normal;
    line-height: 1.5;
    max-width: 700px;
  }
  /* "3 Wörter" / "Ganzer Satz": mehrere Wörter gleichzeitig -- braucht deutlich kleinere
     Schrift als das riesige Einzelwort-Blitzlesen, sonst passt der Text nicht auf die Buehne. */
  #spielBereich.immersiv #wortAnzeige.mehrwort-modus {
    font-size: clamp(1.4rem, 4.5vw, 2.6rem);
    font-weight: bold;
    line-height: 1.9;
    max-width: 900px;
  }
  .lesefokus-aktuell {
    background: var(--blau);
    color: #fff;
    padding: 2px 10px;
    border-radius: 8px;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
  }
  .lesefokus-neben { opacity: 0.55; }
  #spielBereich.immersiv .fortschritt {
    font-size: 1.1rem;
    margin-top: 18px;
    flex-shrink: 0;
  }
  #spielBereich.immersiv .knopf-zeile {
    flex-shrink: 0;
  }
  #spielBereich.immersiv .knopf-zeile button {
    font-size: 1.15rem;
    padding: 16px 28px;
  }
  /* rc41: Auf dem Handy passt die Knopfleiste sonst nicht in eine Zeile, bricht um und
     ragt in die Reset-Knoepfe darueber. Kleinere Knoepfe, kein Umbruch. */
  @media (max-width: 560px) {
    #spielBereich.immersiv .knopf-zeile { gap: 8px; flex-wrap: nowrap; }
    #spielBereich.immersiv .knopf-zeile button { font-size: 1rem; padding: 12px 14px; }
  }

  #diplom { display: none; }

  @media print {
    body * { visibility: hidden; }
    #diplom, #diplom * { visibility: visible; }
    #diplom {
      display: block;
      position: fixed;
      inset: 0;
      -webkit-print-color-adjust: exact;
      print-color-adjust: exact;
    }
    .diplom-rahmen {
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 34px;
      font-family: Verdana, Arial, sans-serif;
      background:
        linear-gradient(#fffaf0, #fffaf0) padding-box,
        linear-gradient(135deg, #96000e, #a85500, #005996, #6a3fa0, #96000e) border-box;
      border: 14px solid transparent;
      border-radius: 26px;
      position: relative;
    }
    .diplom-figuren {
      display: flex;
      justify-content: center;
      align-items: flex-end;
      gap: 18px;
      margin-bottom: 6px;
    }
    .diplom-figuren img { height: 150px; width: auto; filter: drop-shadow(0 4px 6px rgba(0,0,0,0.2)); }
    .diplom-titel { font-size: 3rem; color: #96000e; margin: 0 0 14px; text-shadow: 2px 2px 0 #ffe9b3; }
    .diplom-text { font-size: 1.3rem; margin: 6px 0; }
    .diplom-name { font-size: 1.6rem; font-weight: bold; color: #005996; margin: 14px 0; }
    .diplom-zahl {
      font-size: 1.4rem; margin: 14px 0; font-weight: bold; color: #96000e;
      background: #ffe9b3; padding: 8px 20px; border-radius: 30px; display: inline-block;
    }
    .diplom-datum { font-size: 1rem; color: #555; margin-top: 26px; }
  }


  /* ===== Einstellungen, ruhige Listenform (rc39) =====
     Eine Spalte wie bei Handy-Einstellungen: links der Name, rechts das Bedienelement.
     Vier Gruppen, gleiche Schalter fuer alle Ja/Nein-Werte, keine Rahmen um Einzelpunkte. */
  #darstellungPanel { padding: 10px 28px 18px; }
  #darstellungPanel .einst-gruppe { max-width: 620px; margin: 0 auto; }
  #darstellungPanel .einst-gruppe + .einst-gruppe { border-top: 1px solid var(--border); margin-top: 10px; }
  #darstellungPanel .einst-gruppe-titel {
    font-size: 0.82rem; font-weight: 600; color: var(--text-soft);
    margin: 16px 0 2px; letter-spacing: normal; text-transform: none;
  }
  #darstellungPanel .einst-zeile {
    display: grid; grid-template-columns: minmax(0, 1fr) auto;
    align-items: center; gap: 16px; min-height: 46px; padding: 5px 0;
  }
  #darstellungPanel .einst-zeile[hidden] { display: none; }
  /* Englisch: Silben-Zeilen ganz ausblenden statt eine leere Zeile zu zeigen */
  #darstellungPanel .einst-zeile:has(> .einst-wert > [hidden]:only-child) { display: none; }
  #darstellungPanel .einst-name {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    font-size: 0.95rem; font-weight: normal; color: var(--text); text-align: left;
  }
  #darstellungPanel .einst-name label,
  #darstellungPanel .einst-label { cursor: pointer; font-weight: normal; font-size: inherit; color: inherit; }
  #darstellungPanel .einst-zahl { color: var(--text-soft); font-size: 0.85rem; font-variant-numeric: tabular-nums; }
  #darstellungPanel .einst-zahl #tempoWert { font-weight: normal; color: inherit; font-size: inherit; }
  #darstellungPanel .einst-name .hilfe-punkt { opacity: 0.5; }
  #darstellungPanel .einst-name .hilfe-punkt:hover,
  #darstellungPanel .einst-name .hilfe-punkt:focus-visible { opacity: 1; }
  /* Erklaerung nach rechts aufklappen, da das "?" jetzt links steht (sonst links abgeschnitten) */
  #darstellungPanel .hilfe-punkt .hilfe-text { left: 0; transform: none; width: min(220px, 70vw); }
  #darstellungPanel .einst-zeile:has(input:disabled) .einst-name { opacity: 0.45; }
  #darstellungPanel .einst-wert { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }

  /* Schieberegler */
  #darstellungPanel .einst-wert input[type="range"] { width: 220px; margin: 0; accent-color: var(--blau); }
  #darstellungPanel #reglerZeile .einst-wert { flex-direction: column; align-items: stretch; gap: 2px; }
  #darstellungPanel #reglerZeile .regler-stufen {
    display: flex; justify-content: space-between; width: 220px; margin: 0;
    font-size: 0.68rem; color: var(--text-soft);
  }

  /* Einheitlicher Ja/Nein-Schalter (Haekchen und Silben-Knopf sehen gleich aus) */
  #darstellungPanel .einst-schalter,
  #darstellungPanel .einst-schalter-knopf {
    -webkit-appearance: none; appearance: none;
    position: relative; width: 44px; height: 26px; min-width: 44px; margin: 0; padding: 0;
    border: none; border-radius: 13px; background: var(--border);
    cursor: pointer; font-size: 0; color: transparent; box-shadow: none;
    transition: background-color 0.15s;
  }
  #darstellungPanel .einst-schalter::before,
  #darstellungPanel .einst-schalter-knopf::before {
    content: ""; position: absolute; top: 3px; left: 3px;
    width: 20px; height: 20px; border-radius: 50%; background: #fff;
    box-shadow: 0 1px 2px rgba(0,0,0,0.25); transition: transform 0.15s;
  }
  #darstellungPanel .einst-schalter:checked,
  #darstellungPanel .einst-schalter-knopf.aktiv { background: var(--blau); }
  #darstellungPanel .einst-schalter:checked::before,
  #darstellungPanel .einst-schalter-knopf.aktiv::before { transform: translateX(18px); }
  #darstellungPanel .einst-schalter:disabled { opacity: 0.45; cursor: default; }
  #darstellungPanel .einst-schalter:focus-visible,
  #darstellungPanel .einst-schalter-knopf:focus-visible { outline: 2px solid var(--blau); outline-offset: 2px; }

  /* Auswahl aus mehreren Moeglichkeiten: eine ruhige Leiste statt einzelner Kacheln */
  #darstellungPanel .einst-segment {
    display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 2px;
    border: 1px solid var(--border); border-radius: 10px; background: var(--bg);
  }
  #darstellungPanel .einst-segment > button {
    display: inline-flex; flex-direction: row; align-items: center; justify-content: center;
    min-width: 0; min-height: 32px; height: auto; margin: 0; padding: 5px 12px;
    border: none; border-radius: 8px; background: transparent; box-shadow: none;
    font: inherit; font-size: 0.85rem; font-weight: normal; line-height: 1.2; color: var(--text); cursor: pointer;
  }
  #darstellungPanel .einst-segment > button.tab-aktiv,
  #darstellungPanel .einst-segment > button.aktiv {
    background: var(--bg-stage); color: color-mix(in srgb, var(--blau) 65%, var(--text)); font-weight: 600;
    box-shadow: 0 0 0 1px var(--border);
  }
  #darstellungPanel .einst-segment .icon { display: none; }

  /* Farben: kleine, gleich grosse Felder */
  #darstellungPanel .ribbon-mini-knopf {
    width: 36px; height: 32px; min-width: 0; padding: 0; margin: 0;
    border: 1px solid var(--border); border-radius: 8px; background: var(--bg-stage); color: var(--text);
    font-size: 0.95rem;
  }
  #darstellungPanel .ribbon-mini-knopf.aktiv {
    border-color: var(--blau); background: color-mix(in srgb, var(--blau) 12%, var(--bg-stage)); color: var(--text);
  }
  #darstellungPanel .ribbon-farb-eingabe { width: 32px; height: 32px; margin: 0; border: 1px solid var(--border); border-radius: 8px; }
  #darstellungPanel select { font: inherit; font-size: 0.9rem; }

  /* Schmale Bildschirme: breite Bedienelemente unter den Namen */
  @media (max-width: 560px) {
    #darstellungPanel { padding: 6px 16px 14px; }
    #darstellungPanel .einst-zeile:has(.einst-segment),
    #darstellungPanel .einst-zeile:has(input[type="range"]) { grid-template-columns: 1fr; gap: 6px; }
    #darstellungPanel .einst-zeile:has(.einst-segment) .einst-wert,
    #darstellungPanel .einst-zeile:has(input[type="range"]) .einst-wert { justify-content: flex-start; align-items: flex-start; }
    #darstellungPanel .einst-wert input[type="range"],
    #darstellungPanel #reglerZeile .regler-stufen { width: 100%; }
    #darstellungPanel #reglerZeile .einst-wert { align-items: stretch; }
  }

  /* ===== rc44: Farbpalette (ersetzt den Farbdialog des Betriebssystems) ===== */
  #darstellungPanel .farb-palette {
    display: flex; flex-direction: column; gap: 10px;
    margin: 0 0 8px; padding: 12px 14px;
    border: 1px solid var(--border); border-radius: 12px; background: var(--bg);
  }
  #darstellungPanel .farb-gruppe { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
  #darstellungPanel .farb-gruppe-titel {
    flex: 0 0 100px; font-size: 0.8rem; color: var(--text-soft);
  }
  #darstellungPanel .farb-feld {
    width: 34px; height: 34px; min-width: 0; margin: 0; padding: 0;
    border: 1px solid rgba(0, 0, 0, 0.18); border-radius: 50%;
    cursor: pointer; box-shadow: none;
  }
  #darstellungPanel .farb-feld.aktiv { outline: 3px solid var(--blau); outline-offset: 2px; }
  #darstellungPanel .farb-feld:disabled { opacity: 0.2; cursor: not-allowed; }
  #darstellungPanel .farb-feld:focus-visible { outline: 3px solid var(--blau); outline-offset: 2px; }
  #darstellungPanel .farb-hinweis {
    margin: -2px 0 8px; font-size: 0.82rem; color: var(--text-soft);
  }
  #darstellungPanel .ribbon-farb-eingabe { cursor: pointer; }
  @media (max-width: 560px) {
    #darstellungPanel .farb-gruppe-titel { flex-basis: 100%; }
  }

  /* ===== rc46: Profil pro Kind ===== */
  .sprache-zeile { flex-wrap: wrap; }
  .lese-einstellungen-knopf {
    margin-left: 8px; padding: 6px 12px; border: 1px solid var(--border); border-radius: 8px;
    background: var(--bg-stage); color: var(--text); font: inherit; font-size: 0.9rem; cursor: pointer;
  }
  .lese-einstellungen-knopf.aktiv { border-color: var(--blau); color: var(--blau); font-weight: 600; }
  .ribbon-werkzeug-knopf.profil-geaendert { border-color: var(--blau); color: var(--blau); font-weight: 600; }
  #darstellungPanel .profil-aktionen { max-width: 620px; margin: 14px auto 0; padding-top: 14px; border-top: 1px solid var(--border); }
  #darstellungPanel .profil-hinweis { margin: 0 0 12px; font-size: 0.85rem; color: var(--text-soft); line-height: 1.5; }
  #darstellungPanel .profil-knoepfe { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
  #darstellungPanel .profil-knoepfe button {
    font: inherit; font-size: 0.95rem; padding: 10px 16px; border-radius: 10px; cursor: pointer; margin: 0;
  }
  #darstellungPanel .profil-knopf-neben { background: var(--bg-stage); color: var(--text); border: 1px solid var(--border); }
  #darstellungPanel .profil-knopf-haupt { background: var(--blau); color: #fff; border: 1px solid var(--blau); font-weight: 600; }

  /* ===== rc47: Leseprofil (Übungshinweise) ===== */
  .leseprofil-karte {
    margin: 16px 0; padding: 18px 20px; border: 1px solid var(--border); border-radius: 16px;
    background: var(--bg-stage);
  }
  .lp-kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
  .lp-klein { font-size: 0.8rem; color: var(--text-soft); }
  .lp-titel { margin: 2px 0 0; font-size: 1.2rem; font-weight: 600; color: var(--text); }
  .lp-marke { font-size: 0.78rem; font-weight: 600; padding: 4px 10px; border-radius: 999px;
    background: color-mix(in srgb, #5a9a72 18%, var(--bg-stage)); color: color-mix(in srgb, #2f6b45 70%, var(--text)); white-space: nowrap; }
  .lp-reiter { display: flex; gap: 4px; padding: 4px; margin: 4px 0 14px; border-radius: 12px; background: var(--bg); border: 1px solid var(--border); }
  .lp-reiter button { flex: 1; padding: 8px; border: none; border-radius: 9px; background: transparent; color: var(--text); font: inherit; font-weight: 600; cursor: pointer; }
  .lp-reiter button.aktiv { background: var(--bg-stage); box-shadow: 0 0 0 1px var(--border); }
  .lp-abschnitt { margin: 0 0 4px; font-weight: 600; color: var(--text); }
  .lp-erklaerung { margin: 0 0 12px; font-size: 0.9rem; color: var(--text-soft); line-height: 1.5; }
  .lp-wort { display: flex; justify-content: space-between; align-items: center; gap: 10px;
    padding: 12px 14px; margin-bottom: 8px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-stage); }
  .lp-wort-name { font-weight: 700; font-size: 1.1rem; color: var(--text); }
  .lp-wort-info { font-size: 0.82rem; color: var(--text-soft); }
  .lp-chips { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
  .lp-chip { font-size: 0.75rem; font-weight: 600; padding: 3px 8px; border-radius: 999px;
    background: color-mix(in srgb, #d9b26a 28%, var(--bg-stage)); color: var(--text); }
  .lp-muster { padding: 12px 14px; margin-bottom: 8px; border-left: 4px solid #6aa383; border-radius: 8px;
    background: color-mix(in srgb, #5a9a72 14%, var(--bg-stage)); color: var(--text); line-height: 1.5; }
  .lp-muster strong { display: block; margin-bottom: 2px; }
  .lp-leer { padding: 12px 14px; border-radius: 10px; background: var(--bg); color: var(--text-soft); font-size: 0.9rem; line-height: 1.5; }
  .lp-fuss { margin: 14px 0 10px; padding-top: 10px; border-top: 1px solid var(--border); font-size: 0.8rem; color: var(--text-soft); line-height: 1.5; }
  .lp-reset { font: inherit; font-size: 0.85rem; padding: 6px 12px; border-radius: 8px; border: 1px solid var(--border); background: transparent; color: var(--text-soft); cursor: pointer; }

  /* rc48: Vorlesehilfe im Muster-Hinweis */
  .lp-muster .lp-vorlese { margin-top: 8px; padding-top: 8px; border-top: 1px dashed color-mix(in srgb, #6aa383 45%, transparent); font-size: 0.88rem; }
  .lp-chip { cursor: help; }

  /* ===== rc53: Rechtliches ===== */
  .recht-link-zeile { text-align: center; margin: 4px 0 24px; font-size: 0.8rem; }
  .recht-link-zeile a { color: var(--text-soft); }
  .recht-overlay { position: fixed; inset: 0; z-index: 9000; background: rgba(0,0,0,0.45); display: flex; align-items: flex-start; justify-content: center; overflow-y: auto; padding: 24px 12px; }
  .recht-overlay[hidden] { display: none; }
  .recht-karte { position: relative; max-width: 720px; width: 100%; background: var(--bg-stage); color: var(--text); border-radius: 14px; padding: 28px 26px; line-height: 1.6; font-size: 0.92rem; }
  .recht-karte h2 { margin: 0 34px 6px 0; font-size: 1.25rem; }
  .recht-karte h3 { margin: 22px 0 8px; font-size: 1.05rem; color: var(--blau); }
  .recht-karte p { margin: 0 0 10px; }
  .recht-hinweis { color: var(--text-soft); font-size: 0.82rem; }
  .recht-offen { background: #fff3c4; color: #5a4600; padding: 0 4px; border-radius: 4px; }
  .recht-schliessen { position: absolute; top: 12px; right: 12px; border: 1px solid var(--border); background: var(--bg); color: var(--text); border-radius: 8px; width: 36px; height: 36px; cursor: pointer; font-size: 1rem; }

  /* rc58: Kacheln waehrend des automatischen Oeffnens des eingerichteten Bereichs verbergen */
  html.bereich-wird-geoeffnet #startBildschirm { visibility: hidden; }

  /* rc58: Solange der Kachel-Startbildschirm sichtbar ist, nur die 4 Kacheln zeigen -- die
     Uebungsflaeche, Werkzeugleiste und Lese-Einstellungen erscheinen erst im gewaehlten Modus.
     Sprache, Titel, Hilfe und der Link zu Impressum/Datenschutz bleiben (rechtlich noetig). */
  .app:has(#startBildschirm:not([hidden])) > .ribbon,
  .app:has(#startBildschirm:not([hidden])) > #spielBereich,
  .app:has(#startBildschirm:not([hidden])) > #resetKnopfZeile,
  .app:has(#startBildschirm:not([hidden])) > [id^="inhalt"],
  .app:has(#startBildschirm:not([hidden])) #btnLeseEinstellungen { display: none !important; }

  /* rc60: Praxis-Anfrageformular */
  .praxis-anfrage label { display:block; font-size:.88rem; margin:0 0 10px; color:inherit; }
  .praxis-anfrage input, .praxis-anfrage select { display:block; width:100%; box-sizing:border-box; font:inherit; padding:9px 11px; margin-top:4px; border:1px solid #e3d9c3; border-radius:10px; background:#fff; color:#2f2f2f; }
  .praxis-anfrage .anfrage-zwei { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
  .praxis-anfrage .anfrage-hinweis { font-size:.9rem; background:#f7f1e1; border-radius:10px; padding:10px 12px; margin:0 0 14px; color:#2f2f2f; }
  .praxis-anfrage .anfrage-fehler { color:#96000e; font-size:.9rem; min-height:1.2em; margin:0 0 8px; }
  .praxis-anfrage .anfrage-klein { font-size:.8rem; color:#6b6358; margin:10px 0 0; }
  .praxis-anfrage button[data-anfrage-senden] { width:100%; font:inherit; font-weight:700; padding:12px; border:none; border-radius:12px; background:#005996; color:#fff; cursor:pointer; }

  /* rc62: Vorteile unter den Start-Kacheln (auch auf der Kaufseite verwendet) */
  .vorteile { max-width: 620px; margin: 26px auto 8px; text-align: center; }
  .vorteile h2 { color: #96000e; font-size: 1.5rem; margin: 0 0 6px; }
  .vorteile .vt-sub { font-size: 1.05rem; margin: 0 0 10px; }
  .vorteile .vt-wort { font-weight: bold; color: #005996; font-size: 1.15rem; margin: 0 0 8px; letter-spacing: .02em; }
  .vorteile .vt-kurz { color: var(--text-soft, #6b6358); margin: 0 0 16px; }
  .vorteile .vt-checks { list-style: none; padding: 0; margin: 0 auto 16px; display: inline-grid; gap: 6px; text-align: left; }
  .vorteile .vt-checks li::before { content: "✓"; color: #005996; font-weight: bold; margin-right: 8px; }
  .vorteile .vt-kern { font-weight: bold; font-size: 1.1rem; border-left: 4px solid #96000e; background: rgba(150,0,14,0.06); padding: 12px 16px; border-radius: 10px; text-align: left; margin: 0 0 14px; }
  .vorteile details.vt-mehr { text-align: left; }
  .vorteile details.vt-mehr summary { cursor: pointer; color: #005996; font-weight: bold; text-align: center; padding: 6px; }
  .vorteile details.vt-mehr ul { padding-left: 20px; margin: 10px 0 0; }
  .vorteile details.vt-mehr li { margin-bottom: 8px; line-height: 1.5; }

  /* rc63: Familie/Schule/Praxis OHNE Lizenz: nur Erklaerung, Kauf bzw. Anfrage und Lizenzfeld */
  .app.ohne-lizenz > .ribbon,
  .app.ohne-lizenz > #spielBereich,
  .app.ohne-lizenz > #resetKnopfZeile,
  .app.ohne-lizenz > [id^="inhalt"],
  .app.ohne-lizenz #btnLeseEinstellungen { display: none !important; }

  /* rc64: Vorteile neu -- ein ruhiges Vorher/Nachher-Bild als Blickfang, darunter kurzer Text.
     Farben = Lysamia-Grundfarben (Creme, Anthrazit, Nostra-Rot/-Blau als Silbenfarben). */
  .vorteile2 { max-width: 600px; margin: 34px auto 10px; text-align: left; color: #2f2f2f; }
  .vt2-demo { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 14px; margin: 0 0 26px; }
  .vt2-demo figure { margin: 0; }
  .vt2-demo figcaption { font-size: .8rem; color: #6b6358; text-align: center; margin-top: 6px; }
  .vt2-seite { background: #fff; border: 1px solid #e6dcc6; border-radius: 6px; padding: 10px; height: 118px; overflow: hidden; display: flex; flex-direction: column; gap: 5px; }
  .vt2-seite b { display: block; height: 26px; width: 44%; background: #e9e1cf; border-radius: 3px; margin-bottom: 3px; }
  .vt2-seite i { display: block; height: 5px; background: #cfc6b3; border-radius: 2px; }
  .vt2-pfeil { color: #6b6358; font-size: 1.3rem; }
  .vt2-buehne { background: #f7f1e1; border: 1px solid #e6dcc6; border-radius: 6px; height: 140px; display: flex; align-items: center; justify-content: center; }
  .vt2-wort { font-size: 2.3rem; font-weight: 700; letter-spacing: .03em; }
  .vt2-wort .s1 { color: #96000e; } .vt2-wort .s2 { color: #005996; }
  .vorteile2 h2 { font-size: 1.7rem; line-height: 1.2; margin: 0 0 8px; color: #2f2f2f; }
  .vt2-sub { font-size: 1.08rem; line-height: 1.55; margin: 0 0 22px; }
  .vt2-punkte { list-style: none; padding: 0; margin: 0 0 22px; display: grid; gap: 14px; }
  .vt2-punkte li { display: grid; grid-template-columns: 26px 1fr; gap: 12px; align-items: start; }
  .vt2-punkte svg { width: 24px; height: 24px; color: #005996; margin-top: 2px; }
  .vt2-punkte strong { display: block; font-size: 1rem; }
  .vt2-punkte span { display: block; color: #4a453e; line-height: 1.5; }
  .vt2-kern { font-size: 1.12rem; line-height: 1.5; color: #005996; font-weight: 600; margin: 0 0 8px; padding-top: 16px; border-top: 1px solid #e6dcc6; }
  .vt2-vertrauen { font-size: .88rem; color: #6b6358; margin: 0 0 12px; }
  .vt2-mehr summary { cursor: pointer; color: #005996; font-weight: 600; padding: 4px 0; }
  .vt2-mehr ul { padding-left: 20px; margin: 10px 0 0; }
  .vt2-mehr li { margin-bottom: 8px; line-height: 1.5; }
  @media (max-width: 480px) {
    .vt2-demo { gap: 8px; } .vt2-seite { height: 96px; } .vt2-buehne { height: 112px; } .vt2-wort { font-size: 1.8rem; }
    .vorteile2 h2 { font-size: 1.45rem; }
  }

  /* rc64b: gleiche Hoehe beider Bilder; "uebliche Seite" bewusst unruhiger */
  .vt2-seite, .vt2-buehne { height: 132px; box-sizing: border-box; }
  .vt2-seite { position: relative; }
  .vt2-seite .vt2-bild { position: absolute; right: 10px; top: 40px; width: 34%; height: 40px; border-radius: 3px; background: linear-gradient(135deg,#f2c14e,#e76f51 60%,#5aa9e6); }
  .vt2-seite i.m { background: #f6d55c; } .vt2-seite i.m2 { background: #9ecbf0; }
  .vt2-seite u { position: absolute; left: 10px; bottom: 8px; width: 22px; height: 14px; border-radius: 3px; background: #e76f51; }
  .vt2-seite u.u2 { left: 38px; background: #5aa9e6; }
  @media (max-width: 480px) { .vt2-seite, .vt2-buehne { height: 108px; } .vt2-seite .vt2-bild { top: 34px; height: 30px; } }

  /* ===================== rc65: Eingangsseite nach Entwurf =====================
     Gilt nur, solange der Kachel-Startbildschirm sichtbar ist. Lese-Buehne und Uebung
     bleiben unveraendert (Verdana, BDA-Farben). Schrift Nunito liegt lokal in /fonts. */
  .app:has(#startBildschirm:not([hidden])) { max-width: 1120px; }
  .app:has(#startBildschirm:not([hidden])) > .app-titel,
  .app:has(#startBildschirm:not([hidden])) > footer { display: none; }
  .start-bildschirm { max-width: none; font-family: "Nunito", Verdana, Arial, sans-serif; color: #1b2b4b; }
  .start-bildschirm .start-frage { display: none; }

  .hero { display: grid; grid-template-columns: 1.05fr 1fr; gap: 28px; align-items: center; margin: -6px 0 34px; }
  .hero-logo { font-weight: 800; font-size: 2.6rem; color: #8e1525; margin: 0 0 18px; position: relative; display: inline-block; letter-spacing: -.01em; }
  .hero-funken { position: absolute; right: -22px; top: -6px; width: 22px; height: 18px;
    background: linear-gradient(#f6b733,#f6b733) 4px 0/3px 9px no-repeat, linear-gradient(#f6b733,#f6b733) 12px 6px/9px 3px no-repeat; transform: rotate(18deg); }
  .hero-eyebrow { text-transform: uppercase; letter-spacing: .28em; font-size: .78rem; color: #6b7690; margin: 0 0 10px; font-weight: 600; }
  .hero-titel { font-weight: 800; font-size: clamp(2.6rem, 6vw, 4.2rem); line-height: 1.02; margin: 0 0 18px; color: #1b2b4b; letter-spacing: -.02em; }
  .hero-rot { color: #8e1525; position: relative; display: inline-block; }
  .hero-rot::after { content: ""; position: absolute; left: 2%; right: 2%; bottom: -10px; height: 7px; border-radius: 7px; background: #f6c143; transform: rotate(-1.2deg); }
  .hero-sub { font-size: 1.35rem; line-height: 1.35; margin: 0 0 22px; color: #1b2b4b; }
  .hero-sub strong { display: block; font-weight: 800; }
  .hero-sub span { font-weight: 600; color: #3b4a68; }
  .hero-punkte { list-style: none; padding: 0; margin: 0 0 26px; display: grid; gap: 14px; }
  .hp { display: grid; grid-template-columns: 54px 1fr; gap: 14px; align-items: center; font-size: 1.05rem; line-height: 1.3; }
  .hp strong { display: block; font-weight: 800; }
  .hp .hp-x { display: block; color: #3b4a68; font-weight: 600; }
  .hp .hp-x:empty { display: none; }
  .hp-icon { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; }
  .hp-icon svg { width: 28px; height: 28px; }
  .hp1 .hp-icon { background: #fde8c8; color: #b0611a; }
  .hp2 .hp-icon { background: #dcebfa; color: #1e5f9e; }
  .hp3 .hp-icon { background: #dff2e3; color: #2f7a46; }
  .hp4 .hp-icon { background: #fbe0e0; color: #8e1525; }
  .hero-knoepfe { display: flex; gap: 14px; flex-wrap: wrap; }
  .hero-knopf-haupt, .hero-knopf-neben { font-family: inherit; font-weight: 800; font-size: 1.15rem; border-radius: 14px; padding: 14px 30px; cursor: pointer; }
  .hero-knopf-haupt { background: #8e1525; color: #fff; border: 2px solid #8e1525; }
  .hero-knopf-neben { background: #fff; color: #1b2b4b; border: 2px solid #c98a91; }
  .hero-knopf-haupt:focus-visible, .hero-knopf-neben:focus-visible, .start-bildschirm .kachel:focus-visible { outline: 3px solid #f6c143; outline-offset: 3px; }

  .hero-bild { position: relative; min-height: 470px; }
  .hero-foto { position: absolute; inset: 0 0 auto auto; width: 100%; height: 330px; object-fit: cover; object-position: 60% 30%; border-radius: 28px;
    -webkit-mask-image: radial-gradient(ellipse 85% 90% at 62% 40%, #000 60%, transparent 100%); mask-image: radial-gradient(ellipse 85% 90% at 62% 40%, #000 60%, transparent 100%); }
  .hero-demo { position: absolute; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: 1fr auto 1.05fr; align-items: end; gap: 10px; }
  .hero-demo figure { margin: 0; }
  .hero-demo .vt2-seite { height: 150px; box-shadow: 0 10px 24px rgba(27,43,75,.14); transform: rotate(-3deg); background: #fff; }
  .hd-pfeil { color: #f6b733; font-size: 2.2rem; align-self: center; margin-bottom: 50px; }
  .hd-tablet { height: 160px; border: 9px solid #1b2b4b; border-radius: 22px; background: #fffdf8; display: grid; place-items: center; box-shadow: 0 12px 26px rgba(27,43,75,.18); transform: rotate(2deg); }
  .hd-tablet .vt2-wort { font-family: "Nunito", Verdana, sans-serif; font-weight: 800; font-size: 2.4rem; }
  .hero-demo figcaption { text-align: center; margin-top: 12px; font-size: .82rem; color: #3b4a68; }
  .hd-marke { display: inline-block; background: #8d94a3; color: #fff; border-radius: 999px; padding: 3px 14px; font-weight: 800; margin-bottom: 5px; }
  .hd-marke.gelb { background: #fde7a3; color: #1b2b4b; }
  .hd-x { display: block; }

  .start-bereich-titel { font-weight: 800; font-size: 1.4rem; margin: 0 0 14px; color: #1b2b4b; text-align: center; }
  .start-bildschirm .kachel-gitter { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 0 0 22px; }
  .start-bildschirm .kachel { font-family: inherit; border: 0; border-radius: 22px; padding: 22px 14px 18px; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; color: #1b2b4b; cursor: pointer; min-height: 0; }
  .start-bildschirm .kachel-icon { font-size: 3rem; line-height: 1.1; }
  .start-bildschirm .kachel-titel { font-weight: 800; font-size: 1.35rem; }
  .start-bildschirm .kachel-untertitel { font-weight: 600; font-size: .95rem; color: #3b4a68; line-height: 1.35; min-height: 2.6em; }
  .start-bildschirm .kachel-status, .start-bildschirm .kachel-schloss { display: none !important; }
  .kachel-pfeil { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-size: 1.25rem; font-weight: 800; margin-top: 6px; }
  .k-familie { background: #fff4dc; } .k-familie .kachel-pfeil { background: #f9d77e; color: #8e1525; }
  .k-schule { background: #eaf3fc; } .k-schule .kachel-pfeil { background: #a9d0f5; color: #1b2b4b; }
  .k-praxis { background: #e9f6ec; } .k-praxis .kachel-pfeil { background: #b5e3c0; color: #1b2b4b; }
  .k-demo { background: #fde9ea; } .k-demo .kachel-pfeil { background: #f6b5b9; color: #8e1525; }

  .kern-banner { display: flex; gap: 18px; align-items: center; background: #eef4fb; border-radius: 22px; padding: 20px 24px; margin: 0 0 20px; }
  .kern-icon { width: 54px; height: 54px; border-radius: 50%; background: #d6e6f8; color: #1e5f9e; display: grid; place-items: center; flex: none; }
  .kern-icon svg { width: 28px; height: 28px; }
  .kern-banner p { margin: 0; font-size: 1.2rem; line-height: 1.35; }
  .kern-banner strong { display: block; font-weight: 800; }
  .vertrauen-leiste { list-style: none; padding: 0; margin: 0 0 18px; display: flex; justify-content: center; flex-wrap: wrap; gap: 10px 0; color: #3b4a68; font-size: .92rem; font-weight: 600; }
  .vertrauen-leiste li { display: flex; align-items: center; gap: 10px; padding: 0 22px; }
  .vertrauen-leiste li + li { border-left: 1px solid #cfd6e2; }
  .vertrauen-leiste svg { width: 26px; height: 26px; flex: none; }
  .start-bildschirm .vt2-mehr { max-width: 760px; margin: 0 auto 10px; font-family: Verdana, Arial, sans-serif; color: #2f2f2f; }

  @media (max-width: 900px) {
    .hero { grid-template-columns: 1fr; }
    .hero-bild { min-height: 430px; }
    .start-bildschirm .kachel-gitter { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 480px) {
    .hero-logo { font-size: 2.1rem; }
    .hero-sub { font-size: 1.15rem; }
    .hero-bild { min-height: 380px; }
    .hero-foto { height: 250px; }
    .hero-demo .vt2-seite { height: 110px; } .hd-tablet { height: 118px; border-width: 7px; } .hd-tablet .vt2-wort { font-size: 1.7rem; }
    .hd-pfeil { font-size: 1.6rem; margin-bottom: 40px; }
    .hero-demo figcaption { font-size: .72rem; }
    .vertrauen-leiste { flex-direction: column; align-items: flex-start; gap: 10px; }
    .vertrauen-leiste li { padding: 0; } .vertrauen-leiste li + li { border-left: 0; }
    .start-bildschirm .kachel-icon { font-size: 2.4rem; }
  }
  /* rc65b: Gesicht sichtbar lassen, Vorher/Nachher tiefer; Logo am Handy nicht unter der Sprachzeile */
  .hero-bild { min-height: 560px; }
  .hero-foto { height: 380px; object-position: 58% 62%; }
  .hd-pfeil { font-size: 2.8rem; }
  @media (max-width: 900px) { .hero-bild { min-height: 500px; } }
  @media (max-width: 480px) {
    .hero { margin-top: 14px; }
    .hero-bild { min-height: 420px; } .hero-foto { height: 280px; object-position: 58% 60%; }
  }

  /* rc66: Bild groesser und weniger beschnitten; am Handy direkt unter "Reizarm lesen." */
  .hero { grid-template-columns: 1.05fr 1fr; grid-template-areas: "kopf bild" "rest bild"; align-items: start; row-gap: 0; }
  .hero-kopf { grid-area: kopf; align-self: end; }
  .hero-rest { grid-area: rest; }
  .hero-bild { grid-area: bild; min-height: 0; position: relative; align-self: center; }
  .hero-foto { position: relative; inset: auto; display: block; width: 100%; height: auto; aspect-ratio: 944 / 746; object-fit: cover; object-position: 50% 30%;
    border-radius: 28px; -webkit-mask-image: none; mask-image: none; }
  .hero-demo { position: relative; left: auto; right: auto; bottom: auto; margin: -96px 0 0; padding: 0 4px; }
  @media (max-width: 900px) {
    .hero { grid-template-columns: 1fr; grid-template-areas: "kopf" "bild" "rest"; }
    .hero-bild { margin: 6px 0 22px; }
  }
  @media (max-width: 480px) {
    .hero-foto { height: auto; }
    .hero-demo { margin-top: -64px; }
  }
  .hero-demo { margin-top: -70px; }
  @media (max-width: 480px) { .hero-demo { margin-top: -44px; } }

  /* rc67: Bild "herausgezoomt" -- kleiner dargestellt, Raender weich in den Hintergrund ausgeblendet,
     damit das Maedchen nicht so gross wirkt (mehr Luft rundherum, wie im Entwurf). */
  .hero-foto { width: 78%; margin: 18px auto 0; border-radius: 0;
    -webkit-mask-image: radial-gradient(ellipse 72% 70% at 50% 46%, #000 62%, transparent 100%);
            mask-image: radial-gradient(ellipse 72% 70% at 50% 46%, #000 62%, transparent 100%); }
  .hero-demo { margin-top: -58px; }
  @media (max-width: 480px) { .hero-foto { width: 84%; margin-top: 8px; } .hero-demo { margin-top: -36px; } }
  .hero-foto { -webkit-mask-image: radial-gradient(ellipse 52% 54% at 50% 47%, #000 72%, transparent 100%);
                       mask-image: radial-gradient(ellipse 52% 54% at 50% 47%, #000 72%, transparent 100%); }

  /* rc67b: Bild wie im Entwurf -- Kopf, Schultern und Arme sichtbar, Tablet unten davor */
  .hero-foto { width: 100%; margin: 0; aspect-ratio: 964 / 850; border-radius: 26px;
    -webkit-mask-image: linear-gradient(#000 80%, transparent 100%); mask-image: linear-gradient(#000 80%, transparent 100%); }
  .hero-demo { margin-top: -15%; }
  .hero-demo .hd-vorher { margin-left: -6px; }
  @media (max-width: 480px) { .hero-foto { width: 100%; margin: 0; } .hero-demo { margin-top: -15%; } }
  .hero-foto { -webkit-mask-image: linear-gradient(#000 88%, transparent 100%); mask-image: linear-gradient(#000 88%, transparent 100%); }
  .hero-demo { margin-top: -10.5%; }
  @media (max-width: 480px) { .hero-demo { margin-top: -10.5%; } }

  /* rc70: linke Spalte ruhiger und grosszuegiger verteilt */
  .hero { column-gap: 56px; grid-template-rows: auto auto; align-content: center; }
  .hero-kopf { align-self: end; padding-top: 8px; }
  .hero-rest { align-self: start; }
  .hero-logo { font-size: 2.8rem; margin-bottom: 26px; }
  .hero-eyebrow { margin-bottom: 14px; }
  .hero-titel { margin-bottom: 26px; }
  .hero-sub { font-size: 1.45rem; line-height: 1.4; margin-bottom: 34px; max-width: 30ch; }
  .hero-punkte { gap: 22px; margin-bottom: 8px; }
  .hp { grid-template-columns: 60px 1fr; gap: 18px; font-size: 1.16rem; }
  .hp-icon { width: 60px; height: 60px; }
  .hp-icon svg { width: 30px; height: 30px; }
  .hp .hp-x { font-size: 1.02rem; margin-top: 2px; }
  .vertrauen-leiste { font-size: 1rem; }
  @media (max-width: 900px) {
    .hero-sub { max-width: none; font-size: 1.3rem; margin-bottom: 26px; }
    .hp { font-size: 1.08rem; }
  }
  @media (max-width: 480px) {
    .hero-logo { font-size: 2.2rem; margin-bottom: 16px; }
    .hero-titel { margin-bottom: 18px; }
    .hero-sub { font-size: 1.2rem; }
    .hp { grid-template-columns: 52px 1fr; gap: 14px; font-size: 1.02rem; }
    .hp-icon { width: 52px; height: 52px; } .hp-icon svg { width: 26px; height: 26px; }
  }
  .start-bildschirm .vt2-mehr summary { text-align: center; }

  /* rc72: Familie Bildschirm 1 -- ruhig, eine Karte, ein Hauptknopf */
  #familiePanel { font-family: "Nunito", Verdana, Arial, sans-serif; color: #1b2b4b; }
  #familiePanel .zurueck-zum-start { font-weight: 800; }
  .fam-kopf { display: flex; align-items: center; gap: 16px; margin: 6px 0 18px; }
  .fam-kopf[hidden] { display: none; }
  .fam-ic { width: 64px; height: 64px; border-radius: 50%; background: #fff4dc; display: grid; place-items: center; font-size: 2.1rem; flex: none; }
  .fam-kopf h2 { margin: 0 0 4px; font-size: 1.7rem; font-weight: 800; line-height: 1.15; }
  .fam-kopf p { margin: 0; color: #3b4a68; font-size: 1.02rem; line-height: 1.4; }
  .fam-karte { background: #fff; border-radius: 22px; padding: 22px; box-shadow: 0 1px 0 #e9e1cf; }
  .fam-karte[hidden] { display: none; }
  .fam-karte.blass { opacity: .5; }
  .fam-preis { font-size: 2.4rem; font-weight: 800; margin: 0 0 12px; }
  .fam-preis small { font-size: .95rem; font-weight: 600; color: #3b4a68; }
  .fam-liste { list-style: none; padding: 0; margin: 0 0 10px; display: grid; gap: 10px; font-size: 1.02rem; line-height: 1.35; }
  .fam-liste li { display: grid; grid-template-columns: 22px 1fr; gap: 8px; }
  .fam-liste b { color: #1e5f9e; }
  .fam-fussnote { font-size: .85rem; color: #6b6358; margin: 6px 0 16px; }
  .fam-kaufen { display: block; text-align: center; background: #8e1525; color: #fff; font-weight: 800; font-size: 1.15rem; border-radius: 14px; padding: 15px; text-decoration: none; }
  .fam-kaufen:focus-visible, .fam-code-link:focus-visible { outline: 3px solid #f6c143; outline-offset: 3px; }
  .fam-code-link { display: block; margin: 18px auto 6px; background: none; border: 0; cursor: pointer; font-family: inherit; color: #1e5f9e; text-align: center; font-size: 1rem; line-height: 1.5; }
  .fam-code-link strong { display: block; font-weight: 800; }
  .fam-code-link span { color: #3b4a68; font-weight: 600; }
  .fam-code { margin-top: 10px; }
  #famCodeBereich { background: #fff; border-radius: 18px; padding: 16px; }
  .fam-aktivieren { font-family: inherit; font-weight: 800; }
  .fam-code-hinweis { font-size: .85rem; color: #6b6358; margin: 10px 0 0; }
  #familiePanel .lizenz-status-leer { display: none; }
  #familiePanel #btnLizenzEntfernenFamilie, #familiePanel #btnLizenzAnzeigenFamilie { display: none !important; }
  .fam-code-link[hidden] { display: none; }
  .fam-karte { background: #fbf7ee; border: 1px solid #ece3d0; box-shadow: none; }
  #famCodeBereich { background: #fbf7ee; border: 1px solid #ece3d0; }
  /* rc73: App-Symbol statt Familien-Emoji -- so erkennen Familien das Symbol auf ihrem Startbildschirm wieder */
  .fam-ic-app { width: 64px; height: 64px; border-radius: 16px; flex: none; box-shadow: 0 2px 6px rgba(27,43,75,.15); }

  /* rc74: Lesetiere */
  #familiePanel #familieProfilZeile label, #familiePanel #kindAuswahlFamilie,
  #familiePanel #btnKindHinzufuegenFamilie, #familiePanel #btnKindUmbenennenFamilie { display: none !important; }
  .tier-bereich { text-align: center; margin: 4px 0 10px; font-family: "Nunito", Verdana, Arial, sans-serif; color: #1b2b4b; }
  .tier-bereich[hidden] { display: none; }
  .tier-bereich h2, .tier-overlay-karte h2 { font-size: 1.6rem; font-weight: 800; margin: 0 0 4px; }
  .tier-unter { color: #3b4a68; margin: 0 0 16px; line-height: 1.45; }
  .tier-gitter, .tier-wahl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; max-width: 420px; margin: 0 auto; }
  .tier-kachel { font-family: inherit; color: #1b2b4b; background: #fff; border: 2px solid #ece3d0; border-radius: 20px; padding: 12px 6px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 2px; }
  .tier-kachel .tier-e { font-size: 2.6rem; line-height: 1.15; }
  .tier-kachel b { font-size: .98rem; }
  .tier-kachel small { font-size: .78rem; color: #6b6358; line-height: 1.25; }
  .tier-kachel.gewaehlt { border-color: #f6c143; background: #fff8e3; }
  .tier-kachel.vergeben { opacity: .3; cursor: default; }
  .tier-kachel.tier-neu { border-style: dashed; background: transparent; color: #6b6358; }
  .tier-kachel:focus-visible, .tier-haupt:focus-visible, .tier-neben:focus-visible { outline: 3px solid #f6c143; outline-offset: 2px; }
  .tier-frei { color: #3b4a68; font-weight: 600; margin: 14px 0 4px; }
  .tier-hinweis { background: #eef4fb; border-radius: 16px; padding: 12px 14px; font-size: .9rem; line-height: 1.45; margin: 14px auto 0; max-width: 420px; text-align: left; }
  .tier-hinweis.gelb { background: #fff8e3; }
  .tier-hinweis[hidden] { display: none; }
  .tier-overlay { position: fixed; inset: 0; background: rgba(248,244,236,.97); z-index: 9000; display: grid; place-items: center; padding: 16px; overflow-y: auto;
    padding-top: calc(16px + env(safe-area-inset-top, 0px)); padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
  .tier-overlay[hidden] { display: none; }
  .tier-overlay-karte { width: 100%; max-width: 460px; text-align: center; font-family: "Nunito", Verdana, Arial, sans-serif; color: #1b2b4b; }
  .tier-haupt, .tier-neben { display: block; width: 100%; font-family: inherit; font-weight: 800; font-size: 1.1rem; border-radius: 14px; padding: 14px; margin-top: 12px; cursor: pointer; }
  .tier-haupt { background: #8e1525; color: #fff; border: 2px solid #8e1525; }
  .tier-haupt:disabled { opacity: .45; cursor: default; }
  .tier-neben { background: #fff; color: #1b2b4b; border: 2px solid #c98a91; }
  .lp-geraet { font-size: .88rem; color: #3b4a68; background: #eef4fb; border-radius: 12px; padding: 8px 12px; margin: 6px 0 10px; }
  .tier-overlay { background: #f8f4ec; }