/* Focusgraph – Aussehen
   Idee: ein Messheft. Die Seite ist kariertes Papier, die Inhalte liegen als Blätter darauf,
   Königsblau ist die Tinte, und der gelbe Textmarker zeigt immer, was gerade ausgewählt ist.
   Es werden nur Systemschriften verwendet (keine externen Schriftdienste, gut für den Datenschutz). */

:root{
  --paper:#f3f6fb;            /* Seitenhintergrund */
  --grid:rgba(42,69,196,.075);/* Karolinien */
  --sheet:#ffffff;            /* Blätter (Bereiche) */
  --ink:#18223f;              /* Text */
  --muted:#5f6987;            /* Nebentext */
  --line:#d8deeb;             /* Linien und Ränder */
  --field:#f7f9fd;            /* Eingabefelder */
  --blue:#2a45c4;             /* Königsblau: Hauptfarbe */
  --blue-ink:#ffffff;         /* Text auf Königsblau */
  --marker:#ffdc3d;           /* Textmarker */
  --marker-soft:rgba(255,220,61,.55);
  --danger:#c23b3b;
  --good:#1d7a4f;
  --radius-sheet:10px; --radius-field:7px;
  --font-display:"SF Pro Rounded",ui-rounded,"Arial Rounded MT Bold","Nunito",system-ui,sans-serif;
  --font-body:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  /* Bezeichnungen für vorhandene Regeln */
  --bg:var(--paper); --card:var(--sheet); --text:var(--ink); --accent:var(--blue); --soft:#eaeefa;
}
@media (prefers-color-scheme: dark){
  :root{
    --paper:#121828; --grid:rgba(255,255,255,.035); --sheet:#1a2134; --ink:#e7eaf5; --muted:#9aa3c0;
    --line:#2c3550; --field:#151b2c; --blue:#8ea2ff; --blue-ink:#0f1530; --marker:#e9c93b;
    --marker-soft:rgba(233,201,59,.32); --danger:#ff8a8a; --good:#5fd39a; --soft:#232b42;
  }
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; color:var(--ink); font:15px/1.5 var(--font-body);
  background-color:var(--paper);
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size:22px 22px;
  min-height:100vh;
}
h1,h2,.price,.period,.total b,.stats b,svg .big{font-family:var(--font-display)}
h1{font-size:20px;margin:0;font-weight:800;letter-spacing:-.01em}
h2{font-size:16px;margin:0 0 14px;font-weight:700}
p{margin:0 0 10px}
a{color:var(--blue);text-underline-offset:2px}
[hidden]{display:none!important}

/* Textmarker: die eine auffällige Geste der Oberfläche */
.marked{
  background:linear-gradient(transparent 52%, var(--marker-soft) 52%, var(--marker-soft) 92%, transparent 92%);
}

/* ---------- Kopfzeile ---------- */
header{
  display:flex;flex-wrap:wrap;gap:10px 26px;align-items:center;
  padding:12px 28px;position:sticky;top:0;z-index:5;
  background:color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:center;gap:9px;color:var(--ink)}
