/* Wunderzwerg - Kinderansicht ab 8 Jahren (Konzept 3.18)
   Lädt nur unter /kinder/. Größere Schrift, große Zahlen, der Zwerg ist groß dabei. */

.nm-kinder { font-size: clamp(1.1875rem, 1.15rem + 0.2vw, 1.3125rem); line-height: 1.55; }
.nm-kinder .nm-seite { gap: var(--nm-abstand-8); }
.nm-kinder h1 { font-size: clamp(2.5rem, 1.8rem + 3vw, 4.5rem); line-height: 1.02; }
.nm-kinder h2 { font-size: clamp(1.75rem, 1.5rem + 1vw, 2.375rem); }
.nm-kinder .nm-ansicht { border-width: 2px; font-weight: var(--nm-gewicht-stark); }

.nm-kind-held { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--nm-abstand-5) var(--nm-abstand-7); align-items: center; padding-top: var(--nm-abstand-5); }
.nm-kind-held__text { display: flex; flex-direction: column; gap: var(--nm-abstand-4); min-width: 0; }
.nm-kind-held h1 { overflow-wrap: anywhere; hyphens: auto; }
.nm-kind-held__zwerg { display: block; width: auto; height: clamp(11rem, 8rem + 12vw, 20rem); }
.nm-kind-heute { font-size: var(--nm-groesse-3); line-height: 1.45; max-width: 36ch; }
@media (max-width: 40rem) {
  .nm-kind-held { grid-template-columns: minmax(0, 1fr); }
  .nm-kind-held__zwerg { order: -1; justify-self: start; height: 9rem; }
}

.nm-kind-teil { display: flex; flex-direction: column; gap: var(--nm-abstand-5); padding-top: var(--nm-abstand-6); border-top: var(--nm-linie) solid var(--nm-farbe-linie); }
.nm-kind-teil--bild { display: grid; grid-template-columns: 12rem minmax(0, 1fr); gap: var(--nm-abstand-5) var(--nm-abstand-7); align-items: start; }
.nm-kind-teil__zwerg { display: block; width: 100%; height: auto; max-height: 17rem; }
.nm-kind-teil__text { display: flex; flex-direction: column; gap: var(--nm-abstand-5); min-width: 0; }
@media (max-width: 40rem) {
  .nm-kind-teil--bild { grid-template-columns: minmax(0, 1fr); }
  .nm-kind-teil__zwerg { width: auto; height: 8.5rem; justify-self: start; }
}
.nm-kind-satz { font-size: var(--nm-groesse-3); line-height: 1.45; }

.nm-kind-zahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: var(--nm-abstand-5); }
.nm-kind-zahl { display: flex; flex-direction: column; gap: var(--nm-abstand-2); padding: var(--nm-abstand-5); border-radius: 14px; background: var(--nm-farbe-flaeche); }
.nm-kind-zahl p { max-width: none; }
.nm-kind-zahl__titel { font-weight: var(--nm-gewicht-stark); color: var(--nm-farbe-text-leise); }
.nm-kind-zahl__wert { font-size: clamp(2.25rem, 1.8rem + 2vw, 3.25rem); line-height: 1.05; font-weight: var(--nm-gewicht-ueberschrift); font-variant-numeric: var(--nm-ziffern-wert); overflow-wrap: anywhere; }
.nm-kind-zahl__einheit { font-size: var(--nm-groesse-3); margin-left: 0.25em; }

.nm-kind-regeln { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: var(--nm-abstand-5); }
.nm-kind-regel { display: flex; flex-direction: column; gap: var(--nm-abstand-3); padding: var(--nm-abstand-5); border-radius: 14px; background: var(--nm-farbe-flaeche); }
.nm-kind-regel h2, .nm-kind-regel h3 { font-size: var(--nm-groesse-3); }
.nm-kind-regel blockquote, .nm-kind-spruch { margin: 0; font-style: italic; }
.nm-kind-spruch { font-size: var(--nm-groesse-4); line-height: 1.3; }
.nm-punkte--zehn { display: grid; grid-template-columns: repeat(10, minmax(0, 1.25rem)); gap: 5px; max-width: none; }
.nm-punkte--zehn i { width: auto; height: auto; aspect-ratio: 1; box-shadow: inset 0 0 0 2px var(--nm-farbe-text-leise); }

.nm-kind-laender { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.nm-kind-laender li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--nm-abstand-2) var(--nm-abstand-5); padding-block: var(--nm-abstand-3); border-bottom: var(--nm-linie) solid var(--nm-farbe-linie); }

.nm-kind-mond { display: flex; align-items: center; gap: var(--nm-abstand-3); font-size: var(--nm-groesse-3); }
.nm-kind-mond .nm-symbol { width: 2.25rem; height: 2.25rem; }
.nm-kind-aufgabe { padding: var(--nm-abstand-4) var(--nm-abstand-5); border-radius: 14px; border: 2px dashed var(--nm-farbe-mond); max-width: 40rem; }

.nm-kinder .nm-ortsliste a { font-size: var(--nm-groesse-3); }