/* MRS Masterclass, Environment Layer, Design Tokens und Basis-Reset
   Register: klinisch-professionell, hellblau, weiss, grau.
   Getrennt vom Content-Layer (Gold-Palette), siehe UI_BUILD_ARCHITECTURE.md */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@300;400;600;700&family=Barlow:wght@300;400;500;600&family=Patrick+Hand&display=swap');

/* Bison Bold was tried for titles (per 00_admin/DESIGN.md, where it's the
   Homepage project's marketing-headline face at 1.8-7rem). At the small
   UI-chrome sizes titles actually run in this environment (1-1.7rem), an
   Impact-style display face reads heavy regardless of color, so titles now
   use Barlow Condensed Bold instead, see --mpe-font-title below. Not
   self-hosting Bison at all here keeps one fewer font request on every
   page load. Revisit only if a genuinely large hero headline shows up
   somewhere in this environment later. */

@font-face {
  font-family: 'Inter';
  src: local('Inter');
  font-display: swap;
}

:root {
  /* Farbpalette, Environment-Register */
  --mpe-blue-50:  #f4f8fb;
  --mpe-blue-100: #e6eef5;
  --mpe-blue-200: #cfe0ed;
  --mpe-blue-300: #a9c8dd;
  --mpe-blue-500: #4f86ac;
  --mpe-blue-600: #386991;
  --mpe-blue-700: #2a5273;

  --mpe-gray-50:  #fafbfc;
  --mpe-gray-100: #f1f3f5;
  --mpe-gray-200: #e2e6ea;
  --mpe-gray-400: #9aa5b1;
  --mpe-gray-600: #5b6572;
  --mpe-gray-800: #2c333a;
  --mpe-gray-900: #1a1f24;

  --mpe-white: #ffffff;
  --mpe-success: #3f8f6b;
  --mpe-warning: #b3873f;
  --mpe-danger:  #b3453f;

  /* Typography. Barlow / Barlow Condensed everywhere, sourced from the
     same Google Fonts import as the Homepage project. Titles were tried in
     Bison (the Homepage project's own hero-headline face) and switched to
     Barlow Condensed Bold instead, too heavy at the small UI-chrome sizes
     used here, see the note above. Inter kept only as an emergency
     system fallback if the Google Fonts request fails. */
  --mpe-font-title: 'Barlow Condensed', Arial, sans-serif;
  --mpe-font-condensed: 'Barlow Condensed', Arial, sans-serif;
  --mpe-font-body: 'Barlow', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

  /* Handwriting face, used only inside the Notizen textareas (js/notes-qa.js).
     Patrick Hand chosen deliberately over a cursive/script face: it reads as
     "handwritten" while staying fully legible at normal body-text size, the
     brief was readability first. Same Google Fonts request as the rest of
     this file's typography, one added family, no extra HTTP request. */
  --mpe-font-handwriting: 'Patrick Hand', var(--mpe-font-body);

  --mpe-radius-sm: 6px;
  --mpe-radius-md: 10px;
  --mpe-radius-lg: 16px;

  /* Depth/shadow formula ported from the MPE Accounting PWA's .panel style,
     a soft blue-tinted double shadow instead of flat grey. Tint matches
     --mpe-blue-600 (56,105,145). This is the one shared shadow language for
     every box across every layer of the environment, quiz, homework, and
     scaling homework alike, see .mpe-card and the hover-lift rule below. */
  --mpe-shadow-card: 0 1px 2px rgba(56, 105, 145, 0.06), 0 12px 28px -10px rgba(56, 105, 145, 0.20);
  --mpe-shadow-elevated: 0 2px 4px rgba(56, 105, 145, 0.08), 0 20px 44px -14px rgba(56, 105, 145, 0.28);

  color-scheme: light;
}

* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
  height: 100dvh; /* fallback above, dvh where supported */
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--mpe-font-body);
  background: var(--mpe-blue-50);
  color: var(--mpe-gray-800);
  -webkit-font-smoothing: antialiased;
  touch-action: manipulation;
  overscroll-behavior-y: none;
}

/* Sitewide font assignment by naming convention rather than per-page rules,
   every page in this build already names its title/eyebrow/tag/label
   elements consistently (mpe-*-title, mpe-*-heading, mpe-*-eyebrow, etc.),
   so this one rule covers dashboard, quiz, homework, scaling homework,
   kapitel and the storyline pane alike, current and future pages, without
   having to touch each page's own <style> block. */
