/* Schichtwerk — Podologie
   Helles, ruhiges Design für professionelles Lernen. */

:root {
  color-scheme: light;
  --bg:        #f4f7f8;
  --surface:   #ffffff;
  --surface-2: #f7f9fa;
  --surface-3: #eaf0f2;
  --line:      #dfe7ea;
  --line-soft: #edf1f3;
  --text:      #17212b;
  --dim:       #60707d;
  --dimmer:    #8a98a3;

  --amber:     #087f7a;
  --amber-ink: #ffffff;
  --amber-soft:#e7f4f3;
  --jade:      #3c9a67;
  --jade-soft: #edf8f1;
  --coral:     #c95050;
  --coral-soft:#fceded;
  --violet:    #7567a8;

  --r-sm: 8px;
  --r:    12px;
  --r-lg: 18px;

  --sp-1: .25rem; --sp-2: .5rem;  --sp-3: .75rem; --sp-4: 1rem;
  --sp-5: 1.5rem; --sp-6: 2rem;   --sp-7: 3rem;   --sp-8: 4rem;

  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --shadow: 0 12px 34px -24px rgb(23 33 43 / .28), 0 2px 8px rgb(23 33 43 / .04);
  --ease: cubic-bezier(.2, .7, .3, 1);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 1rem/1.6 var(--sans);
  font-feature-settings: "kern" 1;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { line-height: 1.2; margin: 0; letter-spacing: -.02em; }
p { margin: 0; }

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--amber); color: var(--amber-ink);
  padding: var(--sp-3) var(--sp-4); border-radius: 0 0 var(--r) 0;
  font-weight: 600; text-decoration: none;
}
.skip:focus { left: 0; }

/* ---------- Kopfzeile ---------- */

.topbar {
  display: flex; align-items: center; gap: var(--sp-5);
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  flex-wrap: wrap;
}

.brand { display: flex; align-items: center; gap: var(--sp-3); margin-right: auto; }

/* Markenzeichen: geschichteter Querschnitt, das Motiv der ganzen App */
.brand-mark {
  width: 26px; height: 26px; border-radius: var(--r-sm); flex: none;
  background:
    linear-gradient(var(--amber) 0 22%,
                    color-mix(in srgb, var(--amber) 55%, transparent) 22% 44%,
                    color-mix(in srgb, var(--amber) 30%, transparent) 44% 68%,
                    var(--surface-3) 68% 100%);
}

.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-text strong { font-size: 1.0625rem; letter-spacing: -.02em; }
.brand-text em {
  font-style: normal; font-size: .6875rem; color: var(--dim);
  text-transform: uppercase; letter-spacing: .14em;
}

.vitals { display: flex; gap: var(--sp-2); flex-wrap: wrap; }

.vital {
  display: flex; align-items: baseline; gap: .35rem;
  padding: var(--sp-2) var(--sp-3);
  background: var(--surface-2); border: 1px solid var(--line-soft);
  border-radius: var(--r);
}
.vital--due { border-color: color-mix(in srgb, var(--amber) 45%, var(--line)); }

.vital-num { font: 600 1rem/1 var(--mono); font-variant-numeric: tabular-nums; }
.vital--due .vital-num { color: var(--amber); }
.vital-lbl { font-size: .6875rem; color: var(--dim); }

.vital-icon--heart {
  width: 11px; height: 11px; background: var(--coral); flex: none;
  clip-path: path("M5.5 10.5 1 6a2.8 2.8 0 0 1 4.5-3.2A2.8 2.8 0 0 1 10 6z");
}


/* ---------- Reiter ---------- */

.tabs {
  display: flex; gap: var(--sp-1); overflow-x: auto;
  padding: 0 var(--sp-5); border-bottom: 1px solid var(--line);
  background: var(--surface);
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }

.tab {
  padding: var(--sp-3) var(--sp-4);
  font-size: .9375rem; font-weight: 500; color: var(--dim);
  border-bottom: 2px solid transparent; white-space: nowrap;
  transition: color .15s var(--ease);
}
.tab:hover { color: var(--text); }
.tab.is-active { color: var(--amber); border-bottom-color: var(--amber); }

/* ---------- Ansichten ---------- */

main { max-width: 860px; margin: 0 auto; padding: var(--sp-6) var(--sp-5) var(--sp-8); }

.view { display: none; }
.view.is-active { display: block; animation: rise .3s var(--ease) both; }

@keyframes rise { from { opacity: 0; transform: translateY(6px); } }

.view-head { margin-bottom: var(--sp-6); }
.view-head h1 { font-size: clamp(1.6rem, 4vw, 2.1rem); font-weight: 650; }
.lede { margin-top: var(--sp-3); color: var(--dim); max-width: 58ch; }

/* ---------- Signature: das Schichtprofil ---------- */

.strata { list-style: none; margin: 0; padding: 0 0 0 var(--sp-6); position: relative; }

/* Der Bohrkern: eine durchgehende Achse, die nach unten in die Tiefe verblasst */
.strata::before {
  content: ""; position: absolute; left: 11px; top: 8px; bottom: 8px; width: 2px;
  background: linear-gradient(var(--amber), color-mix(in srgb, var(--amber) 25%, transparent) 55%, var(--line));
}

