/* Knobelbande Logical „Wer war’s?“ — Notizbuch-Look. Tokens aus 05-gemeinsam/design/knobelbande.css,
   Bedienung und Klassen: 03-spiele/logical/CLAUDE.md
   Ohne JavaScript und im Druck stehen Hinweise als Liste und die leeren Tabellen da (Vorlage
   02-webseite/anwendung/vorlagen/logical.html); das Spiel setzt Knöpfe in dieselben Tabellen. */

.logical {
  --zelle: var(--tippflaeche, 44px);
  margin: var(--abstand-5) 0;
}
@media (min-width: 40rem) {
  .logical { --zelle: 46px; }
}
.logical__titel { margin: var(--abstand-5) 0 var(--abstand-3); }
.logical__anleitung { margin: 0 0 var(--abstand-4); }

/* --- Hinweise: ohne JavaScript eine nummerierte Liste, mit JavaScript Zettel zum Abhaken ------- */
.logical-hinweise { margin: 0; padding-left: 1.4em; display: grid; gap: var(--abstand-2); }
.logical--aktiv .logical-hinweise { list-style: none; padding: 0; gap: var(--abstand-3); }
.logical-hinweis {
  display: flex;
  gap: var(--abstand-3);
  align-items: flex-start;
  width: 100%;
  min-height: var(--tippflaeche);
  padding: var(--abstand-2) var(--abstand-3);
  border: 0;
  background: var(--zettel-gelb);
  box-shadow: var(--schatten-zettel);
  color: var(--tinte);
  font: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.logical-hinweise > li:nth-child(even) .logical-hinweis { background: var(--zettel-rosa); transform: rotate(.3deg); }
.logical-hinweise > li:nth-child(odd) .logical-hinweis { transform: rotate(-.3deg); }
.logical-hinweis__nr {
  flex: 0 0 auto;
  min-width: 1.3em;
  font-family: var(--schrift-hand);
  font-size: var(--groesse-gross);
  line-height: 1.2;
}
.logical-hinweis[aria-pressed="true"] .logical-hinweis__text {
  text-decoration: line-through;
  text-decoration-color: var(--bleistift);
  text-decoration-thickness: 2px;
  opacity: .55;
}
.logical-hinweis:focus { outline: none; }
.logical-hinweis:focus-visible { box-shadow: var(--fokus); }
.logical__tipp { margin: var(--abstand-3) 0 0; color: var(--tinte-weich); font-size: var(--groesse-klein); }

/* --- Kreuzchen-Tabelle: ein Block je Gruppe, ab 3 Gruppen dazu die Verbindungs-Tabellen ------- */
.logical-blatt__teil {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end; /* Kästchen unten bündig, auch wenn die Spaltenköpfe verschieden hoch sind */
  gap: var(--abstand-5) var(--abstand-6);
}
.logical-blatt__titel {
  margin: var(--abstand-6) 0 var(--abstand-3);
  padding-top: var(--abstand-4);
  border-top: 2px dashed var(--papier-kante);
  font-family: var(--schrift-hand);
  font-size: var(--groesse-h3);
  text-align: center;
  color: var(--farbe-art-dunkel);
}
.logical-blatt {
  padding: var(--abstand-4) var(--abstand-1);
  background-color: var(--papier-weiss);
  background-image:
    linear-gradient(var(--linie-karo) 1px, transparent 1px),
    linear-gradient(90deg, var(--linie-karo) 1px, transparent 1px);
  background-size: 12px 12px;
  border: 1px solid var(--papier-kante);
  border-radius: var(--radius-klein);
  box-shadow: var(--schatten-flach);
}
/* Sehr schmale Handys (360 px): jeder Pixel für die Kästchen */
@media (max-width: 23rem) {
  .logical-blatt { padding-inline: 0; border-inline: 0; border-radius: 0; }
  .logical-tabelle tbody th { padding-right: var(--abstand-1); }
}
/* Passt ein Block einmal nicht in die Breite, scrollt nur er selbst, nie die Seite */
.logical-block { max-width: 100%; overflow-x: auto; }
.logical-tabelle { border-collapse: collapse; margin: 0 auto; }
.logical-tabelle caption {
  caption-side: top;
  padding-bottom: var(--abstand-1);
  font-family: var(--schrift-hand);
  font-size: var(--groesse-gross);
  text-align: left;
}
.logical-block--verbindung .logical-tabelle caption { color: var(--farbe-art-dunkel); }
.logical-tabelle thead th {
  padding: var(--abstand-1) 0;
  vertical-align: bottom;
  font-size: var(--groesse-klein);
  font-weight: 700;
  line-height: 1.1;
  color: var(--tinte-weich);
}
.logical-tabelle thead th span {
  display: inline-block;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
}
.logical-tabelle tbody th {
  padding: 0 var(--abstand-2) 0 0;
  font-family: var(--schrift-hand);
  font-size: var(--groesse-gross);
  font-weight: 400;
  line-height: 1.1;
  text-align: left;
  white-space: nowrap;
}
/* Werte als Zeilen (Verbindungs-Tabellen) können lang sein: dort darf ein Wort getrennt werden */
.logical-block--verbindung tbody th { white-space: normal; min-width: 3.2em; max-width: 7em; font-size: var(--groesse-text); hyphens: auto; }
.logical-tabelle .logical-tabelle__ecke { border: 0; background: none; }
.logical-tabelle tbody td {
  width: var(--zelle);
  height: var(--zelle);
  padding: 0;
  border: 1px solid var(--tinte-weich);
  background: var(--papier-weiss);
}
.logical-tabelle tbody tr:first-child td { border-top: 2px solid var(--tinte); }
.logical-tabelle tbody td:first-of-type { border-left: 2px solid var(--tinte); }
.logical-zelle {
  display: block;
  width: var(--zelle);
  height: var(--zelle);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--tinte);
  font-family: var(--schrift-hand);
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.logical-zelle[data-wert="1"] { color: var(--rotstift); }
.logical-zelle[data-wert="2"] { color: var(--gruenstift); background: var(--erfolg-hell); }
.logical-zelle:focus { outline: none; }
.logical-zelle:focus-visible { box-shadow: inset 0 0 0 3px var(--blaustift); }
@media (hover: hover) {
  .logical-zelle:hover { background: var(--farbe-art); }
}

.logical__legende { margin: var(--abstand-3) 0 0; text-align: center; font-size: var(--groesse-klein); color: var(--tinte-weich); }
.logical__zeichen { font-family: var(--schrift-hand); font-size: 1.3em; }
.logical__zeichen--nein { color: var(--rotstift); }
.logical__zeichen--ja { color: var(--gruenstift); }

.logical__steuerung {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--abstand-3);
  margin-top: var(--abstand-4);
}
.logical__schalter {
  display: inline-flex;
  align-items: center;
  gap: var(--abstand-2);
  min-height: var(--tippflaeche);
  padding: 0 var(--abstand-2);
  cursor: pointer;
}
.logical__schalter input { width: 1.4rem; height: 1.4rem; margin: 0; accent-color: var(--farbe-art-dunkel); }
.logical__meldung, .logical-frage__meldung { min-height: 1.5em; margin: var(--abstand-3) 0 0; text-align: center; font-weight: 700; }
.logical__meldung--gut, .logical-frage__meldung--gut { color: var(--erfolg); }
.logical__meldung--fehler, .logical-frage__meldung--fehler { color: var(--fehler); }
.logical__rueckfrage { margin-top: var(--abstand-4); }

