/* ============================================================
   lernraum-stil.css — die Handschrift aus dem Lernraum-Entwurf

   Der Entwurf, den Julia sich gewuenscht hat, unterscheidet sich
   von der Plattform in genau sechs Dingen. Keine Struktur, keine
   Reihenfolge, kein Text — nur diese sechs:

     1  Akzent      Tuerkis #10627A  ->  Petrol #0E7C7B
     2  Gelb        Neon #FFE100     ->  warmes Gold #FFC94A
     3  Raender     2 px Tinte       ->  1 px Kante #E7ECEE
     4  Schatten    harter Klotz     ->  weiche Wolke
     5  Grund       Creme #F6F9FA    ->  #F6F9FA, Karten weiss
     6  Ecken       22 px            ->  18 px

   Diese Datei aendert nur diese sechs. Sie muss als LETZTE
   eingebunden werden — nach amanda-figur.css. Nimmt man die eine
   Zeile heraus, sieht alles wieder aus wie vorher.
   ============================================================ */

/* ---------- 1-2  Die Farben ---------- */
:root{
  --tuerkis:#4FB3AE;
  --tuerkis-dunkel:#0E7C7B;
  --auf-tuerkis:#0A4F4E;
  --tuerkis-hauch:#DCEFEC;
  --gelb:#FFC94A;
  --gelb-tief:#B4690E;
  --tinte:#1D1B18;
  --creme:#F6F9FA;
  --karte:#FFFFFF;
  --linie:#E7ECEE;
  --linie-hell:#F6F9FA;

  /* 4  Der Schatten: nicht mehr versetzter Klotz, sondern Licht */
  --schatten:0 1px 2px rgba(29,27,24,.05), 0 8px 24px -12px rgba(29,27,24,.18);
  --schatten-tief:0 2px 4px rgba(29,27,24,.06), 0 16px 40px -16px rgba(29,27,24,.26);

  /* die alten Namen ziehen mit */
  --accent:#FFC94A;
  --turquoise:#0E7C7B;
  --turquoise-soft:#DCEFEC;
  --turq:#0E7C7B;
  --turq2:#DCEFEC;
  --cream:#FFFFFF;
  --bg:#F6F9FA;
  --text:#1D1B18;
  --text-soft:#5C574C;
  --border:#E7ECEE;
  --gold:#B4690E;
}

/* 5  Der Grund. Die Startseite legt einen Verlauf darueber — der
      passt jetzt nicht mehr, also ruhig und flach. */
