/* Material Design 3 Theme & Global Styles for denk.schule */
:root {
  /* Color Palette - Material 3 Deep Indigo & Teal Theme */
  --md-sys-color-primary: #3f51b5;
  --md-sys-color-on-primary: #ffffff;
  --md-sys-color-primary-container: #e8eaf6;
  --md-sys-color-on-primary-container: #1a237e;

  --md-sys-color-secondary: #00897b;
  --md-sys-color-on-secondary: #ffffff;
  --md-sys-color-secondary-container: #e0f2f1;
  --md-sys-color-on-secondary-container: #004d40;

  --md-sys-color-tertiary: #7b1fa2;
  --md-sys-color-on-tertiary: #ffffff;
  --md-sys-color-tertiary-container: #f3e5f5;
  --md-sys-color-on-tertiary-container: #4a148c;

  --md-sys-color-error: #ba1a1a;
  --md-sys-color-on-error: #ffffff;
  --md-sys-color-error-container: #ffdad6;
  
  --md-sys-color-background: #f8f9fa;
  --md-sys-color-on-background: #191c1e;
  
  --md-sys-color-surface: #ffffff;
  --md-sys-color-on-surface: #191c1e;
  --md-sys-color-surface-variant: #e1e2ec;
  --md-sys-color-on-surface-variant: #44464f;
  --md-sys-color-outline: #757780;
  --md-sys-color-outline-variant: #c5c6d0;

  --md-sys-color-success: #2e7d32;
  --md-sys-color-success-container: #e8f5e9;

  /* Elevation Shadows */
  --md-elevation-1: 0px 1px 3px 1px rgba(0, 0, 0, 0.15), 0px 1px 2px 0px rgba(0, 0, 0, 0.30);
  --md-elevation-2: 0px 2px 6px 2px rgba(0, 0, 0, 0.15), 0px 1px 2px 0px rgba(0, 0, 0, 0.30);
  --md-elevation-3: 0px 4px 8px 3px rgba(0, 0, 0, 0.15), 0px 1px 3px 0px rgba(0, 0, 0, 0.30);
  --md-elevation-4: 0px 6px 10px 4px rgba(0, 0, 0, 0.15), 0px 2px 3px 0px rgba(0, 0, 0, 0.30);

  /* Border Radii */
  --md-shape-small: 8px;
  --md-shape-medium: 16px;
  --md-shape-large: 28px;
  --md-shape-full: 9999px;

  /* Transitions */
  --md-transition-standard: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --md-transition-emphasized: all 0.4s cubic-bezier(0.2, 0, 0, 1);

  /* Typography */
  --font-family: 'Roboto', 'Google Sans', system-ui, -apple-system, sans-serif;
}

/* Dark Theme Overrides */
body.dark-theme {
  --md-sys-color-primary: #b3c5ff;
  --md-sys-color-on-primary: #002878;
  --md-sys-color-primary-container: #233b8c;
  --md-sys-color-on-primary-container: #dae2ff;

  --md-sys-color-secondary: #80cbc4;
  --md-sys-color-on-secondary: #003731;
  --md-sys-color-secondary-container: #005047;
  --md-sys-color-on-secondary-container: #9cf2e8;

  --md-sys-color-background: #111318;
  --md-sys-color-on-background: #e2e2e9;

  --md-sys-color-surface: #191c23;
  --md-sys-color-on-surface: #e2e2e9;
  --md-sys-color-surface-variant: #44464f;
  --md-sys-color-on-surface-variant: #c5c6d0;
  --md-sys-color-outline: #8e9099;

  --md-sys-color-success-container: #1b4d24;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-family);
  background-color: var(--md-sys-color-background);
  color: var(--md-sys-color-on-background);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* App Header & Top Bar */
.app-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1.5rem;
  background-color: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
  box-shadow: var(--md-elevation-1);
  position: sticky;
  top: 0;
  z-index: 100;
}

/* Stage Selector Filter Bar */
.stage-filter-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background-color: var(--md-sys-color-surface-variant);
  padding: 0.25rem;
  border-radius: var(--md-shape-full);
}

.stage-pill {
  border: none;
  background: transparent;
  color: var(--md-sys-color-on-surface-variant);
  padding: 0.4rem 0.9rem;
  border-radius: var(--md-shape-full);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  transition: var(--md-transition-standard);
}

.stage-pill.active {
  background-color: var(--md-sys-color-surface);
  color: var(--md-sys-color-primary);
  font-weight: 700;
  box-shadow: var(--md-elevation-1);
}

/* Subject Filter Bar & Subject Chips */
.subject-filter-section {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  background-color: var(--md-sys-color-surface);
  border: 1px solid var(--md-sys-color-surface-variant);
  border-radius: var(--md-shape-large);
  padding: 1rem 1.25rem;
  box-shadow: var(--md-elevation-1);
}

.subject-filter-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--md-sys-color-on-surface);
}

.subject-filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.subject-pill {
  border: 1px solid var(--md-sys-color-outline);
  background: transparent;
  color: var(--md-sys-color-on-surface-variant);
  padding: 0.4rem 0.9rem;
  border-radius: var(--md-shape-full);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  transition: var(--md-transition-standard);
}

.subject-pill:hover {
  background-color: var(--md-sys-color-surface-variant);
}

.subject-pill.active {
  background-color: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
  border-color: var(--md-sys-color-primary);
  font-weight: 700;
  box-shadow: var(--md-elevation-1);
}

.subject-chips-container {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.2rem;
}

