/* ============================================================
   module-stil.css — Kurs, Üben und Vokabeltrainer im Baukasten

   Dasselbe Bild wie beim Lernbereich: jedes Modul hatte sich eine
   eigene Welt gebaut.

     kurs.js            Königsblau  #1F5FD1
     ueben.js           Türkis/Lila #2DD4BF, #7C3AED
     vokabeltrainer.js  Blau        #1B9BC0, #3E5FCC

   Drei fremde Programme in einer cremefarbenen Plattform. Diese
   Datei fasst keine Funktion an — sie dreht die Farben, die Formen
   und die Schriften auf den Baukasten.

   Einbinden NACH dw-baukasten.css. Das html davor ist nötig:
   alle drei hängen ihren Stil zur Laufzeit an den Kopf.
   ============================================================ */

/* ============================================================
   1  Der Stufenkurs (kurs.js)
   ============================================================ */
html .ku{
  --kb:#10627A;      /* war Blau */
  --kb2:#0F6E7E;
  --kr:#D42A21;
  --kg:#FFE100;
  --kt:#14181B;
  --km:#5A6B72;
  --kl:#E7ECEE;
  color:#14181B;
}
html .ku .ku-kopf{
  background:linear-gradient(135deg,#F6F9FA,#FFFFFF) !important;
  color:var(--kt) !important;
  border:2px solid var(--kt); border-radius:22px;
  box-shadow:3px 4px 0 rgba(32,33,31,.10);
}
html .ku .ku-kopf::before,
html .ku .ku-kopf::after{ display:none; }
html .ku .ku-kopf h1,
html .ku .ku-kopf h2{
  font-family:var(--schrift-titel,'Caveat Brush',cursive); font-weight:400;
  letter-spacing:.005em; color:var(--kt);
}
html .ku .ku-kopf p{ color:var(--km); opacity:1; }
html .ku .ku-btn{
  border-radius:50px; box-shadow:none; font-weight:700;
  background:var(--kr); color:#fff;
}
html .ku .ku-btn.blau,
html .ku .ku-btn.hell{ background:var(--kb); color:#fff; box-shadow:none; }
html .ku .ku-btn.hell{
  background:#FFFFFF; color:var(--kt); border:2px solid var(--kl);
}
html .ku .ku-karte,
html .ku .ku-lektion,
html .ku .ku-block{
  background:#FFFFFF; border:1.5px solid var(--kl); border-radius:18px; box-shadow:none;
}
html .ku .ku-bar,
html .ku .ku-fort{ background:#F6F9FA; border-radius:999px; height:6px; }
html .ku .ku-bar i,
html .ku .ku-fort i{ background:var(--kb); border-radius:999px; }

/* ============================================================
   2  Üben (ueben.js)
   ============================================================ */
html .ub-stat,
html .ub-card{
  background:var(--karte,#FFFFFF); border:1.5px solid var(--linie,#E7ECEE);
  border-radius:18px; box-shadow:none;
}
html .ub-card{ transition:transform .12s, box-shadow .12s, border-color .12s; }
html .ub-card:hover{
  transform:translateY(-2px); box-shadow:3px 4px 0 rgba(32,33,31,.10);
  border-color:var(--tuerkis-dunkel,#10627A);
}
html .ub-stat .big,
html .ub-card b{
  font-family:var(--schrift-kopf,'Shantell Sans',sans-serif); font-weight:800;
  font-variant-numeric:tabular-nums;
}
html .ub-ring{
  background:conic-gradient(var(--tuerkis-dunkel,#10627A) calc(var(--p)*1%), var(--creme,#F6F9FA) 0);
}
html .ub-skill{
  border:1.5px solid var(--linie,#E7ECEE); background:var(--karte,#FFFFFF);
  color:var(--text-soft,#5A6B72); font-weight:700;
}
html .ub-skill:hover{ border-color:var(--tuerkis-dunkel,#10627A); color:var(--tuerkis-dunkel,#10627A); }
html .ub-skill.on,
html .ub-skill[aria-pressed="true"]{
  background:var(--tinte,#14181B); border-color:var(--tinte,#14181B); color:#FFFFFF;
}
html .ub-pbar{ height:6px; border-radius:999px; background:var(--creme,#F6F9FA); }
html .ub-pbar > *{ background:var(--tuerkis-dunkel,#10627A); }
html .ub-go{ background:var(--rot,#D42A21); border-radius:50px; }
html .ub-mix{
  background:linear-gradient(135deg,var(--rot,#D42A21),#B02B24);
  border:2px solid var(--tinte,#14181B); border-radius:18px;
  box-shadow:3px 4px 0 rgba(32,33,31,.14);
  font-family:var(--schrift-kopf,'Shantell Sans',sans-serif);
}
/* Der Übungs-Läufer im Vollbild */
html .ub-ov{ background:var(--creme,#F6F9FA); }
html .ub-prog{ height:10px; border-radius:999px; background:#E7ECEE; }
html .ub-prog > *{ background:var(--tuerkis-dunkel,#10627A); }
html .ub-q{
  font-family:var(--schrift-kopf,'Shantell Sans',sans-serif); font-weight:800;
  color:var(--tinte,#14181B);
}
html .ub-thbild{ background:var(--creme,#F6F9FA); border-radius:16px; }
html .ub-x{ color:var(--text-soft,#5A6B72); }

/* ============================================================
   3  Vokabeltrainer (vokabeltrainer.js)
   ============================================================ */
html .vt-hero{
  background:linear-gradient(135deg,#F6F9FA,var(--karte,#FFFFFF)) !important;
  color:var(--tinte,#14181B) !important;
  border:2px solid var(--tinte,#14181B); border-radius:22px;
  box-shadow:3px 4px 0 rgba(32,33,31,.10);
}
html .vt-hero::before,
html .vt-hero::after{ display:none; }
html .vt-hero h1,
html .vt-hero h2{
  font-family:var(--schrift-titel,'Caveat Brush',cursive); font-weight:400;
  color:var(--tinte,#14181B); letter-spacing:.005em;
}
html .vt-hero p{ color:var(--text-soft,#5A6B72); opacity:1; }
html .vt-serie{
  background:var(--karte,#FFFFFF); border:1.5px solid var(--gelb,#FFE100);
  color:#8A6608;
}
html .vt-los{
  background:var(--rot,#D42A21); color:#fff; border-radius:50px;
  font-family:var(--schrift-kopf,'Shantell Sans',sans-serif); font-weight:800;
  box-shadow:none;
}
html .vt-los:hover{ background:var(--rot-tief,#B02B24); }
html .vt-kpi{
  background:var(--karte,#FFFFFF); border:1.5px solid var(--linie,#E7ECEE);
  border-radius:18px; box-shadow:none;
}
html .vt-kpi b,
html .vt-kpi .zahl{
  font-family:var(--schrift-kopf,'Shantell Sans',sans-serif); font-weight:800;
  font-variant-numeric:tabular-nums; color:var(--tinte,#14181B);
}
html .vt-zb{
  border:1.5px solid var(--linie,#E7ECEE); background:var(--karte,#FFFFFF);
  color:var(--text-soft,#5A6B72);
}
html .vt-zb:hover{ border-color:var(--tuerkis-dunkel,#10627A); color:var(--tuerkis-dunkel,#10627A); }
html .vt-zb.on,
html .vt-zb[aria-pressed="true"]{
  background:var(--tinte,#14181B); border-color:var(--tinte,#14181B); color:#FFFFFF;
}
html .vt-hinweis{
  background:#FFFFFF; border:1.5px solid var(--gelb,#FFE100); border-radius:16px; color:#6B5A22;
}
html .vt-top{ background:var(--karte,#FFFFFF); border-bottom:1.5px solid var(--linie,#E7ECEE); }
html .vt-bar{ height:10px; border-radius:999px; background:#E7ECEE; }
html .vt-bar > *{ background:var(--tuerkis-dunkel,#10627A); }
html .vt-buehne{ background:var(--creme,#F6F9FA); }
html .vt-karte{ color:var(--tinte,#14181B); }
html .vt-x{ color:var(--text-soft,#5A6B72); }