/* style.css - QRENA v5.0 - Liquid Glass Design System (2025) */

:root {
  /* ========== LIQUID GLASS DESIGN SYSTEM ========== */

  /* Background Layers - Radial Gradients */
  --glow-1: radial-gradient(700px 420px at 20% 15%, rgba(120, 170, 255, .35), rgba(0,0,0,0) 60%);
  --glow-2: radial-gradient(900px 520px at 85% 55%, rgba(255, 140, 200, .22), rgba(0,0,0,0) 62%);
  --glow-3: radial-gradient(520px 360px at 45% 95%, rgba(120, 255, 210, .16), rgba(0,0,0,0) 60%);

  /* Glass System - Transparency without backdrop-filter */
  --glass-bg: rgba(31, 41, 55, 0.4);
  --glass-bg-hover: rgba(31, 41, 55, 0.5);
  --glass-bg-active: rgba(59, 130, 246, 0.2);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-border-hover: rgba(255, 255, 255, 0.12);
  --glass-border-active: rgba(59, 130, 246, 0.4);

  /* Row/Inner Elements - Slightly darker */
  --glass-inner: rgba(31, 41, 55, 0.3);
  --glass-inner-hover: rgba(31, 41, 55, 0.4);

  /* Gradient Accents */
  --gradient-primary: linear-gradient(90deg, #60a5fa, #a78bfa, #34d399);
  --gradient-subtle: linear-gradient(90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.1) 20%,
    rgba(255, 255, 255, 0.1) 80%,
    transparent 100%
  );

  /* Additional Design Tokens */
  --fg: rgba(255, 255, 255, 0.92);
  --hairline: rgba(255, 255, 255, 0.12);

  /* Basis Colors - Liquid Glass Theme */
  --bg: #0b0c10;
  --panel: #111827;
  --panel-2: #1f2937;
  --panel-3: #374151;
  --brand: #3b82f6;
  --brand-light: #60a5fa;
  --brand-dark: #1d4ed8;
  --success: #22c55e;
  --success-light: #4ade80;
  --error: #ef4444;
  --error-light: #f87171;
  --warning: #f59e0b;
  --warning-light: #fbbf24;
  --muted: #94a3b8;
  --border: #334155;
  --border-light: rgba(255, 255, 255, 0.1);
  --text: #f1f5f9;
  --text-secondary: #cbd5e1;
  --text-dark: #1f2937;

  /* Font Sizes - Lesbar & Modern */
  --fs-xs: 0.75rem;    /* 12px */
  --fs-sm: 0.875rem;   /* 14px */
  --fs-base: 1rem;     /* 16px */
  --fs-lg: 1.125rem;   /* 18px */
  --fs-xl: 1.25rem;    /* 20px */
  --fs-2xl: 1.5rem;    /* 24px */
  --fs-3xl: 1.875rem;  /* 30px */
  --fs-4xl: 2.25rem;   /* 36px */

  /* Spacing - 4px Grid System (Tailwind-like) */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  /* Legacy Spacing (für Kompatibilität) */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;

  /* Touch Targets - iOS Human Interface Guidelines */
  --touch-min: 48px;
  --touch-comfortable: 56px;

  /* Border Radius - Modern Rounded */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-full: 9999px;

  /* Shadows - Depth System */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 12px 32px rgba(0, 0, 0, 0.6);
  --shadow-glow: 0 0 20px rgba(59, 130, 246, 0.3);

  /* Transitions - Smooth Animations */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-bounce: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* High Contrast Mode */
body.high-contrast {
  --bg: #000000;
  --panel: #1a1a1a;
  --panel-2: #2a2a2a;
  --brand: #4a90ff;
  --success: #00ff00;
  --error: #ff0000;
  --warning: #ffff00;
  --text: #ffffff;
  --border: #ffffff;
}

/* Font Size Variations */
body.font-small {
  --fs-base: 0.875rem;
  --fs-lg: 1rem;
  --fs-xl: 1.125rem;
  --fs-2xl: 1.25rem;
  --fs-3xl: 1.5rem;
  --fs-4xl: 1.875rem;
}

body.font-large {
  --fs-base: 1.125rem;
  --fs-lg: 1.25rem;
  --fs-xl: 1.5rem;
  --fs-2xl: 1.75rem;
  --fs-3xl: 2.25rem;
  --fs-4xl: 3rem;
}

body.font-xlarge {
  --fs-base: 1.25rem;
  --fs-lg: 1.5rem;
  --fs-xl: 1.75rem;
  --fs-2xl: 2rem;
  --fs-3xl: 2.5rem;
  --fs-4xl: 3.5rem;
}

/* ============================================
   GLOBAL STYLES - FÜR ALLE SEITEN
   ============================================ */

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html {
  height: 100%;
  overflow-x: hidden;
}

body {
  margin: 0;
  padding: 0;
  /* PWA Safe Area: Padding for iOS notch, Dynamic Island, and status bar */
  padding-top: env(safe-area-inset-top, 0px);
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  min-height: 100vh;
  overflow-x: hidden;
  font-family: ui-sans-serif, system-ui, -apple-system, "SF Pro Display", "SF Pro Text", BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
  font-size: var(--fs-base);
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  position: relative;
}

/* ============================================
   LIQUID GLASS GLOBAL LAYERS
   ============================================ */

/* Background Gradient Layers */
.bg-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -2;
  background:
    var(--glow-1),
    var(--glow-2),
    var(--glow-3);
  filter: saturate(1.1);
  transform: translateZ(0);
}

/* SVG Noise Overlay */
.noise {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .08;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  mix-blend-mode: overlay;
}

/* ============================================
   LIQUID GLASS CARD SYSTEM
   ============================================ */

/* Base Card - Liquid Glass without backdrop-filter */
.card {
  position: relative;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  box-shadow: 0 10px 30px rgba(0,0,0,.14);
  overflow: hidden;
  transition: all var(--transition-base);
}

/* Gradient accent line on top */
.card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--gradient-primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.card:hover::before {
  transform: scaleX(1);
}

.card:hover {
  background: var(--glass-bg-hover);
  border-color: var(--glass-border-hover);
  transform: translateY(-4px);
  box-shadow: 0 15px 40px rgba(0,0,0,.2);
}

/* Active Card State */
.card.active {
  background: var(--glass-bg-active);
  border-color: var(--glass-border-active);
  box-shadow: 0 10px 30px rgba(59, 130, 246, 0.3);
}

/* Inner Elements (Rows, Sub-Cards) */
.row,
.inner-card {
  background: var(--glass-inner);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  margin: var(--space-2) 0;
  transition: all var(--transition-fast);
}

.row:hover,
.inner-card:hover {
  background: var(--glass-inner-hover);
  border-color: var(--glass-border-hover);
}

/* ============================================
   WASSERZEICHEN - AUF ALLEN SEITEN
   ============================================ */

/* QRENA Logo Wasserzeichen entfernt - nur Schullogo wird verwendet */

/* ============================================
   ACCESSIBILITY
   ============================================ */

/* Focus Styles for Keyboard Navigation */
*:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 2px;
  border-radius: 4px;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 2px;
}

/* Skip to Content Link (Screen Reader) */
.skip-to-content {
  position: absolute;
  top: -100px;
  left: 0;
  background: var(--brand);
  color: white;
  padding: 12px 20px;
  text-decoration: none;
  font-weight: 600;
  z-index: 10000;
  border-radius: 0 0 8px 0;
}

.skip-to-content:focus {
  top: 0;
}

/* Screen Reader Only */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* ============================================
   UNIFIED BUTTONS - FÜR ALLE SEITEN
   ============================================ */

.btn,
button:not([class*="close"]):not([class*="rotate"]):not([class*="counter"]):not([class*="sol-btn-icon"]):not([class*="sol-btn-danger"]):not([class*="sol-tolerant"]):not([class*="sol-grid"]):not([class*="sol-tab"]):not([class*="sol-radar"]):not([class*="sol-review"]):not([class*="pa-btn"]):not([class*="sol-track"]):not([class*="sol-feedback"]):not([class*="exit-game-btn"]):not([class*="notif-badge-btn"]):not([class*="number-btn"]):not([class*="btn-icon-sm"]):not([class*="p3-launch-pin-copy"]):not([class*="ki-quellen-chip-remove"]):not([class*="sol-btn-back"]):not([class*="sol-outline-plenum-label"]):not([class*="task-pdf-open-btn"]):not([class*="task-pdf-lightbox-close-btn"]):not([class*="sol-lj"]):not([class*="sol-wb"]),
.touch-target {
  min-height: var(--touch-min);
  min-width: var(--touch-min);
  padding: var(--space-3) var(--space-5);
  font-size: var(--fs-base);
  font-weight: 600;
  letter-spacing: -0.01em;
  border: none;
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all var(--transition-base);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  position: relative;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

/* Ripple Effect Base */
.btn::after,
button:not([class*="close"]):not([class*="rotate"]):not([class*="counter"]):not([class*="sol-btn-icon"]):not([class*="sol-btn-danger"]):not([class*="sol-tolerant"]):not([class*="sol-grid"]):not([class*="sol-tab"]):not([class*="sol-radar"]):not([class*="sol-review"]):not([class*="pa-btn"]):not([class*="sol-track"]):not([class*="sol-feedback"]):not([class*="exit-game-btn"]):not([class*="notif-badge-btn"]):not([class*="number-btn"]):not([class*="btn-icon-sm"]):not([class*="p3-launch-pin-copy"]):not([class*="ki-quellen-chip-remove"]):not([class*="sol-btn-back"]):not([class*="sol-outline-plenum-label"]):not([class*="task-pdf-open-btn"]):not([class*="task-pdf-lightbox-close-btn"]):not([class*="sol-lj"]):not([class*="sol-wb"])::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, transparent 70%);
  opacity: 0;
  transform: scale(0);
  transition: all 0.4s ease;
}

.btn:hover,
button:not([class*="close"]):not([class*="rotate"]):not([class*="counter"]):not([class*="sol-btn-icon"]):not([class*="sol-btn-danger"]):not([class*="sol-tolerant"]):not([class*="sol-grid"]):not([class*="sol-tab"]):not([class*="sol-radar"]):not([class*="sol-review"]):not([class*="pa-btn"]):not([class*="sol-track"]):not([class*="sol-feedback"]):not([class*="exit-game-btn"]):not([class*="notif-badge-btn"]):not([class*="number-btn"]):not([class*="btn-icon-sm"]):not([class*="p3-launch-pin-copy"]):not([class*="ki-quellen-chip-remove"]):not([class*="sol-btn-back"]):not([class*="sol-outline-plenum-label"]):not([class*="task-pdf-open-btn"]):not([class*="task-pdf-lightbox-close-btn"]):not([class*="sol-lj"]):not([class*="sol-wb"]):hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.2);
}

.btn:active,
button:not([class*="close"]):not([class*="rotate"]):not([class*="counter"]):not([class*="sol-btn-icon"]):not([class*="sol-btn-danger"]):not([class*="sol-tolerant"]):not([class*="sol-grid"]):not([class*="sol-tab"]):not([class*="sol-radar"]):not([class*="sol-review"]):not([class*="pa-btn"]):not([class*="sol-track"]):not([class*="sol-feedback"]):not([class*="exit-game-btn"]):not([class*="notif-badge-btn"]):not([class*="number-btn"]):not([class*="btn-icon-sm"]):not([class*="p3-launch-pin-copy"]):not([class*="ki-quellen-chip-remove"]):not([class*="sol-btn-back"]):not([class*="sol-outline-plenum-label"]):not([class*="task-pdf-open-btn"]):not([class*="task-pdf-lightbox-close-btn"]):not([class*="sol-lj"]):not([class*="sol-wb"]):active {
  transform: scale(0.97);
  box-shadow: var(--shadow-sm);
}

.btn:active::after,
button:not([class*="close"]):not([class*="rotate"]):not([class*="counter"]):not([class*="sol-btn-icon"]):not([class*="sol-btn-danger"]):not([class*="sol-tolerant"]):not([class*="sol-grid"]):not([class*="sol-tab"]):not([class*="sol-radar"]):not([class*="sol-review"]):not([class*="pa-btn"]):not([class*="sol-track"]):not([class*="sol-feedback"]):not([class*="exit-game-btn"]):not([class*="notif-badge-btn"]):not([class*="number-btn"]):not([class*="btn-icon-sm"]):not([class*="p3-launch-pin-copy"]):not([class*="ki-quellen-chip-remove"]):not([class*="sol-btn-back"]):not([class*="sol-outline-plenum-label"]):not([class*="task-pdf-open-btn"]):not([class*="task-pdf-lightbox-close-btn"]):not([class*="sol-lj"]):not([class*="sol-wb"]):active::after {
  opacity: 1;
  transform: scale(2);
  transition: 0s;
}

.btn:disabled,
button:not([class*="close"]):not([class*="rotate"]):not([class*="counter"]):not([class*="sol-btn-icon"]):not([class*="sol-btn-danger"]):not([class*="sol-tolerant"]):not([class*="sol-grid"]):not([class*="sol-tab"]):not([class*="sol-radar"]):not([class*="sol-review"]):not([class*="pa-btn"]):not([class*="sol-track"]):not([class*="sol-feedback"]):not([class*="exit-game-btn"]):not([class*="notif-badge-btn"]):not([class*="number-btn"]):not([class*="btn-icon-sm"]):not([class*="p3-launch-pin-copy"]):not([class*="ki-quellen-chip-remove"]):not([class*="sol-btn-back"]):not([class*="sol-outline-plenum-label"]):not([class*="task-pdf-open-btn"]):not([class*="task-pdf-lightbox-close-btn"]):not([class*="sol-lj"]):not([class*="sol-wb"]):disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Loading State */
.btn.loading {
  pointer-events: none;
  color: transparent;
}

.btn.loading::before {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: white;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ─── QRENA Global Animation Utilities ───────────────────────────────────── */

@keyframes viewFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.view-fade-in { animation: viewFadeIn 0.2s ease-out forwards; }

@keyframes pageExit {
  to { opacity: 0; transform: translateY(-4px); }
}
.page-exit { animation: pageExit 0.15s ease-in forwards; pointer-events: none; }

@keyframes scoreFlash {
  0%   { color: inherit; transform: scale(1); }
  40%  { color: #10b981; transform: scale(1.1); }
  100% { color: inherit; transform: scale(1); }
}
.score-flash { animation: scoreFlash 0.5s ease-out; }

.stagger-1 { animation-delay: 0.05s; }
.stagger-2 { animation-delay: 0.1s;  }
.stagger-3 { animation-delay: 0.15s; }
.stagger-4 { animation-delay: 0.2s;  }
.stagger-5 { animation-delay: 0.25s; }

/* View-Transition für alle .control-view.active (lehrkraft + live-control) */
.control-view.active { animation: viewFadeIn 0.2s ease-out; }

@media (prefers-reduced-motion: reduce) {
  .view-fade-in, .page-exit, .score-flash, .control-view.active {
    animation: none !important;
    transition: none !important;
  }
}

/* Button Variants - Modern with Glow */
.btn-primary {
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
  color: white;
  border: none;
  box-shadow: var(--shadow-md), 0 0 20px rgba(59, 130, 246, 0.3);
}

.btn-primary:hover {
  background: linear-gradient(135deg, var(--brand-light) 0%, var(--brand) 100%);
  border: none;
  box-shadow: var(--shadow-lg), 0 0 30px rgba(59, 130, 246, 0.4);
}

.btn-secondary {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.25);
}

.btn-success,
.btn-green {
  background: linear-gradient(135deg, var(--success) 0%, #16a34a 100%);
  color: white;
  border: none;
  box-shadow: var(--shadow-md), 0 0 20px rgba(34, 197, 94, 0.3);
}

.btn-success:hover,
.btn-green:hover {
  background: linear-gradient(135deg, var(--success-light) 0%, var(--success) 100%);
  border: none;
  box-shadow: var(--shadow-lg), 0 0 30px rgba(34, 197, 94, 0.4);
}

.btn-error,
.btn-red {
  background: linear-gradient(135deg, var(--error) 0%, #dc2626 100%);
  color: white;
  border: none;
  box-shadow: var(--shadow-md), 0 0 20px rgba(239, 68, 68, 0.3);
}

.btn-error:hover,
.btn-red:hover {
  background: linear-gradient(135deg, var(--error-light) 0%, var(--error) 100%);
  border: none;
  box-shadow: var(--shadow-lg), 0 0 30px rgba(239, 68, 68, 0.4);
}

.btn-warning {
  background: linear-gradient(135deg, var(--warning) 0%, #d97706 100%);
  color: var(--text-dark);
  border: none;
  box-shadow: var(--shadow-md), 0 0 20px rgba(245, 158, 11, 0.3);
}

.btn-warning:hover {
  background: linear-gradient(135deg, var(--warning-light) 0%, var(--warning) 100%);
  border: none;
  box-shadow: var(--shadow-lg), 0 0 30px rgba(245, 158, 11, 0.4);
}

.btn-blue {
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
  color: white;
  border: none;
  box-shadow: var(--shadow-md), 0 0 20px rgba(59, 130, 246, 0.3);
}

.btn-blue:hover {
  background: linear-gradient(135deg, var(--brand-light) 0%, var(--brand) 100%);
  border: none;
  box-shadow: var(--shadow-lg), 0 0 30px rgba(59, 130, 246, 0.4);
}

.btn-pink {
  background: linear-gradient(135deg, #d946ef 0%, #a855f7 100%);
  color: white;
  border: none;
  box-shadow: var(--shadow-md), 0 0 20px rgba(217, 70, 239, 0.3);
}

.btn-pink:hover {
  background: linear-gradient(135deg, #e879f9 0%, #d946ef 100%);
  border: none;
  box-shadow: var(--shadow-lg), 0 0 30px rgba(217, 70, 239, 0.4);
}

/* Ghost Button - Outline Style */
.btn-ghost {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
  box-shadow: none;
}

.btn-ghost:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--text-secondary);
}

/* Size Variants */
.btn-sm {
  min-height: 36px;
  padding: var(--space-2) var(--space-3);
  font-size: var(--fs-sm);
}

.btn-lg {
  min-height: var(--touch-comfortable);
  padding: var(--space-4) var(--space-6);
  font-size: var(--fs-lg);
}

.btn-xl {
  min-height: 64px;
  padding: var(--space-5) var(--space-8);
  font-size: var(--fs-xl);
}

/* ============================================
   GLASSMORPHISM CARDS - FÜR ALLE SEITEN
   ============================================ */

.card,
.glass-card,
.card-glass {
  background: linear-gradient(
    135deg,
    rgba(31, 41, 55, 0.9) 0%,
    rgba(31, 41, 55, 0.7) 100%
  );
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-xl);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
  box-shadow: var(--shadow-lg),
              inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition: all var(--transition-base);
  position: relative;
  z-index: 1;
}

/* Subtle shine effect on cards */
.card::before,
.glass-card::before,
.card-glass::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.1) 0%,
    transparent 50%
  );
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--transition-base);
}

.card:hover,
.glass-card:hover,
.card-glass:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-xl),
              inset 0 1px 0 rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.12);
}

.card:hover::before,
.glass-card:hover::before,
.card-glass:hover::before {
  opacity: 1;
}

/* Touch Feedback */
.card:active,
.touch-feedback:active {
  transform: scale(0.98);
  box-shadow: var(--shadow-md);
}

/* Card Variants */
.card-elevated {
  box-shadow: var(--shadow-xl);
}

.card-interactive {
  cursor: pointer;
}

.card-interactive:hover {
  border-color: var(--brand);
  box-shadow: var(--shadow-lg), 0 0 20px rgba(59, 130, 246, 0.15);
}

.card-highlight {
  border-color: var(--brand);
  box-shadow: var(--shadow-lg), 0 0 30px rgba(59, 130, 246, 0.2);
}

.card-success {
  border-color: var(--success);
  box-shadow: var(--shadow-lg), 0 0 20px rgba(34, 197, 94, 0.2);
}

.card-error {
  border-color: var(--error);
  box-shadow: var(--shadow-lg), 0 0 20px rgba(239, 68, 68, 0.2);
}

/* ============================================
   CONTAINERS - MOBILE OPTIMIZED
   ============================================ */

.container {
  width: 100%;
  max-width: 100%;
  padding: var(--space-md);
  margin: 0 auto;
  position: relative;
  z-index: 1;
  /* WICHTIG: min-height statt height für Scrolling */
  min-height: 100vh;
}

/* Mobile: Mehr Padding, natürliche Höhe */
@media (max-width: 768px) {
  .container {
    min-height: auto;
    padding: var(--space-sm);
  }
}

/* ============================================
   MOBILE FIRST IMPROVEMENTS
   ============================================ */

/* Input Fields */
input,
textarea,
select {
  width: 100%;
  padding: 12px 16px;
  font-size: 16px; /* Verhindert Zoom auf iOS */
  background: rgba(0, 0, 0, 0.3);
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  color: var(--text);
  transition: all 0.2s;
  box-sizing: border-box;
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--brand);
  background: rgba(0, 0, 0, 0.4);
}

textarea {
  min-height: 88px;
  resize: vertical;
}

/* Labels */
label {
  display: block;
  margin: 8px 0 6px;
  font-weight: 600;
  color: var(--text);
}

/* ============================================
   ACCESSIBILITY CONTROLS PANEL
   ============================================ */

.accessibility-panel {
  position: fixed;
  top: var(--space-md);
  right: var(--space-md);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: var(--space-sm);
  display: flex;
  gap: var(--space-sm);
  z-index: 9999;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
  flex-wrap: wrap;
  max-width: 90vw;
}

.accessibility-panel button {
  min-width: var(--touch-min);
  min-height: var(--touch-min);
  padding: 8px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: var(--fs-lg);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.accessibility-panel button:hover,
.accessibility-panel button.active {
  background: var(--brand);
  border-color: var(--brand);
  color: white;
}
/* ============================================
   STYLE.CSS - TEIL 2/3
   ============================================ */

/* ============================================
   iOS CAMERA FIX
   ============================================ */

#cameraVideo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scaleX(1);
  transition: transform 0.3s ease;
}

/* iOS 16 Specific Fix */
@supports (-webkit-touch-callout: none) {
  body.ios-16 #cameraVideo {
    transform: scaleX(-1) rotate(180deg);
  }
  
  body.ios-old #cameraVideo {
    transform: scaleX(-1);
  }
}

/* Manual Rotation Button */
.camera-controls {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 12px;
  z-index: 100;
}

.rotate-btn {
  min-width: var(--touch-min);
  min-height: var(--touch-min);
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(10px);
  border: 2px solid white;
  border-radius: 50%;
  color: white;
  font-size: var(--fs-2xl);
  cursor: pointer;
  transition: all var(--transition-fast);
  display: flex;
  align-items: center;
  justify-content: center;
}

.rotate-btn:active {
  transform: scale(0.9);
}

/* QR Code Overlay Canvas */
#qrOverlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10;
}

/* ============================================
   RESPONSIVE BREAKPOINTS
   ============================================ */

/* Small Mobile (Portrait) */
@media (max-width: 374px) {
  :root {
    --fs-base: 0.875rem;
    --space-md: 12px;
  }
  
  .accessibility-panel {
    top: var(--space-sm);
    right: var(--space-sm);
    left: var(--space-sm);
    max-width: none;
  }
  
  .btn {
    font-size: var(--fs-sm);
    padding: 10px 16px;
  }
}

/* Mobile (Portrait) */
@media (max-width: 767px) {
  .container {
    padding: var(--space-sm);
  }
  
  .card {
    border-radius: 12px;
    padding: var(--space-sm);
  }
  
  /* Stack elements vertically on mobile */
  .grid {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
  }
}

