/* Atkinson Hyperlegible (SIL OFL 1.1), on-prem selbst gehostet.
   Schriftdateien unter static/fonts/ ablegen, siehe fonts/README.md.
   Fehlen sie, greift dank font-display: swap der Fallback (Inter/System). */
@font-face {
  font-family: "Atkinson Hyperlegible";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/AtkinsonHyperlegible-Regular.woff2") format("woff2"),
       url("fonts/AtkinsonHyperlegible-Regular.woff") format("woff");
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/AtkinsonHyperlegible-Bold.woff2") format("woff2"),
       url("fonts/AtkinsonHyperlegible-Bold.woff") format("woff");
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/AtkinsonHyperlegible-Italic.woff2") format("woff2");
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/AtkinsonHyperlegible-BoldItalic.woff2") format("woff2");
}

:root {
  --bg: #f5f7f9;
  --surface: #ffffff;
  --ink: #17202a;
  --muted: #5f6f7d;
  --line: #d8e0e7;
  --blue: #1b5fbf;
  --blue-dark: #164a92;
  --green: #1f7a5c;
  --amber: #9a6212;
  --shadow: 0 18px 46px rgba(23, 32, 42, 0.08);

  /* SchulNovum Marke. Expressive Neonfarben nur fuer Logo/Hero/Akzente auf dunkel,
     niemals als Text auf Weiss. Produkt-UI nutzt die seriösen, BITV-festen Werte unten. */
  --sn-night-plum: #16051f;
  --sn-pulse-pink: #ff2d8d;
  --sn-violet: #7a4dff;
  --sn-electric-cyan: #00d7ff;
  --sn-acid-lime: #d8ff2f;
  --sn-mango: #ffb000;
  --sn-slate: #6d5f73;
  --sn-soft-glow: #fff7fc;
  /* Produkt-UI: kontrastsicher (alle >= AA auf Weiss). */
  --sn-text: #16051f;
  --sn-text-muted: #6d5f73;
  --sn-action-berry: #b0005c;
  --sn-action-hover: #8f004b;
  --sn-link: #4c1fb8;
  --sn-focus: #ffb000;
  --sn-font-logo: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --sn-font-ui: "Atkinson Hyperlegible", Inter, "Source Sans 3", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--sn-text);
  font-family: var(--sn-font-ui);
  line-height: 1.5;
}

/* SchulNovum Markenkopf */
.brand-mark-img {
  width: 36px;
  height: 36px;
  display: block;
  border-radius: 9px;
}

.brand-word {
  font-family: var(--sn-font-logo);
  font-weight: 780;
  font-size: 1.25rem;
  color: var(--sn-night-plum);
  letter-spacing: 0;
}

a {
  color: inherit;
}

.topbar {
  align-items: center;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  display: flex;
  gap: 24px;
  justify-content: space-between;
  min-height: 68px;
  padding: 0 28px;
  position: sticky;
  top: 0;
  z-index: 10;
}

.brand {
  align-items: center;
  display: inline-flex;
  font-weight: 800;
  gap: 10px;
  text-decoration: none;
}

.brand-mark {
  align-items: center;
  background: var(--green);
  border-radius: 6px;
  color: #ffffff;
  display: inline-flex;
  font-size: 0.76rem;
  height: 32px;
  justify-content: center;
  width: 44px;
}

.topnav {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: flex-end;
}

.topnav a,
.topnav button,
.button-link,
.login-form button,
.stack-form button {
  background: var(--blue);
  border: 0;
  border-radius: 6px;
  color: #ffffff;
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-weight: 700;
  min-height: 40px;
  padding: 9px 14px;
  text-decoration: none;
}

.topnav a,
.topnav button.secondary,
.button-link.secondary {
  background: #eef4fb;
  color: var(--blue-dark);
}

.notification-pill[hidden] {
  display: none;
}

.notification-pill {
  background: #fff8e8;
  border: 1px solid #efd39a;
  color: var(--amber);
}

.identity {
  color: var(--muted);
  font-weight: 700;
}

.shell {
  margin: 0 auto;
  max-width: 1180px;
  padding: 30px 24px 56px;
}

.messages {
  display: grid;
  gap: 8px;
  margin-bottom: 18px;
}

.message {
  background: #fff8e8;
  border: 1px solid #efd39a;
  border-radius: 6px;
  color: var(--amber);
  margin: 0;
  padding: 10px 12px;
}

