:root {
  --bg: #F6F2FF; --bg2: #FFF1F7;
  --card: #FFFFFF; --text: #1B1A2E; --muted: #626079; --line: #E8E3F7;
  --accent: #6D4AFF; --accent2: #FF5FA2; --accent-soft: #EEE9FF;
  --sun: #FFC53D; --mint: #19B98A; --sky: #38BDF8;
  --ok: #0F8A5F; --ok-soft: #DDF7EC; --warn: #B45309; --warn-soft: #FFF0D6; --danger: #D13A57;
  --shadow: 0 6px 20px rgba(109, 74, 255, 0.10);
  --grad: linear-gradient(135deg, #6D4AFF 0%, #B44BFF 50%, #FF5FA2 100%);
  --font: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14122A; --bg2: #1E1230;
    --card: #1F1D3A; --text: #F1EFFF; --muted: #AAA7C6; --line: #34315A;
    --accent: #9A85FF; --accent2: #FF7DB7; --accent-soft: #2B2658;
    --ok: #4ADE9E; --ok-soft: #12382C; --warn: #F5B158; --warn-soft: #3B2B12; --danger: #FF7A93;
    --shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font: 17px/1.45 var(--font); color: var(--text);
  background: linear-gradient(160deg, var(--bg) 0%, var(--bg2) 100%) fixed; min-height: 100vh;
  padding-bottom: calc(96px + env(safe-area-inset-bottom));
}
h1, h2, h3 { margin: 0; line-height: 1.2; }
h2 { font-size: 1.15rem; }
a { color: var(--accent); }
.muted { color: var(--muted); }
.center { text-align: center; }
hr { border: 0; border-top: 1px solid var(--line); margin: 16px 0; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 8px; }

.wrap { max-width: 1280px; margin: 0 auto; padding: calc(16px + env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 16px max(16px, env(safe-area-inset-left)); }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 16px; align-items: start; }
.col { display: grid; gap: 16px; min-width: 0; }
.grid > * { min-width: 0; }

/* Hero */
.hero { background: var(--grad); color: #fff; border-radius: 28px; padding: 22px 24px; margin-bottom: 16px; box-shadow: 0 10px 28px rgba(109, 74, 255, 0.28); position: relative; overflow: hidden; }
.hero::after { content: ""; position: absolute; right: -30px; top: -40px; width: 160px; height: 160px; border-radius: 50%; background: rgba(255, 255, 255, 0.18); }
.hero::before { content: ""; position: absolute; right: 90px; bottom: -50px; width: 100px; height: 100px; border-radius: 50%; background: rgba(255, 197, 61, 0.5); }
.hero h1 { font-size: 1.9rem; position: relative; z-index: 1; }
.hero p { margin: 4px 0 0; opacity: 0.92; position: relative; z-index: 1; }

/* Karten */
.card { background: var(--card); border: 1px solid var(--line); border-radius: 24px; padding: 18px; box-shadow: var(--shadow); position: relative; }
.card > h2 { margin-bottom: 12px; }
.card-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; }
.card-head h2 { margin: 0; }
.card.start { text-align: center; padding: 32px 20px; }
.card.start .btn { margin-top: 8px; }
.big-emoji { font-size: 3.4rem; }
.sub { font-size: 0.95rem; color: var(--muted); margin: 18px 0 6px; text-transform: uppercase; letter-spacing: 0.05em; }

/* Badges, Balken */
.badge { display: inline-block; padding: 4px 12px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-weight: 700; font-size: 0.9rem; white-space: nowrap; }
.badge.ok { background: var(--ok-soft); color: var(--ok); }
.badge.warn { background: var(--warn-soft); color: var(--warn); }
.bar { height: 14px; background: var(--accent-soft); border-radius: 999px; overflow: hidden; margin-bottom: 14px; }
.bar i { display: block; height: 100%; background: linear-gradient(90deg, #6D4AFF, #FF5FA2, #FFC53D); border-radius: 999px; transition: width 0.35s cubic-bezier(.3,1.4,.5,1); }
.banner { padding: 12px 16px; border-radius: 16px; margin-bottom: 12px; font-weight: 600; }
.banner.ok { background: var(--ok-soft); color: var(--ok); text-align: center; font-size: 1.1rem; animation: pop 0.5s; }
.banner.warn { background: var(--warn-soft); color: var(--warn); }
.hint { background: var(--accent-soft); border-radius: 14px; padding: 12px 14px; margin: 0 0 12px; }
.hint.warn { background: var(--warn-soft); color: var(--warn); }

/* Segment, Pillen */
.seg { display: flex; gap: 6px; background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 5px; margin-bottom: 16px; max-width: 360px; box-shadow: var(--shadow); }
.seg button { flex: 1; min-height: 44px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font: 700 1rem var(--font); cursor: pointer; }
.seg button.on { background: var(--grad); color: #fff; }
.pills { display: flex; gap: 8px; margin-bottom: 14px; overflow-x: auto; padding-bottom: 2px; }
.pill { min-height: 44px; padding: 0 20px; border-radius: 999px; border: 2px solid var(--line); background: var(--card); color: var(--text); font: 700 1rem var(--font); cursor: pointer; }
.pill.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }

/* Listen */
.list { list-style: none; margin: 0; padding: 0; }
.list li { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px dashed var(--line); }
.list li:last-child { border-bottom: 0; }
.list.done { opacity: 0.6; }
.grow { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.dot { display: inline-block; width: 14px; height: 14px; border-radius: 50%; flex: none; margin-right: 6px; }
.list .dot { margin-right: 0; }
.group { margin: 12px 0; }
.group h3 { font-size: 0.95rem; color: var(--muted); display: flex; align-items: center; margin-bottom: 4px; }

/* Grosse Checkboxen */
.chk { display: flex; align-items: center; gap: 14px; min-height: 52px; padding: 6px 4px; cursor: pointer; border-radius: 14px; }
.chk.small { min-height: 44px; }
.chk input { position: absolute; opacity: 0; width: 28px; height: 28px; margin: 0; }
.chk .box { flex: none; width: 30px; height: 30px; border: 3px solid var(--accent); border-radius: 10px; display: grid; place-items: center; background: var(--card); transition: transform 0.15s; }
.chk input:checked + .box { background: var(--mint); border-color: var(--mint); animation: pop 0.35s; }
.chk input:checked + .box::after { content: ""; width: 7px; height: 14px; border: solid #fff; border-width: 0 3.5px 3.5px 0; transform: rotate(45deg) translate(-1px, -1px); }
.chk input:focus-visible + .box { outline: 3px solid var(--accent); outline-offset: 2px; }
.chk input:checked ~ .txt { text-decoration: line-through; color: var(--muted); }
.chk:active .box { transform: scale(0.9); }
@keyframes pop { 0% { transform: scale(0.7); } 60% { transform: scale(1.18); } 100% { transform: scale(1); } }

/* Formulare */
.field { display: grid; gap: 4px; font-size: 0.9rem; font-weight: 700; color: var(--muted); min-width: 0; }
input, select, button { font: inherit; }
input:not([type=checkbox]):not([type=color]), select {
  width: 100%; min-height: 48px; padding: 8px 14px; border-radius: 16px; border: 2px solid var(--line);
  background: var(--card); color: var(--text); font-size: 1rem; font-weight: 500;
}
input:focus, select:focus { border-color: var(--accent); outline: none; }
input[type=color] { width: 48px; height: 48px; padding: 3px; border: 2px solid var(--line); border-radius: 14px; background: var(--card); cursor: pointer; flex: none; }
.mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: 0.1em; }
.row { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; margin: 10px 0; }
.row > * { flex: 1 1 140px; }
.row.between { justify-content: space-between; align-items: center; }
.stack { display: grid; gap: 10px; margin-bottom: 12px; }
.stack .row { margin: 0; }
.inline { display: flex; gap: 8px; margin-top: 12px; }
.inline input { flex: 1; }
.err { color: var(--danger); font-weight: 600; min-height: 0; }
.err:not(:empty) { padding: 6px 0; }
.switch { display: flex; align-items: center; gap: 12px; min-height: 48px; margin: 4px 0; cursor: pointer; }
.switch input { width: 26px; height: 26px; accent-color: var(--accent); flex: none; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 20px; border-radius: 999px; border: 2px solid transparent; font-weight: 700; cursor: pointer; text-decoration: none; transition: transform 0.1s; }
.btn:active { transform: scale(0.96); }
.btn.primary { background: var(--grad); color: #fff; box-shadow: 0 6px 14px rgba(109, 74, 255, 0.3); }
.btn.ghost { background: transparent; border-color: var(--line); color: var(--text); }
.btn.danger { background: var(--danger); color: #fff; }
.btn.block { width: 100%; }
.danger-text { color: var(--danger); }
.btn svg { width: 22px; height: 22px; }
.icon-btn { flex: none; width: 44px; height: 44px; border: 0; background: transparent; color: var(--muted); border-radius: 14px; display: grid; place-items: center; cursor: pointer; }
.icon-btn svg { width: 22px; height: 22px; }
.icon-btn:hover { background: var(--accent-soft); }

/* Chips */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.chip { display: inline-flex; align-items: center; gap: 4px; background: var(--accent-soft); border-radius: 999px; padding: 4px 4px 4px 14px; font-weight: 600; }
.chip button { width: 32px; height: 32px; border: 0; border-radius: 50%; background: transparent; color: var(--muted); font-size: 1.3rem; cursor: pointer; }

/* Stundenplan */
.week { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; align-items: start; }
.day { background: var(--card); border: 1px solid var(--line); border-radius: 22px; padding: 12px; box-shadow: var(--shadow); display: grid; gap: 8px; }
.day.today { border: 2px solid var(--accent); }
.day h2 { font-size: 1rem; color: var(--accent); }
.lesson { display: flex; justify-content: space-between; align-items: center; gap: 4px; background: color-mix(in srgb, var(--c) 14%, var(--card)); box-shadow: inset 6px 0 0 var(--c); border-radius: 14px; padding: 8px 4px 8px 16px; min-width: 0; }
.lesson b { display: block; overflow-wrap: anywhere; }
.lesson .time { display: block; font-size: 0.8rem; color: var(--muted); }
.add { width: 100%; min-height: 44px; border-style: dashed; color: var(--muted); }
@media (max-width: 760px) { .week { grid-template-columns: 1fr; } }

/* Fächer */
.subj { border-left: 8px solid var(--c); background: color-mix(in srgb, var(--c) 8%, var(--card)); border-radius: 16px; padding: 10px 10px 10px 12px; margin-bottom: 12px; }
.subj-head { display: flex; align-items: center; gap: 8px; }
.subj-head .name { font-weight: 700; }
.newsub { margin-top: 18px; }

/* Tabs */
.tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: flex; justify-content: space-around; padding: 8px 8px calc(8px + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--card) 82%, transparent); -webkit-backdrop-filter: blur(18px) saturate(1.6); backdrop-filter: blur(18px) saturate(1.6); border-top: 1px solid var(--line); }
.tab { flex: 1; max-width: 200px; min-height: 56px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; text-decoration: none; color: var(--muted); font-size: 0.78rem; font-weight: 700; border-radius: 18px; }
.tab.on { color: var(--accent); background: var(--accent-soft); }

/* Anmeldung */
.auth { min-height: 100vh; display: grid; place-items: center; padding: 20px; }
.auth-card { width: 100%; max-width: 420px; background: var(--card); border: 1px solid var(--line); border-radius: 32px; padding: 28px 24px; box-shadow: var(--shadow); }
.auth-card h2 { margin: 12px 0; }
.logo { width: 72px; height: 72px; border-radius: 22px; overflow: hidden; margin: 0 auto 10px; box-shadow: 0 8px 20px rgba(109, 74, 255, 0.35); transform: rotate(-6deg); }
.logo img { display: block; width: 100%; height: 100%; }
.brand { text-align: center; font-size: 2rem; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tagline { text-align: center; color: var(--muted); margin: 4px 0 8px; }
.auth-card form .field { margin-bottom: 12px; }
.links { display: flex; flex-wrap: wrap; gap: 6px 18px; justify-content: center; margin: 16px 0 0; }
.links a { min-height: 32px; display: inline-flex; align-items: center; }

/* Sheet */
.overlay { position: fixed; inset: 0; z-index: 50; background: rgba(20, 18, 42, 0.55); display: flex; align-items: flex-end; justify-content: center; animation: fade 0.2s; }
.sheet { width: 100%; max-width: 520px; max-height: 92vh; overflow: auto; background: var(--card); border-radius: 28px 28px 0 0; padding: 20px 20px calc(24px + env(safe-area-inset-bottom)); animation: up 0.25s cubic-bezier(.2,.9,.3,1); }
.sheet-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.code { font: 700 2.2rem ui-monospace, Menlo, monospace; letter-spacing: 0.12em; text-align: center; background: var(--accent-soft); color: var(--accent); border-radius: 18px; padding: 18px; margin: 12px 0; }
@media (min-width: 700px) { .overlay { align-items: center; } .sheet { border-radius: 28px; } }
@keyframes fade { from { opacity: 0; } }
@keyframes up { from { transform: translateY(40px); opacity: 0; } }

/* Toast */
#toast { position: fixed; left: 50%; bottom: calc(100px + env(safe-area-inset-bottom)); transform: translate(-50%, 20px); background: var(--text); color: var(--card); padding: 12px 20px; border-radius: 999px; font-weight: 600; opacity: 0; pointer-events: none; transition: 0.25s; z-index: 60; max-width: 90vw; text-align: center; }
#toast.show { opacity: 1; transform: translate(-50%, 0); }

/* Konfetti */
.confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; border-radius: 24px; z-index: 5; }
.confetti i { position: absolute; top: -12px; left: var(--x); width: 10px; height: 16px; background: var(--c); border-radius: 3px; transform: rotate(var(--r)); animation: fall 2.2s var(--d) ease-in forwards; }
@keyframes fall { to { transform: translateY(520px) rotate(calc(var(--r) + 540deg)); opacity: 0.2; } }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
@media (max-width: 480px) { .hero h1 { font-size: 1.6rem; } .tab span { font-size: 0.7rem; } }

/* Pomodoro */
.pomo { text-align: center; }
.ring-wrap { position: relative; width: min(300px, 80vw); margin: 4px auto 8px; }
.ring { width: 100%; display: block; }
.ring-bg { fill: none; stroke: var(--accent-soft); stroke-width: 18; }
.ring-fg { fill: none; stroke-width: 18; stroke-linecap: round; transition: stroke-dashoffset 0.9s linear; }
.ring-text { position: absolute; inset: 0; display: grid; place-content: center; gap: 2px; }
.time-big { font-size: clamp(2.8rem, 12vw, 3.8rem); font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.pomo.break .time-big { color: var(--mint); }
.dots { display: flex; justify-content: center; gap: 10px; margin: 6px 0 16px; }
.dots i { width: 16px; height: 16px; border-radius: 50%; background: var(--accent-soft); border: 2px solid var(--accent); }
.dots i.on { background: var(--grad); border-color: transparent; }
.pomo-btns { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 16px; }
.btn.big { min-width: 150px; min-height: 56px; font-size: 1.15rem; }
.pomo .field { text-align: left; }
.small { font-size: 0.88rem; margin: 10px 0 0; }
.stat-row { display: flex; gap: 8px; justify-content: space-between; margin-bottom: 12px; }
.stat-row > div { flex: 1; display: grid; text-align: center; background: var(--accent-soft); border-radius: 16px; padding: 10px 4px; }
.stat { font-size: 1.7rem; }
.stat-row .muted { font-size: 0.78rem; }
.week-bars { display: flex; gap: 6px; align-items: flex-end; height: 110px; margin-top: 14px; }
.wb { flex: 1; display: grid; justify-items: center; gap: 4px; height: 100%; grid-template-rows: 1fr auto; }
.bar-col { width: 100%; display: flex; align-items: flex-end; background: var(--accent-soft); border-radius: 10px; overflow: hidden; }
.bar-col i { display: block; width: 100%; background: linear-gradient(180deg, #FF5FA2, #6D4AFF); border-radius: 10px 10px 0 0; min-height: 0; }
.wb small { color: var(--muted); font-weight: 700; }

/* Kalender */
:root { --free: #FF5FA2; --free-soft: #FFE4F0; --note: #38BDF8; --note-soft: #E0F4FE; }
@media (prefers-color-scheme: dark) { :root { --free: #FF7DB7; --free-soft: #3E1E36; --note: #5CCBFA; --note-soft: #173246; } }
.banner.info { background: var(--free-soft); color: var(--free); }
.cal-bar { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.cal-bar .seg { margin: 0; flex: none; min-width: 210px; }
.cal-nav { display: flex; align-items: center; gap: 4px; flex: 1 1 260px; justify-content: center; }
.cal-label { text-align: center; font-size: 1.05rem; min-width: 0; }
.icon-btn.round { background: var(--card); border: 1px solid var(--line); border-radius: 50%; box-shadow: var(--shadow); }
.cal-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.datejump input { min-height: 48px; width: auto; padding: 6px 10px; border-radius: 999px; }
.day-head { display: flex; justify-content: space-between; align-items: baseline; width: 100%; border: 0; background: transparent; padding: 4px 4px 6px; cursor: pointer; color: var(--accent); font: inherit; text-align: left; border-bottom: 2px solid var(--accent-soft); }
.day-head span { font-weight: 800; }
.day-head b { color: var(--muted); font-size: 0.9rem; }
.day.today .day-head { border-bottom-color: var(--accent); }
.day.is-free { background: var(--free-soft); border-color: var(--free); }
.free-card { background: linear-gradient(135deg, #FF5FA2, #FFB347); color: #fff; border-radius: 14px; padding: 12px; display: grid; gap: 2px; overflow-wrap: anywhere; }
.free-card span { font-size: 0.9rem; opacity: 0.95; }
.note-chip { background: var(--note-soft); color: var(--text); border-left: 6px solid var(--note); border-radius: 12px; padding: 6px 10px; font-size: 0.9rem; font-weight: 600; overflow-wrap: anywhere; }
.lesson.muted-lesson { opacity: 0.45; }
.week .day { align-content: start; }
.month { display: grid; grid-template-columns: 34px repeat(7, minmax(0, 1fr)); gap: 6px; }
.mh { text-align: center; font-weight: 800; color: var(--muted); font-size: 0.85rem; padding: 4px 0; }
.mkw { display: grid; place-items: center; color: var(--muted); font-size: 0.8rem; font-weight: 700; }
.mc { min-height: 92px; padding: 6px; border-radius: 16px; border: 1px solid var(--line); background: var(--card); color: var(--text); text-align: left; display: flex; flex-direction: column; gap: 3px; cursor: pointer; font: inherit; min-width: 0; overflow: hidden; box-shadow: var(--shadow); }
.mc.out { opacity: 0.4; }
.mc.wk { background: color-mix(in srgb, var(--accent-soft) 60%, var(--card)); box-shadow: none; }
.mc.today { border: 2px solid var(--accent); }
.mc.today .dn { background: var(--grad); color: #fff; }
.mc.free { background: var(--free-soft); border-color: var(--free); }
.dn { font-weight: 800; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 0.95rem; }
.mt { font-size: 0.72rem; font-weight: 700; border-radius: 8px; padding: 2px 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.mt.free { background: var(--free); color: #fff; }
.mt.note { background: var(--note-soft); border-left: 4px solid var(--note); }
.mdots { display: flex; gap: 3px; flex-wrap: wrap; margin-top: auto; }
.mdots i { width: 9px; height: 9px; border-radius: 50%; }
.evt { display: flex; justify-content: space-between; align-items: center; gap: 8px; border-radius: 16px; padding: 10px 6px 10px 14px; margin-bottom: 10px; overflow-wrap: anywhere; }
.evt.free { background: var(--free-soft); box-shadow: inset 6px 0 0 var(--free); }
.evt.note { background: var(--note-soft); box-shadow: inset 6px 0 0 var(--note); }
.kindpick { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.opt { cursor: pointer; position: relative; }
.opt input { position: absolute; opacity: 0; }
.opt span { display: grid; gap: 2px; padding: 12px 14px; border-radius: 16px; border: 2px solid var(--line); min-height: 64px; align-content: center; }
.opt small { color: var(--muted); }
.opt.free input:checked + span { border-color: var(--free); background: var(--free-soft); }
.opt.note input:checked + span { border-color: var(--note); background: var(--note-soft); }
.opt input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 2px; }
.chip-btn { border: 0; background: var(--accent-soft); color: var(--text); border-radius: 999px; padding: 8px 14px; min-height: 40px; font: 600 0.9rem var(--font); cursor: pointer; }
@media (max-width: 760px) {
  .cal-bar .seg { max-width: none; flex: 1 1 100%; }
  .mc { min-height: 64px; padding: 4px; border-radius: 12px; }
  .mt { display: none; }
  .mc.free::after, .mc:has(.mt.note)::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--free); margin-top: auto; align-self: flex-end; }
  .mc:has(.mt.note):not(.free)::after { background: var(--note); }
  .mdots i { width: 7px; height: 7px; }
  .month { grid-template-columns: 26px repeat(7, minmax(0, 1fr)); gap: 4px; }
}

/* Stundenplan Raster */
.tt-scroll { overflow-x: auto; margin: 0 -4px 16px; padding: 4px; }
.tt { display: grid; grid-template-columns: 46px repeat(5, minmax(0, 1fr)); gap: 6px; min-width: 560px; align-items: start; }
.dh { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 6px 8px; box-shadow: var(--shadow); display: grid; gap: 6px; align-content: start; min-width: 0; }
.dh.today { border: 2px solid var(--accent); }
.dh.is-free { background: var(--free-soft); border-color: var(--free); }
.dh .day-head { padding: 2px 2px 4px; }
.dh .add { min-height: 40px; }
.abbr { display: none; font-style: normal; }
.full { font-style: normal; }
.tt-axis { position: relative; }
.tt-axis span { position: absolute; right: 2px; transform: translateY(-50%); font-size: 0.75rem; font-weight: 700; color: var(--muted); }
.tt-axis span:first-child { transform: none; }
.dc { position: relative; border-radius: 18px; border: 1px solid var(--line); background: var(--card) repeating-linear-gradient(180deg, transparent 0, transparent calc(var(--hr) - 1px), var(--line) calc(var(--hr) - 1px), var(--line) var(--hr)); box-shadow: var(--shadow); overflow: hidden; min-width: 0; }
.dc.today { border: 2px solid var(--accent); }
.les { position: absolute; display: flex; flex-direction: column; gap: 1px; padding: 6px 8px; border: 0; border-left: 6px solid var(--c); border-radius: 12px; text-align: left; cursor: pointer; font: inherit; color: var(--text); overflow: hidden; min-width: 0;
  background: color-mix(in srgb, var(--c) 24%, var(--card)); box-shadow: 0 2px 6px color-mix(in srgb, var(--c) 30%, transparent); }
.les b { font-size: 1rem; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; }
.les span { font-size: 0.82rem; font-weight: 700; color: color-mix(in srgb, var(--c) 70%, var(--text)); }
.les small { font-size: 0.72rem; color: var(--muted); margin-top: auto; }
.les.tight { padding: 2px 6px; flex-direction: row; align-items: center; gap: 6px; flex-wrap: nowrap; }
.les.tight b { font-size: 0.9rem; white-space: nowrap; }
.les:hover { filter: brightness(0.97); }
.dc.is-free .les { opacity: 0.3; pointer-events: none; }
.free-ov { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 4px; padding: 20px 8px; text-align: center; overflow-wrap: anywhere; pointer-events: none;
  background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--free) 22%, transparent) 0 14px, color-mix(in srgb, var(--free) 10%, transparent) 14px 28px); }
.free-ov b { background: var(--free); color: #fff; padding: 4px 14px; border-radius: 999px; }
.free-ov span { font-weight: 700; }
.legend { margin-bottom: 16px; }
.legs { display: flex; flex-wrap: wrap; gap: 8px; }
.leg { background: color-mix(in srgb, var(--c, var(--accent)) 20%, var(--card)); border-left: 6px solid var(--c, var(--accent)); border-radius: 12px; padding: 6px 12px; font-size: 0.92rem; }
.leg.t { --c: var(--sky); }
.subj-head .short { width: 84px; flex: none; text-align: center; font-weight: 700; }
@media (max-width: 760px) {
  .tt { grid-template-columns: 38px repeat(5, minmax(96px, 1fr)); min-width: 600px; }
  .full { display: none; } .abbr { display: inline; }
  .tt-scroll { margin: 0 -16px 16px; padding: 4px 16px; }
}
.subj-head input.name { width: auto; flex: 1 1 0; min-width: 0; }
.subj-head input.short { width: 76px; flex: none; padding-left: 6px; padding-right: 6px; }

.t-short { display: none; font-style: normal; }
.t-full { font-style: normal; }
@media (max-width: 760px) {
  .tt { grid-template-columns: 30px repeat(5, minmax(0, 1fr)); min-width: 0; gap: 3px; }
  .tt-scroll { margin: 0 -10px 16px; padding: 4px 10px; }
  .t-full { display: none; } .t-short { display: inline; }
  .dh { padding: 4px 2px; border-radius: 12px; }
  .dh .day-head { flex-direction: column; align-items: center; gap: 0; padding: 2px 0; border-bottom-width: 0; }
  .dh .day-head b { font-size: 0.68rem; }
  .dh .add { padding: 0; min-height: 36px; } .dh .add span { display: none; }
  .note-chip { font-size: 0.65rem; padding: 3px 4px; border-left-width: 3px; }
  .tt-axis span { font-size: 0.62rem; }
  .dc { border-radius: 12px; }
  .les { padding: 3px 4px; border-left-width: 4px; border-radius: 8px; }
  .les b { font-size: 0.8rem; }
  .les span { font-size: 0.64rem; overflow-wrap: anywhere; line-height: 1.1; }
  .les small { display: none; }
  .free-ov { padding: 10px 2px; font-size: 0.7rem; } .free-ov b { padding: 2px 6px; }
}
@media (max-width: 760px) { .les.split span { display: none; } .les.split b { font-size: 0.7rem; } }

/* Layout: Platz auf Laptop, iPad und iPhone gut nutzen */
@media (min-width: 1700px) { .wrap { max-width: 1520px; } }
.masonry { columns: 340px; column-gap: 16px; margin-bottom: 16px; }
.masonry > .card { break-inside: avoid; margin-bottom: 16px; }
.subj-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 12px; align-items: start; }
.subj-grid .subj { margin-bottom: 0; min-width: 0; }
.subj-card .newsub { max-width: 560px; }
.tabs { padding-left: max(8px, calc((100vw - 1280px) / 2)); padding-right: max(8px, calc((100vw - 1280px) / 2)); }
@media (max-width: 380px) {
  body { font-size: 16px; }
  .wrap { padding-left: 12px; padding-right: 12px; }
  .hero { padding: 16px 18px; border-radius: 22px; }
  .hero h1 { font-size: 1.45rem; }
  .card { padding: 14px; border-radius: 20px; }
  .pomo-btns .btn { padding: 0 14px; }
}
.subj-card > .btn { margin-top: 14px; }

/* Topbar */
.topbar { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; min-height: 48px; }
.topbar .pills { flex: 1; margin: 0; min-width: 0; }
.topbar .icon-btn { flex: none; color: var(--text); }
.topbar .icon-btn.on { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }

/* Fotos */
.list li:has(.photos) { flex-wrap: wrap; }
.photos { flex: 1 0 100%; display: flex; gap: 8px; flex-wrap: wrap; padding: 2px 0 4px 44px; }
.thumb { width: 56px; height: 56px; border-radius: 12px; border: 2px solid var(--line); background: var(--card); padding: 0; overflow: hidden; display: grid; place-items: center; cursor: pointer; color: var(--muted); }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb.add { border-style: dashed; }
.thumb svg { width: 24px; height: 24px; }
.photo-big { width: 100%; max-height: 70vh; object-fit: contain; border-radius: 16px; background: var(--accent-soft); display: block; margin-bottom: 12px; }

/* Noten */
.bigavg { font-size: 3.6rem; font-weight: 800; text-align: center; line-height: 1.1; font-variant-numeric: tabular-nums; }
.gavg { font-size: 1.3rem; font-weight: 800; }
.gbig { font-size: 1.4rem; width: 52px; text-align: center; flex: none; font-variant-numeric: tabular-nums; }
.gcard .bar i { background: var(--c); }
.ok-text { color: var(--ok); font-weight: 700; }
.warn-text { color: var(--warn); font-weight: 600; }
.bar.sm { height: 9px; margin: 4px 0 8px; }

/* Abzeichen und Lernplan */
.badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
.medal { display: grid; gap: 2px; justify-items: center; text-align: center; background: var(--accent-soft); border-radius: 18px; padding: 12px 8px; opacity: 0.6; }
.medal.got { opacity: 1; background: linear-gradient(135deg, #FFF3C4, #FFD6EC); color: #2A2140; box-shadow: 0 4px 12px rgba(255, 95, 162, 0.25); }
.medal .mi { font-size: 2rem; filter: grayscale(1); }
.medal.got .mi { filter: none; animation: pop 0.5s; }
.medal small { font-size: 0.72rem; color: var(--muted); }
.medal.got small { color: #5B4F78; }
.medal em { font-style: normal; font-size: 0.75rem; font-weight: 700; }
.medal .bar { width: 100%; }
.plan-exam { border-left: 6px solid var(--c); background: color-mix(in srgb, var(--c) 8%, var(--card)); border-radius: 14px; padding: 8px 10px; margin-bottom: 10px; }
.plan-exam h3 { font-size: 1rem; display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.plan-exam li.now { font-weight: 700; }
.small-btn { min-height: 40px; padding: 0 16px; }

/* Übersicht */
.ov-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: 16px; align-items: start; }
.ov-line { display: flex; justify-content: space-between; gap: 8px; }
.ov-foot { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

/* Plan einlesen */
.imp { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 10px 0; }
.imp h3 { font-size: 0.9rem; color: var(--accent); }
.imp-l { font-size: 0.85rem; padding: 3px 0; border-bottom: 1px dashed var(--line); }
.btn.block svg { width: 22px; height: 22px; }

/* Noten: festes Layout, nichts verschiebt sich beim Bedienen des Formulars */
html { scrollbar-gutter: stable; }
.split { display: grid; grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); gap: 16px; align-items: start; }
.split-side { display: grid; gap: 16px; min-width: 0; }
.split-main { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 16px; align-items: start; min-width: 0; }
@media (min-width: 901px) and (min-height: 800px) { .split-side { position: sticky; top: 12px; } }
@media (max-width: 900px) { .split { grid-template-columns: minmax(0, 1fr); } }
.field input, .field select { min-width: 0; max-width: 100%; }
input[type=date], input[type=time] { min-width: 0; }

/* Info Symbol mit Hinweis (Hover oder Klick) */
.info { position: relative; display: inline-flex; }
.info-btn { width: 26px; height: 26px; padding: 0; border-radius: 50%; border: 2px solid var(--accent); background: var(--card); color: var(--accent); font: 800 0.8rem/1 var(--font); font-style: italic; cursor: help; display: grid; place-items: center; }
.info-btn:hover, .info.open .info-btn { background: var(--accent); color: #fff; }
.info .tip { display: none; position: absolute; right: -6px; top: calc(100% + 10px); width: min(270px, 72vw); background: var(--text); color: var(--card); border-radius: 14px; padding: 10px 12px; font-size: 0.86rem; font-weight: 500; line-height: 1.4; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28); z-index: 40; text-align: left; }
.info .tip::before { content: ""; position: absolute; right: 12px; top: -6px; border: 6px solid transparent; border-top: 0; border-bottom-color: var(--text); }
.info.open .tip { display: block; }
@media (hover: hover) { .info:hover .tip { display: block; } }
.gright { display: inline-flex; align-items: center; gap: 8px; }

/* Noten: kompakter */
.compact { grid-template-columns: minmax(260px, 320px) minmax(0, 1fr); gap: 12px; }
.compact .split-side, .compact .split-main { gap: 12px; }
.compact .split-main { grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); }
.compact .card { padding: 12px 14px; border-radius: 18px; }
.compact .card > h2, .compact .card-head h2 { font-size: 1rem; }
.compact .card-head { margin-bottom: 6px; }
.compact .bar { height: 8px; margin-bottom: 6px; }
.compact .list li { padding: 5px 0; gap: 8px; }
.compact .gbig { font-size: 1.1rem; width: 40px; }
.compact .gavg { font-size: 1.05rem; }
.compact .bigavg { font-size: 2.5rem; }
.compact .field { font-size: 0.82rem; }
.compact input:not([type=checkbox]):not([type=color]), .compact select { min-height: 42px; padding: 4px 12px; border-radius: 14px; }
.compact .stack { gap: 8px; }
.compact .row { margin: 6px 0; }
.compact .btn { min-height: 44px; }
.compact .icon-btn { width: 36px; height: 36px; }
.compact .muted { font-size: 0.85rem; }
.compact .split-main { grid-template-columns: repeat(auto-fill, minmax(min(270px, 100%), 1fr)); }
.gavg { white-space: nowrap; }
.compact .card-head { align-items: flex-start; gap: 8px; }
.compact .card-head h2 { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 900px) { .compact { grid-template-columns: minmax(0, 1fr); } }