/* Tablet (Portrait) */
@media (min-width: 768px) and (max-width: 1023px) {
  .container {
    max-width: 720px;
  }
  
  .grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
  }
}

/* Tablet (Landscape) - OPTIMIERT! */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
  :root {
    --space-md: 12px;
  }
  
  body {
    font-size: 0.9rem;
  }
  
  .accessibility-panel {
    top: 8px;
    right: 8px;
    padding: 6px;
    gap: 6px;
  }
  
  .accessibility-panel button {
    min-width: 40px;
    min-height: 40px;
    font-size: 1rem;
  }
  
  /* Kompaktere Buttons im Landscape */
  .btn {
    padding: 8px 16px;
    font-size: 0.9rem;
  }
  
  /* Sidebar schmaler */
  .sidebar {
    width: 60px;
  }
  
  .sidebar .label {
    display: none;
  }
  
  /* Topbar kompakter */
  .topbar {
    padding: 8px 12px;
    min-height: 48px;
  }
  
  .chip {
    font-size: 0.85rem;
    padding: 4px 8px;
  }
  
  /* Cards kompakter */
  .card {
    padding: 12px;
  }
  
  .card h2 {
    font-size: 1.1rem;
  }
  
  /* Grid optimiert für Landscape */
  .grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }
  
  /* Dashboard Layout für Landscape */
  .dashboard-grid {
    gap: 10px;
  }
  
  .hero-row {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .analytics-row {
    grid-template-columns: 1.5fr 1fr;
  }
}

/* Desktop */
@media (min-width: 1024px) {
  .container {
    max-width: 1200px;
  }
  
  .grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--space-md);
  }
}

/* Large Desktop */
@media (min-width: 1440px) {
  .container {
    max-width: 1400px;
  }
}

/* Touch Device Optimizations */
@media (hover: none) and (pointer: coarse) {
  /* Größere Touch-Targets auf Touch-Geräten */
  .btn,
  button,
  .touch-target,
  a.btn {
    min-height: 48px;
    min-width: 48px;
    padding: 14px 24px;
  }
  
  /* Größere Input Fields */
  input,
  textarea,
  select {
    min-height: 48px;
    padding: 12px 16px;
    font-size: 16px; /* Prevents zoom on iOS */
  }
  
  /* Disable hover effects on touch */
  .card:hover {
    transform: none;
  }
  
  .btn:hover {
    transform: none;
  }
}

/* iPad Specific */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 2) {
  
  /* iPad optimierungen */
  .accessibility-panel {
    top: 12px;
    right: 12px;
  }
  
  /* Kamera Container für iPad */
  #cameraContainer {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  
  /* QR Scanner Bereich größer auf iPad */
  .scanner-area {
    width: 80%;
    max-width: 500px;
    margin: 0 auto;
  }
}

/* Landscape-spezifische Anpassungen */
@media (orientation: landscape) {
  /* Kamera im Landscape mode */
  #cameraContainer {
    height: 100vh;
    width: 100vw;
  }
  
  #cameraVideo {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  /* Controls unten zentriert */
  .camera-controls {
    bottom: 20px;
  }
}

/* Print Styles */
@media print {
  .accessibility-panel,
  .camera-controls,
  button,
  .btn {
    display: none !important;
  }
  
  body {
    background: white;
    color: black;
  }
  
  body::before {
    display: none;
  }
  
  .card {
    border: 1px solid black;
    page-break-inside: avoid;
  }
}

/* ============================================
   SWIPE GESTURES
   ============================================ */

.swipeable {
  touch-action: pan-y;
  position: relative;
  overflow: hidden;
}

.swipe-indicator {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 2rem;
  opacity: 0;
  transition: opacity var(--transition-fast);
  pointer-events: none;
  z-index: 10;
}

.swipe-indicator.left {
  left: 20px;
}

.swipe-indicator.right {
  right: 20px;
}

.swipe-indicator.active {
  opacity: 0.7;
}

/* Tab Navigation with Swipe */
.tab-container {
  position: relative;
  overflow: hidden;
  touch-action: pan-y;
}

.tab-content {
  display: flex;
  transition: transform var(--transition-base);
  will-change: transform;
}

.tab-pane {
  min-width: 100%;
  flex-shrink: 0;
}

/* ============================================
   ANIMATIONS
   ============================================ */

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

@keyframes slideIn {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.6;
  }
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.fade-in {
  animation: fadeIn var(--transition-base) ease-out;
}

.slide-in {
  animation: slideIn var(--transition-base) ease-out;
}

.pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* ============================================
   LOADING STATES
   ============================================ */

.loading {
  position: relative;
  pointer-events: none;
  opacity: 0.6;
}

.loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border: 2px solid var(--brand);
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* ============================================
   TOOLTIPS
   ============================================ */

[data-tooltip] {
  position: relative;
}

[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  padding: 8px 12px;
  background: rgba(0, 0, 0, 0.9);
  color: white;
  font-size: var(--fs-sm);
  white-space: nowrap;
  border-radius: 6px;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-fast);
  margin-bottom: 8px;
  z-index: 1000;
}

[data-tooltip]:hover::after,
[data-tooltip]:focus::after {
  opacity: 1;
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

.hidden {
  display: none !important;
}

.muted {
  color: var(--muted);
}

.text-center {
  text-align: center;
}

.no-select {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.selectable {
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

/* ============================================
   SCROLLBAR STYLING
   ============================================ */

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
}

::-webkit-scrollbar-thumb {
  background: rgba(37, 99, 235, 0.5);
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(37, 99, 235, 0.7);
}

/* ============================================
   MOBILE SAFARI ADDRESS BAR FIX
   ============================================ */

@supports (-webkit-touch-callout: none) {
  body {
    min-height: -webkit-fill-available;
  }
  
  html {
    height: -webkit-fill-available;
  }
}
/* ============================================
   STYLE.CSS - TEIL 3/3 - FINALE
   ============================================ */

/* ============================================
   REDUCED MOTION & PREFERENCES
   ============================================ */

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  
  .swipe-indicator,
  .tab-content {
    transition: none !important;
  }
  
  body::before {
    animation: none !important;
  }
}

/* High Contrast Adjustments */
@media (prefers-contrast: high) {
  body:not(.high-contrast) {
    --border: #ffffff;
    --text: #ffffff;
  }
  
  .btn {
    border: 2px solid currentColor;
  }
  
  .card {
    border: 2px solid var(--border);
  }
}

/* Dark Mode Preference (Already dark by default) */
@media (prefers-color-scheme: dark) {
  /* Already dark by default */
}

/* Light Mode (if implemented) */
body.light-mode {
  --bg: #f8fafc;
  --panel: #ffffff;
  --panel-2: #f1f5f9;
  --text: #1e293b;
  --border: #cbd5e1;
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
}

body.light-mode::before {
  opacity: 0.05;
}

/* ============================================
   ADMIN SPECIFIC STYLES
   ============================================ */

.app {
  display: grid;
  grid-template-columns: 260px 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas: "sidebar topbar" "sidebar main";
  height: 100vh;
  overflow: hidden;
}

.sidebar {
  grid-area: sidebar;
  background: var(--panel);
  border-right: 1px solid var(--border);
  padding: 14px 10px;
  position: sticky;
  top: 0;
  overflow-y: auto;
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 12px;
}

.logo img {
  width: 28px;
  height: 28px;
}

.nav {
  margin-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  text-decoration: none;
  color: #e5e7eb;
  transition: all 0.2s;
  min-height: var(--touch-min);
}

.nav a.active,
.nav a:hover {
  background: #0f172a;
  border: 1px solid #1f2a44;
}

.nav .label {
  font-weight: 600;
}

.topbar {
  grid-area: topbar;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: #111827cc;
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
  max-height: 80px;
  min-height: 56px;
}

.topbar .grow {
  flex: 1;
}

.chips {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.chip {
  background: #0f172a;
  border: 1px solid #1f2a44;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.9rem;
}

.main {
  grid-area: main;
  overflow: auto;
  padding: 16px;
}

.btn-group {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.row {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid #2a354e;
  border-radius: 12px;
  padding: 10px;
  margin: 6px 0;
}

.grid-2col {
  display: grid;
  grid-template-columns: repeat(2, minmax(140px, 1fr));
  gap: 8px;
}

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

.kpi {
  background: #0f172a;
  border: 1px solid #1f2a44;
  border-radius: 14px;
  padding: 14px;
}

.kpi .val {
  font-size: 2rem;
  font-weight: 900;
}

.inline-inputs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.qr-inline {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  margin-top: 8px;
  background: #111827;
  border-radius: 10px;
}

.qr-inline canvas {
  background: #fff;
  border-radius: 6px;
}

.qr-inline a {
  color: #93c5fd;
  word-break: break-all;
  font-size: 0.9rem;
}

/* ============================================
   MODAL / PREVIEW STYLES
   ============================================ */

.preview-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.preview-content {
  background: #fff;
  color: #111;
  padding: 20px;
  border-radius: 12px;
  width: 90%;
  max-width: 420px;
}

.flip-card {
  perspective: 1000px;
  width: 100%;
  height: 220px;
}

.flip-card-inner {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.6s;
}

.flip-card.flipped .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.flip-card-front {
  background: #fff;
  color: #111;
}

.flip-card-back {
  background: #f3f4f6;
  color: #111;
  transform: rotateY(180deg);
}

.answer-input {
  margin-top: 12px;
  padding: 10px;
  font-size: 1.2rem;
  border-radius: 8px;
  border: 2px solid #ddd;
  width: 80%;
  text-align: center;
}

/* ============================================
   COLLAPSIBLE SECTIONS
   ============================================ */

.collapsible-section {
  border-top: 1px solid var(--border);
  margin-top: 16px;
  padding-top: 10px;
}

.collapse-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  padding: 8px;
  border-radius: 8px;
  transition: background 0.2s;
}

.collapse-header:hover {
  background: rgba(255, 255, 255, 0.04);
}

.collapse-icon {
  transition: transform 0.3s;
  font-size: 1.2rem;
}

.collapse-icon.open {
  transform: rotate(90deg);
}

.collapse-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease-in-out;
  opacity: 0;
}

.collapse-content.open {
  max-height: 5000px; /* Mehr Platz für viele Aufgaben */
  opacity: 1;
  transition: max-height 0.4s ease-in-out, opacity 0.3s ease-in;
}

.section-divider {
  border-top: 1px solid var(--border);
  margin: 20px 0;
  padding-top: 16px;
}

/* ============================================
   BADGE SYSTEM
   ============================================ */

.badge {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
}

.badge-success {
  background: rgba(16, 185, 129, 0.2);
  color: #6ee7b7;
}

.badge-info {
  background: rgba(59, 130, 246, 0.2);
  color: #93c5fd;
}

.badge-warning {
  background: rgba(245, 158, 11, 0.2);
  color: #fcd34d;
}

/* ============================================
   RESPONSIVE ADMIN OVERRIDES
   ============================================ */

@media (max-width: 900px) {
  .app {
    grid-template-columns: 64px 1fr;
  }
  
  .nav .label {
    display: none;
  }
  
  .hero-row {
    grid-template-columns: 1fr;
  }
  
  .analytics-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .grid-2col {
    grid-template-columns: 1fr;
  }
  
  .topbar {
    flex-direction: column;
    align-items: flex-start;
    max-height: none;
  }
  
  .btn-group {
    width: 100%;
    justify-content: stretch;
  }
  
  .btn-group button {
    flex: 1;
  }
  
  .podium {
    grid-template-columns: 1fr;
    gap: 8px;
    min-height: auto;
  }
  
  .place-bar {
    height: 60px !important;
  }
}

/* ============================================
   FLOAT UP ANIMATION (für Punkte)
   ============================================ */

@keyframes floatUp {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) translateY(0);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) translateY(-100px);
  }
}

/* ============================================
   CLOSE BUTTON STYLING
   ============================================ */

.close-popup-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1.2rem;
  font-weight: 700;
  transition: all 0.2s;
  z-index: 10;
}

.close-popup-btn:hover {
  background: rgba(0, 0, 0, 0.8);
  transform: scale(1.1);
}

.close-popup-btn:active {
  transform: scale(0.95);
}

/* ============================================
   TASK POPUP - MODERNE AUFGABEN-KARTE v3.2
   ============================================ */

.task-popup-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(8px);
  display: flex;
  /* 🔧 FIX: flex-start statt center - verhindert dass oben abgeschnitten wird */
  align-items: flex-start;
  justify-content: center;
  z-index: 2000;
  padding: var(--space-md);
  padding-top: var(--space-lg);
  overflow-y: auto;
  animation: fadeIn 0.3s ease-out;
}

.task-popup-container {
  position: relative;
  width: 100%;
  max-width: 600px;
  /* 🔧 FIX: Keine max-height - Overlay scrollt */
  margin-bottom: var(--space-lg);
  animation: slideUp 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

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

/* Task Card - Glassmorphism */
.task-card {
  background: radial-gradient(circle at 30% 20%, rgba(59, 130, 246, 0.3), rgba(37, 99, 235, 0.2) 40%, rgba(11, 18, 32, 0.95) 80%);
  backdrop-filter: blur(20px);
  border: 2px solid rgba(59, 130, 246, 0.3);
  border-radius: 24px;
  padding: var(--space-xl);
  box-shadow: 
    0 20px 60px rgba(0, 0, 0, 0.5),
    0 0 40px rgba(37, 99, 235, 0.2) inset;
  position: relative;
  /* 🔧 MEDIA-FIX: overflow visible statt hidden - verhindert dass Medien abgeschnitten werden */
  overflow: visible;
}

/* 🔧 MEDIA-FIX: Container-Erweiterung für Aufgaben mit Medien */
.task-popup-container.has-media {
  max-width: 700px;
}

@media (max-width: 1024px) {
  .task-popup-container.has-media {
    max-width: 90vw;
  }
}

@media (max-width: 640px) {
  .task-popup-container.has-media {
    max-width: 95vw;
  }
}

.task-card::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    45deg,
    transparent,
    rgba(255, 255, 255, 0.03),
    transparent
  );
  transform: rotate(45deg);
  pointer-events: none;
}

/* Close Button - DESIGN-6 Fixed */
.task-close-btn {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  border-radius: 50%;
  background: rgba(239, 68, 68, 0.2);
  border: 2px solid rgba(239, 68, 68, 0.4);
  color: #fca5a5;
  font-size: 1.25rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  z-index: 10;
  font-weight: 400;
  line-height: 1;
  padding: 0;
  margin: 0;
  text-align: center;
  font-family: system-ui, -apple-system, sans-serif;
  box-sizing: border-box;
  flex-shrink: 0;
}

/* Fix für iOS/Safari */
.task-close-btn::-webkit-inner-spin-button {
  display: none;
}

.task-close-btn:hover {
  background: rgba(239, 68, 68, 0.35);
  border-color: #ef4444;
  color: #fff;
  transform: rotate(90deg) scale(1.05);
  box-shadow: 0 0 16px rgba(239, 68, 68, 0.4);
}

.task-close-btn:active {
  transform: rotate(90deg) scale(0.95);
}

/* Touch-Feedback für Mobile */
@media (hover: none) {
  .task-close-btn:active {
    background: rgba(239, 68, 68, 0.4);
    transform: scale(0.92);
  }
}

/* Task Header */
.task-header {
  text-align: center;
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-md);
  border-bottom: 2px solid rgba(59, 130, 246, 0.2);
}

/* YouTube Video Container - 🔧 MEDIA-FIX: Explizite Breite */
.task-video-container {
  margin-bottom: var(--space-lg);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  width: 100%;
  max-width: 100%;
}

.video-wrapper {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
  height: 0;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.8);
}

.video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* 🆕 BUG-3 FIX: Image Container - iPad-optimiert */
.task-image-container {
  margin-bottom: var(--space-lg);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  background: rgba(0, 0, 0, 0.05);
  max-width: 100%; /* Verhindert Überlauf */
}

.task-image {
  width: 100%;
  height: auto;
  display: block;
  /* 🆕 BUG-3 FIX: Dynamische Höhe statt fixer 400px */
  max-height: min(60vh, 500px);
  object-fit: contain;
  object-position: center;
}

/* iPad + ältere Tablets: Mehr Platz für Medien */
@media (max-width: 1024px) {
  .task-image {
    max-height: 50vh;
  }
  .task-video-container {
    max-width: 100%;
  }
}

@media (max-width: 768px) {
  .task-image {
    max-height: 45vh;
  }
}

/* Audio Container */
.task-audio-container {
  margin-bottom: var(--space-lg);
  padding: 16px;
  border-radius: 16px;
  background: linear-gradient(135deg, #667eea15 0%, #764ba215 100%);
  border: 2px solid rgba(102, 126, 234, 0.2);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15);
}

.task-audio {
  width: 100%;
  height: 54px;
  border-radius: 8px;
  outline: none;
}

.task-audio:focus {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.task-icon {
  font-size: 4rem;
  margin-bottom: var(--space-sm);
  display: block;
  animation: bounce 2s ease-in-out infinite;
}

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

.task-question {
  font-size: var(--fs-2xl);
  font-weight: 900;
  color: #fff;
  margin: 0 0 var(--space-sm) 0;
  line-height: 1.3;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.task-meta {
  display: flex;
  gap: var(--space-sm);
  justify-content: center;
  flex-wrap: wrap;
  margin-top: var(--space-sm);
}

.task-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: var(--fs-sm);
  font-weight: 700;
  background: rgba(59, 130, 246, 0.2);
  border: 1px solid rgba(59, 130, 246, 0.3);
  color: #93c5fd;
}

/* Manuelle-Bewertung-Hinweis: gleiche Indigo/Violet-Identitaet wie der
   SOS-Button – signalisiert "hier ist ein Mensch beteiligt", nicht automatisch
   geprueft. Erklaert dem Kind ohne Umweg, warum keine Sofort-Rueckmeldung kommt. */
.task-badge--review {
  background: rgba(99, 102, 241, 0.18);
  border-color: rgba(99, 102, 241, 0.35);
  color: #c4b5fd;
}

/* Task Form */
.task-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

/* Input Styles */
.task-input {
  width: 100%;
  padding: 16px 20px;
  font-size: var(--fs-xl);
  font-weight: 600;
  background: rgba(0, 0, 0, 0.4);
  border: 3px solid rgba(59, 130, 246, 0.3);
  border-radius: 16px;
  color: #fff;
  text-align: center;
  transition: all var(--transition-base);
  box-sizing: border-box;
}

.task-input:focus {
  outline: none;
  border-color: var(--brand);
  background: rgba(0, 0, 0, 0.5);
  box-shadow: 0 0 20px rgba(37, 99, 235, 0.3);
  transform: scale(1.02);
}

.task-input::placeholder {
  color: rgba(255, 255, 255, 0.4);
  font-weight: 500;
}

/* Multiple Choice Options */
.task-options {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.task-option {
  position: relative;
  display: flex;
  align-items: center;
  padding: 16px 20px;
  background: rgba(0, 0, 0, 0.3);
  border: 2px solid rgba(59, 130, 246, 0.2);
  border-radius: 12px;
  cursor: pointer;
  transition: all var(--transition-base);
  min-height: var(--touch-min);
}

.task-option:hover {
  background: rgba(59, 130, 246, 0.15);
  border-color: rgba(59, 130, 246, 0.4);
  transform: translateX(8px);
}

.task-option:active {
  transform: translateX(8px) scale(0.98);
}

.task-option input[type="radio"],
.task-option input[type="checkbox"] {
  width: 24px;
  height: 24px;
  margin-right: 16px;
  cursor: pointer;
  accent-color: var(--brand);
}

.task-option label {
  flex: 1;
  font-size: var(--fs-lg);
  font-weight: 600;
  color: #e5e7eb;
  cursor: pointer;
  margin: 0;
}

.task-option.selected {
  background: rgba(37, 99, 235, 0.25);
  border-color: var(--brand);
  box-shadow: 0 0 15px rgba(37, 99, 235, 0.3);
}

/* Submit Button - MIT SHINE! */
.task-submit-btn {
  position: relative;
  padding: 18px 32px;
  font-size: var(--fs-xl);
  font-weight: 900;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  border: none;
  border-radius: 16px;
  color: #fff;
  cursor: pointer;
  transition: all var(--transition-base);
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(16, 185, 129, 0.4);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  min-height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.task-submit-btn::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    45deg,
    transparent,
    rgba(255, 255, 255, 0.3),
    transparent
  );
  transform: translateX(-100%);
  transition: transform 0.6s;
}

.task-submit-btn:hover::before {
  transform: translateX(100%);
}

.task-submit-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 30px rgba(16, 185, 129, 0.5);
}

.task-submit-btn:active {
  transform: translateY(-1px) scale(0.98);
}

.task-submit-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.task-submit-btn .btn-icon {
  font-size: var(--fs-2xl);
}

/* PDF-Vorschau-Button im Task-Modal – Hover war bisher onmouseover/onmouseout
   Inline-JS, jetzt CSS-:hover wie der Rest der App. */
.task-pdf-open-btn {
  width: 100%;
  padding: 12px 16px;
  background: #fff;
  color: #667eea;
  border: none;
  border-radius: 8px;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.task-pdf-open-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* PDF-Lightbox-Schliessen-Button – ebenfalls vorher onmouseover/onmouseout Inline-JS */
.task-pdf-lightbox-close-btn {
  background: transparent;
  border: none;
  color: #fff;
  font-size: 2rem;
  cursor: pointer;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.task-pdf-lightbox-close-btn:hover {
  background: rgba(255, 255, 255, 0.1);
}

/* SOS-Button: einladend statt alarmierend – dieselbe Indigo/Violet-Brand-Gradient
   wie andere primaere CTAs in der App (z.B. .sol-feedback-submit), bewusst NICHT
   rot/alarmierend. SOS soll sich als normaler Teil des Arbeitens etablieren,
   kein Zeichen von Schwaeche. */
.task-sos-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: var(--fs-base);
  font-weight: 700;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  border: none;
  border-radius: 14px;
  color: #fff;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(99, 102, 241, 0.35);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.task-sos-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(99, 102, 241, 0.5);
}

.task-sos-btn:active:not(:disabled) {
  transform: translateY(0) scale(0.98);
}

.task-sos-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

/* Feedback Card */
.task-feedback-card {
  text-align: center;
  padding: var(--space-xl);
  animation: flipIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes flipIn {
  from {
    opacity: 0;
    transform: rotateY(-90deg) scale(0.8);
  }
  to {
    opacity: 1;
    transform: rotateY(0) scale(1);
  }
}

.feedback-icon {
  font-size: 5rem;
  margin-bottom: var(--space-md);
  display: block;
  animation: popIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes popIn {
  0% { transform: scale(0); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

.feedback-text {
  font-size: var(--fs-2xl);
  font-weight: 900;
  margin-bottom: var(--space-md);
  line-height: 1.4;
}

.feedback-text.correct {
  color: #6ee7b7;
  text-shadow: 0 0 20px rgba(16, 185, 129, 0.5);
}

.feedback-text.wrong {
  color: #fca5a5;
  text-shadow: 0 0 20px rgba(239, 68, 68, 0.5);
}

.feedback-detail {
  font-size: var(--fs-lg);
  color: var(--muted);
  margin-top: var(--space-sm);
}

.feedback-points {
  display: inline-block;
  padding: 8px 16px;
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
  border-radius: 999px;
  font-size: var(--fs-xl);
  font-weight: 900;
  color: #000;
  margin-top: var(--space-md);
  box-shadow: 0 4px 15px rgba(251, 191, 36, 0.4);
}

/* Mobile Optimierungen */
@media (max-width: 640px) {
  /* 🔧 FIX: Kleinerer Container auf Mobile */
  .task-card {
    padding: var(--space-md);
    border-radius: 20px;
  }

  .task-header {
    padding-bottom: var(--space-sm);
    margin-bottom: var(--space-sm);
  }

  .task-question {
    font-size: var(--fs-lg);
    margin-top: var(--space-sm);
  }

  .task-icon {
    font-size: 2.5rem;
  }

  .task-input {
    font-size: var(--fs-base);
    padding: 12px 14px;
  }

  .task-submit-btn {
    font-size: var(--fs-base);
    padding: 14px 20px;
    min-height: 48px;
  }

  .task-sos-btn {
    padding: 12px 16px;
    min-height: 44px;
    font-size: var(--fs-sm);
  }

  .task-option {
    padding: 10px 14px;
  }

  .task-option label {
    font-size: var(--fs-sm);
  }

  .task-meta {
    gap: 6px;
  }

  .task-badge {
    padding: 4px 8px;
    font-size: var(--fs-xs);
  }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  .task-popup-overlay,
  .task-popup-container,
  .task-card::before,
  .task-submit-btn::before,
  .task-icon,
  .feedback-icon {
    animation: none !important;
    transition: none !important;
  }
}

.difficulty-selector {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 16px 0;
}

.difficulty-btn {
  padding: 20px 16px;
  border-radius: 12px;
  border: 3px solid transparent;
  cursor: pointer;
  transition: all 0.3s;
  text-align: center;
  background: rgba(255, 255, 255, 0.05);
}

.difficulty-btn:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.3);
}

.difficulty-btn.easy {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(110, 231, 183, 0.2));
  border-color: #10b981;
}

.difficulty-btn.medium {
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.2), rgba(251, 191, 36, 0.2));
  border-color: #fbbf24;
}

