/* Kinder-Welt · Ebene über der geerbten style.css
 * Wird NACH assets/geerbt/style.css und nach dem seiteneigenen <style> geladen.
 * Ziel: die 60 übernommenen Seiten tragen denselben Satz wie die Startseite,
 * ohne dass ihr eigenes Layout oder ihre Spiel-Logik angefasst wird.
 */

/* ---------- Token der alten Seite auf die Kinder-Welt umbiegen ---------- */
:root{
  --bg:#FFFFFF; --card:#FFFFFF;
  --ink:#14161A; --ink-soft:#3A4048; --muted:#5A6068;
  --accent:#14789F; --accent-2:#F7C600; --accent-soft:#EAF5FA; --accent-hover:#0F6386;
  --good:#1F9254; --border:#DCE9F0; --chip:#FFF3CC;
  --shadow:0 8px 24px rgba(20,22,26,.08);
  --shadow-hover:0 14px 34px rgba(20,22,26,.13);
  --radius:22px; --radius-sm:14px;
}

/* ---------- Schrift ---------- */
body, .container, p, li, td, th, input, select, textarea, button{
  font-family:var(--schrift) !important;
}
body{ color:var(--tinte); background:var(--weiss); font-weight:500; line-height:1.65 }
h1,h2,h3,h4{ font-family:var(--schrift) !important; font-weight:700; letter-spacing:-.015em;
  color:inherit; font-style:normal }
/* color:inherit statt fester Farbe — sonst verliert jede Überschrift in einem
   farbigen Banner das geerbte Weiß und wird unlesbar. */
h1{ font-size:clamp(1.9rem,4vw,2.9rem); line-height:1.12 }
h2{ font-size:clamp(1.4rem,2.6vw,2rem) }
h3{ font-size:clamp(1.15rem,2vw,1.4rem) }
a{ color:var(--blau) }
.ku, [lang="ckb"]{ font-family:var(--schrift-ku) !important }

/* ---------- Seitenrahmen ---------- */
.container{ max-width:1180px; padding-inline:4vw }
.seiten-kopfbild{ background:var(--gelb); position:relative; padding-block:clamp(82px,9vw,96px) clamp(52px,7vw,86px);
  margin-bottom:clamp(28px,4vw,48px); overflow:hidden }
.seiten-kopfbild h1{ margin:0; max-width:20ch }
.seiten-kopfbild .fliess{ color:var(--tinte-gelb); margin-top:12px; font-weight:600 }
.seiten-kopfbild .held__bogen{ z-index:2 }

/* ---------- Brotkrumen ---------- */
.ka-breadcrumb{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:0 0 var(--s3);
  font-size:13px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--grau) }
.ka-breadcrumb a{ color:var(--blau); text-decoration:none }
.ka-breadcrumb a:hover{ text-decoration:underline; text-underline-offset:4px }

/* ---------- Karten ---------- */
.ka-card, .hub-card{
  background:var(--gelb-blass) !important; border:0 !important; border-radius:20px !important;
  box-shadow:none !important; transition:transform var(--takt), box-shadow var(--takt);
}
.ka-card:hover, .hub-card:hover{ transform:translateY(-3px); box-shadow:var(--schatten) }
/* .card bleibt unangetastet: Spielkarten drehen sich darüber (transform-style:preserve-3d),
   eine fremde :hover-Transformation bricht den Umdreh-Effekt und lässt Text flackern. */
.ka-related-grid > *:nth-child(4n+2), .k-grp > *:nth-child(4n+2){ background:var(--blau-hauch) !important }
.ka-related-grid > *:nth-child(4n+3), .k-grp > *:nth-child(4n+3){ background:var(--flieder) !important }
.ka-related-grid > *:nth-child(4n),   .k-grp > *:nth-child(4n){ background:var(--gruen-blass) !important }

/* ---------- Schaltflächen ---------- */
.btn, .btn-primary, button.primary, .ka-btn, .cta{
  border-radius:var(--rund) !important; font-weight:700 !important; letter-spacing:0 !important;
  min-height:50px; padding:0 26px !important; display:inline-flex !important;
  align-items:center; justify-content:center; gap:10px; border:2px solid transparent !important;
}
.btn-primary, button.primary, .cta{ background:var(--blau) !important; color:#fff !important }
.btn-primary:hover, button.primary:hover, .cta:hover{ background:var(--blau-tief) !important }
.btn:not(.btn-primary){ background:var(--gelb) !important; color:var(--tinte) !important }
.btn:not(.btn-primary):hover{ background:var(--gelb-tief) !important }

/* ---------- Felder ---------- */
input[type=text], input[type=email], input[type=search], input[type=number], select, textarea{
  border-radius:var(--rund-feld) !important; border:2px solid var(--blau-hauch) !important;
  padding:12px 16px !important; font-weight:600
}
input:focus, select:focus, textarea:focus{ outline:none; border-color:var(--blau-tief) !important }

/* ---------- Was von der alten Seite nicht mitkommt ---------- */
.site-header, .site-footer, .main-nav, .theme-toggle, .menu-toggle,
.ka-progress-mini, .pwa-install, .ka-learning-boost{ display:none !important }

/* ---------- Fuß der Unterseiten ---------- */
.zurueck-band{ background:var(--blau-hauch); border-radius:26px; padding:clamp(22px,3vw,34px);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--s3);
  margin:clamp(40px,6vw,72px) 0 clamp(30px,4vw,50px) }