h1, h2, h3,
[class*="-title"],
[class*="-heading"],
[class*="-brand-mark"] {
  font-family: var(--mpe-font-title);
}

[class*="-eyebrow"],
[class*="-tag"],
[class*="-label"] {
  font-family: var(--mpe-font-condensed);
}

.mpe-welcome {
  font-family: var(--mpe-font-title);
}

/* Exception: this "label" is the disclaimer's actual checkbox confirmation
   sentence, running legal text, not a short UI tag, so it stays in the
   regular body font rather than picking up Barlow Condensed from the
   generic [class*="-label"] rule above. */
.mpe-disclaimer-ack-label {
  font-family: var(--mpe-font-body);
}

img, svg {
  max-width: 100%;
  display: block;
}

a {
  color: var(--mpe-blue-600);
}

button, input, select, textarea {
  font-family: inherit;
  font-size: 1rem;
}

/* Interaktive, animierte Elemente: will-change und backface-visibility gegen Flackern */
.mpe-animatable {
  will-change: transform, opacity;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.mpe-card {
  background: var(--mpe-white);
  border-radius: var(--mpe-radius-lg);
  box-shadow: var(--mpe-shadow-card);
  padding: 1.5rem;
}

/* Sitewide hover-lift, every clickable/openable box across every layer:
   dashboard tiles, quiz question cards, homework task cards, and the
   scaling homework's accordion regions. A slight upward toggle plus a
   deeper shadow on hover, click still does whatever the element already
   does (navigate, or expand the <details> region). Hover-only, mouse and
   trackpad, never on touch: matchMedia(hover:hover)+(pointer:fine) is the
   CSS-native equivalent of the same distinction, no ontouchstart hack. */
.mpe-card,
.mpe-hw-region {
  transition: transform 0.16s ease, box-shadow 0.16s ease;
  will-change: transform, box-shadow;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
@media (hover: hover) and (pointer: fine) {
  a.mpe-card:hover,
  .mpe-hw-region:hover {
    transform: translateY(-3px);
    box-shadow: var(--mpe-shadow-elevated);
  }
}

/* Static, full-viewport background layer. Fixed to the viewport so it
   never scrolls, all page content (topbar and main shell) sits in the
   normal document flow above it and scrolls independently. Same pattern
   already used by the MPE Homepage project's #productPnl background
   (fixed, inset:0, cover), just applied at the page level here instead of
   an overlay panel.
   One single background across every layer, the same subtle light-grey
   Background_Webpage image already used elsewhere in MPE's web work
   (the Homepage project's own #productPnl background). The earlier
   three-image system (NTM/M/N, one per layer) was scrapped on direct
   instruction, poor readability against page content, replaced with this
   one image everywhere.
   Brightness note: the source image itself measures a mean brightness of
   roughly 233/255, light grey rather than pure white, confirmed against
   the original file (not a JPEG-compression artifact, an export at quality
   88 measures the same mean as the raw PNG). On the Homepage project this
   same file never reads as flat white either, it sits under a near-opaque
   off-white bar (rgba(245,243,239,0.88)) and a #f5f3ef page background
   that both mask most of the grey. Here the image shows directly across
   large uncovered areas, so that same masking is reproduced with a thin
   translucent white wash layered on top of the image itself, brightening
   it towards white while keeping the diagonal-ray texture visible.
   Round 15: wash lowered from 0.4 to 0.15. At 0.4 the wash was diluting
   the image past the point of being noticeable at normal viewing distance,
   confirmed live (Safari and Chrome, both reported the background as
   effectively not showing). 0.15 keeps the brightening/masking intent
   but leaves the diagonal-ray texture clearly visible again.
   Round 16: the source image itself, not the wash, turned out to be
   unevenly bright, left side of the file measured meaningfully brighter
   than the right (confirmed by column-brightness analysis, roughly 244
   vs 233 vs 238 across left/center/right before correction). At 0.4 wash
   this was invisible, masked by the overlay; once the wash dropped to
   0.15 in round 15 the underlying unevenness became visible again as a
   "too bright on the left" patch. A CSS overlay can only add brightness,
   it cannot selectively darken one region, so the fix is in the asset
   itself: Background_Webpage.jpg was replaced with a corrected version,
   a smooth horizontal multiply-correction applied to flatten the
   left/right brightness trend while leaving the diagonal-ray texture and
   all local detail untouched, verified afterward to read within about
   2 points of each other left/center/right instead of an 11-point
   spread. The wash value itself (0.15) did not need to change again. */
.mpe-page-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.15)),
    url('../assets/backgrounds/Background_Webpage.jpg?v=20260819-1');
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  pointer-events: none;
}