.difficulty-btn.hard {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.2), rgba(248, 113, 113, 0.2));
  border-color: #ef4444;
}

.difficulty-btn.selected {
  border-color: white;
  box-shadow: 0 0 20px currentColor;
}

.difficulty-icon {
  font-size: 2rem;
  margin-bottom: 8px;
}

.difficulty-label {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 4px;
}

.difficulty-points {
  font-size: 1.5rem;
  font-weight: 900;
  color: white;
  margin-bottom: 4px;
}

.difficulty-help {
  font-size: 0.8rem;
  opacity: 0.7;
}

.task-preview {
  margin: 24px 0;
  padding: 16px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.preview-card {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  padding: 16px;
  margin-top: 12px;
}

.preview-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
  font-weight: 700;
}

.preview-question {
  font-size: 1.1rem;
  line-height: 1.5;
}

/* ======================== KOOPERATIONS-SYSTEM STYLES ======================== */

/* Floating Help Button */
.help-floating-btn {
  position: fixed;
  bottom: calc(80px + env(safe-area-inset-bottom, 0px));
  right: 20px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ef4444, #f87171);
  color: white;
  border: none;
  font-size: 24px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
  z-index: 9997;
  transition: all 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.help-floating-btn:hover {
  background: linear-gradient(135deg, #dc2626, #ef4444);
  transform: scale(1.1);
  box-shadow: 0 6px 16px rgba(239, 68, 68, 0.5);
}

.help-floating-btn:active {
  transform: scale(0.95);
}

.help-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: #fbbf24;
  color: #000;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 900;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  animation: badge-pulse 2s infinite;
}

@keyframes badge-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.2); }
}

/* Help Panel */
.help-panel {
  position: fixed;
  bottom: 150px;
  right: 20px;
  width: 340px;
  max-height: 500px;
  background: rgba(31, 41, 55, 0.95);
  backdrop-filter: blur(20px);
  border: 2px solid rgba(239, 68, 68, 0.3);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  z-index: 9998;
  opacity: 0;
  transform: translateY(20px) scale(0.9);
  pointer-events: none;
  transition: all 0.3s;
}

.help-panel.open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.help-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.help-panel-header h3 {
  margin: 0;
  font-size: 1.1rem;
  color: #fca5a5;
}

.help-close-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.3);
  border: none;
  color: white;
  font-size: 18px;
  cursor: pointer;
  transition: all 0.2s;
}

.help-close-btn:hover {
  background: rgba(239, 68, 68, 0.3);
}

.help-panel-body {
  max-height: 400px;
  overflow-y: auto;
  padding: 12px;
}

.help-empty {
  text-align: center;
  padding: 40px 20px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.9rem;
}

/* Help Request Card */
.help-request-card {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(239, 68, 68, 0.2);
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 12px;
  transition: all 0.2s;
}

.help-request-card:hover {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.4);
  transform: translateX(-4px);
}

.help-request-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: 0.9rem;
}

.help-request-time {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.85rem;
}

.help-request-task {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  padding: 8px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 6px;
}

.help-task-name {
  font-weight: 700;
  color: #fbbf24;
}

.help-task-points {
  font-size: 0.9rem;
  color: #86efac;
}

.help-request-reward {
  font-size: 0.85rem;
  color: #a7f3d0;
  margin-bottom: 12px;
  padding: 6px;
  background: rgba(16, 185, 129, 0.1);
  border-radius: 6px;
  text-align: center;
}

.help-request-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.btn-help-now,
.btn-help-preview {
  padding: 8px 12px;
  border-radius: 8px;
  border: none;
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-help-now {
  background: linear-gradient(135deg, #10b981, #6ee7b7);
  color: white;
}

.btn-help-now:hover {
  background: linear-gradient(135deg, #059669, #10b981);
  transform: translateY(-2px);
}

.btn-help-preview {
  background: rgba(255, 255, 255, 0.1);
  color: white;
}

.btn-help-preview:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* Help Dialog */
.help-dialog-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  animation: fadeIn 0.3s;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.help-dialog-card {
  background: rgba(31, 41, 55, 0.95);
  backdrop-filter: blur(20px);
  border: 2px solid rgba(16, 185, 129, 0.3);
  border-radius: 20px;
  padding: 24px;
  max-width: 500px;
  width: 90%;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  animation: slideUp 0.3s;
}

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

.help-dialog-card h3 {
  margin: 0 0 16px 0;
  color: #6ee7b7;
  font-size: 1.3rem;
}

.help-dialog-task {
  margin-bottom: 16px;
  color: rgba(255, 255, 255, 0.8);
}

.help-dialog-card textarea {
  width: 100%;
  padding: 12px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(0, 0, 0, 0.3);
  color: white;
  font-size: 1rem;
  font-family: inherit;
  resize: vertical;
}

.help-dialog-card textarea:focus {
  outline: none;
  border-color: #10b981;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
}

.char-counter {
  text-align: right;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 4px;
}

.help-dialog-warning {
  background: rgba(245, 158, 11, 0.1);
  border-left: 4px solid #f59e0b;
  padding: 12px;
  margin: 16px 0;
  border-radius: 6px;
  color: #fbbf24;
  font-size: 0.9rem;
}

.help-dialog-actions {
  display: flex;
  gap: 12px;
  margin-top: 20px;
}

/* Helper Countdown */
.helper-countdown-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10001;
}

.countdown-card {
  background: rgba(31, 41, 55, 0.95);
  backdrop-filter: blur(20px);
  border: 2px solid rgba(16, 185, 129, 0.3);
  border-radius: 20px;
  padding: 32px;
  text-align: center;
  max-width: 400px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.countdown-icon {
  font-size: 4rem;
  margin-bottom: 16px;
  animation: spin 3s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.countdown-text {
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: 24px;
  color: #6ee7b7;
}

.countdown-bar-outer {
  width: 100%;
  height: 12px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 12px;
}

.countdown-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #10b981, #6ee7b7);
  transition: width 1s linear;
  border-radius: 999px;
}

.countdown-time {
  font-size: 1.5rem;
  font-weight: 900;
  font-family: 'Courier New', monospace;
  margin-bottom: 16px;
  color: white;
}

.countdown-info {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.9rem;
}

.helper-countdown-overlay.success {
  background: rgba(16, 185, 129, 0.2);
}

.helper-countdown-overlay.success .countdown-card {
  border-color: #10b981;
  box-shadow: 0 0 40px rgba(16, 185, 129, 0.3);
}

/* Preview Dialog */
.help-preview-dialog {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  animation: fadeIn 0.3s;
}

.help-preview-card {
  background: rgba(31, 41, 55, 0.95);
  backdrop-filter: blur(20px);
  border: 2px solid rgba(59, 130, 246, 0.3);
  border-radius: 20px;
  padding: 24px;
  max-width: 500px;
  width: 90%;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  animation: slideUp 0.3s;
}

.help-preview-card h3 {
  margin: 0 0 20px 0;
  color: #93c5fd;
  font-size: 1.3rem;
}

.help-preview-content {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 20px;
}

.preview-task-name {
  font-weight: 700;
  color: #fbbf24;
  margin-bottom: 12px;
}

.preview-task-question {
  font-size: 1.1rem;
  line-height: 1.6;
  margin-bottom: 12px;
  color: white;
}

.preview-task-meta {
  color: #86efac;
  font-size: 0.9rem;
}

.help-preview-actions {
  display: flex;
  gap: 12px;
}

/* Received Hint Card */
.received-hint-card {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(31, 41, 55, 0.98);
  backdrop-filter: blur(20px);
  border: 3px solid #10b981;
  border-radius: 20px;
  padding: 24px;
  max-width: 500px;
  width: 90%;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), 0 0 40px rgba(16, 185, 129, 0.3);
  z-index: 10002;
  animation: bounceIn 0.5s;
}

@keyframes bounceIn {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.3);
  }
  50% {
    transform: translate(-50%, -50%) scale(1.05);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

.hint-header {
  font-size: 1.3rem;
  font-weight: 700;
  color: #6ee7b7;
  margin-bottom: 16px;
  text-align: center;
}

.hint-content {
  background: rgba(16, 185, 129, 0.1);
  border-left: 4px solid #10b981;
  padding: 16px;
  border-radius: 8px;
  font-size: 1.1rem;
  line-height: 1.6;
  margin-bottom: 20px;
  color: white;
}

.hint-footer {
  text-align: center;
}

.btn-hint-ok {
  background: linear-gradient(135deg, #10b981, #6ee7b7);
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-hint-ok:hover {
  background: linear-gradient(135deg, #059669, #10b981);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(16, 185, 129, 0.4);
}

/* Help Request Button in Task */
.btn-help-request {
  background: linear-gradient(135deg, #ef4444, #f87171);
  color: white;
  border: none;
  padding: 12px 20px;
  border-radius: 8px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  margin-right: 12px;
}

.btn-help-request:hover {
  background: linear-gradient(135deg, #dc2626, #ef4444);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(239, 68, 68, 0.4);
}

/* Responsive */
@media (max-width: 768px) {
  .help-panel {
    right: 10px;
    left: 10px;
    width: auto;
    bottom: 140px;
  }
  
  .help-floating-btn {
    bottom: 70px;
    right: 16px;
    width: 48px;
    height: 48px;
    font-size: 20px;
  }
  
  .help-dialog-card,
  .help-preview-card,
  .received-hint-card {
    width: 95%;
    padding: 20px;
  }
  
  .countdown-card {
    padding: 24px;
  }
}

/* ======================== ADMIN ERWEITERUNGEN STYLING ======================== */

/* Match Director Tabs */
.match-director-container {
  width: 100%;
}

.director-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  border-bottom: 2px solid rgba(255, 255, 255, 0.1);
}

.director-tab {
  padding: 12px 24px;
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  color: rgba(255, 255, 255, 0.6);
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.2s;
}

.director-tab:hover {
  color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.05);
}

.director-tab.active {
  color: #60a5fa;
  border-bottom-color: #60a5fa;
  background: rgba(96, 165, 250, 0.1);
}

.director-content {
  margin-top: 20px;
}

.tab-pane {
  display: none;
}

.tab-pane.active {
  display: block;
  animation: fadeIn 0.3s;
}

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

/* Settings Cards */
.settings-card {
  background: rgba(31, 41, 55, 0.6);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 0;
  margin-bottom: 24px;
  overflow: hidden;
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.2);
}

.card-header h3 {
  margin: 0;
  font-size: 0.95rem;
  color: white;
}

.card-header-badge {
  font-size: 0.85rem;
}

.badge-success {
  background: rgba(16, 185, 129, 0.2);
  color: #6ee7b7;
  padding: 6px 12px;
  border-radius: 999px;
  font-weight: 700;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.badge-inactive {
  background: rgba(156, 163, 175, 0.2);
  color: #d1d5db;
  padding: 6px 12px;
  border-radius: 999px;
  font-weight: 700;
  border: 1px solid rgba(156, 163, 175, 0.3);
}

.card-body {
  padding: 10px;
}

/* Toggle Switch */
.toggle-label {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  user-select: none;
}

.toggle-label input[type="checkbox"] {
  display: none;
}

.toggle-slider {
  position: relative;
  width: 56px;
  height: 28px;
  background: rgba(156, 163, 175, 0.3);
  border-radius: 999px;
  transition: all 0.3s;
  border: 2px solid rgba(156, 163, 175, 0.5);
}

.toggle-slider::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  background: white;
  border-radius: 50%;
  transition: all 0.3s;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.toggle-label input:checked + .toggle-slider {
  background: linear-gradient(135deg, #10b981, #6ee7b7);
  border-color: #10b981;
}

.toggle-label input:checked + .toggle-slider::after {
  left: 28px;
}

.toggle-text {
  font-weight: 700;
  font-size: 1rem;
}

/* Form Sections */
.form-section {
  margin: 24px 0;
  padding: 20px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.form-section h4 {
  margin: 0 0 16px 0;
  font-size: 1.1rem;
  color: #93c5fd;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.9);
}

.form-input,
.form-slider {
  width: 100%;
  padding: 10px 14px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  color: white;
  font-size: 1rem;
}

.form-input:focus,
.form-slider:focus {
  outline: none;
  border-color: #60a5fa;
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.2);
}

.help-text {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 6px;
  line-height: 1.4;
}

.help-text-small {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.5);
  margin-top: 4px;
}

.form-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

/* Split Display (Punkte-Aufteilung) */
.split-display {
  display: grid;
  grid-template-columns: 2fr auto 1fr;
  gap: 20px;
  align-items: center;
  margin: 20px 0;
}

.split-item {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 12px;
  padding: 20px;
  text-align: center;
}

.split-item.recipient {
  border: 2px solid rgba(59, 130, 246, 0.3);
}

.split-item.helper {
  border: 2px solid rgba(16, 185, 129, 0.3);
}

.split-icon {
  font-size: 2rem;
  margin-bottom: 8px;
}

.split-label {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 12px;
}

.split-value {
  font-size: 2rem;
  font-weight: 900;
  color: white;
  margin-bottom: 12px;
}

.split-slider {
  width: 100%;
  margin-top: 8px;
}

.split-note {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.5);
  margin-top: 8px;
}

.split-divider {
  font-size: 2rem;
  font-weight: 900;
  color: rgba(255, 255, 255, 0.3);
}

.split-example {
  margin-top: 12px;
  padding: 12px;
  background: rgba(59, 130, 246, 0.1);
  border-left: 3px solid #60a5fa;
  border-radius: 6px;
  font-size: 0.9rem;
  color: #93c5fd;
}

/* Slider mit Input */
.slider-input-group {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
}

.slider-value-input {
  width: 80px;
  padding: 8px 12px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  color: white;
  font-size: 1rem;
  text-align: center;
  font-weight: 700;
}

/* Recommendation Box */
.recommendation-box {
  background: rgba(251, 191, 36, 0.1);
  border-left: 4px solid #fbbf24;
  padding: 16px;
  border-radius: 8px;
  margin-top: 16px;
  color: #fde68a;
  font-size: 0.9rem;
  line-height: 1.6;
}

.recommendation-box strong {
  color: #fbbf24;
}

.recommendation-box ul {
  margin: 8px 0 0 20px;
  padding: 0;
}

.recommendation-box li {
  margin: 4px 0;
}

/* Preview Table */
.preview-section {
  margin-top: 24px;
}

.preview-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 8px;
  overflow: hidden;
  margin-top: 12px;
}

.preview-table thead {
  background: rgba(0, 0, 0, 0.4);
}

.preview-table th {
  padding: 12px;
  text-align: left;
  font-weight: 700;
  color: #93c5fd;
  font-size: 0.9rem;
}

.preview-table td {
  padding: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.9);
}

.preview-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.05);
}

/* Points Grid (Punkte-Konfiguration) */
.points-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 20px 0;
}

.points-card {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 12px;
  padding: 20px;
  text-align: center;
  transition: all 0.2s;
}

.points-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

.points-card.easy {
  border: 2px solid rgba(16, 185, 129, 0.3);
  background: rgba(16, 185, 129, 0.05);
}

.points-card.medium {
  border: 2px solid rgba(251, 191, 36, 0.3);
  background: rgba(251, 191, 36, 0.05);
}

.points-card.hard {
  border: 2px solid rgba(239, 68, 68, 0.3);
  background: rgba(239, 68, 68, 0.05);
}

.points-icon {
  font-size: 2rem;
  margin-bottom: 8px;
}

.points-label {
  font-weight: 700;
  font-size: 1.1rem;
  margin-bottom: 16px;
  color: white;
}

.points-input-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 8px;
}

.points-input {
  width: 100px;
  padding: 8px 12px;
  background: rgba(0, 0, 0, 0.4);
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  color: white;
  font-size: 1.3rem;
  font-weight: 900;
  text-align: center;
}

.points-input:focus {
  outline: none;
  border-color: white;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.1);
}

.points-unit {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.7);
}

.points-help {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 8px;
}

/* QR-Wall Preview */
.qr-preview-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 20px 0;
}

.qr-preview-box {
  aspect-ratio: 1;
  background: white;
  border-radius: 8px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.2s;
}

.qr-preview-box:hover {
  transform: scale(1.05);
}

.qr-preview-box.neon-green {
  border: 3px solid #10b981;
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.4);
}

.qr-preview-box.neon-yellow {
  border: 3px solid #fbbf24;
  box-shadow: 0 0 12px rgba(251, 191, 36, 0.4);
}

.qr-preview-box.neon-red {
  border: 3px solid #ef4444;
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.4);
}

.qr-preview-content {
  font-size: 2rem;
  font-weight: 900;
  color: #000;
}

.qr-preview-label {
  font-size: 0.9rem;
  font-weight: 700;
  color: #000;
}

.qr-preview-points {
  font-size: 0.85rem;
  color: #666;
  font-weight: 600;
}

/* Color Legend */
.color-legend {
  display: flex;
  gap: 20px;
  justify-content: center;
  margin-top: 16px;
  padding: 12px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 8px;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
}

.legend-color {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  display: inline-block;
}

/* Form Actions */
.form-actions {
  display: flex;
  gap: 12px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.btn-primary,
.btn-secondary {
  padding: 12px 24px;
  border-radius: 8px;
  border: none;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-primary {
  background: linear-gradient(135deg, #2563eb, #60a5fa);
  color: white;
}

.btn-primary:hover {
  background: linear-gradient(135deg, #1d4ed8, #2563eb);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.4);
}

.btn-secondary {
  background: rgba(255, 255, 255, 0.1);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.3);
}

/* Responsive */
@media (max-width: 1024px) {
  .split-display {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  
  .split-divider {
    transform: rotate(90deg);
  }
  
  .points-grid {
    grid-template-columns: 1fr;
  }
  
  .qr-preview-grid {
    grid-template-columns: 1fr;
  }
  
  .form-grid-2 {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .director-tabs {
    flex-wrap: wrap;
  }
  
  .director-tab {
    flex: 1;
    min-width: 140px;
    padding: 10px 16px;
    font-size: 0.9rem;
  }
  
  .card-body {
    padding: 16px;
  }
  
  .form-section {
    padding: 16px;
  }
  
  .form-actions {
    flex-direction: column;
  }
  
  .btn-primary,
  .btn-secondary {
    width: 100%;
  }
}

/* ======================== IMPORT SECTION STYLING ======================== */

.import-section {
  margin: 24px 0;
}

.template-downloads {
  background: rgba(59, 130, 246, 0.1);
  border: 1px solid rgba(59, 130, 246, 0.3);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 20px;
}

.template-downloads p {
  margin: 0 0 12px 0;
  color: #93c5fd;
  font-weight: 600;
}

.template-buttons {
  display: flex;
  gap: 12px;
}

.btn-template {
  flex: 1;
  padding: 12px 20px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  color: white;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-template:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* Dropzone */
.import-dropzone {
  border: 3px dashed rgba(255, 255, 255, 0.3);
  border-radius: 16px;
  padding: 48px 24px;
  text-align: center;
  background: rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: all 0.3s;
}

.import-dropzone:hover {
  border-color: rgba(59, 130, 246, 0.5);
  background: rgba(59, 130, 246, 0.1);
  transform: scale(1.02);
}

.import-dropzone.drag-over {
  border-color: #10b981;
  background: rgba(16, 185, 129, 0.1);
  box-shadow: 0 0 30px rgba(16, 185, 129, 0.2);
}

.dropzone-icon {
  font-size: 4rem;
  margin-bottom: 16px;
}

.dropzone-text {
  font-size: 1.1rem;
  margin-bottom: 8px;
  color: white;
}

.dropzone-formats {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.6);
}

/* Import Preview */
.import-preview-container {
  margin-top: 24px;
  animation: slideDown 0.3s;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.preview-header h3 {
  margin: 0;
  color: white;
}

.error-badge {
  background: rgba(239, 68, 68, 0.2);
  color: #fca5a5;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 700;
  border: 1px solid rgba(239, 68, 68, 0.3);
}

/* Import Stats */
.import-stats {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}

.stat-card {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 8px;
  padding: 8px;
  text-align: center;
  border: 2px solid rgba(255, 255, 255, 0.1);
}

.stat-card.easy {
  border-color: rgba(16, 185, 129, 0.3);
  background: rgba(16, 185, 129, 0.05);
}

.stat-card.medium {
  border-color: rgba(251, 191, 36, 0.3);
  background: rgba(251, 191, 36, 0.05);
}

.stat-card.hard {
  border-color: rgba(239, 68, 68, 0.3);
  background: rgba(239, 68, 68, 0.05);
}

.stat-card.points {
  border-color: rgba(59, 130, 246, 0.3);
  background: rgba(59, 130, 246, 0.05);
}

.stat-icon {
  font-size: 1rem;
  margin-bottom: 2px;
}

.stat-value {
  font-size: 1.2rem;
  font-weight: 900;
  color: white;
  margin-bottom: 2px;
}

.stat-label {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.7);
}

/* Import Errors */
.import-errors {
  background: rgba(239, 68, 68, 0.1);
  border-left: 4px solid #ef4444;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 20px;
}

.import-errors h4 {
  margin: 0 0 12px 0;
  color: #fca5a5;
}

.import-errors ul {
  margin: 0;
  padding-left: 20px;
  color: #fecaca;
  font-size: 0.9rem;
}

.import-errors li {
  margin: 4px 0;
}

/* Tasks List */
.import-tasks-list {
  margin-bottom: 20px;
}

.import-tasks-list h4 {
  margin: 0 0 12px 0;
  color: white;
}

.tasks-scroll {
  max-height: 400px;
  overflow-y: auto;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 12px;
  padding: 12px;
}

.preview-task-item {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 8px;
  transition: all 0.2s;
}

.preview-task-item:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
  transform: translateX(4px);
}

.task-item-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.task-id {
  font-weight: 700;
  color: #fbbf24;
  font-size: 0.9rem;
}

.task-difficulty {
  font-size: 0.9rem;
}

.task-difficulty.diff-1 {
  color: #6ee7b7;
}

.task-difficulty.diff-2 {
  color: #fde68a;
}

.task-difficulty.diff-3 {
  color: #fca5a5;
}

.task-points {
  margin-left: auto;
  font-weight: 700;
  color: #86efac;
  font-size: 0.9rem;
}

.task-question {
  color: white;
  margin-bottom: 8px;
  line-height: 1.4;
}

.task-meta {
  display: flex;
  gap: 8px;
  font-size: 0.8rem;
}

.task-type,
.task-fach {
  background: rgba(0, 0, 0, 0.3);
  padding: 4px 8px;
  border-radius: 4px;
  color: rgba(255, 255, 255, 0.7);
}

/* Import Actions */
.import-actions {
  display: flex;
  gap: 12px;
  margin-top: 20px;
}

/* Responsive */
@media (max-width: 1024px) {
  .import-stats {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .import-stats {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .template-buttons {
    flex-direction: column;
  }

  .import-actions {
    flex-direction: column;
  }
}

/* ======================== VERSION 4.0 STYLES ======================== */
/* ======================== SCHWIERIGKEITS-BUTTONS ======================== */

.difficulty-selector {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}

.difficulty-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s;
  color: var(--text);
}

.difficulty-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-2px);
}

.difficulty-btn.active {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  border-color: #2563eb;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.4);
}

.difficulty-btn[data-difficulty="1"].active {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  border-color: #10b981;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
}

.difficulty-btn[data-difficulty="2"].active {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  border-color: #f59e0b;
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4);
}

.difficulty-btn[data-difficulty="3"].active {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  border-color: #ef4444;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
}

.diff-icon {
  font-size: 1.5rem;
}

.diff-label {
  font-weight: 600;
  font-size: 0.9rem;
}

.diff-points {
  font-size: 0.8rem;
  opacity: 0.8;
}

/* ======================== TABS ======================== */

.tab-nav {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  border-bottom: 2px solid rgba(255, 255, 255, 0.1);
}

.tab-btn {
  padding: 12px 20px;
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  color: var(--muted);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 1rem;
}

.tab-btn:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.05);
}

