/* ============================================================
   ADK App – Haupt-Stylesheet
   Optimiert für iPad Querformat + Smartphone
   ============================================================ */

/* ── CSS-Variablen ─────────────────────────────────────────── */
:root {
  /* Grundfarben (analog zur physischen ADK) */
  --grundstufe:      #F5C242;
  --grundstufe-dark: #d4a420;
  --aufbaustufe:     #E07B39;
  --aufbaustufe-dark:#c0621e;
  --leistungsstufe:  #C94040;
  --leistungsstufe-dark: #a32e2e;
  --reife:           #6C757D;
  --reife-dark:      #495057;
  --sonder:          #4A90D9;
  --sonder-dark:     #2c70b8;

  /* App-Farben */
  --primary:         #1A2B4A;
  --primary-light:   #243a63;
  --accent:          #4A90D9;
  --success:         #28A745;
  --success-light:   #d4edda;
  --warning:         #ffc107;
  --warning-light:   #fff3cd;
  --danger:          #dc3545;
  --danger-light:    #f8d7da;
  --muted:           #6c757d;
  --border:          #dee2e6;
  --bg:              #f4f6f9;
  --card-bg:         #ffffff;

  /* Typography */
  --font:            'Inter', system-ui, -apple-system, sans-serif;
  --font-size:       16px;
  --line-height:     1.5;

  /* Spacing */
  --gap-xs: 4px;
  --gap-sm: 8px;
  --gap:    16px;
  --gap-lg: 24px;
  --gap-xl: 32px;

  /* Radii */
  --radius-sm: 6px;
  --radius:    10px;
  --radius-lg: 16px;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0,0,0,.12);
  --shadow:    0 2px 8px rgba(0,0,0,.15);
  --shadow-lg: 0 8px 24px rgba(0,0,0,.18);

  /* Sidebar */
  --sidebar-width: 260px;
  --header-height: 60px;
  --touch-target:  44px;

  /* Transitions */
  --transition: 0.18s ease;
}

/* ── Reset ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: var(--font-size); -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: #212529;
  line-height: var(--line-height);
  min-height: 100vh;
  overflow-x: hidden;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; }
ul, ol { list-style: none; }

/* ── Layout: App-Shell ─────────────────────────────────────── */
.app-shell {
  display: grid;
  grid-template-rows: var(--header-height) 1fr;
  grid-template-columns: var(--sidebar-width) 1fr;
  grid-template-areas:
    "header header"
    "sidebar main";
  min-height: 100vh;
}

/* ── Header ────────────────────────────────────────────────── */
.app-header {
  grid-area: header;
  background: var(--primary);
  color: #fff;
  display: flex;
  align-items: center;
  padding: 0 var(--gap);
  gap: var(--gap);
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: var(--shadow);
}
.app-header .logo {
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: .03em;
  color: #fff;
  display: flex;
  align-items: center;
  gap: var(--gap-sm);
  flex-shrink: 0;
}
.app-header .logo .logo-icon {
  width: 36px;
  height: 36px;
  background: var(--accent);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
}
.header-center {
  flex: 1;
  text-align: center;
  font-size: .9rem;
  opacity: .85;
}
.header-actions {
  display: flex;
  align-items: center;
  gap: var(--gap-sm);
  flex-shrink: 0;
}
.header-btn {
  background: rgba(255,255,255,.15);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  cursor: pointer;
  font-size: .85rem;
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: var(--touch-target);
  transition: background var(--transition);
}
.header-btn:hover { background: rgba(255,255,255,.25); }
.header-btn.btn-pdf { background: var(--danger); }
.header-btn.btn-pdf:hover { background: #b02a37; }

/* ── Sidebar ────────────────────────────────────────────────── */
.app-sidebar {
  grid-area: sidebar;
  background: var(--primary);
  color: #fff;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  border-right: 1px solid var(--primary-light);
}
.sidebar-search {
  padding: var(--gap);
  border-bottom: 1px solid var(--primary-light);
}
.sidebar-search input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.1);
  color: #fff;
  font-size: .9rem;
  outline: none;
}
.sidebar-search input::placeholder { color: rgba(255,255,255,.5); }
.sidebar-search input:focus { border-color: var(--accent); background: rgba(255,255,255,.15); }