.mpe-topbar,
.mpe-login-wrap,
.mpe-shell,
.mpe-shell-wide,
.mpe-disclaimer-shell,
.mpe-kapitel-shell,
.mpe-split-shell,
.mpe-site-footer {
  position: relative;
  z-index: 1;
}

/* Sitewide footer, bottom-centre of every page. Sits in normal document
   flow below the page's own content shell (not fixed to the viewport), so
   it reads as the closing line of each page rather than an overlay.
   Decent, readable size rather than fine print, per direct instruction. */
.mpe-site-footer {
  text-align: center;
  padding: 2rem 1.25rem 2.5rem;
  color: var(--mpe-gray-500);
}
.mpe-site-footer-line {
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.mpe-site-footer-sub {
  font-size: 0.78rem;
  font-weight: 500;
  margin-top: 0.2rem;
  color: var(--mpe-gray-500);
}

.mpe-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  border-radius: var(--mpe-radius-md);
  border: none;
  background: var(--mpe-blue-600);
  color: var(--mpe-white);
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease;
}

.mpe-btn:hover {
  background: var(--mpe-blue-700);
}

.mpe-btn:active {
  transform: scale(0.98);
}

.mpe-btn.mpe-btn-secondary {
  background: var(--mpe-white);
  color: var(--mpe-blue-600);
  border: 1px solid var(--mpe-blue-200);
}

.mpe-btn.mpe-btn-secondary:hover {
  background: var(--mpe-blue-50);
}

.mpe-input {
  width: 100%;
  padding: 0.7rem 0.9rem;
  border-radius: var(--mpe-radius-sm);
  border: 1px solid var(--mpe-gray-200);
  background: var(--mpe-white);
  color: var(--mpe-gray-800);
}

.mpe-input:focus {
  outline: 2px solid var(--mpe-blue-300);
  outline-offset: 1px;
  border-color: var(--mpe-blue-500);
}

.mpe-label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--mpe-gray-600);
  margin-bottom: 0.4rem;
}

.mpe-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.5rem;
  background: var(--mpe-white);
  border-bottom: 1px solid var(--mpe-gray-200);
}

.mpe-topbar-brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 700;
  color: var(--mpe-gray-800);
}

.mpe-topbar-logo {
  display: block;
  height: 34px;
  width: auto;
}

.mpe-shell {
  max-width: 880px;
  margin: 0 auto;
  padding: 2rem 1.25rem 4rem;
}

.mpe-error {
  color: var(--mpe-danger);
  font-size: 0.9rem;
  margin-top: 0.5rem;
}

.mpe-hidden {
  display: none !important;
}

/* Skip-Link, minimal, fuer Tastaturnutzung */
.mpe-skip-link {
  position: absolute;
  left: -999px;
  top: auto;
}

.mpe-skip-link:focus {
  left: 1rem;
  top: 1rem;
  z-index: 999;
  background: var(--mpe-white);
  padding: 0.5rem 1rem;
  border-radius: var(--mpe-radius-sm);
}

/* Notizen + "Frage an den Dozenten stellen", geteiltes Widget
   (js/notes-qa.js), eingesetzt an vier Stellen: Kapitel (pro Abschnitt),
   Quiz (pro Frage), Vertiefungsaufgabe (pro Aufgabe), Fortlaufende Aufgabe
   (pro Region-Box). Ein Baustein fuer alle vier, damit kuenftige Kapitel
   und Kurse (siehe PROJECT_STATE.md) dasselbe Muster wiederverwenden
   koennen. Zugeklappt per Default, damit das bestehende, sehr klare
   Seitendesign nicht ueberladen wird, siehe direkte Nutzer-Vorgabe.

   Fragen an den Dozenten werden ausschliesslich manuell durch die
   Lehrperson beantwortet (student_questions.teacher_reply), keine
   automatisierte KI-Antwort. Frueher geplant, per direkter Nutzer-Vorgabe
   am 17.08.2026 wieder verworfen: diese Fragen verlangen persoenliche,
   manuelle Pruefung durch die Lehrperson. Die Edge Function
   'answer-question' wird entsprechend nicht eingesetzt. */