.tab-btn.active {
  color: var(--brand);
  border-bottom-color: var(--brand);
}

.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
}

.settings-section {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 16px;
}

.settings-section h3 {
  margin-top: 0;
}

/* ======================== KOOPERATIONS-UI (RALLYE) ======================== */

.help-floating-btn {
  position: fixed;
  bottom: calc(80px + env(safe-area-inset-bottom, 0px));
  right: 20px;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  border: none;
  box-shadow: 0 4px 20px rgba(37, 99, 235, 0.4);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
  transition: all 0.3s;
}

.help-floating-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 30px rgba(37, 99, 235, 0.6);
}

.help-icon {
  font-size: 28px;
}

.help-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  width: 28px;
  height: 28px;
  background: #ef4444;
  border-radius: 50%;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: white;
  animation: pulse 1.5s infinite;
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

/* Help Panel */
.help-panel {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 100%;
  max-width: 400px;
  max-height: 70vh;
  background: rgba(17, 24, 39, 0.98);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px 16px 0 0;
  transform: translateY(100%);
  transition: transform 0.3s ease;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  /* PWA Safe Area: Bottom padding for iOS home indicator */
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.help-panel.open {
  transform: translateY(0);
}

.help-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.help-panel-header h3 {
  margin: 0;
  font-size: 1.2rem;
}

.help-close-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: white;
  font-size: 20px;
  cursor: pointer;
  transition: all 0.2s;
}

.help-close-btn:hover {
  background: rgba(255, 255, 255, 0.2);
}

.help-panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
}

.help-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--muted);
}

.help-request-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 12px;
  transition: all 0.2s;
}

.help-request-card:hover {
  background: rgba(255, 255, 255, 0.08);
  transform: translateY(-2px);
}

.help-request-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
}

.help-request-time {
  color: var(--muted);
  font-size: 0.85rem;
}

.help-request-task {
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
}

.help-task-name {
  font-weight: 600;
}

.help-task-points {
  color: #fbbf24;
}

.help-request-reward {
  background: rgba(59, 130, 246, 0.1);
  border: 1px solid rgba(59, 130, 246, 0.3);
  border-radius: 8px;
  padding: 8px 12px;
  margin-bottom: 12px;
  font-size: 0.9rem;
}

.help-request-actions {
  display: flex;
  gap: 8px;
}

.btn-help-now,
.btn-help-preview {
  flex: 1;
  padding: 10px;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  min-height: 44px;
}

.btn-help-now {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: white;
}

.btn-help-now:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
}

.btn-help-preview {
  background: rgba(255, 255, 255, 0.1);
  color: white;
}

.btn-help-preview:hover {
  background: rgba(255, 255, 255, 0.15);
}

/* Help Dialog */
.help-dialog-overlay,
.help-preview-dialog {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1001;
  padding: 20px;
}

.help-dialog-card,
.help-preview-card {
  background: rgba(17, 24, 39, 0.98);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 24px;
  max-width: 500px;
  width: 100%;
}

.help-dialog-task {
  background: rgba(255, 255, 255, 0.05);
  padding: 12px;
  border-radius: 8px;
  margin-bottom: 16px;
}

.help-dialog-warning {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 16px;
  text-align: center;
}

.char-counter {
  text-align: right;
  font-size: 0.85rem;
  color: var(--muted);
  margin-top: 4px;
}

.help-dialog-actions,
.help-preview-actions {
  display: flex;
  gap: 12px;
}

.help-preview-content {
  margin: 20px 0;
}

.preview-task-name {
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 12px;
  color: var(--brand);
}

.preview-task-question {
  font-size: 1.1rem;
  line-height: 1.6;
  margin-bottom: 16px;
}

.preview-task-meta {
  color: var(--muted);
  font-size: 0.9rem;
}

/* Countdown */
.helper-countdown-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1002;
}

.countdown-card {
  background: rgba(17, 24, 39, 0.98);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 32px;
  text-align: center;
  max-width: 400px;
  width: 90%;
}

.countdown-icon {
  font-size: 64px;
  margin-bottom: 16px;
}

.countdown-text {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 24px;
}

.countdown-bar-outer {
  width: 100%;
  height: 8px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 16px;
}

.countdown-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #3b82f6 0%, #2563eb 100%);
  transition: width 1s linear;
}

.countdown-time {
  font-size: 1.2rem;
  font-weight: 600;
  color: #60a5fa;
  margin-bottom: 16px;
}

.countdown-info {
  color: var(--muted);
}

.helper-countdown-overlay.success .countdown-bar-fill {
  background: linear-gradient(90deg, #10b981 0%, #059669 100%);
}

/* Received Hint */
.received-hint-card {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(17, 24, 39, 0.98);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(59, 130, 246, 0.3);
  border-radius: 16px;
  padding: 24px;
  max-width: 450px;
  width: 90%;
  z-index: 1003;
  box-shadow: 0 0 40px rgba(59, 130, 246, 0.3);
  animation: slideInDown 0.3s ease;
}

@keyframes slideInDown {
  from {
    opacity: 0;
    transform: translate(-50%, -60%);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
}

.hint-header {
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 16px;
  text-align: center;
  color: #60a5fa;
}

.hint-content {
  background: rgba(59, 130, 246, 0.1);
  border: 1px solid rgba(59, 130, 246, 0.3);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
  font-size: 1.1rem;
  line-height: 1.6;
}

.hint-footer {
  text-align: center;
}

.btn-hint-ok {
  padding: 12px 24px;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: white;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  min-height: 44px;
}

.btn-hint-ok:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
}

/* Mobile Optimierung */
@media (max-width: 768px) {
  .help-floating-btn {
    width: 56px;
    height: 56px;
    bottom: 70px;
    right: 16px;
  }

  .help-icon {
    font-size: 24px;
  }

  .help-panel {
    max-width: 100%;
    max-height: 80vh;
  }

  .difficulty-selector {
    grid-template-columns: 1fr;
  }

  .tab-nav {
    flex-wrap: wrap;
  }

  .tab-btn {
    flex: 1;
    min-width: 120px;
  }
}

/* ========================================
   TOLERANT-TOGGLE BUTTON STYLE
   ======================================== */

.tolerant-toggle-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-top: 10px;
  padding: 10px 16px;
  background: rgba(71, 85, 105, 0.3);
  border: 2px solid #475569;
  border-radius: 10px;
  color: #94a3b8;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s ease;
  backdrop-filter: blur(10px);
}

.tolerant-toggle-btn:hover {
  background: rgba(71, 85, 105, 0.4);
  border-color: #64748b;
  transform: translateY(-1px);
}

.tolerant-toggle-btn[data-active="true"] {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.2) 0%, rgba(37, 99, 235, 0.3) 100%);
  border-color: #3b82f6;
  color: #60a5fa;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.tolerant-toggle-btn[data-active="true"]:hover {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.3) 0%, rgba(37, 99, 235, 0.4) 100%);
  border-color: #60a5fa;
}

.tolerant-icon {
  font-size: 1.2rem;
  margin-right: 10px;
}

.tolerant-label {
  flex: 1;
  text-align: left;
}

.tolerant-status {
  font-size: 0.75rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.3);
  letter-spacing: 0.5px;
}

.tolerant-toggle-btn[data-active="true"] .tolerant-status {
  background: rgba(59, 130, 246, 0.4);
  color: #fff;
}
/* ============================================
   LEGAL FOOTER - Impressum, Datenschutz, etc.
   ============================================ */

.legal-footer {
  background: var(--panel-2);
  border-top: 1px solid var(--border);
  padding: 20px;
  margin-top: 40px;
  text-align: center;
  font-size: 0.8rem;
  color: var(--muted);
}

.legal-footer-links {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.legal-footer-links a {
  color: var(--muted);
  text-decoration: none;
  transition: color 0.2s;
}

.legal-footer-links a:hover {
  color: var(--brand);
  text-decoration: underline;
}

.legal-footer-copyright {
  font-size: 0.75rem;
  opacity: 0.7;
}

/* Für mobile Geräte */
@media (max-width: 640px) {
  .legal-footer-links {
    flex-direction: column;
    gap: 8px;
  }
}

/* ============================================
   MODERN ANIMATIONS & MICRO-INTERACTIONS
   ============================================ */

/* Fade In Animations */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

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

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInScale {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Slide Animations */
@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(100%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Bounce & Pop */
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@keyframes pop {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

/* Pulse Animations */
@keyframes pulseGlow {
  0%, 100% {
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.4);
  }
  50% {
    box-shadow: 0 0 40px rgba(59, 130, 246, 0.6);
  }
}

@keyframes pulseScale {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

/* Success Animation */
@keyframes successPop {
  0% {
    transform: scale(0.5);
    opacity: 0;
  }
  70% {
    transform: scale(1.1);
    opacity: 1;
  }
  100% {
    transform: scale(1);
  }
}

/* Shimmer/Skeleton Loading */
@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

/* Animation Utility Classes */
.animate-fadeIn {
  animation: fadeIn var(--transition-base) ease forwards;
}

.animate-fadeInUp {
  animation: fadeInUp var(--transition-slow) ease forwards;
}

.animate-fadeInDown {
  animation: fadeInDown var(--transition-slow) ease forwards;
}

.animate-fadeInScale {
  animation: fadeInScale var(--transition-slow) var(--transition-bounce) forwards;
}

.animate-slideInLeft {
  animation: slideInLeft var(--transition-slow) ease forwards;
}

.animate-slideInRight {
  animation: slideInRight var(--transition-slow) ease forwards;
}

.animate-bounce {
  animation: bounce 1s ease infinite;
}

.animate-pop {
  animation: pop 0.3s ease;
}

.animate-shake {
  animation: shake 0.5s ease;
}

.animate-pulse {
  animation: pulseScale 2s ease infinite;
}

.animate-glow {
  animation: pulseGlow 2s ease infinite;
}

/* Staggered Children Animation */
.stagger-children > * {
  opacity: 0;
  animation: fadeInUp var(--transition-slow) ease forwards;
}

.stagger-children > *:nth-child(1) { animation-delay: 0ms; }
.stagger-children > *:nth-child(2) { animation-delay: 50ms; }
.stagger-children > *:nth-child(3) { animation-delay: 100ms; }
.stagger-children > *:nth-child(4) { animation-delay: 150ms; }
.stagger-children > *:nth-child(5) { animation-delay: 200ms; }
.stagger-children > *:nth-child(6) { animation-delay: 250ms; }
.stagger-children > *:nth-child(7) { animation-delay: 300ms; }
.stagger-children > *:nth-child(8) { animation-delay: 350ms; }
.stagger-children > *:nth-child(9) { animation-delay: 400ms; }
.stagger-children > *:nth-child(10) { animation-delay: 450ms; }

/* Skeleton Loading */
.skeleton {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.05) 0%,
    rgba(255, 255, 255, 0.1) 50%,
    rgba(255, 255, 255, 0.05) 100%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius-md);
}

.skeleton-text {
  height: 1em;
  margin-bottom: 0.5em;
}

.skeleton-title {
  height: 1.5em;
  width: 60%;
  margin-bottom: 0.75em;
}

.skeleton-avatar {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
}

/* ============================================
   UTILITY CLASSES - Tailwind-like
   ============================================ */

/* Spacing Utilities */
.p-0 { padding: 0; }
.p-1 { padding: var(--space-1); }
.p-2 { padding: var(--space-2); }
.p-3 { padding: var(--space-3); }
.p-4 { padding: var(--space-4); }
.p-5 { padding: var(--space-5); }
.p-6 { padding: var(--space-6); }
.p-8 { padding: var(--space-8); }

.m-0 { margin: 0; }
.m-1 { margin: var(--space-1); }
.m-2 { margin: var(--space-2); }
.m-3 { margin: var(--space-3); }
.m-4 { margin: var(--space-4); }
.m-auto { margin: auto; }

.mb-1 { margin-bottom: var(--space-1); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }

.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }

/* Gap Utilities */
.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }

/* Flexbox Utilities */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-row { flex-direction: row; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-start { justify-content: flex-start; }
.justify-end { justify-content: flex-end; }
.flex-1 { flex: 1; }
.flex-grow { flex-grow: 1; }
.flex-shrink-0 { flex-shrink: 0; }

/* Grid Utilities */
.grid { display: grid; }
.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }

/* Text Utilities */
.text-xs { font-size: var(--fs-xs); }
.text-sm { font-size: var(--fs-sm); }
.text-base { font-size: var(--fs-base); }
.text-lg { font-size: var(--fs-lg); }
.text-xl { font-size: var(--fs-xl); }
.text-2xl { font-size: var(--fs-2xl); }
.text-3xl { font-size: var(--fs-3xl); }
.text-4xl { font-size: var(--fs-4xl); }

.font-normal { font-weight: 400; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }

.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.text-muted { color: var(--muted); }
.text-secondary { color: var(--text-secondary); }
.text-brand { color: var(--brand); }
.text-success { color: var(--success); }
.text-error { color: var(--error); }
.text-warning { color: var(--warning); }

/* Border Radius Utilities */
.rounded-sm { border-radius: var(--radius-sm); }
.rounded-md { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-xl { border-radius: var(--radius-xl); }
.rounded-full { border-radius: var(--radius-full); }

/* Shadow Utilities */
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-xl { box-shadow: var(--shadow-xl); }
.shadow-glow { box-shadow: var(--shadow-glow); }

/* Width/Height Utilities */
.w-full { width: 100%; }
.h-full { height: 100%; }
.min-h-screen { min-height: 100vh; }

/* Overflow */
.overflow-hidden { overflow: hidden; }
.overflow-auto { overflow: auto; }
.overflow-x-auto { overflow-x: auto; }
.overflow-y-auto { overflow-y: auto; }

/* Position */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.sticky { position: sticky; }
.inset-0 { inset: 0; }

/* Visibility */
.hidden { display: none; }
.invisible { visibility: hidden; }
.opacity-0 { opacity: 0; }
.opacity-50 { opacity: 0.5; }
.opacity-100 { opacity: 1; }

/* Cursor */
.cursor-pointer { cursor: pointer; }
.cursor-default { cursor: default; }
.cursor-not-allowed { cursor: not-allowed; }

/* Transitions */
.transition { transition: all var(--transition-base); }
.transition-fast { transition: all var(--transition-fast); }
.transition-slow { transition: all var(--transition-slow); }

/* Z-Index */
.z-0 { z-index: 0; }
.z-10 { z-index: 10; }
.z-20 { z-index: 20; }
.z-50 { z-index: 50; }
.z-100 { z-index: 100; }

/* ============================================
   MODERN COMPONENT HELPERS
   ============================================ */

/* Badge Component */
.badge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-3);
  font-size: var(--fs-xs);
  font-weight: 600;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.1);
  color: var(--text);
}

.badge-primary {
  background: rgba(59, 130, 246, 0.2);
  color: var(--brand-light);
}

.badge-success {
  background: rgba(34, 197, 94, 0.2);
  color: var(--success-light);
}

.badge-error {
  background: rgba(239, 68, 68, 0.2);
  color: var(--error-light);
}

.badge-warning {
  background: rgba(245, 158, 11, 0.2);
  color: var(--warning-light);
}

/* Divider */
.divider {
  height: 1px;
  background: var(--border-light);
  margin: var(--space-4) 0;
}

/* Avatar */
.avatar {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: var(--fs-lg);
  color: white;
  flex-shrink: 0;
}

.avatar-sm {
  width: 32px;
  height: 32px;
  font-size: var(--fs-sm);
}

.avatar-lg {
  width: 64px;
  height: 64px;
  font-size: var(--fs-xl);
}

/* Progress Bar */
.progress {
  height: 8px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--brand) 0%, var(--brand-light) 100%);
  border-radius: inherit;
  transition: width var(--transition-slow);
}

.progress-success .progress-bar {
  background: linear-gradient(90deg, var(--success) 0%, var(--success-light) 100%);
}

.progress-warning .progress-bar {
  background: linear-gradient(90deg, var(--warning) 0%, var(--warning-light) 100%);
}

.progress-error .progress-bar {
  background: linear-gradient(90deg, var(--error) 0%, var(--error-light) 100%);
}

/* Tooltip */
[data-tooltip] {
  position: relative;
}

[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  padding: var(--space-2) var(--space-3);
  background: var(--panel);
  color: var(--text);
  font-size: var(--fs-sm);
  border-radius: var(--radius-md);
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: all var(--transition-fast);
  pointer-events: none;
  z-index: 1000;
  box-shadow: var(--shadow-lg);
}

[data-tooltip]:hover::after {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(-8px);
}

/* ══════════════════════════════════════════════════════════
   SOL KLASSEN-MANAGER – v1.0
   ══════════════════════════════════════════════════════════ */

/* Pro-Badge im Sidebar-Nav */
.sol-pro-badge {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 20px;
  background: rgba(251, 191, 36, 0.15);
  border: 1px solid rgba(251, 191, 36, 0.35);
  color: #fbbf24;
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  line-height: 1;
  margin-left: auto;
  flex-shrink: 0;
}

/* View Header */
.sol-view-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}

.sol-view-title-block {
  flex: 1;
}

.sol-view-title {
  font-size: 1.6rem;
  font-weight: 800;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  color: var(--text);
  margin: 0 0 4px;
  letter-spacing: -0.02em;
}

.sol-view-subtitle {
  font-size: 0.85rem;
  color: var(--muted);
  margin: 0;
}

/* Loading state */
.sol-loading {
  color: var(--muted);
  padding: 32px 0;
  font-size: 0.9rem;
}

/* Empty state */
.sol-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 64px 24px;
  text-align: center;
}

/* Klassen-Grid */
.sol-classes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}

/* Klassen-Karte */
.sol-class-card {
  position: relative;
  background: var(--glass-bg, rgba(255,255,255,0.04));
  border: 1px solid var(--glass-border, rgba(255,255,255,0.08));
  border-radius: 14px;
  overflow: hidden;
  transition: border-color 0.18s, box-shadow 0.18s, transform 0.18s;
}

.sol-class-card:hover {
  border-color: rgba(99, 102, 241, 0.4);
  box-shadow: 0 8px 24px rgba(99, 102, 241, 0.15), 0 2px 6px rgba(0,0,0,0.3);
  transform: translateY(-2px);
}

.sol-class-card-accent {
  height: 3px;
  background: linear-gradient(90deg, #6366f1, #8b5cf6);
}

.sol-class-card-body {
  padding: 16px;
}

.sol-class-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 16px;
}

.sol-class-card-name {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text);
  margin: 0;
  font-family: 'Space Grotesk', system-ui, sans-serif;
}

.sol-class-card-count {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.78rem;
  color: var(--muted);
  flex-shrink: 0;
  margin-top: 2px;
}

.sol-class-track-preview {
  display: flex;
  gap: 4px;
  margin-bottom: 14px;
}

.sol-class-track-bar {
  height: 4px;
  border-radius: 3px;
  flex: 1;
  opacity: 0.55;
  transition: opacity 0.18s;
}

.sol-class-card:hover .sol-class-track-bar {
  opacity: 0.85;
}

.sol-class-track-bar--a { background: #10b981; }
.sol-class-track-bar--b { background: #f59e0b; }
.sol-class-track-bar--c { background: #ef4444; }

.sol-class-card-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* ════════════════════════════════════════════════════════════════
   MEIN SCHREIBTISCH — vertikale, gleichgewichtige Reihen (Korrektur 2026-07-09)
   Ersetzt das ursprüngliche Bento-Grid: reine Übersichtsseite, keine Zeile
   soll stärker gewichtet wirken als eine andere. Farbidentität pro Zeile
   unverändert aus dem Bento-Entwurf übernommen.
   ════════════════════════════════════════════════════════════════ */
.schreibtisch-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
  max-width: 66%;
}

@media (min-width: 769px) and (max-width: 1100px) {
  .schreibtisch-list { max-width: 85%; }
}

@media (max-width: 768px) {
  .schreibtisch-list { max-width: 100%; }
}

/* Warmer Ambient-Glow gegen die sonst kühle Blau/Emerald/Violet-Palette */
.schreibtisch-list::before {
  content: '';
  position: absolute;
  top: -40px;
  left: 6%;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(251, 146, 60, 0.10) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.schreibtisch-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 20px;
  background: rgba(17, 24, 39, 0.8);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-left: 3px solid var(--tile-color);
  border-radius: 18px;
  padding: 20px 24px;
  min-height: 96px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  transition: transform 200ms ease, box-shadow 200ms ease;
  z-index: 1;
}

.schreibtisch-row:hover,
.schreibtisch-row:focus-visible {
  transform: translateX(4px);
  box-shadow: 0 10px 28px var(--tile-glow), 0 2px 8px rgba(0, 0, 0, 0.35);
}

.schreibtisch-row:focus-visible {
  outline: 3px solid var(--tile-color);
  outline-offset: 2px;
}

.schreibtisch-row--aufgaben { --tile-color: #3b82f6; --tile-color-bg: rgba(59, 130, 246, .14); --tile-glow: rgba(59, 130, 246, .35); }
.schreibtisch-row--klassen  { --tile-color: #10b981; --tile-color-bg: rgba(16, 185, 129, .14); --tile-glow: rgba(16, 185, 129, .35); }
.schreibtisch-row--sol      { --tile-color: #8b5cf6; --tile-color-bg: rgba(139, 92, 246, .14); --tile-glow: rgba(139, 92, 246, .35); }
.schreibtisch-row--account  { --tile-color: #fbbf24; --tile-color-bg: rgba(251, 191, 36, .14); --tile-glow: rgba(251, 191, 36, .35); }

.schreibtisch-row-watermark {
  position: absolute;
  right: 90px;
  top: 50%;
  transform: translateY(-50%);
  width: 100px;
  height: 100px;
  color: var(--tile-color);
  opacity: 0.06;
  pointer-events: none;
}

.schreibtisch-row-icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  flex-shrink: 0;
  background: var(--tile-color-bg);
  border: 1px solid var(--tile-color);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--tile-color);
}

.schreibtisch-row-text { flex: 1; min-width: 0; }

.schreibtisch-row-microlabel {
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
  margin-bottom: 3px;
}

.schreibtisch-row-title {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 800;
  font-size: 1.15rem;
  color: var(--text);
  margin: 0 0 3px;
}

.schreibtisch-row-desc {
  font-size: 0.82rem;
  color: var(--text-secondary);
}

.schreibtisch-row-stat {
  flex-shrink: 0;
  text-align: right;
  min-width: 90px;
  z-index: 1;
}

.schreibtisch-row-stat-number {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 900;
  font-size: 2rem;
  color: var(--tile-color);
  line-height: 1;
  display: inline-block;
}

.schreibtisch-row-stat-number.skeleton {
  color: transparent;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  min-width: 1.8em;
  animation: schreibtisch-pulse 1.4s ease-in-out infinite;
}

@keyframes schreibtisch-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.schreibtisch-row-stat-label {
  font-size: 0.72rem;
  color: var(--text-secondary);
  margin-top: 2px;
}

.schreibtisch-row-chevron {
  flex-shrink: 0;
  color: var(--muted);
  transition: transform 200ms ease, color 200ms ease;
}

.schreibtisch-row:hover .schreibtisch-row-chevron {
  transform: translateX(3px);
  color: var(--tile-color);
}

.schreibtisch-tile-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--tile-color-bg);
  border: 1px solid var(--tile-color);
  color: var(--tile-color);
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

@media (max-width: 480px) {
  .schreibtisch-row-desc { display: none; }
  .schreibtisch-row { padding: 16px 18px; gap: 14px; }
}

/* Buttons */
.sol-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 18px;
  border-radius: 8px;
  background: #6366f1;
  color: #fff;
  font-size: 0.85rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: background 0.15s, box-shadow 0.15s, transform 0.15s;
  line-height: 1;
  flex-shrink: 0;
}

.sol-btn-primary:hover:not(:disabled) {
  background: #5254cc;
  box-shadow: 0 6px 20px rgba(99, 102, 241, 0.4);
  transform: translateY(-1px);
}

.sol-btn-primary:active:not(:disabled) {
  transform: translateY(0);
}

.sol-btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 7px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  line-height: 1;
}

.sol-btn-secondary:hover {
  background: rgba(99,102,241,0.12);
  border-color: rgba(99,102,241,0.35);
  color: #a5b4fc;
}

.sol-btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 18px;
  border-radius: 8px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.12);
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
  line-height: 1;
}