.auth-panel,
.content-band,
.portal-head {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.auth-panel {
  display: grid;
  gap: 30px;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 420px);
  margin: 50px auto 0;
  max-width: 900px;
  padding: 34px;
}

.portal-head,
.content-band {
  align-items: flex-start;
  display: flex;
  gap: 24px;
  justify-content: space-between;
  padding: 24px;
}

.content-band.narrow {
  display: block;
  max-width: 720px;
}

.eyebrow {
  color: var(--green);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0;
  margin: 0 0 6px;
  text-transform: uppercase;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  font-size: clamp(2rem, 3vw, 3.1rem);
  line-height: 1.08;
  margin-bottom: 12px;
}

h2 {
  font-size: 1.3rem;
  margin-bottom: 14px;
}

h3 {
  font-size: 1rem;
  margin-bottom: 8px;
}

.status-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.head-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  align-items: center;
}

.workbench-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 4px 0 18px;
}

.workbench-nav a {
  background: #edf2ff;
  border: 1px solid #c7d6ff;
  border-radius: 999px;
  color: #1f3a8a;
  font-size: 0.9rem;
  font-weight: 700;
  padding: 6px 14px;
  text-decoration: none;
}

.workbench-nav a:hover {
  background: #dbe6ff;
}

.day-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.day-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border: 1px solid var(--line, #d8e0e6);
  border-radius: 12px;
  background: #fff;
}

.day-when {
  min-width: 34px;
  text-align: center;
}

.day-period {
  font-size: 1.1rem;
  font-weight: 800;
}

.day-what {
  flex: 1;
}

.day-title {
  font-weight: 700;
  margin: 0;
}

.day-row .button-link {
  white-space: nowrap;
}

a.module-card-link {
  text-decoration: none;
  color: inherit;
  display: block;
  transition: border-color 0.15s ease;
}

a.module-card-link:hover {
  border-color: var(--green, #1d9e75);
}

.stat-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.stat-card {
  background: #f3f6f9;
  border-radius: 10px;
  padding: 12px 16px;
  min-width: 140px;
}

.stat-label {
  font-size: 0.85rem;
  color: #5f6b73;
  margin: 0;
}

.stat-value {
  font-size: 1.6rem;
  font-weight: 800;
  margin: 4px 0 0;
}

.lesson-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.lesson-chip {
  display: inline-block;
  padding: 8px 14px;
  border: 1px solid #c7d6ff;
  border-radius: 999px;
  background: #fff;
  color: #1f3a8a;
  text-decoration: none;
  font-size: 0.95rem;
}

.lesson-chip.active {
  background: #1f3a8a;
  border-color: #1f3a8a;
  color: #fff;
}

.lesson-chip .chip-period {
  font-weight: 800;
}

.roster {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 10px 0 18px;
}

.roster-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  border: 1px solid #e0e6ea;
  border-radius: 10px;
  background: #fff;
}

.roster-name {
  font-size: 1rem;
}

