/* Rätselrunde: Gestaltung
 * Schriften sind bewusst Systemschriften (Verdana, Georgia): sehr gut lesbar
 * und ohne Einbindung externer Dienste (DSGVO).
 */
:root {
  --grund: #EAF0F5;
  --papier: #FFFFFF;
  --tinte: #1B2A3A;
  --tinte-leise: #4A5B6C;
  --blau: #24527F;
  --blau-dunkel: #183B5E;
  --rot: #B3261E;
  --gruen: #2E7446;
  --gruen-hell: #DCEFE2;
  --gelb: #F5C543;
  --gelb-hell: #FFF3CC;
  --linie: #C9D4DE;
  --rund: 10px;
  --schrift: Verdana, "DejaVu Sans", Tahoma, sans-serif;
  --titel: Georgia, "Times New Roman", serif;
}

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

html { font-size: 19px; -webkit-text-size-adjust: 100%; }
@media (min-width: 600px) { html { font-size: 20px; } }

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

main {
  max-width: 620px;
  margin: 0 auto;
  padding: 1rem 1rem 3rem;
}

h2, h3 { font-family: var(--titel); font-weight: 700; line-height: 1.2; }
h2 { font-size: 1.6rem; margin: 0.6rem 0 0.4rem; }
h3 { font-size: 1.25rem; margin: 1.6rem 0 0.5rem; }
h2:focus { outline: none; }
p { margin: 0.5rem 0; }

:focus-visible { outline: 3px solid var(--gelb); outline-offset: 2px; }

/* ---------- Kopf ---------- */
.kopf { margin-bottom: 0.5rem; }
.marke { font-family: var(--titel); font-size: 1.1rem; color: var(--blau); margin: 0; font-weight: 700; }
.zaehler { color: var(--tinte-leise); font-size: 0.9rem; margin: 0.3rem 0 0.35rem; }
.fortschritt { display: flex; gap: 6px; }
.fortschritt span { flex: 1; height: 8px; border-radius: 4px; background: var(--linie); }
.fortschritt span.fertig { background: var(--gruen); }
.fortschritt span.aktiv { background: var(--blau); }

.schritt { background: var(--papier); border-radius: var(--rund); padding: 1.1rem 1.1rem 1.4rem; box-shadow: 0 1px 0 var(--linie); }
.anleitung { color: var(--tinte-leise); font-size: 0.95rem; }

/* ---------- Abreißkalender ---------- */
.blatt {
  position: relative;
  width: min(260px, 80%);
  margin: 0.8rem auto 1.2rem;
  padding: 1.6rem 1rem 1.1rem;
  text-align: center;
  background: var(--papier);
  border: 2px solid var(--tinte);
  border-top: 22px solid var(--blau);
  border-radius: 4px 4px 8px 8px;
  box-shadow: 6px 6px 0 var(--linie);
}
/* Lochung oben wie bei einem echten Abreißblock */
.blatt::before {
  content: "";
  position: absolute;
  top: -15px; left: 10px; right: 10px;
  height: 8px;
  background: radial-gradient(circle, var(--grund) 3.5px, transparent 4px) 0 0 / 18px 8px repeat-x;
}
.blatt-monat { font-size: 1rem; margin: 0; letter-spacing: 0.02em; }
.blatt-tag { font-family: var(--titel); font-size: 6.5rem; line-height: 1; margin: 0.2rem 0; font-weight: 700; color: var(--tinte); }
.blatt-wochentag { font-size: 1.15rem; margin: 0; font-weight: 700; }
.blatt.sonntag .blatt-tag, .blatt.sonntag .blatt-wochentag { color: var(--rot); }
.blatt.sonntag { border-top-color: var(--rot); }

.spruch { margin: 0.8rem 0; padding: 0.7rem 1rem; background: var(--gelb-hell); border-left: 5px solid var(--gelb); border-radius: 0 var(--rund) var(--rund) 0; }
.spruch p { font-family: var(--titel); font-size: 1.2rem; font-style: italic; margin: 0; }
.spruch footer { font-size: 0.8rem; color: var(--tinte-leise); margin-top: 0.3rem; }