.sol-btn-ghost:hover {
  border-color: rgba(255,255,255,0.25);
  color: var(--text);
}

.sol-btn-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #f87171;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
  flex-shrink: 0;
  overflow: visible;
}

.sol-btn-danger:hover {
  background: rgba(239, 68, 68, 0.2);
  border-color: rgba(239, 68, 68, 0.5);
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.25);
}

.sol-btn-icon-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--muted);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s;
}

.sol-btn-icon-danger:hover {
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.25);
  color: #f87171;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.2);
}

.sol-btn-warning {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 18px;
  border-radius: 8px;
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.3);
  color: #fbbf24;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  line-height: 1;
}

.sol-btn-warning:hover {
  background: rgba(245, 158, 11, 0.2);
  border-color: rgba(245, 158, 11, 0.5);
}

.sol-btn-danger-full {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 18px;
  border-radius: 8px;
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #f87171;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  line-height: 1;
}

.sol-btn-danger-full:hover {
  background: rgba(239, 68, 68, 0.2);
  border-color: rgba(239, 68, 68, 0.5);
}

.sol-btn-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  color: var(--muted);
  font-size: 0.82rem;
  cursor: pointer;
  padding: 0;
  transition: color 0.15s;
}

.sol-btn-back:hover {
  color: var(--text);
}

/* Detail Header */
.sol-detail-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.sol-detail-title {
  font-size: 1.4rem;
  font-weight: 800;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  color: var(--text);
  margin: 0;
  letter-spacing: -0.02em;
}

/* SOL Stats Strip */
.sol-stats-strip {
  display: flex;
  align-items: center;
  gap: 0;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 10px;
  padding: 12px 20px;
  margin-bottom: 16px;
}

.sol-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  flex: 1;
}

.sol-stat-value {
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1;
  font-family: 'Space Grotesk', sans-serif;
  letter-spacing: -0.02em;
}

.sol-stat-value--students { color: #10b981; }
.sol-stat-value--units    { color: #818cf8; }
.sol-stat-value--archived { color: rgba(255,255,255,0.35); }

.sol-stat-label {
  font-size: 0.68rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted, rgba(255,255,255,0.35));
  white-space: nowrap;
}

.sol-stat-divider {
  width: 1px;
  height: 36px;
  background: rgba(255,255,255,0.08);
  flex-shrink: 0;
  margin: 0 8px;
}

/* SOL Tabs – Glass Segmented Control */
.sol-tabs {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  margin-bottom: var(--space-5);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: var(--radius-full);
}

.sol-tab-btn {
  padding: 6px 18px;
  background: none;
  border: none;
  border-radius: var(--radius-full);
  color: var(--muted);
  font-size: var(--fs-sm);
  font-weight: 500;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);
  white-space: nowrap;
  line-height: 1.4;
  position: relative;
}

.sol-tab-btn:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.06);
}

.sol-tab-btn.active {
  color: #fff;
  font-weight: 600;
  background: #6366f1;
  box-shadow: 0 2px 12px rgba(99, 102, 241, 0.4);
}

/* Tab Panel */
.sol-tab-panel {
  padding-top: 4px;
}

/* Section header inside tabs */
.sol-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.sol-section-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Student Table */
.sol-student-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.sol-student-table th {
  text-align: left;
  padding: 8px 12px;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.sol-student-table td {
  padding: 6px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  vertical-align: middle;
}

.sol-student-table tr:last-child td {
  border-bottom: none;
}

.sol-student-table tr:hover td {
  background: rgba(255,255,255,0.02);
}

.sol-student-nr {
  width: 60px;
}

.sol-nr-badge {
  display: inline-block;
  font-family: 'Courier New', monospace;
  font-weight: 700;
  font-size: 0.78rem;
  color: #818cf8;
  background: rgba(99, 102, 241, 0.1);
  border: 1px solid rgba(99, 102, 241, 0.2);
  border-radius: 6px;
  padding: 2px 7px;
  letter-spacing: 0.03em;
}

.sol-synonym-input {
  width: 100%;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 7px;
  color: var(--text);
  font-size: 0.875rem;
  padding: 5px 8px;
  transition: background 0.15s, border-color 0.15s;
  outline: none;
  box-sizing: border-box;
}

.sol-synonym-input:hover {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.14);
}

.sol-synonym-input:focus {
  background: rgba(99, 102, 241, 0.08);
  border-color: rgba(99, 102, 241, 0.4);
}

.sol-synonym-input::placeholder {
  color: rgba(255,255,255,0.25);
}

/* Modal */
.sol-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(7, 13, 26, 0.8);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1100;
  padding: 16px;
}

.sol-modal {
  background: var(--panel, #111827);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 16px;
  width: 100%;
  max-width: 440px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 64px rgba(0,0,0,0.5), 0 8px 32px rgba(99,102,241,0.2), inset 0 1px 0 rgba(255,255,255,0.06);
  animation: solModalIn 0.22s cubic-bezier(0.16,1,0.3,1);
}

@keyframes solModalIn {
  from { opacity: 0; transform: scale(0.96) translateY(8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

.sol-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 20px 0;
}

.sol-modal-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
  margin: 0;
  font-family: 'Space Grotesk', system-ui, sans-serif;
}

.sol-modal-close {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s, background 0.15s;
}

.sol-modal-close:hover {
  color: var(--text);
  background: rgba(255,255,255,0.06);
}

.sol-modal-body {
  padding: 20px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

.sol-modal-footer {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  padding: 0 20px 20px;
}

/* Form elements inside modal */
.sol-form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}

.sol-form-group:last-child {
  margin-bottom: 0;
}

.sol-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text);
}

.sol-input {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  color: var(--text);
  font-size: 0.9rem;
  padding: 10px 12px;
  outline: none;
  transition: border-color 0.15s, background 0.15s;
  width: 100%;
  box-sizing: border-box;
}

.sol-input:focus {
  border-color: rgba(99, 102, 241, 0.5);
  background: rgba(99, 102, 241, 0.05);
}

.sol-input::placeholder {
  color: rgba(255,255,255,0.25);
}

/* ── SOL Student ID Grid ── */
.sol-id-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 12px 8px;
  min-height: 72px;
  border-radius: 12px;
  border: 1.5px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
  cursor: pointer;
  transition: all 200ms cubic-bezier(0.4,0,0.2,1);
  user-select: none;
  gap: 3px;
}
.sol-id-card:hover {
  background: rgba(16,185,129,0.08);
  border-color: rgba(16,185,129,0.3);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(16,185,129,0.18);
}
.sol-id-card.selected {
  background: rgba(16,185,129,0.15);
  border-color: rgba(16,185,129,0.55);
  box-shadow: 0 0 0 2px rgba(16,185,129,0.2), 0 4px 16px rgba(16,185,129,0.28);
  transform: translateY(-1px);
}

/* ── Q-185 (2026-09-28): Nummer ist von einem anderen Kind belegt ──
   Vorher war eine belegte Nummer optisch nicht von einer freien zu unterscheiden. Das Kind
   tippte sie an, die Firestore-Regel wies es ab (`resource.data.createdBy != uid`) und es las
   „Anmeldung fehlgeschlagen. Bitte erneut versuchen." — ein Rat, der jedes Mal gleich scheitert.
   Im kritischsten Moment der Stunde (Login) stand es damit ohne Ausweg da.
   Bewusst NICHT nur ueber Deckkraft geloest: Farbe allein ist kein Unterscheidungsmerkmal
   (QRENA-Anti-Pattern), deshalb kommt ein Wort dazu — und der Hover-Lift wird entfernt, weil
   ein Element, das sich anhebt, „druck mich" sagt. */
.sol-id-card.belegt {
  background: rgba(255,255,255,0.02);
  border-color: rgba(255,255,255,0.06);
  border-style: dashed;
  cursor: not-allowed;
  position: relative;
}
.sol-id-card.belegt:hover {
  background: rgba(255,255,255,0.02);
  border-color: rgba(255,255,255,0.06);
  transform: none;
  box-shadow: none;
}
.sol-id-card.belegt .sol-id-num,
.sol-id-card.belegt .sol-id-name {
  color: rgba(255,255,255,0.28);
}
.sol-id-card.belegt::after {
  content: 'belegt';
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.3);
  margin-top: 1px;
}
.sol-id-num {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-weight: 800;
  font-size: 1.4rem;
  color: #34d399;
  line-height: 1;
}
.sol-id-name {
  font-size: 0.62rem;
  color: rgba(255,255,255,0.45);
  font-weight: 500;
  text-align: center;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.3;
}

.sol-field-hint {
  font-size: 0.76rem;
  color: var(--muted);
  line-height: 1.4;
}

/* SOL Units placeholder */
.sol-units-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 48px 24px;
  text-align: center;
  background: rgba(255,255,255,0.02);
  border: 1px dashed rgba(255,255,255,0.08);
  border-radius: 12px;
  margin-top: 8px;
}

/* DSGVO Tab */
.sol-dsgvo-notice {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 14px;
  background: rgba(59, 130, 246, 0.08);
  border: 1px solid rgba(59, 130, 246, 0.2);
  border-radius: 8px;
  color: #93c5fd;
  font-size: 0.82rem;
  line-height: 1.5;
  margin-bottom: 24px;
}

.sol-dsgvo-section {
  margin-bottom: 28px;
  padding-bottom: 28px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.sol-dsgvo-section:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

.sol-dsgvo-heading {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 6px;
}

.sol-dsgvo-desc {
  font-size: 0.82rem;
  color: var(--muted);
  margin: 0 0 14px;
  line-height: 1.5;
}

.sol-dsgvo-danger-zone {
  border: 1px solid rgba(239, 68, 68, 0.12);
  border-radius: 10px;
  padding: 16px;
  background: rgba(239, 68, 68, 0.04);
  padding-bottom: 16px;
  margin-bottom: 0;
}

/* Status badges for sol-units */
.sol-unit-status-active {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 20px;
  background: rgba(34, 197, 94, 0.12);
  border: 1px solid rgba(34, 197, 94, 0.25);
  color: #86efac;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.sol-unit-status-archived {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 20px;
  background: rgba(148, 163, 184, 0.1);
  border: 1px solid rgba(148, 163, 184, 0.2);
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Print styles */
@media print {
  body > *:not(#sol-print-cards) {
    display: none !important;
  }

  #sol-print-cards {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr);
    gap: 8mm;
    padding: 10mm;
    background: white;
  }

  .sol-card {
    border: 1px solid #ccc;
    border-radius: 4mm;
    padding: 6mm;
    break-inside: avoid;
    text-align: center;
    background: white;
    color: #111;
  }

  .sol-card-brand {
    font-size: 8pt;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #555;
    margin-bottom: 4mm;
  }

  .sol-card-class {
    font-size: 10pt;
    font-weight: 600;
    color: #111;
    margin-bottom: 3mm;
  }

  .sol-card-label {
    font-size: 7pt;
    color: #777;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 1mm;
  }

  .sol-card-number {
    font-size: 28pt;
    font-weight: 900;
    color: #111;
    line-height: 1;
    font-family: 'Courier New', monospace;
  }

  .sol-card-synonym {
    font-size: 9pt;
    color: #444;
    margin-top: 2mm;
    font-style: italic;
  }
}


/* ══════════════════════════════════════════════════════════
   SOL EINHEITEN-BUILDER – v1.0
   ══════════════════════════════════════════════════════════ */

/* Unit-Grid */
.sol-unit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

/* Unit-Karte */
.sol-unit-card {
  position: relative;
  background: var(--glass-bg, rgba(255,255,255,0.04));
  border: 1px solid var(--glass-border, rgba(255,255,255,0.08));
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.18s, box-shadow 0.18s, transform 0.18s;
}
.sol-unit-card:focus-visible {
  outline: 2px solid rgba(99,102,241,0.6);
  outline-offset: 2px;
}
.sol-unit-card:hover {
  border-color: rgba(99,102,241,0.35);
  box-shadow: 0 8px 28px rgba(99,102,241,0.12), 0 2px 6px rgba(0,0,0,0.3);
  transform: translateY(-2px);
}

/* Farbiger Status-Streifen links */
.sol-unit-card-stripe {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 3px;
}
.sol-unit-card-stripe.active   { background: linear-gradient(to bottom, #22c55e, #16a34a); }
.sol-unit-card-stripe.archived { background: rgba(148,163,184,0.25); }

.sol-unit-card-body {
  padding: 16px 16px 16px 20px;
  position: relative;
  overflow: hidden;
}

/* Ghost-Zahl als dekorativer Hintergrund */
.sol-unit-ghost-nr {
  position: absolute;
  right: -8px; bottom: -16px;
  font-size: 5.5rem;
  font-weight: 900;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  color: rgba(99,102,241,0.055);
  line-height: 1;
  pointer-events: none;
  user-select: none;
  letter-spacing: -0.04em;
}

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

.sol-unit-card-title {
  font-size: 1.0rem;
  font-weight: 700;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  color: var(--text);
  margin: 0;
  letter-spacing: -0.01em;
  line-height: 1.3;
  flex: 1;
}

.sol-unit-badges {
  display: flex;
  gap: 5px;
  flex-shrink: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.sol-unit-meta {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.75rem;
  color: var(--muted);
  margin-bottom: 14px;
}

.sol-unit-card-actions {
  display: flex;
  gap: 6px;
  align-items: center;
}

/* Unit-Detail Header */
.sol-unit-detail-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.sol-unit-detail-title {
  font-size: 1.25rem;
  font-weight: 800;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  color: var(--text);
  margin: 0;
  letter-spacing: -0.02em;
  flex: 1;
}

/* Linearer-Modus Badge */
.sol-linear-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 20px;
  background: rgba(245,158,11,0.12);
  border: 1px solid rgba(245,158,11,0.3);
  color: #fcd34d;
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* Station-Liste */
.sol-station-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 6px;
}

/* Station-Zeile: asymmetrisches Grid */
.sol-station-row {
  display: grid;
  grid-template-columns: 28px auto 1fr auto;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-left-width: 2px;
  border-radius: 8px;
  padding: 9px 10px;
  transition: background 0.14s, border-color 0.14s;
}
.sol-station-row:hover {
  background: rgba(255,255,255,0.055);
  border-color: rgba(255,255,255,0.1);
}

/* Typ-spezifische linke Border */
.sol-station-row.type-aufgabe    { border-left-color: rgba(99,102,241,0.6); }
.sol-station-row.type-info       { border-left-color: rgba(139,92,246,0.6); }
.sol-station-row.type-checkpoint { border-left-color: rgba(245,158,11,0.6); }

.sol-station-nr {
  font-family: 'Courier New', monospace;
  font-size: 0.75rem;
  font-weight: 700;
  color: rgba(255,255,255,0.3);
  text-align: center;
}

/* Typ-Badges */
.sol-station-type-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  white-space: nowrap;
}
.sol-type-aufgabe {
  background: rgba(99,102,241,0.14);
  border: 1px solid rgba(99,102,241,0.3);
  color: #a5b4fc;
}
.sol-type-info {
  background: rgba(139,92,246,0.14);
  border: 1px solid rgba(139,92,246,0.3);
  color: #c4b5fd;
}
.sol-type-checkpoint {
  background: rgba(245,158,11,0.12);
  border: 1px solid rgba(245,158,11,0.3);
  color: #fcd34d;
}

.sol-station-title {
  font-size: 0.875rem;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sol-station-actions {
  display: flex;
  gap: 2px;
  align-items: center;
}

/* Icon-Buttons */
.sol-btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border-radius: 8px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  color: #94a3b8;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s;
  flex-shrink: 0;
  overflow: visible;
}
.sol-btn-icon:hover:not(:disabled) {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.16);
  color: #f1f5f9;
  transform: none;
  box-shadow: none;
}
/* Edit-Variante: Indigo */
.sol-btn-icon.edit {
  color: #a5b4fc;
  background: rgba(99,102,241,0.08);
  border-color: rgba(99,102,241,0.2);
}
.sol-btn-icon.edit:hover:not(:disabled) {
  background: rgba(99,102,241,0.15);
  border-color: rgba(99,102,241,0.35);
  box-shadow: 0 0 10px rgba(99,102,241,0.2);
  color: #c7d2fe;
}
/* Danger-Variante: Rot */
.sol-btn-icon.danger {
  color: #f87171;
  background: rgba(239,68,68,0.08);
  border-color: rgba(239,68,68,0.2);
}
.sol-btn-icon.danger:hover:not(:disabled) {
  background: rgba(239,68,68,0.15);
  border-color: rgba(239,68,68,0.35);
  box-shadow: 0 0 10px rgba(239,68,68,0.2);
  color: #fca5a5;
}
/* Disabled */
.sol-btn-icon:disabled {
  opacity: 0.25;
  cursor: not-allowed;
}

/* Station-Typ-Auswahl-Leiste */
.sol-add-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 0 0;
  border-top: 1px solid rgba(255,255,255,0.06);
  margin-top: 12px;
  flex-wrap: wrap;
}

.sol-add-bar-label {
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.3);
  white-space: nowrap;
  margin-right: 4px;
}

.sol-add-type-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 7px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.14s, box-shadow 0.14s, transform 0.12s;
  border: 1px solid transparent;
  border-left-width: 2px;
  line-height: 1;
}
.sol-add-type-btn:hover {
  transform: translateY(-1px);
}
.sol-add-type-btn.aufgabe {
  background: rgba(99,102,241,0.1);
  border-color: rgba(99,102,241,0.2);
  border-left-color: #6366f1;
  color: #a5b4fc;
}
.sol-add-type-btn.aufgabe:hover {
  background: rgba(99,102,241,0.18);
  box-shadow: 0 4px 14px rgba(99,102,241,0.2);
}
.sol-add-type-btn.info {
  background: rgba(139,92,246,0.1);
  border-color: rgba(139,92,246,0.2);
  border-left-color: #8b5cf6;
  color: #c4b5fd;
}
.sol-add-type-btn.info:hover {
  background: rgba(139,92,246,0.18);
  box-shadow: 0 4px 14px rgba(139,92,246,0.2);
}
.sol-add-type-btn.checkpoint {
  background: rgba(245,158,11,0.1);
  border-color: rgba(245,158,11,0.2);
  border-left-color: #f59e0b;
  color: #fcd34d;
}
.sol-add-type-btn.checkpoint:hover {
  background: rgba(245,158,11,0.18);
  box-shadow: 0 4px 14px rgba(245,158,11,0.15);
}