.brand .logo{width:24px;height:24px;fill:var(--blue);flex:none}
nav{display:flex;gap:2px}
.tab{
  border:0;background:transparent;color:var(--muted);padding:8px 12px;
  font:inherit;font-weight:600;cursor:pointer;border-radius:6px;position:relative;
}
.tab:hover{color:var(--ink)}
.tab.active{color:var(--ink);background:linear-gradient(transparent 55%, var(--marker-soft) 55%, var(--marker-soft) 88%, transparent 88%)}
.tools{margin-left:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.sync{color:var(--muted);font-size:12.5px;white-space:nowrap;padding-right:4px}
.sync.bad{color:var(--danger);font-weight:600}
#accountBtn{font-weight:600}
.badge{background:var(--danger);color:#fff;border-radius:9px;font-size:11px;padding:1px 6px;margin-left:5px;font-weight:700}

/* Hinweisleiste oben */
.proto{
  text-align:center;font-size:13px;padding:6px 16px;color:var(--ink);
  background:var(--marker-soft);border-bottom:1px solid color-mix(in srgb, var(--marker) 60%, var(--line));
}

/* ---------- Seitenaufbau ---------- */
main{max-width:1260px;margin:0 auto;padding:24px 28px 56px}
.layout{display:grid;grid-template-columns:320px minmax(0,1fr);gap:20px;align-items:start}
.col{display:grid;gap:20px;min-width:0}
.two{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:20px}
@media (max-width:1000px){.layout,.two{grid-template-columns:minmax(0,1fr)}}
@media (max-width:640px){
  header{padding:10px 16px;gap:8px 14px}
  main{padding:16px 16px 40px}
  .tools{width:100%;margin-left:0}
  .tools .btn{flex:1;padding:7px 8px}
  .sync{order:5;width:100%;text-align:right}
  .total{margin-left:0}
}

/* Blätter: eigene Bereiche liegen als Papier auf dem Karo */
.card{
  background:var(--sheet);border:1px solid var(--line);border-radius:var(--radius-sheet);
  padding:18px;min-width:0;
  box-shadow:0 1px 0 color-mix(in srgb, var(--blue) 8%, transparent);
}
/* Werkzeugleisten sind kein Blatt, sondern liegen direkt auf dem Heft */
.card.toolbar{background:transparent;border:0;box-shadow:none;padding:2px 0}

/* ---------- Formulare ---------- */
label{display:block;font-size:13px;color:var(--muted);margin:12px 0 5px;font-weight:500}
label:first-of-type{margin-top:0}
input,select{
  width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:var(--radius-field);
  background:var(--field);color:var(--ink);font:inherit;
}
input::placeholder{color:color-mix(in srgb, var(--muted) 75%, transparent)}
input[type=color]{padding:3px;height:38px;width:46px;flex:none;cursor:pointer}
input[type=checkbox]{width:18px;height:18px;margin:0 10px 0 0;accent-color:var(--blue);flex:none}
input:focus,select:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px color-mix(in srgb, var(--blue) 18%, transparent)}
button:focus-visible,a:focus-visible,.tab:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
label.check{display:flex;align-items:center;color:var(--ink);font-size:14.5px;margin:10px 0;cursor:pointer;flex-wrap:wrap}
label.check .hint{margin:0 0 0 6px}

button{font:inherit;cursor:pointer}
button:disabled{opacity:.55;cursor:default}
.btn{
  border:1px solid var(--line);background:var(--sheet);color:var(--ink);
  padding:8px 13px;border-radius:var(--radius-field);font-weight:500;white-space:nowrap;
}
.btn:hover{border-color:color-mix(in srgb, var(--blue) 45%, var(--line))}
.primary{
  background:var(--blue);color:var(--blue-ink);border-color:var(--blue);font-weight:700;
  width:100%;margin-top:16px;padding:10px 14px;
}
.primary:hover{background:color-mix(in srgb, var(--blue) 88%, #000);border-color:transparent}
.primary.inline{width:auto;margin:0;padding:6px 12px}
.cancel.btn{width:100%;margin-top:8px}
.btn.danger{color:var(--danger);border-color:color-mix(in srgb, var(--danger) 40%, var(--line))}
.btn.danger:hover{background:color-mix(in srgb, var(--danger) 8%, transparent)}
.btn.danger.solid{background:var(--danger);color:#fff;border-color:var(--danger)}
.row{display:flex;gap:8px;align-items:center}
.three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:12px}
.hint{color:var(--muted);font-size:12.5px;margin:8px 0 0}
.err{color:var(--danger);font-size:13px;margin:10px 0 0}
.ok{color:var(--good);font-size:13px;margin:10px 0 0}

/* ---------- Werkzeugleiste Lernzeit ---------- */
.toolbar{display:flex;flex-wrap:wrap;gap:12px 18px;align-items:center}
.seg{display:flex;gap:2px;background:var(--sheet);border:1px solid var(--line);padding:3px;border-radius:9px}
.seg button{border:0;background:transparent;color:var(--muted);padding:6px 12px;border-radius:6px;font-weight:600}
.seg button:hover{color:var(--ink)}
.seg button.active{color:var(--ink);background:var(--marker)}
@media (prefers-color-scheme: dark){.seg button.active{color:#1a1600}}
.period{font-weight:700;min-width:200px;text-align:center;font-size:15px}
.total{margin-left:auto;color:var(--muted);display:flex;align-items:baseline;gap:8px}
.total b{color:var(--ink);font-size:30px;font-weight:800;line-height:1;
  background:linear-gradient(transparent 58%, var(--marker-soft) 58%, var(--marker-soft) 92%, transparent 92%);padding:0 2px}
.toolbar > .row > label{white-space:nowrap}
.toolbar select{background:var(--sheet)}

/* ---------- Listen ---------- */
.dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:9px;flex:none}
ul.list{list-style:none;margin:0 0 14px;padding:0}
ul.list li{display:flex;align-items:center;padding:6px 0;border-bottom:1px dashed var(--line)}
ul.list li:last-child{border-bottom:0}
ul.list li span.name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
ul.list li.sub{padding-left:40px;font-size:14px;color:var(--muted)}
ul.list li.sub .name::before{content:"↳ "}
ul.list small{color:var(--muted)}
.tog{width:22px;flex:none;display:inline-block;text-align:left;font-size:13px;padding:2px 0;color:var(--muted)}
.x{border:0;background:transparent;color:var(--muted);font-size:16px;line-height:1;padding:4px 6px;border-radius:6px}
.x:hover{color:var(--blue);background:var(--soft)}
.x[data-del]:hover{color:var(--danger)}

/* ---------- Diagramme ---------- */
.legend{display:grid;gap:7px;margin-top:12px;font-size:14px}
.legend div{display:flex;align-items:center}
.legend .v{margin-left:auto;color:var(--muted);font-variant-numeric:tabular-nums;padding-left:10px;white-space:nowrap}
.legend.inline{display:flex;flex-wrap:wrap;gap:6px 18px}
svg{display:block;width:100%;height:auto}
svg text{fill:var(--muted);font-size:11px}
svg .grid{stroke:var(--line);stroke-width:1;stroke-dasharray:2 3}
svg .big{fill:var(--ink);font-size:22px;font-weight:800}
.empty{color:var(--muted);text-align:center;padding:40px 12px}

/* ---------- Tabellen ---------- */
table{width:100%;border-collapse:collapse;font-size:14px}
th{text-align:left;color:var(--muted);font-weight:600;font-size:12.5px;padding:7px 8px;border-bottom:1px solid var(--line)}
td{padding:8px;border-bottom:1px dashed var(--line);vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover td{background:color-mix(in srgb, var(--blue) 4%, transparent)}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
td:last-child{white-space:nowrap}
.scroll{overflow-x:auto}
tr.problem td{background:color-mix(in srgb, var(--danger) 8%, transparent)}

/* ---------- Kennzahlen Klausuren ---------- */
.stats{display:flex;gap:28px;margin-left:auto}
.stats div{color:var(--muted);font-size:13px}
.stats b{display:block;color:var(--ink);font-size:24px;font-weight:800;line-height:1.1}

.pill{display:inline-block;font-size:12.5px;font-weight:600;padding:2px 10px;border-radius:999px;background:var(--soft);color:var(--muted);white-space:nowrap}
.pill.bad{background:var(--danger);color:#fff}
.pill.ok{background:color-mix(in srgb, var(--good) 14%, transparent);color:var(--good)}
.pill.wait{background:var(--marker-soft);color:var(--ink)}
.versions{margin:0;padding-left:20px}.versions li{margin:5px 0}

/* ---------- Anmelde- und Hinweisseiten ---------- */
.gate{min-height:calc(100vh - 34px);display:grid;place-items:center;padding:24px 16px}
.gate .card{width:100%;max-width:400px;padding:30px 28px}
.gate .brand{font-size:24px}
.gate .brand .logo{width:28px;height:28px}
.gate h1 + .hint{font-size:14px;margin-top:6px}
.gate .seg{margin:20px 0 16px}.gate .seg button{flex:1}
.price{font-size:38px;font-weight:800;margin:4px 0 10px}
.price span{font-size:15px;color:var(--muted);font-weight:500;font-family:var(--font-body)}
.feat{padding-left:20px;margin:0 0 14px;color:var(--muted)}

dialog{color:var(--ink);width:calc(100% - 32px);max-width:440px;padding:24px}
dialog::backdrop{background:rgba(16,22,48,.45)}

@media (prefers-reduced-motion: reduce){*{transition:none!important;animation:none!important}}

/* E-Mail-Links auf der Anmeldeseite */
.links{display:flex;flex-wrap:wrap;gap:6px 16px}
a.disabled{color:var(--muted);pointer-events:none;text-decoration:none}
td.actions .btn{padding:6px 10px}