/* Knobelbande Labyrinth — Regeln in 03-spiele/labyrinth/CLAUDE.md
   Farben aus 05-gemeinsam/design/knobelbande.css; Kennfarbe über --farbe-art (.art-labyrinth am body). */

.labyrinth {
  max-width: min(100%, 36rem);
  margin: var(--abstand-5) auto;
}
/* Breitenstufe aus arten/labyrinth.py: kleine Labyrinthe nicht riesig aufblasen */
.labyrinth--klein { max-width: min(100%, 22rem); }
.labyrinth--mittel { max-width: min(100%, 30rem); }
.labyrinth--aktiv .labyrinth-druck,
.labyrinth--aktiv .labyrinth-ohne-js { display: none; }

.labyrinth-druck,
.labyrinth-feld {
  display: block;
  width: 100%;
  height: auto;
  overflow: hidden;            /* Lupe: nur den Ausschnitt zeigen */
}
.labyrinth-feld {
  border-radius: var(--radius-klein);
  touch-action: none;          /* beim Zeichnen nicht scrollen oder zoomen */
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
}
.labyrinth-feld:focus { outline: none; }
.labyrinth-feld:focus-visible { outline: 3px solid var(--blaustift); outline-offset: 4px; }

.labyrinth-grund { fill: var(--papier-weiss); }
.labyrinth-startfeld,
.labyrinth-zielfeld { fill: var(--farbe-art); opacity: .5; }
/* Lupe: gestrichelter Rahmen zeigt, dass nur ein Ausschnitt zu sehen ist */
.labyrinth--lupe .labyrinth-feld { outline: 3px dashed var(--bleistift-hell); outline-offset: 2px; }
.labyrinth-wand {
  fill: none;
  stroke: var(--tinte);
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.labyrinth-weg {
  fill: none;
  stroke: var(--blaustift);
  stroke-width: 3.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .5;
}
.labyrinth-ziel { color: var(--rotstift); stroke-width: 2.4; }
.labyrinth-start { color: var(--tinte); }
.labyrinth-kopf circle { fill: var(--farbe-art); stroke: var(--tinte); stroke-width: .6; }
.labyrinth-kopf use { color: var(--tinte); }
.labyrinth-kopf__innen.stoss { animation: labyrinth-stoss .28s ease; }
@keyframes labyrinth-stoss {
  25% { transform: translateX(-1.2px); }
  50% { transform: translateX(1.2px); }
  75% { transform: translateX(-.6px); }
}
.labyrinth-tipp .punkt { fill: var(--sternfarbe); }
.labyrinth-tipp .umkehr { fill: none; stroke: var(--rotstift); stroke-width: 1; stroke-dasharray: 2 1.2; }

.labyrinth--geloest .labyrinth-weg { stroke: var(--erfolg); opacity: .65; }
.labyrinth--geloest .labyrinth-kopf circle { fill: var(--erfolg-hell); stroke: var(--erfolg); }

.labyrinth-steuerung,
.labyrinth-aktionen {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--abstand-2);
  margin-top: var(--abstand-3);
}
.labyrinth-steuerung { margin-top: var(--abstand-4); }
.labyrinth-steuerung .knopf { width: 3.25rem; min-height: 3.25rem; }
.labyrinth-pfeil--hoch { transform: rotate(-90deg); }
.labyrinth-pfeil--runter { transform: rotate(90deg); }
.labyrinth-aktionen .knopf { min-height: var(--tippflaeche); }

.labyrinth-meldung {
  min-height: 1.6em;
  margin: var(--abstand-4) 0 0;
  text-align: center;
  font-weight: 800;
}
.labyrinth-meldung .stempel { margin-right: var(--abstand-3); }
.labyrinth--geloest .labyrinth-meldung { color: var(--erfolg); }
.labyrinth-lob { display: inline-block; margin-top: var(--abstand-2); }

@media (prefers-reduced-motion: reduce) {
  .labyrinth-kopf__innen.stoss { animation: none; }
}

/* Lösungsbild fürs Druckblatt (nur im Druck sichtbar, dort klein und auf dem Kopf) */
.labyrinth-loesung { display: block; width: 100%; height: auto; }
.labyrinth-loesungsweg { fill: none; stroke: #000; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* Druck: eine A4-Seite — das leere Labyrinth groß, ohne Weg und Knöpfe; darunter Knicklinie und
   die Lösung klein auf dem Kopf (teile/druckblatt.html) */
@media print {
  /* Ein leeres Blatt zum Ausfüllen trägt keinen Gelöst-Stempel (der kommt von 03-spiele/notizbuch/) */
  .raetsel__geloest { display: none !important; }
  .labyrinth { max-width: none; margin: 4mm auto 0; break-inside: avoid; }
  .labyrinth--aktiv .labyrinth-druck { display: block; }
  .labyrinth-spiel, .labyrinth-ohne-js { display: none !important; }
  .labyrinth-druck { width: auto; max-width: 100%; height: 105mm; margin: 0 auto; }
  .labyrinth-druck .labyrinth-wand,
  .labyrinth-loesung .labyrinth-wand { stroke: #000; }
  .labyrinth-druck .labyrinth-startfeld,
  .labyrinth-druck .labyrinth-zielfeld,
  .labyrinth-loesung .labyrinth-startfeld,
  .labyrinth-loesung .labyrinth-zielfeld { fill: none; }
  .labyrinth-druck .labyrinth-start,
  .labyrinth-druck .labyrinth-ziel,
  .labyrinth-loesung .labyrinth-start,
  .labyrinth-loesung .labyrinth-ziel { color: #000; }
  .druckblatt__loesung:has(.labyrinth-loesung) { width: fit-content; margin-left: auto; }
  .labyrinth-loesung { width: 30mm; }
  .labyrinth-loesung .labyrinth-wand { stroke-width: 1; }
}