/* Station-Modal Typ-Streifen */
.sol-station-modal-stripe {
  height: 3px;
  border-radius: 16px 16px 0 0;
}
.sol-station-modal-stripe.aufgabe    { background: linear-gradient(90deg, #6366f1, #8b5cf6); }
.sol-station-modal-stripe.info       { background: linear-gradient(90deg, #8b5cf6, #a855f7); }
.sol-station-modal-stripe.checkpoint { background: linear-gradient(90deg, #f59e0b, #fb923c); }

/* Radio-Gruppe */
.sol-radio-group {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.sol-radio-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border-radius: 7px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.04);
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.13s, background 0.13s, color 0.13s;
  user-select: none;
}
.sol-radio-btn.selected {
  border-color: rgba(99,102,241,0.45);
  background: rgba(99,102,241,0.1);
  color: #a5b4fc;
}
.sol-radio-btn input[type="radio"] { display: none; }

/* MC-Optionen */
.sol-mc-options {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sol-mc-option-row {
  display: grid;
  grid-template-columns: 20px 1fr 28px;
  align-items: center;
  gap: 8px;
}
.sol-mc-correct-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.2);
  cursor: pointer;
  transition: background 0.13s, border-color 0.13s, box-shadow 0.13s;
  flex-shrink: 0;
}
.sol-mc-correct-dot.selected {
  background: #22c55e;
  border-color: #22c55e;
  box-shadow: 0 0 8px rgba(34,197,94,0.5);
}
.sol-mc-correct-dot:hover {
  border-color: rgba(34,197,94,0.5);
}

/* Checkpoint-Hinweis */
.sol-checkpoint-notice {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 12px;
  background: rgba(245,158,11,0.08);
  border: 1px solid rgba(245,158,11,0.2);
  border-radius: 8px;
  color: #fcd34d;
  font-size: 0.8rem;
  line-height: 1.5;
  margin-bottom: 12px;
}

/* Linearer-Modus Toggle */
.sol-toggle-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 8px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  cursor: pointer;
  transition: background 0.13s, border-color 0.13s;
  user-select: none;
  width: 100%;
  box-sizing: border-box;
}
.sol-toggle-row:hover,
.sol-toggle-row.is-active {
  background: rgba(245,158,11,0.06);
  border-color: rgba(245,158,11,0.2);
}

.sol-toggle {
  position: relative;
  width: 36px;
  height: 20px;
  flex-shrink: 0;
}
.sol-toggle input { display: none; }

.sol-toggle-track {
  position: absolute;
  inset: 0;
  border-radius: 20px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.12);
  transition: background 0.2s, border-color 0.2s;
}
.sol-toggle-row.is-active .sol-toggle-track {
  background: rgba(245,158,11,0.35);
  border-color: rgba(245,158,11,0.5);
}

.sol-toggle-thumb {
  position: absolute;
  top: 3px; left: 3px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: rgba(255,255,255,0.5);
  transition: left 0.2s, background 0.2s;
  pointer-events: none;
}
.sol-toggle-row.is-active .sol-toggle-thumb {
  left: 19px;
  background: #fbbf24;
}

/* Grün-Variante für Kontexte mit Emerald-Identität (z.B. SOL Phase-2-Einstellungen),
   Wrapper dort ist .config-option statt .sol-toggle-row — Amber-Regeln oben bleiben unberührt. */
.config-option.is-active .sol-toggle-track {
  background: rgba(16,185,129,0.35);
  border-color: rgba(16,185,129,0.5);
}
.config-option.is-active .sol-toggle-thumb {
  left: 19px;
  background: #10b981;
}

.sol-toggle-label {
  flex: 1;
}
.sol-toggle-label strong {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 2px;
}
.sol-toggle-label span {
  font-size: 0.76rem;
  color: var(--muted);
  line-height: 1.4;
}

/* ── SOL Medien-Upload & Toleranz ─────────────────────────────────────────── */
.sol-form-section-label {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  padding: 14px 0 2px;
  border-top: 1px solid rgba(255,255,255,0.06);
  margin-top: 4px;
}
.sol-file-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  padding: 6px 14px;
  border-radius: 7px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.7);
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  user-select: none;
}
.sol-file-label:hover {
  background: rgba(255,255,255,0.09);
  border-color: rgba(255,255,255,0.18);
  color: var(--text);
}
.sol-media-preview {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  margin-top: 6px;
  font-size: 0.82rem;
  color: rgba(255,255,255,0.7);
}
.sol-media-preview.hidden {
  display: none;
}
.sol-media-preview img {
  max-height: 60px;
  max-width: 120px;
  border-radius: 4px;
  object-fit: cover;
  flex-shrink: 0;
}
.sol-media-preview audio {
  flex: 1;
  height: 32px;
  min-width: 0;
}
.sol-media-preview-name {
  flex: 1;
  font-size: 0.8rem;
  color: rgba(255,255,255,0.7);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.sol-tolerant-toggle {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 9px 14px;
  border-radius: 8px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.7);
  font-size: 0.85rem;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.sol-tolerant-toggle:hover {
  background: rgba(255,255,255,0.07);
}
.sol-tolerant-toggle[data-active="true"] {
  background: rgba(99,102,241,0.1);
  border-color: rgba(99,102,241,0.3);
  color: #a5b4fc;
}
.sol-tolerant-status {
  font-weight: 700;
  font-size: 0.75rem;
  min-width: 30px;
}
.sol-tolerant-hint {
  font-size: 0.72rem;
  font-weight: 400;
  color: var(--muted);
  margin-left: 8px;
}

/* ============================================
   SOL PHASE 2 – SESSION DESK SECTION
   ============================================ */

.sol-phase2-section {
  display: none;
  padding: var(--space-3) var(--space-4);
  margin: -4px 0 4px;
  background: rgba(99, 102, 241, 0.07);
  border-radius: var(--radius-md);
  border: 1px solid rgba(99, 102, 241, 0.15);
}

.sol-phase2-dropdowns {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.sol-phase2-field {
  flex: 1;
  min-width: 150px;
}

.sol-phase2-label {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: rgba(52, 211, 153, 0.75);
  margin-bottom: 7px;
}

.sol-phase2-select {
  width: 100%;
  padding: 12px 40px 12px 16px;
  background: rgba(255,255,255,0.04);
  border: 1.5px solid rgba(16,185,129,0.30);
  border-radius: 10px;
  color: var(--text);
  font-size: 0.92rem;
  font-family: inherit;
  transition: border-color 0.18s, box-shadow 0.18s;
  /* Ohne appearance:none + eigenen Pfeil rendert Safari das Feld nativ und deutlich
     schmaler/unauffälliger als Chrome — dieser Fix erzwingt identisches Aussehen. */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2334d399' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px;
}

.sol-phase2-select:focus {
  outline: none;
  border-color: #10b981;
  box-shadow: 0 0 0 3px rgba(16,185,129,0.15);
}

.sol-phase2-select:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ============================================================
   SOL PFAD-TRACKER – Track-Onboarding, Chip, Picker
   Design-Hook: Ghost-Buchstabe als typografisches BG-Element,
   farbige Lift+Glow Hover-States, Bottom-Sheet Picker
   ============================================================ */

/* ── Onboarding Overlay ─────────────────────────────────────── */
.sol-track-onboarding {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(7, 13, 26, 0.93);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: safe center;   /* Q-267: auf kleinen Handys scrollen statt oben/unten abschneiden */
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: max(24px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom));
  animation: solTrackOverlayIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes solTrackOverlayIn {
  from { opacity: 0; transform: scale(0.97) translateY(8px); }
  to   { opacity: 1; transform: scale(1)    translateY(0);   }
}

@keyframes solTrackOverlayOut {
  from { opacity: 1; transform: scale(1)    translateY(0);   }
  to   { opacity: 0; transform: scale(0.97) translateY(8px); }
}

.sol-track-onboarding-eyebrow {
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.28);
  margin: 0 0 10px;
}

.sol-track-onboarding-title {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: clamp(1.5rem, 5vw, 2.2rem);
  font-weight: 800;
  color: var(--text);
  text-align: center;
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin: 0 0 8px;
}

.sol-track-onboarding-sub {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.35);
  text-align: center;
  margin: 0 0 14px;
  letter-spacing: 0.01em;
}

/* Beruhigender Erklär-Hinweis: erste, jederzeit änderbare Wahl, Lehrkraft
   sieht sie und ist ansprechbar – adressiert die Unsicherheit beim allerersten
   SOL-Tag (siehe Lehrerhirn-Skill, Schmerzpunkt "Erster SOL-Tag"). */
.sol-track-onboarding-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  max-width: 480px;
  margin: 0 auto 28px;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(99, 102, 241, 0.1);
  border: 1px solid rgba(99, 102, 241, 0.25);
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.82rem;
  line-height: 1.45;
  text-align: left;
}

.sol-track-onboarding-note svg {
  flex-shrink: 0;
  margin-top: 2px;
  color: #a5b4fc;
}

/* ── Track Cards Grid ───────────────────────────────────────── */
.sol-track-cards {
  display: flex;
  gap: 14px;
  width: 100%;
  max-width: 700px;
  justify-content: center;
  flex-wrap: wrap;
}

.sol-track-card {
  flex: 1;
  min-width: 155px;
  max-width: 210px;
  position: relative;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  padding: 22px 18px 18px;
  cursor: pointer;
  overflow: hidden;
  transition:
    transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.25s ease,
    border-color 0.25s ease,
    background 0.25s ease;
  min-height: 176px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  /* Reset browser button defaults */
  appearance: none;
  -webkit-appearance: none;
  font-family: inherit;
  color: var(--text);
}

/* Design-Hook: Ghost-Buchstabe als typografisches Hintergrund-Element */
.sol-track-card-ghost {
  position: absolute;
  right: -6px;
  bottom: -18px;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 7.5rem;
  font-weight: 900;
  line-height: 1;
  pointer-events: none;
  user-select: none;
  opacity: 0.07;
  letter-spacing: -0.06em;
  transition: opacity 0.3s ease;
}

.sol-track-card:hover .sol-track-card-ghost {
  opacity: 0.12;
}

/* Track-spezifische Hover-States mit farbigem Glow (nie neutral-grau) */
.sol-track-card[data-track="A"]:hover,
.sol-track-card[data-track="A"]:focus-visible {
  border-color: rgba(16, 185, 129, 0.45);
  box-shadow: 0 16px 48px rgba(16, 185, 129, 0.22), 0 4px 12px rgba(0, 0, 0, 0.35);
  background: rgba(16, 185, 129, 0.06);
  transform: translateY(-8px);
  outline: none;
}

.sol-track-card[data-track="B"]:hover,
.sol-track-card[data-track="B"]:focus-visible {
  border-color: rgba(245, 158, 11, 0.45);
  box-shadow: 0 16px 48px rgba(245, 158, 11, 0.22), 0 4px 12px rgba(0, 0, 0, 0.35);
  background: rgba(245, 158, 11, 0.06);
  transform: translateY(-8px);
  outline: none;
}

.sol-track-card[data-track="C"]:hover,
.sol-track-card[data-track="C"]:focus-visible {
  border-color: rgba(239, 68, 68, 0.45);
  box-shadow: 0 16px 48px rgba(239, 68, 68, 0.22), 0 4px 12px rgba(0, 0, 0, 0.35);
  background: rgba(239, 68, 68, 0.06);
  transform: translateY(-8px);
  outline: none;
}

.sol-track-card:active {
  transform: translateY(-4px) scale(0.98);
}

.sol-track-card-accent {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  margin-bottom: 14px;
  flex-shrink: 0;
}

.sol-track-card-title {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin-bottom: 6px;
  line-height: 1.2;
}

.sol-track-card-desc {
  font-size: 0.73rem;
  color: rgba(255, 255, 255, 0.42);
  line-height: 1.55;
  flex: 1;
}

.sol-track-card-cta {
  margin-top: 16px;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.sol-track-card:hover .sol-track-card-cta,
.sol-track-card:focus-visible .sol-track-card-cta {
  opacity: 1;
  transform: translateX(0);
}

/* Mobile: Cards untereinander */
@media (max-width: 520px) {
  .sol-track-cards { flex-direction: column; align-items: center; }
  .sol-track-card  { max-width: 100%; width: 100%; min-height: unset; flex-direction: row; gap: 14px; align-items: center; padding: 16px 18px; }
  .sol-track-card-ghost { font-size: 5rem; }
  .sol-track-card-cta { display: none; }
  .sol-track-card-desc { display: none; }
  .sol-track-card-accent { margin-bottom: 0; }
  .sol-track-card-title { margin-bottom: 0; }
}

/* ── Track Chip im Header ───────────────────────────────────── */
.sol-track-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 9px 5px 7px;
  border-radius: 20px;
  font-size: 0.71rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  min-height: 30px;
  min-width: unset;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  flex-shrink: 0;
}

.sol-track-chip:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.sol-track-chip:active {
  transform: scale(0.96);
}

.sol-track-chip-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: block;
  flex-shrink: 0;
  transition: background 0.2s ease;
}

/* ── Track Picker (Bottom-Sheet) ────────────────────────────── */
.sol-track-picker {
  position: fixed;
  inset: 0;
  z-index: 9998;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(7, 13, 26, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: solPickerBgIn 0.2s ease;
  padding: 0 12px 12px;
}

@keyframes solPickerBgIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.sol-track-picker-sheet {
  width: 100%;
  max-width: 380px;
  background: #0d1829;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 20px 20px 16px 16px;
  padding: 4px 14px 20px;
  animation: solPickerSheetIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.5);
}

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

.sol-track-picker-handle {
  width: 36px;
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.1);
  margin: 10px auto 18px;
}

.sol-track-picker-title {
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.28);
  margin-bottom: 10px;
  padding: 0 2px;
}

.sol-track-picker-btn {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 13px 14px;
  border-radius: 12px;
  margin-bottom: 7px;
  font-size: 0.88rem;
  font-weight: 600;
  min-height: 48px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
  text-align: left;
  justify-content: flex-start;
  font-family: inherit;
  appearance: none;
  -webkit-appearance: none;
}

.sol-track-picker-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.12);
  transform: translateX(3px);
}

.sol-track-picker-btn.active {
  background: rgba(99, 102, 241, 0.1);
  border-color: rgba(99, 102, 241, 0.28);
}

.sol-track-picker-cancel {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.35);
  font-size: 0.8rem;
  margin-top: 2px;
  justify-content: center;
}

.sol-track-picker-cancel:hover {
  background: rgba(255, 255, 255, 0.04);
  transform: none;
}

.sol-track-picker-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* SOL Info-Station */
.sol-info-content { padding: 8px 0 16px; }
.sol-info-text    { color: var(--text); line-height: 1.65; font-size: 0.95rem; }
.sol-info-weiter  { width: 100%; margin-top: 8px; }

/* SOL Lernlandkarte MVP */
.sol-llk-overlay {
  position: fixed; inset: 0; z-index: 500;
  background: #060a14;   /* Q-267: deckend — vorher schien die PIN-Seite durch */
  display: flex; justify-content: center;
  padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
  overflow: hidden; overscroll-behavior: contain;
}
.sol-llk-overlay.hidden { display: none; }
/* 🔒 Q-267 (2026-10-26): Am Smartphone war die Karte höher als der Bildschirm — das Overlay zentrierte
   ohne Scrollen, Kopf und der Weiter-Knopf lagen außerhalb. Jetzt eine feste Spalte über die volle
   Höhe: Kopf oben, die Karte nimmt den Rest und scrollt IN SICH, der Fuß mit dem Knopf bleibt immer
   sichtbar. Am Desktop zentriert margin-block:auto wie bisher, solange alles passt. */
.sol-llk-inner {
  max-width: 640px; width: 100%; max-height: 100%; min-height: 0;
  margin-block: auto;
  display: flex; flex-direction: column; gap: 28px;
  overflow-y: auto; overscroll-behavior: contain;   /* nur wenn selbst die Mindest-Karte nicht passt (Querformat) */
}
.sol-llk-header, .sol-llk-note, .sol-llk-footer, .sol-llk-wisch { flex-shrink: 0; }
.sol-llk-eyebrow { font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase;
                   color: rgba(52,211,153,0.7); font-weight: 700; }