/* --- Schlussfrage ----------------------------------------------------------------------------- */
.logical-frage { position: relative; margin-top: var(--abstand-6); }
.logical-frage .frage { margin-bottom: 0; }
.logical-frage__wahl {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--abstand-3);
  margin-top: var(--abstand-4);
}
.logical-wahl {
  min-width: 6rem;
  min-height: 3rem;
  font-family: var(--schrift-hand);
  font-size: var(--groesse-gross);
  font-weight: 400;
  border-style: dashed;
}
.logical-wahl.ist-richtig { background: var(--erfolg-hell); border-style: solid; border-color: var(--erfolg); }
.logical-wahl.ist-daneben {
  background: var(--fehler-hell);
  border-color: var(--rotstift);
  text-decoration: line-through;
  text-decoration-color: var(--rotstift);
}
.logical-wahl[aria-disabled="true"] { cursor: default; }
.logical-frage__stempel {
  position: absolute;
  top: var(--abstand-3);
  right: var(--abstand-3);
  pointer-events: none;
}
.logical-frage__marke { --stempel-drehung: 8deg; background: color-mix(in srgb, var(--papier-weiss) 85%, transparent); }

/* --- Lösungsweg ------------------------------------------------------------------------------- */
.logical-weg__schritte { display: grid; gap: var(--abstand-2); margin: var(--abstand-3) 0; padding-left: 1.4em; }
/* .aufdecken > :not(summary) setzt das Polster 1rem — die Nummern „10.“ bis „19.“ brauchen mehr (S12) */
.aufdecken.logical-weg > .logical-weg__schritte { padding-left: calc(var(--abstand-4) + 1.9em); }
.logical-loesung { border-collapse: collapse; margin: var(--abstand-3) 0; }
.logical-loesung th, .logical-loesung td {
  padding: var(--abstand-1) var(--abstand-3);
  border: 1px solid var(--papier-kante);
  text-align: left;
}
.logical-loesung tbody th { font-family: var(--schrift-hand); font-size: var(--groesse-gross); font-weight: 400; }
.logical-weg__tabelle { overflow-x: auto; }
.logical-weg__tabelle .logical-loesung { margin: 0; }
@media (max-width: 34rem) {
  /* Lösungstabelle am Handy: 5 Spalten in rund 260 px (S12) */
  .logical-weg__tabelle .logical-loesung { font-size: var(--groesse-klein); }
  .logical-weg__tabelle .logical-loesung th,
  .logical-weg__tabelle .logical-loesung td { padding: var(--abstand-1) var(--abstand-2); hyphens: auto; }
  .logical-weg__tabelle .logical-loesung tbody th { font-size: var(--groesse-text); }
}

