/* ============================ Dashboard ============================ */
.hero {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-5);
}
.hero-date { font-size: .8rem; color: var(--text-muted); font-weight: 550; }
.hero-title { font-size: 1.35rem; font-weight: 660; letter-spacing: -.02em; margin-top: 2px; }

.now-card {
  border-left: 3px solid var(--accent);
  display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap;
}
.now-time {
  font-variant-numeric: tabular-nums; font-size: 1.05rem; font-weight: 650;
  padding-right: var(--sp-4); border-right: 1px solid var(--line); min-width: 108px;
}
@media (max-width: 560px) { .now-time { border-right: 0; padding-right: 0; min-width: 0; } }

.timeline { display: flex; flex-direction: column; }
.tl-row {
  display: grid; grid-template-columns: 62px 12px minmax(0, 1fr);
  gap: var(--sp-3); align-items: stretch; position: relative;
}
.tl-time {
  font-size: .76rem; color: var(--text-faint); font-variant-numeric: tabular-nums;
  padding-top: 12px; text-align: right; line-height: 1.35;
}
.tl-rail { position: relative; display: flex; justify-content: center; }
.tl-rail::before {
  content: ''; position: absolute; top: 0; bottom: 0; width: 2px;
  background: var(--line); border-radius: 1px;
}
.tl-row:first-child .tl-rail::before { top: 16px; }
.tl-row:last-child .tl-rail::before { bottom: calc(100% - 16px); }
.tl-node {
  position: relative; z-index: 1; width: 9px; height: 9px; border-radius: 50%;
  background: var(--line-strong); margin-top: 15px; flex: 0 0 auto;
  box-shadow: 0 0 0 3px var(--bg);
}
.tl-row.is-now .tl-node { background: var(--accent); box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--accent-weak); }
.tl-row.is-past { opacity: .5; }
.tl-body {
  padding: 10px var(--sp-3); margin-bottom: 6px; border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--surface);
  display: flex; align-items: center; gap: var(--sp-3); min-width: 0;
}
.tl-row.is-now .tl-body { border-color: color-mix(in srgb, var(--accent) 45%, transparent); background: var(--accent-weak); }
.tl-bar { width: 3px; align-self: stretch; border-radius: 2px; flex: 0 0 auto; min-height: 26px; }
.tl-subject { font-size: .88rem; font-weight: 600; }
.tl-meta { font-size: .76rem; color: var(--text-muted); }
.tl-badge { margin-left: auto; flex: 0 0 auto; }
.tl-break .tl-body {
  background: transparent; border-style: dashed; color: var(--text-faint);
  font-size: .79rem; padding: 6px var(--sp-3);
}

.widget-toggle-list { display: flex; flex-direction: column; gap: 2px; }
.widget-toggle {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 9px 10px; border-radius: var(--radius); border: 1px solid transparent;
  background: transparent; width: 100%; text-align: left;
}
.widget-toggle:hover { background: var(--surface-2); }
.widget-toggle .drag-handle { color: var(--text-faint); cursor: grab; touch-action: none; }
.widget-toggle.dragging { opacity: .45; background: var(--surface-3); }
.widget-toggle.drop-target { border-color: var(--accent); }

/* ============================ Stundenplan ============================ */
.tt-toolbar {
  display: flex; align-items: center; gap: var(--sp-3);
  flex-wrap: wrap; margin-bottom: var(--sp-4);
}
.tt-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: var(--sp-2); }

.tt-grid {
  display: grid; gap: 6px; min-width: 680px;
  grid-template-columns: 64px repeat(var(--tt-days, 5), minmax(118px, 1fr));
}
.tt-grid.compact-time { grid-template-columns: 52px repeat(var(--tt-days, 5), minmax(104px, 1fr)); }

.tt-corner { }
.tt-dayhead {
  padding: 8px 6px; text-align: center; border-radius: var(--radius);
  background: var(--surface-2); font-size: .8rem; font-weight: 650;
  position: sticky; top: calc(var(--header-h) + var(--safe-top)); z-index: 5;
}
.tt-dayhead .dh-date { display: block; font-size: .71rem; font-weight: 500; color: var(--text-faint); margin-top: 1px; }
.tt-dayhead.today { background: var(--accent-weak); color: var(--accent); }