.sol-llk-title   { font-size: 1.6rem; font-weight: 700; color: var(--text, #f1f5f9); margin: 6px 0; }
.sol-llk-track-badge { display: inline-flex; padding: 4px 12px; border-radius: 999px;
                        border: 1px solid; font-size: 0.78rem; font-weight: 600; width: fit-content; }
/* BUG-4 FIX: Erklär-Hinweis, nur im Vorschau-Modus sichtbar (siehe showLernlandkarte()) —
   gleiches Farb-/Icon-Muster wie .sol-track-onboarding-note, damit sich der allererste
   Kontakt mit der Lernlandkarte nicht unerklärt/überrollend anfühlt. */
.sol-llk-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(99, 102, 241, 0.1);
  border: 1px solid rgba(99, 102, 241, 0.25);
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.82rem;
  line-height: 1.45;
  text-align: left;
}
.sol-llk-note.hidden { display: none; }
.sol-llk-note svg { flex-shrink: 0; margin-top: 2px; color: #a5b4fc; }
.sol-llk-stages  { display: flex; align-items: flex-start; gap: 4px; overflow: auto;
                   flex: 0 1 auto; min-height: min(160px, 40vh);
                   overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
                   scroll-snap-type: x proximity; padding-bottom: 8px; }
.sol-llk-stage   { display: flex; flex-direction: column; align-items: center; gap: 8px; flex-shrink: 0;
                   scroll-snap-align: start; }
/* Q-267: Rechts mehr? Dann sanfter Ausblend-Rand + Wisch-Hinweis (Klasse setzt showLernlandkarte) */
.sol-llk-stages.sol-llk-mehr { -webkit-mask-image: linear-gradient(to right, #000 85%, transparent);
                               mask-image: linear-gradient(to right, #000 85%, transparent); }
.sol-llk-stages.sol-llk-mehr.sol-llk-ende { -webkit-mask-image: none; mask-image: none; }
.sol-llk-wisch { margin: -16px 0 0; font-size: 0.75rem; color: rgba(255,255,255,0.55); text-align: center; }
.sol-llk-wisch.hidden { display: none; }
.sol-llk-stage-num { width: 34px; height: 34px; border-radius: 50%;
                      background: color-mix(in srgb, var(--llk-c) 15%, transparent);
                      border: 1.5px solid color-mix(in srgb, var(--llk-c) 40%, transparent);
                      display: flex; align-items: center; justify-content: center;
                      font-size: 0.8rem; font-weight: 700; color: var(--llk-c); }
.sol-llk-stations{ display: flex; flex-direction: column; gap: 4px; }
.sol-llk-node    { display: flex; align-items: center; gap: 6px; padding: 6px 10px;
                   border-radius: 8px; background: rgba(255,255,255,0.04);
                   border: 1px solid rgba(255,255,255,0.07); min-width: 110px; }
.sol-llk-node--cp{ border-color: rgba(251,191,36,0.3); background: rgba(251,191,36,0.05); }
.sol-llk-node-icon  { font-size: 0.85rem; flex-shrink: 0; }
.sol-llk-node-label { font-size: 0.72rem; color: var(--muted, #64748b);
                       white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sol-llk-arrow   { font-size: 1.1rem; padding: 0 4px; opacity: 0.4; align-self: center; }
.sol-llk-footer  { display: flex; align-items: center; justify-content: space-between; gap: 16px;
                   position: sticky; bottom: 0; background: #060a14; padding-top: 8px; }   /* Knopf immer sichtbar */
.sol-llk-stats   { font-size: 0.78rem; color: var(--muted, #64748b); white-space: nowrap; }
@media (max-width: 640px), (max-height: 600px) {
  .sol-llk-inner  { gap: 14px; }
  .sol-llk-title  { font-size: 1.2rem; margin: 2px 0 4px; }
  .sol-llk-note   { font-size: 0.75rem; padding: 8px 10px; }
  .sol-llk-wisch  { margin-top: -6px; }
  .sol-llk-footer { flex-direction: column; align-items: stretch; gap: 8px; }
  .sol-llk-stats  { text-align: center; }
  #llkStartBtn    { width: 100%; min-height: 48px; }
}

/* ============================================================
   SOL Willkommen-zurück-Modal — proaktive Re-Login-Erinnerung
   (rallye.js: showWelcomeBackModal()) — ergänzt .sol-llk-*, ersetzt sie nicht.
   ============================================================ */
.sol-wb-overlay {
  position: fixed; inset: 0; z-index: 9997;
  background: rgba(6,10,20,0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex; align-items: center; justify-content: center;
  padding: 32px 20px;
  animation: solTrackOverlayIn 0.4s cubic-bezier(0.16,1,0.3,1) forwards;
}
.sol-wb-overlay.hidden { display: none; }

.sol-wb-card {
  --wb-c: #10b981;
  position: relative;
  width: 100%;
  max-width: 400px;
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 28px 24px 24px 56px;
  background: rgba(255,255,255,0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 24px;
  box-shadow: 0 20px 60px color-mix(in srgb, var(--wb-c) 25%, transparent);
  overflow: visible; /* Ring darf bewusst aus der Karte herausragen (Design-Hook) */
}

/* Design-Hook: Fortschritts-Ring bricht aus der Card-Kontur aus (Grid-Breaker),
   statt zentriert in der Karte zu schweben — unterscheidet das Modal auf einen
   Blick von Lernlandkarte/Onboarding-Karten, die beide flache Balken/Kreise nutzen. */
.sol-wb-ring-wrap {
  position: absolute;
  top: -20px; left: -20px;
  width: 88px; height: 88px;
  flex-shrink: 0;
}
.sol-wb-ring { width: 100%; height: 100%; transform: rotate(-90deg); }
.sol-wb-ring-track { fill: none; stroke: rgba(255,255,255,0.1); stroke-width: 10; }
.sol-wb-ring-fill {
  fill: none;
  stroke: var(--wb-c);
  stroke-width: 10;
  stroke-linecap: round;
  stroke-dasharray: 326.73;
  stroke-dashoffset: 326.73;
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--wb-c) 60%, transparent));
}
.sol-wb-ring-label {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
}
.sol-wb-ring-num {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: clamp(1.05rem, 4vw, 1.3rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text, #f1f5f9);
  line-height: 1;
}
.sol-wb-ring-sub {
  font-size: 0.52rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted, #64748b);
  margin-top: 2px;
}

.sol-wb-body { flex: 1; min-width: 0; padding-top: 8px; }
.sol-wb-eyebrow {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--wb-c);
}
.sol-wb-title {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: clamp(1.15rem, 4vw, 1.4rem);
  font-weight: 800;
  color: var(--text, #f1f5f9);
  letter-spacing: -0.02em;
  margin: 4px 0 6px;
  line-height: 1.15;
}
.sol-wb-sub {
  font-size: 0.85rem;
  color: var(--muted, #64748b);
  line-height: 1.45;
  margin: 0 0 18px;
}

/* Eigene, kompakte Button-Klasse — deshalb in allen 6 globalen :not()-Ausnahmelisten
   (style.css ~Z.345/374/385/393/399/406) eingetragen und hier vollständig selbst
   deklariert (min-height/padding/border-radius etc.), statt sich auf die pauschale
   Button-Regel zu verlassen, da die Track-Farbe sonst überschrieben würde. */
.sol-wb-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 48px;
  padding: 12px 20px;
  border: none;
  border-radius: 14px;
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  cursor: pointer;
  touch-action: manipulation;
  background: var(--wb-c);
  color: #0a0f1a;
  box-shadow: 0 8px 24px color-mix(in srgb, var(--wb-c) 40%, transparent);
  transition: transform 0.2s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.2s ease;
}
.sol-wb-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px color-mix(in srgb, var(--wb-c) 55%, transparent);
}
.sol-wb-btn:active { transform: translateY(0) scale(0.98); }
.sol-wb-btn-icon { display: flex; flex-shrink: 0; }

.sol-wb-map-link {
  display: block;
  width: 100%;
  min-height: 44px;
  margin-top: 8px;
  padding: 8px;
  background: none;
  border: none;
  border-radius: 10px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted, #64748b);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  touch-action: manipulation;
}
.sol-wb-map-link:hover { color: var(--text, #f1f5f9); }

@media (max-width: 420px) {
  .sol-wb-card {
    flex-direction: column;
    align-items: center;
    padding: 44px 20px 24px;
    max-width: 340px;
  }
  .sol-wb-ring-wrap { top: -34px; left: 50%; transform: translateX(-50%); }
  .sol-wb-body { padding-top: 24px; text-align: center; }
}

/* ============================================================
   SOL FEEDBACK STATION — Mobile-first (Schüler-UI)
   ============================================================ */

.sol-feedback-card {
  padding: clamp(20px, 5vw, 32px) clamp(16px, 4vw, 28px);
  max-width: 480px;
  width: calc(100vw - 32px);
  margin: auto;
  border-radius: 24px;
  overflow: hidden;
}

.sol-feedback-header {
  text-align: center;
  margin-bottom: clamp(16px, 4vw, 24px);
}

.sol-feedback-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #a78bfa;
  margin-bottom: 10px;
}

.sol-feedback-question {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: clamp(1rem, 4vw, 1.3rem);
  font-weight: 700;
  color: var(--text);
  line-height: 1.4;
  margin: 0;
}

/* ── Smiley Grid ─────────────────────────────────────────── */
.sol-feedback-grid {
  display: flex;
  gap: clamp(8px, 3vw, 18px);
  justify-content: center;
  padding: clamp(16px, 4vw, 24px) 0;
}

.sol-feedback-smiley-btn {
  width: clamp(64px, 18vw, 80px);
  height: clamp(64px, 18vw, 80px);
  border-radius: 50%;
  border: 2.5px solid var(--border);
  background: var(--panel-2);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.2s, box-shadow 0.2s;
  touch-action: manipulation;
  flex-shrink: 0;
}

.sol-feedback-smiley-btn:active { transform: scale(0.94); }

.sol-feedback-smiley-btn.selected {
  border-color: var(--fb-color, #10b981);
  box-shadow: 0 0 20px color-mix(in srgb, var(--fb-color, #10b981) 50%, transparent);
  transform: scale(1.12);
}

.sol-feedback-smiley-btn svg { width: 60%; height: 60%; }

/* ── Star Grid ───────────────────────────────────────────── */
.sol-feedback-star-btn {
  width: clamp(52px, 15vw, 70px);
  height: clamp(52px, 15vw, 70px);
  border-radius: 50%;
  border: 2.5px solid var(--border);
  background: var(--panel-2);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.2s, box-shadow 0.2s;
  touch-action: manipulation;
  flex-shrink: 0;
}

.sol-feedback-star-btn:active { transform: scale(0.94); }

.sol-feedback-star-btn.filled {
  border-color: #f59e0b;
  box-shadow: 0 0 16px rgba(245, 158, 11, 0.45);
}

.sol-feedback-star-btn svg { width: 55%; height: 55%; }
.sol-feedback-star-btn .star-fill { fill: transparent; transition: fill 0.15s; }
.sol-feedback-star-btn.filled .star-fill { fill: #f59e0b; }

/* ── Text Choices ─────────────────────────────────────────── */
.sol-feedback-text-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 0;
}

.sol-feedback-text-btn {
  width: 100%;
  padding: clamp(12px, 3vw, 16px) 20px;
  border-radius: 16px;
  font-size: clamp(0.88rem, 3.5vw, 1rem);
  font-weight: 600;
  font-family: inherit;
  border: 2px solid var(--border);
  background: var(--panel-2);
  color: var(--text);
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s, transform 0.12s cubic-bezier(0.34, 1.56, 0.64, 1);
  touch-action: manipulation;
}

.sol-feedback-text-btn:active { transform: scale(0.97); }

.sol-feedback-text-btn.selected {
  border-color: #6366f1;
  background: rgba(99, 102, 241, 0.12);
  box-shadow: 0 0 16px rgba(99, 102, 241, 0.3);
}

/* ── Submit ─────────────────────────────────────────────── */
.sol-feedback-submit {
  width: 100%;
  margin-top: clamp(16px, 4vw, 24px);
  padding: 14px;
  border-radius: 14px;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  font-family: 'Space Grotesk', sans-serif;
  border: none;
  cursor: pointer;
  transition: opacity 0.2s, transform 0.15s;
  touch-action: manipulation;
}

.sol-feedback-submit:disabled { opacity: 0.35; cursor: default; }
.sol-feedback-submit:not(:disabled):active { transform: scale(0.97); }

@media (prefers-reduced-motion: reduce) {
  .sol-feedback-smiley-btn, .sol-feedback-star-btn, .sol-feedback-text-btn { transition: border-color 0.2s, box-shadow 0.2s; }
}

/* ── Builder: Typ-Badge ──────────────────────────────────── */
.sol-type-feedback { background: rgba(167, 139, 250, 0.15); color: #a78bfa; border-color: rgba(167, 139, 250, 0.3); }


/* ═══════════════════════════════════════════════════════════
   PODIUM SCREEN — Fullscreen Celebration (rallye.html)
   ═══════════════════════════════════════════════════════════ */

.podium-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: #0F0F23;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  gap: 0;
}
.podium-overlay.podium-visible { display: flex; }

/* God-Ray Spotlight hinter Platz 1 */
.podium-spotlight {
  position: absolute; bottom: 0; left: 50%;
  transform: translateX(-50%);
  width: clamp(280px, 50vw, 480px); height: 100%;
  background: radial-gradient(ellipse 40% 55% at 50% 100%, rgba(202,138,4,0.22), transparent 70%);
  pointer-events: none;
  animation: podium-spotlight-pulse 3s ease-in-out infinite;
}
@keyframes podium-spotlight-pulse { 0%,100%{opacity:.85}50%{opacity:1.1} }

/* Konfetti */
.podium-confetti-container { position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.podium-confetti-piece {
  position: absolute; top: -20px; border-radius: 2px;
  animation: podium-confetti-fall var(--dur,3s) var(--delay,0s) linear infinite;
}
@keyframes podium-confetti-fall {
  0%   { transform: translateY(-20px) rotate(0deg);   opacity: 1; }
  100% { transform: translateY(110vh)  rotate(720deg); opacity: 0; }
}

/* Header */
.podium-header {
  display: flex; align-items: center; gap: 16px;
  margin-bottom: clamp(24px, 5vh, 48px);
  animation: podium-fade-in 0.6s ease-out 0.1s both;
}
.podium-trophy { width: clamp(44px,8vw,64px); height: clamp(44px,8vw,64px); animation: podium-trophy-bounce 0.8s cubic-bezier(0.34,1.56,0.64,1) 0.2s both; }
@keyframes podium-trophy-bounce { from{transform:scale(0);opacity:0} to{transform:scale(1);opacity:1} }
.podium-title {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: clamp(2rem, 6vw, 4rem);
  font-weight: 900; color: #fff;
  letter-spacing: -0.03em; margin: 0;
}
@keyframes podium-fade-in { from{opacity:0;transform:translateY(-12px)} to{opacity:1;transform:translateY(0)} }

/* Stage: Podest-Blöcke */
.podium-stage {
  display: flex; align-items: flex-end;
  gap: clamp(6px, 2vw, 12px);
  padding-bottom: clamp(20px, 5vh, 48px);
  position: relative; z-index: 1;
}

.podium-block {
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(4px, 1vh, 8px);
  animation: podium-rise 0.9s cubic-bezier(0.16,1,0.3,1) var(--delay,0s) both;
}
@keyframes podium-rise { from{transform:translateY(140px);opacity:0} to{transform:translateY(0);opacity:1} }

/* Medaillen */
.podium-medal { width: clamp(28px,6vw,36px); height: clamp(28px,6vw,36px); }
.podium-medal--1 { width: clamp(32px,7vw,42px); height: clamp(32px,7vw,42px); filter: drop-shadow(0 0 8px rgba(202,138,4,0.6)); }

/* Krone für Platz 1 */
.podium-crown-wrap { animation: podium-crown-drop 0.7s cubic-bezier(0.34,1.56,0.64,1) 0.85s both; }
@keyframes podium-crown-drop { from{transform:translateY(-70px);opacity:0} to{transform:translateY(0);opacity:1} }
.podium-crown { width: clamp(36px,8vw,52px); height: auto; filter: drop-shadow(0 4px 12px rgba(202,138,4,0.5)); }

/* Team-Namen */
.podium-team-name {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: clamp(0.75rem, 2.5vw, 1rem);
  font-weight: 700; color: #fff;
  text-align: center;
  max-width: clamp(90px, 18vw, 140px);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.podium-team-name--1 {
  font-size: clamp(0.9rem, 3vw, 1.25rem);
  color: #fbbf24;
  max-width: clamp(110px, 22vw, 160px);
  filter: drop-shadow(0 0 12px rgba(251,191,36,0.4));
}

/* Punkte */
.podium-points { font-size: clamp(0.65rem, 2vw, 0.8rem); font-weight: 600; color: rgba(148,163,184,0.8); }
.podium-points--1 { color: #CA8A04; font-size: clamp(0.72rem, 2vw, 0.9rem); }

/* Säulen */
.podium-pillar {
  border-radius: 8px 8px 0 0;
  display: flex; align-items: center; justify-content: center;
}
.podium-pillar--1 {
  width: clamp(90px, 18vw, 140px); height: clamp(90px, 16vh, 130px);
  background: linear-gradient(180deg, #CA8A04 0%, #92400e 100%);
  box-shadow: 0 0 48px rgba(202,138,4,0.55), inset 0 1px 0 rgba(255,255,255,0.2);
}
.podium-pillar--2 {
  width: clamp(78px, 16vw, 118px); height: clamp(68px, 12vh, 96px);
  background: linear-gradient(180deg, #64748b 0%, #334155 100%);
  box-shadow: 0 0 20px rgba(100,116,139,0.3);
}
.podium-pillar--3 {
  width: clamp(78px, 16vw, 118px); height: clamp(50px, 9vh, 72px);
  background: linear-gradient(180deg, #92400e 0%, #78350f 100%);
  box-shadow: 0 0 16px rgba(146,64,14,0.3);
}
.podium-pillar span {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: clamp(1.4rem, 4vw, 2.2rem); font-weight: 900;
  color: rgba(255,255,255,0.85);
}

@media (prefers-reduced-motion: reduce) {
  .podium-block, .podium-crown-wrap, .podium-trophy, .podium-header { animation: none; }
  .podium-confetti-piece { animation: none; display: none; }
  .podium-spotlight { animation: none; }
}

/* ── Aufgabenset-Import (Schreibtisch-Zwischenseite) — erster funktionaler Entwurf,
   Feindesign folgt bei Bedarf über den /design-Workflow ── */
.asi-import-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  padding: 56px 24px;
  background: var(--glass-bg, rgba(255,255,255,0.04));
  border: 1px solid var(--glass-border, rgba(255,255,255,0.08));
  border-radius: 16px;
}
.asi-import-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(251,146,60,0.1);
  border: 1px solid rgba(251,146,60,0.25);
  margin-bottom: 8px;
}
.asi-import-title {
  font-size: 1.3rem;
  font-weight: 800;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  color: var(--text);
  margin: 0;
}
.asi-import-desc {
  font-size: 0.9rem;
  color: var(--muted);
  max-width: 420px;
  line-height: 1.6;
  margin: 0 0 8px;
}

.asi-stats-card {
  background: var(--glass-bg, rgba(255,255,255,0.04));
  border: 1px solid var(--glass-border, rgba(255,255,255,0.08));
  border-radius: 16px;
  padding: 24px;
}
.asi-stats-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.asi-stats-filename {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
}

/* ═══════════════════════════════════════════════════════════════════════════
   SOL-SESSION-SETUP — Presets, Options-Kacheln, Picker-Zeilen
   🆕 2026-09-02 (Etappe 5 des Session-Setup-Redesigns)

   DESIGN-HOOK: Die drei Presets sind keine drei Kategorien, sondern EIN REGLER.
   Sie stehen auf einer Steuerungs-Achse von "wenig Fuehrung" nach "volle
   Fuehrung". Drei Mittel tragen das:
     1. ein 3-Segment-Gauge je Karte (1 / 2 / 3 gefuellt)
     2. eine gestaffelte Grundlinie — die Karten sitzen unterschiedlich hoch
     3. eine Ghost-Ziffer, Muster .sol-unit-ghost-nr

   FARBE: Alle drei in SOL-Emerald, in DREI INTENSITAETEN — keine drei eigenen
   Farben. Grund: Emerald/Amber/Rot ist im Projekt das Track-A/B/C-Schema
   (css/sol-grid-builder.css:22-30). Eine Lehrkraft liest Rot dort als
   "schwerste Spur", nicht als "drittes Preset". Blau ist der Arena-Modus,
   Violett bedeutet im SOL-Radar "zu bewerten". Eine Farbe in drei Staerken ist
   ausserdem semantisch richtiger: ein Regler hat eine Dimension.

   VORLAGE: .sol-track-card (style.css:7100) — dieselbe Karte, mit der die
   KINDER ihren Lernpfad waehlen. Die Lehrkraft waehlt ihren Fuehrungsgrad in
   derselben Bildsprache; das verbindet beide Seiten der App, ohne dass eine
   neue Formensprache erfunden werden muss.

   ⚠️ Die Transition dieser Bauteile steht NICHT hier, sondern in
   lehrkraft.html direkt unter der globalen !important-Regel (dort ~Zeile 256).
   Ohne diese Ausnahme haette `transform` projektweit gar keinen Uebergang.
   ═══════════════════════════════════════════════════════════════════════════ */

.sol-preset-group {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  align-items: end;              /* Grundlinie unten — die Staffelung waechst nach oben */
  margin: 0 0 4px;
}

.sol-preset-card {
  --p-tone: 16, 185, 129;        /* SOL-Emerald als RGB-Tripel, Intensitaet je Karte */
  --p-strength: 0.30;
  /* 🆕 2026-09-05 (Etappe 9) — AUSWAHLTON, bewusst eine ZWEITE Variable statt eines
     ueberschriebenen --p-tone.
     Die Trennlinie, die den ganzen Entwurf traegt: Die KARTENIDENTITAET bleibt gruen
     (--p-tone, dreistufig ueber --p-strength) — obere Lichtkante, Gauge-Balken,
     Gauge-Label, Icon-Flaeche, innerer Schein. Nur was "DIESE hier ist gewaehlt" sagt,
     wird orange und KONSTANT. Wuerde man --p-tone einfach ueberschreiben, faerbte sich
     die ganze Karte um und der Fuehrungsgrad waere nicht mehr ablesbar.
     #f97316 — von Dominic gewuenscht. Kollisionspruefung: Dieselbe Farbe bedeutet im
     SOL-Radar "Kind haengt fest" (--radar-struggle, css/sol-radar.css:16). Das ist
     vertretbar, weil Radar und Einrichtungsseite nie gleichzeitig sichtbar sind —
     vor der Stunde gegen waehrend der Stunde. Die frueher notierte Warnung galt einem
     Primaerbutton, der ueberall auftaucht; das hier ist eine Kachel auf einem Screen. */
  --p-sel: 249, 115, 22;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  padding: 12px 13px 11px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-top: 2px solid rgba(var(--p-tone), calc(var(--p-strength) * 0.9));
  color: var(--text);
  font-family: inherit;
  /* ⚠️ KEINE min-height. Die stand hier bis 2026-09-03 auf 168/182px und war der
     Grund, warum die Karten "relativ gross" wirkten (Dominic). Das Mockup hat
     keine — die Karten sind dort so hoch wie ihr Inhalt. Die gestaffelte
     Grundlinie, der eigentliche Design-Hook, braucht sie nicht: sie entsteht
     allein aus margin-bottom + align-items:end. */
}

/* Die gestaffelte Grundlinie — der Grid-Brecher. Bewusst klein gehalten:
   sichtbar als Ordnung, nicht als Unfall. */
.sol-preset-card[data-preset="frei"]      { --p-strength: 0.30; margin-bottom: 0; }
.sol-preset-card[data-preset="checkpoints"]{ --p-strength: 0.65; margin-bottom: 8px; }
.sol-preset-card[data-preset="gefuehrt"]  { --p-strength: 1.00; margin-bottom: 16px; }

/* Ambient-Glow im Karteninneren, erst bei Auswahl/Hover sichtbar. Liegt HINTER
   dem Inhalt (z-index 0 gegen 1) und ist der Traeger der "Tiefe". */
.sol-preset-card::before {
  content: '';
  position: absolute;
  top: -40%;
  left: -20%;
  width: 140%;
  height: 120%;
  background: radial-gradient(ellipse at 30% 30%,
              rgba(var(--p-tone), calc(var(--p-strength) * 0.22)) 0%, transparent 62%);
  opacity: 0;
  pointer-events: none;
  z-index: 0;
}
.sol-preset-card:hover::before,
.sol-preset-card:focus-visible::before,
.sol-preset-card[aria-pressed="true"]::before { opacity: 1; }

.sol-preset-card > * { position: relative; z-index: 1; }

/* Ghost-Ziffer — Muster .sol-unit-ghost-nr (style.css:6375) */
.sol-preset-ghost {
  position: absolute;
  right: -8px;
  bottom: -26px;
  z-index: 0;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 4.8rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.06em;
  pointer-events: none;
  user-select: none;
  color: rgba(var(--p-tone), 0.10);
  opacity: 0.7;
}
.sol-preset-card:hover .sol-preset-ghost,
.sol-preset-card[aria-pressed="true"] .sol-preset-ghost { opacity: 1.15; }

.sol-preset-ico {
  width: 34px; height: 34px;
  border-radius: 11px;
  display: grid; place-items: center;
  margin-bottom: 11px;
  background: rgba(var(--p-tone), calc(var(--p-strength) * 0.16));
  border: 1px solid rgba(var(--p-tone), calc(var(--p-strength) * 0.35));
  color: rgba(var(--p-tone), 1);
}

/* Typografischer Kontrast: Titel gegen Erklaerzeile deutlich ueber 2x */
.sol-preset-card h4 {
  margin: 0;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 1.02rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.15;
  color: var(--text);
}
/* Der Erklaersatz bleibt IM Markup der Karte — eine Quelle — wird dort aber
   ausgeblendet. syncSolPresetCards() spiegelt den Text der aktiven Karte in die
   Zeile unter der Gruppe. So liest man immer nur den einen, der gerade zaehlt,
   statt drei gleichzeitig. Spart ~48px und macht die Auswahl staerker: Die
   Karte reagiert mit Information, nicht nur mit Farbe. */
.sol-preset-card p { display: none; }

.sol-preset-hint {
  display: none;
  align-items: flex-start;
  gap: 8px;
  margin-top: 10px;
  padding: 8px 12px;
  border-radius: 10px;
  background: rgba(16, 185, 129, 0.07);
  border: 1px solid rgba(16, 185, 129, 0.16);
  font-size: 0.78rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.62);
}
.sol-preset-hint.show { display: flex; }
.sol-preset-hint svg { flex-shrink: 0; margin-top: 2px; color: rgba(52, 211, 153, 0.8); }

/* Das Gauge — der eigentliche Traeger der Skala */
.sol-preset-gauge {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: auto;
  padding-top: 12px;
  width: 100%;
}
.sol-preset-gauge-bars { display: flex; gap: 3px; }
.sol-preset-gauge i {
  display: block;
  width: 15px; height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.12);
  transform-origin: left center;
}
.sol-preset-gauge i.on {
  background: rgba(var(--p-tone), 0.95);
  box-shadow: 0 0 8px rgba(var(--p-tone), 0.5);
}
.sol-preset-gauge span {
  font-size: 0.63rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.34);
}
.sol-preset-card[aria-pressed="true"] .sol-preset-gauge span { color: rgba(var(--p-tone), 0.85); }

/* Hover: Lift + FARBIGER Schein in der eigenen Intensitaet (nie neutral-grau) */
.sol-preset-card:hover,
.sol-preset-card:focus-visible {
  transform: translateY(-6px);
  border-color: rgba(var(--p-tone), calc(var(--p-strength) * 0.55));
  box-shadow: 0 16px 44px rgba(var(--p-tone), calc(var(--p-strength) * 0.24)),
              0 4px 12px rgba(0, 0, 0, 0.38);
  outline: none;
}
.sol-preset-card:focus-visible {
  outline: 2px solid rgba(var(--p-tone), 0.9);
  outline-offset: 3px;
}
.sol-preset-card:active { transform: translateY(-2px) scale(0.985); }

/* Gewaehlt: Rahmen, Schein und Haken in ORANGE — und vor allem KONSTANT.
   ═══════════════════════════════════════════════════════════════════════════
   ⚠️ HIER STAND BIS 2026-09-05 `calc(var(--p-strength) * X)`. Das war der
   eigentliche Fehler, nicht die Farbe: --p-strength ist pro Karte 0.30 / 0.65 /
   1.00 (siehe :8017-8019), der Auswahl-Rahmen war dadurch dreifach abgestuft —

       Freies Arbeiten   border-color 0.225   box-shadow 0.090
       Mit Checkpoints   border-color 0.49    box-shadow 0.195
       Streng gefuehrt   border-color 0.75    box-shadow 0.300

   Die Markierung war bei der ERSTEN Karte 3,3x schwaecher als bei der dritten,
   und sie leuchtete im eigenen Ton der jeweiligen Karte. "Ausgewaehlt" hatte damit
   ueberhaupt kein konstantes Signal — man musste die drei Karten vergleichen, um
   zu sehen, welche an ist. Genau das hat sich fuer Dominic "unuebersichtlich"
   angefuehlt.

   Nur die Farbe zu tauschen haette daran NICHTS geaendert: Dann waere der Rahmen
   dreifach abgestuft in Orange gewesen. Die festen Zahlen sind der Fix, die Farbe
   macht ihn unverwechselbar.
   ═══════════════════════════════════════════════════════════════════════════ */
.sol-preset-card[aria-pressed="true"] {
  transform: translateY(-6px);
  background: rgba(var(--p-sel), 0.10);
  border-color: rgba(var(--p-sel), 0.85);
  box-shadow: 0 18px 48px rgba(var(--p-sel), 0.30),
              0 4px 12px rgba(0, 0, 0, 0.4),
              inset 0 1px 0 rgba(255, 255, 255, 0.10);
}

.sol-preset-badge {
  position: absolute;
  top: 14px; right: 14px;
  z-index: 2;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  color: rgba(var(--p-tone), 1);
  background: rgba(var(--p-tone), 0.14);
  border: 1px solid rgba(var(--p-tone), 0.38);
}
/* Der Haken traegt dieselbe Auswahlfarbe wie der Rahmen — und er ist der Grund,
   warum diese Etappe die Regel "Farbe nie als einziges Unterscheidungsmerkmal"
   nicht verletzt: Er existierte bereits und erscheint nur im gewaehlten Zustand. */
.sol-preset-check {
  position: absolute;
  top: 12px; right: 12px;
  z-index: 2;
  opacity: 0;
  color: rgba(var(--p-sel), 1);
}
.sol-preset-card[aria-pressed="true"] .sol-preset-check { opacity: 1; }
.sol-preset-card[aria-pressed="true"] .sol-preset-badge { opacity: 0; }

/* "Eigene Einstellung" — erscheint, wenn kein Preset mehr passt */
.sol-preset-custom {
  display: none;
  align-items: center;
  gap: 9px;
  margin-top: 12px;
  padding: 9px 13px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px dashed rgba(255, 255, 255, 0.16);
  font-size: 0.79rem;
  color: rgba(255, 255, 255, 0.6);
}
.sol-preset-custom.show { display: flex; }
.sol-preset-custom svg { color: rgba(255, 255, 255, 0.35); flex-shrink: 0; }

@media (max-width: 720px) {
  .sol-preset-group { grid-template-columns: 1fr; align-items: stretch; }
  .sol-preset-card,
  .sol-preset-card[data-preset="checkpoints"],
  .sol-preset-card[data-preset="gefuehrt"] { margin-bottom: 0; min-height: 0; }
  .sol-preset-ghost { font-size: 5rem; bottom: -18px; }
}

@media (prefers-reduced-motion: reduce) {
  .sol-preset-card,
  .sol-preset-card:hover,
  .sol-preset-card:focus-visible,
  .sol-preset-card[aria-pressed="true"],
  .sol-preset-card:active { transform: none !important; }
  .sol-preset-gauge i { transition-delay: 0ms !important; }
}

/* ── Options-Kacheln (Feineinstellungen) ──────────────────────────────────────
   Ersetzen die langen Volllbreiten-Zeilen durch ein kompaktes 2-Spalten-Raster.

   ⚠️ Die Wrapper-Klasse .config-option bleibt ZWINGEND erhalten. Der sichtbare
   Ein-Zustand des Toggles haengt allein an .config-option.is-active
   (style.css:6812/6816) — es gibt projektweit KEINEN :checked-Selektor dafuer,
   .sol-toggle input ist display:none. Drei Stellen setzen die Klasse ueber
   .closest('.config-option'): die initiale Verdrahtung (lehrkraft.html ~10366),
   _restoreSolCheckboxes() und updateSolNextBtn(). Ein Umbenennen des Wrappers
   haette alle drei stumm gemacht.

   .sol-opt-tile ist deshalb eine ZUSAETZLICHE Klasse, keine Ersetzung. Sie
   loest ausserdem die Inline-Styles ab, die bisher an jeder der sechs Optionen
   klebten und externes CSS wirkungslos machten.
   ──────────────────────────────────────────────────────────────────────────── */

.sol-opt-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.config-option.sol-opt-tile {
  position: relative;
  overflow: hidden;
  align-items: flex-start;
  gap: 10px;
  padding: 13px 14px;
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
}

/* Linke Akzentkante als Traeger des Zustands — Farbe ist NICHT das einzige
   Unterscheidungsmerkmal (der Toggle rechts sagt dasselbe noch einmal). */
.config-option.sol-opt-tile::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: rgba(16, 185, 129, 0.85);
  opacity: 0;
  transform: scaleY(0.4);
  transform-origin: center;
}
.config-option.sol-opt-tile.is-active::before { opacity: 1; transform: scaleY(1); }

.config-option.sol-opt-tile:hover {
  border-color: rgba(16, 185, 129, 0.28);
  background: rgba(16, 185, 129, 0.045);
}
.config-option.sol-opt-tile.is-active {
  background: rgba(16, 185, 129, 0.07);
  border-color: rgba(16, 185, 129, 0.3);
}

/* Touch-Ziel: die ganze Kachel ist das Label, mindestens 44px hoch. */
.config-option.sol-opt-tile { min-height: 64px; }

.config-option.sol-opt-tile .option-info { min-width: 0; flex: 1; }

.config-option.sol-opt-tile .option-label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.84rem;
  font-weight: 650;
  line-height: 1.25;
  color: var(--text);
}
.config-option.sol-opt-tile .option-label svg {
  flex-shrink: 0;
  color: rgba(16, 185, 129, 0.75);
}
.config-option.sol-opt-tile.is-active .option-label svg { color: rgba(52, 211, 153, 1); }

/* Typografischer Kontrast: Titel 0.84rem gegen Beschreibung 0.71rem, plus
   deutlich reduzierte Deckkraft — die Beschreibung draengt sich nicht auf. */
.config-option.sol-opt-tile .option-description {
  font-size: 0.71rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.42);
  margin-top: 3px;
}

.config-option.sol-opt-tile .option-control { flex-shrink: 0; padding-top: 2px; }

/* Die Aufbewahrungsfrist braucht die volle Breite — langer Erklaertext + Select. */
.config-option.sol-opt-tile--wide { grid-column: 1 / -1; }
.config-option.sol-opt-tile--wide .option-description { max-width: 68ch; }

@media (max-width: 720px) {
  .sol-opt-grid { grid-template-columns: 1fr; }
}

/* ── Picker-Zeilen (Klasse / Einheit) ─────────────────────────────────────────
   Die leichteste der drei Komponenten: nur Anzeige + Oeffnen. Deutlich weniger
   Gewicht als die Preset-Karten, damit die Hierarchie stimmt — die Auswahl von
   Klasse und Einheit ist eine Voraussetzung, keine paedagogische Entscheidung.
   ──────────────────────────────────────────────────────────────────────────── */
.sol-pick-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 13px;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  cursor: pointer;
}
.sol-pick-row:hover { background: rgba(255, 255, 255, 0.055); border-color: rgba(16, 185, 129, 0.3); }
.sol-pick-row:focus-within { border-color: rgba(16, 185, 129, 0.55); outline: none; }
.sol-pick-ico {
  width: 27px; height: 27px;
  border-radius: 8px;
  display: grid; place-items: center;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.45);
}
.sol-pick-label {
  font-size: 0.63rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.34);
  flex-shrink: 0;
}
.sol-pick-caret { color: rgba(255, 255, 255, 0.3); flex-shrink: 0; }
.sol-pick-row:hover .sol-pick-caret { transform: translateX(2px); color: rgba(255, 255, 255, 0.55); }

/* Das <select> IST die Zeile — keine Attrappe daneben. appearance:none nimmt ihm
   nur das Systemaussehen, nicht sein Verhalten: Tastatur, iOS-Rad und
   Android-Dialog bleiben. Der Chevron rechts ist Deko (aria-hidden). */
.sol-pick-row .sol-pick-select {
  flex: 1;
  min-width: 0;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  outline: none;
  cursor: pointer;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
  padding: 4px 0;
  min-height: 36px;          /* Zeile gesamt >= 44px durch das Padding der Row */
  text-align: right;
  direction: rtl;            /* langer Titel kuerzt links, das Wichtige bleibt sichtbar */
}
.sol-pick-row .sol-pick-select > option { direction: ltr; background: #1f2937; color: #f1f5f9; }
.sol-pick-row .sol-pick-select:disabled { color: rgba(255,255,255,0.35); cursor: not-allowed; }
.sol-pick-row:has(.sol-pick-select:disabled) { opacity: 0.62; }
.sol-pick-row:has(.sol-pick-select:disabled):hover {
  background: rgba(255,255,255,0.03);
  border-color: rgba(255,255,255,0.08);
}

/* ── Seitenübergang Moduswahl → Einstellungen (🆕 2026-09-02, Etappe 5) ───────
   Vorbild ist das im Projekt bereits vorhandene, bis heute UNGENUTZTE Paar
   pageExit (style.css:442) / viewFadeIn (:436) — gleiche Idee, hier mit der
   SOL-Standardkurve cubic-bezier(0.16,1,0.3,1) und etwas mehr Weg.

   Sequenziell, nicht ueberlappend: Beide Container sind Geschwister im
   Textfluss. Liefen sie gleichzeitig, wuerde die Seite waehrend des Uebergangs
   um die Hoehe des zweiten Blocks wachsen und wieder schrumpfen.
   ──────────────────────────────────────────────────────────────────────────── */
@keyframes solSwapOut {
  from { opacity: 1; transform: translateY(0)     scale(1);     }
  to   { opacity: 0; transform: translateY(-10px) scale(0.985); }
}
@keyframes solSwapIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0);    }
}
.sol-swap-out { animation: solSwapOut 150ms cubic-bezier(0.4, 0, 1, 1) both; pointer-events: none; }
.sol-swap-in  { animation: solSwapIn  300ms cubic-bezier(0.16, 1, 0.3, 1) both; }

/* Die drei Preset-Karten fahren gestaffelt nach — Muster .stagger-children
   (style.css:4962), hier mit der SOL-Kurve und auf drei Kinder zugeschnitten. */
.sol-preset-group.is-entering > .sol-preset-card {
  animation: solSwapIn 340ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.sol-preset-group.is-entering > .sol-preset-card:nth-child(1) { animation-delay:  70ms; }
.sol-preset-group.is-entering > .sol-preset-card:nth-child(2) { animation-delay: 140ms; }
.sol-preset-group.is-entering > .sol-preset-card:nth-child(3) { animation-delay: 210ms; }

@media (prefers-reduced-motion: reduce) {
  .sol-swap-out, .sol-swap-in,
  .sol-preset-group.is-entering > .sol-preset-card {
    animation: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   STICKY AKTIONSLEISTE — Session-Setup   (🆕 2026-09-03, Etappe 6)

   Loest die Navigations-Buttons am Seitenende ab. Vorher lag "Weiter" rund
   300 px unter der Falz (Seite ~1100 px, 13"-Laptop zeigt ~800 px).

   ⚠️ `position:sticky`, NICHT `fixed`. In dieser App scrollt nicht das Fenster,
   sondern `.main` (`.app` hat overflow:clip, sidebar-modern.css:7). Ein `fixed`
   wuerde am Viewport ankern und die Sidebar ueberlappen. Vorbild ist
   `.mobile-nav` (sidebar-modern.css:478-493) — das einzige erprobte
   Sticky-Leisten-Muster im Projekt.

   Geprueft: Zwischen der Leiste und `.main` traegt kein Vorfahre eine
   overflow-Deklaration. Sticky scheitert sonst LAUTLOS.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ⚠️ Der Selektor traegt bewusst die ID: session-desk.css:1387 setzt fuer
   #phase1NavButtons margin-top:32px und padding-top:20px. Eine reine Klassenregel
   (0-2-0) verliert gegen diese ID (1-0-0) — mit ID plus Klasse (1-1-0) gewinnt sie.
   Die padding-Kurzschreibweise unten ersetzt padding-top mit. */
#phase1NavButtons.sticky-launch, .phase-nav-buttons.sticky-launch {
  position: sticky;
  bottom: 0;
  z-index: 20;                    /* Modale liegen bei 1000-99999, Sidebar 1000 */
  margin-top: 18px;               /* war 32px + 20px padding + border */
  margin-left: -24px;             /* die 24px App-Frame-Polsterung von #phase1 */
  margin-right: -24px;            /* aufheben, damit die Leiste randlos sitzt */
  padding: 11px 24px calc(11px + env(safe-area-inset-bottom, 0px));
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(13, 20, 38, 0.92);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
  box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.05), 0 -14px 34px rgba(0, 0, 0, 0.34);
}

/* Der Zurueck-Button darf hier nicht dominieren — er ist der seltene Weg. */
#phase1NavButtons.sticky-launch .btn-phase-nav.btn-back {
  flex: 0 0 auto;
  padding: 9px 14px;
  font-size: 0.86rem;
  gap: 6px;
}

/* Weiter behaelt das Gewicht, waechst aber nicht mehr ueber die ganze Breite:
   die Chips dazwischen tragen jetzt die Zusammenfassung. */
#phase1NavButtons.sticky-launch .btn-phase-nav.btn-next {
  flex: 0 0 auto;
  padding: 11px 22px;
  font-size: 0.97rem;
  gap: 8px;
}

/* ── Chips: die Zusammenfassung der Session ───────────────────────────────── */
.launch-chips {
  flex: 1 1 200px;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.launch-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.62);
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.09);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.launch-chip svg { flex-shrink: 0; opacity: 0.75; }
.launch-chip > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Der gewaehlte Fuehrungsgrad — traegt die Modusfarbe. */
.launch-chip.is-mode {
  color: #6ee7b7;
  background: rgba(16, 185, 129, 0.13);
  border-color: rgba(16, 185, 129, 0.34);
}
/* „Eigene Einstellung" bewusst NEUTRAL statt in Modusfarbe: Es ist kein
   ausgezeichneter Zustand, sondern schlicht keiner der drei. Muster aus dem
   aelteren Mockup (.chip.hot.is-custom). */
.launch-chip.is-mode.is-custom {
  color: rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.13);
}

/* DER SPERRGRUND. Bisher stand er oben in der Workflow-Pille, rund 900 px vom
   Button entfernt — jetzt daneben. Amber, weil es eine Bedingung ist, kein
   Fehler; dasselbe Amber wie der Stations-Hinweis darueber. */
.launch-chip.is-blocker {
  color: #fbbf24;
  background: rgba(251, 191, 36, 0.12);
  border-color: rgba(251, 191, 36, 0.32);
}

/* ⚠️ Die negativen Seitenmargins oben heben die App-Frame-Polsterung von #phase1 auf,
   damit die Leiste randlos sitzt. Diese Polsterung ist aber breakpoint-abhaengig
   (lehrkraft.html:3703-3718): 24px ab 1101px, 12px zwischen 769 und 1100px, 0 darunter.
   Ohne die beiden folgenden Korrekturen stuende die Leiste seitlich ueber und erzeugte
   horizontales Scrollen — genau das, was QA-Punkt 10 ausschliesst. */
@media (min-width: 769px) and (max-width: 1100px) {
  #phase1NavButtons.sticky-launch, .phase-nav-buttons.sticky-launch {
    margin-left: -12px; margin-right: -12px;
    padding-left: 12px; padding-right: 12px;
  }
}

@media (max-width: 640px) {
  /* Mobil traegt „Weiter" die volle Breite (Muster aus Mockup v2), die Chips
     ruecken darueber. Zurueck bleibt kompakt daneben. */
  #phase1NavButtons.sticky-launch, .phase-nav-buttons.sticky-launch {
    margin-left: 0; margin-right: 0;
    gap: 8px; padding-left: 14px; padding-right: 14px;
  }
  #phase1NavButtons.sticky-launch .launch-chips { order: -1; flex: 1 1 100%; }
  #phase1NavButtons.sticky-launch .btn-phase-nav.btn-next { flex: 1 1 auto; justify-content: center; }
  #phase1NavButtons.sticky-launch .btn-back .launch-back-text { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SCHRITTANZEIGE IN DER TOPBAR   (🆕 2026-09-03, Etappe 6 Schritt 3)

   Ersetzt die Workflow-Pills, die als eigene Leiste ~115 px verbrauchten —
   mehr als die Topbar selbst, fuer zwei Ziffern und zwei Labels. Dominic:
   "Sie brauchen bestimmt knapp 20% des Bildschirms."

   Hier kostet die Anzeige NULL zusaetzliche Hoehe: Der .topbar-spacer war
   ohnehin leer und diente nur dazu, die rechte Gruppe nach aussen zu druecken.

   Als <div role="button">, nicht <button>: Die globale Button-Regel
   (style.css:345) wuerde min-height/min-width 48px erzwingen und die
   52px-Topbar sprengen.
   ═══════════════════════════════════════════════════════════════════════════ */

.topbar-spacer { display: flex; align-items: center; justify-content: center; min-width: 0; }

.topbar-steps {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  max-width: 100%;
}

.tstep {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  padding: 4px 11px 4px 5px;
  border-radius: 999px;
  cursor: pointer;
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
}
.tstep:hover { background: rgba(255, 255, 255, 0.05); color: var(--text-secondary); }
.tstep:focus-visible { outline: 2px solid rgba(99, 102, 241, 0.8); outline-offset: 2px; }

.tstep-num {
  width: 19px; height: 19px;
  flex-shrink: 0;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 0.62rem; font-weight: 800;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--muted);
}
.tstep-label {
  font-size: 0.74rem; font-weight: 600;
  white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}

/* Der Statustext trug frueher den Sperrgrund allein — jetzt steht der vollstaendige
   Text im Chip der Aktionsleiste, direkt neben dem gesperrten Button. Hier bleibt er
   als Kurzform und wird hart gedeckelt: Die Topbar ist flex-wrap:nowrap, und der
   laengste Text ("Einheit ohne Stationen") wuerde sie sonst auseinanderdruecken. */
.tstep-status {
  font-size: 0.66rem;
  color: rgba(255, 255, 255, 0.38);
  max-width: 12ch;
  white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
  flex-shrink: 1; min-width: 0;
}

.tstep-line {
  width: 26px; height: 1px;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.14);
}

/* Aktiver Schritt — Phasenfarben wie in der alten Leiste (session-desk.css:186-188):
   Schritt 1 Blau, Schritt "Start" Emerald. */
.tstep.active { background: rgba(255, 255, 255, 0.055); color: var(--text); }
.tstep.active .tstep-label { color: var(--text); }
.tstep[data-phase="1"].active .tstep-num {
  background: #3b82f6; border-color: #3b82f6; color: #fff;
  box-shadow: 0 0 12px rgba(59, 130, 246, 0.45);
}
.tstep[data-phase="3"].active .tstep-num {
  background: #10b981; border-color: #10b981; color: #06281d;
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.45);
}