.zurueck-band p{ margin:0; font-weight:700; font-size:18px; max-width:44ch }

/* ---------- Neuen Rahmen gegen die geerbten header/footer-Regeln schützen ----------
 * style.css färbt pauschal jedes <a> in header/footer mit --accent ein; das ist
 * jetzt dasselbe Blau wie der Kopf. Deshalb hier ausdrücklich zurücksetzen. */
.kopf, .kopf a, .kopf b, .kopf span, .kopf button{ color:#fff }
.kopf .suche input{ color:var(--tinte) }
.kopf .suche input::placeholder{ color:var(--rot) }
.kopf .suche button{ color:var(--tinte); background:var(--gelb) }
.kopf .knopf--gelb, .kopf .knopf--gelb *{ color:var(--tinte) }
.kopf .knopf__pfeil{ background:var(--tinte); color:var(--gelb) }
.kopf__nav a[aria-current="page"], .kopf__nav a:hover{ border-bottom-color:var(--gelb) }

.fuss, .fuss a, .fuss b, .fuss span, .fuss h2, .fuss p, .fuss li{ color:var(--tinte) }
.fuss__sozial a{ color:var(--blau); border-color:var(--blau) }
.fuss__sozial a:hover{ background:var(--blau); color:#fff }
.fuss .knopf{ color:#fff }
.fuss .knopf--gelb{ color:var(--tinte) }

.seiten-kopfbild, .seiten-kopfbild h1, .seiten-kopfbild .ka-breadcrumb span{ color:var(--tinte) }
.seiten-kopfbild .ka-breadcrumb a{ color:var(--blau-tief) }
.zurueck-band a.knopf{ color:#fff }
.zurueck-band p a{ color:var(--blau-tief); font-weight:700 }
.kopf .knopf--gelb .knopf__pfeil{ background:var(--tinte) }
.kopf .knopf--gelb .knopf__pfeil svg{ stroke:var(--gelb); color:var(--gelb) }
.seiten-kopfbild{ margin-bottom:clamp(10px,2vw,24px) }

/* ---------- Kinder-Menü (die Knopfreihe auf den Unterseiten) ---------- */
.kids-nav{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center;
  background:var(--weiss); border-radius:26px; padding:14px }
.kids-nav a{
  border:0 !important; border-radius:var(--rund) !important; padding:11px 20px !important;
  font-weight:700 !important; font-size:15.5px !important; color:var(--tinte) !important;
  background:var(--gelb-blass) !important; box-shadow:none !important;
  transition:background var(--takt), transform var(--takt) !important; animation:none !important;
}
.kids-nav a:nth-child(4n+2){ background:var(--blau-hauch) !important }
.kids-nav a:nth-child(4n+3){ background:var(--flieder) !important }
.kids-nav a:nth-child(4n){ background:var(--gruen-blass) !important }
.kids-nav a:hover{ transform:translateY(-2px) }
.kids-nav a.active, .kids-nav a[aria-current]{ background:var(--blau) !important; color:#fff !important }
.kids-nav a.k-ueben, .kids-nav a.ueben{ background:var(--gelb) !important; color:var(--tinte) !important }
@media (max-width:640px){ .kids-nav{ padding:10px } .kids-nav a{ padding:10px 16px !important; font-size:15px !important } }

/* ---------- Memory-Karten: Größen wieder in die Karte zwingen ----------
 * Die Spielkarten rechnen mit em auf em (front 2.5em → Symbol 3em). Mit der
 * größeren Grundschrift und Zeilenhöhe der Kinder-Welt wuchs das Symbol auf
 * 127 px bei 143 px Kartenbreite — der Hinweis darunter fiel aus der Karte. */
.face{ line-height:1.15 }
.face.front{ font-size:clamp(1.5rem,4.5vw,2rem) }
.speaker-icon{ font-size:1.9rem !important; line-height:1 !important }
.play-hint{ font-size:.86rem !important; line-height:1.25 !important; margin-top:6px }

/* ---------- Zittern bei SVG-Elementen mit :hover-Vergrößerung ----------
 * In SVG liegt transform-origin im Nullpunkt der Zeichnung, nicht in der Mitte
 * des Elements. Ein scale() beim Überfahren schiebt das Element vom Zeiger weg,
 * der Hover bricht ab, es springt zurück — und flackert. transform-box:fill-box
 * bezieht den Ursprung auf das Element selbst. */
svg .city, svg [class*="hover"], svg a, svg g[class], svg text[class]{
  transform-box:fill-box; transform-origin:50% 50%;
}

/* ---------- Ein Maß für Kopf, Kopfband und Inhalt ----------
 * Manche Seiten setzen ihre Blöcke direkt in <main>, ohne .container — die
 * liefen dann über die volle Fensterbreite, während der Kopf auf 92 % sitzt.
 * Beides bekommt jetzt dasselbe Maß wie .bahn. */
main > *{ width:min(1180px, 92vw); margin-inline:auto !important }   /* Klassenregeln der Seite setzen sonst eigene Ränder */
main > .voll-breit{ width:100% }          /* Ausnahme, falls einmal randlos gewünscht */
main .container{ max-width:none; width:100%; padding-inline:0 }

/* ---------- Seitentitel: Deutsch groß, Soranî als ruhige zweite Zeile ---------- */
.seiten-kopfbild__ku{ margin:4px 0 0; font-size:clamp(17px,2.4vw,26px); font-weight:600;
  color:var(--tinte-gelb); line-height:1.35; text-align:left; max-width:26ch }
.seiten-kopfbild h1 + .seiten-kopfbild__ku + .fliess{ margin-top:10px }

/* ---------- Modulkarten („Audio-Lektionen", „Aussprache" …) ---------- */
.gmod{
  background:var(--gelb-blass) !important; border:0 !important;
  border-left:6px solid var(--gelb) !important; border-radius:20px !important;
  box-shadow:none !important;
  transition:transform var(--takt), box-shadow var(--takt) !important;
}
.gmod:nth-of-type(4n+2){ background:var(--blau-hauch) !important; border-left-color:var(--blau) !important }
.gmod:nth-of-type(4n+3){ background:var(--flieder) !important; border-left-color:var(--flieder-tinte) !important }
.gmod:nth-of-type(4n){ background:var(--gruen-blass) !important; border-left-color:var(--gruen) !important }
.gmod:hover{ transform:translateY(-3px) !important; box-shadow:var(--schatten) !important }
.gmod .nm{ color:var(--tinte) !important; font-family:var(--schrift) !important; font-size:17px !important }
.gmod .ku{ color:var(--grau) !important }
.gmod .desc{ color:var(--tinte-2) !important; font-family:var(--schrift) !important }

/* ---------- Abschnittsüberschriften mit Soranî-Zusatz ---------- */
.section-h{ font-size:clamp(1.3rem,2.4vw,1.9rem) !important; font-weight:700 !important;
  display:flex; flex-wrap:wrap; align-items:baseline; gap:10px }
.section-h .ku{ font-size:.62em; font-weight:600; color:var(--grau) }

/* ---------- Wortkacheln im Bild-Wörterbuch ----------
 * Lange Zusammensetzungen wie دووچەرخەسواری passten bei 160 px Kachelbreite
 * und 1,7 em Schrift nicht hinein und liefen über den Rand. */
.word-grid{ grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)) !important }
.word-card{ min-width:0; overflow:hidden }
.word-card .w-ku{
  font-size:1.42em !important; line-height:1.3 !important;
  overflow-wrap:anywhere; word-break:normal; hyphens:none;
}
.word-card .w-de{ overflow-wrap:anywhere }
@media (max-width:520px){
  .word-grid{ grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)) !important }
  .word-card .w-ku{ font-size:1.25em !important }
}

/* ---------- Tipp-Karten (statt Aufzählung) ---------- */
.tipp-liste{
  list-style:none; margin:18px 0 0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:14px;
}
.tipp-liste li{
  display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto;
  column-gap:14px; row-gap:4px; align-items:start;
  background:var(--gelb-blass); border-radius:20px; padding:18px 20px;
  transition:transform var(--takt), box-shadow var(--takt);
}
.tipp-liste li:nth-child(4n+2){ background:var(--blau-hauch) }
.tipp-liste li:nth-child(4n+3){ background:var(--flieder) }
.tipp-liste li:nth-child(4n){ background:var(--gruen-blass) }
.tipp-liste li:hover{ transform:translateY(-3px); box-shadow:var(--schatten) }
.tipp-zeichen{
  grid-row:1 / span 2; width:46px; height:46px; border-radius:14px; background:#fff;
  display:grid; place-items:center; font-size:24px; line-height:1;
}
.tipp-liste b{ font-size:17px; font-weight:700; color:var(--tinte); line-height:1.3 }
.tipp-liste li > span:last-child{ font-size:15px; color:var(--tinte-2); line-height:1.55 }
@media (max-width:560px){
  .tipp-liste li{ padding:16px }
  .tipp-zeichen{ width:40px; height:40px; font-size:21px }
}