.sidebar-list {
  flex: 1;
  overflow-y: auto;
  padding: var(--gap-sm);
}
.sidebar-item {
  display: flex;
  align-items: center;
  gap: var(--gap-sm);
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--transition);
  min-height: var(--touch-target);
  margin-bottom: 2px;
  text-decoration: none;
  color: rgba(255,255,255,.85);
}
.sidebar-item:hover { background: rgba(255,255,255,.1); color: #fff; text-decoration: none; }
.sidebar-item.active { background: var(--accent); color: #fff; }
.sidebar-item .item-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255,255,255,.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: .85rem;
  flex-shrink: 0;
}
.sidebar-item.active .item-avatar { background: rgba(255,255,255,.3); }
.sidebar-item .item-info { flex: 1; min-width: 0; }
.sidebar-item .item-name { font-weight: 600; font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-item .item-progress {
  font-size: .75rem;
  opacity: .7;
  margin-top: 2px;
}
.sidebar-footer {
  padding: var(--gap);
  border-top: 1px solid var(--primary-light);
}
.btn-new-schueler {
  width: 100%;
  background: var(--success);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  padding: 10px;
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--touch-target);
  transition: background var(--transition);
  text-decoration: none;
}
.btn-new-schueler:hover { background: #218838; color: #fff; text-decoration: none; }

/* ── Main Content ────────────────────────────────────────────── */
.app-main {
  grid-area: main;
  overflow-y: auto;
  padding: var(--gap);
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}

/* ── Karten ──────────────────────────────────────────────────── */
.card {
  background: var(--card-bg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.card-header {
  padding: 14px var(--gap);
  display: flex;
  align-items: center;
  gap: var(--gap-sm);
  font-weight: 700;
  font-size: .95rem;
  color: #fff;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.card-header.grundstufe     { background: var(--grundstufe);    color: #333; }
.card-header.aufbaustufe    { background: var(--aufbaustufe); }
.card-header.leistungsstufe { background: var(--leistungsstufe); }
.card-header.reife          { background: var(--reife); }
.card-header.sonder         { background: var(--sonder); }
.card-header.dark           { background: var(--primary); }
.card-header.success        { background: var(--success); }
.card-header .progress-badge {
  margin-left: auto;
  background: rgba(255,255,255,.3);
  padding: 2px 10px;
  border-radius: 20px;
  font-size: .8rem;
  font-weight: 600;
}
.card-body {
  padding: var(--gap);
}

/* ── Tabs ──────────────────────────────────────────────────── */
.tabs {
  display: flex;
  gap: 4px;
  border-bottom: 2px solid var(--border);
  margin-bottom: var(--gap);
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab-btn {
  padding: 10px 16px;
  border: none;
  background: none;
  cursor: pointer;
  font-size: .9rem;
  font-weight: 600;
  color: var(--muted);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  white-space: nowrap;
  min-height: var(--touch-target);
  transition: color var(--transition), background var(--transition);
  position: relative;
  flex-shrink: 0;
}
.tab-btn:hover { color: var(--primary); background: var(--bg); }
.tab-btn.active { color: var(--primary); }
.tab-btn.active::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0; right: 0;
  height: 2px;
  background: var(--accent);
}
.tab-btn.grundstufe.active::after     { background: var(--grundstufe-dark); }
.tab-btn.aufbaustufe.active::after    { background: var(--aufbaustufe); }
.tab-btn.leistungsstufe.active::after { background: var(--leistungsstufe); }

.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* ── ADK Checkbox-Grid ──────────────────────────────────────── */
.checkbox-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--gap-sm);
}
.check-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition);
  min-height: var(--touch-target);
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.check-item:hover { border-color: var(--accent); background: #f0f7ff; }
.check-item.checked { border-color: var(--success); background: var(--success-light); }
.check-item.checked .check-box { background: var(--success); border-color: var(--success); }
.check-item.checked .check-box::after { opacity: 1; }

.check-box {
  width: 24px;
  height: 24px;
  border: 2px solid var(--border);
  border-radius: 4px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition);
  position: relative;
}
.check-box::after {
  content: '✓';
  color: #fff;
  font-size: .9rem;
  font-weight: 700;
  opacity: 0;
  transition: opacity var(--transition);
}

.check-label {
  font-size: .88rem;
  font-weight: 500;
  flex: 1;
  line-height: 1.3;
}

/* Farb-Varianten für Checkboxen je Stufe */
.check-item.grundstufe:hover  { border-color: var(--grundstufe-dark); background: #fffbee; }
.check-item.grundstufe.checked { border-color: var(--grundstufe-dark); background: #fef9e3; }
.check-item.grundstufe.checked .check-box { background: var(--grundstufe-dark); border-color: var(--grundstufe-dark); }

.check-item.aufbaustufe:hover  { border-color: var(--aufbaustufe-dark); background: #fff5ee; }
.check-item.aufbaustufe.checked { border-color: var(--aufbaustufe); background: #fef0e3; }
.check-item.aufbaustufe.checked .check-box { background: var(--aufbaustufe); border-color: var(--aufbaustufe); }

.check-item.leistungsstufe:hover  { border-color: var(--leistungsstufe-dark); background: #fff0f0; }
.check-item.leistungsstufe.checked { border-color: var(--leistungsstufe); background: #fde8e8; }
.check-item.leistungsstufe.checked .check-box { background: var(--leistungsstufe); border-color: var(--leistungsstufe); }

/* ── Section-Titel ──────────────────────────────────────────── */
.section-title {
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  margin-bottom: var(--gap-sm);
  margin-top: var(--gap);
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border);
}
.section-title:first-child { margin-top: 0; }

/* ── Fortschrittsbalken ─────────────────────────────────────── */
.progress-wrap {
  background: var(--bg);
  border-radius: 20px;
  height: 8px;
  overflow: hidden;
}
.progress-bar {
  height: 100%;
  border-radius: 20px;
  background: var(--success);
  transition: width .4s ease;
}
.progress-bar.grundstufe     { background: var(--grundstufe-dark); }
.progress-bar.aufbaustufe    { background: var(--aufbaustufe); }
.progress-bar.leistungsstufe { background: var(--leistungsstufe); }
.progress-bar.sonder         { background: var(--sonder); }

.progress-label {
  display: flex;
  justify-content: space-between;
  font-size: .8rem;
  color: var(--muted);
  margin-top: 4px;
}

/* ── Sonderfahrten-Zähler ───────────────────────────────────── */
.sonder-counter {
  display: flex;
  align-items: center;
  gap: var(--gap-sm);
  padding: var(--gap);
  border: 2px solid var(--border);
  border-radius: var(--radius);
}
.sonder-counter.ok { border-color: var(--success); background: var(--success-light); }
.sonder-counter.warn { border-color: var(--warning); background: var(--warning-light); }
.counter-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid var(--border);
  background: var(--card-bg);
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition);
  flex-shrink: 0;
}
.counter-btn:hover { border-color: var(--accent); color: var(--accent); }
.counter-value {
  font-size: 1.5rem;
  font-weight: 700;
  min-width: 2ch;
  text-align: center;
}
.counter-info { flex: 1; }
.counter-info .counter-label { font-weight: 600; font-size: .9rem; }
.counter-info .counter-sub { font-size: .8rem; color: var(--muted); }

/* ── Stundenraster-Tabelle ──────────────────────────────────── */
.stunden-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .88rem;
}
.stunden-table th {
  background: var(--bg);
  padding: 8px 10px;
  text-align: left;
  font-weight: 600;
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted);
  border-bottom: 2px solid var(--border);
}
.stunden-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.stunden-table tr:last-child td { border-bottom: none; }
.stunden-table .badge-bewertung {
  padding: 3px 8px;
  border-radius: 12px;
  font-size: .78rem;
  font-weight: 600;
}
.badge-gut        { background: var(--success-light); color: #155724; }
.badge-ok         { background: var(--warning-light); color: #856404; }
.badge-wiederholen { background: var(--danger-light);  color: #721c24; }

/* Noten-Badges (1–5) */
.badge-note-1 { background: #d4edda; color: #155724; }
.badge-note-2 { background: #cce5ff; color: #004085; }
.badge-note-3 { background: var(--warning-light); color: #856404; }
.badge-note-4 { background: #ffe5b4; color: #7c4b00; }
.badge-note-5 { background: var(--danger-light);  color: #721c24; }

/* Flatpickr: Alt-Input soll wie normales Form-Control aussehen */
.flatpickr-input.form-control[readonly] { background: var(--card-bg); cursor: pointer; }
input.flatpickr-input[type="hidden"]    { display: none; }
.flatpickr-alt-input {
  width: 100%;
  padding: 10px 12px;
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: var(--font-size);
  font-family: var(--font);
  background: var(--card-bg);
  color: #212529;
  outline: none;
  transition: border-color var(--transition);
  min-height: var(--touch-target);
  cursor: pointer;
}
.flatpickr-alt-input:focus { border-color: var(--accent); }

/* ── Buttons ────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 20px;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: .9rem;
  font-weight: 600;
  min-height: var(--touch-target);
  transition: all var(--transition);
  text-decoration: none;
}
.btn-primary   { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-light); color: #fff; }
.btn-success   { background: var(--success); color: #fff; }
.btn-success:hover { background: #218838; color: #fff; }
.btn-danger    { background: var(--danger); color: #fff; }
.btn-danger:hover { background: #b02a37; color: #fff; }
.btn-secondary { background: var(--bg); color: var(--primary); border: 1px solid var(--border); }
.btn-secondary:hover { background: var(--border); }
.btn-accent    { background: var(--accent); color: #fff; }
.btn-accent:hover { background: var(--sonder-dark); color: #fff; }
.btn-sm { padding: 6px 12px; font-size: .82rem; min-height: 34px; }
.btn-lg { padding: 14px 28px; font-size: 1rem; }
.btn:disabled { opacity: .55; cursor: not-allowed; }

/* ── Formulare ──────────────────────────────────────────────── */
.form-group {
  margin-bottom: var(--gap);
}
.form-label {
  display: block;
  font-weight: 600;
  font-size: .88rem;
  margin-bottom: 6px;
  color: #495057;
}
.form-label .required { color: var(--danger); margin-left: 2px; }
.form-control {
  width: 100%;
  padding: 10px 12px;
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: var(--font-size);
  font-family: var(--font);
  background: var(--card-bg);
  color: #212529;
  outline: none;
  transition: border-color var(--transition);
  min-height: var(--touch-target);
}
.form-control:focus { border-color: var(--accent); }
.form-control.is-invalid { border-color: var(--danger); }
.form-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--gap);
}
.form-hint { font-size: .8rem; color: var(--muted); margin-top: 4px; }
.form-error { font-size: .82rem; color: var(--danger); margin-top: 4px; }

/* ── Toggle (Sehilfe, Status) ───────────────────────────────── */
.toggle-wrap {
  display: flex;
  align-items: center;
  gap: var(--gap-sm);
}
.toggle {
  position: relative;
  width: 44px;
  height: 24px;
}
.toggle input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
  position: absolute;
  inset: 0;
  background: var(--border);
  border-radius: 24px;
  cursor: pointer;
  transition: background var(--transition);
}
.toggle-slider::before {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  left: 3px;
  top: 3px;
  background: #fff;
  border-radius: 50%;
  transition: transform var(--transition);
  box-shadow: var(--shadow-sm);
}
.toggle input:checked + .toggle-slider { background: var(--success); }
.toggle input:checked + .toggle-slider::before { transform: translateX(20px); }

/* ── Toast-Nachrichten ──────────────────────────────────────── */
.toast-container {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: var(--gap-sm);
  pointer-events: none;
}
.toast {
  background: #212529;
  color: #fff;
  padding: 12px 18px;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  font-size: .88rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 320px;
  pointer-events: auto;
  animation: slideIn .25s ease;
}
.toast.success { background: var(--success); }
.toast.error   { background: var(--danger); }
.toast.warning { background: #856404; }
@keyframes slideIn {
  from { transform: translateX(100%); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}
@keyframes slideOut {
  from { transform: translateX(0);    opacity: 1; }
  to   { transform: translateX(110%); opacity: 0; }
}
.toast.hiding { animation: slideOut .25s ease forwards; }

/* ── Modal ──────────────────────────────────────────────────── */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 1000;
  align-items: center;
  justify-content: center;
  padding: var(--gap);
  cursor: pointer; /* iOS: backdrop tap to close */
}
.modal-overlay .modal { cursor: default; }
.modal-overlay.open { display: flex; }
.modal {
  background: var(--card-bg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  overflow-y: auto;
  animation: modalIn .2s ease;
}
@keyframes modalIn {
  from { transform: scale(.95) translateY(-10px); opacity: 0; }
  to   { transform: scale(1) translateY(0); opacity: 1; }
}
.modal-header {
  padding: var(--gap);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 700;
}
.modal-close {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.3rem;
  color: var(--muted);
  min-width: var(--touch-target);
  min-height: var(--touch-target);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  transition: background var(--transition);
}
.modal-close:hover { background: var(--bg); color: var(--danger); }
.modal-body    { padding: var(--gap); }
.modal-footer  { padding: var(--gap); border-top: 1px solid var(--border); display: flex; gap: var(--gap-sm); justify-content: flex-end; }

/* ── Offline-Banner ─────────────────────────────────────────── */
.offline-banner {
  display: none;
  position: fixed;
  top: var(--header-height);
  left: 0;
  right: 0;
  background: var(--warning);
  color: #333;
  text-align: center;
  padding: 8px;
  font-size: .88rem;
  font-weight: 600;
  z-index: 99;
}
.offline-banner.visible { display: block; }

/* ── App-Installations-Banner ───────────────────────────────── */
.install-banner {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--card-bg, #fff);
  border-top: 2px solid var(--success, #28a745);
  padding: 10px var(--gap, 1rem);
  z-index: 200;
  box-shadow: 0 -4px 16px rgba(0,0,0,.15);
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-sm, .5rem);
  flex-wrap: wrap;
}
.install-banner-text { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: .9rem; }
.install-banner-text i { color: var(--success, #28a745); font-size: 1.2rem; }
.install-banner-actions { display: flex; gap: var(--gap-sm, .5rem); }

/* ── iOS-Installations-Hinweis ──────────────────────────────── */
.install-banner-ios {
  display: none;
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 2rem);
  max-width: 420px;
  background: var(--card-bg, #fff);
  border: 2px solid var(--success, #28a745);
  border-radius: 12px;
  padding: 14px 16px 16px;
  z-index: 200;
  box-shadow: 0 4px 24px rgba(0,0,0,.22);
  font-size: .88rem;
  line-height: 1.6;
}
.install-banner-ios-content { padding-right: 20px; }
.ios-share-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--primary, #1A2B4A);
  color: #fff;
  border-radius: 6px;
  width: 22px;
  height: 22px;
  font-size: .75rem;
  vertical-align: middle;
  margin: 0 2px;
}
.install-banner-ios-close {
  position: absolute;
  top: 8px;
  right: 10px;
  background: none;
  border: none;
  font-size: 1.1rem;
  cursor: pointer;
  color: var(--muted, #888);
  line-height: 1;
  padding: 2px 4px;
}
/* Pfeil nach unten – weist auf Safari-Toolbar hin */
.install-banner-ios-arrow {
  position: absolute;
  bottom: -12px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-top: 12px solid var(--success, #28a745);
}

/* ── Auto-Save Indicator ────────────────────────────────────── */
.save-indicator {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .8rem;
  color: var(--muted);
  padding: 4px 10px;
  border-radius: 20px;
  background: var(--bg);
  transition: all var(--transition);
}
.save-indicator.saving { color: var(--accent); }
.save-indicator.saved  { color: var(--success); }
.save-indicator.error  { color: var(--danger); }
@keyframes spin { to { transform: rotate(360deg); } }
.save-indicator.saving .fa-circle-notch { animation: spin .8s linear infinite; }

/* ── Dashboard-Kacheln ──────────────────────────────────────── */
.schueler-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--gap);
}
.schueler-card {
  background: var(--card-bg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--gap);
  cursor: pointer;
  transition: box-shadow var(--transition), transform var(--transition);
  text-decoration: none;
  color: inherit;
  display: block;
}
.schueler-card:hover {
  box-shadow: var(--shadow);
  transform: translateY(-2px);
  text-decoration: none;
  color: inherit;
}
.schueler-card .card-name {
  font-weight: 700;
  font-size: 1.05rem;
  margin-bottom: 2px;
}
.schueler-card .card-sub {
  font-size: .82rem;
  color: var(--muted);
  margin-bottom: var(--gap-sm);
}
.schueler-card .card-progress-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.progress-row-item {
  display: flex;
  align-items: center;
  gap: var(--gap-sm);
}
.progress-row-item .label { font-size: .75rem; color: var(--muted); min-width: 85px; }
.progress-row-item .bar-wrap { flex: 1; height: 6px; background: var(--bg); border-radius: 10px; overflow: hidden; }
.progress-row-item .bar-fill { height: 100%; border-radius: 10px; background: var(--success); transition: width .3s; }
.progress-row-item .pct { font-size: .75rem; color: var(--muted); min-width: 30px; text-align: right; }

/* ── Ampel-Status ───────────────────────────────────────────── */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: .78rem;
  font-weight: 600;
}
.status-aktiv     { background: var(--success-light); color: #155724; }
.status-archiviert { background: var(--bg); color: var(--muted); }
.status-bestanden  { background: #cce5ff; color: #004085; }

/* ── Responsive: iPad Landscape & großes Tablet (1024px+) ───── */
@media (min-width: 1025px) {
  :root {
    --sidebar-width:  280px;
    --header-height:  64px;
  }
  .checkbox-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
  .app-main { padding: var(--gap-lg); gap: var(--gap-lg); }
}

/* ── Responsive: iPad Portrait & kleines Tablet (≤1024px) ────── */
/* Sidebar wird zum Overlay → volle Fläche für Inhalt           */
@media (max-width: 1024px) {
  .app-shell {
    grid-template-columns: 1fr;
    grid-template-areas:
      "header"
      "main";
  }
  .app-sidebar {
    display: none;
    position: fixed;
    top: var(--header-height);
    left: 0;
    bottom: 0;
    width: 300px;
    z-index: 90;
    box-shadow: var(--shadow-lg);
  }
  .app-sidebar.open { display: flex; }
  .sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 89;
  }
  .sidebar-overlay.active { display: block; }

  .checkbox-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
  .schueler-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
  .app-main { padding: var(--gap); }
}

/* ── Responsive: Smartphone (≤600px) ────────────────────────── */
@media (max-width: 600px) {
  .app-sidebar { width: 280px; }
  .checkbox-grid { grid-template-columns: 1fr 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .schueler-grid { grid-template-columns: 1fr; }
  .app-main { padding: var(--gap-sm); gap: var(--gap-sm); }
  .header-actions .header-btn span { display: none; }
}

/* ── Responsive: Sehr kleines Smartphone (≤380px) ───────────── */
@media (max-width: 380px) {
  .checkbox-grid { grid-template-columns: 1fr; }
}

/* ── Utility-Klassen ─────────────────────────────────────────── */
.d-flex      { display: flex; }
.align-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-sm      { gap: var(--gap-sm); }
.gap         { gap: var(--gap); }
.mt-sm       { margin-top: var(--gap-sm); }
.mt          { margin-top: var(--gap); }
.mb-sm       { margin-bottom: var(--gap-sm); }
.mb          { margin-bottom: var(--gap); }
.text-muted  { color: var(--muted); }
.text-sm     { font-size: .85rem; }
.fw-bold     { font-weight: 700; }
.text-center { text-align: center; }
.text-danger { color: var(--danger); }
.text-success { color: var(--success); }
.w-100       { width: 100%; }
.hidden      { display: none !important; }
.sr-only     { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }