/* KlinikDeutsch · eigener Kursraum — Marke: Kobalt/Blau, EB Garamond + DM Sans */
@font-face{font-family:'EBG';src:url('ebg700.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'DMS';src:url('dms400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'DMS';src:url('dms600.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'DMS';src:url('dms700.woff2') format('woff2');font-weight:700;font-display:swap}

:root{
  --blue:#1E4ED8; --cobalt:#142A6E; --emerald:#10B981; --sky:#AFC2EE;
  --light:#EAF1F8; --soft:#F4F7FA; --line:#d6e0ea; --grey:#5a6b80;
  --ok:#0f9d58; --warn:#b8860b; --bad:#c0392b; --text:#1c2533;
}
*{box-sizing:border-box}
[hidden]{display:none !important}
html,body{margin:0;padding:0}
body{font-family:'DMS','Segoe UI',Calibri,system-ui,sans-serif;color:var(--text);
  background:#eef3f9;line-height:1.6;font-size:19px}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{font-family:'EBG',Georgia,serif;font-weight:700;line-height:1.25;margin:0}

/* ---------- Kopf ---------- */
.kopf{background:linear-gradient(120deg,var(--cobalt),var(--blue));color:#fff}
.kopf .innen{max-width:1060px;margin:0 auto;padding:18px 24px;display:flex;
  align-items:center;gap:18px;flex-wrap:wrap}
.kopf img.logo{height:46px;width:auto}
.kopf .kopftext{flex:1;min-width:220px}
.kopf .kick{font-size:12px;letter-spacing:1.8px;text-transform:uppercase;opacity:.85}
.kopf h1{font-size:24px;margin-top:2px}
.kopf a{color:#fff}

.inhalt{max-width:1060px;margin:0 auto;padding:28px 24px 80px}

/* ---------- Karten ---------- */
.karte{background:#fff;border:1px solid var(--line);border-radius:14px;
  padding:22px 24px;margin:0 0 20px;box-shadow:0 1px 3px rgba(20,42,110,.05)}
.karte h2{font-size:23px;margin-bottom:8px}
.karte h3{font-size:19px;font-family:'DMS',sans-serif;font-weight:700}
.hinweis{font-size:16px;color:var(--grey)}

/* ---------- Zugang ---------- */
.zugang{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:14px}
input[type=text]{font-family:'DMS',sans-serif;font-size:19px;padding:12px 14px;
  border:1.5px solid var(--line);border-radius:10px;min-width:230px;letter-spacing:1px}
input[type=text]:focus{outline:none;border-color:var(--blue)}
button,.knopf{font-family:'DMS',sans-serif;font-size:18px;font-weight:600;cursor:pointer;
  background:var(--blue);color:#fff;border:none;border-radius:10px;padding:12px 22px;
  display:inline-block;text-align:center}
button:hover,.knopf:hover{background:var(--cobalt);text-decoration:none}
button.leise,.knopf.leise{background:#fff;color:var(--blue);border:1.5px solid var(--line)}
button.leise:hover,.knopf.leise:hover{background:var(--light);color:var(--cobalt)}
button:disabled{opacity:.5;cursor:default}
.meldung{margin-top:12px;font-size:17px;padding:12px 14px;border-radius:10px;display:none}
.meldung.gut{display:block;background:#e8f7ef;color:#0b6b3d;border:1px solid #b9e5cd}
.meldung.hinweis{display:block;background:#fdf4e0;color:#7a5a06;border:1px solid #ecdcae}

/* ---------- Guthaben ---------- */
.guthaben{display:flex;gap:22px;flex-wrap:wrap;margin-top:14px}
.guthaben .posten{background:var(--soft);border:1px solid var(--line);border-radius:10px;
  padding:10px 16px;font-size:16px;min-width:190px}
.guthaben .zahl{font-size:24px;font-weight:700;color:var(--cobalt);font-family:'EBG',serif}
.balken{height:7px;background:var(--light);border-radius:4px;overflow:hidden;margin-top:6px}
.balken i{display:block;height:100%;background:var(--emerald)}

/* ---------- Lektionsliste ---------- */
.blocktitel{margin:34px 0 6px;font-size:15px;letter-spacing:1.6px;text-transform:uppercase;
  color:var(--cobalt);font-weight:700}
.blockinfo{color:var(--grey);font-size:17px;margin-bottom:14px}
.lektion{display:flex;align-items:center;gap:18px;background:#fff;border:1px solid var(--line);
  border-radius:12px;padding:16px 20px;margin-bottom:10px;transition:border-color .15s}
.lektion:hover{border-color:var(--blue);text-decoration:none}
.lektion .nr{font-family:'EBG',serif;font-size:26px;font-weight:700;color:var(--sky);
  min-width:46px;text-align:center}
.lektion .txt{flex:1;min-width:0}
.lektion .txt b{display:block;font-size:20px;color:var(--text)}
.lektion .txt span{font-size:16px;color:var(--grey)}
.lektion .stand{min-width:150px;text-align:right;font-size:15px;color:var(--grey)}
.lektion.fertig .nr{color:var(--emerald)}

/* ---------- Einheitenliste ---------- */
.einheit{display:flex;align-items:center;gap:16px;background:#fff;border:1px solid var(--line);
  border-radius:12px;padding:14px 18px;margin-bottom:8px}
.einheit:hover{border-color:var(--blue);text-decoration:none}
.einheit .zeichen{width:34px;height:34px;border-radius:50%;background:var(--light);color:var(--cobalt);
  display:flex;align-items:center;justify-content:center;font-size:17px;font-weight:700;flex:none}
.einheit.bestanden .zeichen{background:var(--emerald);color:#fff}
.einheit.begonnen .zeichen{background:var(--sky);color:var(--cobalt)}
.einheit .txt{flex:1;min-width:0}
.einheit .txt b{display:block;font-size:18px;font-weight:600;color:var(--text)}
.einheit .txt span{font-size:15px;color:var(--grey)}
.marke{display:inline-block;font-size:12px;letter-spacing:1.2px;text-transform:uppercase;
  background:var(--light);color:var(--cobalt);border-radius:6px;padding:2px 8px;margin-right:8px}
.marke.ki{background:#e6f7f1;color:#0b6b3d}
.marke.video{background:#fdf0e6;color:#8a4b12}

/* ---------- Seitenleiste mit allen Lektionen ---------- */
.rahmen{display:flex;align-items:flex-start;max-width:1320px;margin:0 auto}
.seitenleiste{width:310px;flex:none;background:#fff;border-right:1px solid var(--line);
  padding:18px 14px 40px;align-self:stretch;position:sticky;top:0;max-height:100vh;overflow-y:auto}
.seitenleiste .lkopf{display:flex;gap:12px;align-items:center;padding:6px 6px 14px;
  border-bottom:1px solid var(--line);position:sticky;top:-18px;background:#fff;z-index:2}
.seitenleiste .lkopf b{display:block;font-size:17px}
.seitenleiste .lkopf span{display:block;font-size:14px;color:var(--grey);line-height:1.4}
.seitenleiste .lhinweis{font-size:14px;color:var(--grey);padding:10px 6px 4px;margin:0}
.lliste{display:block}
.lpunkt{display:flex;gap:10px;align-items:center;padding:9px 8px;border-radius:9px;
  color:var(--text);font-size:16px}
.lpunkt:hover{background:var(--soft);text-decoration:none}
.lpunkt.offen{background:var(--light);font-weight:600}
.lpunkt .lnr{font-family:'EBG',serif;font-weight:700;color:var(--sky);min-width:26px;text-align:center}
.lpunkt.voll .lnr{color:var(--emerald)}
.lpunkt .ltxt{flex:1;min-width:0;display:flex;gap:8px;align-items:baseline}
.lpunkt .ltxt i{margin-left:auto;font-style:normal;font-size:13px;color:var(--grey);flex:none}
.lunter{padding:4px 0 10px 34px}
.lein{display:block;font-size:14.5px;color:var(--grey);padding:5px 8px;border-radius:7px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lein:hover{background:var(--soft);color:var(--text);text-decoration:none}
.lein.voll{color:#2a7d55}
.lein.hier{background:var(--blue);color:#fff;font-weight:600}
.lein .lhaken{display:inline-block;width:16px}
.rahmen .inhalt{flex:1;min-width:0;max-width:900px}
.leistenknopf{display:none}

/* ---------- Kurskachel auf der Startseite ---------- */
.kurskachel{display:flex;align-items:center;gap:20px;background:#fff;border:1px solid var(--line);
  border-radius:14px;padding:16px 20px;margin-bottom:12px;transition:border-color .15s}
.kurskachel:hover{border-color:var(--blue);text-decoration:none}
.kurskachel img{width:150px;height:84px;object-fit:cover;border-radius:10px;flex:none}
.kurskachel .ktxt{flex:1;min-width:0}
.kurskachel .ktxt b{display:block;font-family:'EBG',Georgia,serif;font-size:22px;color:var(--text)}
.kurskachel .ktxt span{display:block;font-size:16px;color:var(--grey)}
@media (max-width:640px){
  /* Der Zuspruch: auf dem Telefon untereinander statt nebeneinander. */
  .zuspruch{flex-direction:column;align-items:flex-start;gap:10px;padding:14px 16px;
    position:relative;padding-right:44px}
  .zuspruch b{font-size:19px;line-height:1.25}
  .zuspruch .ztext{width:100%}
  .zuspruch .ztext span{font-size:15.5px;line-height:1.45}
  .zuspruch .knopf{align-self:stretch;text-align:center}
  .zuspruch .zzu{position:absolute;top:8px;right:10px} .kurskachel img{display:none} }

/* ---------- Fallkarte ---------- */
.fall{display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.fall img{width:132px;height:132px;border-radius:14px;object-fit:cover;flex:none;
  border:1px solid var(--line)}
.fall .ftext{flex:1;min-width:230px}
.fall .fname{font-family:'EBG',serif;font-size:22px;font-weight:700;color:var(--cobalt)}

/* ---------- Fortschrittsring ---------- */
.ring{width:46px;height:46px;flex:none}
.ring circle{fill:none;stroke-width:5}
.ring .bg{stroke:var(--light)}
.ring .vor{stroke:var(--emerald);stroke-linecap:round;transition:stroke-dasharray .4s}
.ring text{font-family:'DMS',sans-serif;font-size:13px;font-weight:700;fill:var(--cobalt)}

/* ---------- Einheiten-Ansicht ---------- */
body.viewer{background:#fff;height:100vh;overflow:hidden;display:flex;flex-direction:column}
.leiste{position:relative;z-index:1;  /* liegt über dem hereingleitenden Zuspruch */
  background:linear-gradient(120deg,var(--cobalt),var(--blue));color:#fff;flex:none;
  display:flex;align-items:center;gap:16px;padding:10px 18px}
.leiste a,.leiste b{color:#fff}
.leiste .titel{flex:1;min-width:0}
.leiste .titel b{display:block;font-size:17px;font-weight:600;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.leiste .titel span{font-size:13px;opacity:.85}
.leiste .knopf{padding:8px 16px;font-size:16px;background:rgba(255,255,255,.16)}
.leiste .knopf:hover{background:rgba(255,255,255,.3)}
.leiste .konto{font-size:14px;text-align:right;line-height:1.35;opacity:.95}
iframe.buehne{flex:1;width:100%;border:none;background:#eef3f9}
.videobox{flex:1;display:flex;align-items:center;justify-content:center;background:#0d1730;padding:16px}
.videobox video{max-width:100%;max-height:100%;border-radius:10px}
.sperre{flex:1;display:flex;align-items:center;justify-content:center;padding:30px}
.sperre .karte{max-width:560px;text-align:center}

/* Streifen mit dem Gesicht des Falls, dort wo der Patient vorgestellt wird */
.fallstreifen{flex:none;display:flex;align-items:center;gap:14px;background:var(--light);
  border-bottom:1px solid var(--line);padding:9px 18px}
.fallstreifen img{width:52px;height:52px;border-radius:10px;object-fit:cover;flex:none}
.fallstreifen b{display:block;font-size:17px;color:var(--cobalt)}
.fallstreifen span{font-size:15px;color:var(--grey)}

/* Zuspruch nach einer geschafften Einheit */
.zuspruch{flex:none;display:flex;align-items:center;gap:16px;padding:12px 20px;
  background:linear-gradient(120deg,#0f9d58,#10B981);color:#fff;
  animation:reinschieben .35s ease-out}
.zuspruch b{font-family:'EBG',Georgia,serif;font-size:20px}
.zuspruch .ztext{flex:1;min-width:0}
.zuspruch .ztext span{display:block;font-size:16px;opacity:.95}
.zuspruch .knopf{background:#fff;color:#0b6b3d;flex:none}
.zuspruch .knopf:hover{background:var(--light);color:#0b6b3d}
.zuspruch .zzu{background:transparent;color:#fff;border:none;font-size:22px;
  cursor:pointer;padding:0 6px;line-height:1}
@keyframes reinschieben{from{transform:translateY(-100%);opacity:0}to{transform:none;opacity:1}}

/* Einheiten-Ansicht mit Seitenleiste */
.unten{flex:1;display:flex;min-height:0}
.unten .seitenleiste{max-height:none;height:100%;position:static}
.unten #buehne{flex:1;display:flex;min-width:0}

@media (max-width:900px){
  /* Das Menü legt sich über die Seite, statt eine Spalte zu belegen.
     „.unten .seitenleiste" muss mitgenannt werden — sonst behält es auf der
     Einheitenseite seinen Platz und daneben bleibt eine leere Hälfte stehen. */
  .seitenleiste,
  .unten .seitenleiste{position:fixed;z-index:50;left:0;top:0;bottom:0;width:290px;
    height:auto;box-shadow:0 0 40px rgba(20,42,110,.25);transform:translateX(-102%);
    transition:transform .2s;max-height:none}
  .seitenleiste.auf,
  .unten .seitenleiste.auf{transform:none}
  .leistenknopf{display:inline-block}
}
@media (max-width:640px){
  body{font-size:18px}
  .kopf h1{font-size:20px}
  .lektion .stand{display:none}
  .leiste .konto{display:none}
  /* Auf dem Telefon ist in der Leiste nur Platz für die Wege und den Zähler.
     Der Titel der Einheit steht ohnehin gross in der Einheit selbst, und der
     Zähler bleibt auf einer Zeile — sonst fällt jedes Wort einzeln um und die
     Leiste wird so hoch wie der halbe Bildschirm. */
  .leiste{gap:10px;padding:10px 12px}
  .leiste .knopf{padding:8px 12px;font-size:15px}
  .leiste .titel b{display:none}
  .leiste .nurbreit{display:none}
  .leiste .titel span{display:block;white-space:nowrap;
    overflow:hidden;text-overflow:ellipsis}
}

/* ---------- Anmeldung: Konto einrichten und anmelden ---------- */
.feldreihe{margin:0 0 14px}
.feldreihe label{display:block;font-size:15px;color:var(--grey);margin:0 0 6px}
.feldreihe input{width:100%;max-width:420px;font-size:18px;padding:12px 14px;
  border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--text)}
.feldreihe input:focus{outline:none;border-color:var(--cobalt);
  box-shadow:0 0 0 3px rgba(30,78,216,.12)}
#formEinloesen .hinweis, #formAnmelden .hinweis{max-width:520px}

/* ---------- Antworten nachkaufen (erscheint an der Grenze) ---------- */
.nachkauf{position:relative;background:linear-gradient(120deg,var(--cobalt),var(--blue));
  color:#fff;padding:16px 54px 16px 22px;display:flex;flex-wrap:wrap;align-items:center;gap:14px}
.nachkauf b{font-family:'EBG',Georgia,serif;font-size:20px;flex:0 0 100%}
.nachkauf .nktext{flex:1;min-width:240px;font-size:16px;line-height:1.45}
.nachkauf .nkknoepfe{display:flex;gap:10px;flex-wrap:wrap}
.nachkauf .knopf{background:#fff;color:var(--cobalt);font-weight:700;padding:11px 20px}
.nachkauf .knopf:hover{background:var(--sky);color:var(--cobalt)}
.nachkauf .hinweis{flex:0 0 100%;color:#dbe5f8;font-size:14px}
.nachkauf .zzu{position:absolute;top:10px;right:14px;background:transparent;color:#fff;
  border:none;font-size:22px;padding:0 6px;cursor:pointer}
.nachkauf.warnung{background:linear-gradient(120deg,#0d6b45,#12916a)}
.nachkauf.warnung .knopf{background:#fff;color:#0d6b45}
.nachkauf.warnung .knopf:hover{background:#d7f2e6;color:#0d6b45}
.nachkauf.warnung .hinweis{color:#d5f0e5}
.karte .nachkauf{border-radius:12px;margin-top:18px;padding-right:48px}

/* Der Abschlusstest, solange er noch zu ist */
.lektion.gesperrtest{opacity:.8;cursor:default;background:var(--soft)}
.lektion.gesperrtest .nr{font-size:20px}

/* ---------- Abschlusstest: Uhr, Tor und Schlussdecke ---------- */
.leiste .uhr{flex:none;background:rgba(255,255,255,.18);border-radius:9px;
  padding:7px 14px;font-weight:700;font-size:19px;letter-spacing:.5px;min-width:74px;text-align:center}
.leiste .uhr.knapp{background:#b8860b}
.leiste .uhr.aus{background:rgba(255,255,255,.10);opacity:.7}

.pruefungstor{position:fixed;inset:0;background:rgba(20,42,110,.94);z-index:50;
  display:flex;align-items:center;justify-content:center;padding:24px}
.pruefungstor .karte{max-width:520px;text-align:left}
.pruefungstor h2{font-size:23px;margin-bottom:6px}
.pruefungstor p{font-size:18px;color:var(--grey);margin:0 0 14px}
.ptregeln{margin:0 0 20px;padding:0 0 0 20px;font-size:17px;line-height:1.55}
.ptregeln li{margin:0 0 8px}
.pruefungstor .knopf{font-size:19px;padding:14px 30px;width:100%;text-align:center}

.pruefungsdecke{position:fixed;inset:0;background:rgba(20,42,110,.94);z-index:60;
  display:flex;align-items:center;justify-content:center;padding:24px}
.pruefungsdecke .karte{max-width:480px;text-align:center}
.pruefungsdecke h2{font-size:24px;margin-bottom:8px}
.pruefungsdecke p{font-size:18px;color:var(--grey);margin:0 0 18px}

/* Solange die Uhr läuft, führt kein Weg nach draussen. Das Lektionsmenü
   verschwindet — der Rahmen der Einheit behält aber seine volle Höhe,
   sonst schrumpft die Aufgabe auf ein Streifchen zusammen. */
body.imTest .seitenleiste{display:none !important}


/* --- Willkommen: Porträt der Dozentin neben dem Text -------------------- */
.willkommen-zeile{display:flex;gap:22px;align-items:flex-start;flex-wrap:wrap}
.willkommen-zeile .willkommen-text{flex:1;min-width:260px}
.willkommen-zeile figure{margin:0;flex:none;width:240px}
.willkommen-zeile figure img{width:100%;height:auto;border-radius:14px;display:block;
  box-shadow:0 2px 10px rgba(20,42,110,.12)}
.willkommen-zeile figcaption{font-size:13.5px;line-height:1.45;color:#54607a;margin-top:8px}
@media(max-width:640px){
  .willkommen-zeile{gap:16px}
  .willkommen-zeile figure{width:100%;max-width:320px;margin:0 auto}
  .willkommen-zeile figcaption{text-align:center}
}

/* Karte „Auf den Startbildschirm“ (nur auf Handys, bis die App installiert ist) */
.appkarte{display:flex;gap:18px;align-items:flex-start;margin-top:18px}
.appkarte .appsymbol{width:64px;height:64px;border-radius:16px;flex:none}
.appkarte .apptext{flex:1;min-width:0}
.appkarte ol{margin:10px 0 0 22px;padding:0}
.appkarte li{margin:4px 0}
.appkarte p{margin-top:10px}
@media (max-width:640px){
  .appkarte{flex-direction:column;gap:10px}
  .appkarte .appsymbol{width:56px;height:56px;border-radius:14px}
}

/* Karte „Eine Erinnerung, wenn Sie pausieren“ */
.erkarte{margin-top:18px}
.erkarte .erstatus{margin-top:8px;font-weight:600;color:var(--grey)}
.erkarte .erstatus.gut{color:var(--ok)}
.erkarte p:last-child{margin-top:12px}

/* Schatten neben der offenen Seitenleiste (nur schmale Bildschirme) */
.leistenschatten{display:none;position:fixed;inset:0;z-index:49;background:rgba(20,42,110,.35)}
@media (max-width:900px){
  body.leisteAuf .leistenschatten{display:block}
}