/* --- Druck: Hinweise als Liste, leere Tabellen, Lösung klein auf dem Kopf --------------------- */
@media print {
  .raetsel__geloest { display: none !important; } /* ein leeres Blatt trägt keinen Gelöst-Stempel */
  .raetsel > .geschichte { font-size: 10.5pt; }
  .logical { --zelle: 7mm; margin: 2mm 0; }
  .logical--n3 { --zelle: 8.5mm; }
  .logical--n4 { --zelle: 8mm; }
  .logical__titel { margin: 2mm 0 1mm; font-size: 12pt; }
  .logical__titel--tabelle { display: none; } /* auf Papier erklärt der Satz darunter die Tabelle */
  .logical__anleitung { margin-top: 2mm; font-size: 9.5pt; line-height: 1.3; margin-bottom: 1.5mm; }
  .logical-hinweise, .logical--aktiv .logical-hinweise { list-style: none; padding: 0; gap: 0.6mm; font-size: 10pt; }
  .logical-hinweis, .logical-hinweise > li:nth-child(n) .logical-hinweis {
    min-height: 0; padding: 0; background: none; box-shadow: none; transform: none;
  }
  .logical-hinweis__nr { font-size: 11pt; }
  .logical-hinweis[aria-pressed="true"] .logical-hinweis__text { text-decoration: none; opacity: 1; }
  .logical:not(.logical--aktiv) .logical-hinweise { list-style: decimal; padding-left: 6mm; }
  .logical-blatt { padding: 0; border: 0; box-shadow: none; background: none; }
  .logical-blatt__teil { gap: 3mm 5mm; break-inside: avoid; }
  .logical-blatt__titel { margin: 2mm 0 1mm; padding-top: 1mm; font-size: 11pt; color: #000; }
  .logical-block { overflow: visible; }
  .logical-tabelle caption { font-size: 11pt; padding-bottom: 1mm; }
  .logical-tabelle thead th { font-size: 8pt; color: #000; }
  .logical-tabelle tbody th { font-size: 10pt; }
  .logical-tabelle tbody td { border-color: #000; background: #fff; }
  .logical-zelle { visibility: hidden; }
  .logical-frage { margin-top: 3mm; padding: 2mm 4mm; break-inside: avoid; }
  .logical-frage .notizzettel__titel { display: none; } /* die Frage selbst reicht auf Papier */
  .logical-frage .frage { margin: 0; font-size: 12pt; }
  .logical-frage__stempel { display: none; }
  .logical-frage__linie { display: flex; gap: 2mm; margin: 2.5mm 0 0; font-weight: 700; }
  .logical-frage__linie span { flex: 0 1 70mm; border-bottom: 1px solid #000; }
  .logical-loesung { margin: 1mm 0; font-size: 8pt; }
  .logical-loesung th, .logical-loesung td { padding: .3mm 1.5mm; border-color: #000; }
  .logical-loesung tbody th { font-size: 8pt; }
  .druckblatt:has(.logical-druckloesung) { margin-top: 4mm; }
  .logical-loesung--druck { margin-bottom: 2mm; }
  .logical-weg__druck { flex: 1 1 auto; margin: 0; padding-left: 4mm; font-size: 7pt; line-height: 1.25; column-count: 2; column-gap: 5mm; }
  .logical-weg__druck li { break-inside: avoid; }
  /* Platz sparen (09-werkzeuge/druck-pruefen.py): Hinweise in zwei Spalten */
  .logical-hinweise, .logical--aktiv .logical-hinweise { display: block; column-count: 2; column-gap: 6mm; line-height: 1.3; }
  .logical-hinweise > li { break-inside: avoid; margin: 0 0 .8mm; }
  /* Ab drei Gruppen (4 und 5 Kinder) steht die Lösung auf Blatt 2 (eigenes_blatt im Druckblatt);
     das Rätsel mit allen sechs Tabellen muss dafür auf Blatt 1 passen */
  .logical--n4 { --zelle: 6.5mm; }
  .logical--n5 { --zelle: 6mm; }
  :is(.logical--n4, .logical--n5) { margin-bottom: 0; }
  :is(.logical--n4, .logical--n5) .logical-tabelle caption { font-size: 10pt; padding-bottom: .5mm; }
  :is(.logical--n4, .logical--n5) .logical-tabelle thead th { padding: .5mm 0; font-size: 7.5pt; }
  :is(.logical--n4, .logical--n5) .logical-tabelle tbody th { font-size: 9.5pt; }
  :is(.logical--n4, .logical--n5) .logical-blatt__titel { margin: 1mm 0 0; padding-top: .5mm; font-size: 10pt; }
  :is(.logical--n4, .logical--n5) .logical-blatt__teil { gap: 2mm 5mm; }
  :is(.logical--n4, .logical--n5) .logical__anleitung { font-size: 9pt; margin: 1mm 0; }
  :is(.logical--n4, .logical--n5) .logical-frage { margin: 2mm 0 0; padding: 1.5mm 3mm; }
  :is(.logical--n4, .logical--n5) .logical-frage .frage { font-size: 11pt; }
  :is(.logical--n4, .logical--n5) .logical-hinweise { font-size: 9.5pt; }
  :is(.logical--n4, .logical--n5) .logical__titel { margin: 1mm 0 .5mm; }
  /* Frage und „Es war: ___“ in einer Zeile */
  :is(.logical--n4, .logical--n5) .logical-frage { display: flex; flex-wrap: wrap; align-items: baseline; gap: 1mm 5mm; }
  :is(.logical--n4, .logical--n5) .logical-frage__linie { flex: 1 1 60mm; margin: 0; }
  /* Auf Blatt 2 ist Platz: Lösungsweg größer als unter der Knicklinie */
  .druckblatt--blatt2 .logical-weg__druck { font-size: 9pt; line-height: 1.3; }
  .druckblatt--blatt2 .logical-loesung, .druckblatt--blatt2 .logical-loesung tbody th { font-size: 9pt; }
}