.stratum { position: relative; margin-bottom: var(--sp-3); }

/* Andockpunkt an der Achse */
.stratum::before {
  content: ""; position: absolute; left: calc(-1 * var(--sp-6) + 6px); top: 22px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--bg); border: 2px solid var(--line); z-index: 1;
}
.stratum.is-open::before   { border-color: var(--amber); background: var(--amber); }
.stratum.is-done::before   { border-color: var(--jade);  background: var(--jade); }

.layer {
  width: 100%; text-align: left; display: grid;
  grid-template-columns: 1fr auto; align-items: center; gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-4);
  background: var(--surface); border: 1px solid var(--line);
  border-left: 3px solid var(--line);
  border-radius: var(--r);
  transition: transform .18s var(--ease), border-color .18s var(--ease);
}
.stratum.is-open .layer  { border-left-color: var(--amber); }
.stratum.is-done .layer  { border-left-color: var(--jade); }
.stratum.is-locked .layer { opacity: .5; cursor: not-allowed; }

.stratum:not(.is-locked) .layer:hover { transform: translateX(3px); border-color: var(--dimmer); }

.layer-main { min-width: 0; display: block; }

.layer-meta {
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: .6875rem; color: var(--dim);
  text-transform: uppercase; letter-spacing: .1em; margin-bottom: .3rem;
}

.fg-chip {
  padding: .1rem .4rem; border-radius: 3px; font: 600 .625rem/1.5 var(--mono);
  letter-spacing: .04em; background: var(--surface-3); color: var(--dim);
}
.fg-chip[data-fg="FG1"] { background: var(--surface-3); color: var(--violet); }
.fg-chip[data-fg="FG2"] { background: var(--amber-soft); color: var(--amber); }
.fg-chip[data-fg="FG3"] { background: var(--jade-soft); color: var(--jade); }

.layer-title { display: block; font-size: 1.0625rem; font-weight: 600; letter-spacing: -.01em; }
.layer-sub { display: block; font-size: .8125rem; color: var(--dim); margin-top: .15rem; }

.layer-side { display: flex; flex-direction: column; align-items: flex-end; gap: .4rem; flex: none; }

.ring { --p: 0; width: 40px; height: 40px; position: relative; }
.ring::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(var(--jade) calc(var(--p) * 1%), var(--surface-3) 0);
  -webkit-mask: radial-gradient(circle, transparent 58%, #000 59%);
          mask: radial-gradient(circle, transparent 58%, #000 59%);
}
.ring span {
  position: absolute; inset: 0; display: grid; place-items: center;
  font: 600 .6875rem/1 var(--mono); font-variant-numeric: tabular-nums;
}

.lock { font-size: .75rem; color: var(--dimmer); }

/* ---------- Karten ---------- */

.card-stage { max-width: 620px; margin: 0 auto; }

.flashcard {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow);
  padding: var(--sp-6); min-height: 260px;
  display: flex; flex-direction: column; justify-content: center;
  text-align: center; position: relative;
}

.card-tag {
  position: absolute; top: var(--sp-4); left: var(--sp-4);
  display: flex; gap: var(--sp-2); align-items: center;
  font-size: .6875rem; color: var(--dim);
  text-transform: uppercase; letter-spacing: .1em;
}

.card-front { font-size: 1.25rem; font-weight: 550; line-height: 1.45; }

.card-back {
  margin-top: var(--sp-5); padding-top: var(--sp-5);
  border-top: 1px dashed var(--line);
  font-size: 1.0625rem; line-height: 1.55;
}
.card-why {
  margin-top: var(--sp-4); padding: var(--sp-3) var(--sp-4);
  background: var(--amber-soft); border-radius: var(--r);
  font-size: .875rem; color: var(--text); text-align: left;
}
.card-why b { color: var(--amber); }

.card-hint { margin-top: var(--sp-5); font-size: .8125rem; color: var(--dimmer); }

.grades { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-2); margin-top: var(--sp-4); }

.grade {
  padding: var(--sp-3) var(--sp-2); border-radius: var(--r);
  border: 1px solid var(--line); background: var(--surface);
  display: flex; flex-direction: column; gap: .15rem; align-items: center;
  transition: border-color .15s var(--ease), background .15s var(--ease);
}
.grade:hover { border-color: var(--dimmer); background: var(--surface-2); }
.grade b { font-size: .875rem; font-weight: 600; }
.grade span { font-size: .6875rem; color: var(--dim); }
.grade[data-g="0"] b { color: var(--coral); }
.grade[data-g="3"] b { color: var(--jade); }

.kbd {
  font: 500 .625rem/1.4 var(--mono); padding: .05rem .25rem;
  border: 1px solid var(--line); border-radius: 3px; color: var(--dim);
}

/* ---------- Prüfung ---------- */

.exam-grid { display: grid; gap: var(--sp-3); }

