/* Knobelbande — Mein Notizbuch. Regeln: 03-spiele/notizbuch/CLAUDE.md
   Nur Tokens aus 05-gemeinsam/design/knobelbande.css, keine eigenen Farben. */

/* Kopf: Zahl gemerkter Rätsel am Knopf „Mein Notizbuch“ ------------------- */
.kopf__notizbuch-zahl {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.6em;
  height: 1.6em;
  padding: 0 .35em;
  margin-left: calc(var(--abstand-1) * -1);
  border-radius: var(--radius-rund);
  background: var(--rotstift);
  color: var(--papier-weiss);
  font-size: var(--groesse-klein);
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* Rätselseite: Rückmeldung unter Merken / Hab's gelöst --------------------- */
.raetsel-aktionen .knopfreihe { margin: 0; }
.notizbuch-meldung {
  display: inline-flex;
  align-items: center;
  gap: var(--abstand-2);
  justify-self: start;
  margin: calc(var(--abstand-2) * -1) 0 0;
  padding: var(--abstand-1) var(--abstand-3);
  background: var(--zettel-gelb);
  border-radius: var(--radius-klein);
  box-shadow: var(--schatten-zettel);
  font-family: var(--schrift-hand);
  font-size: var(--groesse-gross);
  line-height: 1.3;
  transform: rotate(-1.5deg);
  opacity: 0;
  transition: opacity .25s ease, transform .25s ease;
}
.notizbuch-meldung.ist-sichtbar { opacity: 1; transform: rotate(-1.5deg) translateY(0); }
.notizbuch-meldung:not(.ist-sichtbar) { transform: rotate(-1.5deg) translateY(-4px); }
.notizbuch-meldung--fehler { background: var(--fehler-hell); }
.notizbuch-meldung .icon { flex: none; }

/* Gelöst-Knopf: grüner Haken statt Kennfarbe */
.knopf--geloest[aria-pressed="true"] { --knopf-grund: var(--erfolg-hell); --knopf-rand: var(--erfolg); }

/* Stempel „Gelöst“ im Kopf der Rätselseite (neben dem Entwurf-Stempel) */
.raetsel__geloest { position: absolute; right: 0; top: 2.2rem; font-size: 1rem; }
.raetsel__kopf:not(:has(.raetsel__stempel)) .raetsel__geloest { top: 0; }

/* Marker an Rätselkarten ---------------------------------------------------- */
.raetselkarte__gemerkt {
  position: absolute;
  top: -2px;
  right: var(--abstand-4);
  width: 1.6rem;
  height: 2.1rem;
  display: flex;
  justify-content: center;
  padding-top: .3rem;
  background: var(--rotstift);
  color: var(--papier-weiss);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 78%, 0 100%);
}
.raetselkarte__gemerkt .icon { width: 1rem; height: 1rem; stroke-width: 2.4; }
/* Gelöst-Stempel weicht dem Lesezeichen aus */
.raetselkarte .raetselkarte__geloest { top: var(--abstand-3); right: var(--abstand-3); }
.raetselkarte.ist-gemerkt .raetselkarte__geloest { right: calc(var(--abstand-4) + 2.2rem); }
.raetselkarte.ist-gemerkt .raetselkarte__art,
.raetselkarte.ist-geloest .raetselkarte__art { padding-right: 6rem; }
/* Karten ohne Art-Etikett (Übersicht einer Art): Platz für Lesezeichen/Stempel neben dem Titel */
.raetselkarte--ohne-art.ist-gemerkt .raetselkarte__titel,
.raetselkarte--ohne-art.ist-geloest .raetselkarte__titel { padding-right: 6rem; }

/* Seite /notizbuch/ --------------------------------------------------------- */
/* Platz freihalten, bis /raetsel.json da ist (sonst Layoutsprung des Fußes, CLS) */
.notizbuch { min-height: min(70vh, 40rem); }
.notizbuch__laden { font-family: var(--schrift-hand); font-size: var(--groesse-gross); color: var(--bleistift); }
.notizbuch__leer { margin: var(--abstand-5) var(--abstand-2) var(--abstand-6); }
.notizbuch__arten {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-2);
  margin: var(--abstand-3) 0 0;
  padding: 0;
  list-style: none;
}
.notizbuch__arten li { margin: 0; }
.notizbuch__arten .etikett { min-height: var(--tippflaeche); text-decoration: none; }