.tt-slot {
  display: flex; flex-direction: column; align-items: flex-end; justify-content: center;
  padding: 6px 8px 6px 0; font-size: .72rem; color: var(--text-faint);
  font-variant-numeric: tabular-nums; line-height: 1.3; text-align: right;
}
.tt-slot .slot-no { font-size: .88rem; font-weight: 650; color: var(--text-muted); }
/* 0. Stunde (Fruehstunde) dezent hervorheben */
.tt-slot.is-zero .slot-no { color: var(--accent); }
.tt-slot.is-zero::after {
  content: 'früh'; font-size: .6rem; color: var(--accent);
  text-transform: uppercase; letter-spacing: .05em; font-weight: 600;
}

.tt-cell {
  position: relative; min-height: 62px; border-radius: var(--radius);
  border: 1px dashed var(--line); background: transparent;
  padding: 0; width: 100%; text-align: left;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.tt-cell:hover { background: var(--surface-2); border-color: var(--line-strong); }
.tt-cell.drop-target { border-color: var(--accent); border-style: solid; background: var(--accent-weak); }
.tt-cell .cell-add {
  position: absolute; inset: 0; display: grid; place-items: center;
  color: var(--text-faint); opacity: 0; transition: opacity var(--dur) var(--ease);
}
.tt-cell:hover .cell-add { opacity: 1; }
@media (hover: none) { .tt-cell .cell-add { opacity: .35; } }

.tt-lesson {
  position: relative; height: 100%; min-height: 62px; width: 100%;
  border-radius: var(--radius); padding: 8px 9px;
  border: 1px solid var(--lesson-line, var(--line));
  background: var(--lesson-bg, var(--surface));
  border-left: 3px solid var(--lesson-color, var(--accent));
  display: flex; flex-direction: column; gap: 2px; overflow: hidden;
  text-align: left; cursor: grab;
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.tt-lesson:hover { box-shadow: var(--shadow-sm); }
.tt-lesson:active { cursor: grabbing; }
.tt-lesson.dragging { opacity: .4; }
.tt-lesson .l-subject { font-size: .82rem; font-weight: 650; line-height: 1.25; }
.tt-lesson .l-meta { font-size: .71rem; color: var(--text-muted); line-height: 1.3; }
.tt-lesson .l-time { font-size: .68rem; color: var(--text-faint); font-variant-numeric: tabular-nums; margin-top: auto; }
.tt-lesson .l-note-dot { position: absolute; top: 7px; right: 7px; width: 5px; height: 5px; border-radius: 50%; background: var(--lesson-color, var(--accent)); }

.tt-break-row {
  grid-column: 1 / -1; display: flex; align-items: center; gap: var(--sp-3);
  padding: 2px 0 2px 64px; color: var(--text-faint); font-size: .72rem;
}
.tt-break-row::after { content: ''; flex: 1 1 auto; border-top: 1px dashed var(--line); }

/* Tagesansicht (mobil bevorzugt) */
.tt-daynav { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.tt-daynav .day-label { font-weight: 650; font-size: .95rem; flex: 1 1 auto; text-align: center; }
.tt-daylist { display: flex; flex-direction: column; gap: var(--sp-2); }
.tt-dayitem {
  display: grid; grid-template-columns: 56px 3px minmax(0, 1fr) auto;
  gap: var(--sp-3); align-items: center; width: 100%;
  padding: var(--sp-3); border-radius: var(--radius-lg);
  border: 1px solid var(--line); background: var(--surface); text-align: left;
}
.tt-dayitem:hover { border-color: var(--line-strong); }
.tt-dayitem .di-time { font-size: .74rem; color: var(--text-faint); font-variant-numeric: tabular-nums; line-height: 1.35; }
.tt-dayitem .di-bar { align-self: stretch; border-radius: 2px; min-height: 34px; }
.tt-dayitem .di-subject { font-size: .9rem; font-weight: 600; }
.tt-dayitem .di-meta { font-size: .78rem; color: var(--text-muted); }
.tt-dayitem.is-now { border-color: color-mix(in srgb, var(--accent) 45%, transparent); background: var(--accent-weak); }
.tt-dayitem.is-past { opacity: .55; }

/* Monatsansicht */
.month-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.month-dow { font-size: .72rem; font-weight: 650; color: var(--text-faint); text-align: center; padding: 4px 0; }
.month-cell {
  min-height: 86px; border-radius: var(--radius); border: 1px solid var(--line);
  background: var(--surface); padding: 5px 6px; display: flex; flex-direction: column;
  gap: 2px; text-align: left; overflow: hidden;
}
.month-cell.outside { opacity: .4; }
.month-cell.today { border-color: var(--accent); }
.month-cell.holiday { background: var(--surface-2); }
.month-cell .mc-day { font-size: .76rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.month-cell .mc-chip {
  font-size: .66rem; padding: 1px 5px; border-radius: 4px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; font-weight: 550;
}
.month-cell .mc-more { font-size: .65rem; color: var(--text-faint); }
@media (max-width: 640px) { .month-cell { min-height: 62px; } .month-cell .mc-chip { font-size: .6rem; } }

/* ============================ Noten ============================ */
.subject-card {
  display: flex; flex-direction: column; gap: var(--sp-3);
  border-top: 3px solid var(--subject-color, var(--accent));
}
.subject-head { display: flex; align-items: flex-start; gap: var(--sp-3); }
.subject-name { font-size: .95rem; font-weight: 650; }
.subject-meta { font-size: .76rem; color: var(--text-muted); }
.subject-avg {
  margin-left: auto; text-align: right; font-variant-numeric: tabular-nums;
  font-size: 1.5rem; font-weight: 660; letter-spacing: -.02em; line-height: 1;
}
.subject-avg .avg-sub { display: block; font-size: .68rem; font-weight: 500; color: var(--text-faint); letter-spacing: 0; margin-top: 3px; }

.grade-pill {
  display: inline-grid; place-items: center; min-width: 30px; height: 26px;
  padding: 0 7px; border-radius: 7px; font-size: .84rem; font-weight: 660;
  font-variant-numeric: tabular-nums; background: var(--surface-3); color: var(--text);
}
.grade-pill.g-1 { background: color-mix(in srgb, #1f8a52 17%, transparent); color: #1f8a52; }
.grade-pill.g-2 { background: color-mix(in srgb, #4a9a3a 17%, transparent); color: #3f8a31; }
.grade-pill.g-3 { background: color-mix(in srgb, #b7791f 18%, transparent); color: #a06a15; }
.grade-pill.g-4 { background: color-mix(in srgb, #d4802a 20%, transparent); color: #b96b18; }
.grade-pill.g-5 { background: color-mix(in srgb, #c3372b 17%, transparent); color: #c3372b; }
.grade-pill.g-6 { background: color-mix(in srgb, #9e2119 20%, transparent); color: #9e2119; }
:root[data-theme="dark"] .grade-pill.g-1 { color: #58c78a; }
:root[data-theme="dark"] .grade-pill.g-2 { color: #7cc45f; }
:root[data-theme="dark"] .grade-pill.g-3 { color: #d8a238; }
:root[data-theme="dark"] .grade-pill.g-4 { color: #e0913f; }
:root[data-theme="dark"] .grade-pill.g-5 { color: #e2685c; }
:root[data-theme="dark"] .grade-pill.g-6 { color: #d9564a; }
.grade-pill.lg { min-width: 38px; height: 32px; font-size: .97rem; }

.subject-strip { display: flex; gap: 3px; align-items: center; }
.subject-strip .sg { width: 100%; height: 5px; border-radius: 2px; background: var(--surface-3); }

.target-row {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3); border-radius: var(--radius); background: var(--surface-2);
  font-size: .82rem; flex-wrap: wrap;
}

.weight-table td { padding: 6px var(--sp-2); }
.weight-input { width: 84px; text-align: right; }

.calc-result {
  padding: var(--sp-4); border-radius: var(--radius);
  background: var(--surface-2); border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap;
}
.calc-arrow { color: var(--text-faint); display: grid; place-items: center; }
.scenario-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(86px, 1fr)); gap: var(--sp-2); }
.scenario {
  padding: var(--sp-3) var(--sp-2); border-radius: var(--radius); text-align: center;
  border: 1px solid var(--line); background: var(--surface);
}
.scenario .sc-grade { font-size: .78rem; color: var(--text-faint); font-weight: 600; }
.scenario .sc-avg { font-size: 1.02rem; font-weight: 650; font-variant-numeric: tabular-nums; margin-top: 3px; }
.scenario .sc-delta { font-size: .7rem; margin-top: 2px; }

/* ============================ Diagramme ============================ */
.chart { width: 100%; display: block; overflow: visible; }
.chart-wrap { position: relative; width: 100%; }
.chart text { font-family: var(--font); fill: var(--text-faint); font-size: 10px; }
.chart .axis-line { stroke: var(--line); stroke-width: 1; }
.chart .grid-line { stroke: var(--line); stroke-width: 1; stroke-dasharray: 3 4; opacity: .8; }
.chart .series-line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart .series-area { fill: var(--accent); opacity: .09; }
.chart .point { fill: var(--surface); stroke: var(--accent); stroke-width: 2; }
.chart .bar { fill: var(--accent); opacity: .85; rx: 3; transition: opacity var(--dur) var(--ease); }
.chart .bar:hover { opacity: 1; }
.chart .bar-track { fill: var(--surface-3); rx: 3; }
.chart-legend { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-3); font-size: .76rem; color: var(--text-muted); }
.chart-legend .li { display: inline-flex; align-items: center; gap: 6px; }
.chart-tooltip {
  position: absolute; pointer-events: none; z-index: 10;
  background: var(--bg-elevated); border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm); padding: 5px 9px; font-size: .75rem;
  box-shadow: var(--shadow-md); white-space: nowrap; transform: translate(-50%, -130%);
  opacity: 0; transition: opacity var(--dur) var(--ease);
}
.chart-tooltip.visible { opacity: 1; }

.dist-row { display: grid; grid-template-columns: 34px minmax(0,1fr) 44px; gap: var(--sp-3); align-items: center; }
.dist-bar { height: 20px; border-radius: 5px; background: var(--surface-3); overflow: hidden; }
.dist-bar > span { display: block; height: 100%; border-radius: 5px; transition: width 340ms var(--ease); }

/* ============================ Onboarding ============================ */
.onb-wrap {
  min-height: 100dvh; display: grid; place-items: center;
  padding: calc(var(--safe-top) + var(--sp-5)) var(--sp-4) calc(var(--safe-bottom) + var(--sp-5));
  background: var(--bg);
}
.onb-card {
  width: min(560px, 100%); background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md); overflow: hidden;
  display: flex; flex-direction: column; max-height: 92dvh;
}
.onb-head { padding: var(--sp-5) var(--sp-5) var(--sp-4); border-bottom: 1px solid var(--line); }
.onb-steps { display: flex; gap: 5px; margin-bottom: var(--sp-4); }
.onb-steps i { height: 3px; flex: 1 1 0; border-radius: 2px; background: var(--surface-3); transition: background var(--dur) var(--ease); }
.onb-steps i.done { background: var(--accent); }
.onb-step-label { font-size: .73rem; font-weight: 650; color: var(--accent); text-transform: uppercase; letter-spacing: .05em; }
.onb-title { font-size: 1.22rem; font-weight: 660; letter-spacing: -.02em; margin-top: 4px; }
.onb-desc { font-size: .87rem; color: var(--text-muted); margin-top: 5px; }
.onb-body { padding: var(--sp-5); overflow-y: auto; flex: 1 1 auto; }
.onb-foot {
  padding: var(--sp-4) var(--sp-5); border-top: 1px solid var(--line);
  display: flex; align-items: center; gap: var(--sp-2); background: var(--surface-2);
}
.onb-foot .spacer { margin-right: auto; }

.pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--sp-2); }
.pick {
  display: flex; align-items: center; gap: 9px; padding: 10px 12px;
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  background: var(--surface); font-size: .85rem; font-weight: 550; text-align: left;
  transition: all var(--dur) var(--ease);
}
.pick:hover { border-color: var(--text-faint); }
.pick.active { border-color: var(--accent); background: var(--accent-weak); color: var(--accent); }
.pick .pick-check { margin-left: auto; opacity: 0; }
.pick.active .pick-check { opacity: 1; }

.option-card {
  display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-4);
  border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface);
  text-align: left; width: 100%; transition: all var(--dur) var(--ease);
}
.option-card:hover { border-color: var(--text-faint); }
.option-card.active { border-color: var(--accent); background: var(--accent-weak); }
.option-card .oc-title { font-size: .88rem; font-weight: 620; }
.option-card .oc-desc { font-size: .78rem; color: var(--text-muted); margin-top: 2px; }
.option-card .oc-radio {
  width: 17px; height: 17px; border-radius: 50%; border: 2px solid var(--line-strong);
  flex: 0 0 auto; margin-top: 2px; display: grid; place-items: center;
}
.option-card.active .oc-radio { border-color: var(--accent); }
.option-card.active .oc-radio::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }

/* ============================ Konto ============================ */
.auth-wrap { min-height: 100dvh; display: grid; place-items: center; padding: var(--sp-5); }
.auth-card { width: min(400px, 100%); }