html body{ background:#F6F9FA !important; }

/* ---------- 3-4-6  Die grossen Flaechen ---------- */
html .dw-buehne,
html .st .st-oben,
html .ku .ku-kopf,
html .vt-hero,
html .st .st-chat,
html .ub-mix,
html .ln-bh,
html .am-band,
html .af-buehne,
html .af-chat,
html .hc-box{
  border-width:1px !important;
  border-color:var(--linie) !important;
  border-radius:18px !important;
  box-shadow:var(--schatten) !important;
}
html .dw-buehne > .rechts,
html .st .st-oben > .st-rechts{
  border-left-width:1px !important;
  border-left-color:var(--linie) !important;
  background:var(--creme) !important;
}
@media(max-width:860px){
  html .st .st-oben > .st-rechts{
    border-left:none !important;
    border-top:1px solid var(--linie) !important;
  }
}

/* Karten: haarfein statt kraeftig */
html .card,
html .dw-karte,
html .st .st-karte,
html .st .st-kachel,
html .dw-kachel,
html .ku .ku-karte,
html .ku .ku-lektion,
html .ku .ku-block,
html .ub-card,
html .ub-stat,
html .vt-kpi,
html .stand-streifen .ss-f{
  border-width:1px !important;
  border-color:var(--linie) !important;
  border-radius:14px !important;
  box-shadow:none !important;
}
html .dw-karte:hover,
html .st .st-kachel:hover,
html .dw-kachel:hover,
html .ub-card:hover{
  box-shadow:var(--schatten) !important;
  border-color:var(--tuerkis-dunkel) !important;
}

/* ---------- Knoepfe: flach, nicht dreidimensional ---------- */
html .btn,
html .dw-b,
html .st .st-b,
html .ku .ku-btn,
html .vt-los,
html .ub-go,
html .hc-send,
html .af-send{
  box-shadow:none !important;
  border-radius:10px !important;
}
html .btn:active,
html .dw-b:active{ transform:translateY(1px); }
html .btn-primary,
html .dw-b1,
html .st .st-b1{ background:var(--rot) !important; color:#fff !important; }
html .btn-ghost,
html .dw-b2,
html .st .st-b2{
  background:#fff !important; color:var(--tinte) !important;
  border:1px solid var(--linie) !important;
}

/* ---------- Die Leiste ---------- */
html .sidebar{ background:#fff; border-right:1px solid var(--linie); }
html .sidebar .navlink.active{
  background:var(--tuerkis-hauch) !important;
  color:var(--tuerkis-dunkel) !important;
  box-shadow:none !important;
  border-radius:9px !important;
}
html .sidebar .navlink.active::before{ background:var(--tuerkis-dunkel) !important; }
html .sidebar .navlink{ border-radius:9px; font-weight:500; }
html .sidebar .navlink:hover{ background:var(--creme); }
html .nav-sec,
html .sl-titel{ color:#6E6A5C !important; letter-spacing:.1em; }

/* ---------- Chips, Balken, Zeichen ---------- */
html .dw-chip,
html .st .st-chip,
html .chip{
  background:var(--creme) !important; color:var(--text-soft) !important;
  border:none !important; border-radius:99px !important;
}
html .dw-balken,
html .st .st-bar,
html .ub-pbar,
html .vt-bar{ background:#F6F9FA !important; }
html .dw-balken i,
html .st .st-bar i,
html .ub-pbar > *,
html .vt-bar > *{ background:var(--tuerkis-dunkel) !important; }

/* Der gelbe Marker hinter den Zeichen wird warm statt neon */
html .zeichen .mk{ fill:#FFC94A !important; opacity:.5 !important; }
html .zeichen .tu{ fill:var(--tuerkis-dunkel) !important; opacity:.45 !important; }
html .zeichen .tn{ stroke:var(--tinte) !important; }

/* Der Kringel unter den Abschnittstiteln nimmt das Petrol auf */
html .st .st-titel h2::after,
html .ln-bh h2::after{
  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='%230E7C7B' stroke-width='3.8' stroke-linecap='round'/%3E%3C/svg%3E") left/contain no-repeat !important;
}

/* ---------- 5b  Karten sind weiss, der Grund ist creme ----------
   Vorher lag Creme auf Creme — deshalb sah alles weich und
   verwaschen aus. Der Entwurf setzt weisse Flaechen auf den
   cremefarbenen Grund; erst dadurch treten die Karten hervor. */
html .dw-buehne,
html .dw-karte,
html .card,
html .st .st-karte,
html .st .st-kachel,
html .dw-kachel,
html .ku .ku-karte,
html .ku .ku-lektion,
html .ku .ku-block,
html .ub-card,
html .ub-stat,
html .vt-kpi,
html .sidebar,
html .stand-streifen .ss-f{ background:#FFFFFF !important; }
html .dw-buehne > .rechts,
html .st .st-oben > .st-rechts{ background:#F6F9FA !important; }
html .dw-kopf .dw-kick,
html .st .st-titel .tag{ color:var(--rot,#D42A21) !important; }

/* ---------- Die Leiste: „LIVE-Unterricht" wurde abgeschnitten ----------
   Der Aufklapp-Pfeil nimmt Platz, den das laengste Wort braucht.
   Etwas engere Laufweite, etwas kleinerer Pfeil — dann passt es. */
html .sidebar .navlink{ gap:10px; font-size:13.8px; letter-spacing:-.005em; }
html .sidebar .sl-pfeil{ width:22px; height:22px; flex:none; }
html .sidebar .navlink > span:not(.ic):not(.badge){ min-width:0; }
html .sidebar .sl-kinder{ margin-left:16px; padding-left:9px; }
html .sidebar .sl-kinder .navlink{ font-size:13.4px; }

/* ============================================================
   7  Die Schrift — vier Rollen, jede mit einer Aufgabe

   Vorher machte Shantell Sans fast alles: Bühnentitel, Karten-
   titel, Seitenleiste. Eine verspielte Schrift in jeder Rolle
   liest sich wie eine Kinder-App. Und Permanent Marker als
   Kicker war das Lauteste auf der Seite.

   Jetzt trägt jede Schrift genau eine Rolle:

     Caveat Brush        die grossen Momente — deine Handschrift
     Plus Jakarta Sans   Abschnitts- und Kartentitel
     Inter               Fliesstext, Knoepfe, Leiste, Zahlen
     Caveat              der handschriftliche Zuruf darueber

   Plus Jakarta Sans ist die waermste der aktuellen UI-Schriften
   und wird 2026 genau fuer Bildungsplattformen empfohlen — sie
   hat Charakter wie Shantell, aber die Ruhe von Inter.
   ============================================================ */
:root{
  --schrift-titel:'Caveat Brush', cursive;
  --schrift-kopf:'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
  --schrift-marker:'Caveat', cursive;
  --schrift-notiz:'Caveat', cursive;
  --schrift-text:'Inter', system-ui, -apple-system, sans-serif;
}

/* Der Zuruf: Caveat ist kleiner gebaut als Permanent Marker —
   also groesser setzen, sonst verschwindet er. Und in Petrol,
   nicht in Rot: Rot gehoert den Knoepfen. */
html .dw-kopf .dw-kick,
html .st .st-titel .tag,
html .st .st-kurs .eyebrow,
html .st .st-kurs .st-eb,
html .st .st-pod-kicker,
html .ln-kick,
html .dw-buehne .dw-kick{
  font-family:'Caveat', cursive !important;
  font-size:20px !important;
  font-weight:600 !important;
  letter-spacing:0 !important;
  text-transform:none !important;
  color:var(--tuerkis-dunkel,#0E7C7B) !important;
  line-height:1.15;
}

/* Karten- und Abschnittstitel: Plus Jakarta statt Shantell */
html .dw-karte h3,
html .card h3,
html .st .st-karte h3,
html .st .st-live h3,
html .st .st-titel h2,
html .dw-kachel .dw-nm,
html .st .st-kachel .kt b,
html .ku .ku-kopf h2,
html .ub-card b,
html .vt-kpi b,
html .pagehead h1{
  font-family:'Plus Jakarta Sans','Inter',system-ui,sans-serif !important;
  font-weight:700 !important;
  letter-spacing:-.011em;
}

/* Die grossen Momente bleiben Handschrift */
html .dw-buehne h2,
html .st .st-kurs h2,
html .dw-kopf h1{
  font-family:'Caveat Brush', cursive !important;
  font-weight:400 !important;
  letter-spacing:.005em;
  line-height:1.05;
}

/* Leiste, Knoepfe, Zahlen: ruhiges Inter */
html .sidebar .navlink,
html .btn, html .dw-b, html .st .st-b,
html .dw-chip, html .chip, html .be-chip{
  font-family:'Inter', system-ui, sans-serif !important;
}
html .sidebar .nav-sec,
html .sidebar .sl-titel{
  font-family:'Inter', system-ui, sans-serif !important;
  font-size:10.5px !important; font-weight:600 !important;
  text-transform:uppercase; letter-spacing:.1em !important;
}
html .dw-z .v, html .st .st-z .v,
html .dw-kachel .dw-pz, html .ub-stat .big{
  font-variant-numeric:tabular-nums;
}

/* ---------- 8  Der Stand-Streifen ganz oben ----------
   Vier Kaesten mit Strichen drin: er wird 400 ms nach dem Laden
   gezeichnet, also bevor die Daten aus der Datenbank da sind —
   deshalb stand dort „nichts gebucht", obwohl drei Stunden
   gebucht waren. Dieselben vier Zahlen stehen weiter unten auf
   der Startseite noch einmal, dort richtig gefuellt. Einmal
   reicht. */
#standStreifen{ display:none !important; }

/* ---------- 9  Die Startseite: weisse Karten ----------
   .dw-buehne war schon dabei, die Startseite baut ihre Buehne aber
   aus .st-oben. Ohne diese Zeilen blieb sie cremefarben. */
html .st .st-oben,
html .st .st-oben > .st-kurs,
html .st .st-vok,
html .st .st-pod,
html .st .st-gruss,
html .st .st-z{ background:#FFFFFF !important; }
html .st .st-oben > .st-rechts{ background:#F6F9FA !important; }

/* ============================================================
   10  Der Vokabeltrainer: Tagesdosis, Kaesten, Herkunft
   ============================================================ */
#v-vokabeln .vp{ display:flex; flex-direction:column; gap:26px; }

/* Heute — die einzige Sache oben */
#v-vokabeln .vp-heute{
  display:grid; grid-template-columns:1fr auto; gap:18px; align-items:end;
  background:#fff; border:1px solid var(--linie); border-radius:20px;
  box-shadow:var(--schatten); padding:26px 28px 0; overflow:hidden;
}
#v-vokabeln .vp-heute .tx{ padding-bottom:26px; min-width:0; }
#v-vokabeln .vp-heute img{ height:150px; width:auto; display:block; }
#v-vokabeln .vp-heute h2{
  font-family:var(--schrift-titel); font-weight:400;
  font-size:clamp(26px,3.4vw,38px); line-height:1.05; margin:0 0 8px; color:var(--tinte);
}
#v-vokabeln .vp-heute p{ margin:0 0 18px; color:var(--text-soft); font-size:15px; max-width:52ch; }
#v-vokabeln .vp-zuruf{
  font-family:'Caveat',cursive; font-size:20px; font-weight:600;
  color:var(--tuerkis-dunkel); display:block; margin-bottom:1px;
}
#v-vokabeln .vp-serie{
  display:inline-block; background:var(--gelb-weich,#F6F9FA); color:#8A6608;
  border-radius:99px; padding:3px 11px; font-size:12px; font-weight:700; margin-bottom:7px;
}
#v-vokabeln .vp-los{
  background:var(--rot); color:#fff; border:0; border-radius:10px;
  padding:13px 26px; font-family:inherit; font-size:15.5px; font-weight:700; cursor:pointer;
}
#v-vokabeln .vp-los:hover{ background:var(--rot-tief,#B02B24); }
@media(max-width:640px){
  #v-vokabeln .vp-heute{ grid-template-columns:1fr; padding:20px 20px 0; }
  #v-vokabeln .vp-heute img{ height:100px; justify-self:end; }
  #v-vokabeln .vp-heute .tx{ padding-bottom:14px; }
}

/* Abschnitte */
#v-vokabeln .vp-teil > header{ margin-bottom:12px; }
#v-vokabeln .vp-teil h3{
  font-family:var(--schrift-kopf); font-weight:700; font-size:20px; margin:0; color:var(--tinte);
}
#v-vokabeln .vp-teil header p{ margin:3px 0 0; color:#6E6A5C; font-size:13.5px; }

/* Die fuenf Kaesten */
#v-vokabeln .vp-kaesten{
  display:grid; grid-template-columns:repeat(5,1fr); gap:10px;
}
@media(max-width:760px){ #v-vokabeln .vp-kaesten{ grid-template-columns:repeat(2,1fr); } }
#v-vokabeln .vp-kasten{
  position:relative; display:flex; flex-direction:column; gap:2px; text-align:left;
  background:#fff; border:1px solid var(--linie); border-radius:14px;
  padding:14px 15px 15px; font-family:inherit; cursor:pointer;
  transition:transform .13s, border-color .13s, box-shadow .13s;
}
#v-vokabeln .vp-kasten:hover:not(:disabled){
  transform:translateY(-2px); border-color:var(--tuerkis-dunkel); box-shadow:var(--schatten);
}
#v-vokabeln .vp-kasten:disabled{ opacity:.55; cursor:default; }
#v-vokabeln .vp-kasten .nr{
  position:absolute; right:12px; top:11px; font-size:11px; font-weight:800; color:#C7D0D4;
}
#v-vokabeln .vp-kasten b{
  font-family:var(--schrift-kopf); font-weight:700; font-size:14px; color:var(--tinte);
}
#v-vokabeln .vp-kasten .v{
  font-family:var(--schrift-titel); font-weight:400; font-size:32px; line-height:1.05;
  color:var(--tuerkis-dunkel); font-variant-numeric:tabular-nums;
}
#v-vokabeln .vp-kasten .w{ font-size:11.5px; color:#6E6A5C; line-height:1.35; }

/* Die aergern dich */
#v-vokabeln .vp-aerger{
  display:flex; gap:16px; align-items:center; flex-wrap:wrap;
  background:#FFFFFF; border:1px solid var(--gelb); border-radius:16px; padding:15px 18px;
}
#v-vokabeln .vp-aerger b{ display:block; font-family:var(--schrift-kopf); font-weight:700; font-size:15.5px; color:#6B5A22; }
#v-vokabeln .vp-aerger span{ display:block; font-size:13.5px; color:#8A7A45; margin-top:2px; }
#v-vokabeln .vp-aerger > div{ flex:1; min-width:220px; }
#v-vokabeln .vp-b{
  border:1px solid var(--tinte); background:var(--tinte); color:#fff; border-radius:99px;
  padding:9px 18px; font-family:inherit; font-size:14px; font-weight:700; cursor:pointer; flex:none;
}

/* Woher die Woerter kommen */
#v-vokabeln .vp-regale{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:10px;
}
#v-vokabeln .vp-regal{
  background:#fff; border:1px solid var(--linie); border-radius:14px; padding:13px 15px;
  display:flex; flex-direction:column; gap:4px;
}
#v-vokabeln .vp-regal b{ font-family:var(--schrift-kopf); font-weight:700; font-size:14.5px; color:var(--tinte); }
#v-vokabeln .vp-regal .z{ font-size:12.5px; color:#6E6A5C; font-variant-numeric:tabular-nums; }
#v-vokabeln .vp-regal .bal{ height:4px; border-radius:99px; background:#F6F9FA; overflow:hidden; margin-top:4px; }
#v-vokabeln .vp-regal .bal i{ display:block; height:100%; background:var(--tuerkis-dunkel); border-radius:99px; }
#v-vokabeln .vp-fuss{ margin:12px 0 0; font-size:13px; color:#6E6A5C; }
#v-vokabeln .vp-fuss a{ color:var(--tuerkis-dunkel); font-weight:600; }
#v-vokabeln .vp-hinweis{
  background:#FFFFFF; border:1px solid var(--gelb); border-radius:14px;
  padding:13px 16px; font-size:13.5px; color:#6B5A22;
}