.notizbuch__abschnitt { margin: var(--abstand-6) 0; }
.notizbuch__titel {
  display: flex;
  align-items: center;
  gap: var(--abstand-2);
  margin-bottom: var(--abstand-4);
}
.notizbuch__titel:focus { outline: none; }
.notizbuch__titel:focus-visible { box-shadow: var(--fokus); border-radius: var(--radius-klein); }
.notizbuch__anzahl {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  height: 2rem;
  padding: 0 .4rem;
  border: 2px solid var(--tinte);
  border-radius: var(--radius-rund);
  font-family: var(--schrift-grund);
  font-size: var(--groesse-klein);
  font-weight: 800;
}
.notizbuch__leertext { color: var(--tinte-weich); }

.notizbuch__karten > .notizbuch__eintrag {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-2);
}
.notizbuch__karten .raetselkarte { flex: 1; }
.notizbuch__entfernen { align-self: flex-start; min-height: var(--tippflaeche); }

/* Fortschritt je Art */
.fortschritt {
  display: grid;
  gap: var(--abstand-4);
  margin: 0;
  padding: var(--abstand-4);
  list-style: none;
  background: var(--papier-weiss);
  border: 2px solid var(--tinte);
  border-radius: var(--radius-mittel);
  box-shadow: var(--schatten-papier);
}
@media (min-width: 40rem) { .fortschritt { grid-template-columns: 1fr 1fr; gap: var(--abstand-4) var(--abstand-6); } }
.fortschritt__art { margin: 0; }
.fortschritt__text {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--abstand-2);
  margin: 0 0 var(--abstand-2);
}
.fortschritt__text .icon { color: var(--farbe-art-dunkel); flex: none; }
/* Der Text bricht neben dem Icon um, statt als Ganzes darunter zu rutschen (S12, 360 px) */
.fortschritt__text > span:not(.fortschritt__stempel) { flex: 1 1 0; min-width: 0; }
.fortschritt__stempel { font-size: var(--groesse-klein); margin-left: auto; }
.fortschritt__balken {
  display: block;
  height: .9rem;
  border: 2px solid var(--tinte);
  border-radius: var(--radius-rund);
  background: var(--papier-alt);
  overflow: hidden;
}
.fortschritt__fuellung {
  display: block;
  height: 100%;
  min-width: 0;
  background: var(--farbe-art);
  border-right: 2px solid var(--tinte);
  transition: width .4s ease;
}
.fortschritt__fuellung.ist-leer { border-right: 0; }

/* Liste gelöster Rätsel: kurz, wie abgehakte Zeilen im Heft */
.notizbuch__geloest-liste {
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--papier-weiss);
  border: 2px solid var(--tinte);
  border-radius: var(--radius-mittel);
}
.notizbuch__geloest-liste li { margin: 0; border-top: 1px solid var(--linie); }
.notizbuch__geloest-liste li:first-child { border-top: 0; }
.notizbuch__geloest-link {
  --karte-dunkel: var(--farbe-art-dunkel);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--abstand-1) var(--abstand-3);
  min-height: var(--tippflaeche);
  padding: var(--abstand-2) var(--abstand-4);
  color: var(--tinte);
  text-decoration: none;
}
.notizbuch__geloest-link:hover { background: var(--papier-alt); }
.notizbuch__geloest-link:focus-visible { outline: none; box-shadow: var(--fokus); }
.notizbuch__geloest-link .icon { color: var(--karte-dunkel); flex: none; }
.notizbuch__geloest-titel { font-weight: 700; text-decoration: underline; text-decoration-color: var(--gruenstift); text-decoration-thickness: 2px; text-underline-offset: .2em; }
.notizbuch__geloest-art { margin-left: auto; font-size: var(--groesse-klein); color: var(--tinte-weich); }
.notizbuch__geloest-link.raetselkarte--scherzfragen { --karte-dunkel: var(--farbe-scherzfragen-dunkel); }
.notizbuch__geloest-link.raetselkarte--raetselfragen { --karte-dunkel: var(--farbe-raetselfragen-dunkel); }
.notizbuch__geloest-link.raetselkarte--ratekrimis { --karte-dunkel: var(--farbe-ratekrimis-dunkel); }
.notizbuch__geloest-link.raetselkarte--krimiraetsel { --karte-dunkel: var(--farbe-krimiraetsel-dunkel); }
.notizbuch__geloest-link.raetselkarte--sudoku { --karte-dunkel: var(--farbe-sudoku-dunkel); }

.notizbuch__vergessen { margin: var(--abstand-7) 0 var(--abstand-5); padding-top: var(--abstand-4); border-top: 2px dashed var(--papier-kante); }
.notizbuch__frage { max-width: 32rem; margin: 0 var(--abstand-2); }
.notizbuch__frage .knopfreihe { margin-bottom: 0; }

@media print {
  .raetselkarte__gemerkt, .notizbuch-meldung, .notizbuch__vergessen, .notizbuch__entfernen { display: none !important; }
}