.exam-card {
  display: grid; grid-template-columns: auto 1fr auto; gap: var(--sp-4);
  align-items: center; text-align: left;
  padding: var(--sp-4); background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r);
  transition: border-color .15s var(--ease);
}
.exam-card:hover { border-color: var(--dimmer); }
.exam-card[disabled] { opacity: .45; cursor: not-allowed; }

.exam-time {
  font: 600 1.375rem/1 var(--mono); font-variant-numeric: tabular-nums;
  color: var(--amber);
}
.exam-time small { display: block; font: 400 .625rem/1.4 var(--sans); color: var(--dim); }

.timer-bar {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-5);
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r);
}
.timer-clock {
  font: 600 1.5rem/1 var(--mono); font-variant-numeric: tabular-nums;
}
.timer-clock.is-low { color: var(--coral); }

.q-block { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: var(--sp-5); margin-bottom: var(--sp-4); }
.q-text { font-size: 1.0625rem; font-weight: 550; line-height: 1.5; margin-bottom: var(--sp-4); }

.opt {
  display: flex; gap: var(--sp-3); align-items: flex-start; width: 100%; text-align: left;
  padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-2);
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r);
  transition: border-color .15s var(--ease);
}
.opt:hover { border-color: var(--dimmer); }
.opt.is-picked { border-color: var(--amber); background: var(--amber-soft); }
.opt.is-right  { border-color: var(--jade);  background: var(--jade-soft); }
.opt.is-wrong  { border-color: var(--coral); background: var(--coral-soft); }
.opt-key { font: 600 .8125rem/1.6 var(--mono); color: var(--dim); flex: none; }

.feedback {
  margin-top: var(--sp-4); padding: var(--sp-4);
  border-left: 3px solid var(--amber); background: var(--surface-2);
  border-radius: 0 var(--r) var(--r) 0; font-size: .9375rem; line-height: 1.55;
}

/* ---------- Stand ---------- */

.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--sp-3); margin-bottom: var(--sp-6); }

.stat {
  padding: var(--sp-4); background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r);
}
.stat-num { font: 600 1.75rem/1 var(--mono); font-variant-numeric: tabular-nums; }
.stat-lbl { font-size: .8125rem; color: var(--dim); margin-top: .3rem; }

.bar { height: 6px; background: var(--surface-3); border-radius: 3px; overflow: hidden; margin-top: var(--sp-3); }
.bar i { display: block; height: 100%; background: var(--jade); border-radius: 3px; }

/* ---------- Allgemeines ---------- */

.btn {
  padding: var(--sp-3) var(--sp-5); border-radius: var(--r);
  background: var(--amber); color: var(--amber-ink); font-weight: 600;
  transition: filter .15s var(--ease);
}
.btn:hover { filter: brightness(1.08); }
.btn--ghost { background: none; color: var(--text); border: 1px solid var(--line); }
.btn--ghost:hover { border-color: var(--dimmer); filter: none; }

.row { display: flex; gap: var(--sp-3); flex-wrap: wrap; }

.empty {
  padding: var(--sp-7) var(--sp-5); text-align: center;
  border: 1px dashed var(--line); border-radius: var(--r-lg); color: var(--dim);
}
.empty strong { display: block; color: var(--text); font-size: 1.0625rem; margin-bottom: var(--sp-2); }

.prose { max-width: 64ch; }
.prose h2 { font-size: 1.125rem; font-weight: 600; margin: var(--sp-6) 0 var(--sp-3); }
.prose p { margin-bottom: var(--sp-3); color: var(--dim); }
.prose p.warn {
  color: var(--text); padding: var(--sp-3) var(--sp-4);
  background: var(--coral-soft); border-radius: var(--r);
}
.prose .fine { font-size: .875rem; }

.tab-fg { width: 100%; border-collapse: collapse; font-size: .875rem; margin: var(--sp-3) 0; }
.tab-fg caption { text-align: left; font-size: .75rem; color: var(--dim); margin-bottom: var(--sp-2); text-transform: uppercase; letter-spacing: .1em; }
.tab-fg th, .tab-fg td { padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.tab-fg th { font-weight: 600; color: var(--dim); font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; }
.tab-fg td:first-child { font: 600 .8125rem/1.6 var(--mono); white-space: nowrap; }
.tab-fg td:last-child { font-family: var(--mono); white-space: nowrap; color: var(--amber); }

.toast {
  position: fixed; left: 50%; bottom: var(--sp-5); transform: translate(-50%, 150%);
  padding: var(--sp-3) var(--sp-5); border-radius: var(--r);
  background: var(--surface-3); border: 1px solid var(--line);
  box-shadow: var(--shadow); font-size: .9375rem; z-index: 50;
  transition: transform .28s var(--ease);
}
.toast.is-up { transform: translate(-50%, 0); }

@media (max-width: 620px) {
  .topbar { gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); }
  .vitals { order: 3; width: 100%; }
  main { padding: var(--sp-5) var(--sp-4) var(--sp-8); }
  .tabs { padding: 0 var(--sp-4); }
  .grades { grid-template-columns: repeat(2, 1fr); }
  .exam-card { grid-template-columns: 1fr; gap: var(--sp-2); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .view.is-active { animation: none; }
}