/* Knobelbande: Bereich Ausmalbilder (Entscheidung 035).
   Eigene Datei wie die Spiel-CSS, geladen nur auf /ausmalbilder/… (Block kopf der Vorlagen ausmalbild*.html) und im
   PDF (ausmalbild-pdf.html). Baut auf knobelbande.css auf (Tokens, Karten, Knöpfe, Seitentitel).
   Bausteine: .malkarten/.malkarte (Bildkarten), .malthemen/.malthema (Themenkacheln mit Vorschaubild),
   .malheft (Download-Kachel), .malblatt (Druckblatt = große Ansicht der Bildseite und Seite im PDF). */

:root {
  --farbe-ausmalbilder: #f7b6d9;          /* Kennfarbe Wachsmalrosa */
  --farbe-ausmalbilder-dunkel: #8a1f63;   /* Schrift in Kennfarbe, 7,6 : 1 auf Papier */
  --malblatt-papier: #fff;                /* reines Weiß wie das Bild: kein Rand zwischen Bild und Blatt */
  --malblatt-tinte: #000;                 /* Druck nur schwarz (035, Frage 4) */
}
.bereich-ausmalbilder, .art-ausmalbilder {
  --farbe-art: var(--farbe-ausmalbilder);
  --farbe-art-dunkel: var(--farbe-ausmalbilder-dunkel);
}

.malgruppe { margin-block: var(--abstand-6); }
.malgruppe > h2 { margin-bottom: var(--abstand-4); }

/* Bildkarten: am Handy zwei nebeneinander (Bilder sind hochkant), breiter mehr */
.malkarten {
  list-style: none; margin: 0 0 var(--abstand-5); padding: 0;
  display: grid; gap: var(--abstand-4);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.malkarten > li { margin: 0; min-width: 0; }
@media (min-width: 40rem) { .malkarten { grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: var(--abstand-5); } }

.malkarte {
  display: flex; flex-direction: column; gap: var(--abstand-2); height: 100%;
  padding: var(--abstand-2) var(--abstand-2) var(--abstand-3);
  background: var(--papier-weiss); color: var(--tinte); text-decoration: none;
  border: 2px solid var(--tinte); border-radius: var(--radius-mittel); box-shadow: 3px 3px 0 var(--tinte);
  border-top: 8px solid var(--farbe-art);
  transition: transform .15s ease, box-shadow .15s ease;
}
.malkarte:hover, .malkarte:focus-visible { transform: translate(-2px, -2px) rotate(-.4deg); box-shadow: 5px 5px 0 var(--tinte); }
.malkarte:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--tinte); }
.malkarte__bild { display: block; background: var(--malblatt-papier); border-radius: var(--radius-klein); overflow: hidden; }
.malkarte__bild img { display: block; width: 100%; height: auto; }
.malkarte__titel { margin: 0; font-family: var(--schrift-hand); font-size: var(--groesse-gross); line-height: 1.15; overflow-wrap: anywhere; }
.malkarte__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--abstand-2); margin-top: auto; font-size: var(--groesse-klein); }
.malkarte__feinheit { color: var(--tinte-weich); }

/* Themenkacheln auf dem Hub: Vorschaubild links, Text rechts */
.malthemen { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--abstand-4); }
@media (min-width: 40rem) { .malthemen { grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); gap: var(--abstand-5); } }
.malthemen > li { margin: 0; }
.malthema {
  display: flex; gap: var(--abstand-3); align-items: stretch; height: 100%; min-height: var(--tippflaeche);
  padding: var(--abstand-3); background: var(--papier-weiss); color: var(--tinte); text-decoration: none;
  border: 2px solid var(--tinte); border-radius: var(--radius-mittel); box-shadow: 3px 3px 0 var(--tinte);
  border-left: 10px solid var(--farbe-art);
}
.malthema:hover, .malthema:focus-visible { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--tinte); }
.malthema__bild { flex: 0 0 5.5rem; background: var(--malblatt-papier); border-radius: var(--radius-klein); overflow: hidden; align-self: flex-start; }
.malthema__bild img { display: block; width: 100%; height: auto; }
.malthema__text { display: flex; flex-direction: column; gap: var(--abstand-1); min-width: 0; }
.malthema__name { margin: 0; font-family: var(--schrift-hand); font-size: var(--groesse-h3); line-height: 1.1; display: flex; align-items: center; gap: var(--abstand-2); }
.malthema__kurz { color: var(--tinte-weich); }
.malthema__meta { font-size: var(--groesse-klein); font-weight: 700; color: var(--farbe-art-dunkel); margin-top: auto; }