.att-toggle {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.att {
  font-size: 0.85rem;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid #d8e0e6;
  cursor: pointer;
  white-space: nowrap;
}

.att input {
  margin-right: 4px;
}

.att-present { background: #edf8f3; border-color: #bee0d2; }
.att-absent { background: #fdecec; border-color: #f3c2c2; }
.att-late { background: #fdf3e0; border-color: #f1d59a; }

.field-stack {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 12px 0 18px;
  max-width: 640px;
}

.field-stack input {
  width: 100%;
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.tt-scroll {
  overflow-x: auto;
}

.tt-grid {
  border-collapse: collapse;
  width: 100%;
  min-width: 560px;
}

.tt-grid th,
.tt-grid td {
  border: 1px solid #e0e6ea;
  padding: 8px 10px;
  text-align: left;
  vertical-align: top;
}

.tt-grid th {
  background: #f3f6f9;
  font-weight: 700;
}

.tt-period {
  color: #5f6b73;
  font-weight: 700;
  width: 48px;
  white-space: nowrap;
}

.tt-cell {
  min-width: 92px;
}

.tt-subject {
  display: block;
  font-weight: 700;
}

.tt-meta {
  display: block;
  font-size: 0.82rem;
  color: #5f6b73;
}

.tt-today {
  background: #eef3ff;
}

th.tt-today {
  background: #dbe6ff;
}

.panel {
  border: 1px solid #e0e6ea;
  border-radius: 10px;
  padding: 12px 14px;
  margin: 10px 0;
  background: #fff;
}

.panel summary {
  cursor: pointer;
  font-weight: 700;
}

.panel .field-stack {
  margin-top: 12px;
}

.link-list {
  margin: 6px 0 0;
  padding-left: 18px;
}

.link-list li {
  margin: 4px 0;
}

.field-stack textarea {
  width: 100%;
  font: inherit;
  padding: 8px 10px;
  border: 1px solid #d8e0e6;
  border-radius: 8px;
}

.scan-field {
  display: flex;
  gap: 8px;
  align-items: center;
}

.scan-field input {
  flex: 1;
}

.scan-btn {
  white-space: nowrap;
}

.sub-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: start;
}

@media (max-width: 820px) {
  .sub-layout { grid-template-columns: 1fr; }
}

.sub-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid #e0e6ea;
  border-radius: 10px;
  background: #fff;
  text-decoration: none;
  color: inherit;
}

.sub-row.active {
  border-color: var(--green, #1d9e75);
  border-width: 2px;
}

.sub-main {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sub-when {
  font-size: 1.1rem;
  font-weight: 800;
  min-width: 26px;
  text-align: center;
}

.badge.ok { background: #edf8f3; color: #0f6e56; border: 1px solid #bee0d2; }
.badge.open { background: #fdecec; color: #a32d2d; border: 1px solid #f3c2c2; }

.cand-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 4px 0 12px;
}

.cand {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border: 1px solid #e0e6ea;
  border-radius: 8px;
  cursor: pointer;
}

.cand .tt-meta {
  margin-left: auto;
}

.field-label {
  font-size: 0.9rem;
  color: #5f6b73;
  margin: 8px 0 2px;
  font-weight: 700;
}

.tt-edit { padding: 0; }

.tt-edit a {
  display: block;
  padding: 8px 10px;
  min-height: 44px;
  text-decoration: none;
  color: inherit;
}

.tt-edit a:hover { background: #eef3ff; }

.tt-add {
  color: #9aa7b0;
  font-size: 1.2rem;
  font-weight: 700;
}

.tt-selected {
  outline: 2px solid var(--green, #1d9e75);
  outline-offset: -2px;
}

.nb-block {
  border: 1px solid #e6ebee;
  border-radius: 10px;
  padding: 10px 12px;
  margin: 8px 0;
  background: #fff;
}

.nb-block h4 { margin: 0; }

.nb-block-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.nb-block-actions form { display: inline; }

.nb-block-actions button {
  font-size: 0.8rem;
  padding: 3px 10px;
}

.nb-saved { font-size: 0.85rem; color: var(--green, #1d9e75); transition: opacity .2s; }
.nb-presence { font-size: 0.82rem; color: #1f3a8a; background: #eef2ff; border-radius: 999px; padding: 3px 10px; }
.nb-presence:empty { display: none; }
.pick-list { display: flex; flex-direction: column; gap: 2px; max-height: 220px; overflow-y: auto; border: 1px solid #e0e6ea; border-radius: 8px; padding: 8px; margin-top: 6px; }
.checkbox-inline { display: inline-flex; align-items: center; gap: 6px; }
.nb-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.nb-tab { font-size: 0.9rem; padding: 6px 14px; border-radius: 999px; border: 1px solid #d8e0e6; background: #fff; cursor: pointer; }
.nb-tab.on { background: #1f3a8a; color: #fff; border-color: #1f3a8a; }
.nb-pagelist { display: flex; flex-direction: column; gap: 4px; }
.nb-pageitem { text-align: left; background: #fff; border: 1px solid #e6ebee; border-radius: 8px; padding: 7px 10px; cursor: pointer; }
.nb-pageitem.on { border-color: var(--green, #1d9e75); border-width: 2px; }
.nb-newpage { display: flex; gap: 6px; margin-top: 10px; }
.nb-newpage input { flex: 1; }
.nb-page-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.nb-title { font-size: 1.1rem; font-weight: 700; outline: none; padding: 2px 4px; border-radius: 6px; }
.nb-title:focus { background: #eef3ff; }
.nb-adders { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; }
.nb-edit { outline: none; min-height: 1.4em; padding: 4px 6px; border-radius: 6px; }
.nb-edit:focus { background: #eef3ff; }
.nb-h { font-size: 1.15rem; font-weight: 700; }
.nb-formula { font-family: ui-monospace, Menlo, monospace; background: #f3f6f9; }
.nb-additem { font-size: 0.8rem; padding: 3px 10px; margin-top: 4px; }
.chkrow { display: flex; align-items: center; gap: 8px; margin: 3px 0; }
.chkrow input { width: 16px; height: 16px; }
.chkrow span { flex: 1; }
.nb-media { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.nb-media-img { max-width: 100%; max-height: 320px; border-radius: 8px; border: 1px solid #e0e6ea; }
.nb-media audio { width: 100%; max-width: 420px; }
.nb-upload { font-size: 0.85rem; }
.nb-formula-preview { margin-top: 4px; font-size: 1.05rem; }
.nb-formula-preview math { font-size: 1.15rem; }
.nb-rtbar { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
.nb-rtbtn { font-size: 0.8rem; padding: 2px 9px; min-width: 0; }
.nb-richtext { min-height: 2em; border: 1px solid #eef2f5; border-radius: 8px; padding: 8px 10px; }
.nb-richtext:focus { background: #fff; border-color: #c7d6ff; }
.nb-richtext ul { padding-left: 22px; list-style: disc; }
.nb-richtext ol { padding-left: 22px; list-style: decimal; }
.nb-richtext h3 { font-size: 1.1rem; font-weight: 700; margin: 6px 0; }
.nb-richtext a { color: #1f3a8a; }
.nb-search { margin-bottom: 10px; }
.nb-search input { width: 100%; max-width: 420px; }
.nb-search-results { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.nb-searchhit { text-align: left; background: #fff; border: 1px solid #e0e6ea; border-radius: 8px; padding: 6px 10px; cursor: pointer; }
.nb-addsection { border-style: dashed; }
.nb-secmanage { display: flex; gap: 6px; margin: 6px 0 10px; }
.nb-secmanage button { font-size: 0.8rem; padding: 3px 10px; }
.nb-page-actions { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 10px; }
.nb-page-actions button, .nb-page-actions select { font-size: 0.8rem; padding: 3px 8px; }
.nb-drawing { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.nb-canvas { border: 1px solid #c7d6ff; border-radius: 8px; background: #fff; touch-action: none; max-width: 100%; }
.nb-drawtools { display: flex; gap: 6px; }
.nb-drawtools button { font-size: 0.8rem; padding: 3px 10px; }
.nb-distribute-box { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.nb-review-body { border: 1px solid #eef2f5; border-radius: 8px; padding: 10px 12px; margin: 8px 0; }
.nb-review-body img { max-width: 100%; }

.status-strip span {
  background: #edf8f3;
  border: 1px solid #bee0d2;
  border-radius: 999px;
  color: var(--green);
  font-size: 0.88rem;
  font-weight: 800;
  padding: 7px 10px;
}

.grid-section {
  margin-top: 28px;
}

.module-grid,
.area-grid,
.tool-grid,
.suite-grid,
.workbench-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.module-card,
.area-card,
.tool-card,
.suite-card,
.workbench-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  min-height: 156px;
  padding: 18px;
}

.workbench-grid {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.workbench-card {
  min-height: 0;
}

.module-card span,
.suite-card span {
  color: var(--blue-dark);
  display: inline-block;
  font-size: 0.9rem;
  font-weight: 800;
  margin-top: 8px;
}

.module-action {
  color: var(--blue-dark);
  display: inline-block;
  font-weight: 800;
  margin-top: 8px;
}

.checklist-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.check-card {
  align-items: flex-start;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: flex;
  gap: 10px;
  min-height: 92px;
  padding: 14px;
}

.check-card span {
  background: #edf8f3;
  border: 1px solid #bee0d2;
  border-radius: 999px;
  color: var(--green);
  font-size: 0.76rem;
  font-weight: 800;
  padding: 4px 7px;
}

.check-card p {
  margin-bottom: 0;
}

.split-layout {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.stack-list {
  align-items: flex-start;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.stack-list span {
  background: #eef4fb;
  border: 1px solid #c8d8eb;
  border-radius: 999px;
  color: var(--blue-dark);
  font-size: 0.86rem;
  font-weight: 800;
  padding: 7px 10px;
}

.secret-panel,
.recovery-grid {
  background: #f7fafc;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 10px;
  padding: 14px;
}

.secret-panel code,
.recovery-grid code {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: #18344f;
  display: block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9rem;
  overflow-wrap: anywhere;
  padding: 10px;
}

.field-label {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 800;
  margin: 0;
  text-transform: uppercase;
}

.recovery-grid {
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}

.timetable-board {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: auto;
}

.timetable-board-head {
  align-items: center;
  border-bottom: 1px solid var(--line);
  display: flex;
  gap: 12px;
  justify-content: space-between;
  min-width: 760px;
  padding: 14px 16px;
}

.timetable-board-head span {
  color: var(--muted);
  font-weight: 800;
}

.timetable-board-head span.is-error {
  color: #9f2f2f;
}

.timetable-grid {
  display: grid;
  min-width: 760px;
}

.timetable-row {
  display: grid;
  grid-template-columns: 56px repeat(auto-fit, minmax(120px, 1fr));
  min-height: 72px;
}

.timetable-row + .timetable-row {
  border-top: 1px solid var(--line);
}

.timetable-row-head {
  background: #eef4fb;
  color: var(--blue-dark);
  font-weight: 800;
  min-height: 44px;
}

.timetable-row > span,
.timetable-cell {
  border-right: 1px solid var(--line);
  min-width: 0;
  padding: 8px;
}

.timetable-row > span:last-child,
.timetable-cell:last-child {
  border-right: 0;
}

.period-label {
  align-items: center;
  color: var(--muted);
  display: flex;
  font-weight: 800;
  justify-content: center;
}

.timetable-cell {
  align-content: start;
  display: grid;
  gap: 6px;
  min-height: 72px;
}

.timetable-cell.is-drop-target {
  background: #edf8f3;
  outline: 2px solid #82c7aa;
  outline-offset: -2px;
}

.timetable-block {
  background: #ffffff;
  border: 1px solid #c8d8eb;
  border-left: 4px solid var(--blue);
  border-radius: 6px;
  color: var(--ink);
  cursor: grab;
  display: grid;
  font: inherit;
  gap: 2px;
  min-height: 48px;
  padding: 7px 8px;
  text-align: left;
  width: 100%;
}

.timetable-block strong,
.timetable-block span {
  overflow-wrap: anywhere;
}

.timetable-block span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.job-table {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}

.job-row {
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(180px, 1.2fr) minmax(160px, 1fr) minmax(120px, 0.7fr);
  padding: 11px 14px;
}

.job-row + .job-row {
  border-top: 1px solid var(--line);
}

.job-head {
  background: #eef4fb;
  color: var(--blue-dark);
  font-weight: 800;
}

.metric-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.metric-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 8px;
  min-height: 116px;
  padding: 18px;
}

.metric-card span {
  color: var(--muted);
  font-weight: 800;
}

.metric-card strong {
  font-size: 2.4rem;
  line-height: 1;
}

.metric-card.ok {
  border-color: #bee0d2;
}

.metric-card.warn {
  border-color: #efd39a;
}

.metric-card.down {
  border-color: #e5a5a5;
}

.login-form,
.stack-form {
  display: grid;
  gap: 10px;
}

.login-form input,
.stack-form input,
.stack-form select,
.stack-form textarea {
  border: 1px solid var(--line);
  border-radius: 6px;
  font: inherit;
  min-height: 44px;
  padding: 10px 12px;
  width: 100%;
}

.login-form label,
.stack-form label {
  color: var(--muted);
  display: block;
  font-weight: 800;
}

.stack-form p {
  margin: 0;
}

.stack-form ul {
  color: #9f2f2f;
  margin: 0;
  padding-left: 18px;
}

@media (max-width: 760px) {
  .topbar,
  .portal-head,
  .content-band,
  .auth-panel,
  .job-row {
    align-items: stretch;
    flex-direction: column;
    grid-template-columns: 1fr;
  }

  .topbar {
    padding: 14px 18px;
  }

  .topnav {
    justify-content: flex-start;
  }

  .shell {
    padding: 22px 16px 40px;
  }
}

/* Vereinfachte Oberflaeche fuer Grundschulen (ui_density = simple).
   Groessere Schrift, groessere Klickziele, ruhigeres Layout. */
body.ui-simple {
  font-size: 1.12rem;
  line-height: 1.6;
}

body.ui-simple .shell {
  max-width: 980px;
}

body.ui-simple button,
body.ui-simple .topnav a,
body.ui-simple select,
body.ui-simple input {
  font-size: 1.05rem;
  padding: 12px 16px;
  border-radius: 12px;
}

body.ui-simple .module-card,
body.ui-simple .card {
  padding: 20px 22px;
}

/* Schulwechsel-Auswahl in der Kopfzeile */
.school-switch {
  display: inline-flex;
  align-items: center;
  margin: 0;
}

.school-switch select {
  max-width: 220px;
}

.active-site {
  opacity: 0.85;
}

/* ---- Notizbuch: Feedback, Code, Tabelle ---- */
.nb-feedback { border-left: 4px solid var(--accent, #2f6f4f); background: rgba(47,111,79,0.08); border-radius: 6px; padding: 10px 12px; }
.nb-feedback .field-label { color: var(--accent, #2f6f4f); }
.nb-feedback-body { white-space: pre-wrap; }
.nb-code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.9em; background: #1e2430; color: #e8edf5; padding: 12px; border-radius: 6px; overflow-x: auto; white-space: pre-wrap; }
.nb-table-wrap { overflow-x: auto; }
table.nb-table { border-collapse: collapse; width: 100%; margin: 4px 0; }
table.nb-table td { border: 1px solid var(--line, #cdd5df); padding: 4px 8px; vertical-align: top; }
table.nb-table .nb-cell { min-width: 60px; min-height: 1.2em; outline: none; }
table.nb-table .nb-cell:focus { background: rgba(47,111,79,0.10); }
.nb-tabletools { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }

/* ---- Notizbuch: Druckansicht ---- */
.nb-print-body { background: #f3f5f8; color: #1a1f28; margin: 0; padding: 0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.nb-print-toolbar { position: sticky; top: 0; display: flex; gap: 12px; align-items: center; padding: 10px 16px; background: #fff; border-bottom: 1px solid #d7dde5; }
.nb-print-sheet { max-width: 820px; margin: 16px auto; background: #fff; padding: 28px 34px; border-radius: 8px; box-shadow: 0 1px 4px rgba(0,0,0,0.08); }
.pb-title { margin: 0 0 16px; font-size: 1.6em; }
.pb-page { padding: 14px 0; border-top: 1px solid #e4e8ee; }
.pb-page:first-of-type { border-top: 0; }
.pb-page-title { margin: 0 0 2px; font-size: 1.2em; }
.pb-h { font-size: 1.1em; margin: 12px 0 4px; }
.pb-text { white-space: pre-wrap; margin: 6px 0; }
.pb-code { font-family: ui-monospace, Menlo, Consolas, monospace; background: #f0f2f5; padding: 10px; border-radius: 6px; white-space: pre-wrap; }
.pb-feedback { border-left: 4px solid #2f6f4f; background: rgba(47,111,79,0.08); padding: 8px 12px; margin: 8px 0; }
.pb-feedback-label { font-weight: 600; color: #2f6f4f; }
.pb-check { list-style: none; padding-left: 0; }
.pb-check li { margin: 2px 0; }
table.pb-table { border-collapse: collapse; margin: 8px 0; }
table.pb-table td { border: 1px solid #c3ccd6; padding: 4px 8px; }
.pb-img { max-width: 100%; height: auto; border-radius: 6px; margin: 8px 0; }
.pb-formula { margin: 8px 0; }
@media print {
  .nb-print-toolbar { display: none; }
  .nb-print-body { background: #fff; }
  .nb-print-sheet { box-shadow: none; margin: 0; max-width: none; border-radius: 0; padding: 0; }
  .pb-page { page-break-inside: avoid; }
}

/* ---- Notizbuch: Live-Zusammenarbeit ---- */
.nb-presence { font-size: 0.82em; color: var(--muted, #6b7480); }
.nb-presence.on { color: #2f6f4f; }
.nb-presence.on::before { content: "● "; color: #3a9d6a; }
.nb-presence.off { color: #b26a1f; }
.nb-presence.off::before { content: "○ "; }
.nb-block.nb-remote-lock { outline: 2px solid rgba(58,157,106,0.55); outline-offset: 2px; border-radius: 6px; }
.nb-lock-tag { display: inline-block; font-size: 0.74em; color: #2f6f4f; background: rgba(58,157,106,0.14); border-radius: 10px; padding: 1px 8px; margin-bottom: 4px; }

/* ---- Notizbuch: Hinweis/Callout, Video ---- */
.nb-callout { border-left: 4px solid #667; border-radius: 6px; padding: 8px 12px; margin: 4px 0; background: #f4f6f9; }
.nb-callout-head { font-size: 0.78em; font-weight: 600; margin-bottom: 3px; opacity: 0.85; }
.nb-callout-head select { font-size: 0.9em; }
.nb-callout-body { white-space: pre-wrap; outline: none; }
.nb-callout-info { border-left-color: #2f6fbf; background: rgba(47,111,191,0.08); }
.nb-callout-merke { border-left-color: #2f6f4f; background: rgba(47,111,79,0.10); }
.nb-callout-warnung { border-left-color: #b23b3b; background: rgba(178,59,59,0.09); }
.nb-callout-aufgabe { border-left-color: #9a6a1f; background: rgba(154,106,31,0.10); }
.nb-media-video { max-width: 100%; border-radius: 6px; }
.nb-review-row { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }

/* Druck-Callout */
.pb-callout { border-left: 4px solid #667; border-radius: 6px; padding: 8px 12px; margin: 8px 0; background: #f4f6f9; }
.pb-callout-label { font-weight: 600; font-size: 0.8em; display: block; margin-bottom: 2px; }
.pb-callout-info { border-left-color: #2f6fbf; background: rgba(47,111,191,0.08); }
.pb-callout-merke { border-left-color: #2f6f4f; background: rgba(47,111,79,0.10); }
.pb-callout-warnung { border-left-color: #b23b3b; background: rgba(178,59,59,0.09); }
.pb-callout-aufgabe { border-left-color: #9a6a1f; background: rgba(154,106,31,0.10); }

/* Kursnotizbuch: Schuelerseiten-Zeile mit Loeschknopf */
.nb-pagerow { display: flex; gap: 4px; align-items: stretch; }
.nb-pagerow .nb-pageitem { flex: 1; }
.nb-pagedel { background: #fff; border: 1px solid #e6ebee; border-radius: 8px; padding: 0 10px; cursor: pointer; color: #b0483f; }
.nb-pagedel:hover { border-color: #b0483f; }
.nb-secmanage { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }

/* Dateien: eingebetteter Collabora-Editor (CSP-konform ohne Inline-Styles) */
.drive-editor-frame { width: 100%; height: 80vh; border: 1px solid #e6ebee; border-radius: 8px; background: #fff; }

/* ==========================================================================
   SchulNovum Pulse Redesign 2026: heller, lebendiger, markennaeher.
   Bewusst als Override-Schicht am Dateiende, BITV-Kontraste bleiben erhalten.
   ========================================================================== */

body {
  background:
    radial-gradient(1200px 400px at 85% -10%, rgba(122, 77, 255, 0.10), transparent 60%),
    radial-gradient(900px 380px at -10% 0%, rgba(255, 45, 141, 0.07), transparent 55%),
    #f7f4f9;
}

/* Topbar: Night Plum mit Pulse-Verlaufslinie */
.topbar {
  background: var(--sn-night-plum, #16051f);
  border-bottom: 0;
  box-shadow: inset 0 -3px 0 0 transparent;
  border-image: linear-gradient(112deg, #ff2d8d 0%, #7a4dff 42%, #00d7ff 100%) 1;
  border-bottom: 3px solid;
}

.brand-word { color: #ffffff; }

.topnav a {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  color: #f5eefc;
  font-weight: 600;
  min-height: 36px;
  padding: 7px 14px;
  transition: background 0.15s ease;
}

.topnav a:hover { background: rgba(255, 255, 255, 0.18); }

.topnav .identity { color: #cdbfd8; }
.topnav .active-site { color: #9fe8ff; font-weight: 700; }

.topnav button {
  background: linear-gradient(112deg, #b0005c, #4c1fb8);
  border-radius: 999px;
  min-height: 36px;
  padding: 7px 16px;
}

.topnav .notification-pill {
  background: var(--sn-mango, #ffb000);
  border: 0;
  color: #16051f;
  font-weight: 800;
}

.topnav .school-switch select {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  color: #ffffff;
  padding: 6px 10px;
}

/* Flaechen: Karten statt grauer Bloecke */
.shell { max-width: 1240px; }

.grid-section {
  background: var(--surface, #ffffff);
  border: 1px solid rgba(122, 77, 255, 0.10);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(22, 5, 31, 0.05);
  margin-top: 24px;
  padding: 22px 24px;
}

.grid-section .grid-section {
  box-shadow: none;
  border-color: rgba(22, 5, 31, 0.06);
}

.portal-head {
  background: var(--surface, #ffffff);
  border: 1px solid rgba(122, 77, 255, 0.10);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(22, 5, 31, 0.05);
}

.portal-head h1 { font-size: 1.9rem; letter-spacing: -0.02em; }

.eyebrow {
  background: linear-gradient(112deg, #b0005c, #4c1fb8);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Buttons */
button,
.button-link,
.login-form button,
.stack-form button {
  border-radius: 10px;
  transition: filter 0.15s ease, transform 0.1s ease;
}

button:hover, .button-link:hover { filter: brightness(1.08); }
button:active, .button-link:active { transform: translateY(1px); }

.button-link,
.login-form button,
.stack-form button,
.form-actions button {
  background: linear-gradient(112deg, #b0005c, #4c1fb8);
}

.button-link.secondary,
button.secondary {
  background: #f4ecfa;
  color: #4c1fb8;
}

/* Formulare */
input, select, textarea {
  border-radius: 10px;
}

input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible, a:focus-visible {
  outline: 3px solid var(--sn-mango, #ffb000);
  outline-offset: 1px;
}

/* Modul-Kacheln mit Bild */
.module-card, .area-card, .tool-card, .suite-card, .workbench-card {
  border-radius: 14px;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.module-card-link:hover {
  border-color: rgba(122, 77, 255, 0.45);
  box-shadow: 0 16px 34px rgba(76, 31, 184, 0.16);
  transform: translateY(-3px);
}

.module-card-visual {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
}

.module-card-img {
  aspect-ratio: 16 / 9;
  display: block;
  object-fit: cover;
  width: 100%;
}

.module-card-body {
  display: block;
  padding: 14px 16px 16px;
}

.module-card-body h3 { margin: 0 0 6px; }
.module-card-body p { color: var(--muted, #5f6f7d); margin: 0; }

/* Kennzahlen */
.stat-card {
  background: linear-gradient(160deg, #fff7fc, #f4ecfa);
  border: 1px solid rgba(122, 77, 255, 0.14);
  border-radius: 14px;
}

.stat-card .stat-value, .stat-value {
  color: #4c1fb8;
  font-weight: 800;
}

/* Tabellen */
.data-table thead th {
  background: #f8f3fb;
  border-bottom: 2px solid rgba(122, 77, 255, 0.18);
}

.data-table tbody tr:hover { background: #fdf8ff; }

/* Stundenchips */
.lesson-chip {
  border-radius: 999px;
  transition: transform 0.12s ease;
}

.lesson-chip:hover { transform: translateY(-1px); }

.lesson-chip.active {
  background: linear-gradient(112deg, #b0005c, #4c1fb8);
  border-color: transparent;
  color: #ffffff;
}

/* Panels und Meldungen */
.panel, details.panel {
  border-radius: 12px;
}

.message {
  background: #ffffff;
  border-left: 4px solid #b0005c;
  border-radius: 10px;
  box-shadow: 0 8px 22px rgba(22, 5, 31, 0.08);
}

/* Login mit Hero-Bild */
.auth-split {
  display: grid;
  gap: 24px;
  grid-template-columns: 1.2fr 1fr;
  margin-top: 32px;
}

.auth-hero {
  background: var(--sn-night-plum, #16051f);
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.auth-hero img {
  aspect-ratio: 16 / 9;
  display: block;
  object-fit: cover;
  width: 100%;
}

.auth-hero-text { color: #f5eefc; padding: 20px 24px 24px; }
.auth-hero-text h2 { color: #ffffff; margin: 0 0 8px; }
.auth-hero-text p { color: #cdbfd8; margin: 0; }

.auth-split .auth-panel { margin-top: 0; }

@media (max-width: 900px) {
  .auth-split { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .module-card, .lesson-chip, button, .button-link { transition: none; }
}