/* Lernplatt · by Can Siebert */
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400;700&family=Source+Sans+3:wght@400;600;700&display=swap');

:root {
  --color-bg: #fafaf7;
  --color-paper: #ffffff;
  --color-ink: #222;
  --color-muted: #666;
  --color-line: #d8d6cc;
  --color-line-dark: #444;
  --color-header-bg: #f0eee2;
  --kurs-22: #1a4d8f;
  --kurs-22-bg: #dceaff;
  --kurs-71: #9d4a1a;
  --kurs-71-bg: #ffe9d6;
  --phase: #5a3d8f;
  --phase-bg: #f3eefa;
  --today: #9d1a1a;
  --today-bg: #ffdcdc;
  --shadow: 2px 3px 0 rgba(0,0,0,0.08);
  --radius: 8px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Source Sans 3', system-ui, sans-serif;
  background: var(--color-bg);
  color: var(--color-ink);
  line-height: 1.5;
}

.handwritten { font-family: 'Caveat', cursive; }

.brand-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 24px;
  background: var(--color-header-bg);
  border-bottom: 2px solid var(--color-line-dark);
  font-family: 'Caveat', cursive; font-size: 22px; font-weight: 700;
}
.brand-bar a { color: var(--color-ink); text-decoration: none; }
.brand-bar .logout { font-size: 16px; opacity: 0.7; }

.crumbs {
  padding: 8px 24px; font-size: 14px; color: var(--color-muted);
  border-bottom: 1px solid var(--color-line); background: var(--color-paper);
}
.crumbs a { color: var(--color-muted); text-decoration: none; }
.crumbs a:hover { color: var(--kurs-22); }

main { padding: 24px; max-width: 1200px; margin: 0 auto; }
h1, h2, h3 { font-weight: 700; line-height: 1.2; }
h1 { font-size: 32px; margin: 0 0 8px; }
h2 { font-size: 24px; margin: 24px 0 12px; }
h3 { font-size: 18px; margin: 16px 0 8px; }

.login-card {
  max-width: 420px; margin: 80px auto; padding: 40px;
  background: var(--color-paper);
  border: 2px solid var(--color-line-dark);
  border-radius: var(--radius); box-shadow: var(--shadow); text-align: center;
}
.login-card input {
  width: 100%; padding: 12px; font-size: 18px;
  border: 1.5px solid var(--color-line-dark); border-radius: var(--radius); margin: 16px 0;
}
.login-card button {
  padding: 12px 32px; font-size: 16px;
  background: var(--kurs-22); color: white; border: none;
  border-radius: var(--radius); cursor: pointer; font-family: inherit; font-weight: 600;
}
.login-card button:hover { background: #143b6b; }
.login-error { color: var(--today); margin-top: 8px; min-height: 1.2em; }

.course-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 32px; margin-top: 24px;
}
.course-card {
  padding: 32px; border-radius: var(--radius);
  border: 2px solid var(--color-line-dark); box-shadow: var(--shadow);
  cursor: pointer; text-decoration: none; color: var(--color-ink);
  display: flex; flex-direction: column; gap: 16px;
}
.course-card:hover { transform: translate(-1px, -2px); transition: transform 0.15s; }
.course-card.kurs-22 { background: var(--kurs-22-bg); border-color: var(--kurs-22); }
.course-card.kurs-71 { background: var(--kurs-71-bg); border-color: var(--kurs-71); }
.course-card .course-id { font-size: 14px; opacity: 0.7; }
.course-card h2 { margin: 0; font-size: 22px; }

.day-list { display: flex; flex-direction: column; gap: 8px; }
.day-row {
  display: grid; grid-template-columns: 100px 1fr auto auto;
  align-items: center; gap: 16px;
  padding: 12px 16px; background: var(--color-paper);
  border: 1.5px solid var(--kurs-22); border-radius: var(--radius);
  text-decoration: none; color: var(--color-ink);
}
.day-row.today { background: var(--today-bg); border-color: var(--today); border-width: 2px; }
.day-row .day-date { font-weight: 700; }
.day-row .day-meta { font-size: 13px; color: var(--color-muted); }
.day-row .day-title { font-size: 16px; }
.day-row .pips { display: flex; gap: 4px; }
.pip {
  width: 14px; height: 14px; border-radius: 50%;
  border: 1.5px solid var(--kurs-22); background: var(--color-paper);
}
.pip.done { background: var(--kurs-22); }
.day-row .today-star { color: var(--today); font-size: 20px; }

.phase-block { margin-bottom: 24px; }
.phase-header {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px; background: var(--phase-bg);
  border: 1.5px solid var(--phase); border-radius: var(--radius); margin-bottom: 12px;
}
.phase-number {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  background: var(--color-paper); border: 1.5px solid var(--phase);
  border-radius: 50%; font-weight: 700; color: var(--phase);
}
.phase-title { font-weight: 700; color: var(--phase); }
.phase-sub { font-size: 13px; color: var(--color-muted); margin-left: auto; }