/* ---------- Knöpfe ---------- */
.knopf {
  display: block;
  width: 100%;
  min-height: 58px;
  margin: 0.7rem 0 0;
  padding: 0.7rem 1rem;
  font: 700 1.05rem var(--schrift);
  text-align: center;
  text-decoration: none;
  border-radius: var(--rund);
  border: 2px solid transparent;
  cursor: pointer;
}
.knopf.haupt { background: var(--blau); color: #fff; }
.knopf.haupt:hover { background: var(--blau-dunkel); }
.knopf.zweit { background: var(--papier); color: var(--blau); border-color: var(--blau); }
.reihe { display: flex; gap: 0.6rem; }
.reihe .knopf { flex: 1; }
.leise { display: block; margin: 0.9rem auto 0; background: none; border: 0; color: var(--tinte-leise); font: 0.9rem var(--schrift); text-decoration: underline; cursor: pointer; padding: 0.5rem; }

.meldung { min-height: 1.5em; font-weight: 700; margin-top: 0.8rem; }
.meldung.gut { color: var(--gruen); }
.meldung.schlecht { color: var(--rot); }
.klein { font-size: 0.85rem; color: var(--tinte-leise); }

/* ---------- Sudoku ---------- */
.sudoku {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  width: min(100%, 450px);
  margin: 0.8rem auto;
  border: 3px solid var(--tinte);
  border-radius: 6px;
  overflow: hidden;
}
.zelle {
  aspect-ratio: 1;
  font: 700 1.2rem var(--schrift);
  color: var(--blau);
  background: var(--papier);
  border: 0;
  border-right: 1px solid var(--linie);
  border-bottom: 1px solid var(--linie);
  padding: 0;
  cursor: pointer;
}
.zelle.rand-rechts { border-right: 3px solid var(--tinte); }
.zelle.rand-unten { border-bottom: 3px solid var(--tinte); }
.zelle.vorgabe { color: var(--tinte); background: #F2F5F8; cursor: default; }
.zelle.gewaehlt { background: var(--gelb-hell); box-shadow: inset 0 0 0 3px var(--gelb); }
.zelle.falsch { color: var(--rot); background: #FBE4E2; }

.ziffern { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.45rem; width: min(100%, 450px); margin: 0 auto; }
.ziffer { margin: 0; min-height: 54px; font-size: 1.35rem; background: var(--papier); color: var(--tinte); border-color: var(--tinte); }
.ziffer.loeschen { grid-column: span 5; font-size: 1rem; min-height: 50px; }

/* ---------- Wortsuche ---------- */
.wortsuche { display: grid; gap: 3px; width: min(100%, 420px); margin: 0.8rem auto; }
.buchstabe {
  aspect-ratio: 1;
  font: 700 1.2rem var(--schrift);
  color: var(--tinte);
  background: #F2F5F8;
  border: 0;
  border-radius: 6px;
  padding: 0;
  cursor: pointer;
}
.buchstabe.gefunden { background: var(--gruen-hell); color: var(--gruen); }
.buchstabe.start { background: var(--blau); color: #fff; }
.buchstabe.tipp { background: var(--gelb); }

.wortliste { list-style: none; padding: 0; margin: 0.6rem 0; display: flex; flex-wrap: wrap; gap: 0.45rem; }
.wortliste li { padding: 0.3rem 0.75rem; border: 2px solid var(--linie); border-radius: 999px; font-weight: 700; }
.wortliste li.gefunden { border-color: var(--gruen); color: var(--gruen); text-decoration: line-through; }

/* ---------- Wortsalat ---------- */
.hinweis-text { font-family: var(--titel); font-size: 1.25rem; font-style: italic; margin: 0.4rem 0 0.8rem; }
.felder { display: flex; gap: 5px; justify-content: center; margin: 0.6rem 0 1rem; }
.feld { flex: 1 1 0; max-width: 46px; min-width: 0; height: 50px; border-bottom: 4px solid var(--tinte); font: 700 1.5rem var(--schrift); display: flex; align-items: center; justify-content: center; }
.felder.richtig .feld { color: var(--gruen); border-color: var(--gruen); }
.steine { display: flex; gap: 6px; justify-content: center; }
.stein { flex: 1 1 0; max-width: 58px; min-width: 0; width: auto; min-height: 58px; margin: 0; padding: 0; font-size: 1.5rem; background: var(--gelb-hell); color: var(--tinte); border-color: var(--gelb); }
.stein:disabled { opacity: 0.25; cursor: default; }

/* ---------- Memory ---------- */
.memory { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.55rem; margin: 0.8rem 0; }
.karte {
  aspect-ratio: 3 / 4;
  font-size: 2.2rem;
  border: 0;
  border-radius: var(--rund);
  background: var(--blau) radial-gradient(circle at 50% 50%, rgba(255,255,255,0.18) 0 22%, transparent 23%);
  cursor: pointer;
  padding: 0;
  transition: transform 0.2s;
}
.karte.offen { background: var(--papier); box-shadow: inset 0 0 0 3px var(--blau); }
.karte.paar { box-shadow: inset 0 0 0 3px var(--gruen); background: var(--gruen-hell); }

/* ---------- Quiz ---------- */
.frage { font-family: var(--titel); font-size: 1.3rem; font-weight: 700; }
.optionen .option { background: var(--papier); color: var(--tinte); border-color: var(--linie); text-align: left; font-weight: 400; }
.option.richtig { border-color: var(--gruen); background: var(--gruen-hell); font-weight: 700; }
.option.falsch { border-color: var(--rot); background: #FBE4E2; }
.option:disabled { cursor: default; opacity: 1; }
.ergebnis { font-size: 1.2rem; font-weight: 700; }

/* ---------- Abschluss ---------- */
.serie { display: flex; align-items: baseline; gap: 0.6rem; margin: 0.6rem 0; }
.serie-zahl { font-family: var(--titel); font-size: 4rem; font-weight: 700; color: var(--rot); line-height: 1; }
.serie-text { font-size: 1.1rem; font-weight: 700; }
.tagesbuchstabe { font-family: var(--titel); font-size: 3.5rem; font-weight: 700; color: var(--blau); text-align: center; margin: 0; }
.wochenwort { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin: 0.6rem 0; }
.wochen-feld { border: 2px dashed var(--linie); border-radius: 8px; text-align: center; padding: 0.4rem 0 0.3rem; }
.wochen-feld.voll { border: 2px solid var(--blau); background: #EEF4FA; }
.wochen-feld.heute { border-color: var(--gelb); background: var(--gelb-hell); }
.wochen-buchstabe { display: block; font: 700 1.5rem var(--titel); }
.wochen-tag { display: block; font-size: 0.75rem; color: var(--tinte-leise); }
label { display: block; font-weight: 700; margin-top: 0.8rem; }
input[type="text"] { width: 100%; min-height: 56px; font: 700 1.3rem var(--schrift); padding: 0.5rem 0.8rem; border: 2px solid var(--tinte); border-radius: var(--rund); text-transform: uppercase; margin-top: 0.4rem; }
.vorschau { margin-top: 1.4rem; padding: 0.8rem 1rem; border-radius: var(--rund); background: var(--grund); }

.gesperrt-liste { list-style: none; padding: 0; }
.gesperrt-liste li { padding: 0.6rem 0.8rem 0.6rem 2.4rem; margin: 0.4rem 0; background: #F2F5F8; border-radius: 8px; position: relative; color: var(--tinte-leise); }
.gesperrt-liste li::before { content: "🔒"; position: absolute; left: 0.7rem; }

/* ---------- Testleiste ---------- */
.test-leiste { max-width: 620px; margin: 0 auto; padding: 0.5rem 1rem; font-size: 0.8rem; color: var(--tinte-leise); }
.test-leiste button { font: 0.8rem var(--schrift); }

/* ---------- Bewegung ---------- */
.wackeln { animation: wackeln 0.35s; }
@keyframes wackeln { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
@media (prefers-reduced-motion: reduce) {
  .wackeln { animation: none; }
  .karte { transition: none; }
}

[hidden] { display: none !important; }
.bilanz { padding-left: 1.2rem; margin: 0.4rem 0; }
.bilanz li { margin: 0.2rem 0; }

/* ---------- Kreuzworträtsel ---------- */
.kreuzwort { display: grid; gap: 2px; width: min(100%, 400px); margin: 0.8rem auto 0.4rem; }
.kw-leer { aspect-ratio: 1; }
.kw-zelle {
  position: relative;
  aspect-ratio: 1;
  padding: 0;
  background: var(--papier);
  border: 2px solid var(--tinte);
  border-radius: 3px;
  cursor: pointer;
  color: var(--tinte);
}
.kw-nr { position: absolute; top: 1px; left: 3px; font-size: 0.6rem; font-weight: 700; line-height: 1; }
.kw-buchstabe { font: 700 1.25rem var(--schrift); }
.kw-zelle.im-wort { background: var(--gelb-hell); }
.kw-zelle.aktiv { background: var(--gelb); }
.kw-zelle.falsch { color: var(--rot); background: #FBE4E2; }
.kw-aktiv { font-family: var(--titel); font-size: 1.15rem; font-weight: 700; min-height: 1.6em; margin: 0.6rem 0; padding: 0.5rem 0.7rem; background: #EEF4FA; border-radius: 8px; }
.kw-aktiv:empty { display: none; }

.tastatur { display: flex; flex-direction: column; gap: 5px; margin: 0.5rem 0; }
.tasten-reihe { display: flex; gap: 4px; justify-content: center; }
.taste { flex: 1 1 0; max-width: 44px; min-width: 0; min-height: 50px; margin: 0; padding: 0; font-size: 1.1rem; background: var(--papier); color: var(--tinte); border: 2px solid var(--linie); border-radius: 7px; }
.taste:active { background: var(--gelb-hell); }
.taste-loeschen { max-width: 64px; flex-grow: 1.5; }

.kw-listen h3 { font-size: 1.05rem; margin: 1.1rem 0 0.3rem; }
.kw-liste { list-style: none; padding: 0; margin: 0; }
.kw-liste li { margin: 0.2rem 0; }
.kw-hinweis-knopf { width: 100%; text-align: left; background: none; border: 0; border-radius: 6px; padding: 0.45rem 0.5rem; font: 0.95rem var(--schrift); color: var(--tinte); cursor: pointer; }
.kw-liste li.aktiv .kw-hinweis-knopf { background: var(--gelb-hell); }
.kw-liste li.gefunden .kw-hinweis-knopf { color: var(--gruen); text-decoration: line-through; }

/* Lösungswort im Kreuzworträtsel */
.kw-loesungsfeld { background: #FDF1F0; }
.kw-loesungsfeld::after { content: ""; position: absolute; inset: 3px; border: 1.5px solid var(--rot); border-radius: 50%; pointer-events: none; }
.kw-lnr { position: absolute; bottom: 0; right: 2px; font-size: 0.55rem; font-weight: 700; color: var(--rot); line-height: 1; }
.kw-loesung-titel { font-weight: 700; margin: 0.8rem 0 0.2rem; font-size: 0.95rem; }
.kw-loesung { display: flex; gap: 5px; }
.kw-lfeld { position: relative; flex: 0 1 44px; height: 48px; border: 2px solid var(--rot); border-radius: 6px; display: flex; align-items: center; justify-content: center; background: var(--papier); }
.kw-lfeld.richtig { background: var(--gruen-hell); border-color: var(--gruen); }
.kw-lfeld-nr { position: absolute; top: 1px; left: 3px; font-size: 0.6rem; font-weight: 700; color: var(--rot); }
.kw-lfeld-b { font: 700 1.3rem var(--schrift); }

/* ---------- Konto und Kopfzeile ---------- */
.kopf-zeile { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; margin-bottom: 0.3rem; }
a.marke { text-decoration: none; }
.konto-link { display: inline-flex; align-items: center; gap: 0.35rem; min-height: 44px; padding: 0 0.2rem; color: var(--blau); font-weight: 700; font-size: 0.95rem; text-decoration: none; }
.konto-avatar { font-size: 1.5rem; line-height: 1; }
.nav-badge { display: inline-flex; min-width: 1.35rem; height: 1.35rem; padding: 0 0.32rem; align-items: center; justify-content: center; border-radius: 999px; background: var(--rot); color: #fff; font-size: 0.72rem; line-height: 1; font-weight: 800; }
.community-nav .nav-badge { margin-left: 0.25rem; vertical-align: middle; }
.community-nav a.aktiv .nav-badge { background: #fff; color: var(--rot); }
.benachrichtigungen { display: grid; gap: 0.45rem; margin: 0 0 0.9rem; }
.benachrichtigung { margin: 0; padding: 0.65rem 0.8rem; border-radius: 9px; background: var(--gelb-hell); border: 1px solid var(--linie); font-size: 0.92rem; }

.hinweis-box { background: #EEF4FA; border-left: 5px solid var(--blau); border-radius: 0 var(--rund) var(--rund) 0; padding: 0.7rem 1rem; margin: 0.8rem 0; }
.hinweis-box.gut { background: var(--gruen-hell); border-left-color: var(--gruen); }
.hinweis-box.schlecht { background: #FBE4E2; border-left-color: var(--rot); }
.hinweis-box p { margin: 0 0 0.3rem; }
.hinweis-box .knopf { margin-top: 0.5rem; }
.serie-klein { text-align: center; font-weight: 700; color: var(--rot); }
.titel-zeile { margin: 0.3rem 0 0.8rem; }

.eingabe, input[type="email"], input[type="date"] { display: block; width: 100%; min-height: 56px; font: 1.1rem var(--schrift); padding: 0.5rem 0.8rem; border: 2px solid var(--tinte); border-radius: var(--rund); margin-top: 0.4rem; background: var(--papier); color: var(--tinte); }
input[type="text"].eingabe { text-transform: none; font-weight: 400; }
#lw { text-transform: uppercase; font-weight: 700; }

main > .schritt + .schritt, main > .hinweis-box + .schritt { margin-top: 0.9rem; }
.profil-kopf { display: flex; gap: 1rem; align-items: center; }
.profil-avatar { font-size: 3.2rem; width: 5rem; height: 5rem; display: flex; align-items: center; justify-content: center; background: var(--gelb-hell); border: 3px solid var(--gelb); border-radius: 50%; flex-shrink: 0; }
.profil-kopf h2 { margin: 0; }
.profil-titel { font-weight: 700; color: var(--blau); margin: 0.2rem 0; }

.zahlen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; text-align: center; }
.zahlen span { display: block; }
.zahlen .zahl { font: 700 2.4rem var(--titel); line-height: 1.1; }
.zahlen .zahl.rot { color: var(--rot); }
.zahlen span + span { font-size: 0.85rem; color: var(--tinte-leise); }

.lob { background: var(--gruen-hell); color: var(--gruen); font-weight: 700; padding: 0.6rem 0.8rem; border-radius: 8px; }
.tabelle-rahmen { overflow-x: auto; }
.tabelle { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.tabelle th, .tabelle td { text-align: left; padding: 0.5rem 0.4rem; border-bottom: 1px solid var(--linie); }
.tabelle th { font-size: 0.8rem; color: var(--tinte-leise); }

.avatare { border: 0; padding: 0; margin: 0.8rem 0 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.4rem; }
.avatare legend { font-weight: 700; margin-bottom: 0.4rem; padding: 0; }
.avatar-wahl { position: relative; margin: 0; cursor: pointer; }
.avatar-wahl input { position: absolute; opacity: 0; }
.avatar-wahl span[aria-hidden] { display: flex; align-items: center; justify-content: center; aspect-ratio: 1; font-size: 1.7rem; border: 2px solid var(--linie); border-radius: 10px; background: var(--papier); }
.avatar-wahl input:checked + span { border-color: var(--blau); background: var(--gelb-hell); box-shadow: 0 0 0 2px var(--blau); }
.avatar-wahl input:focus-visible + span { outline: 3px solid var(--gelb); outline-offset: 2px; }
.avatar-wahl.gesperrt span[aria-hidden] { filter: grayscale(1); opacity: 0.35; cursor: not-allowed; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.pausen { padding-left: 1.2rem; }
.pausen li { margin: 0.3rem 0; }
form.inline { display: inline; }
form.inline .leise { display: inline; margin: 0 0 0 0.5rem; padding: 0.2rem; }
.haken { display: flex; gap: 0.6rem; align-items: flex-start; font-weight: 400; font-size: 0.95rem; }
.haken input { width: 1.4rem; height: 1.4rem; margin-top: 0.15rem; flex-shrink: 0; }

/* ---------- Rechtliches (Impressum/Datenschutz/Widerruf) ---------- */
.rechtstext h1 { font-family: var(--titel); font-size: 1.6rem; font-weight: 700; line-height: 1.2; margin: 0.6rem 0 0.4rem; }
.rechtstext h2 { font-size: 1.05rem; margin: 1.1rem 0 0.3rem; }
.rechtstext .box { background: var(--grund); border-radius: var(--rund); padding: 0.7rem 1rem; margin: 0.5rem 0; }
.rechtstext hr { border: 0; border-top: 1px solid var(--linie); margin: 1.4rem 0; }
.rechtstext section + section { margin-top: 0.4rem; }
.rechtstext a { color: var(--blau); }

/* ---------- Fußzeile mit rechtlichen Links ---------- */
.fuss-zeile { max-width: 620px; margin: 0 auto; padding: 0.5rem 1rem 2rem; text-align: center; font-size: 0.85rem; }
.fuss-zeile a { color: var(--tinte-leise); text-decoration: underline; }

/* ---------- Abo- und Geschenk-Auswahl (Baustein 3c) ---------- */
.plaene { border: 0; padding: 0; margin: 0.8rem 0; display: grid; gap: 0.6rem; }
.plan { position: relative; margin: 0; font-weight: 400; display: flex; gap: 0.8rem; align-items: flex-start; padding: 0.9rem 1rem; border: 2px solid var(--linie); border-radius: var(--rund); background: var(--papier); cursor: pointer; }
.plan input { width: 1.5rem; height: 1.5rem; margin-top: 0.2rem; flex-shrink: 0; accent-color: var(--blau); }
.plan:has(input:checked) { border-color: var(--blau); box-shadow: 0 0 0 2px var(--blau); background: #F5F9FD; }
.plan.empfohlen { border-color: var(--gelb); }
.plan.empfohlen:has(input:checked) { border-color: var(--blau); }
.plan-inhalt { display: flex; flex-direction: column; gap: 0.15rem; }
.plan-name { font-family: var(--titel); font-weight: 700; font-size: 1.2rem; }
.plan-preis { font-weight: 700; font-size: 1.1rem; color: var(--blau); }
.plan-info { color: var(--gruen); font-weight: 700; font-size: 0.95rem; }
.plan-klein { font-size: 0.85rem; color: var(--tinte-leise); }
label .klein { font-weight: 400; }
.abzeichen { align-self: flex-start; background: var(--gelb); color: var(--tinte); font-size: 0.8rem; font-weight: 700; padding: 0.15rem 0.6rem; border-radius: 999px; margin-bottom: 0.2rem; }
.code-gross { font: 700 1.8rem var(--schrift); letter-spacing: 0.08em; text-align: center; color: var(--blau); background: var(--gelb-hell); border: 2px dashed var(--gelb); border-radius: var(--rund); padding: 0.7rem; margin: 0.8rem 0; }
textarea.eingabe { min-height: 5rem; resize: vertical; line-height: 1.4; }
.auswahl { border: 0; padding: 0; margin: 1rem 0 0; }
.auswahl legend { font-weight: 700; padding: 0; margin-bottom: 0.3rem; }
.auswahl .haken { margin: 0.4rem 0; }
.tabelle th[scope="row"] { width: 40%; color: var(--tinte-leise); font-size: 0.85rem; }

/* ---------- Admin-Bereich ---------- */
.admin main { max-width: 980px; }
.admin-nav { display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; margin: 0.4rem 0 1rem; font-size: 0.9rem; }
.admin-nav a { color: var(--blau); }
.kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0.6rem; }
.kachel { background: var(--papier); border-radius: var(--rund); padding: 0.8rem; box-shadow: 0 1px 0 var(--linie); }
.kachel .zahl { display: block; font: 700 1.6rem var(--titel); }
.kachel .text { font-size: 0.8rem; color: var(--tinte-leise); }
.admin .knopf { width: auto; display: inline-block; min-height: 44px; padding: 0.5rem 1rem; font-size: 0.95rem; }
.admin .tabelle td, .admin .tabelle th { font-size: 0.85rem; }

@media print {
  .fuss-zeile, .kopf-zeile, .knopf { display: none !important; }
  body { background: #fff; }
}

/* ---------- Gratis-Probeheft (probeheft.php) ---------- */
.probeheft-held .abzeichen { display: inline-block; margin: 0 0 0.4rem; }
.gross { font-size: 1.1rem; line-height: 1.5; }
.heft-vorschau { display: flex; gap: 0.7rem; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0.5rem 0.2rem 1rem; margin: 0.6rem 0; -webkit-overflow-scrolling: touch; }
.heft-vorschau img { flex: 0 0 auto; width: 62%; max-width: 230px; height: auto; border-radius: 6px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18); scroll-snap-align: start; background: #fff; }
.unsichtbar { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.geschenk-teaser { background: var(--gelb-hell); }

/* ---------- Wochenheft und Gewinnspiel (wochenheft.php, gewinnspiel.php) ---------- */
.schritt > .abzeichen { display: inline-block; margin: 0 0 0.4rem; }
.gewinn-box { background: var(--gelb-hell); border: 2px solid var(--gelb); border-radius: var(--rund); padding: 0.8rem 1rem; margin: 0.8rem 0 0.2rem; }
.gewinn-preis { font-family: var(--titel); font-size: 1.25rem; font-weight: 700; color: var(--blau); }
.schritte-liste { padding-left: 1.3rem; }
.schritte-liste li { margin: 0.5rem 0; }
.gewinner-liste, .heft-liste { list-style: none; padding: 0; margin: 0.4rem 0; }
.gewinner-liste li { display: flex; align-items: center; gap: 0.8rem; padding: 0.55rem 0; border-bottom: 1px solid var(--linie); }
.gewinner-bild { font-size: 2rem; line-height: 1; }
.heft-liste li { padding: 0.5rem 0; border-bottom: 1px solid var(--linie); }
.heft-liste a { font-weight: 700; margin-right: 0.4rem; }

/* ---------- Community V9 ---------- */
.kopf-aktionen { display: inline-flex; align-items: center; gap: 0.45rem; }
.community-nav { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.35rem; margin: 0 0 0.9rem; }
.community-nav a, .segmente a { text-decoration: none; text-align: center; padding: 0.65rem 0.35rem; border: 1px solid var(--linie); border-radius: 9px; background: var(--papier); color: var(--blau); font-weight: 700; font-size: 0.9rem; }
.community-nav a.aktiv, .segmente a.aktiv { background: var(--blau); color: #fff; border-color: var(--blau); }
.segmente { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.35rem; margin: 0.7rem 0; }
.community-zahlen { margin: 0.9rem 0; }
.rangliste tr.ich td, .team-ranking li.ich { background: var(--gelb-hell); }
.rangliste a { color: var(--tinte); text-decoration: none; font-weight: 700; }
.badges { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.8rem 0; }
.status-chip.revanche { background: #FFF1C9; border-color: #E7C66A; margin-bottom: 0.35rem; }
.duell-revanche-form { margin-top: 0.8rem; }
.badge, .status-chip { display: inline-flex; align-items: center; gap: 0.25rem; background: #EEF4FA; border: 1px solid var(--linie); border-radius: 999px; padding: 0.3rem 0.65rem; font-size: 0.85rem; font-weight: 700; }
.community-aktionen { margin-top: 0.8rem; }
.community-inline { display: inline-block; margin: 0; }
.community-inline .knopf { display: inline-block; width: auto; min-height: 44px; margin: 0.35rem 0.3rem 0.35rem 0; padding: 0.5rem 0.75rem; font-size: 0.95rem; }
.community-inline .leise { display: inline-block; margin: 0.25rem 0.5rem 0.25rem 0; }
.community-details { margin-top: 0.9rem; }
.community-details summary { cursor: pointer; color: var(--tinte-leise); text-decoration: underline; }
.code-klein { letter-spacing: 0.06em; color: var(--blau); }
.spieler-liste { margin-top: 0.7rem; }
.spieler-zeile { display: flex; align-items: center; justify-content: space-between; gap: 0.7rem; padding: 0.65rem 0; border-bottom: 1px solid var(--linie); }
.spieler-zeile > span:first-child { min-width: 0; }
.spieler-zeile a { color: var(--tinte); text-decoration: none; font-weight: 700; }
.spieler-zeile small, .duell-history small, .team-ranking small { display: block; color: var(--tinte-leise); font-size: 0.78rem; font-weight: 400; }
.mini-aktionen { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.3rem; }
.mini-knopf { min-height: 44px; border: 1px solid var(--blau); background: var(--papier); color: var(--blau); border-radius: 8px; padding: 0.35rem 0.6rem; font: 700 0.85rem var(--schrift); cursor: pointer; }
.leise-mini { border-color: var(--linie); color: var(--tinte-leise); }
.duell-karte { border: 1px solid var(--linie); border-radius: var(--rund); padding: 0.7rem 0.8rem; margin: 0.7rem 0; }
.duell-karte .spieler-zeile { border: 0; padding-top: 0; }
.duell-history { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 0.6rem; padding: 0.6rem 0; border-bottom: 1px solid var(--linie); }
.reaktions-feed { background: var(--grund); border-radius: var(--rund); padding: 0.5rem 0.7rem; margin: 0.6rem 0; max-height: 240px; overflow-y: auto; }
.reaktions-feed p { margin: 0.35rem 0; font-size: 0.9rem; }
.reaktions-form { display: flex; gap: 0.45rem; align-items: stretch; }
.reaktions-form select, select.eingabe { min-height: 44px; flex: 1; border: 2px solid var(--linie); border-radius: 8px; background: var(--papier); color: var(--tinte); font: 0.95rem var(--schrift); padding: 0.35rem 0.5rem; }
.team-icons { border: 0; padding: 0; margin: 0.8rem 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.4rem; }
.team-icons legend { grid-column: 1 / -1; font-weight: 700; padding: 0; }
.team-icons label { margin: 0; position: relative; }
.team-icons input { position: absolute; opacity: 0; }
.team-icons span { display: flex; align-items: center; justify-content: center; aspect-ratio: 1; border: 2px solid var(--linie); border-radius: 10px; font-size: 1.6rem; cursor: pointer; }
.team-icons input:checked + span { border-color: var(--blau); background: var(--gelb-hell); box-shadow: 0 0 0 2px var(--blau); }
.team-ziele { display: grid; gap: 0.5rem; }
.team-ziel { display: grid; grid-template-columns: auto 1fr; gap: 0 0.6rem; align-items: center; padding: 0.65rem 0.75rem; border: 1px solid var(--linie); border-radius: 9px; }
.team-ziel > span { grid-row: 1 / 3; font-size: 1.7rem; }
.team-ziel small { color: var(--tinte-leise); }
.team-ziel.erreicht { background: var(--gruen-hell); border-color: var(--gruen); }
.team-ranking { list-style-position: inside; padding: 0; margin: 0.4rem 0; }
.team-ranking li { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.7rem; padding: 0.6rem 0.4rem; border-bottom: 1px solid var(--linie); }
.team-icon { font-size: 1.6rem; }
.code-eingabe { text-transform: uppercase; }

@media (max-width: 520px) {
  .kopf-aktionen { gap: 0.15rem; }
  .konto-link { font-size: 0.82rem; }
  .community-nav { grid-template-columns: repeat(2, 1fr); }
  .community-zahlen .zahl { font-size: 1.8rem; }
  .duell-history { grid-template-columns: 1fr auto; }
  .duell-history form { grid-column: 1 / -1; }
  .team-icons { grid-template-columns: repeat(6, 1fr); }
}

/* Fundus / modularer Solo-Renderer */
.fundus-filter{display:flex;gap:.7rem;flex-wrap:wrap;align-items:end;margin:1rem 0}.fundus-filter label{display:grid;gap:.25rem}.fundus-filter select{padding:.55rem}.fundus-liste{display:grid;gap:.65rem}.fundus-karte{display:flex;justify-content:space-between;gap:1rem;align-items:center;padding:1rem;border:1px solid #d8dee5;border-radius:12px;background:#fff}.solo-aktionen{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1rem}.solo-sudoku{display:grid;grid-template-columns:repeat(9,minmax(28px,44px));width:max-content;max-width:100%;border:2px solid #333}.solo-sudoku input{width:100%;aspect-ratio:1;text-align:center;border:1px solid #bbb;font-size:1.1rem}.solo-sudoku input:nth-child(3n){border-right:2px solid #333}.solo-sudoku input:nth-child(n+19):nth-child(-n+27),.solo-sudoku input:nth-child(n+46):nth-child(-n+54){border-bottom:2px solid #333}.solo-sudoku .fest{font-weight:700;background:#eef2f5}.solo-frage{margin:.8rem 0;padding:.8rem}.solo-frage label{display:block;padding:.35rem 0}.solo-wort{display:grid;gap:.35rem;margin:.8rem 0}.solo-wort input{padding:.65rem}.solo-kreuzwort,.solo-wortsuche{display:grid;grid-template-columns:repeat(var(--cols),minmax(24px,38px));width:max-content;max-width:100%}.solo-kreuzwort input,.solo-kreuzwort .block,.solo-wortsuche span{aspect-ratio:1;border:1px solid #bbb;text-align:center;min-width:0}.solo-kreuzwort input{text-transform:uppercase}.solo-kreuzwort .block{background:#333}.solo-wortsuche span{display:grid;place-items:center}.solo-woerter{display:flex;gap:.4rem;flex-wrap:wrap}.solo-woerter .aktiv{font-weight:700}.solo-memory{display:grid;grid-template-columns:repeat(4,minmax(54px,90px));gap:.5rem}.solo-memory button{aspect-ratio:1;border:1px solid #bbb;border-radius:8px;background:#fff;font-size:1rem}.solo-memory button:disabled{font-weight:700;background:#eef2f5}@media(max-width:600px){.fundus-karte{align-items:flex-start;flex-direction:column}.solo-sudoku{grid-template-columns:repeat(9,minmax(25px,9vw))}}
.fundus-kontingent{display:grid;gap:.45rem}.kontingent-punkte{display:flex;gap:.35rem}.kontingent-punkte i{width:12px;height:12px;border-radius:50%;border:1px solid var(--linie);background:#d7dde3}.kontingent-punkte i.frei{background:var(--gruen)}.fundus-weiter{margin:1.1rem 0 1.4rem}.fundus-weiter h2{margin-bottom:.55rem}.fundus-karte.kompakt{padding:.7rem .85rem}.fundus-info{min-width:0}.fundus-markierungen{display:flex;gap:.35rem;flex-wrap:wrap;margin-top:.55rem}.fundus-markierungen .mini-knopf.aktiv{background:var(--gelb-hell);border-color:var(--blau);color:var(--blau)}.fundus-filter .leise{width:auto;margin:0}@media(max-width:600px){.fundus-karte .knopf.haupt{width:100%;text-align:center}.fundus-karte>div:last-child{width:100%}}

/* Pro-Testphase / Rückstufung */
.pro-status-box{margin-bottom:1rem}
.pro-status-box h2{margin-bottom:.35rem}

/* Phase E High-Review: echte Wortsuche-Auswahl statt Wortliste als Lösungsbutton */
.solo-wortsuche button{width:100%;aspect-ratio:1;min-width:0;min-height:0;box-sizing:border-box;display:grid;place-items:center;border:1px solid #d4dae1;background:#fff;color:var(--tinte);font:inherit;font-weight:700;line-height:1;padding:0;cursor:pointer;border-radius:.3rem;touch-action:manipulation}.solo-wortsuche button:hover,.solo-wortsuche button:focus-visible{border-color:var(--blau)}.solo-wortsuche button.auswahl{box-shadow:inset 0 0 0 3px var(--blau);background:#fff7d7;outline:0}.solo-wortsuche button.gefunden{background:var(--gruen-hell);border-color:var(--gruen);color:#174d2c}.solo-wortsuche button.gefunden.auswahl{box-shadow:inset 0 0 0 3px var(--blau)}.solo-woerter{display:flex;flex-wrap:wrap;gap:.45rem}.wortsuche-ziel{display:inline-block;padding:.35rem .55rem;border:1px solid #bbb;border-radius:999px}.wortsuche-ziel.gefunden{text-decoration:line-through;font-weight:700}

/* Fundus UX: Sammlungen, kompakte Ergebnisliste und Seitennavigation */
.fundus-sammlungen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem;margin:1rem 0 1.2rem}
.fundus-sammlung{border:1px solid var(--linie);border-radius:var(--rund);padding:.8rem;background:var(--papier)}
.fundus-sammlung-kopf,.fundus-ergebnis-kopf{display:flex;align-items:center;justify-content:space-between;gap:.7rem;margin-bottom:.55rem}
.fundus-sammlung-kopf h2,.fundus-ergebnis-kopf h2{margin:0}
.fundus-count{display:inline-grid;place-items:center;min-width:1.7rem;height:1.7rem;padding:0 .35rem;border-radius:999px;background:var(--grund);font:700 .78rem var(--schrift)}
.fundus-leer{margin:.35rem 0;color:var(--tinte-leise)}
.fundus-liste-kompakt{gap:.45rem}
.fundus-liste-kompakt .fundus-karte{padding:.6rem .7rem;border-radius:9px}
.fundus-hauptliste{grid-template-columns:repeat(2,minmax(0,1fr))}
.fundus-hauptliste .fundus-karte{padding:.8rem}
.fundus-pagination{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:.7rem;margin-top:1rem}
.fundus-pagination .knopf:last-child{justify-self:end}
.solo-action-msg{margin:.65rem 0 0}
@media(max-width:760px){.fundus-sammlungen,.fundus-hauptliste{grid-template-columns:1fr}}
@media(max-width:520px){.kopf-aktionen{flex-wrap:wrap;justify-content:flex-end}.fundus-pagination{grid-template-columns:1fr 1fr}.fundus-pagination strong{grid-column:1/-1;grid-row:1;text-align:center}.fundus-pagination .knopf{grid-row:2}}

/* Live-Test-Nacharbeit 07.10.2026: flexible Tagesrunde, Fundus und Mehrfach-Teams */
.fortschritt span.begonnen{background:#9fb6d6}
.tages-auswahl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.4rem;margin:.65rem 0 .2rem}
.tages-auswahl-knopf{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:.45rem;align-items:center;text-align:left;border:1px solid var(--linie);border-radius:9px;background:var(--papier);color:var(--tinte);padding:.48rem .55rem;cursor:pointer;font:inherit}
.tages-auswahl-knopf:hover,.tages-auswahl-knopf:focus-visible{border-color:var(--blau)}
.tages-auswahl-knopf.aktiv{border-color:var(--blau);box-shadow:0 0 0 1px var(--blau)}
.tages-auswahl-knopf.geloest{background:var(--gruen-hell)}
.tages-auswahl-knopf.angefangen:not(.geloest){background:#f3f6fa}
.tages-auswahl-nr{grid-row:1/3;display:grid;place-items:center;width:1.7rem;height:1.7rem;border-radius:50%;background:var(--grund);font-weight:700;color:var(--blau)}
.tages-auswahl-knopf.geloest .tages-auswahl-nr{background:var(--gruen);color:#fff}
.tages-auswahl-name{font-weight:700;font-size:.86rem;line-height:1.15}
.tages-auswahl-knopf small{font-size:.7rem;color:var(--tinte-leise)}
.tages-auswahl.kompakt{margin:.7rem 0;grid-template-columns:repeat(6,minmax(0,1fr))}
.tages-auswahl.kompakt .tages-auswahl-knopf{display:flex;flex-direction:column;gap:.15rem;text-align:center;justify-content:center;padding:.38rem .2rem;min-height:58px}
.tages-auswahl.kompakt .tages-auswahl-nr{width:1.45rem;height:1.45rem;font-size:.78rem}
.tages-auswahl.kompakt .tages-auswahl-name{font-size:.68rem}
.tages-auswahl.kompakt small{display:none}
.fuss .meldung{margin:.65rem 0}.fuss .tages-auswahl{margin-top:.75rem}

.fundus-sammlungen{grid-template-columns:repeat(3,minmax(0,1fr))}
.fundus-karten-aktionen{display:flex;gap:.45rem;align-items:center;justify-content:flex-end;flex-wrap:wrap}
.fundus-best{color:var(--tinte-leise)}
.fundus-wiederholung-hinweis{margin:.2rem 0 1rem;color:var(--tinte-leise)}

.meine-teams-grid{display:grid;gap:.55rem;margin:.8rem 0}
.mein-team-karte{display:flex;align-items:center;justify-content:space-between;gap:.6rem;border:1px solid var(--linie);border-radius:10px;padding:.65rem;background:var(--papier)}
.mein-team-karte.ausgewaehlt{border-color:var(--blau);box-shadow:0 0 0 1px var(--blau)}
.mein-team-karte.ruht{opacity:.78;background:#f5f6f7}
.mein-team-link{display:flex;align-items:center;gap:.65rem;min-width:0;flex:1;text-decoration:none;color:inherit}
.mein-team-link strong,.mein-team-link small{display:block}.mein-team-link small{color:var(--tinte-leise);font-size:.78rem;font-weight:400}
.team-code-box{display:flex;justify-content:space-between;align-items:center;gap:.7rem;flex-wrap:wrap;padding:.65rem .75rem;border:1px solid var(--linie);border-radius:9px;background:var(--grund);margin:.75rem 0}
.team-suchergebnisse{margin:.6rem 0 1rem}
.team-ranking a{color:inherit}

@media(max-width:760px){.fundus-sammlungen{grid-template-columns:1fr}.tages-auswahl{grid-template-columns:repeat(2,minmax(0,1fr))}.tages-auswahl.kompakt{grid-template-columns:repeat(3,minmax(0,1fr))}.mein-team-karte{align-items:flex-start;flex-direction:column}.fundus-karten-aktionen{width:100%;justify-content:flex-start}}


/* Schema 26: bewusste Aufgabe eines Tagesrätsels */
.fortschritt span.aufgegeben{background:var(--tinte-leise)}
.tages-auswahl-knopf.aufgegeben{background:#f1f3f5;color:var(--tinte-leise);cursor:not-allowed;opacity:.82}
.tages-auswahl-knopf.aufgegeben:hover{border-color:var(--linie)}
.tages-auswahl-knopf.aufgegeben .tages-auswahl-nr{background:var(--tinte-leise);color:#fff}
.knopf.aufgeben{background:var(--papier);color:var(--rot);border-color:var(--rot)}
.knopf.aufgeben:hover{background:#fff5f4}

/* Schema 28: Spielerübersicht und einheitliche Rätsel-Eingabe */
@media (min-width: 701px) {
  .community-nav { grid-template-columns: repeat(5, 1fr); }
}
.spieler-filter { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.aktivstatus { color: #287a43; font-weight: 700; }
.puzzle-eingabehilfe { width: min(100%, 520px); margin: .8rem 0 0; }
.puzzle-eingabe-optionen { display: flex; justify-content: flex-end; margin-bottom: .45rem; }
.puzzle-ziffern { display: grid; grid-template-columns: repeat(5, minmax(44px,1fr)); gap: .4rem; }
.puzzle-buchstaben { display: grid; gap: .35rem; }
.puzzle-tasten-reihe { display: flex; gap: .3rem; justify-content: center; }
.puzzle-taste { min-width: 38px; min-height: 42px; padding: .45rem .55rem; border: 1px solid #aeb9c5; border-radius: 8px; background: #fff; color: var(--blau); font: inherit; font-weight: 700; cursor: pointer; }
.puzzle-taste:active { transform: translateY(1px); }
.puzzle-loeschen { min-width: 68px; }
.solo-sudoku input.eingabe-aktiv,.solo-kreuzwort input.eingabe-aktiv { outline: 3px solid rgba(41,87,148,.32); outline-offset: -3px; background: #fff7d7; }
.solo-kreuzwort input.eingabe-wort:not(.eingabe-aktiv) { background: #edf4ff; }
@media(max-width:600px){
  .puzzle-ziffern { grid-template-columns: repeat(5,1fr); }
  .puzzle-taste { min-width: 0; padding: .45rem .25rem; }
  .puzzle-tasten-reihe { gap: .2rem; }
}


/* Schema 28 UX-Nacharbeit: Eingabe direkt am Spielfeld, Fundus-Timer und stabile Wortsuche */
.spiel-timer{width:max-content;max-width:100%;margin:.2rem 0 .7rem;font-variant-numeric:tabular-nums}
.puzzle-eingabehilfe{margin:.55rem 0 .85rem}
.solo-sudoku + .puzzle-eingabehilfe,.solo-kreuzwort + .puzzle-eingabehilfe{margin-top:.55rem}
@media(max-width:600px){.solo-wortsuche{width:min(100%,420px)}.solo-wortsuche button{font-size:1rem}}

/* Schema 29: Duell-Spielwahl und stabile Wortsuche-Auswahl */
.duell-start-box{margin-top:1rem;padding-top:.85rem;border-top:1px solid var(--linie)}
.duell-start-box h3{margin:.2rem 0 .35rem}
.duell-start-form{display:grid;grid-template-columns:1fr 1fr;gap:.55rem;align-items:end}
.duell-start-form label{font-size:.82rem;color:var(--tinte-leise);margin-bottom:-.35rem}
.duell-start-form .duell-select{margin:0;min-width:0}
.duell-start-form .knopf{grid-column:1/-1;margin:.15rem 0 0}
.duell-start-form.kompakt{display:flex;gap:.35rem;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.duell-start-form.kompakt .duell-select{width:auto;min-width:118px;padding:.35rem .4rem;font-size:.75rem}
.duell-start-form.kompakt .mini-knopf{margin:0}
.solo-wortsuche{align-items:stretch;grid-auto-rows:auto}
.solo-wortsuche button{margin:0!important;-webkit-appearance:none;appearance:none;align-self:stretch;justify-self:stretch;vertical-align:middle;transform:none!important;position:relative;overflow:hidden}
.solo-wortsuche button.auswahl{border-width:1px!important}
@media(max-width:600px){.duell-start-form{grid-template-columns:1fr}.duell-start-form .knopf{grid-column:auto}.duell-start-form.kompakt{align-items:stretch;justify-content:flex-start}.duell-start-form.kompakt .duell-select{width:100%}.duell-start-form.kompakt .mini-knopf{width:100%}}

/* Gemeinsame Tagesrundenoberfläche für Solo/Duell: keine springenden Ergebnisboxen. */
.rp-modus-fuss .meldung { min-height: 2.2em; overflow-anchor: none; }
.rp-modus-fuss .reihe { flex-wrap: wrap; }
#solo-app .schritt, #duell-app .schritt { max-width: 100%; }

/* Schema 29: Tagesrunde als einheitliche Quiz-/Spiellayout-Referenz.
   Fundus und Duell besitzen keinen zweiten Kartenrahmen um das gleiche Rätsel. */
.rp-spiel-rahmen { margin: 0 0 1rem; }
.rp-spiel-rahmen > .klein { margin: .25rem 0 .65rem; }
.rp-spiel-rahmen .spiel-timer { margin: .2rem 0 .7rem; }
.rp-modus-fuss .knopf.aufgeben { margin-top: .7rem; }

/* Schnellduell: kompakter Ergebnisvergleich auch auf kleinen Mobilgeräten. */
.duell-ergebnisse { margin-top: 1rem; overflow-x: auto; }
.duell-ergebnisse h2 { font-size: 1.05rem; margin-bottom: .45rem; }
.duell-ergebnisse table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.duell-ergebnisse th, .duell-ergebnisse td { padding: .5rem .4rem; text-align: left; border-bottom: 1px solid var(--linie); }
.duell-ergebnisse thead th { color: var(--tinte-leise); font-weight: 600; }
.duell-ergebnisse tbody th { font-weight: 600; }

/* =====================================================================
   Block 1 (Okt. 2026): gemeinsamer Spielbildschirm „sp-“ für Tagesrunde, Fundus, Duell.
   Ziel: Brett und Eingabe auf dem Handy ohne Scrollen gleichzeitig sichtbar,
   Touchziele ≥ 44 px, Gefahr-Aktionen nur im Menü.
   ===================================================================== */
body.spielseite main, .sp-rahmen { --sp-rand: 12px; }
body.spielseite main { padding: 0.4rem 0.6rem 2rem; max-width: 560px; }
.sp-rahmen { max-width: 560px; margin: 0 auto; }
.sp-kopf { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 6px; min-height: 48px; }
.sp-zurueck { display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px 0 4px; border: 0; background: none; color: var(--blau); font: 700 16px var(--schrift); text-decoration: none; cursor: pointer; border-radius: 8px; white-space: nowrap; }
.sp-titel { margin: 0; font: 700 19px/1.2 var(--titel); text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-titel:focus { outline: none; }
.sp-stufe { display: inline-block; padding: 1px 8px; border-radius: 999px; background: #E3ECF4; color: var(--tinte-leise); font: 700 12px var(--schrift); vertical-align: 2px; }
.sp-timer { font: 700 16px var(--schrift); font-variant-numeric: tabular-nums; color: var(--tinte-leise); min-width: 3.2em; text-align: right; }
.sp-menue-wrap { position: relative; }
.sp-kopf.mit-extra { grid-template-columns: auto 1fr auto auto auto; gap: 2px; }
.sp-merken { width: 44px; height: 44px; border: 0; border-radius: 10px; background: none; font: 400 26px/1 var(--schrift); color: var(--tinte-leise); cursor: pointer; }
.sp-merken:hover { background: #E3ECF4; }
.sp-merken.aktiv { color: #C98A00; }
.sp-menue-knopf { width: 44px; height: 44px; border: 0; border-radius: 10px; background: none; font: 700 24px/1 var(--schrift); color: var(--tinte); cursor: pointer; }
.sp-menue-knopf:hover, .sp-zurueck:hover { background: #E3ECF4; }
.sp-menue { position: absolute; right: 0; top: 46px; z-index: 20; min-width: 230px; padding: 6px; background: var(--papier); border: 1px solid var(--linie); border-radius: 12px; box-shadow: 0 8px 24px rgba(27, 42, 58, 0.18); }
.sp-menue-eintrag { display: block; width: 100%; min-height: 48px; padding: 10px 12px; border: 0; border-radius: 8px; background: none; text-align: left; font: 16px var(--schrift); color: var(--tinte); text-decoration: none; cursor: pointer; }
.sp-menue-eintrag:hover, .sp-menue-eintrag:focus-visible { background: #EEF4FA; }
.sp-menue-eintrag.gefahr { color: var(--rot); }
.sp-menue-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--linie); }
.sp-menue-nav:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.sp-menue-nav-eintrag { display: flex; align-items: center; justify-content: center; min-height: 44px; border-radius: 8px; color: var(--blau); font-weight: 600; text-decoration: none; }
.sp-menue-nav-eintrag:hover, .sp-menue-nav-eintrag:focus-visible { background: #EEF4FA; }
.sp-unterzeile { margin: 0 0 6px; font-size: 14px; color: var(--tinte-leise); text-align: center; }
.sp-laden { text-align: center; color: var(--tinte-leise); padding: 2rem 0; }

.sp-spiel { background: var(--papier); border-radius: var(--rund); padding: var(--sp-rand); box-shadow: 0 1px 0 var(--linie); }
.sp-unten { margin-top: 10px; }
.sp-werkzeuge { display: flex; gap: 8px; margin-top: 10px; }
.sp-knopf { display: block; width: 100%; min-height: 48px; margin: 8px 0 0; padding: 8px 12px; font: 700 17px var(--schrift); text-align: center; text-decoration: none; border-radius: 10px; border: 2px solid transparent; cursor: pointer; }
.sp-werkzeuge .sp-knopf, .sp-reihe .sp-knopf { flex: 1; margin: 0; }
/* Bis zu vier Knöpfe (Prüfen · Tipp · Aufgeben · Später) passen ab 340 px in eine Reihe; darunter wird umgebrochen. */
.sp-werkzeuge { flex-wrap: wrap; } .sp-werkzeuge .sp-knopf { flex: 1 0 auto; width: auto; padding: 8px 8px; white-space: nowrap; }
@media (max-width: 420px) { .sp-werkzeuge { gap: 6px; } .sp-werkzeuge .sp-knopf { font-size: 15px; padding: 8px 6px; } }
@media (max-width: 380px) { .sp-werkzeuge .sp-knopf { font-size: 14px; padding: 8px 4px; } }
.sp-knopf.haupt { background: var(--blau); color: #fff; }
.sp-knopf.haupt:hover { background: var(--blau-dunkel); }
.sp-knopf.zweit { background: var(--papier); color: var(--blau); border-color: var(--blau); }
.sp-reihe { display: flex; gap: 8px; margin-top: 10px; }
.sp-meldung { min-height: 1.4em; margin: 8px 0 0; font: 700 15px/1.35 var(--schrift); text-align: center; }
.sp-meldung:empty { min-height: 0; margin: 0; }
.sp-meldung.gut { color: var(--gruen); }
.sp-meldung.schlecht { color: var(--rot); }
.sp-anleitung { margin-top: 12px; font-size: 15px; color: var(--tinte-leise); }
.sp-anleitung summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: 700; color: var(--blau); }
.sp-zaehler { margin: 0 0 6px; font-size: 15px; color: var(--tinte-leise); text-align: center; }
.sp-wackeln { animation: sp-wackeln 0.35s; }
@keyframes sp-wackeln { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
@media (prefers-reduced-motion: reduce) { .sp-wackeln { animation: none; } }

/* Abschlusskarte */
.sp-karte { margin: 10px 0 0; padding: 14px; border-radius: 12px; background: #EEF4FA; text-align: center; }
.sp-karte.gut { background: var(--gruen-hell); }
.sp-karte.schlecht { background: #FBE4E2; }
.sp-karte-titel { margin: 0 0 4px; font: 700 22px var(--titel); }
.sp-karte-zeile { margin: 2px 0; font-size: 16px; }
.sp-fertig .sp-sudoku, .sp-fertig .sp-kreuzwort, .sp-fertig .sp-wortsuche { opacity: 0.92; }

/* Sudoku: Brett so groß wie möglich, aber Ziffern bleiben sichtbar */
.sp-sudoku { display: grid; grid-template-columns: repeat(9, 1fr); width: min(100%, 520px); width: min(100%, calc(100vh - 330px), 520px); width: min(100%, calc(100svh - 330px), 520px); min-width: 270px; margin: 0 auto; border: 3px solid var(--tinte); border-radius: 6px; overflow: hidden; touch-action: manipulation; }
.sp-zelle { aspect-ratio: 1; padding: 0; border: 0; border-right: 1px solid var(--linie); border-bottom: 1px solid var(--linie); background: var(--papier); color: var(--blau); font: 700 clamp(17px, 5.4vw, 26px) var(--schrift); cursor: pointer; }
.sp-zelle:nth-child(9n) { border-right: 0; }
.sp-zelle:nth-last-child(-n + 9) { border-bottom: 0; }
.sp-zelle.rr { border-right: 3px solid var(--tinte); }
.sp-zelle.ru { border-bottom: 3px solid var(--tinte); }
.sp-zelle.vorgabe { color: var(--tinte); background: #F2F5F8; cursor: default; }
.sp-zelle.bezug { background: #EEF4FA; }
.sp-zelle.vorgabe.bezug { background: #E4ECF4; }
.sp-zelle.gewaehlt { background: var(--gelb-hell); box-shadow: inset 0 0 0 3px var(--gelb); }
.sp-zelle.konflikt { color: #B0582C; text-decoration: underline wavy #B0582C; }
.sp-zelle.falsch { color: var(--rot); background: #FBE4E2; }
.sp-zelle.tipp { color: #7A5A00; }
.sp-zelle.tipp-kasten:not(.gewaehlt) { background: #FFF6D6; }
.sp-ziffern { display: grid; grid-template-columns: repeat(6, 1fr); gap: 7px; width: min(100%, 520px); margin: 0 auto; }
.sp-ziffer { min-height: 54px; margin: 0; border: 2px solid var(--tinte); border-radius: 10px; background: var(--papier); color: var(--tinte); font: 700 24px var(--schrift); cursor: pointer; touch-action: manipulation; }
.sp-ziffer:active { background: var(--gelb-hell); }
.sp-ziffer.komplett { opacity: 0.35; }
.sp-loeschen { font-size: 22px; }

/* Kreuzworträtsel */
.sp-kreuzwort { display: grid; grid-template-columns: repeat(var(--spalten), 1fr); gap: 2px; width: min(100%, 520px); margin: 0 auto; }
.sp-kw-leer { aspect-ratio: 1; }
.sp-kw-zelle { position: relative; aspect-ratio: 1; padding: 0; border: 2px solid var(--tinte); border-radius: 4px; background: var(--papier); color: var(--tinte); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.sp-kw-nr { position: absolute; top: 1px; left: 3px; font: 700 10px/1 var(--schrift); }
.sp-kw-b { font: 700 clamp(15px, 4.6vw, 22px) var(--schrift); }
.sp-kw-zelle.im-wort { background: var(--gelb-hell); }
.sp-kw-zelle.aktiv { background: var(--gelb); }
.sp-kw-zelle.falsch { background: #FBE4E2; color: var(--rot); }
.sp-kw-zelle.richtig { background: var(--gruen-hell); border-color: var(--gruen); color: #174d2c; }
.sp-kw-zelle.richtig.im-wort { background: #CDEBD6; }
.sp-kw-zelle.richtig.aktiv { background: var(--gelb); }
.sp-kw-zelle.lfeld::after { content: ""; position: absolute; inset: 3px; border: 1.5px solid var(--rot); border-radius: 50%; pointer-events: none; }
.sp-kw-lnr { position: absolute; bottom: 0; right: 2px; font: 700 9px/1 var(--schrift); color: var(--rot); }
.sp-kw-loesung { display: flex; gap: 4px; justify-content: center; margin-top: 8px; }
.sp-kw-lfeld { position: relative; width: 34px; height: 38px; border: 2px solid var(--rot); border-radius: 6px; display: flex; align-items: center; justify-content: center; font: 700 18px var(--schrift); }
.sp-kw-lfeld small { position: absolute; top: 0; left: 3px; font-size: 9px; color: var(--rot); }
.sp-kw-hinweis { margin: 0 0 8px; min-height: 44px; padding: 8px 10px; border-radius: 8px; background: #EEF4FA; font: 700 16px/1.3 var(--titel); }
.sp-tastatur { display: flex; flex-direction: column; gap: 5px; }
.sp-tasten-reihe { display: flex; gap: 4px; justify-content: center; }
.sp-taste { flex: 1 1 0; max-width: 48px; min-width: 0; min-height: 48px; margin: 0; padding: 0; border: 2px solid var(--linie); border-radius: 8px; background: var(--papier); color: var(--tinte); font: 700 18px var(--schrift); cursor: pointer; touch-action: manipulation; }
.sp-taste:active { background: var(--gelb-hell); }
.sp-taste.breit { max-width: 72px; flex-grow: 1.6; }
/* 11b (B03): schmale Handys. Tastatur bis an den Kartenrand ziehen und Lücken verkleinern: ca. 32 px breite Tasten bei 375 px (wie die Systemtastatur), Höhe bleibt 48 px. */
@media (max-width: 480px) {
  .schritt .sp-tastatur { margin-left: calc(-1.1rem + 4px); margin-right: calc(-1.1rem + 4px); }
  .sp-tasten-reihe { gap: 3px; }
}
.sp-kw-listen { margin-top: 10px; }
.sp-kw-listen h3 { margin: 10px 0 4px; font-size: 17px; }
.sp-kw-liste { list-style: none; margin: 0; padding: 0; }
.sp-kw-liste button { width: 100%; min-height: 40px; padding: 6px 8px; border: 0; border-radius: 6px; background: none; text-align: left; font: 15px var(--schrift); color: var(--tinte); cursor: pointer; }
.sp-kw-liste li.aktiv button { background: var(--gelb-hell); }

/* Schwedenrätsel (Update 11): Fragefelder blau mit Pfeil, Frage groß in der Leiste */
.sp-schweden { display: grid; grid-template-columns: repeat(var(--spalten), 1fr); gap: 2px; width: min(100%, 540px); width: min(100%, 540px, calc((100svh - 400px) * var(--spalten) / var(--zeilen))); min-width: 260px; margin: 0 auto; touch-action: manipulation; }
.sp-sw-zelle { border-width: 1.5px; }
.sp-sw-zelle .sp-kw-b { font-size: clamp(14px, 4.4vw, 22px); }
.sp-sw-frage { aspect-ratio: 1; padding: 0; margin: 0; border: 1.5px solid #8FA9C2; border-radius: 4px; background: #D6E3F0; color: var(--blau-dunkel); display: flex; flex-direction: column; overflow: hidden; cursor: pointer; }
.sp-sw-teil { flex: 1 1 0; min-height: 0; display: flex; align-items: center; justify-content: center; }
.sp-sw-frage.doppelt .sp-sw-teil + .sp-sw-teil { border-top: 1px solid #8FA9C2; }
.sp-sw-teil.pf-r { justify-content: flex-end; padding-right: 2px; }
.sp-sw-teil.pf-u { align-items: flex-end; padding-bottom: 2px; }
.sp-sw-pfeil { width: 62%; height: 62%; max-width: 26px; max-height: 26px; }
.sp-sw-frage.doppelt .sp-sw-pfeil { width: 78%; height: 78%; max-height: 16px; }
.sp-sw-teil.aktiv { background: var(--gelb); color: var(--tinte); }
.sp-sw-teil.erledigt:not(.aktiv) { color: var(--gruen); }
.sp-sw-leiste { display: flex; align-items: stretch; gap: 6px; margin: 0 0 8px; }
.sp-sw-text { flex: 1 1 auto; display: flex; align-items: center; gap: 8px; margin: 0; min-height: 52px; padding: 8px 10px; border-radius: 8px; background: #EEF4FA; font: 700 17px/1.3 var(--titel); }
.sp-sw-text .sp-sw-pfeil { flex: none; width: 22px; height: 22px; color: var(--blau); }
.sp-sw-schritt { flex: none; width: 46px; min-height: 52px; margin: 0; padding: 0; border: 2px solid var(--linie); border-radius: 8px; background: var(--papier); color: var(--tinte); font: 700 24px var(--schrift); cursor: pointer; touch-action: manipulation; }
.sp-sw-loesung .sp-kw-lfeld { width: 32px; }
.sp-fertig .sp-schweden { opacity: 0.95; }

/* Wortsuche */
.sp-thema { margin: 0 0 6px; text-align: center; font: 700 18px var(--titel); }
.sp-wortsuche { display: grid; grid-template-columns: repeat(var(--spalten), 1fr); gap: 3px; width: min(100%, 520px); width: min(100%, calc(100vh - 300px), 520px); width: min(100%, calc(100svh - 300px), 520px); min-width: 260px; margin: 0 auto; touch-action: manipulation; }
.sp-ws-b { aspect-ratio: 1; padding: 0; border: 1px solid var(--linie); border-radius: 6px; background: var(--papier); color: var(--tinte); font: 700 clamp(16px, 5vw, 24px) var(--schrift); cursor: pointer; }
.sp-ws-b.gefunden { background: var(--gruen-hell); color: var(--gruen); border-color: var(--gruen); }
.sp-ws-b.start { background: var(--blau); color: #fff; }
.sp-ws-b.tipp { background: var(--gelb); }
.sp-wortliste { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 10px 0 0; padding: 0; }
.sp-wortliste li { padding: 4px 12px; border: 2px solid var(--linie); border-radius: 999px; font: 700 15px var(--schrift); }
.sp-wortliste li.gefunden { border-color: var(--gruen); color: var(--gruen); text-decoration: line-through; }

/* Wortsalat */
.sp-ws-hinweis { margin: 0 0 10px; text-align: center; font: 700 18px/1.3 var(--titel); }
.sp-felder { display: flex; gap: 5px; justify-content: center; margin: 4px 0 14px; }
.sp-feld { flex: 1 1 0; max-width: 46px; min-width: 0; height: 50px; border-bottom: 4px solid var(--tinte); display: flex; align-items: center; justify-content: center; font: 700 24px var(--schrift); }
.sp-felder.richtig .sp-feld { color: var(--gruen); border-color: var(--gruen); }
.sp-steine { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.sp-stein { flex: 0 1 54px; min-width: 44px; min-height: 54px; margin: 0; padding: 0; border: 2px solid var(--gelb); border-radius: 10px; background: var(--gelb-hell); color: var(--tinte); font: 700 24px var(--schrift); cursor: pointer; }
.sp-stein:disabled { opacity: 0.25; cursor: default; }

/* Memory */
.sp-memory { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; width: min(100%, 520px); width: min(100%, calc((100svh - 260px) * 4 / 3), 520px); margin: 0 auto; }
.sp-karte-m { aspect-ratio: 1; min-height: 44px; border: 0; border-radius: 10px; background: var(--blau); color: var(--tinte); font-size: clamp(26px, 9vw, 40px); cursor: pointer; }
.sp-karte-m.offen { background: var(--papier); box-shadow: inset 0 0 0 3px var(--blau); }
.sp-karte-m.paar { background: var(--gruen-hell); box-shadow: inset 0 0 0 3px var(--gruen); }

/* Quiz */
.sp-frage { margin: 4px 0 12px; font: 700 20px/1.35 var(--titel); }
.sp-optionen { display: flex; flex-direction: column; gap: 8px; }
.sp-option { margin: 0; min-height: 52px; text-align: left; font-weight: 400; background: var(--papier); color: var(--tinte); border-color: var(--linie); }
.sp-option.gewaehlt { border-color: var(--blau); }
.sp-option.richtig { border-color: var(--gruen); background: var(--gruen-hell); font-weight: 700; }
.sp-option.falsch { border-color: var(--rot); background: #FBE4E2; }
.sp-option:disabled { cursor: default; opacity: 1; }
.sp-quiz-info { min-height: 1.4em; margin: 10px 0 0; font-weight: 700; }
.sp-quiz-info.gut { color: var(--gruen); }
.sp-quiz-info.schlecht { color: var(--rot); }

/* Übersicht „Heute“ */
.heute-kopf { display: flex; align-items: center; gap: 14px; }
.heute-kopf h2 { margin: 0; font-size: 1.25rem; }
.heute-datum { flex: 0 0 auto; width: 76px; padding: 4px 0 6px; border: 2px solid var(--tinte); border-top: 12px solid var(--blau); border-radius: 4px 4px 8px 8px; text-align: center; font-size: 12px; line-height: 1.2; }
.heute-datum .heute-tag { display: block; font: 700 34px/1.1 var(--titel); }
.heute-datum.sonntag { border-top-color: var(--rot); color: var(--rot); }
.heute-fortschritt { margin: 14px 0 0; }
.heute-karten { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 12px; }
@media (min-width: 520px) { .heute-karten { grid-template-columns: repeat(3, 1fr); } }
.heute-karte { display: grid; grid-template-columns: 36px minmax(0, 1fr); grid-template-rows: auto auto; align-items: center; column-gap: 8px; min-height: 64px; padding: 8px 10px; border: 2px solid var(--linie); border-radius: 12px; background: var(--papier); color: var(--tinte); text-align: left; font: 16px var(--schrift); cursor: pointer; }
.heute-karte .heute-symbol { grid-row: span 2; width: 36px; height: 36px; border-radius: 50%; background: #E3ECF4; display: flex; align-items: center; justify-content: center; font: 700 17px var(--schrift); }
.heute-karte .heute-name { font-weight: 700; font-size: 15px; overflow-wrap: anywhere; }
.heute-karte small { color: var(--tinte-leise); font-size: 13px; }
.heute-karte.geloest { border-color: var(--gruen); }
.heute-karte.geloest .heute-symbol { background: var(--gruen); color: #fff; }
.heute-karte.angefangen { border-color: var(--blau); }
.heute-karte.aufgegeben { opacity: 0.55; cursor: default; }
.heute .spruch { margin-top: 16px; }

/* =====================================================================
   Block 2 (Okt. 2026): Hauptnavigation Heute · Rätsel · Duelle · Profil
   ===================================================================== */
.seitenkopf { max-width: 620px; margin: 0 auto; padding: 0.6rem 1rem 0; }
.hauptnav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; justify-content: space-around; padding: 4px 4px calc(4px + env(safe-area-inset-bottom)); background: var(--papier); border-top: 1px solid var(--linie); box-shadow: 0 -2px 10px rgba(27, 42, 58, 0.06); }
.hauptnav a { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 56px; padding: 6px 2px 4px; border-radius: 10px; color: var(--tinte-leise); font: 700 13px var(--schrift); text-decoration: none; }
.hauptnav svg { width: 26px; height: 26px; }
.hauptnav a.aktiv { color: var(--blau); background: #EEF4FA; }
.hauptnav .nav-badge { position: absolute; top: 2px; left: calc(50% + 6px); }
body.mit-nav { padding-bottom: 76px; }
body.spielseite .seitenkopf, body.spielseite .hauptnav { display: none; }
@media (min-width: 760px) {
  .seitenkopf { display: flex; align-items: center; justify-content: space-between; max-width: 900px; padding-top: 0.8rem; }
  .hauptnav { position: static; padding: 0; background: none; border: 0; box-shadow: none; gap: 4px; justify-content: flex-end; }
  .hauptnav a { flex: 0 0 auto; flex-direction: row; gap: 6px; min-height: 44px; padding: 0 12px; align-items: center; font-size: 15px; }
  .hauptnav svg { width: 20px; height: 20px; }
  .hauptnav .nav-badge { position: static; }
  body.mit-nav { padding-bottom: 0; }
}

/* Duelle */
.community-nav.segmente { margin-bottom: 0.8rem; }
.duell-karte.wartet { border-left: 4px solid var(--gelb); }
.freund-zeile { border-bottom: 1px solid var(--linie); }
.freund-zeile > summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 52px; cursor: pointer; list-style: none; font-weight: 700; }
.freund-zeile > summary::-webkit-details-marker { display: none; }
.freund-zeile[open] > summary .mini-knopf { visibility: hidden; }
.duell-modus { border: 0; margin: 0 0 0.4rem; padding: 0; }
.duell-modus legend { font-weight: 700; margin-bottom: 0.2rem; }
.duell-modus label { display: block; padding: 0.35rem 0; }
.duell-modus small { display: block; margin-left: 1.6rem; color: var(--tinte-leise); }
.duell-spiel { display: block; margin: 0.3rem 0; }
.suche-zeile { margin-top: 1rem; }
.suche-zeile .reihe { align-items: stretch; }
.suche-zeile .reihe .eingabe { flex: 2; margin: 0; }
.suche-zeile .reihe .knopf { flex: 1; margin: 0; }
.inline-leise { display: inline; margin: 0; padding: 0; }

/* Bereich „Rätsel“ (Block 2) */
.fundus-seite h1 { margin: 0 0 0.2rem; font: 700 1.6rem var(--titel); }
.fundus-kontingent { margin: 0 0 0.8rem; }
.fundus-seite h2 { font-size: 1.2rem; margin: 1.2rem 0 0.5rem; }
.raetsel-kacheln { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
@media (min-width: 560px) { .raetsel-kacheln { grid-template-columns: repeat(3, 1fr); } }
.raetsel-kachel { padding: 10px; border: 2px solid var(--linie); border-radius: 12px; }
.raetsel-kachel strong { display: block; margin-bottom: 6px; }
.stufen { display: flex; flex-wrap: wrap; gap: 6px; }
.stufe-knopf { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 10px; background: var(--blau); color: #fff; font-weight: 700; font-size: 15px; text-decoration: none; }
.fundus-archiv { margin-top: 1.2rem; border-top: 1px solid var(--linie); }
.fundus-archiv > summary { cursor: pointer; list-style: none; }
.fundus-archiv > summary h2 { display: inline; }
.fundus-archiv > summary::before { content: "▸ "; color: var(--blau); }
.fundus-archiv[open] > summary::before { content: "▾ "; }
.archiv-zeile { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.archiv-zeile .fundus-karten-aktionen { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.archiv-zeile .knopf { width: auto; min-height: 44px; margin: 0; padding: 0.4rem 0.9rem; font-size: 0.9rem; }
.merken { width: 44px; height: 44px; border: 2px solid var(--linie); border-radius: 10px; background: var(--papier); color: var(--tinte-leise); font-size: 22px; cursor: pointer; }
.merken.aktiv { color: #B98900; border-color: var(--gelb); background: var(--gelb-hell); }
/* Tagesrunde: Überspringen-Knopf in der Unterzeile (Okt. 2026) */
.sp-ueberspringen { margin-left: auto; float: right; background: none; border: 0; padding: 0 0 0 .5rem; color: var(--blau); font: inherit; font-weight: 600; text-decoration: underline; cursor: pointer; min-height: 0; }
/* Sudoku-Notizen (Okt. 2026) */
.sp-notizen { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); width: 100%; height: 100%; font-size: clamp(7px, 2.2vw, 11px); font-weight: 500; line-height: 1; color: #4A5A6A; }
.sp-notizen span { display: flex; align-items: center; justify-content: center; }
.sp-notiz-knopf.an { background: var(--blau); color: #fff; border-color: var(--blau); }
.segmente-umbruch { grid-template-columns: repeat(auto-fit, minmax(5.6rem, 1fr)); }
/* Nonogramm (Block 6, Okt. 2026) */
.sp-nonogramm { display: grid; grid-template-columns: max-content repeat(var(--ng-spalten), minmax(0, 1fr)); width: min(100%, 480px); margin: 0 auto; touch-action: none; user-select: none; -webkit-user-select: none; }
.sp-ng-spalte { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; padding: 0 0 4px; font: 600 clamp(11px, 3.1vw, 14px)/1.2 var(--schrift); color: var(--tinte); }
.sp-ng-zeile { display: flex; justify-content: flex-end; align-items: center; gap: 5px; padding: 0 6px 0 2px; font: 600 clamp(11px, 3.1vw, 14px)/1 var(--schrift); color: var(--tinte); }
.sp-ng-spalte.erledigt, .sp-ng-zeile.erledigt { color: #A9B4BF; }
.sp-ng-zelle { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; border-right: 1px solid var(--linie); border-bottom: 1px solid var(--linie); background: var(--papier); cursor: pointer; }
.sp-ng-zelle[data-r="0"] { border-top: 2px solid var(--tinte); }
.sp-ng-zelle[data-c="0"] { border-left: 2px solid var(--tinte); }
.sp-ng-zelle.trenn-r { border-right: 2px solid var(--tinte); }
.sp-ng-zelle.trenn-u { border-bottom: 2px solid var(--tinte); }
.sp-ng-zelle.voll { background: var(--tinte); }
.sp-ng-zelle.kreuz::after { content: '✕'; color: #4A5B6C; font: 600 clamp(10px, 3vw, 16px)/1 var(--schrift); }
.sp-ng-zelle.falsch { box-shadow: inset 0 0 0 3px #C0392B; }
.sp-ng-zelle.tipp { box-shadow: inset 0 0 0 3px var(--gelb); }
.sp-ng-zelle:focus-visible { outline: 3px solid var(--blau, #1F5FA8); outline-offset: -3px; position: relative; z-index: 1; }
.sp-quiz-zeit { height: 8px; margin: 6px 0 10px; border-radius: 4px; background: var(--linie); overflow: hidden; }
.sp-quiz-zeit span { display: block; height: 100%; width: 100%; background: var(--blau); transition: width .2s linear; }
.sp-quiz-zeit.knapp span { background: var(--rot); }
.sp-ng-hinweis { margin: 6px 0 0; text-align: center; color: #4A5A6A; }
.sp-ng-modi { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: min(100%, 480px); margin: 0 auto; }
.sp-ng-modus { min-height: 48px; font-weight: 700; padding-left: 4px; padding-right: 4px; white-space: nowrap; }
.sp-ng-modus.an { background: var(--blau); color: #fff; border-color: var(--blau); }
.sp-fertig .sp-nonogramm { opacity: 0.95; }

/* Block 7: Tagesziel, Serie, Abzeichen */
.tagesziel { margin: 0.6rem 0 0.8rem; }
.tagesziel-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; margin-bottom: 0.35rem; }
.tagesziel-serie { font-weight: 700; color: var(--tinte); }
.tagesziel-balken { height: 10px; border-radius: 5px; background: var(--linie); overflow: hidden; }
.tagesziel-balken span { display: block; height: 100%; background: var(--blau); border-radius: 5px; transition: width .3s; }
.tagesziel.geschafft .tagesziel-balken span { background: var(--gruen); }
.serie-hinweis { margin: 0 0 0.8rem; }
.abzeichen-neu { display: block; }
.abzeichen-symbol { font-size: 1.3em; }
.abzeichen-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: 0.5rem; margin: 0.6rem 0; }
.abzeichen-karte { padding: 0.6rem; border: 1px solid var(--linie); border-radius: 12px; background: var(--papier); text-align: center; }
.abzeichen-karte .abzeichen-symbol { display: block; font-size: 1.8rem; line-height: 1.2; }
.abzeichen-karte strong { display: block; font-size: 0.95rem; }
.abzeichen-karte small { display: block; color: #4A5A6A; font-size: 0.8rem; margin-top: 0.15rem; }
.abzeichen-karte.offen { opacity: 0.55; filter: grayscale(1); }
.abzeichen-leiste { display: flex; flex-wrap: wrap; gap: 0.35rem; font-size: 1.7rem; margin: 0.3rem 0 0.5rem; }
/* Duell-Wertung: Liga als farbiges Wort, kleiner als die Zahlen */
.duell-wertung .zahlen .zahl[class*="liga-"] { font-size: 1.55rem; line-height: 1.55; }
.zahl.liga-bronze { color: #9A5B2E; } .zahl.liga-silber { color: #6B7785; } .zahl.liga-gold { color: #B08400; }
.zahl.liga-platin { color: #3F7C8C; } .zahl.liga-diamant { color: #2F5FB3; }

/* ===== Okt. 2026: Einheitliche Links, Gegner finden, Verlauf, Wochenziel ===== */
/* Textlinks im Inhalt: Markenblau, fett, ohne Unterstrich – wie die Knöpfe. Rechtstexte behalten den Unterstrich. */
main a { color: var(--blau); font-weight: 700; text-decoration: none; }
main a.knopf.haupt, main a.sp-knopf.haupt { color: #fff; text-decoration: none; }
.rechtstext a, main .rechtstext a { text-decoration: underline; font-weight: inherit; }
a.mini-knopf { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; white-space: nowrap; }
.mini-knopf.leer { visibility: hidden; }
.community-details summary { color: var(--blau); font-weight: 700; text-decoration: none; }
/* Zurück-Link auf Unterseiten: gleiche Optik wie „‹ Heute“ im Spiel */
.zurueck-link { display: inline-flex; align-items: center; min-height: 44px; margin: -0.4rem 0 0.2rem -4px; padding: 0 10px 0 4px; color: var(--blau); font: 700 16px var(--schrift); text-decoration: none; border-radius: 8px; }
.zurueck-link:hover { background: #EEF4FA; text-decoration: none; }
.duel-held h2 { margin-top: 0.2rem; }
.kompakt-reihe { display: flex; gap: 0.45rem; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.kompakt-reihe .knopf, .kompakt-reihe form .knopf { width: auto; margin: 0; padding-left: 0.9rem; padding-right: 0.9rem; min-height: 42px; }
/* Gegner finden */
.gegner-weg { border-top: 1px solid var(--linie); padding-top: 0.2rem; margin-top: 0.9rem; }
.gegner-weg:first-of-type { border-top: 0; margin-top: 0; }
.gegner-weg h3 { margin-top: 0.8rem; }
.gegner-zeile small { display: block; color: var(--tinte-leise); font-size: 0.78rem; font-weight: 400; }
.freund-zeile > summary small { display: block; color: var(--tinte-leise); font-size: 0.78rem; font-weight: 400; }
/* Wochenziel und nächste Schritte */
.wochenziel { margin-top: -0.2rem; }
.wochenziel .tagesziel-kopf span:first-child { font-weight: 700; font-size: 0.9rem; }
.wochenziel .tagesziel-balken { height: 6px; }
.wochenziel .tagesziel-balken span { background: var(--gelb); }
.naechste-schritte { margin: 1rem 0 0.4rem; }
.naechste-schritte h3 { margin: 0 0 0.3rem; }
.naechste-schritte .knopf { margin-top: 0.5rem; }
/* Verlauf im Profil */
.verlauf-tabs { margin-bottom: 0.6rem; }
.verlauf-zeile { display: flex; align-items: center; gap: 0.7rem; padding: 0.55rem 0; border-bottom: 1px solid var(--linie); }
.verlauf-text { flex: 1; min-width: 0; }
.verlauf-text small { display: block; color: var(--tinte-leise); font-size: 0.78rem; }
.verlauf-monat-kopf { display: flex; align-items: center; justify-content: space-between; margin: 0.3rem 0 0.5rem; }
.verlauf-detail { margin-top: 0.7rem; }
.verlauf-detail p { margin: 0.2rem 0 0; }
.verlauf-jahr { display: grid; gap: 0.35rem; }
.verlauf-monat { display: grid; grid-template-columns: 3.6rem 1fr 3rem; gap: 0.6rem; align-items: center; min-height: 40px; color: var(--tinte); }
main a.verlauf-monat { color: var(--tinte); font-weight: 400; }
.verlauf-monat-name { font-weight: 700; font-size: 0.85rem; }
.verlauf-monat-zahl { text-align: right; font-size: 0.85rem; color: var(--tinte-leise); }
.verlauf-balken { display: flex; height: 12px; border-radius: 6px; background: #EDF1F5; overflow: hidden; }
.verlauf-balken .voll { background: var(--gruen); }
.verlauf-balken .halb { background: var(--gelb); }
/* Tageskarten: Namen nicht mitten im Wort umbrechen („Gedächtn-is“) */
.heute-karte { column-gap: 7px; padding: 8px 8px; }
.heute-karte .heute-symbol { width: 30px; height: 30px; font-size: 15px; }
.heute-karte { grid-template-columns: 30px minmax(0, 1fr); }
.heute-karte .heute-name { overflow-wrap: normal; word-break: normal; hyphens: manual; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -0.2px; }
@media (max-width: 380px) { .heute-karte .heute-name { font-size: 14px; } }
.zurueck-zeile { margin: 0 0 0.3rem; } .zurueck-zeile .zurueck-link { margin: 0 0 0 -4px; }
/* KenKen (Okt. 2026): gleiche Optik wie Sudoku, Käfige mit dicker Linie, Ziel oben links */
.sp-kenken { display: grid; grid-template-columns: repeat(var(--kk), 1fr); width: min(100%, 460px); width: min(100%, calc(100svh - 330px), 460px); min-width: 260px; margin: 0 auto; border: 3px solid var(--tinte); border-radius: 6px; overflow: hidden; touch-action: manipulation; }
.sp-kk-zelle { position: relative; aspect-ratio: 1; padding: 0; border: 0; border-right: 1px solid #D5DDE5; border-bottom: 1px solid #D5DDE5; background: var(--papier); color: var(--blau); font: 700 clamp(20px, 7vw, 32px) var(--schrift); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.sp-kk-zelle.kr { border-right: 3px solid var(--tinte); }
.sp-kk-zelle.ku { border-bottom: 3px solid var(--tinte); }
.sp-kk-ziel { position: absolute; top: 2px; left: 4px; font: 700 clamp(10px, 2.9vw, 14px) var(--schrift); color: var(--tinte); line-height: 1; pointer-events: none; }
.sp-kk-wert { margin-top: 0.35em; }
.sp-kk-zelle.bezug { background: #EEF4FA; }
.sp-kk-zelle.gewaehlt { background: var(--gelb-hell); box-shadow: inset 0 0 0 3px var(--gelb); }
.sp-kk-zelle.konflikt .sp-kk-wert { color: #B0582C; text-decoration: underline wavy #B0582C; }
.sp-kk-zelle.falsch { background: #FBE4E2; }
.sp-kk-zelle.falsch .sp-kk-wert { color: var(--rot); }
.sp-kk-zelle.tipp .sp-kk-wert { color: #7A5A00; }
.sp-kk-notizen { position: absolute; inset: 14px 2px 2px; width: auto; height: auto; }
.sp-kk-ziffern { grid-template-columns: repeat(var(--kk-tasten), minmax(0, 1fr)); gap: 5px; }
.sp-kk-ziffern .sp-ziffer { min-width: 0; padding: 0; font-size: 21px; }
.sp-fertig .sp-kk-zelle { cursor: default; }
/* Rätselübersicht als Raster (Okt. 2026) */
.raster-wahl { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 0.6rem; }
.raster-wahl .chip { display: inline-block; padding: 6px 11px; border: 2px solid var(--tinte); border-radius: 999px; background: var(--papier); color: var(--tinte); font-weight: 700; font-size: 15px; text-decoration: none; }
.raster-wahl .chip.aktiv { background: var(--tinte); color: var(--papier); }
.raster-zahl { margin: 0.2rem 0 0.7rem; }
.fundus-reiter { margin: 1rem 0 0.8rem; }
.fundus-reiter a { padding: 0.6rem 0.2rem; font-size: 0.86rem; white-space: nowrap; }
.reiter-zahl { display: inline-block; min-width: 1.2rem; padding: 0 0.3rem; border-radius: 999px; background: var(--grund); color: var(--tinte); font-size: 0.72rem; line-height: 1.2rem; }
.fundus-reiter a.aktiv .reiter-zahl { background: rgba(255,255,255,0.25); color: #fff; }
.fundus-reiter-text { margin: 0 0 0.6rem; }
.fundus-raster .raster-wahl .chip { padding: 5px 10px; font-size: 14px; }
.raster-wahl-zwei .chip-archiv { margin-left: auto; }
.fundus-seite .fundus-archiv { margin-top: 0; border-top: 0; }
.fundus-weiter { margin: 0.8rem 0 0.4rem; }
.fundus-weiter .fundus-sammlung-kopf h2 { margin: 0; }
.fundus-angefangen .fundus-karten-aktionen { flex-wrap: nowrap; }
/* 10g: kompakte Rätsel-Seite am Handy */
.fundus-seite .fundus-liste-kompakt .fundus-karte { flex-direction: row; align-items: center; padding: 0.5rem 0.7rem; gap: 0.6rem; }
.fundus-seite .fundus-liste-kompakt .fundus-karte > div:first-child { min-width: 0; flex: 1; }
.fundus-seite .fundus-liste-kompakt .fundus-karte .knopf { width: auto; flex: 0 0 auto; min-height: 40px; padding: 0.45rem 0.9rem; font-size: 0.92rem; }
.fundus-seite .fundus-liste-kompakt .fundus-karten-aktionen { width: auto; flex: 0 0 auto; }
.fundus-weiter .fundus-sammlung-kopf a { font-size: 0.85rem; white-space: nowrap; }
.fundus-seite .raetsel-kacheln { grid-template-columns: 1fr; gap: 6px; }
.fundus-seite .raetsel-kachel { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 8px 6px 12px; border-width: 1px; }
.fundus-seite .raetsel-kachel strong { margin: 0; }
.fundus-seite .raetsel-kachel .stufen { display: flex; gap: 5px; flex-wrap: nowrap; }
.fundus-seite .stufe-knopf { min-height: 40px; padding: 0 10px; font-size: 14px; }
@media (min-width: 700px) { .fundus-seite .raetsel-kacheln { grid-template-columns: 1fr 1fr; } }
.raster-wahl-zwei .chip-archiv { margin-left: 0; }
.serie-erinnerung { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; margin-top: 0.4rem; }
.serie-erinnerung.hervor { padding: 0.5rem 0.7rem; border: 1px solid var(--gelb); border-radius: 9px; background: var(--gelb-hell); }
.golive-liste { list-style: none; padding: 0; display: grid; gap: 0.5rem; }
.golive-liste li.offen strong { color: var(--tinte); }
.fundus-seite .raetsel-kachel strong { font-size: 15px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fundus-seite .raetsel-kachel .stufen { flex: 0 0 auto; gap: 4px; }
.fundus-seite .stufe-knopf { padding: 0 8px; font-size: 13px; }
.fundus-weiter .fundus-sammlung-kopf { flex-wrap: wrap; gap: 0.2rem 0.7rem; }
.fundus-weiter .fundus-sammlung-kopf a { white-space: normal; }
@media (max-width: 360px) { .fundus-seite .stufe-knopf { padding: 0 6px; font-size: 12px; } .fundus-seite .raetsel-kachel { padding-left: 8px; } }
.fundus-seite .fundus-liste-kompakt .fundus-karte strong { overflow-wrap: anywhere; }
.fundus-angefangen .verwerfen { min-width: 40px; min-height: 40px; color: var(--tinte-leise); }
.fundus-seite .raetsel-kacheln { grid-template-columns: minmax(0, 1fr); }
.fundus-seite .raetsel-kachel { min-width: 0; padding: 5px 5px 5px 10px; gap: 6px; }
.fundus-seite .raetsel-kachel strong { font-size: 14px; flex: 1 1 auto; }
.fundus-seite .stufe-knopf { padding: 0 7px; min-height: 38px; }
@media (min-width: 700px) { .fundus-seite .raetsel-kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fundus-seite .raetsel-kachel .stufen { gap: 3px; }
.fundus-seite .stufe-knopf { padding: 0 6px; }

/* 10h: gemeinsamer Kästchen-Baustein für Profil-Kalender, Tagesarchiv und Rätsel-Raster */
.kf-raster { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; max-width: 420px; }
.kf-wt { text-align: center; font-size: 0.72rem; color: var(--tinte-leise); font-weight: 700; }
.kf { display: inline-flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 1; margin: 0; padding: 0; border: 2px solid #C9D3DD; border-radius: 7px; background: var(--papier); color: var(--tinte); font: 700 0.85rem var(--schrift); line-height: 1; text-decoration: none; box-sizing: border-box; }
main a.kf, button.kf { cursor: pointer; color: var(--tinte); font-weight: 700; }
.kf-gut, main a.kf-gut, button.kf-gut { background: var(--gruen); border-color: var(--gruen); color: #fff; }
.kf-halb { background: var(--gelb-hell); border-color: var(--gelb); }
.kf-verpasst { background: #FDF1F0; border-color: #E3A9A4; }
.kf-pause { background: #E4ECF4; border-color: #AFC3D6; border-style: dashed; }
.kf-gesperrt, main a.kf-gesperrt, button.kf-gesperrt { background: #F1F3F5; border-color: #E2E6EA; color: #B4C0CB; }
.kf-leer { background: transparent; border-color: transparent; color: #B4C0CB; }
.kf.ist-heute { box-shadow: 0 0 0 2px var(--blau); }
.kf.gewaehlt { outline: 3px solid var(--tinte); outline-offset: 1px; }
a.kf:hover, button.kf:hover { outline: 2px solid var(--blau); outline-offset: 1px; }
.kf-klein { width: 28px; height: 28px; flex: 0 0 auto; aspect-ratio: auto; font-size: 0.8rem; }
.kf-legende { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.8rem; margin-top: 0.8rem; }
.kf-legende span { display: inline-flex; align-items: center; gap: 0.3rem; }
.kf-legende .kf { width: 14px; height: 14px; aspect-ratio: auto; border-width: 1px; border-radius: 4px; }
.plus-vorteile { margin: 0.4rem 0 0.9rem; padding-left: 1.2rem; display: grid; gap: 0.35rem; }
.hinweis-box.gruender { border-color: var(--gelb); background: var(--gelb-hell); }
.sp-kw-liste li.erledigt button { color: var(--gruen); text-decoration: line-through; text-decoration-color: rgba(0,0,0,.25); }
.sp-kw-liste li.erledigt button::after { content: " ✓"; }
/* 10j: gemerkte Rätsel im Raster mit kleinem Stern */
.kf.kf-gemerkt { position: relative; }
.kf.kf-gemerkt::after { content: "★"; position: absolute; top: 1px; right: 2px; font-size: 0.6rem; line-height: 1; color: #C98A00; }
.kf-gut.kf-gemerkt::after { color: #FFE08A; }
/* 10j: Auswahlknöpfe der Rätsel-Seite groß genug für Finger und Augen (min. 44 px, 15 px Schrift). */
.fundus-seite .stufe-knopf { min-height: 44px; padding: 0 12px; font-size: 15px; border-radius: 10px; }
.fundus-seite .raetsel-kachel { flex-wrap: wrap; padding: 8px 8px 8px 12px; gap: 6px 8px; }
.fundus-seite .raetsel-kachel strong { font-size: 16px; }
.fundus-seite .raetsel-kachel .stufen { gap: 6px; }
.fundus-seite .raster-wahl .chip, .fundus-raster .raster-wahl .chip { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; font-size: 15px; }
.fundus-seite .fundus-reiter a { min-height: 44px; display: flex; align-items: center; justify-content: center; font-size: 15px; }
/* Schmale Handys: Name oben, Stufen darunter in eigener Zeile über die ganze Breite */
@media (max-width: 430px) {
  .fundus-seite .raetsel-kachel { flex-direction: column; align-items: stretch; }
  .fundus-seite .raetsel-kachel strong { white-space: normal; }
  .fundus-seite .raetsel-kachel .stufen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fundus-seite .stufe-knopf { justify-content: center; padding: 0 6px; }
  .fundus-seite .fundus-reiter a { font-size: 14px; }
}
/* 10l: ein einheitliches Kästchen überall. Gleicher Rahmen, gleiche Größe, Status nur über die Farbe.
   Künftige/leere Tage als blasses Kästchen statt unsichtbar; Pause ohne gestrichelten Rand;
   „heute“ nur farbiger Rand statt zusätzlichem Ring. */
.kf-zukunft { background: var(--papier); border-color: #E6EBF0; color: #B4C0CB; }
button.kf-zukunft, main a.kf-zukunft { color: #B4C0CB; cursor: default; }
.kf-pause { border-style: solid; }
.kf.ist-heute { box-shadow: none; border-color: var(--blau); }
.kf-legende .kf-zukunft { display: none; }

/* 10n: Meldung direkt am abgeschickten Formular */
.hinweis-box.am-formular { margin: 0.6rem 0; animation: meldung-ein 0.35s ease-out; }
@keyframes meldung-ein { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .hinweis-box.am-formular { animation: none; } }

/* 10o: Profil mit Link zu den Einstellungen */
.profil-aktionen { display: flex; justify-content: flex-end; margin: 0 0 0.4rem; }
.profil-zahnrad { display: inline-flex; align-items: center; gap: 0.35rem; min-height: 44px; padding: 0 0.8rem; border-radius: 999px; color: var(--blau, #24527F); background: var(--papier); text-decoration: none; font-weight: 700; }
.profil-zahnrad span { font-size: 1.2rem; }
.seiten-titel { margin: 0.4rem 0 0.8rem; }
.profil-uebersicht .wochenziel { margin-top: 0.9rem; }

/* 10o: Rätsel-Seite: Stufe oben, Karten wie auf der Heute-Seite */
.stufen-wahl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 4px 0 10px; }
.stufen-wahl .chip { text-align: center; min-height: 44px; display: flex; align-items: center; justify-content: center; }
.stufen-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.raetsel-karte .heute-name { white-space: normal; overflow: visible; text-overflow: clip; font-size: 14.5px; }
.raetsel-karten { margin-top: 0; }
a.heute-karte { text-decoration: none; }
a.heute-karte:hover, a.heute-karte:focus-visible { border-color: var(--blau); }
.heute-karte.leer { opacity: 0.55; cursor: default; }
/* 10o: gesperrte Kästchen zeigen ein kleines Schloss und führen zu Plus */
.kf-raster .kf-gesperrt { position: relative; }
.kf-raster .kf-gesperrt::after { content: "🔒"; position: absolute; right: 1px; bottom: 0; font-size: 9px; line-height: 1; opacity: 0.8; }
/* 10p: Blättern im großen Rätselbestand */
.raster-blaettern { margin-bottom: 0.6rem; }
.raster-bereich select { min-height: 44px; padding: 0 0.6rem; border: 2px solid var(--linie); border-radius: 10px; background: var(--papier); font: 600 15px var(--schrift); color: var(--tinte); }

/* 10q: Titel-Zeile und kompaktes Wochenziel auf der Heute-Seite */
.heute-titel { display: inline-block; margin: 2px 0 8px; font-size: 14px; color: var(--tinte-leise); text-decoration: none; }
.heute-titel-name { font-weight: 700; color: var(--blau); }
.tagesziel.wochenziel.kompakt { margin-top: 6px; }
.tagesziel.wochenziel.kompakt .tagesziel-kopf { font-size: 14px; font-weight: 600; }
.tagesziel.wochenziel.kompakt .tagesziel-balken { height: 6px; }

/* 10r: Beta-Hinweis, Rückmeldung, Gründerfrist, Duell-Stufe, Tempomacher */
.beta-chip { display: inline-block; vertical-align: middle; font-family: var(--schrift); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--blau-dunkel); background: var(--gelb-hell); border: 1px solid var(--gelb); border-radius: 999px; padding: 0.05rem 0.45rem; margin-left: 0.3rem; }
.beta-leiste { max-width: 620px; margin: 1.5rem auto 0; padding: 0.7rem 1rem; text-align: center; font-size: 0.95rem; color: var(--tinte); }
.beta-leiste .beta-chip { margin: 0 0.3rem 0 0; }
.beta-link { font-weight: 700; color: var(--blau); white-space: nowrap; }
.gruender-frist { display: inline-block; margin-top: 0.35rem; }
.rueckmeldung-form textarea { width: 100%; min-height: 9rem; font: inherit; font-size: 1.05rem; padding: 0.7rem; border: 1px solid var(--linie); border-radius: var(--rund); box-sizing: border-box; }
.rueckmeldung-form .art-wahl { display: flex; flex-wrap: wrap; gap: 0.5rem; border: 0; padding: 0; margin: 0 0 1rem; }
.rueckmeldung-form .art-wahl label { display: inline-flex; align-items: center; gap: 0.4rem; border: 1px solid var(--linie); border-radius: 999px; padding: 0.55rem 0.9rem; min-height: 44px; box-sizing: border-box; cursor: pointer; }
.duell-stufe .eingabe { min-width: 8rem; }
.tempomacher-hinweis { font-size: 0.9rem; color: var(--tinte-leise); }
@media print { .beta-leiste { display: none !important; } }

/* Update 11: Erinnerung und Web-App */
.knopf-reihe { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .6rem; }
.knopf-reihe .knopf { flex: 1 1 auto; margin: 0; }
.app-frage h3, .app-hinweis h3 { margin: 0 0 .3rem; font-size: 1.05rem; }
.push-zeile { margin-top: .4rem; }

/* =====================================================================
   11d: Lob, App-Symbol, Einladen, Plus-Seite, Nonogramm-Leiste
   ===================================================================== */
@media (max-width: 759px) { .seitenkopf { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; } }
.kopf-app { min-height: 40px; padding: 0.2rem 0.7rem; border: 1px solid var(--blau); border-radius: 999px; background: var(--papier); color: var(--blau); font: 700 0.85rem var(--schrift); cursor: pointer; white-space: nowrap; }
.kopf-app[hidden] { display: none; }
.app-anleitung { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 1rem; background: rgba(27, 42, 58, 0.45); }
.app-anleitung-karte { max-width: 420px; width: 100%; background: var(--papier); border-radius: 14px; padding: 1.1rem 1.2rem; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); }
.app-anleitung-karte h2 { margin-top: 0; font-size: 1.15rem; }
.app-streifen { display: flex; align-items: center; gap: 0.6rem; margin: 0.9rem 0; padding: 0.55rem 0.7rem; border: 1px solid var(--linie); border-radius: 12px; background: #EEF4FA; }
.app-streifen-text { flex: 1; font-size: 0.92rem; }
.app-streifen .knopf { width: auto; margin: 0; min-height: 44px; padding: 0.3rem 0.8rem; }
.app-streifen-zu { min-width: 44px; min-height: 44px; border: 0; background: none; color: var(--tinte-leise); font-size: 1.4rem; cursor: pointer; }
.gast-intro { font-size: 1.05rem; margin: 0.3rem 0 0.8rem; }
.start-hinweis { text-align: center; margin-top: -0.3rem; }
.geschenk-saison { text-align: center; }
.einladung strong { color: var(--gruen); }

/* Lob mit nächstem Ziel: kurz (0,9 s), ohne Ton; bei „weniger Bewegung“ ohne Animation */
.lob-box { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.5rem; margin: 0.6rem 0; padding: 0.6rem 0.8rem; border-radius: 10px; background: var(--gruen-hell); color: #174d2c; animation: lob-auf 0.9s ease-out both; }
.lob-box.nur-ziel { background: #EEF4FA; color: var(--tinte); animation: none; }
.lob-stern { display: inline-block; color: #C88A00; font-size: 1.2rem; animation: lob-stern 0.9s ease-out both; }
.lob-titel { font-size: 1.05rem; }
.lob-ziel { flex-basis: 100%; font-size: 0.92rem; }
.lob-box.nur-ziel .lob-ziel { flex-basis: auto; }
@keyframes lob-auf { 0% { opacity: 0; transform: scale(0.9); } 60% { opacity: 1; transform: scale(1.03); } 100% { transform: scale(1); } }
@keyframes lob-stern { 0% { transform: rotate(-40deg) scale(0.4); } 70% { transform: rotate(10deg) scale(1.25); } 100% { transform: rotate(0) scale(1); } }
@media (prefers-reduced-motion: reduce) { .lob-box, .lob-stern { animation: none; } }

/* Nonogramm: drei sichtbare Knöpfe „Wechseln · ■ · ✕“ */
.sp-ng-modi { grid-template-columns: 1.6fr 1fr 1fr; }
.sp-ng-modus[aria-pressed="true"] { background: var(--blau); color: #fff; border-color: var(--blau); }

/* Plus-Seite */
.plus-unterschied { background: #F6F8FA; border-radius: 10px; padding: 0.6rem 0.8rem; }
.plus-vorteile .mini-knopf { margin-left: 0.3rem; min-height: 36px; }
.geschenk-persoenlich { margin: 0.6rem 0; }

/* Freunde einladen */
.werben-karte h3 { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.ehrenstufe { font: 700 0.8rem var(--schrift); padding: 0.15rem 0.55rem; border-radius: 999px; background: #F3E3C3; color: #7A4A00; }
.ehrenstufe.stufe-silber { background: #E6EAEE; color: #3D4A57; }
.ehrenstufe.stufe-gold { background: #FCEBA6; color: #6B5200; }
.werben-zahlen { margin: 0.8rem 0 0.4rem; }
.teilen-meldung:empty { display: none; }
.gegenangebot { margin-top: 0.5rem; }
.gegenangebot > summary { display: inline-flex; list-style: none; cursor: pointer; }
.gegenangebot > summary::-webkit-details-marker { display: none; }
.werben-teaser { display: block; font-weight: 400; font-size: 0.85rem; color: var(--tinte-leise); }

/* ---------- Update 11e ---------- */
/* Plus-Seite: ein Satz, drei Vorteile, Preiswahl */
.plus-claim { font-family: var(--titel); font-size: 1.3rem; font-weight: 700; line-height: 1.3; margin: 0.2rem 0 0.3rem; color: var(--blau-dunkel); }
.plus-ab { margin: 0 0 0.9rem; color: var(--tinte-leise); }
.plus-ab strong { color: var(--gruen); }
.plus-kacheln { list-style: none; padding: 0; margin: 0 0 0.8rem; display: grid; gap: 0.6rem; }
@media (min-width: 600px) { .plus-kacheln { grid-template-columns: 1fr 1fr; } .plus-kacheln .kachel-heft { grid-column: 1 / -1; } }
.plus-kachel { display: flex; flex-direction: column; gap: 0.2rem; padding: 0.8rem 0.9rem; border-radius: var(--rund); background: #F5F9FD; border: 1px solid var(--linie); }
.plus-kachel strong { font-size: 1.02rem; }
.plus-kachel span:not(.kachel-symbol) { font-size: 0.92rem; color: var(--tinte-leise); }
.plus-kachel .mini-knopf { align-self: flex-start; margin-top: 0.3rem; }
.kachel-symbol { font-size: 1.5rem; line-height: 1; }
.kachel-heft { background: var(--gelb-hell); border-color: #EBD48A; }
.kachel-heft strong { font-size: 1.12rem; }
.plan-spar { color: var(--gruen); }
.warum-monatlich { margin: 0.4rem 0 0.8rem; }
.warum-monatlich summary { font-size: 0.9rem; }
.gruender-hinweis { margin: 0.6rem 0; padding: 0.6rem 0.8rem; border-radius: 10px; background: var(--gruen-hell); font-size: 0.92rem; }
.gruender-zeile { margin: 0.3rem 0 0.6rem; }
.plus-zeile { margin: 0.8rem 0 0; padding: 0.55rem 0.8rem; border-radius: 10px; background: #F5F9FD; font-size: 0.92rem; }

/* Abzeichen neben dem Spitznamen */
.abz { display: inline-flex; align-items: center; gap: 0.2rem; margin-left: 0.15rem; font-size: 0.85em; line-height: 1; white-space: nowrap; vertical-align: middle; }
.profil-abzeichen .abz, .gruender-zeile .abz { padding: 0.2rem 0.55rem; border-radius: 999px; background: #EEF3F8; font: 700 0.8rem var(--schrift); }
.profil-abzeichen .abz-gruender, .gruender-zeile .abz-gruender { background: var(--gruen-hell); color: #174d2c; }
.profil-abzeichen { margin: 0.2rem 0 0; display: flex; flex-wrap: wrap; gap: 0.3rem; }
.ehrenstufe.stufe-platin { background: #DDEFF2; color: #1F5560; }
.ehrenstufe.stufe-diamant { background: #E3E6FB; color: #2F3787; }

/* Einladen-Leiste: sichtbarer Link, Kopieren mit Bestätigung, WhatsApp, E-Mail, Teilen */
.teilen-panel { margin: 0.6rem 0; }
.teilen-link { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: stretch; margin: 0.2rem 0 0.5rem; }
.teilen-link .eingabe { flex: 1 1 13rem; min-width: 0; margin: 0; font-size: 0.85rem; background: #F6F8FA; }
.teilen-link .knopf { margin: 0; white-space: nowrap; flex: 1 0 auto; width: auto; }
.teilen-knoepfe { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.teilen-knoepfe .knopf { flex: 1 1 6.5rem; margin: 0; width: auto; text-align: center; }
.knopf.teilen-wa { background: #1F8F4E; border-color: #1F8F4E; color: #fff; }
.knopf.teilen-mail, .knopf.teilen-mehr { background: var(--papier); color: var(--blau); border: 2px solid var(--blau); }
.knopf.kopiert { background: var(--gruen); border-color: var(--gruen); color: #fff; }
.teilen-meldung:empty { display: none; }
.werben-verschenken { margin: 0.8rem 0; padding: 0.7rem 0.9rem; border-radius: 10px; background: var(--gelb-hell); }
.werben-verschenken h4 { margin: 0 0 0.3rem; }
.werben-code-form { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.werben-code-form .eingabe { width: auto; margin: 0; }
.werben-code-form .knopf { margin: 0; width: auto; }

/* App-Anleitung je Gerät */
.app-schritte { margin: 0.4rem 0 0.6rem; padding-left: 1.3rem; display: grid; gap: 0.4rem; }
.ios-teilen { vertical-align: -5px; color: var(--blau); }

/* ---------- Update 11f ---------- */
.knopf.teilen-fb { background: #1877F2; border-color: #1877F2; color: #fff; }
.werben-belohnung { margin: 0.4rem 0 0.6rem; padding: 0.7rem 0.9rem; border-radius: 10px; background: var(--gelb-hell); font-size: 0.95rem; }
.werben-fortschritt { margin: 0.4rem 0 0.6rem; }
.werben-balken { height: 12px; border-radius: 999px; background: #E1E8EF; overflow: hidden; margin: 0.3rem 0; }
.werben-balken span { display: block; height: 100%; min-width: 6px; border-radius: 999px; background: var(--gruen); }
.ergebnis-teilen { margin: 0.9rem 0; padding: 0.8rem 0.9rem; border-radius: var(--rund); background: #F5F9FD; border: 1px solid var(--linie); }
.ergebnis-teilen h3 { margin: 0 0 0.4rem; }
.ergebnis-vorschau { margin: 0 0 0.6rem; padding: 0.6rem 0.7rem; border-radius: 8px; background: var(--papier); font: 0.9rem/1.5 var(--schrift); white-space: pre-wrap; }
.ergebnis-teilen .teilen-knoepfe .knopf.haupt { flex: 1 1 100%; }
.teilen-anreiz { margin: 0.5rem 0 0; }

/* 11h: kompakte, gut erkennbare Einstiegspunkte und Filter statt Chip-Wände */
.profil-schnellnav { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; margin:0 0 .6rem; }
.profil-schnellnav .knopf { margin:0; flex:1 1 215px; text-align:center; }
.profil-schnellnav .mini-knopf { text-decoration:none; min-height:44px; display:inline-flex; align-items:center; }
.fundus-filter-kompakt { display:flex; flex-wrap:wrap; align-items:flex-end; gap:.6rem; margin:0 0 .9rem; }
.fundus-filter-kompakt label { flex:1 1 135px; font-size:.86rem; font-weight:700; }
.fundus-filter-kompakt .eingabe { width:100%; margin:.15rem 0 0; }
.fundus-filter-kompakt .knopf,.fundus-filter-kompakt .mini-knopf { margin:0; min-height:44px; }
.ranglisten-filter { margin:.55rem 0; }
.ranglisten-filter summary { padding:.35rem .1rem; cursor:pointer; }
.ranglisten-art { display:block; margin:.5rem 0; font-weight:700; }
.ranglisten-art select { display:block; width:100%; }
.duell-option { padding:.65rem; border:1px solid var(--linie); border-radius:var(--rund); background:var(--papier); }
.duell-option > summary { font-weight:700; color:var(--blau); cursor:pointer; min-height:36px; }
.duell-option[open] > summary { margin-bottom:.6rem; }
.sp-ws-hinweis-option { font-size:.9rem; padding:.2rem .5rem; margin:.5rem 0; border-left:3px solid var(--linie); }
.sp-ws-hinweis-option summary { cursor:pointer; color:var(--blau); font-weight:700; }
@media(max-width:480px){ .fundus-filter-kompakt label { flex-basis:calc(50% - .35rem); } .fundus-filter-kompakt .knopf { flex:1 1 100%; } }

/* 11h: Werberallye */
.werben-rallye { border-top:1px solid var(--linie); margin-top:.8rem; padding-top:.7rem; }
.werben-rallye h4 { margin:.3rem 0; }
.rallye-liste { padding-left:1.6rem; }
.rallye-liste li { padding:.15rem 0; }
.rallye-liste li strong { float:right; }
.rallye-anonym-form { margin-top:.7rem; display:flex; align-items:center; flex-wrap:wrap; gap:.5rem; font-size:.83rem; }
.rallye-anonym-form label { flex:1 1 180px; }