.mpe-notes-wrap {
  margin-top: 0.9rem;
}

/* Eyecatcher: pulsierender Ring, gleiche "looming"-Technik wie
   .mpe-story-block.mpe-story-active (kapitel1.html, Storyline-Live-Ansicht).
   Revidiert 17.08.2026 (Rot/Gruen je nach Notizinhalt), nochmals revidiert
   17.08.2026 (Runde 12), direkte Nutzer-Vorgabe: eigene, kraeftigere
   Neon-Farbwerte statt der gedaempften --mpe-danger/--mpe-success-Tontoene,
   ausdruecklich als "moderner Neon-Look" gewuenscht. Neon-Rot #ff1744
   ("leer") und Neon-Gruen #00e676 ("beschrieben", athletic green) sind
   bewusst eigene, neue Werte, nicht von den bestehenden Statusfarben
   abgeleitet, jene bleiben unveraendert fuer .mpe-notes-save-state und die
   Antwort-Labels weiter unten, dieser Ring ist die einzige Stelle im
   Sitedesign mit diesem kraeftigeren Neon-Ton. Rot ("leer") bleibt
   Default-Zustand des Toggles, Gruen ("beschrieben") wird per JS
   (js/notes-qa.js, updateToggleFillState()) dazugeschaltet, sobald das
   Notizfeld nicht-leeren Text enthaelt, live beim Tippen, nicht erst nach
   dem Speichern. Glow-Intensitaet (Alpha, Blur, Spread) gegenueber Runde 11
   angehoben, damit der Neon-Effekt auch tatsaechlich so wirkt. Nochmals
   nachgebessert 17.08.2026 (Runde 13): Runde 12 sah auf dem hellen
   Seitenhintergrund trotzdem noch gedaempft aus, nicht "echt neon". Grund:
   ein teiltransparenter box-shadow mischt sich optisch mit dem darunter
   liegenden hellen Hintergrund und verwaescht dadurch jede Farbe Richtung
   Pastell, unabhaengig vom gewaehlten Hex-Wert. Der reine Alpha-Wert allein
   loest das nicht, es braucht einen fast deckenden inneren Ring (Kern ohne
   Verwaschung, Alpha 0.9 in Ruhe, 1.0 im Peak) plus zwei weichere,
   durchscheinende Halo-Schichten aussen herum fuer den eigentlichen
   Glow-Effekt, die klassische CSS-Neon-Technik (scharfer, gesaettigter
   Kern plus diffuser Streulicht-Rand), nicht eine einzelne, komplett
   transparente Schicht wie bisher. Nochmals nachgebessert 17.08.2026
   (Runde 14), direkte Nutzer-Vorgabe: Farbe jetzt korrekt ("perfekt"),
   aber der Glow selbst zu stark und zu breit. Dritte Schicht (der grosse
   22px/34px-Aussenhalo aus Runde 13) komplett entfernt, nur noch Kernring
   plus eine einzelne, deutlich engere und schwaechere Halo-Schicht
   (5-8px Blur statt 10-16px, 1-1.5px Spread statt 2-5px, niedrigere
   Alpha-Werte), Kern-Alpha ebenfalls leicht reduziert (0.75-0.92 statt
   0.9-1.0). Der Farbeindruck bleibt gesaettigt (der Kern ist weiterhin
   fast deckend), nur die Ausbreitung/Intensitaet des Glows selbst ist
   jetzt subtiler. Bewusst weiterhin nicht die blaue "Breathing Line" der
   Dashboard-Kacheln
   wiederverwendet, die dort "unerledigte Pflichtaufgabe, verschwindet nach
   Abschluss" bedeutet, dieses Rot/Gruen hier ist ein anderes Signal ("leer"
   vs. "beschrieben"), keine Aufgabe mit einem Endzustand. Padding/Margin
   kompensieren sich weiterhin gegenseitig, Ring bekommt trotzdem etwas
   Luft. */
