:root {
  --bg: #f4f7fb;
  --panel: #ffffff;
  --panel-alt: #eef4ff;
  --primary: #0f4c81;
  --primary-strong: #0a355d;
  --accent: #4ea1ff;
  --text: #1d2430;
  --muted: #5d697a;
  --border: #dfe8f3;
  --shadow: 0 10px 30px rgba(15, 76, 129, 0.12);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  background: linear-gradient(180deg, #edf5ff 0%, #f8fafc 100%);
  color: var(--text);
}

.portal-shell {
  max-width: 1180px;
  margin: 0 auto;
  padding: 40px 20px 80px;
}

.portal-header {
  margin-bottom: 20px;
}

.eyebrow {
  display: inline-block;
  margin: 0 0 8px;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--primary);
  font-weight: 700;
}

h1 {
  margin: 0;
  font-size: clamp(2rem, 4vw, 3rem);
}

.portal-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin: 0 0 24px;
}

.stat-card {
  background: linear-gradient(135deg, rgba(255,255,255,0.96), rgba(240,246,255,0.96));
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 18px 18px 16px;
  box-shadow: var(--shadow);
}

.stat-card span {
  display: block;
  color: var(--muted);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 10px;
}

.stat-card strong {
  display: block;
  color: var(--primary-strong);
  font-size: clamp(1.8rem, 2vw, 2.4rem);
  letter-spacing: -0.05em;
}

#moduleGrid {
  display: grid;
  gap: 24px;
}

.grade-section {
  background: linear-gradient(180deg, rgba(255,255,255,0.7), rgba(248,251,255,0.9));
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 20px 20px 18px;
  box-shadow: 0 14px 28px rgba(15, 76, 129, 0.05);
}

.grade-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.grade-kicker {
  margin: 0 0 4px;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  font-weight: 700;
}

.grade-header h2 {
  margin: 0;
  font-size: clamp(1.7rem, 2vw, 2.2rem);
  color: var(--primary-strong);
  letter-spacing: -0.04em;
}

.grade-header span {
  color: var(--muted);
  font-weight: 700;
  background: rgba(78, 161, 255, 0.08);
  padding: 0.5rem 0.8rem;
  border-radius: 999px;
}

.grade-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}

@media (max-width: 1100px) {
  .grade-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  .grade-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .grade-grid {
    grid-template-columns: 1fr;
  }
}

.module-card {
  position: relative;
  display: flex;
  min-height: 210px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.18);
  text-decoration: none;
  color: #fff;
  box-shadow: var(--shadow);
  background-size: cover;
  background-position: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.module-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15, 76, 129, 0.2), rgba(10, 53, 93, 0.82));
}

.module-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 32px rgba(15, 76, 129, 0.22);
}

.module-card-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 14px 14px 12px;
}

.module-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 8px;
}

.module-card h3 {
  margin: 0;
  font-size: 1rem;
  line-height: 1.3;
  color: #fff;
}

.module-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 999px;
  font-size: 0.7rem;
  padding: 5px 8px;
  font-weight: 700;
  white-space: nowrap;
  backdrop-filter: blur(3px);
}

.module-card p {
  margin: 0;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.45;
  min-height: 42px;
  font-size: 0.84rem;
}

.module-card .meta {
  margin-top: 12px;
  display: inline-block;
  font-weight: 700;
  color: #fff;
  font-size: 0.8rem;
}

.module-page {
  max-width: 1280px;
  margin: 0 auto;
  padding: 32px 20px 80px;
}

.module-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  background: linear-gradient(135deg, rgba(255,255,255,0.96), rgba(250,245,252,0.96));
  border: 1px solid rgba(18, 24, 32, 0.05);
  border-bottom: none;
  border-radius: 24px 24px 0 0;
  padding: 26px 30px 24px;
  box-shadow: 0 14px 28px rgba(15, 23, 42, 0.05);
  position: relative;
  overflow: hidden;
}

.module-topbar::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 160px;
  background: linear-gradient(180deg, rgba(255, 109, 157, 0.12), rgba(138, 99, 255, 0.04));
  border-radius: 0 30px 30px 0;
}

.module-topbar__intro {
  position: relative;
  z-index: 1;
  flex: 1;
}