/* Erledigt — Haekchen statt Ziffer, wie bei den alten Pills */
.tstep.completed .tstep-num { color: transparent; position: relative; }
.tstep.completed .tstep-num::after {
  content: '✓';
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-size: 0.66rem; font-weight: 900;
  color: #10b981;
}
.tstep[data-phase="1"].completed .tstep-num {
  background: rgba(16, 185, 129, 0.18); border-color: rgba(16, 185, 129, 0.45);
}
.tstep.completed.active .tstep-num::after { color: #fff; }

/* Ab hier wird es in der Topbar eng: erst der Statustext, dann die Labels. */
@media (max-width: 1100px) {
  .tstep-status { display: none; }
}
@media (max-width: 820px) {
  .tstep-label { display: none; }
  .tstep { padding: 4px 5px; }
  .tstep-line { width: 16px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SETUP-STAPEL — schwebende Karten statt einer Kiste   (🆕 2026-09-03, Etappe 7)

   Dominic: "In den Mockups fuehlt es sich besser an, da zwischen den Kacheln
   und Abschnitten Luft ist. Es ist kein zusammenhaengendes Feld." — Genau das
   war der Fehler: Der Inhalt des Mockups wurde uebernommen, aber alles in EINE
   .card.card-glass gesteckt und nur durch Innenabstaende getrennt. Faecher in
   einer Kiste statt schwebender Elemente.

   Der Container bleibt als KNOTEN bestehen (solSwapViews() braucht genau einen
   Knoten fuer die Ein-/Ausblend-Animation und sucht darin .sol-preset-group),
   verliert aber seine Karten-Klassen. Damit werden die Kinder automatisch zu
   eigenstaendigen Karten — ohne dass eine einzige JS-Stelle angefasst wird.

   Mit entfernt: .empty-tasks-state. Deren `text-align:center` vererbte sich auf
   ALLE Nachfahren (daher der zentrierte Foto-Erklaertext), und ihr `padding:0`
   war der Grund, warum jedes Kind sein eigenes 24er-Seitenpadding trug —
   zusaetzlich zum App-Frame-Padding von #phase1. Der Masterprompt vom August
   (MASTERPROMPT-QRENA-DESIGN-MIGRATION.md:212) fordert das bereits.

   Abstaende nach dem Mockup: innen 12-16px statt 24-36, zwischen den Bloecken
   14px statt 0. Vorbild im Bestand: .schreibtisch-list (style.css:5441).
   ═══════════════════════════════════════════════════════════════════════════ */

.setup-stack {
  position: relative;
  /* ⚠️ KEIN `display:flex` mit `gap` — das war die erste Fassung und wäre WIRKUNGSLOS
     gewesen. Beide Stellen, die diesen Container sichtbar schalten, setzen
     `style.display = 'block'` als INLINE-Style (updateTasksOverview() für
     #emptyTasksState, solSwapViews() für #solConfigSection). Inline schlägt jede
     Klassenregel ohne !important — in genau dem Moment, in dem die Fläche sichtbar
     wird, kippt display von flex auf block und der gap fällt weg. Die Karten haetten
     wieder aneinandergeklebt.
     Vom wirkungspruefer gefunden, bevor es deployt wurde.

     Statt das mit !important zu erzwingen oder die JS-Aufrufer umzustellen: eine
     Abstandsform, die in BEIDEN Anzeigemodi trägt. Geschwister-Margin funktioniert
     unter block genauso wie unter flex — robust durch Konstruktion statt durch
     Disziplin. */
}
.setup-stack > * + * { margin-top: 14px; }

/* Ambient-Glow HINTER dem Stapel, nicht in einer Karte — verankert die
   schwebenden Elemente auf dem Seitenhintergrund. Muster .schreibtisch-list::before
   (style.css:5458). Kostet null Hoehe. */
.setup-stack::before {
  content: '';
  position: absolute;
  top: -30px; left: 4%;
  width: 320px; height: 300px;
  background: radial-gradient(circle, rgba(16, 185, 129, 0.09) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}
#emptyTasksState.setup-stack::before {
  background: radial-gradient(circle, rgba(59, 130, 246, 0.09) 0%, transparent 70%);
}
.setup-stack > * { position: relative; z-index: 1; }

/* Jeder direkte Block wird zur eigenstaendigen Karte. Eine Kartenebene, nicht
   zwei ineinander — deshalb bewusst schlichter als .card-glass. */
.setup-card {
  background: rgba(17, 24, 39, 0.72);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 16px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.26);
  overflow: hidden;
}

/* Abschnitts-Ueberschrift NACKT auf dem Hintergrund, ausserhalb der Karte —
   Mockup-Muster .sec-head (qrena-session-setup-v3.html:114). */
.setup-sechead {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 2px 0 -6px 2px;   /* negativer Bottom: der gap des Stapels traegt den Abstand */
}
.setup-sechead h3 {
  margin: 0;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(52, 211, 153, 0.7);
}
#emptyTasksState .setup-sechead h3 { color: rgba(96, 165, 250, 0.7); }
.setup-sechead span {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.3);
}

/* ── Klasse/Einheit als zwei Kacheln im Kopfbereich (🆕 2026-09-03, Etappe 7) ──
   Dominic: "Warum sind sie nicht als Kachel designed und nebeneinander? Nimmt
   deutlich weniger Platz weg!" — Aus zwei gestapelten Zeilen (~144 px) werden
   zwei Kacheln nebeneinander (~72 px), und sie sitzen im Kopf statt in einem
   eigenen Abschnitt: ein Block weniger.

   Die Zweizeiligkeit entsteht per flex-wrap, OHNE Markup-Aenderung — Label und
   Icon oben, das <select> darunter ueber die volle Kachelbreite. Das <select>
   bleibt damit das Bedienelement (IDs und onchange unveraendert), was seit
   Etappe 5 die bewusste Entscheidung ist: Ein natives Select laesst sich per JS
   nicht aufklappen, eine Attrappe waere eine zweite Zustandsquelle.
   ──────────────────────────────────────────────────────────────────────────── */
.sol-pick-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

.sol-pick-grid .sol-pick-row {
  flex-wrap: wrap;
  gap: 6px;
  padding: 7px 10px 8px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.045);
  border-color: rgba(255, 255, 255, 0.09);
}
.sol-pick-grid .sol-pick-ico { width: 22px; height: 22px; border-radius: 7px; }
.sol-pick-grid .sol-pick-label { font-size: 0.58rem; }
.sol-pick-grid .sol-pick-caret { margin-left: auto; order: 2; }
.sol-pick-grid .sol-pick-select {
  order: 3;
  flex: 1 1 100%;
  text-align: left;
  direction: ltr;          /* in der Zeile war rtl noetig, in der Kachel nicht mehr */
  font-size: 0.84rem;
  min-height: 22px;
  padding: 0;
}
@media (max-width: 560px) { .sol-pick-grid { grid-template-columns: 1fr; } }

/* ── Die restlichen Bloecke als eigenstaendige Karten ─────────────────────── */
#solSetupEmpty.setup-card   { padding: 22px 18px; }
#solPhase2Settings.setup-card { padding: 12px 14px 14px; }

/* Die Preset-Karten SIND die Karten — sie brauchen keine Huelle drumherum.
   Der Abschnitt traegt deshalb nur noch die Ueberschrift und das Raster. */
#solPresetSection { padding: 0; background: none; border: 0; box-shadow: none; }

/* ── Fragezeichen fuer lange Erklaerungen (🆕 2026-09-03, Etappe 7) ────────────
   Fuer Texte, die nur beantworten "was passiert da eigentlich" und die Kachel
   sonst um ein Vielfaches hoeher machen. Natives <details>: Die globale
   !important-Transition (lehrkraft.html:238-246) ueberschreibt jede eigene
   transition, ein selbstgebautes Aufklappen wuerde hart springen. Der im
   Projekt vorhandene [data-tooltip]-Mechanismus scheidet aus — er hat
   white-space:nowrap (bei 406 Zeichen eine Zeile ueber den halben Bildschirm)
   und reagiert nur auf :hover, nicht auf Touch.
   ──────────────────────────────────────────────────────────────────────────── */
.opt-why { display: inline-block; margin-left: 6px; vertical-align: middle; }
.opt-why > summary {
  list-style: none;
  cursor: pointer;
  width: 22px; height: 22px;
  display: grid; place-items: center;
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.42);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.opt-why > summary::-webkit-details-marker { display: none; }
.opt-why > summary:hover { color: #60a5fa; border-color: rgba(59, 130, 246, 0.4); background: rgba(59, 130, 246, 0.12); }
.opt-why > summary:focus-visible { outline: 2px solid rgba(59, 130, 246, 0.8); outline-offset: 2px; }
.opt-why[open] > summary { color: #60a5fa; border-color: rgba(59, 130, 246, 0.45); background: rgba(59, 130, 246, 0.14); }
.opt-why .option-description {
  display: block;
  margin: 9px 0 0;
  max-width: 62ch;
  text-align: left;
}
/* Das Fragezeichen sitzt in der Label-Zeile; der Text darunter soll die volle
   Kachelbreite nutzen, nicht die Inline-Breite des <details>. */
.config-option.sol-opt-tile:has(.opt-why[open]) .opt-why { display: block; margin-left: 0; }
.config-option.sol-opt-tile:has(.opt-why[open]) .opt-why > summary { margin-left: auto; }