/* ============================================================
   startseite-stil.css — die Startseite im Baukasten

   Die Inhalte auf der Startseite stimmen: Gruß, Kurs, Live-Stunde,
   Vokabeln, Podcast, Übungsplatz. Nur die Anordnung sah aus wie
   eine Sammlung von Kästen, nicht wie eine Seite.

   Diese Datei ändert keinen Text und keine Reihenfolge. Sie macht
   aus den vorhandenen Blöcken die Bausteine:

     .st-oben   → die Bühne: EINE Sache, die jetzt dran ist,
                  links wozu, rechts der Anlass
     .st-karte  → die Karte
     .st-titel  → der Abschnittstitel mit dem Kringel
     .st-kachel → die Kachel

   Einbinden NACH dw-baukasten.css. Das html davor ist nötig:
   start.js hängt seinen Stil zur Laufzeit an den Kopf.
   ============================================================ */

/* ---------- 1. Farben und Schriften der Startseite ---------- */
html #startNeu .st,
html .st{
  --karte:#FFFFFF; --rand:#E7ECEE; --ink:#14181B; --weich:#5A6B72;
  --schatten:3px 4px 0 rgba(32,33,31,.07);
}

/* ---------- 2. Die Bühne ---------- */
/* Vorher: zwei Karten mit Abstand dazwischen. Jetzt: eine Fläche,
   in der Mitte geteilt — links was du lernst, rechts wann du sprichst. */