.material-row { display: flex; gap: 12px; flex-wrap: wrap; }
.material-card {
  flex: 1 1 200px;
  display: flex; align-items: center; gap: 12px;
  padding: 14px; background: var(--color-paper);
  border: 1.5px solid var(--kurs-22); border-radius: var(--radius);
  text-decoration: none; color: var(--color-ink);
}
.material-card:hover { background: var(--kurs-22-bg); }
.material-icon { font-size: 26px; }
.material-name { font-weight: 600; font-size: 15px; }
.material-meta { font-size: 12px; color: var(--color-muted); }

.quiz-card {
  max-width: 720px; margin: 24px auto; padding: 28px;
  background: var(--color-paper); border: 1.5px solid var(--color-line-dark);
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.quiz-progress { font-size: 14px; color: var(--color-muted); margin-bottom: 12px; }
.quiz-question { font-size: 20px; font-weight: 600; margin-bottom: 16px; }
.quiz-options { display: flex; flex-direction: column; gap: 8px; }
.quiz-option {
  padding: 12px 16px; border: 1.5px solid var(--color-line);
  border-radius: var(--radius); cursor: pointer; background: var(--color-paper);
}
.quiz-option:hover { background: #f5f5f0; }
.quiz-option.selected { background: var(--kurs-22-bg); border-color: var(--kurs-22); }
.quiz-option.correct { background: #d4f5d4; border-color: #2a8a2a; }
.quiz-option.wrong { background: #ffd4d4; border-color: var(--today); }
.quiz-button {
  margin-top: 16px; padding: 12px 24px;
  background: var(--kurs-22); color: white; border: none;
  border-radius: var(--radius); font-family: inherit; font-size: 16px; font-weight: 600;
  cursor: pointer;
}
.quiz-button:disabled { background: var(--color-line); cursor: not-allowed; }
.quiz-feedback {
  margin-top: 16px; padding: 12px;
  background: #fffce0; border-left: 4px solid #d4a000; border-radius: 4px;
}
.quiz-feedback .source { font-size: 12px; color: var(--color-muted); margin-top: 8px; }

.pfad-progress-bar {
  display: flex; align-items: center; gap: 8px; margin-bottom: 24px;
}
.pfad-progress-step {
  width: 28px; height: 28px; border-radius: 50%;
  border: 1.5px solid var(--color-line); background: var(--color-paper);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700;
}
.pfad-progress-step.active { background: var(--kurs-22); color: white; border-color: var(--kurs-22); }
.pfad-progress-step.done { background: #d4f5d4; border-color: #2a8a2a; }
.pfad-progress-line { flex: 1; height: 2px; background: var(--color-line); }

.pfad-video iframe { width: 100%; aspect-ratio: 16/9; border: 1.5px solid var(--color-line); border-radius: var(--radius); }
.pfad-video-placeholder {
  padding: 80px 20px; background: #eee; text-align: center;
  border-radius: var(--radius); border: 1.5px dashed var(--color-line-dark);
  color: var(--color-muted);
}

@media (max-width: 720px) {
  .day-row { grid-template-columns: 1fr; gap: 4px; }
  .day-row .pips { margin-top: 8px; }
  main { padding: 16px; }
}

/* === E-COM Lernfeld-Aliases (Hahmann-Farben 1:1 + 4. analog) === */
:root {
  --lf1: var(--kurs-22);        /* LF1 = Hahmann-Blau */
  --lf1-bg: var(--kurs-22-bg);
  --lf2: var(--kurs-71);        /* LF2 = Hahmann-Orange-Braun */
  --lf2-bg: var(--kurs-71-bg);
  --lf3: var(--phase);          /* LF3 = Hahmann-Lila */
  --lf3-bg: var(--phase-bg);
  --lf4: #2a8a4d;               /* LF4 = neues Grün, gleicher Pastellstil */
  --lf4-bg: #d4f5e0;
}
.course-card.lf1 { background: var(--lf1-bg); border-color: var(--lf1); }
.course-card.lf2 { background: var(--lf2-bg); border-color: var(--lf2); }
.course-card.lf3 { background: var(--lf3-bg); border-color: var(--lf3); }
.course-card.lf4 { background: var(--lf4-bg); border-color: var(--lf4); }
.course-card.archiv { background: var(--color-header-bg); border-color: var(--color-line-dark); }
.day-row.lf1 { border-color: var(--lf1); }
.day-row.lf2 { border-color: var(--lf2); }
.day-row.lf3 { border-color: var(--lf3); }
.day-row.lf4 { border-color: var(--lf4); }
.material-card.lf4 { border-color: var(--lf4); }
.material-card.lf4:hover { background: var(--lf4-bg); }
.pip.lf4 { border-color: var(--lf4); }
.pip.lf4.done { background: var(--lf4); }
.quiz-option.selected.lf4 { background: var(--lf4-bg); border-color: var(--lf4); }
.quiz-button.lf4 { background: var(--lf4); }
.pfad-progress-step.active.lf4 { background: var(--lf4); border-color: var(--lf4); }

/* === Rough.js progressive enhancement === */
.rough-applied > svg.rough-svg { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; z-index: 0; }
.rough-applied { border-color: transparent !important; }
.rough-applied > *:not(svg) { position: relative; z-index: 1; }

@media print {
  svg.rough-svg, svg.rough-underline { display: none !important; }
  .rough-applied { border-color: #444 !important; }
}