@keyframes mpe-notes-loom-empty {
  0%, 100% {
    box-shadow: 0 0 0 1.5px rgba(255, 23, 68, 0.75), 0 0 5px 1px rgba(255, 23, 68, 0.28);
  }
  50% {
    box-shadow: 0 0 0 2px rgba(255, 23, 68, 0.92), 0 0 8px 1.5px rgba(255, 23, 68, 0.42);
  }
}

@keyframes mpe-notes-loom-filled {
  0%, 100% {
    box-shadow: 0 0 0 1.5px rgba(0, 230, 118, 0.75), 0 0 5px 1px rgba(0, 230, 118, 0.28);
  }
  50% {
    box-shadow: 0 0 0 2px rgba(0, 230, 118, 0.92), 0 0 8px 1.5px rgba(0, 230, 118, 0.42);
  }
}

.mpe-notes-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: none;
  border: none;
  border-radius: 999px;
  padding: 0.3rem 0.45rem;
  margin: 0 -0.45rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--mpe-blue-600);
  cursor: pointer;
  touch-action: manipulation;
  animation: mpe-notes-loom-empty 3.2s ease-in-out infinite;
  will-change: box-shadow;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.mpe-notes-toggle.mpe-notes-toggle-filled {
  animation-name: mpe-notes-loom-filled;
}

.mpe-notes-toggle-icon {
  display: inline-block;
  font-size: 0.7rem;
  transition: transform 0.15s ease;
  will-change: transform;
}

.mpe-notes-toggle.mpe-notes-toggle-open .mpe-notes-toggle-icon {
  transform: rotate(90deg);
}

.mpe-notes-panel {
  margin-top: 0.5rem;
  padding: 0.9rem 1rem 1rem;
  border-radius: var(--mpe-radius-md);
  background: var(--mpe-blue-50);
  border: 1px solid var(--mpe-blue-200);
}

/* Handwriting-Font nur hier, im eigentlichen Notizfeld, gut lesbar bei
   normaler Textgroesse, keine Zier-Schreibschrift. */
.mpe-notes-textarea {
  width: 100%;
  min-height: 90px;
  resize: vertical;
  border-radius: var(--mpe-radius-sm);
  border: 1px solid var(--mpe-blue-200);
  background: var(--mpe-white);
  padding: 0.6rem 0.75rem;
  font-family: var(--mpe-font-handwriting);
  font-size: 1.15rem;
  line-height: 1.5;
  color: var(--mpe-gray-800);
}

.mpe-notes-textarea:focus {
  outline: 2px solid var(--mpe-blue-300);
  outline-offset: 1px;
  border-color: var(--mpe-blue-500);
}

.mpe-notes-save-state {
  font-size: 0.72rem;
  color: var(--mpe-gray-400);
  margin-top: 0.3rem;
  min-height: 1em;
}
.mpe-notes-save-state.mpe-notes-save-ok { color: var(--mpe-success); }
.mpe-notes-save-state.mpe-notes-save-err { color: var(--mpe-danger); }

.mpe-notes-ask-toggle {
  display: inline-block;
  margin-top: 0.6rem;
  background: none;
  border: none;
  padding: 0;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--mpe-blue-600);
  text-decoration: underline;
  cursor: pointer;
  touch-action: manipulation;
}

.mpe-notes-ask-panel {
  margin-top: 0.6rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--mpe-blue-200);
}

.mpe-notes-question-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-bottom: 0.6rem;
}

.mpe-notes-question-item {
  padding: 0.6rem 0.7rem;
  border-radius: var(--mpe-radius-sm);
  background: var(--mpe-white);
  border: 1px solid var(--mpe-blue-100);
}

.mpe-notes-question-text {
  font-size: 0.88rem;
  color: var(--mpe-gray-800);
  font-weight: 600;
  margin-bottom: 0.4rem;
}

.mpe-notes-answer-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin-bottom: 0.25rem;
}
/* Green once a teacher has actually replied, grey while a question is
   still waiting for manual review. No automated/AI answer state, see the
   comment above .mpe-notes-wrap. */
.mpe-notes-answer-label-teacher { color: var(--mpe-success); }
.mpe-notes-answer-label-pending { color: var(--mpe-gray-500); }

.mpe-notes-answer-text {
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--mpe-gray-800);
}

.mpe-notes-question-input {
  min-height: 70px;
  margin-bottom: 0.5rem;
}