html .st .st-oben{
  gap:0;
  background:var(--karte,#FFFFFF);
  border:2px solid var(--ink,#14181B);
  border-radius:22px;
  box-shadow:3px 4px 0 rgba(32,33,31,.10);
  overflow:hidden;
}
html .st .st-oben > .st-kurs{
  border:none; border-radius:0; box-shadow:none; background:none;
}
html .st .st-oben > .st-rechts{
  border-left:2px solid var(--ink,#14181B);
  background:var(--creme,#F6F9FA);
  padding:18px 20px; gap:12px;
}
html .st .st-oben > .st-rechts > .st-karte{
  border:1.5px solid var(--rand,#E7ECEE); border-radius:14px;
  box-shadow:none; background:var(--karte,#FFFFFF); padding:15px 16px;
}
@media(max-width:860px){
  html .st .st-oben{ grid-template-columns:1fr; }
  html .st .st-oben > .st-rechts{ border-left:none; border-top:2px solid var(--ink,#14181B); }
}

/* Die Überschrift der Bühne — groß, in der Handschrift der Marke */
html .st .st-kurs h2{
  font-family:var(--schrift-titel,'Caveat Brush',cursive); font-weight:400;
  font-size:clamp(26px,3.4vw,36px); line-height:1.06; letter-spacing:.005em;
  color:var(--ink,#14181B);
}
html .st .st-kurs .eyebrow,
html .st .st-kurs .st-eb{
  font-family:var(--schrift-marker,'Permanent Marker',cursive);
  color:var(--rot,#D42A21); font-size:14px; text-transform:none; letter-spacing:0;
}
html .st .st-kurs .ziel{ color:var(--weich,#5A6B72); font-size:14.5px; max-width:46ch; }
html .st .st-kurs .bild{ background:var(--creme,#F6F9FA); }

/* ---------- 3. Knöpfe: Pillen statt Klötze ---------- */
html .st .st-b{ border-radius:50px; box-shadow:none; font-weight:700; }
html .st .st-b1{ background:var(--rot,#D42A21); color:#fff; box-shadow:none; }
html .st .st-b1:hover{ background:var(--rot-tief,#B02B24); }
html .st .st-b2{
  background:var(--karte,#FFFFFF); color:var(--ink,#14181B);
  border:2px solid var(--rand,#E7ECEE); box-shadow:none;
}
html .st .st-b2:hover{ background:var(--creme,#F6F9FA); }

/* ---------- 4. Karten ---------- */
html .st .st-karte{
  background:var(--karte,#FFFFFF); border:1.5px solid var(--rand,#E7ECEE);
  border-radius:18px; box-shadow:none; padding:18px 20px;
}
html .st .st-live h3,
html .st .st-karte h3{
  font-family:var(--schrift-kopf,'Shantell Sans',sans-serif); font-weight:700;
  letter-spacing:.005em; color:var(--ink,#14181B);
}
html .st .st-live .uhr{
  font-family:var(--schrift-kopf,'Shantell Sans',sans-serif); font-weight:800;
  font-variant-numeric:tabular-nums;
}

/* ---------- 5. Balken und Zahlen: überall dieselbe Sprache ---------- */
html .st .st-bar{
  height:6px; border-radius:999px; background:var(--creme,#F6F9FA); border:none;
}
html .st .st-bar i{ background:var(--tuerkis-dunkel,#10627A); border-radius:999px; }
html .st .st-z .v{
  font-family:var(--schrift-titel,'Caveat Brush',cursive); font-weight:400;
  font-size:34px; font-variant-numeric:tabular-nums; letter-spacing:.005em;
}
html .st .st-z .l{ color:var(--weich,#5A6B72); font-weight:700; font-size:12px; }

/* ---------- 6. Abschnittstitel mit dem Kringel ---------- */
html .st .st-titel{ margin:10px 0 0; }
html .st .st-titel .tag{
  font-family:var(--schrift-marker,'Permanent Marker',cursive);
  color:var(--rot,#D42A21); font-size:15px; text-transform:none; letter-spacing:0;
  display:block; margin-bottom:2px;
}
html .st .st-titel h2{
  font-family:var(--schrift-kopf,'Shantell Sans',sans-serif); font-weight:700;
  font-size:22px; letter-spacing:.005em; color:var(--ink,#14181B); margin:0;
}
html .st .st-titel h2::after{
  content:''; display:block; width:118px; height:11px; margin:8px 0 0;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='12' viewBox='0 0 120 12'%3E%3Cpath d='M2 8 C 20 2 30 10 48 6 C 66 2 78 11 96 6 C 106 3 114 7 118 6' fill='none' stroke='%231990A4' stroke-width='3.8' stroke-linecap='round'/%3E%3C/svg%3E") left/contain no-repeat;
}

/* ---------- 7. Kacheln ---------- */
html .st .st-kachel{
  background:var(--karte,#FFFFFF); border:1.5px solid var(--rand,#E7ECEE);
  border-radius:18px; box-shadow:none; overflow:hidden;
  transition:transform .12s, box-shadow .12s, border-color .12s;
}
html .st .st-kachel:hover{
  transform:translateY(-2px); box-shadow:3px 4px 0 rgba(32,33,31,.10);
  border-color:var(--tuerkis-dunkel,#10627A);
}
html .st .st-kachel .bd{ background:var(--creme,#F6F9FA); }
html .st .st-kachel .kt b{
  font-family:var(--schrift-kopf,'Shantell Sans',sans-serif); font-weight:700;
}

/* ---------- 8. Die Bänder: Vokabeln, Podcast, Chat ---------- */
html .st .st-vok,
html .st .st-pod{
  background:var(--karte,#FFFFFF); border:1.5px solid var(--rand,#E7ECEE);
  border-radius:16px; box-shadow:none;
}
html .st .st-vok:hover,
html .st .st-pod:hover{ border-color:var(--tuerkis-dunkel,#10627A); }
html .st .st-vok-z{
  font-family:var(--schrift-titel,'Caveat Brush',cursive); color:var(--rot,#D42A21);
}
html .st .st-pod-kicker{
  font-family:var(--schrift-marker,'Permanent Marker',cursive);
  color:var(--rot,#D42A21); text-transform:none; letter-spacing:0;
}
html .st .st-chat{
  background:linear-gradient(135deg,var(--tuerkis-dunkel,#10627A),#0F6E7E);
  border-radius:20px; border:2px solid var(--ink,#14181B);
  box-shadow:3px 4px 0 rgba(32,33,31,.14);
}
html .st .st-chat h3{ font-family:var(--schrift-kopf,'Shantell Sans',sans-serif); color:#fff; }
html .st .st-chat .st-b3{ background:#fff; color:var(--tuerkis-dunkel,#10627A); box-shadow:none; border-radius:50px; }

/* ---------- 9. Der Stand-Streifen gehört auf die Startseite ---------- */
/* Über dem Chat, über den Lektionen, über allem stand eine Reihe mit
   vier Zahlen — meistens leer. Sie steht jetzt nur noch dort, wo sie
   etwas erklärt: auf „Heute". */
#standStreifen{ display:none; }
.main:has(#v-dashboard.active) #standStreifen{ display:block; }
body.auf-heute #standStreifen{ display:block; }
.stand-streifen .ss-f{
  background:var(--karte,#FFFFFF); border:1.5px solid var(--linie,#E7ECEE); border-radius:14px;
}
.stand-streifen .ss-f:hover{ border-color:var(--tuerkis-dunkel,#10627A); }
.stand-streifen .ss-t b{
  font-family:var(--schrift-kopf,'Shantell Sans',sans-serif); font-weight:800;
  font-variant-numeric:tabular-nums;
}


/* ---------- Punkte und Strähne ----------
   Wie im App-Entwurf: der Punktestand als Pille neben der Begrüßung,
   die Strähne als eigene Zeile darunter. Beide erscheinen nur, wenn
   es wirklich etwas zu zeigen gibt — eine Null motiviert niemanden. */
.st-gruss{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap }
.st-punkte{
  flex:0 0 auto; display:inline-flex; align-items:center; gap:6px;
  background:#F6F9FA; color:#7A5300; border:1px solid #F3DDA8;
  border-radius:999px; padding:8px 16px; font-weight:800; font-size:15px;
  white-space:nowrap;
}
.st-streak{
  display:flex; align-items:center; gap:13px;
  background:#FFFFFF; border:1.5px solid #E7ECEE; border-radius:16px;
  padding:14px 16px; margin:14px 0 4px;
}
.st-streak-em{ font-size:26px; line-height:1; flex:0 0 auto }
.st-streak-t{ display:flex; flex-direction:column; gap:1px; min-width:0 }
.st-streak-t b{ font-size:16px; line-height:1.2 }
.st-streak-t small{ color:#5A6B72; font-size:13px }
@media(max-width:620px){
  .st-gruss{ gap:10px }
  .st-punkte{ padding:6px 13px; font-size:14px }
  .st-streak{ padding:12px 13px; border-radius:14px }
}