.subject-chip {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.2rem 0.55rem;
  border-radius: var(--md-shape-full);
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.chip-math {
  background-color: #e8f5e9;
  color: #1b5e20;
  border: 1px solid #a5d6a7;
}

.chip-geometry {
  background-color: #f3e5f5;
  color: #4a148c;
  border: 1px solid #ce93d8;
}

.chip-algebra {
  background-color: #fff3e0;
  color: #e65100;
  border: 1px solid #ffcc80;
}

.chip-physics {
  background-color: #e3f2fd;
  color: #0d47a1;
  border: 1px solid #90caf9;
}

.chip-art {
  background-color: #fce4ec;
  color: #880e4f;
  border: 1px solid #f48fb1;
}

.chip-chemistry {
  background-color: #e0f2f1;
  color: #004d40;
  border: 1px solid #80cbc4;
}

.chip-informatics {
  background-color: #ede9fe;
  color: #4c1d95;
  border: 1px solid #c4b5fd;
}

/* Deutsch - das erste Fach ausserhalb von MINT. */
.chip-german {
  background-color: #fef3c7;
  color: #78350f;
  border: 1px solid #fcd34d;
}

body.dark-theme .chip-chemistry {
  background-color: #0f3d38;
  color: #5eead4;
  border-color: #0d9488;
}

body.dark-theme .chip-informatics {
  background-color: #2e1065;
  color: #c4b5fd;
  border-color: #6d28d9;
}

body.dark-theme .chip-german {
  background-color: #4a2c05;
  color: #fcd34d;
  border-color: #b45309;
}

body.dark-theme .chip-math {
  background-color: #1b4d24;
  color: #81c784;
  border-color: #2e7d32;
}

body.dark-theme .chip-geometry {
  background-color: #4a148c;
  color: #e1bee7;
  border-color: #7b1fa2;
}

body.dark-theme .chip-algebra {
  background-color: #e65100;
  color: #ffe0b2;
  border-color: #fb8c00;
}

body.dark-theme .chip-physics {
  background-color: #0d47a1;
  color: #bbdefb;
  border-color: #1976d2;
}

body.dark-theme .chip-art {
  background-color: #880e4f;
  color: #f8bbd0;
  border-color: #c2185b;
}

/* Kids Mode - Videospiel-Design für die Grundschule (Kl. 1-4) */
.kids-card {
  background: linear-gradient(135deg, #fff9c4, #ffe082) !important;
  border: 4px solid #ffb300 !important;
  border-radius: 32px !important;
  box-shadow: 0 8px 0 #f57f17 !important;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.kids-card:hover {
  transform: translateY(-6px) scale(1.02) !important;
}

.kids-btn {
  background: linear-gradient(180deg, #4caf50, #388e3c) !important;
  color: white !important;
  font-size: 1.25rem !important;
  font-weight: 900 !important;
  padding: 0.8rem 1.6rem !important;
  border-radius: 99px !important;
  border: 3px solid #ffffff !important;
  box-shadow: 0 6px 0 #1b5e20, 0 8px 15px rgba(0, 0, 0, 0.2) !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.6rem !important;
  transition: all 0.15s ease !important;
  text-shadow: 0 2px 0 rgba(0,0,0,0.3);
}

.kids-btn:active {
  transform: translateY(4px) !important;
  box-shadow: 0 2px 0 #1b5e20 !important;
}

.kids-btn-pink {
  background: linear-gradient(180deg, #ec4899, #be185d) !important;
  box-shadow: 0 6px 0 #831843 !important;
}

.kids-btn-orange {
  background: linear-gradient(180deg, #ff9800, #f57c00) !important;
  box-shadow: 0 6px 0 #e65100 !important;
}

/* Mascot "Denki die Eule" Companion Box */
.mascot-container {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: #ffffff;
  border: 4px solid #818cf8;
  border-radius: 28px;
  padding: 1rem 1.25rem;
  box-shadow: 0 6px 0 #4f46e5;
  margin-bottom: 1rem;
  animation: floatMascot 3s ease-in-out infinite;
}

@keyframes floatMascot {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

.mascot-avatar {
  font-size: 3.2rem;
  line-height: 1;
  filter: drop-shadow(0 4px 0 rgba(0,0,0,0.15));
}

.mascot-bubble {
  background: #f0fdf4;
  border: 3px solid #22c55e;
  border-radius: 20px;
  padding: 0.75rem 1rem;
  font-size: 1.1rem;
  font-weight: 800;
  color: #15803d;
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.mascot-bubble::before {
  content: '';
  position: absolute;
  left: -14px;
  top: 50%;
  transform: translateY(-50%);
  border-width: 8px 14px 8px 0;
  border-style: solid;
  border-color: transparent #22c55e transparent transparent;
}

/* Visual Target Cards (Textfree with giant Emojis) */
.visual-target-box {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  background: #fef3c7;
  border: 3px dashed #f59e0b;
  border-radius: 20px;
  padding: 1rem;
  font-size: 2.2rem;
  margin: 0.5rem 0;
}

/* Quest Success Pop-Up Modal */
.success-modal-card {
  background: linear-gradient(135deg, #ffffff, #fef9c3) !important;
  border: 5px solid #eab308 !important;
  border-radius: 36px !important;
  box-shadow: 0 12px 0 #ca8a04, 0 20px 40px rgba(0,0,0,0.3) !important;
  text-align: center;
  padding: 2.25rem 2rem !important;
  max-width: 440px !important;
  animation: popIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes popIn {
  from { transform: scale(0.6); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.success-stars {
  font-size: 3rem;
  margin: 0.5rem 0;
  animation: starPulse 1s ease-in-out infinite alternate;
}

@keyframes starPulse {
  from { transform: scale(0.95); }
  to { transform: scale(1.1); }
}

#confettiCanvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 3000;
}

.brand-section {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.brand-logo {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, var(--md-sys-color-primary), var(--md-sys-color-secondary));
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: bold;
  font-size: 1.4rem;
  box-shadow: var(--md-elevation-2);
}

.brand-title {
  font-size: 1.35rem;
  font-weight: 700;
  background: linear-gradient(90deg, var(--md-sys-color-primary), var(--md-sys-color-tertiary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.brand-subtitle {
  font-size: 0.8rem;
  color: var(--md-sys-color-on-surface-variant);
  font-weight: 500;
}

.user-stats {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.stat-chip {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.8rem;
  background-color: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
  border-radius: var(--md-shape-full);
  font-size: 0.9rem;
  font-weight: 600;
}

.stat-chip.xp {
  background-color: var(--md-sys-color-tertiary-container);
  color: var(--md-sys-color-on-tertiary-container);
}

.stat-chip .material-symbols-rounded {
  font-size: 1.2rem;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Material Buttons */
.btn-icon {
  background: transparent;
  border: none;
  color: var(--md-sys-color-on-surface);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--md-transition-standard);
}

.btn-icon:hover {
  background-color: var(--md-sys-color-surface-variant);
}

.btn-filled {
  background-color: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
  border: none;
  padding: 0.6rem 1.2rem;
  border-radius: var(--md-shape-full);
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  box-shadow: var(--md-elevation-1);
  transition: var(--md-transition-standard);
}

.btn-filled:hover {
  box-shadow: var(--md-elevation-2);
  transform: translateY(-1px);
}

.btn-tonal {
  background-color: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
  border: none;
  padding: 0.5rem 1rem;
  border-radius: var(--md-shape-full);
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  transition: var(--md-transition-standard);
}

.btn-tonal:hover {
  filter: brightness(0.95);
}

.btn-outlined {
  background-color: transparent;
  color: var(--md-sys-color-primary);
  border: 1.5px solid var(--md-sys-color-outline);
  padding: 0.5rem 1rem;
  border-radius: var(--md-shape-full);
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  transition: var(--md-transition-standard);
}

.btn-outlined:hover {
  background-color: var(--md-sys-color-primary-container);
}

/* Layout Container */
.main-layout {
  display: flex;
  flex: 1;
  height: calc(100vh - 65px);
  overflow: hidden;
}

/* Sidebar / Navigation Rail */
.nav-rail {
  width: 260px;
  background-color: var(--md-sys-color-surface);
  border-right: 1px solid var(--md-sys-color-surface-variant);
  display: flex;
  flex-direction: column;
  padding: 1rem 0.75rem;
  gap: 0.5rem;
  flex-shrink: 0;
  overflow-y: auto;
}

.nav-section-title {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--md-sys-color-outline);
  font-weight: 700;
  padding: 0.75rem 1rem 0.25rem 1rem;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.75rem 1rem;
  border-radius: var(--md-shape-full);
  color: var(--md-sys-color-on-surface-variant);
  text-decoration: none;
  font-weight: 500;
  cursor: pointer;
  transition: var(--md-transition-standard);
}

.nav-item:hover {
  background-color: var(--md-sys-color-surface-variant);
  color: var(--md-sys-color-on-surface);
}

.nav-item.active {
  background-color: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
  font-weight: 700;
}

.nav-item.active .material-symbols-rounded {
  color: var(--md-sys-color-primary);
}

.nav-badge {
  margin-left: auto;
  font-size: 0.75rem;
  background-color: var(--md-sys-color-secondary);
  color: white;
  padding: 0.15rem 0.5rem;
  border-radius: var(--md-shape-full);
}

/* Navigations-Schublade: erst unterhalb des Umbruchpunkts sichtbar */
.nav-toggle {
  display: none;
  flex-shrink: 0;
}

.nav-scrim {
  display: none;
}

/* Content Area */
.content-viewport {
  flex: 1;
  overflow-y: auto;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  background-color: var(--md-sys-color-background);
}

/* Dashboard View */
.view-container {
  display: none;
  flex-direction: column;
  gap: 1.5rem;
  animation: fadeIn 0.3s ease;
}

.view-container.active {
  display: flex;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Hero Section */
.hero-card {
  background: linear-gradient(135deg, var(--md-sys-color-primary-container), var(--md-sys-color-secondary-container));
  border-radius: var(--md-shape-large);
  padding: 2rem;
  box-shadow: var(--md-elevation-1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.hero-text h1 {
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--md-sys-color-on-primary-container);
  margin-bottom: 0.5rem;
}

.hero-text p {
  color: var(--md-sys-color-on-surface-variant);
  max-width: 600px;
  line-height: 1.5;
  font-size: 1rem;
}

.hero-badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: rgba(255, 255, 255, 0.7);
  padding: 0.3rem 0.8rem;
  border-radius: var(--md-shape-full);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--md-sys-color-primary);
  margin-bottom: 0.75rem;
}

body.dark-theme .hero-badge-pill {
  background: rgba(0, 0, 0, 0.3);
}

/* Module Cards Grid */
.grid-title {
  font-size: 1.25rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--md-sys-color-on-surface);
}

.modules-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1.5rem;
}

.module-card {
  background-color: var(--md-sys-color-surface);
  border-radius: var(--md-shape-large);
  padding: 1.5rem;
  box-shadow: var(--md-elevation-1);
  border: 1px solid var(--md-sys-color-surface-variant);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transition: var(--md-transition-standard);
  position: relative;
}

.module-card:hover {
  box-shadow: var(--md-elevation-3);
  transform: translateY(-4px);
}

.module-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.module-icon-box {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  color: white;
}

.icon-math {
  background: linear-gradient(135deg, #43a047, #66bb6a);
}

.icon-algebra {
  background: linear-gradient(135deg, #fb8c00, #ffa726);
}

.icon-physics {
  background: linear-gradient(135deg, #1e88e5, #42a5f5);
}

.grade-tag {
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.25rem 0.6rem;
  border-radius: var(--md-shape-full);
  background-color: var(--md-sys-color-surface-variant);
  color: var(--md-sys-color-on-surface-variant);
}

.module-card h3 {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--md-sys-color-on-surface);
}

.module-card p {
  font-size: 0.9rem;
  color: var(--md-sys-color-on-surface-variant);
  line-height: 1.4;
  flex: 1;
}

.module-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 0.5rem;
  border-top: 1px solid var(--md-sys-color-surface-variant);
}

.progress-bar-container {
  flex: 1;
  margin-right: 1rem;
}

.progress-label {
  font-size: 0.75rem;
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.3rem;
  color: var(--md-sys-color-on-surface-variant);
  font-weight: 600;
}

.progress-bar {
  height: 8px;
  background-color: var(--md-sys-color-surface-variant);
  border-radius: 4px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background-color: var(--md-sys-color-primary);
  width: 0%;
  transition: width 0.5s ease;
}

/* Module Lab Layouts (Interactive Workspaces) */
.lab-workspace {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 1.5rem;
  height: calc(100vh - 120px);
}

@media (max-width: 960px) {
  .lab-workspace {
    grid-template-columns: 1fr;
    height: auto;
  }
}

.canvas-container {
  background-color: var(--md-sys-color-surface);
  border-radius: var(--md-shape-large);
  box-shadow: var(--md-elevation-1);
  border: 1px solid var(--md-sys-color-surface-variant);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.canvas-header {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--md-sys-color-surface-variant);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: var(--md-sys-color-surface);
}

.canvas-title {
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.1rem;
}

.canvas-controls {
  display: flex;
  gap: 0.5rem;
}

.interactive-area {
  flex: 1;
  position: relative;
  min-height: 400px;
  background-color: #0b0f19; /* Sleek dark backdrop for 3D/Canvas visuals */
  border-bottom-left-radius: var(--md-shape-large);
  border-bottom-right-radius: var(--md-shape-large);
}

.interactive-area canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
  /* Dragging on a touch screen must move the component, not scroll the page. */
  touch-action: none;
}

/* Control Panel / Method Support Panel */
.method-panel {
  background-color: var(--md-sys-color-surface);
  border-radius: var(--md-shape-large);
  box-shadow: var(--md-elevation-1);
  border: 1px solid var(--md-sys-color-surface-variant);
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  overflow-y: auto;
}

.quest-card {
  background-color: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
  padding: 1.25rem;
  border-radius: var(--md-shape-medium);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.quest-title {
  font-weight: 700;
  font-size: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.quest-description {
  font-size: 0.9rem;
  line-height: 1.4;
}

.hypothesis-box {
  background-color: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
  border-radius: var(--md-shape-small);
  padding: 0.75rem;
  font-size: 0.85rem;
  border-left: 4px solid var(--md-sys-color-secondary);
}

.controls-group {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* --- Hebel-Labor: Vorhersage-Karte (erst vorhersagen, dann experimentieren) --- */
.prediction-card {
  border-radius: var(--md-shape-medium);
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  font-size: 0.88rem;
  border: 2px solid transparent;
  background-color: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
}

.prediction-open { border-color: #7c3aed; }
.prediction-pending { border-color: #f59e0b; }
.prediction-done { border-color: #22c55e; }

/* Kopfzeile: links die Phase im Dreischritt, rechts der Laborfortschritt. */
.prediction-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem 0.75rem;
}

.prediction-phases {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--md-sys-color-outline);
}

.prediction-phases .is-active {
  color: var(--md-sys-color-primary);
  font-weight: 900;
}

.prediction-phases .phase-sep {
  opacity: 0.5;
}

.prediction-mission {
  font-size: 0.7rem;
  font-weight: 800;
  padding: 0.15rem 0.55rem;
  border-radius: var(--md-shape-full);
  background-color: var(--md-sys-color-surface-variant);
  color: var(--md-sys-color-on-surface-variant);
  white-space: nowrap;
}

.prediction-question { font-weight: 700; line-height: 1.4; }

.prediction-options {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.prediction-option {
  text-align: left;
  padding: 0.7rem 0.85rem;
  border-radius: var(--md-shape-small);
  border: 1.5px solid var(--md-sys-color-surface-variant);
  background-color: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
  font-size: 0.85rem;
  font-family: inherit;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.prediction-option:hover {
  border-color: #7c3aed;
  background-color: var(--md-sys-color-primary-container);
}

/* Zahlen-Antworten für die Grundschule: groß, wenige, ohne Tastatur. */
.prediction-choices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
  gap: 0.6rem;
}

.prediction-choice {
  padding: 0.9rem 0.5rem;
  border-radius: var(--md-shape-medium);
  border: 2px solid var(--md-sys-color-surface-variant);
  background-color: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
  font-family: inherit;
  font-size: 1.3rem;
  font-weight: 900;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}

.prediction-choice:hover {
  border-color: #7c3aed;
  background-color: var(--md-sys-color-primary-container);
}

.prediction-choice:active {
  transform: scale(0.96);
}

.prediction-input {
  padding: 0.65rem 0.8rem;
  border-radius: var(--md-shape-small);
  border: 1.5px solid var(--md-sys-color-surface-variant);
  background-color: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
  font-size: 0.95rem;
  font-family: inherit;
  width: 100%;
}

.prediction-hint {
  font-size: 0.78rem;
  color: var(--md-sys-color-on-surface-variant);
  font-style: italic;
}

.prediction-mine { font-size: 0.9rem; }
.prediction-verdict { font-weight: 700; line-height: 1.4; }

.prediction-law {
  background-color: var(--md-sys-color-surface-variant);
  border-left: 4px solid #22c55e;
  border-radius: var(--md-shape-small);
  padding: 0.7rem 0.8rem;
  line-height: 1.45;
}

/* --- Messreihe (Hebel- und Elektronen-Labor) --- */
.measure-wrap {
  overflow-x: auto;
  border-radius: var(--md-shape-small);
  border: 1px solid var(--md-sys-color-surface-variant);
}

.measure-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.74rem;
  min-width: 250px;
}

.measure-table th,
.measure-table td {
  padding: 0.4rem 0.45rem;
  text-align: left;
  border-bottom: 1px solid var(--md-sys-color-surface-variant);
}

/* Die Produktspalten bleiben einzeilig, die Termspalten dürfen umbrechen. */
.measure-table .measure-highlight { white-space: nowrap; }

.measure-table th {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--md-sys-color-on-surface-variant);
  background-color: var(--md-sys-color-surface-variant);
}

.measure-table .measure-highlight {
  font-weight: 800;
  color: #7c3aed;
}

.measure-empty {
  padding: 0.8rem;
  font-size: 0.78rem;
  font-style: italic;
  color: var(--md-sys-color-on-surface-variant);
}

.measure-conclusion {
  margin-top: 0.75rem;
  background-color: var(--md-sys-color-tertiary-container, var(--md-sys-color-surface-variant));
  border-radius: var(--md-shape-small);
  padding: 0.8rem;
  font-size: 0.83rem;
  line-height: 1.5;
}

body.dark-theme .measure-table .measure-highlight { color: #c4b5fd; }

.control-label {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--md-sys-color-on-surface-variant);
  display: flex;
  justify-content: space-between;
}

.slider-container {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

input[type="range"] {
  flex: 1;
  accent-color: var(--md-sys-color-primary);
  height: 6px;
  cursor: pointer;
}

/* Modals */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  backdrop-filter: blur(4px);
  animation: fadeIn 0.2s ease;
}

.modal-overlay.active {
  display: flex;
}

.modal-card {
  background-color: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
  border-radius: var(--md-shape-large);
  width: 90%;
  max-width: 500px;
  padding: 1.75rem;
  box-shadow: var(--md-elevation-4);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.modal-header h2 {
  font-size: 1.3rem;
  font-weight: 700;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
}

textarea.json-input {
  width: 100%;
  height: 140px;
  border: 1px solid var(--md-sys-color-outline);
  border-radius: var(--md-shape-small);
  padding: 0.75rem;
  font-family: monospace;
  font-size: 0.85rem;
  background-color: var(--md-sys-color-background);
  color: var(--md-sys-color-on-background);
  resize: vertical;
}

/* Toast Notifications */
.toast-container {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  z-index: 2000;
}

.toast {
  background-color: var(--md-sys-color-on-surface);
  color: var(--md-sys-color-surface);
  padding: 0.75rem 1.25rem;
  border-radius: var(--md-shape-full);
  font-size: 0.9rem;
  font-weight: 500;
  box-shadow: var(--md-elevation-2);
  display: flex;
  align-items: center;
  gap: 0.6rem;
  animation: slideUp 0.3s ease;
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Achievement Badges Showcase */
.badges-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 1rem;
}

.badge-item {
  background-color: var(--md-sys-color-surface-variant);
  border-radius: var(--md-shape-medium);
  padding: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.4rem;
  opacity: 0.5;
  filter: grayscale(1);
  transition: var(--md-transition-standard);
}

.badge-item.unlocked {
  opacity: 1;
  filter: grayscale(0);
  background-color: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
}

.badge-icon {
  font-size: 2.2rem;
}

.badge-title {
  font-size: 0.8rem;
  font-weight: 700;
}

/* ==========================================================================
   Schmale Geräte: Navigation wird zur ausklappbaren Schublade
   ========================================================================== */
@media (max-width: 900px) {
  .nav-toggle {
    display: flex;
  }

  .app-bar {
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 0.5rem 0.75rem;
    padding: 0.6rem 0.9rem;
  }

  /* Marke links neben dem Menüknopf, Statistik und Aktionen rechts daneben. */
  .brand-section {
    margin-right: auto;
  }

  .brand-subtitle {
    display: none;
  }

  /* Die Klassenstufen-Filter rutschen in eine eigene, seitlich scrollbare Zeile. */
  .stage-filter-bar {
    order: 10;
    width: 100%;
    overflow-x: auto;
    justify-content: flex-start;
    scrollbar-width: none;
  }

  .stage-filter-bar::-webkit-scrollbar {
    display: none;
  }

  .stage-pill {
    white-space: nowrap;
    flex-shrink: 0;
  }

  /* Die Schublade liegt über der Kopfzeile - so hängt sie nicht an deren Höhe. */
  .nav-rail {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(280px, 82vw);
    z-index: 110;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    box-shadow: var(--md-elevation-2);
    padding-top: 1.25rem;
  }

  .nav-rail.open {
    transform: translateX(0);
  }

  .nav-scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 105;
    background-color: rgba(0, 0, 0, 0.45);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
  }

  .nav-scrim.open {
    opacity: 1;
    pointer-events: auto;
  }

  /* Ohne feste Rail darf die Seite wieder normal scrollen. */
  .main-layout {
    height: auto;
    min-height: calc(100vh - 65px);
    overflow: visible;
  }

  .content-viewport {
    overflow-y: visible;
    padding: 1rem;
    min-width: 0;
  }

  .lab-workspace {
    grid-template-columns: 1fr;
    height: auto;
  }

  /* Titel und Bauteil-Knöpfe passen nebeneinander nicht mehr in eine Zeile. */
  .canvas-header {
    flex-wrap: wrap;
    gap: 0.6rem;
    padding: 0.8rem 1rem;
  }

  .canvas-controls {
    flex-wrap: wrap;
  }
}

@media (max-width: 600px) {
  .user-stats {
    gap: 0.35rem;
  }

  /* Auf dem Telefon bleibt vom Export-Knopf nur das Symbol. */
  .header-actions .btn-outlined {
    padding: 0.5rem;
  }

  .header-actions .btn-outlined span:not(.material-symbols-rounded) {
    display: none;
  }

  .interactive-area {
    min-height: 320px;
  }

  .modules-grid {
    grid-template-columns: 1fr;
  }
}

/* Wer Bewegung reduziert haben möchte, bekommt die Schublade ohne Animation. */
@media (prefers-reduced-motion: reduce) {
  .nav-rail,
  .nav-scrim {
    transition: none;
  }
}

/* ---------------------------------------------------------------------------
   Sterne je Mission auf den Laborkarten der Übersicht

   Drei Sterne stehen für eine Vorhersage, die schon beim ersten Versuch
   stimmte, zwei für eine im zweiten Anlauf, einer für eine gelöste Mission
   mit danebenliegender Vorhersage. Bewusst als Knöpfe: von hier aus lässt
   sich jede Mission noch einmal aufrufen.
--------------------------------------------------------------------------- */

.module-progress {
  padding-top: 0.6rem;
  margin-bottom: 0.2rem;
}

.mp-missions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.mp-mission {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.45rem;
  border: 1px solid var(--md-sys-color-surface-variant);
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 0.78rem;
  line-height: 1.4;
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}

.mp-mission.is-done {
  opacity: 1;
  border-color: currentColor;
}

.mp-mission:hover,
.mp-mission:focus-visible {
  opacity: 1;
  transform: translateY(-1px);
}

.mp-nr {
  font-weight: 700;
  opacity: 0.7;
}

.mp-stars {
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.mp-on  { color: #f59e0b; }
.mp-off { color: currentColor; opacity: 0.28; }

.mp-summary {
  margin-top: 0.35rem;
  font-size: 0.72rem;
  opacity: 0.75;
}

/* Auf Tablets und Telefonen werden die Missionsfelder mit dem Finger
   getroffen - dort brauchen sie eine Mindesthöhe, keine Maus-Maße.
   Das Gerät im Klassenraum ist das Tablet, nicht der Rechner. */
@media (max-width: 900px), (pointer: coarse) {
  .mp-mission {
    min-height: 40px;
    padding: 0.35rem 0.6rem;
    font-size: 0.85rem;
  }
  .mp-summary {
    font-size: 0.78rem;
  }
}

/* Die Sternenreihe der Erfolgsmeldung zeigt jetzt das ganze Labor
   (bis zu zwölf Sterne) und muss dafür umbrechen dürfen. */
.success-stars {
  font-size: 1.5rem;
  line-height: 1.2;
  color: #f59e0b;
  word-break: break-word;
  /* Der Puls von oben würde jetzt auch die Erläuterung darunter mitziehen. */
  animation: none;
}

.success-stars-note {
  font-size: 0.78rem;
  /* Die Erfolgskarte wechselt je Stufe die Farbe - deshalb geerbt. */
  color: inherit;
  opacity: 0.75;
  margin-top: 0.25rem;
}

/* ---------------------------------------------------------------------------
   Lerneinheiten

   Die Einheit ist das, was ausgeteilt wird: eine Leitfrage, die Labore in
   fester Reihenfolge, ein gemeinsames Fazit. Der Kopf trägt deshalb die
   Frage, nicht nur den Titel.
--------------------------------------------------------------------------- */

.unit {
  margin-bottom: 2.2rem;
}

.unit-head {
  margin-bottom: 0.9rem;
  padding-left: 0.9rem;
  border-left: 4px solid var(--md-sys-color-primary);
}

.unit-nr {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--md-sys-color-primary);
}

.unit-grade {
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  background: var(--md-sys-color-surface-variant);
  color: var(--md-sys-color-on-surface-variant);
  letter-spacing: 0.02em;
}

.unit-title {
  margin: 0.2rem 0 0.15rem;
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--md-sys-color-on-surface);
}

/* Die Leitfrage steht bewusst über den Laboren: sie ist der Grund, warum
   diese Labore zusammen bearbeitet werden. */
.unit-question {
  margin: 0 0 0.35rem;
  max-width: 62ch;
  font-size: 0.94rem;
  line-height: 1.45;
  color: var(--md-sys-color-on-surface-variant);
}

.unit-meta {
  font-size: 0.76rem;
  color: var(--md-sys-color-on-surface-variant);
  opacity: 0.9;
}

@media (max-width: 600px) {
  .unit-title { font-size: 1.15rem; }
  .unit-question { font-size: 0.88rem; }
}

/* ---------------------------------------------------------------------------
   Übertrag

   Der Abschluss jeder Lerneinheit: dieselbe Regel, aber ohne Versuchsaufbau.
   Links die Aufgaben, rechts die eigenen Messwerte - sie sind der Grund,
   warum die Aufgaben lösbar sind, ohne dass irgendwo eine Formel steht.
--------------------------------------------------------------------------- */

.unit-transfer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 0.9rem;
  padding: 0.9rem 1.1rem;
  border: 1px dashed var(--md-sys-color-primary);
  border-radius: 16px;
  background: var(--md-sys-color-surface);
}

.ut-label {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--md-sys-color-primary);
}

.ut-desc {
  margin-top: 0.15rem;
  font-size: 0.9rem;
  color: var(--md-sys-color-on-surface);
}

.ut-stars {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.45rem;
}

/* Auf der Übersicht sind die Übertrags-Sterne reine Anzeige - anders als die
   Missionsfelder der Labore, die sich anklicken lassen. */
.ut-stars .mp-mission {
  cursor: default;
}

.transfer-head {
  margin-bottom: 1.2rem;
  padding-left: 0.9rem;
  border-left: 4px solid var(--md-sys-color-primary);
}

.transfer-eyebrow {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--md-sys-color-primary);
}

.transfer-title {
  margin: 0.2rem 0 0.2rem;
  font-size: 1.6rem;
  font-weight: 900;
  color: var(--md-sys-color-on-surface);
}

.transfer-lead {
  margin: 0;
  max-width: 68ch;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--md-sys-color-on-surface-variant);
}

.transfer-columns {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 1.2rem;
  align-items: start;
}

.transfer-tasks {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
}

.transfer-card {
  padding: 1.1rem 1.2rem;
  border: 1px solid var(--md-sys-color-surface-variant);
  border-radius: 18px;
  background: var(--md-sys-color-surface);
}

.transfer-card.is-solved { border-color: #16a34a; }
.transfer-card.is-shown  { border-color: #f59e0b; }

.transfer-nr {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--md-sys-color-on-surface-variant);
}

.transfer-text {
  margin: 0.35rem 0 0.9rem;
  font-size: 1.02rem;
  line-height: 1.55;
  color: var(--md-sys-color-on-surface);
}

.transfer-answer {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.transfer-options {
  flex-direction: column;
  align-items: stretch;
}

/* Der Hinweis nach dem ersten Fehlversuch verrät nichts - er zeigt auf die
   eigene Messreihe zurück. Deshalb Ton wie ein Zuruf, nicht wie ein Fehler. */
.transfer-hint {
  margin-top: 0.8rem;
  padding: 0.65rem 0.8rem;
  border-radius: 12px;
  background: rgba(245, 158, 11, 0.12);
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--md-sys-color-on-surface);
}

.transfer-result {
  margin-top: 0.2rem;
}

.transfer-verdict {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--md-sys-color-on-surface);
}

.transfer-solution {
  margin-top: 0.35rem;
  font-size: 0.94rem;
  line-height: 1.55;
  color: var(--md-sys-color-on-surface-variant);
}

.transfer-stars {
  margin-top: 0.55rem;
  font-size: 1.15rem;
}

.transfer-data {
  padding: 1rem 1.1rem;
  border: 1px solid var(--md-sys-color-surface-variant);
  border-radius: 18px;
  background: var(--md-sys-color-surface-variant);
  min-width: 0;
}

.transfer-data-title {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--md-sys-color-on-surface-variant);
  margin-bottom: 0.6rem;
}

.transfer-data-lab {
  margin: 0.8rem 0 0.3rem;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--md-sys-color-on-surface);
}

.transfer-data-lab:first-of-type {
  margin-top: 0;
}

/* Auf schmalen Geräten wandern die Messwerte unter die Aufgaben - sie
   bleiben Nachschlagewerk, die Aufgabe hat Vorrang. */
@media (max-width: 900px) {
  .transfer-columns {
    grid-template-columns: minmax(0, 1fr);
  }
  .transfer-title { font-size: 1.3rem; }
  .unit-transfer { align-items: flex-start; }
  /* Auf dem Tablet wird der Knopf getippt, nicht geklickt. */
  .ut-open {
    width: 100%;
    min-height: 44px;
  }
}

@media (pointer: coarse) {
  .ut-open { min-height: 44px; }
}

/* ---------------------------------------------------------------------------
   Lerneinheiten in der Seitenleiste

   Dort standen früher die einzelnen Labore. Ein Labor allein ist aber keine
   Einheit, die man austeilt - die Navigation zeigt jetzt dasselbe wie der
   Stundenplan. Ein Klick schränkt die Übersicht auf diese Einheit ein.
--------------------------------------------------------------------------- */

.nav-unit {
  gap: 0.7rem;
}

.nav-unit-nr {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  border: 1.5px solid currentColor;
  font-size: 0.75rem;
  font-weight: 800;
  opacity: 0.75;
}

.nav-item.active .nav-unit-nr {
  opacity: 1;
}

/* Der Titel darf umbrechen - „Anzahlen ohne Zählen" passt sonst nicht neben
   die Klassenstufe. */
.nav-unit-title {
  min-width: 0;
  line-height: 1.25;
}

.nav-unit .nav-badge {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   Hinweis auf eine eingeschränkte Übersicht

   Ohne ihn sähe es so aus, als wären die übrigen Labore verschwunden.
--------------------------------------------------------------------------- */

.unit-filter-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  flex-wrap: wrap;
  margin: 0 0 1.2rem;
  padding: 0.7rem 1rem;
  border-radius: 14px;
  background: var(--md-sys-color-surface-variant);
  color: var(--md-sys-color-on-surface-variant);
  font-size: 0.9rem;
}

.ufb-text {
  font-weight: 700;
  color: var(--md-sys-color-on-surface);
}

@media (max-width: 600px), (pointer: coarse) {
  .unit-filter-banner button {
    width: 100%;
    min-height: 44px;
  }
}

/* ---------------------------------------------------------------------------
   Programm-Editor im Roboter-Parcours

   Er sitzt in der Vorhersage-Karte, weil das Programm die Vorhersage ist.
   Vier große Richtungstasten, darunter das geschriebene Programm als Kette
   nummerierter Befehle - man soll es lesen können, bevor es losläuft.
--------------------------------------------------------------------------- */

.robot-editor {
  display: block;
}

.rob-pad {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.4rem;
}

.rob-key {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
  padding: 0.5rem 0.2rem;
  border: 2px solid var(--md-sys-color-primary);
  border-radius: 12px;
  background: var(--md-sys-color-surface);
  color: var(--md-sys-color-primary);
  font: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  min-height: 56px;
  cursor: pointer;
  transition: background 0.12s ease, transform 0.08s ease;
}

.rob-key:hover,
.rob-key:focus-visible {
  background: var(--md-sys-color-primary-container);
}

.rob-key:active {
  transform: translateY(1px);
}

.rob-arrow {
  font-size: 1.35rem;
  line-height: 1;
}

/* Das geschriebene Programm - bewusst als lesbare Kette, nicht als Textfeld. */
.rob-program {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  min-height: 42px;
  margin: 0.6rem 0 0.5rem;
  padding: 0.45rem 0.5rem;
  border: 1px dashed var(--md-sys-color-surface-variant);
  border-radius: 12px;
  background: var(--md-sys-color-surface-variant);
}

.rob-chip {
  padding: 0.1rem 0.4rem;
  border-radius: 7px;
  background: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
}

.rob-empty {
  font-size: 0.82rem;
  color: var(--md-sys-color-on-surface-variant);
}

.rob-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.rob-actions button {
  flex: 1 1 auto;
}

.rob-small {
  font-size: 0.78rem;
}

.rob-actions button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

@media (max-width: 600px), (pointer: coarse) {
  .rob-key { min-height: 64px; }
  .rob-actions button { min-height: 44px; }
}

/* ---------------------------------------------------------------------------
   Pixel-Maler: Farbtasten und Wiederhole-Block

   Der Editor baut auf dem des Roboter-Parcours auf (.rob-key, .rob-chip) —
   beide Labore gehören zur selben Lerneinheit und sollen sich auch so
   bedienen lassen. Dazu kommen hier Farben und die Wiederholung.
--------------------------------------------------------------------------- */

.pix-pad {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.4rem;
}

.pix-pad-color {
  margin-top: 0.4rem;
}

.pix-swatch {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 1px solid rgba(0, 0, 0, 0.25);
}

.pix-color-key {
  color: var(--md-sys-color-on-surface);
}

/* Der Wiederhole-Block ist der eigentliche Lerninhalt — er bekommt eine
   eigene Zeile und hebt sich vom Rest ab. */
.pix-loop {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.5rem;
  padding: 0.45rem 0.55rem;
  border: 1px dashed var(--md-sys-color-primary);
  border-radius: 12px;
}

.pix-loop:empty {
  display: none;
}

.pix-loop-info {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--md-sys-color-primary);
}

.pix-count {
  min-width: 44px;
  padding: 0.25rem 0.5rem;
  font-size: 0.85rem;
}

.pix-program {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
  min-height: 42px;
  margin: 0.6rem 0 0.5rem;
  padding: 0.45rem 0.5rem;
  border: 1px dashed var(--md-sys-color-surface-variant);
  border-radius: 12px;
  background: var(--md-sys-color-surface-variant);
}

/* Ein Block wird als Klammer gezeichnet: man soll sehen, was zusammengehört. */
.pix-loop-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.15rem 0.3rem;
  border: 2px solid var(--md-sys-color-primary);
  border-radius: 10px;
}

.pix-loop-chip.is-open {
  border-style: dashed;
  background: var(--md-sys-color-primary-container);
}

.pix-loop-head {
  background: var(--md-sys-color-primary) !important;
  color: #ffffff !important;
}

.pix-chip-color {
  width: 20px;
  height: 20px;
  padding: 0;
  border-radius: 5px;
  border: 1px solid rgba(0, 0, 0, 0.3);
}

.pix-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.pix-actions button {
  flex: 1 1 auto;
}

.pix-actions button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.pix-too-long {
  background: #b91c1c !important;
}

.pix-note {
  flex: 1 1 100%;
  margin-top: 0.15rem;
  font-size: 0.78rem;
  color: var(--md-sys-color-on-surface-variant);
}

.pix-note-warn {
  color: #b91c1c;
  font-weight: 700;
}

@media (max-width: 600px), (pointer: coarse) {
  .pix-actions button { min-height: 44px; }
  .pix-count { min-height: 40px; }
}

/* ---------------------------------------------------------------------------
   Baustein-Werkstatt

   Die Bausteine sind keine weiteren Befehlstasten, sondern etwas anderes:
   ein Stück Programm mit Namen. Deshalb bekommen sie eine eigene Leiste und
   eine eigene Form — breit statt quadratisch, mit Namen und Länge.
--------------------------------------------------------------------------- */

.blk-bausteine {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.5rem;
  padding: 0.5rem 0.55rem;
  border: 1px dashed var(--md-sys-color-primary);
  border-radius: 12px;
}

/* Während der Aufnahme wandern alle Befehle in den Baustein statt ins
   Programm — das muss unübersehbar sein. */
.blk-bausteine.is-recording {
  border-style: solid;
  border-color: #b91c1c;
  background: rgba(185, 28, 28, 0.08);
}

.blk-info {
  flex: 1 1 100%;
  font-size: 0.8rem;
  font-weight: 700;
  color: #b91c1c;
}

.blk-def-strip {
  display: flex;
  flex: 1 1 100%;
  flex-wrap: wrap;
  gap: 0.2rem;
  min-height: 26px;
}

.blk-key {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.05rem;
  padding: 0.4rem 0.7rem;
  border: 2px solid var(--md-sys-color-primary);
  border-radius: 12px;
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-surface);
  font: inherit;
  cursor: pointer;
  min-height: 44px;
}

.blk-key-eigen {
  border-style: dashed;
}

.blk-name {
  font-size: 0.86rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.blk-len {
  font-size: 0.68rem;
  opacity: 0.75;
}

.blk-chip {
  background: var(--md-sys-color-primary) !important;
  color: #ffffff !important;
  letter-spacing: 0.04em;
}

.blk-chip-eigen {
  background: #7c3aed !important;
}

.blk-record {
  flex: 1 1 100%;
}

/* ---------------------------------------------------------------------------
   Profile: ein Gerät, mehrere Lernende

   Auf einem Klassensatz Tablets arbeitet in jeder Stunde jemand anderes am
   selben Gerät. Die Profilwahl ist deshalb kein Nebenschauplatz, sondern das
   Erste, was beantwortet wird.
--------------------------------------------------------------------------- */

.profil-chip {
  border: none;
  font: inherit;
  cursor: pointer;
}

.profil-card {
  max-width: 520px;
}

.profil-hinweis {
  margin: 0 0 0.4rem;
  font-size: 0.86rem;
  line-height: 1.45;
  color: var(--md-sys-color-on-surface-variant);
}

.profil-liste {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  max-height: 46vh;
  overflow-y: auto;
}

.profil-zeile {
  display: flex;
  align-items: stretch;
  gap: 0.3rem;
}

.profil-waehlen {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.1rem;
  padding: 0.6rem 0.9rem;
  border: 2px solid var(--md-sys-color-surface-variant);
  border-radius: 14px;
  background: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
  font: inherit;
  text-align: left;
  cursor: pointer;
  min-height: 52px;
}

.profil-zeile.ist-aktiv .profil-waehlen {
  border-color: var(--md-sys-color-primary);
  background: var(--md-sys-color-primary-container);
}

.profil-name {
  font-size: 1rem;
  font-weight: 800;
}

.profil-sterne {
  font-size: 0.76rem;
  color: var(--md-sys-color-on-surface-variant);
}

.profil-weg {
  flex: 0 0 auto;
  align-self: center;
}

.profil-neu {
  margin-top: 0.9rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--md-sys-color-surface-variant);
}

.profil-schnell {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin: 0.4rem 0 0.6rem;
}

.profil-eingabe {
  display: flex;
  gap: 0.4rem;
}

.profil-eingabe .prediction-input {
  flex: 1 1 auto;
}

/* ---------------------------------------------------------------------------
   Klassenblick

   Eine schlichte Tabelle, die sich ausdrucken lässt. Die Zahl, auf die es
   ankommt, steht in jeder Zelle unter den Sternen: wie viel beim ersten
   Versuch stimmte.
--------------------------------------------------------------------------- */

.class-wrap {
  overflow-x: auto;
}

.class-table td,
.class-table th {
  vertical-align: top;
  white-space: nowrap;
}

.class-name {
  font-weight: 800;
}

.class-table tr.ist-aktiv {
  background: var(--md-sys-color-primary-container);
}

.class-sterne {
  display: block;
  font-weight: 700;
  color: #b45309;
}

.class-erst {
  display: block;
  font-size: 0.72rem;
  color: var(--md-sys-color-on-surface-variant);
}

.class-leer {
  color: var(--md-sys-color-on-surface-variant);
  opacity: 0.6;
}

.class-summe {
  border-left: 2px solid var(--md-sys-color-surface-variant);
}

.class-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
}

.class-hinweis {
  flex: 1 1 100%;
  margin: 0.3rem 0 0;
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--md-sys-color-on-surface-variant);
}

@media (max-width: 600px), (pointer: coarse) {
  .class-actions button { min-height: 44px; }
  .profil-eingabe .btn-filled { min-height: 44px; }
}

/* Gedruckt wird nur die Tabelle - ohne Navigation, Knöpfe und Kopfzeile. */
@media print {
  .app-bar,
  .nav-rail,
  .nav-scrim,
  .class-actions,
  .modal-overlay { display: none !important; }

  .app-shell,
  .main-content { display: block !important; margin: 0 !important; padding: 0 !important; }

  .view-container { display: none !important; }
  /* Gedruckt wird die Ansicht, die gerade offen ist - der Klassenblick
     ebenso wie die Handreichung. */
  .view-container.active { display: block !important; }

  .hero-card { border: none !important; background: none !important; }

  .class-table,
  .class-table th,
  .class-table td { border: 1px solid #999 !important; color: #000 !important; }

  .class-sterne,
  .class-erst { color: #000 !important; }
}

/* Erläuterung unter einem Bedienelement - etwa dass der Brenner mit fester
   Leistung heizt und die Temperatur deshalb nicht eingestellt wird. */
.control-note {
  margin: 0.4rem 0 0;
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--md-sys-color-on-surface-variant);
}

/* ---------------------------------------------------------------------------
   Atombaukasten: die drei Schalen als Zähler

   Bewusst kein Schieberegler und keine Höchstgrenze am Knopf - man soll
   auch eine Verteilung eintragen können, die nicht hält. Erst beim
   Schließen des Atoms sagt der Versuch, welche Regel dagegenspricht.
--------------------------------------------------------------------------- */

.ato-shells {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.ato-shell {
  display: grid;
  grid-template-columns: 1.6rem 1fr 2.4rem 1fr;
  align-items: center;
  gap: 0.4rem;
}

.ato-name {
  font-weight: 800;
  font-size: 0.95rem;
  color: var(--md-sys-color-primary);
}

.ato-step {
  padding: 0.35rem 0;
  border: 2px solid var(--md-sys-color-primary);
  border-radius: 10px;
  background: var(--md-sys-color-surface);
  color: var(--md-sys-color-primary);
  font: inherit;
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1;
  min-height: 38px;
  cursor: pointer;
  transition: background 0.12s ease, transform 0.08s ease;
}

.ato-step:hover:not(:disabled),
.ato-step:focus-visible:not(:disabled) {
  background: var(--md-sys-color-primary-container);
}

.ato-step:active:not(:disabled) {
  transform: translateY(1px);
}

.ato-step:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.ato-count {
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--md-sys-color-on-surface);
}

/* Bindungs-Labor: die beiden Übergabe-Richtungen nebeneinander. */
.bon-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.bon-actions button {
  flex: 1 1 8rem;
}

@media (max-width: 600px), (pointer: coarse) {
  .ato-step { min-height: 44px; }
  .bon-actions button { min-height: 44px; }
}

/* ---------------------------------------------------------------------------
   Deutsch-Labore: die Satz-Werkbank

   Statt einer Zeichenfläche steht hier der Satz selbst - als anklickbare
   Wörter (Satzbaukasten) oder als Blöcke je Satzglied (Weglassprobe). Die
   Wörter müssen groß genug sein, um sie auf einem Tablet zu treffen, und der
   Satz muss umbrechen dürfen, ohne dass die Zeile ausbricht.
--------------------------------------------------------------------------- */

.satz-area {
  display: block;
  overflow-y: auto;
  padding: 1rem;
  background: transparent;
}

.satz-bench {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-height: 100%;
}

.satz-aufgabe {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--md-sys-color-on-surface-variant);
}

.satz-zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  padding: 0.6rem;
  border: 1px dashed var(--md-sys-color-surface-variant);
  border-radius: 14px;
  background: var(--md-sys-color-surface-variant);
}

.satz-wort,
.satz-block {
  padding: 0.4rem 0.65rem;
  border: 2px solid transparent;
  border-radius: 10px;
  background: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
  font: inherit;
  font-size: 1.02rem;
  line-height: 1.2;
  min-height: 40px;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, transform 0.08s ease;
}

.satz-wort:hover:not(:disabled),
.satz-block:hover:not(:disabled) {
  border-color: var(--md-sys-color-primary);
}

.satz-wort:active:not(:disabled),
.satz-block:active:not(:disabled) {
  transform: translateY(1px);
}

.satz-wort:disabled,
.satz-block:disabled {
  cursor: default;
  opacity: 0.75;
}

/* Das gebeugte Verb ist der Bezugspunkt beider Proben und deshalb immer
   erkennbar - aber nicht anklickbar wie ein Satzglied, denn es ist keines. */
.satz-wort.ist-verb,
.satz-block.ist-verb {
  background: #fef3c7;
  color: #78350f;
  border-color: #f59e0b;
  font-weight: 800;
  cursor: default;
}

.satz-wort.ist-markiert {
  background: var(--md-sys-color-primary-container);
  border-color: var(--md-sys-color-primary);
  font-weight: 700;
}

.satz-block {
  font-weight: 600;
}

.satz-block.ist-getestet {
  opacity: 0.55;
}

.satz-bloecke {
  gap: 0.5rem;
}

/* Das Ergebnis des letzten Versuchs - der eigentliche Messwert. */
.satz-status {
  min-height: 0;
}

.satz-status.ist-gut,
.satz-status.ist-schlecht {
  padding: 0.6rem 0.75rem;
  border-radius: 12px;
  border-left: 4px solid;
}

.satz-status.ist-gut {
  background: #ecfdf5;
  border-color: #10b981;
}

.satz-status.ist-schlecht {
  background: #fef2f2;
  border-color: #ef4444;
}

.satz-status-satz {
  font-size: 1rem;
  font-weight: 700;
  color: #0f172a;
}

.satz-status-grund {
  margin-top: 0.2rem;
  font-size: 0.82rem;
  line-height: 1.4;
  color: #334155;
}

.satz-fund-kopf {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--md-sys-color-on-surface-variant);
}

.satz-zaehler {
  font-variant-numeric: tabular-nums;
  text-transform: none;
  letter-spacing: 0;
  color: var(--md-sys-color-primary);
}

.satz-funde {
  margin: 0;
  padding-left: 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.95rem;
  color: var(--md-sys-color-on-surface);
}

.satz-pruefungen {
  list-style: none;
  padding-left: 0;
}

.satz-pruefungen .ist-weg { color: #047857; }
.satz-pruefungen .ist-noetig { color: #b91c1c; }

body.dark-theme .satz-status.ist-gut { background: #052e23; }
body.dark-theme .satz-status.ist-schlecht { background: #3f1212; }
body.dark-theme .satz-status-satz { color: #e2e8f0; }
body.dark-theme .satz-status-grund { color: #cbd5e1; }
body.dark-theme .satz-pruefungen .ist-weg { color: #6ee7b7; }
body.dark-theme .satz-pruefungen .ist-noetig { color: #fca5a5; }

@media (max-width: 600px), (pointer: coarse) {
  .satz-wort,
  .satz-block { min-height: 44px; font-size: 1.05rem; }
}

/* Verb-Detektiv: zwei Zeitstufen untereinander, damit man vergleichen kann. */
.satz-fassung {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

/* Achtung, Falle: Ein `display` aus diesem Stylesheet schlaegt die eingebaute
   Regel des Browsers fuer das hidden-Attribut. Ohne diese Zeile blieb ein
   `el.hidden = true` wirkungslos, und in der naechsten Mission stand noch die
   Vergangenheitsfassung der vorigen da. Wer hier weitere Bloecke mit eigenem
   display ergaenzt und sie per hidden schaltet, braucht dasselbe Paar. */
.satz-fassung[hidden] {
  display: none;
}

.satz-fassung-name {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--md-sys-color-primary);
}

/* Wörter, die nur dastehen und nicht angeklickt werden. */
.satz-wort.ist-fest {
  cursor: default;
}

/* Komma-Werkstatt: die Lücken zwischen den Wörtern.
   Sie müssen sichtbar sein - man soll wissen, wo überhaupt eines hinkönnte -
   ohne zu verraten, wo eines hingehört. Deshalb sind alle gleich blass. */
.satz-luecken {
  gap: 0.1rem;
}

.satz-luecke {
  padding: 0.4rem 0.3rem;
  min-width: 1.5rem;
  min-height: 40px;
  border: 1px dashed var(--md-sys-color-surface-variant);
  border-radius: 8px;
  background: transparent;
  color: var(--md-sys-color-on-surface-variant);
  font: inherit;
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1;
  opacity: 0.5;
  cursor: pointer;
  transition: opacity 0.12s ease, background 0.12s ease, border-color 0.12s ease;
}

.satz-luecke:hover:not(:disabled),
.satz-luecke:focus-visible:not(:disabled) {
  opacity: 1;
  border-color: var(--md-sys-color-primary);
}

.satz-luecke.ist-gesetzt {
  opacity: 1;
  border-style: solid;
  border-color: #10b981;
  background: #ecfdf5;
  color: #047857;
}

.satz-luecke:disabled {
  cursor: default;
}

.satz-vorschau {
  padding: 0.7rem 0.85rem;
  border-radius: 12px;
  background: var(--md-sys-color-surface-variant);
  font-size: 1.05rem;
  line-height: 1.5;
  color: var(--md-sys-color-on-surface);
}

body.dark-theme .satz-luecke.ist-gesetzt {
  background: #052e23;
  color: #6ee7b7;
}

@media (max-width: 600px), (pointer: coarse) {
  .satz-luecke { min-height: 44px; min-width: 1.8rem; }
}

/* ---------------------------------------------------------------------------
   Fragen-Werkbank: dem Satz Fragen stellen

   Die drei Knöpfe sind der Versuchsaufbau. Ein gestellter Knopf zeigt sein
   Ergebnis dauerhaft an - ✓ wenn der Satz antwortet, — wenn nicht. So steht
   die Messung am Ende auf dem Schirm, bevor sie in die Tabelle wandert.
--------------------------------------------------------------------------- */

.fassung-kopf {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
}

.fassung-zaehler {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--md-sys-color-on-surface-variant);
}

.frage-reihe {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.frage-knopf {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1 1 9rem;
  padding: 0.55rem 0.7rem;
  border: 2px solid var(--md-sys-color-primary);
  border-radius: 12px;
  background: var(--md-sys-color-surface);
  color: var(--md-sys-color-primary);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  min-height: 44px;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, transform 0.08s ease;
}

.frage-knopf:hover:not(:disabled) {
  background: var(--md-sys-color-primary-container);
}

.frage-knopf:active:not(:disabled) {
  transform: translateY(1px);
}

.frage-text {
  flex: 1 1 auto;
}

.frage-zeichen {
  font-size: 1.1rem;
  font-weight: 900;
  line-height: 1;
}

/* Beantwortet und unbeantwortet sind beide gültige Messwerte - keiner der
   beiden Zustände wird deshalb als Fehler eingefärbt. */
.frage-knopf.ist-beantwortet {
  border-color: #10b981;
  background: #ecfdf5;
  color: #047857;
  opacity: 1;
  cursor: default;
}

.frage-knopf.ist-offen {
  border-color: #94a3b8;
  background: var(--md-sys-color-surface-variant);
  color: var(--md-sys-color-on-surface-variant);
  opacity: 1;
  cursor: default;
}

.frage-knopf:disabled:not(.ist-beantwortet):not(.ist-offen) {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Sozialkunde taucht nur als Hinweis auf der Karte auf - einen eigenen
   Fachfilter gibt es dafür (noch) nicht. */
.chip-social {
  background-color: #eef2ff;
  color: #3730a3;
  border: 1px solid #a5b4fc;
}

body.dark-theme .chip-social {
  background-color: #1e1b4b;
  color: #a5b4fc;
  border-color: #4338ca;
}

body.dark-theme .frage-knopf.ist-beantwortet {
  background: #052e23;
  color: #6ee7b7;
}

/* ---------------------------------------------------------------------------
   Bruch-Labore: der Bruchstreifen mit Lineal

   Die Teile stoßen ohne Lücke aneinander - getrennt nur durch eine Linie am
   rechten Rand. Mit Lücken lägen die Teilgrenzen ein paar Pixel neben den
   Zentimeterstrichen darunter, und bei einem Messgerät ist das nicht egal.
--------------------------------------------------------------------------- */

.bruch-block {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.7rem;
  border-radius: 14px;
  background: var(--md-sys-color-surface-variant);
}

.bruch-kopf {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
}

.bruch-name {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--md-sys-color-on-surface);
}

.bruch-ok {
  color: #047857;
  font-weight: 900;
}

.bruch-ziel {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--md-sys-color-primary);
}

/* Ein Bruch, wie er im Heft steht: Zähler über Nenner. */
.bruch-zahl {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.05;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.bruch-z,
.bruch-n {
  padding: 0 0.2rem;
}

.bruch-n {
  border-top: 2px solid currentColor;
}

.bruch-stepper {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.bruch-stepper .ato-step {
  width: 40px;
}

.bruch-teile-zahl {
  min-width: 4.2rem;
  text-align: center;
  font-size: 0.85rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.bruch-streifen {
  display: flex;
  height: 52px;
  border: 2px solid #475569;
  border-radius: 6px;
  overflow: hidden;
  background: var(--md-sys-color-surface);
}

.bruch-teil {
  height: 100%;
  border: 0;
  padding: 0;
  margin: 0;
  background: var(--md-sys-color-surface);
  box-shadow: inset -2px 0 0 #475569;
  font: inherit;
  cursor: default;
  transition: background 0.15s ease;
}

.bruch-teil:last-child {
  box-shadow: none;
}

button.bruch-teil {
  cursor: pointer;
}

button.bruch-teil:hover:not(:disabled) {
  background: color-mix(in srgb, var(--farbe) 25%, var(--md-sys-color-surface));
}

button.bruch-teil:focus-visible {
  outline: 3px solid var(--md-sys-color-primary);
  outline-offset: -3px;
}

.bruch-teil.ist-gefaerbt,
button.bruch-teil.ist-gefaerbt:hover:not(:disabled) {
  background: var(--farbe);
}

button.bruch-teil:disabled {
  cursor: default;
}

/* Das Lineal - die Striche sitzen genau unter den Zentimetern des Streifens. */
.bruch-lineal {
  position: relative;
  height: 26px;
  margin: 0 1px;
}

.bruch-strich {
  position: absolute;
  top: 0;
  width: 1px;
  height: 6px;
  background: #64748b;
  transform: translateX(-0.5px);
}

.bruch-strich.ist-lang {
  height: 10px;
  background: #334155;
}

.bruch-cm {
  position: absolute;
  top: 11px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.66rem;
  font-variant-numeric: tabular-nums;
  color: var(--md-sys-color-on-surface-variant);
}

.bruch-messwert {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--md-sys-color-on-surface);
  font-variant-numeric: tabular-nums;
}

.bruch-werkzeug {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.bruch-werkzeug-zeile {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.bruch-werkzeug-titel {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--md-sys-color-on-surface-variant);
}

.bruch-werkzeug-knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.bruch-werkzeug-knopf {
  flex: 1 1 4.5rem;
  min-height: 44px;
  flex-direction: row;
}

.bruch-werkzeug-knopf:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.bruch-verlauf {
  font-size: 0.82rem;
  color: var(--md-sys-color-on-surface-variant);
}

body.dark-theme .bruch-streifen,
body.dark-theme .bruch-teil {
  border-color: #94a3b8;
}

body.dark-theme .bruch-teil {
  box-shadow: inset -2px 0 0 #94a3b8;
}

body.dark-theme .bruch-teil:last-child {
  box-shadow: none;
}

/* ---------------------------------------------------------------------------
   Rechtsseiten (Impressum, Datenschutz) und die Fußzeile mit den Links

   Die Links stehen auf jeder Ansicht der Werkstatt unten und zusätzlich in
   der Seitenleiste - ein Impressum muss von überall aus mit höchstens zwei
   Klicks erreichbar sein.
--------------------------------------------------------------------------- */

.site-footer {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 1.5rem 1rem 1rem;
  font-size: 0.8rem;
  color: var(--md-sys-color-on-surface-variant);
}

.site-footer a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.site-footer a:hover,
.site-footer a:focus-visible {
  color: var(--md-sys-color-primary);
}

.nav-rechtliches {
  display: flex;
  gap: 0.5rem;
  padding: 1rem 1rem 0.5rem;
  font-size: 0.75rem;
}

.nav-rechtliches a {
  color: var(--md-sys-color-on-surface-variant);
}

body.rechtsseite {
  min-height: 100vh;
  background: var(--md-sys-color-background);
  color: var(--md-sys-color-on-background);
  font-family: 'Roboto', system-ui, sans-serif;
}

.rechtsseite-kopf {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 0.9rem 1.25rem;
  background: var(--md-sys-color-surface);
  box-shadow: var(--md-elevation-1);
}

.rechtsseite-marke {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
}

.rechtsseite-zurueck {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--md-sys-color-primary);
  text-decoration: none;
}

.rechtstext {
  max-width: 44rem;
  margin: 0 auto;
  padding: 2rem 1.25rem 1rem;
  line-height: 1.6;
}

.rechtstext h1 {
  font-size: 1.8rem;
  margin-bottom: 0.5rem;
}

.rechtstext h2 {
  font-size: 1.1rem;
  margin: 1.6rem 0 0.4rem;
}

.rechtstext p,
.rechtstext ul {
  margin-bottom: 0.8rem;
}

.rechtstext ul {
  padding-left: 1.3rem;
}

.rechtstext a {
  color: var(--md-sys-color-primary);
}

.rechtstext-einleitung,
.rechtstext-stand {
  color: var(--md-sys-color-on-surface-variant);
  font-size: 0.9rem;
}

.rechtstext-kurz {
  padding: 0.4rem 1.1rem 0.2rem;
  border-left: 4px solid var(--md-sys-color-secondary);
  border-radius: 8px;
  background: var(--md-sys-color-secondary-container);
}

.rechtstext-kurz h2 {
  margin-top: 0.6rem;
}

/* Platzhalter fallen absichtlich auf - sie dürfen so nicht online gehen. */
mark.platzhalter {
  padding: 0 0.2rem;
  border-radius: 4px;
  background: #fde047;
  color: #422006;
}

/* ---------------------------------------------------------------------------
   Klassenblick: Bearbeitungszeiten
--------------------------------------------------------------------------- */

.zeit-auswertung {
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.zeit-auswertung h2 {
  font-size: 1.2rem;
}

.zeit-auswertung h3 {
  font-size: 1rem;
  margin-top: 0.5rem;
}

.zeit-leer,
.zeit-offen {
  color: var(--md-sys-color-on-surface-variant);
  font-style: italic;
}

.zeit-detail td {
  padding-top: 0;
  background: transparent;
}

.zeit-detail summary {
  cursor: pointer;
  font-size: 0.8rem;
  color: var(--md-sys-color-primary);
}

.zeit-detail ol {
  margin: 0.3rem 0 0.4rem 1.2rem;
  font-size: 0.82rem;
  line-height: 1.5;
}

.zeit-vorschlag {
  padding: 0.7rem 0.9rem;
  border-left: 4px solid var(--md-sys-color-primary);
  border-radius: 8px;
  background: var(--md-sys-color-primary-container);
  font-size: 0.9rem;
}

.zeit-vorschlag p {
  margin-top: 0.3rem;
}

.zeit-sammeln {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.zeit-zeile {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.zeit-text {
  width: 100%;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: 10px;
  background: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
  font: 0.78rem/1.4 ui-monospace, SFMono-Regular, Consolas, monospace;
  resize: vertical;
}

@media print {
  .zeit-sammeln,
  .zeit-detail summary { display: none !important; }
  .zeit-detail details { display: block; }
}

/* ---------------------------------------------------------------------------
   Handreichung für Lehrkräfte
--------------------------------------------------------------------------- */

.handreichung {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  max-width: 60rem;
}

.hr-aktionen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
}

.hr-link {
  font-size: 0.85rem;
  color: var(--md-sys-color-on-surface-variant);
}

.hr-block,
.hr-einheit {
  padding: 1.1rem 1.25rem;
  border-radius: 16px;
  background: var(--md-sys-color-surface);
  box-shadow: var(--md-elevation-1);
  line-height: 1.55;
}

.hr-block h2 {
  font-size: 1.15rem;
  margin-bottom: 0.5rem;
}

.hr-block p + p,
.hr-block ul + p {
  margin-top: 0.5rem;
}

.hr-schritte,
.hr-liste,
.hr-ablauf {
  padding-left: 1.3rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.hr-sterne {
  list-style: none;
  padding: 0;
  margin: 0.3rem 0;
}

.hr-stern {
  display: inline-block;
  min-width: 3.2rem;
  color: #f59e0b;
  letter-spacing: 0.05em;
}

.hr-block a,
.hr-einheit a,
.hr-tabelle a {
  color: var(--md-sys-color-primary);
}

.hr-einheit {
  border-left: 5px solid var(--md-sys-color-primary);
  scroll-margin-top: 1rem;
}

.hr-einheit-kopf h3 {
  font-size: 1.3rem;
  margin: 0.2rem 0 0.3rem;
}

.hr-frage {
  font-style: italic;
  color: var(--md-sys-color-on-surface-variant);
}

.hr-einheit h4 {
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--md-sys-color-primary);
  margin: 1rem 0 0.3rem;
}

.hr-fakten {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.3rem 1rem;
  margin-top: 0.8rem;
  font-size: 0.92rem;
}

.hr-fakten dt {
  font-weight: 700;
  color: var(--md-sys-color-on-surface-variant);
}

.hr-ergebnis {
  padding: 0.6rem 0.8rem;
  border-radius: 10px;
  background: var(--md-sys-color-secondary-container);
}

.hr-oeffnen {
  margin-top: 1rem;
}

.hr-fussnote {
  font-size: 0.85rem;
  color: var(--md-sys-color-on-surface-variant);
}

@media (max-width: 600px) {
  .hr-fakten { grid-template-columns: 1fr; }
  .hr-fakten dd { margin-bottom: 0.4rem; }
}

@media print {
  .hr-aktionen,
  .hr-oeffnen,
  #view-teacher .hero-badge-pill { display: none !important; }
  .hr-block,
  .hr-einheit { box-shadow: none !important; border: 1px solid #bbb; break-inside: avoid; }
  .hr-einheit { page-break-inside: avoid; }
  .handreichung { max-width: none; }
}

/* Lizenzseite: der Vorschlag für die Namensnennung zum Abschreiben */
.lizenz-beispiel {
  padding: 0.6rem 0.8rem;
  border-radius: 10px;
  background: var(--md-sys-color-surface-variant);
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 0.85rem;
}