.module-back-link {
  display: inline-block;
  margin-bottom: 12px;
  color: var(--primary, #0f4c81);
  text-decoration: none;
  font-weight: 700;
}

.module-topbar h1 {
  margin: 0;
  font-size: clamp(2rem, 4vw, 2.6rem);
  color: var(--primary-strong, #0a355d);
  letter-spacing: -0.03em;
}

.module-topbar__badge {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 18px;
  background: linear-gradient(135deg, #ffb6d6 0%, #f00075 30%, #8a63ff 100%);
  color: #fff;
  font-size: 2rem;
  box-shadow: 0 12px 22px rgba(15, 76, 129, 0.18);
}

.module-page-content {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 24px;
  margin-top: 0;
  background: rgba(255,255,255,0.3);
  border: 1px solid rgba(18, 24, 32, 0.05);
  border-top: none;
  border-radius: 0 0 24px 24px;
  padding: 24px 20px 20px;
  box-shadow: 0 14px 28px rgba(15, 23, 42, 0.05);
}

.module-sidebar {
  position: sticky;
  top: 20px;
  align-self: start;
  background: rgba(255,255,255,0.92);
  border: 1px solid var(--border, #dfe8f3);
  border-radius: 20px;
  padding: 18px 16px;
  box-shadow: 0 10px 24px rgba(15, 76, 129, 0.08);
}

.module-sidebar__header h2 {
  margin: 10px 0 0;
  font-size: clamp(2rem, 1.2vw + 1.3rem, 2.8rem);
  line-height: 1.1;
  color: var(--primary-strong, #0a355d);
}

.module-chip {
  display: inline-block;
  padding: 6px 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(246, 235, 255, 0.8), rgba(214, 234, 255, 0.8));
  color: var(--primary, #0f4c81);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.module-nav {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

.module-nav__item {
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
  padding: 15px 16px;
  border-radius: 16px;
  color: var(--text, #1d2430);
  text-decoration: none;
  font-weight: 700;
  background: linear-gradient(135deg, rgba(255,255,255,1), rgba(250,248,255,1));
  border: 1px solid rgba(18, 24, 32, 0.06);
  box-shadow: 0 6px 12px rgba(17, 24, 39, 0.03);
  transition: background 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.module-nav__item::before {
  content: "✨";
  position: static;
  display: inline-block;
  flex-shrink: 0;
  width: 1em;
  font-size: 0.9rem;
  line-height: 1;
  opacity: 0.8;
  color: #8f7e5a;
  transform: none;
}

.module-nav__item:hover,
.module-nav__item.active {
  background: linear-gradient(135deg, #ffedf4 0%, #f3ebff 100%);
  border-color: rgba(138, 99, 255, 0.25);
  color: #2d1d4f;
  transform: translateX(2px);
  box-shadow: 0 12px 22px rgba(138, 99, 255, 0.12);
}

.module-nav__item.active::before {
  content: "📌";
  opacity: 1;
  color: #d93057;
  font-size: 1rem;
}

.module-main {
  min-width: 0;
  display: grid;
  gap: 20px;
}

.module-section {
  display: none;
  background: rgba(255,255,255,0.93);
  border: 1px solid var(--border, #dfe8f3);
  border-radius: 18px;
  padding: 24px;
  margin-bottom: 0;
  box-shadow: 0 10px 28px rgba(15, 76, 129, 0.06);
}

.module-section.active {
  display: block;
}

.module-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}

.module-section-tag {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(78, 161, 255, 0.12);
  color: var(--primary, #0f4c81);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.module-section h2 {
  margin: 0;
  font-size: clamp(1.3rem, 2vw, 1.8rem);
  color: var(--primary-strong, #0a355d);
}

.module-section p,
.module-section li,
.module-section ol {
  line-height: 1.7;
  color: var(--text, #1d2430);
}

.module-section ul,
.module-section ol {
  padding-left: 20px;
}

.learning-flow,
.merksatz-box,
.example-box,
.exercise-box,
.task-check-box,
.task-tip,
.hint-box,
.mini-check {
  margin-top: 24px;
  padding: 22px 24px;
  border-radius: 22px;
  border: 1px solid rgba(18, 24, 32, 0.05);
  box-shadow: 0 12px 22px rgba(17, 24, 39, 0.05);
}

.learning-flow {
  background: linear-gradient(135deg, #eafcff 0%, #fdf2ff 100%);
  border-left: 6px solid #3eb7dd;
}

.learning-flow h3 {
  margin-top: 0;
  margin-bottom: 10px;
  color: #0f3c5e;
  font-size: 1.15rem;
  display: flex;
  align-items: center;
  gap: 8px;
}

.learning-flow h3::before {
  content: "🧭";
  font-size: 0.92em;
}

.learning-flow ol {
  margin: 0;
  padding-left: 20px;
  line-height: 1.7;
}

.module-callout {
  margin-top: 18px;
  background: linear-gradient(135deg, rgba(78,161,255,0.08), rgba(15,76,129,0.05));
  border: 1px solid rgba(78,161,255,0.18);
  border-radius: 14px;
  padding: 18px 20px;
}

.module-callout h3 {
  margin: 0 0 8px;
  color: var(--primary-strong, #0a355d);
}

.module-checklist {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.module-checklist li {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,0.7);
  border: 1px solid var(--border, #dfe8f3);
  border-radius: 12px;
  padding: 10px 12px;
}

.module-checklist li::before {
  content: "✓";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(15, 76, 129, 0.1);
  font-weight: 700;
  color: var(--primary, #0f4c81);
}

@media (max-width: 900px) {
  .module-page-content {
    grid-template-columns: 1fr;
  }

  .module-sidebar {
    position: static;
  }
}

/* =========================================================
   PEPPIGE PORTAL-ÜBERSICHT
   Die Modulansichten darunter bleiben bewusst unverändert.
   ========================================================= */

.portal-shell { max-width: 1260px; padding: 28px 24px 90px; }

.portal-header {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(300px, .55fr);
  align-items: center;
  min-height: 330px;
  margin-bottom: 22px;
  padding: clamp(30px, 5vw, 62px);
  overflow: hidden;
  border-radius: 34px;
  color: #fff;
  background:
    radial-gradient(circle at 83% 18%, rgba(255,255,255,.18) 0 6%, transparent 6.3%),
    radial-gradient(circle at 90% 78%, rgba(255,207,92,.28) 0 9%, transparent 9.3%),
    linear-gradient(125deg, #102b4e 0%, #134f7d 48%, #6a4ce0 100%);
  box-shadow: 0 24px 60px rgba(21, 54, 93, .22);
}

.portal-header::before,
.portal-header::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; }
.portal-header::before { width: 280px; height: 280px; left: -90px; bottom: -190px; border: 38px solid rgba(46,214,192,.28); }
.portal-header::after { width: 130px; height: 130px; top: -48px; right: 30%; background: rgba(255,112,119,.24); }
.portal-header__copy { position: relative; z-index: 2; max-width: 700px; }

.portal-header .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  padding: 8px 12px;
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 999px;
  color: #dffaf5;
  background: rgba(255,255,255,.1);
  backdrop-filter: blur(7px);
}

.portal-header h1 { max-width: 760px; margin: 0; color: #fff; font-size: clamp(2.55rem, 6vw, 5rem); line-height: .96; letter-spacing: -.065em; }
.portal-header h1 span { color: #ffcf5c; }
.portal-intro { max-width: 610px; margin: 22px 0 0; color: rgba(255,255,255,.84); font-size: clamp(1rem, 1.8vw, 1.2rem); line-height: 1.65; }

.portal-hero-art { position: relative; z-index: 2; width: min(100%, 320px); aspect-ratio: 1; justify-self: end; }
.hero-device {
  position: absolute;
  inset: 54px 32px 54px 34px;
  display: grid;
  place-items: center;
  border: 9px solid rgba(255,255,255,.92);
  border-radius: 36px;
  color: #102b4e;
  background: linear-gradient(145deg, #dffaf5, #fff 48%, #f4ebff);
  box-shadow: 0 24px 45px rgba(7,25,52,.32), inset 0 0 0 2px rgba(16,43,78,.08);
  transform: rotate(-4deg);
}
.hero-device::before { content: ""; position: absolute; width: 46%; height: 9px; left: 27%; bottom: -26px; border-radius: 10px; background: #fff; box-shadow: 0 11px 0 9px rgba(255,255,255,.3); }
.hero-device span { position: absolute; width: 13px; height: 13px; top: 16px; left: 18px; border-radius: 50%; background: #ff7077; box-shadow: 22px 0 #ffcf5c, 44px 0 #2ed6c0; }
.hero-device strong { display: grid; place-items: center; width: 112px; height: 112px; border-radius: 50%; color: #fff; font-size: 1.55rem; letter-spacing: .06em; background: linear-gradient(135deg, #ff7077, #8a63ff); box-shadow: 0 14px 24px rgba(106,76,224,.28); }
.hero-device i { position: absolute; right: 18px; bottom: 18px; width: 30px; height: 22px; border: 4px solid #2ed6c0; border-width: 4px 0 0 4px; transform: rotate(-10deg); }

.hero-orbit { position: absolute; z-index: 3; display: grid; place-items: center; min-width: 58px; height: 58px; padding: 0 10px; border: 3px solid rgba(255,255,255,.85); border-radius: 18px; color: #fff; font-weight: 900; box-shadow: 0 14px 28px rgba(7,25,52,.24); }
.hero-orbit--one { left: 2px; top: 46px; background: #ff7077; transform: rotate(-12deg); }
.hero-orbit--two { right: 0; top: 18px; background: #2ed6c0; color: #102b4e; transform: rotate(9deg); }
.hero-orbit--three { right: 5px; bottom: 35px; background: #ffcf5c; color: #102b4e; transform: rotate(-6deg); }

.portal-stats { gap: 14px; margin: 0 0 26px; }
.stat-card { display: flex; align-items: center; gap: 14px; min-height: 94px; padding: 15px; border: 1px solid rgba(16,43,78,.08); border-radius: 22px; background: #fff; box-shadow: 0 12px 28px rgba(23,58,95,.08); }
.stat-icon { display: grid !important; flex: 0 0 50px; place-items: center; width: 50px; height: 50px; margin: 0 !important; border-radius: 16px; color: #fff !important; font-size: 1.25rem !important; letter-spacing: 0 !important; background: #4ea1ff; }
.stat-card--violet .stat-icon { background: #8268e8; }
.stat-card--yellow .stat-icon { color: #102b4e !important; background: #ffcf5c; }
.stat-card--green .stat-icon { color: #102b4e !important; background: #2ed6c0; }
.stat-card div > span { margin: 0 0 4px; font-size: .67rem; }
.stat-card strong { font-size: clamp(1.35rem, 2vw, 1.9rem); letter-spacing: -.035em; }

#moduleGrid { gap: 28px; }
.grade-section { position: relative; padding: 24px; overflow: hidden; border: 1px solid rgba(16,43,78,.08); border-radius: 30px; background: rgba(255,255,255,.78); box-shadow: 0 16px 42px rgba(23,58,95,.08); }
.grade-section::after { content: ""; position: absolute; z-index: -1; width: 220px; height: 220px; right: -120px; top: -130px; border-radius: 50%; background: rgba(78,161,255,.1); }
.grade-header { margin-bottom: 20px; }
.grade-title { display: flex; align-items: center; gap: 14px; }
.grade-number { display: grid; place-items: center; width: 62px; height: 62px; border-radius: 19px; color: #fff; font-size: 1.65rem; font-weight: 900; background: linear-gradient(145deg, #134f7d, #6a4ce0); box-shadow: 0 11px 20px rgba(44,65,132,.2); }
.grade-kicker { margin-bottom: 3px; color: #6a4ce0; }
.grade-header h2 { font-size: clamp(1.45rem, 2vw, 2rem); }
.grade-count { padding: .58rem .9rem !important; border: 1px solid rgba(106,76,224,.12); color: #54409e !important; background: #f1edff !important; }
.grade-grid { gap: 18px; }

.module-card {
  --card-a: #2078c8;
  --card-b: #6a4ce0;
  --card-soft: #e8f3ff;
  display: grid;
  grid-template-rows: 150px 1fr;
  min-height: 360px;
  overflow: hidden;
  border: 1px solid rgba(16,43,78,.09);
  border-radius: 24px;
  color: #16283f;
  background: #fff;
  box-shadow: 0 13px 30px rgba(23,58,95,.11);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.module-card::before { display: none; }
.module-card:hover { border-color: color-mix(in srgb, var(--card-a) 38%, white); transform: translateY(-7px) rotate(-.25deg); box-shadow: 0 24px 42px rgba(23,58,95,.19); }
.module-card:focus-visible { outline: 4px solid color-mix(in srgb, var(--card-a) 35%, transparent); outline-offset: 4px; }
.module-card--crypto { --card-a: #713ad8; --card-b: #ec4d91; --card-soft: #f4ebff; }
.module-card--language { --card-a: #ee6c4d; --card-b: #f5af3d; --card-soft: #fff1e8; }
.module-card--learning { --card-a: #198f82; --card-b: #56c271; --card-soft: #e3f9f2; }
.module-card--ai { --card-a: #4664dc; --card-b: #a14bdc; --card-soft: #ecedff; }
.module-card--database { --card-a: #0a789c; --card-b: #39b8ce; --card-soft: #e4f8fc; }
.module-card--python { --card-a: #2769ad; --card-b: #f0bd3d; --card-soft: #e9f3fb; }
.module-card--coding { --card-a: #ed4d73; --card-b: #f39b3d; --card-soft: #fff0ef; }
.module-card--computer { --card-a: #147b91; --card-b: #39b981; --card-soft: #e4f8f2; }
.module-card--general { --card-a: #305caa; --card-b: #7a62d7; --card-soft: #edf2ff; }
.module-card--logic { --card-a: #24508f; --card-b: #2fb5a0; --card-soft: #e6f6f6; }
.module-card--strategy { --card-a: #b3531f; --card-b: #e9a23b; --card-soft: #fff3e3; }
.module-card--data { --card-a: #1c7a4d; --card-b: #8ac43f; --card-soft: #eaf8e6; }
.module-curriculum { margin: -2px 0 0; color: #55728d; font-size: .78rem; line-height: 1.35; }

.module-visual { position: relative; display: grid; place-items: center; overflow: hidden; background: linear-gradient(135deg, rgba(255,255,255,.14), transparent 45%), linear-gradient(135deg, var(--card-a), var(--card-b)); }
.module-visual::before { content: ""; position: absolute; width: 190px; height: 190px; border: 28px solid rgba(255,255,255,.13); border-radius: 50%; transform: rotate(12deg); }
.module-visual::after { content: ""; position: absolute; width: 86px; height: 86px; left: -30px; bottom: -30px; border-radius: 22px; background: rgba(255,255,255,.14); transform: rotate(24deg); }
.module-icon { position: relative; z-index: 3; display: grid; place-items: center; width: 88px; height: 88px; border: 4px solid rgba(255,255,255,.75); border-radius: 28px; font-size: 3rem; background: rgba(255,255,255,.92); box-shadow: 0 16px 30px rgba(17,36,68,.24); transform: rotate(-5deg); transition: transform .22s ease; }
.module-card:hover .module-icon { transform: rotate(2deg) scale(1.06); }
.visual-tag { position: absolute; z-index: 4; padding: 5px 8px; border: 2px solid rgba(255,255,255,.55); border-radius: 9px; color: #fff; font-size: .61rem; font-weight: 900; letter-spacing: .07em; background: rgba(13,32,61,.24); backdrop-filter: blur(4px); }
.visual-tag--one { left: 13px; top: 16px; transform: rotate(-6deg); }
.visual-tag--two { right: 12px; bottom: 15px; transform: rotate(5deg); }
.visual-dot { position: absolute; z-index: 2; border-radius: 50%; background: #ffcf5c; }
.visual-dot--one { width: 17px; height: 17px; right: 17px; top: 18px; }
.visual-dot--two { width: 10px; height: 10px; left: 24px; bottom: 22px; background: #fff; }

.module-card-inner { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: flex-start; padding: 18px; }
.module-card-topline { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 10px; }
.module-topic { color: var(--card-a); font-size: .66rem; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
.module-badge { flex-shrink: 0; border: 0; color: var(--card-a); background: var(--card-soft); backdrop-filter: none; }
.module-card h3 { margin: 0; color: #14263e; font-size: clamp(1.05rem, 1.5vw, 1.25rem); line-height: 1.2; letter-spacing: -.025em; }
.module-card p { min-height: 0; margin: 9px 0 0; color: #5d697a; font-size: .84rem; line-height: 1.52; }
.module-card .meta { display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding-top: 15px; color: var(--card-a); font-size: .82rem; }
.module-card .meta b { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 50%; color: #fff; background: linear-gradient(135deg, var(--card-a), var(--card-b)); transition: transform .2s ease; }
.module-card:hover .meta b { transform: translateX(3px); }

@media (max-width: 1100px) {
  .portal-header { grid-template-columns: minmax(0, 1.25fr) 280px; }
  .portal-hero-art { width: 280px; }
}

@media (max-width: 820px) {
  .portal-shell { padding: 18px 15px 60px; }
  .portal-header { grid-template-columns: 1fr; min-height: 0; padding: 34px; }
  .portal-header h1 { max-width: 590px; }
  .portal-hero-art { display: none; }
  .portal-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grade-section { padding: 18px; }
}

@media (max-width: 560px) {
  .portal-header { padding: 28px 22px 32px; border-radius: 24px; }
  .portal-header h1 { font-size: 2.55rem; }
  .portal-intro { font-size: .96rem; }
  .portal-stats { grid-template-columns: 1fr 1fr; gap: 10px; }
  .stat-card { min-height: 82px; padding: 11px; gap: 9px; }
  .stat-icon { flex-basis: 40px; width: 40px; height: 40px; border-radius: 13px; }
  .stat-card strong { font-size: 1.2rem; }
  .stat-card div > span { font-size: .57rem; }
  .grade-header { align-items: flex-start; }
  .grade-number { width: 50px; height: 50px; border-radius: 15px; font-size: 1.35rem; }
  .grade-header h2 { font-size: 1.25rem; }
  .grade-count { font-size: .72rem; }
  .module-card { min-height: 345px; }
}

@media (prefers-reduced-motion: reduce) {
  .module-card,
  .module-icon,
  .module-card .meta b { transition: none; }
}

/* Klassenverwaltung: Ergänzungen zum vorhandenen Kacheldesign */
[hidden] { display: none !important; }
.topline { display:flex; flex-wrap:wrap; gap:12px; justify-content:flex-end; align-items:center; margin-bottom:18px; color:#30445f; font-weight:700; }
.topline .brand { margin-right:auto; color:#17314d; font-size:1.05rem; text-decoration:none; font-weight:900; }
.auth-grid,.teacher-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; align-items:start; }
.admin-panel,.empty-state { min-width:0; padding:clamp(20px,3vw,32px); border:1px solid #dce7f2; border-radius:24px; background:#fff; box-shadow:0 14px 32px rgba(28,52,86,.07); }
.admin-panel h2,.admin-panel h3,.admin-panel h4 { color:#172d4d; margin:8px 0; }
.admin-panel p,.empty-state p { line-height:1.55; color:#5d697a; }
.admin-panel code { background:#eef3ff; padding:2px 6px; border-radius:6px; }
.form-stack { display:grid; gap:14px; margin-top:16px; }
.form-stack label { display:grid; gap:6px; min-width:0; color:#283b58; font-weight:700; font-size:.88rem; }
.form-stack input,.form-stack select,.form-stack textarea { width:100%; min-width:0; padding:12px 14px; border:1px solid #cbd9e8; border-radius:12px; color:#18314f; font:inherit; background:#fff; }
.form-stack input:focus-visible,.form-stack textarea:focus-visible,.form-stack select:focus-visible,button:focus-visible,.chapter-list a:focus-visible { outline:3px solid #88b5ff; outline-offset:2px; }
.field-row { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.form-stack button,.personal-code button,.code-dialog button { width:max-content; max-width:100%; border:0; border-radius:12px; background:#173d73; padding:12px 18px; color:white; font-weight:800; font:inherit; cursor:pointer; }
.form-stack button:hover,.personal-code button:hover,.code-dialog button:hover { background:#275aa0; }
.text-link { border:0; padding:0; margin-top:22px; background:none; color:#195c9f; font:inherit; font-weight:700; text-decoration:underline; cursor:pointer; text-align:left; }
.small-button { border:1px solid #cfdbeb; border-radius:10px; padding:8px 11px; background:#f4f8ff; color:#1a3b68; font:inherit; font-size:.82rem; font-weight:800; cursor:pointer; white-space:normal; }
.small-button:hover:not(:disabled) { background:#e2edff; }
.small-button.primary { background:#2055a4; color:#fff; border-color:#2055a4; }
.small-button--danger { margin-left:auto; border-color:#efc4c1; background:#fff5f4; color:#912f34; }
.small-button--danger:hover:not(:disabled) { background:#ffe3e0; }
button:disabled { opacity:.48; cursor:not-allowed; }
.notice { position:fixed; z-index:100; right:18px; bottom:18px; max-width:min(410px,calc(100vw - 36px)); padding:15px 20px; border-radius:14px; color:#125040; background:#e3fcf4; box-shadow:0 6px 25px #23364d33; }
.notice--bad { background:#fff0ee; color:#912f34; }
.secret-code { display:block; width:max-content; max-width:100%; overflow-wrap:anywhere; padding:16px 20px; margin:18px 0; border:2px dashed #b6ccef; border-radius:16px; background:#f3f7ff; font-size:clamp(1.25rem,4vw,1.75rem); letter-spacing:.09em; color:#173d73; }
.personal-code { max-width:700px; }
.section-heading { display:flex; justify-content:space-between; align-items:center; gap:12px; margin:30px 0 18px; }
.section-heading h2 { margin:0; color:#172d4d; font-size:clamp(1.4rem,3vw,2rem); }
.section-heading .eyebrow { margin:0; }
.version-tag { display:block; margin-top:2px; color:#8194ac; font-size:.72rem; font-weight:700; }
.teacher-view-switch { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
@media (max-width:760px) { .section-heading { flex-wrap:wrap; } .section-heading > * { min-width:0; } }
.view-toggle { border:1px solid #cfdbeb; border-radius:999px; padding:8px 14px; background:#f4f8ff; color:#1a3b68; font:inherit; font-size:.82rem; font-weight:800; cursor:pointer; }
.view-toggle.is-active { background:#2055a4; color:#fff; border-color:#2055a4; }
.teacher-view-panel { display:block; }
.class-list { display:grid; gap:22px; margin-top:25px; }
.class-title { display:flex; align-items:start; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.class-title h3 { font-size:1.65rem; }
.class-accordion { display:block; border:1px solid #dfe9f7; border-radius:22px; background:#fff; box-shadow:0 14px 30px rgba(16,56,96,.06); overflow:hidden; }
.class-accordion + .class-accordion { margin-top:18px; }
.class-accordion summary { list-style:none; display:flex; align-items:center; justify-content:space-between; gap:18px; cursor:pointer; padding:20px 22px; }
.class-accordion summary::-webkit-details-marker { display:none; }
.class-accordion summary:focus-visible { outline:3px solid #88b5ff; outline-offset:-3px; }
.class-summary-main { min-width:0; }
.class-summary-main .eyebrow { margin-bottom:6px; }
.class-summary-main h3 { margin:0; font-size:1.6rem; color:#172d4d; }
.class-summary-code { display:grid; gap:4px; background:#eef6ff; border:1px solid #dbe9fb; border-radius:12px; padding:10px 12px; min-width:170px; }
.class-summary-code span { font-size:.72rem; color:#55728d; text-transform:uppercase; letter-spacing:.08em; font-weight:800; }
.class-summary-code strong { color:#114f88; font-size:1.05rem; letter-spacing:.07em; overflow-wrap:anywhere; }
.class-accordion-body { display:grid; gap:18px; padding:0 22px 22px; }
.class-actions { display:flex; flex-wrap:wrap; gap:8px; }
.group-box { display:grid; gap:5px; background:#eef6ff; padding:13px 16px; border-radius:16px; }
.group-box span { color:#52657d; font-size:.78rem; }
.group-box strong { color:#114f88; font-size:1.2rem; letter-spacing:.07em; overflow-wrap:anywhere; }
.group-box button { justify-self:start; margin-top:8px; }
.class-panel h4 { margin:24px 0 12px; }
.assign-list,.pupil-list { display:grid; gap:10px; }
.module-accordion { display:block; border:1px solid #e3eaf3; border-radius:16px; background:#f9fbff; overflow:hidden; }
.module-accordion + .module-accordion { margin-top:10px; }
.module-accordion summary { list-style:none; display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:center; gap:12px; cursor:pointer; padding:14px 16px; }
.module-accordion summary::-webkit-details-marker { display:none; }
.module-accordion summary::after { content:'▾'; color:#36557d; font-size:1.1rem; justify-self:end; transition:transform .2s ease; }
.module-accordion[open] summary::after { transform:rotate(180deg); }
.module-accordion summary:focus-visible { outline:3px solid #88b5ff; outline-offset:-3px; }
.module-accordion-main { min-width:0; }
.module-accordion-main .eyebrow { margin:0 0 4px; color:#55728d; font-size:.7rem; text-transform:uppercase; letter-spacing:.08em; font-weight:800; }
.module-accordion-main h5 { margin:0; color:#172d4d; font-size:1.08rem; line-height:1.3; }
.module-accordion-meta { display:grid; gap:4px; justify-items:end; text-align:right; min-width:150px; }
.module-accordion-meta span { font-size:.72rem; color:#62728a; font-weight:700; }
.module-accordion-meta strong { color:#114f88; font-size:.96rem; }
.module-accordion-body { display:grid; gap:12px; padding:0 16px 16px; }
.assign-row,.pupil-row { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:12px; border:1px solid #e3eaf3; border-radius:14px; padding:13px 15px; min-width:0; }
.assign-row > div:first-child { display:grid; gap:4px; min-width:0; }
.assign-row small { color:#62728a; }
.assign-controls,.pupil-row > span:last-child { display:flex; align-items:center; justify-self:end; flex-wrap:wrap; gap:8px; }
.assign-hint { flex-basis:100%; margin:0 !important; font-size:.82rem; }
.unlock-count { color:#264565; min-width:58px; text-align:center; font-weight:800; }
.code-dialog { width:min(500px,calc(100vw - 32px)); max-height:90vh; border:0; border-radius:20px; box-shadow:0 24px 90px #14294766; padding:26px; }
.code-dialog::backdrop { background:#0e233777; }
.chapter-progress { margin:16px 0 9px; color:#425a75; font-size:.8rem; font-weight:750; }
.chapter-progress-line { display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.module-score-inline { color:var(--card-a); font-weight:850; }
.module-progress-item { display:grid; gap:3px; padding:12px 14px; border:1px solid #e1e9f4; border-radius:14px; background:#f8fbff; }
.module-progress-item strong { color:#172d4d; line-height:1.3; }
.module-progress-item span { color:#2055a4; font-size:.82rem; font-weight:800; }
.module-progress-item small { color:#55728d; font-size:.78rem; }
.progress-rail { height:7px; margin-top:7px; border-radius:100px; background:#e8eff7; overflow:hidden; }
.progress-rail i { display:block; height:100%; background:linear-gradient(90deg,var(--card-a),var(--card-b)); }
.chapter-list { margin:4px 0 14px; padding:0; list-style:none; display:grid; gap:5px; }
.chapter-list li { min-width:0; font-size:.81rem; }
.chapter-list a,.chapter-list li > span { display:flex; justify-content:space-between; gap:8px; padding:7px 9px; border-radius:9px; text-decoration:none; overflow-wrap:anywhere; }
.chapter-list a { color:#173e70; background:var(--card-soft); font-weight:700; }
.chapter-list a:hover { text-decoration:underline; }
.chapter-list li > span { color:#77869a; background:#f6f8fb; }
.module-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:auto; padding-top:12px; }
.module-start { display:flex; justify-content:space-between; color:var(--card-a); text-decoration:none; font-weight:850; }
.module-start:not(.module-start--locked):hover { text-decoration:underline; }
.module-start--teacher { color:#1d4d7a; }
.module-start--locked { color:#78869b; }
.module-card { height:100%; }
.module-card:hover { transform:translateY(-3px); }
.grade-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
.portal-stats { grid-template-columns:repeat(3,minmax(0,1fr)); }
.stat-card strong { overflow-wrap:anywhere; }
.catalog-panel { margin-top:22px; }
.owner-list { display:grid; gap:12px; margin-top:16px; }
.owner-row { display:grid; grid-template-columns:minmax(90px,1fr) minmax(180px,2fr) auto; align-items:end; gap:14px; padding:14px; border:1px solid #e3eaf3; border-radius:14px; }
.owner-row label { display:grid; gap:5px; color:#52657d; font-size:.85rem; font-weight:700; }
.owner-row select { min-width:0; width:100%; padding:9px; border:1px solid #cbd9e8; border-radius:10px; color:#18314f; background:#fff; font:inherit; }
.chapter-toggles { display:flex; flex-wrap:wrap; flex-basis:100%; gap:8px; margin-top:3px; }
.chapter-toggle { border:1px solid #cbd9e8; border-radius:10px; padding:8px 11px; color:#53667d; background:#f6f8fc; font:inherit; font-size:.81rem; cursor:pointer; text-align:left; }
.chapter-toggle--open { border-color:#61aa9b; color:#075748; background:#e7faf4; font-weight:750; }
.chapter-toggle:hover { border-color:#2365af; }
.chapter-toggle--mini { padding:4px 8px; min-width:30px; text-align:center; font-size:.78rem; }
.pupil-chapters { flex-basis:100%; margin-top:8px; border:1px dashed #cbd9e8; border-radius:10px; padding:6px 10px; background:#fbfcfe; }
.pupil-chapters summary { cursor:pointer; font-weight:700; color:#2b4a6a; font-size:.9rem; }
.pupil-chapters summary small { font-weight:500; color:#53667d; }
.pupil-chapters-hint { font-size:.82rem; color:#53667d; margin:6px 0 8px; }
.pupil-chapter-row { display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; padding:6px 0; border-top:1px solid #edf1f6; }
.pupil-chapter-row > span { min-width:180px; font-size:.88rem; }
.pupil-chapter-row > span small { display:block; color:#53667d; }
.pupil-chapter-row--own > span { color:#075748; font-weight:700; }
.pupil-chapter-row .chapter-toggles { flex-basis:auto; margin:0; gap:4px; }
.exam-missing-image { display:inline-block; padding:2px 8px; border:1px dashed #c98d2a; border-radius:8px; background:#fff7e6; color:#7a4f06; font-size:.85em; }
@media (max-width:650px) { .owner-row { grid-template-columns:1fr; } .owner-row button { justify-self:start; } }
@media (max-width:850px) { .grade-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:650px) { .auth-grid,.teacher-actions,.field-row,.grade-grid { grid-template-columns:1fr; } .portal-stats { grid-template-columns:repeat(2,minmax(0,1fr)); } .admin-panel { padding:18px; } .assign-controls { width:100%; } }

/* Prüfungen (exams) */
.choice-set { display:grid; gap:10px; margin:10px 0; }
.choice { display:grid; grid-template-columns:1.25rem minmax(0,1fr); gap:12px; align-items:start; padding:12px 14px; border:1px solid #dfe9f7; border-radius:12px; background:#fbfdff; cursor:pointer; }
.choice:has(input:checked) { border-color:#7a5cff; background:#f2efff; }
.choice input { margin:3px 0 0; accent-color:#7a5cff; }
.simple-table { width:100%; border-collapse:collapse; margin:14px 0; }
.simple-table th,.simple-table td { padding:9px 11px; border-bottom:1px solid #e3eaf3; text-align:left; }
.simple-table th { background:#f3f7fc; color:#264565; }
.exam-input { width:100%; padding:10px 12px; border:1px solid #cbd9e8; border-radius:10px; font:inherit; color:#18314f; background:#fff; }
textarea.exam-input { resize:vertical; min-height:90px; }
.exam-question { padding:16px; margin:14px 0; border:1px solid #dfe9f7; border-radius:16px; background:#fff; }
.exam-question h3 { margin:0 0 8px; font-size:1.02rem; }
.exam-question-text { margin-bottom:10px; color:#33475f; }
.exam-hint { color:#52657d; margin-bottom:10px; }
.exam-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:16px; }
.exam-result-sheet { padding:20px; border:1px solid #dfe9f7; border-radius:16px; background:#fff; max-width:720px; }
.exam-result-score { font-size:1.05rem; font-weight:700; color:#18314f; }
.exam-assign-form { padding:14px; border:1px dashed #cbd9e8; border-radius:14px; margin-bottom:14px; }
.exam-histogram { margin-top:22px; }
.histogram-bars { display:flex; align-items:flex-end; gap:10px; height:140px; margin-top:12px; padding:10px; border:1px solid #e3eaf3; border-radius:14px; background:#f9fbfd; }
.histogram-bar { display:flex; flex-direction:column; align-items:center; justify-content:flex-end; flex:1; gap:4px; height:100%; }
.histogram-bar i { display:block; width:100%; border-radius:6px 6px 0 0; background:linear-gradient(180deg,var(--card-a,#3f6fd6),var(--card-b,#7a5cff)); }
.histogram-count { font-size:.75rem; font-weight:700; color:#264565; }
.histogram-bar small { color:#62728a; font-size:.75rem; }
.exam-answer-preview { padding:10px 12px; border-radius:10px; background:#f6f8fb; color:#33475f; white-space:pre-wrap; }
.grading-card { padding:14px; border:1px solid #dfe9f7; border-radius:14px; margin-bottom:14px; }
.grading-question { margin:10px 0; }
.exam-dialog { width:min(680px,calc(100vw - 32px)); }
.checkbox-field { display:flex; align-items:center; gap:8px; font-weight:600; }
.checkbox-field input { width:auto; }
.exam-timer { padding:8px 14px; border-radius:10px; background:#eef4ff; color:#18314f; font-weight:800; }
.exam-timer--warning { background:#ffe9e2; color:#8a2c0f; }
.exam-preview-banner { padding:10px 14px; margin-bottom:14px; border-radius:10px; background:#fff4d6; color:#6b4c00; font-weight:700; }
.exam-question-feedback { margin-top:8px; padding:8px 12px; border-radius:10px; background:#f0f7f0; color:#245026; font-size:.92rem; }
.exam-list-item-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:6px; }
.trend-panel { margin-bottom:20px; }
.trend-bars { display:flex; align-items:flex-end; gap:4px; height:120px; padding:10px; border:1px solid #e3eaf3; border-radius:14px; background:#f9fbfd; overflow-x:auto; }
.trend-bar { display:flex; flex-direction:column; align-items:center; justify-content:flex-end; min-width:18px; flex:1; gap:4px; height:100%; }
.trend-bar i { display:block; width:100%; border-radius:4px 4px 0 0; background:linear-gradient(180deg,#3f6fd6,#7a5cff); }
.trend-bar small { color:#62728a; font-size:.62rem; writing-mode:vertical-rl; text-orientation:mixed; }
.audit-log-list { display:flex; flex-direction:column; gap:8px; }
.audit-log-entry { padding:10px 12px; border:1px solid #e3eaf3; border-radius:10px; display:flex; justify-content:space-between; gap:12px; background:#fff; }
.audit-log-entry small { color:#62728a; white-space:nowrap; }
/* Prüfungen: Bearbeitung, Werkzeuge der Lehrkraft, Bewertung und Rückgabe */
.form-stack .small-button,.code-dialog .small-button { width:auto; padding:8px 11px; border:1px solid #cfdbeb; border-radius:10px; background:#f4f8ff; color:#1a3b68; font-size:.82rem; font-weight:800; }
.form-stack .small-button:hover:not(:disabled),.code-dialog .small-button:hover:not(:disabled) { background:#e2edff; }
.form-stack .small-button.primary,.code-dialog .small-button.primary { background:#2055a4; border-color:#2055a4; color:#fff; }
.form-stack .small-button.primary:hover:not(:disabled),.code-dialog .small-button.primary:hover:not(:disabled) { background:#2b66bd; }
.form-stack .small-button--danger,.code-dialog .small-button--danger { margin-left:0; border-color:#efc4c1; background:#fff5f4; color:#912f34; }
.small-button:disabled { opacity:.55; cursor:not-allowed; }
.exam-dialog--wide { width:min(1120px,calc(100vw - 24px)); max-height:94vh; padding:22px; }
.dialog-head { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:10px; }
.dialog-head h2 { margin:0; font-size:1.25rem; }
.exam-tools { display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; margin:10px 0; }
.exam-tools small { color:#5d697a; }
.exam-label { display:grid; gap:6px; margin:10px 0; font-weight:700; color:#264565; }
.exam-label small { font-weight:400; color:#5d697a; }
.exam-input--short { max-width:200px; }
.exam-code { font-family:Consolas,"Courier New",monospace; font-size:.92rem; line-height:1.45; tab-size:4; white-space:pre; }
textarea.exam-code--small { min-height:52px; }
.exam-code-view { margin:6px 0; padding:10px 12px; border-radius:10px; background:#14243b; color:#e8f0ff; font-family:Consolas,"Courier New",monospace; font-size:.88rem; white-space:pre-wrap; overflow-x:auto; }
.exam-conn { padding:8px 12px; border-radius:10px; font-size:.82rem; font-weight:800; background:#eaf7ee; color:#1f5b30; }
.exam-conn--pending,.exam-conn--saving { background:#eef4ff; color:#1a3b68; }
.exam-conn--offline,.exam-conn--error { background:#ffe9e2; color:#8a2c0f; }
.exam-run { display:grid; gap:14px; }
.exam-nav { display:flex; flex-wrap:wrap; align-items:center; gap:6px; padding:10px; border:1px solid #dfe9f7; border-radius:14px; background:#fff; }
.exam-nav-item { position:relative; min-width:40px; height:40px; padding:0 10px; border:2px solid #cfdbeb; border-radius:10px; background:#fff; color:#1a3b68; font:inherit; font-weight:800; cursor:pointer; }
.exam-nav-item.is-answered { background:#e3f1ff; border-color:#8db7e8; }
.exam-nav-item.is-flagged::after { content:"⚑"; position:absolute; top:-9px; right:-7px; font-size:.8rem; color:#c2410c; }
.exam-nav-item.is-current { border-color:#2055a4; box-shadow:0 0 0 3px #2055a433; }
.exam-nav-item.is-good { background:#e5f6ea; border-color:#7cc595; }
.exam-nav-item.is-mid { background:#fff6dd; border-color:#e5c26b; }
.exam-nav-item.is-bad { background:#fdeceb; border-color:#e7a6a1; }
.exam-nav-overview { margin-left:auto; }
.exam-nav-count { color:#5d697a; font-size:.85rem; }
.exam-question--page { margin:0; padding:22px; }
.exam-q-head { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:8px; }
.exam-q-head h3,.exam-q-head h4 { margin:0; }
.exam-q-head .eyebrow { margin-bottom:4px; }
.exam-q-points { flex:none; padding:6px 10px; border-radius:999px; background:#eef4ff; color:#1a3b68; font-weight:800; font-size:.85rem; }
.exam-q-points.is-good { background:#e5f6ea; color:#1f5b30; }
.exam-q-points.is-mid { background:#fff6dd; color:#6b4c00; }
.exam-q-points.is-bad { background:#fdeceb; color:#8a2c26; }
.exam-pager { display:flex; justify-content:space-between; gap:10px; }
.exam-overview { padding:20px; border:1px solid #dfe9f7; border-radius:16px; background:#fff; }
.exam-overview h3 { margin-top:0; }
.exam-overview-list { display:grid; gap:6px; padding:0; list-style:none; }
.exam-overview-item { display:flex; justify-content:space-between; gap:12px; width:100%; padding:10px 12px; border:1px solid #dfe9f7; border-radius:10px; background:#fbfdff; color:inherit; font:inherit; text-align:left; cursor:pointer; }
.exam-overview-item:hover { background:#f0f6ff; }
.exam-overview-state { font-weight:700; font-size:.85rem; }
.exam-overview-state.is-good,.py-test-summary.is-good,.blk-status.is-good,.grading-state.is-good { color:#1f6a35; }
.exam-overview-state.is-open,.grading-state.is-open { color:#a14f0b; }
.grading-state.is-mid { color:#1a3b68; }
.exam-done { padding:24px; border:1px solid #dfe9f7; border-radius:16px; background:#fff; max-width:640px; }
.sql-schema { margin:8px 0; padding:8px 12px; border:1px solid #dfe9f7; border-radius:10px; background:#f8fbff; font-size:.9rem; }
.sql-schema summary { cursor:pointer; font-weight:700; color:#264565; }
.sql-schema ul { margin:8px 0 2px; padding-left:18px; }
.sql-result-scroll { max-height:340px; overflow:auto; border:1px solid #e3eaf3; border-radius:10px; }
.sql-table { margin:0; font-size:.86rem; }
.sql-table th { position:sticky; top:0; }
.sql-error { padding:8px 12px; border-radius:10px; background:#fdeceb; color:#8a2c26; white-space:pre-wrap; }
.py-output { margin:8px 0; padding:10px 12px; min-height:2.5em; max-height:260px; overflow:auto; border-radius:10px; background:#14243b; color:#d8f5d0; font-family:Consolas,"Courier New",monospace; font-size:.88rem; white-space:pre-wrap; }
.py-output.is-bad { color:#ffd2cc; }
.py-test-summary { margin:8px 0 4px; font-weight:800; }
.py-test-summary.is-bad { color:#8a2c26; }
.py-test-list { margin:0 0 8px; padding-left:20px; font-size:.88rem; }
.py-test-list li { display:flex; flex-wrap:wrap; gap:4px 12px; margin:3px 0; }
.py-test-list li.is-good strong { color:#1f6a35; }
.py-test-list li.is-bad strong { color:#a12a22; }
.py-test-list code { white-space:pre-wrap; }
/* Blockwelt */
.blk-editor { display:grid; grid-template-columns:minmax(220px,340px) minmax(0,1fr); gap:18px; align-items:start; }
.blk-world { display:grid; grid-template-columns:repeat(var(--cols),1fr); gap:3px; padding:6px; border-radius:12px; background:#cfdbeb; max-width:340px; }
.blk-cell { display:grid; place-items:center; aspect-ratio:1; border-radius:6px; background:#fff; font-size:1.3rem; color:#c58a00; user-select:none; }
.blk-cell--wall { background:#34465f; }
.blk-cell--goal { background:#fff3c4; }
.blk-cell--start { box-shadow:inset 0 0 0 2px #8db7e8; }
[data-world-cell] { cursor:pointer; }
[data-world-cell]:focus-visible { outline:3px solid #2055a4; }
.blk-robot { color:#2055a4; font-size:1.35rem; }
.blk-robot--crash { color:#c0262d; }
.blk-legend { font-size:.82rem; }
.blk-status { min-height:1.3em; font-weight:700; }
.blk-status.is-bad { color:#a12a22; }
.blk-palette { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px; }
.blk-palette-item,.code-dialog .blk-palette-item { width:auto; padding:7px 10px; border:0; border-radius:8px; color:#fff; font:inherit; font-size:.85rem; font-weight:800; cursor:pointer; }
.blk-node--forward,.blk-node--left,.blk-node--right,.code-dialog .blk-node--forward,.code-dialog .blk-node--left,.code-dialog .blk-node--right { background:#2f6fd0; }
.blk-node--repeat,.blk-node--until,.code-dialog .blk-node--repeat,.code-dialog .blk-node--until { background:#d97b12; }
.blk-node--if,.blk-node--ifElse,.code-dialog .blk-node--if,.code-dialog .blk-node--ifElse { background:#7a4fd3; }
.blk-program { padding:10px; min-height:90px; border:1px dashed #b9c9de; border-radius:12px; background:#f8fbff; }
.blk-list { margin:0; padding:0; list-style:none; display:grid; gap:4px; }
.blk-node { border-radius:8px; color:#fff; }
.blk-node .blk-list { margin:4px 0 6px 18px; padding:6px; border-radius:6px; background:#ffffffd9; }
.blk-head { display:flex; align-items:center; flex-wrap:wrap; gap:6px; padding:6px 8px; font-weight:800; font-size:.88rem; }
.blk-head input { width:3.6em; padding:2px 4px; border:0; border-radius:5px; font:inherit; }
.blk-head select { padding:2px 4px; border:0; border-radius:5px; font:inherit; }
.blk-controls { display:flex; gap:3px; margin-left:auto; }
.blk-controls button,.code-dialog .blk-controls button { width:auto; padding:1px 7px; border:0; border-radius:5px; background:#ffffff40; color:#fff; font:inherit; font-size:.8rem; cursor:pointer; }
.blk-controls button:hover,.code-dialog .blk-controls button:hover { background:#ffffff70; }
.blk-else { padding:2px 8px; font-weight:800; font-size:.82rem; }
.blk-slot-button,.code-dialog .blk-slot-button { width:100%; padding:4px 8px; border:1px dashed #b9c9de; border-radius:6px; background:transparent; color:#5d697a; font:inherit; font-size:.8rem; text-align:left; cursor:pointer; }
.blk-slot-button.is-active,.code-dialog .blk-slot-button.is-active { border-style:solid; border-color:#2055a4; background:#e3f1ff; color:#1a3b68; font-weight:800; }
.blk-review { display:grid; grid-template-columns:minmax(0,1fr) minmax(160px,240px); gap:14px; align-items:start; }
.blk-review .blk-world { max-width:240px; }
/* Antworten und Rückgabe */
.answer-options { margin:6px 0; padding:0; list-style:none; display:grid; gap:4px; }
.answer-options li { display:flex; gap:8px; align-items:baseline; padding:6px 10px; border:1px solid #e3eaf3; border-radius:8px; }
.answer-options li.is-chosen { background:#f2efff; border-color:#b9a9ff; }
.answer-options li.is-correct { border-color:#7cc595; }
.answer-key { margin-left:auto; color:#1f6a35; font-size:.8rem; font-weight:800; }
.answer-key-line { margin:4px 0; color:#1f6a35; font-size:.9rem; }
.exam-answer-empty { color:#8592a3; font-style:italic; }
.exam-return { max-width:900px; }
.exam-return .exam-nav { margin:10px 0 4px; }
.exam-return-q { margin:16px 0; padding:16px; border:1px solid #dfe9f7; border-radius:14px; break-inside:avoid; }
.exam-return-q h5,.exam-question-feedback h5,.return-comment h5,.return-rubric h4 { margin:12px 0 4px; font-size:.9rem; color:#264565; }
.return-comment { padding:4px 12px 8px; border-left:4px solid #2055a4; border-radius:6px; background:#f3f7ff; }
.return-comment p { margin:4px 0; white-space:pre-wrap; }
.return-rubric ul { margin:0; padding:0; list-style:none; display:grid; gap:3px; }
.return-rubric li { display:grid; grid-template-columns:1.4em minmax(0,1fr) auto; gap:6px; font-size:.9rem; }
.return-rubric li.is-good span:first-child { color:#1f6a35; font-weight:800; }
.return-rubric li.is-open { color:#6b7787; }
/* Fragen-Editor */
.qe-layout { display:grid; grid-template-columns:minmax(220px,300px) minmax(0,1fr); gap:20px; align-items:start; }
.qe-list ol { margin:0; padding:0; list-style:none; display:grid; gap:6px; }
.qe-list li { display:flex; gap:4px; align-items:stretch; border:1px solid #dfe9f7; border-radius:10px; background:#fbfdff; }
.qe-list li.is-selected { border-color:#2055a4; background:#eef4ff; }
.code-dialog .qe-item { flex:1; display:grid; gap:2px; width:auto; padding:8px 10px; border:0; background:transparent; color:#18314f; text-align:left; font-weight:400; }
.code-dialog .qe-item:hover { background:#eef4ff; }
.qe-item small { color:#5d697a; }
.qe-item-actions { display:flex; align-items:center; gap:2px; padding-right:4px; }
.code-dialog .qe-item-actions button { width:auto; padding:3px 7px; border:0; border-radius:6px; background:#e8eef7; color:#1a3b68; font-weight:800; }
.code-dialog .qe-item-actions button:disabled { opacity:.35; }
.qe-new-label { margin:14px 0 6px; font-weight:800; color:#264565; }
.qe-new { display:flex; flex-wrap:wrap; gap:6px; }
.qe-editor { min-width:0; }
.qe-form fieldset { border:1px solid #dfe9f7; border-radius:12px; padding:10px 14px; }
.qe-form legend { font-weight:800; color:#264565; padding:0 4px; }
.qe-test { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto auto; gap:8px; align-items:end; padding:8px 0; border-bottom:1px dashed #dfe9f7; }
.qe-rubric-row { display:grid; grid-template-columns:minmax(0,1fr) 90px auto; gap:8px; margin:6px 0; }
.qe-rubric-row input { padding:8px 10px; border:1px solid #cbd9e8; border-radius:8px; font:inherit; }
.qe-world-tools,.qe-checks { display:flex; flex-wrap:wrap; gap:6px 16px; margin:8px 0; }
.qe-readonly { padding:10px 12px; border-radius:10px; background:#f6f8fb; }
.qe-blocks-try { margin-top:18px; padding-top:12px; border-top:2px solid #dfe9f7; }
/* Live-Übersicht */
.live-summary { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:10px; }
.live-summary small { color:#5d697a; }
.live-chip { display:inline-block; padding:4px 9px; border-radius:999px; font-size:.8rem; font-weight:800; white-space:nowrap; }
.live-chip.is-open { background:#eef1f5; color:#46566b; }
.live-chip.is-mid { background:#e3f1ff; color:#1a3b68; }
.live-chip.is-good { background:#e5f6ea; color:#1f5b30; }
.live-scroll { overflow-x:auto; }
.live-table { font-size:.88rem; }
.live-table td { vertical-align:top; }
.live-progress { width:90px; height:8px; border-radius:99px; background:#e3eaf3; overflow:hidden; }
.live-progress i { display:block; height:100%; background:#2f6fd0; }
.live-row--silent { background:#fff7ed; }
.live-warn { display:block; color:#a14f0b; font-weight:700; font-size:.8rem; }
.live-actions { display:flex; flex-wrap:wrap; gap:4px; }
.live-form { margin-top:14px; padding:14px; border:1px solid #cfdbeb; border-radius:12px; background:#f8fbff; }
.live-form h3 { margin:0; }
/* Bewertung */
.grading-tabs { display:flex; gap:6px; overflow-x:auto; padding-bottom:6px; margin-bottom:12px; }
.grading-tab { flex:none; display:grid; gap:2px; max-width:240px; padding:8px 12px; border:1px solid #cfdbeb; border-radius:10px; background:#fff; color:#18314f; font:inherit; text-align:left; cursor:pointer; }
.grading-tab small { color:#5d697a; }
.grading-tab.is-active { border-color:#2055a4; box-shadow:0 0 0 3px #2055a433; }
.grading-tab.is-done strong::after { content:" ✓"; color:#1f6a35; }
.grading-question-panel { padding:16px; border:1px solid #dfe9f7; border-radius:16px; background:#fff; }
.grading-key { margin:8px 0 14px; padding:8px 12px; border-radius:10px; background:#f8fbff; }
.grading-key summary { cursor:pointer; font-weight:800; color:#264565; }
.grading-rubric-legend { margin:6px 0; }
.grading-card { background:#fff; }
.grading-card.is-dirty { border-color:#e5c26b; box-shadow:0 0 0 2px #fff1c7; }
.grading-card > header { display:flex; justify-content:space-between; gap:12px; margin-bottom:6px; }
.grading-state { font-size:.82rem; font-weight:800; }
.grading-rubric { display:grid; gap:4px; margin:8px 0; padding:8px 10px; border-radius:10px; background:#f8fbff; }
.grading-rubric .checkbox-field { font-weight:400; }
.grading-inputs { display:grid; grid-template-columns:200px minmax(0,1fr); gap:12px; align-items:start; }
.grading-inputs label { display:grid; gap:4px; font-weight:700; font-size:.88rem; color:#264565; }
.grading-suggest:empty { display:none; }
.grading-suggest { margin:6px 0; padding:8px 10px; border-radius:10px; background:#f8fbff; }
@media (max-width:820px) {
  .blk-editor,.qe-layout,.blk-review,.grading-inputs,.qe-test { grid-template-columns:1fr; }
  .exam-nav-overview { margin-left:0; }
}
@media print {
  .no-print, .topline, .portal-header, .sidebar, #notice { display:none !important; }
  body, .portal-shell, main { background:#fff !important; }
  .exam-result-sheet, .exam-results-table, .exam-histogram { box-shadow:none !important; }
  .exam-result-sheet { max-width:none; border:0; padding:0; }
  .exam-code-view { background:#fff; color:#000; border:1px solid #999; }
}


/* Footer with the legal pages, and the legal pages themselves (rechtliches/*.html) */
.portal-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  justify-content: center;
  margin-top: 40px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
  font-size: 0.9rem;
}
.portal-footer a { color: var(--muted); }
.portal-footer a:hover, .portal-footer a:focus-visible { color: var(--primary); }
.legal-page .topline { justify-content: space-between; }
.legal-text { max-width: 820px; margin: 0 auto; line-height: 1.6; }
.legal-text h1 { margin: 0 0 12px; }
.legal-text h2 { margin: 28px 0 8px; font-size: 1.2rem; color: var(--primary-strong); }
.legal-text h3 { margin: 18px 0 6px; font-size: 1rem; }
.legal-text ul { padding-left: 1.3em; }
.legal-text li { margin: 4px 0; }
.legal-meta { margin-top: 28px; color: var(--muted); font-size: 0.9rem; }
mark.platzhalter { background: #fff3b0; color: #5a4300; padding: 0 3px; border-radius: 3px; }
.privacy-note { font-size: 0.88rem; color: var(--muted); margin: 4px 0 0; }