/* Download-Kachel für ein Malheft */
.malheft {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--abstand-3);
  padding: var(--abstand-4); margin-top: var(--abstand-4);
  background: var(--zettel-gelb); border-radius: var(--radius-mittel); box-shadow: var(--schatten-zettel);
}
.malheft__titel { margin: 0; font-size: var(--groesse-gross); display: flex; align-items: center; gap: var(--abstand-2); }
.malheft__daten { margin: var(--abstand-1) 0 0; color: var(--tinte-weich); }
.malheft .knopf { max-width: 100%; white-space: normal; }

/* Bildseite */
.ausmalbild__etiketten { display: flex; flex-wrap: wrap; align-items: center; gap: var(--abstand-2); margin: var(--abstand-2) 0 0; }
.ausmalbild__felder { color: var(--tinte-weich); }
.ausmalbild__werkzeug { display: flex; flex-wrap: wrap; align-items: center; gap: var(--abstand-3); margin: var(--abstand-4) 0; }
.ausmalbild__werkzeug .knopf { min-height: var(--tippflaeche); }
.ausmalbild__hinweis { flex-basis: 100%; margin: 0; color: var(--tinte-weich); font-size: var(--groesse-klein); }
.ausmalbild__mehr { margin-top: var(--abstand-7); }
.ausmalbild__zurueck { display: flex; flex-wrap: wrap; gap: var(--abstand-3); }

/* Druckblatt: am Bildschirm ein Blatt Papier im Format A4, so breit wie möglich (am Desktop höchstens 40rem) */
.malblatt {
  box-sizing: border-box; width: 100%; max-width: 40rem; margin: 0 auto;
  padding: 4% 4.5% 3%; background: var(--malblatt-papier); color: var(--malblatt-tinte);
  box-shadow: var(--schatten-gehoben); border-radius: 2px;
  display: flex; flex-direction: column;
}
.malblatt__kopf {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .4em 1em; padding-bottom: .35em;
  border-bottom: 1px solid var(--tinte); font-family: var(--schrift-hand); font-size: var(--groesse-klein); line-height: 1.1;
}
.malblatt__alter { color: var(--rotstift); border: 1px solid currentColor; border-radius: 6px; padding: .1em .45em 0; }
.malblatt__name { margin-left: auto; display: flex; align-items: baseline; gap: .3em; }
.malblatt__name i { display: inline-block; width: 7em; border-bottom: 1px solid var(--bleistift); }
.malblatt__bild { display: block; width: 100%; height: auto; margin: .6em 0 .4em; }
.malblatt__fuss { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .2em 1em; font-size: var(--groesse-klein); color: var(--bleistift); }
.malblatt__fuss span { min-width: 0; overflow-wrap: anywhere; }

@media print {
  @page malblatt { size: A4 portrait; margin: 10mm 12mm 9mm; }
  /* Bildseite: nur das Blatt (Kopf, Fuß, Brotkrumen blendet knobelbande.css schon aus) */
  .ausmalbild-seite .inhalt > :not(.malblatt) { display: none !important; }
  .malblatt {
    page: malblatt; break-inside: avoid;
    display: block; width: auto; max-width: none; height: 266mm; margin: 0; padding: 0; box-shadow: none; border-radius: 0;
    color: var(--malblatt-tinte); overflow: hidden;
  }
  .malblatt ~ .malblatt { break-before: page; }
  .malblatt__kopf { font-size: 14pt; padding-bottom: 1.6mm; border-bottom: .3mm solid var(--malblatt-tinte); gap: 4mm; flex-wrap: nowrap; }
  .malblatt__alter { color: var(--malblatt-tinte); border-width: .3mm; border-radius: 2mm; padding: .6mm 2mm .2mm; font-size: 11pt; }
  .malblatt__name { font-size: 12pt; gap: 2mm; }
  .malblatt__name i { width: 48mm; border-bottom: .25mm solid var(--malblatt-tinte); }
  /* feste Höhe statt Flex: Chromium bricht ein Flex-Bild im Druck sonst auf das nächste Blatt um */
  .malblatt__bild { width: 100%; height: 246mm; object-fit: contain; margin: 3mm 0 2mm; }
  .malblatt__fuss { font-size: 7.5pt; color: var(--malblatt-tinte); flex-wrap: nowrap; }
  .malheft-pdf { margin: 0; background: var(--malblatt-papier); }
}