/* ── Reset & Base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --primary: #2563eb; --primary-dark: #1d4ed8; --primary-light: #dbeafe; --primary-50: #eff6ff;
  --gray-50: #f9fafb; --gray-100: #f3f4f6; --gray-200: #e5e7eb; --gray-300: #d1d5db;
  --gray-400: #9ca3af; --gray-500: #6b7280; --gray-600: #4b5563; --gray-700: #374151;
  --gray-800: #1f2937; --gray-900: #111827;
  --red-500: #ef4444; --red-50: #fef2f2; --red-700: #b91c1c;
  --green-500: #22c55e; --green-50: #f0fdf4; --green-700: #15803d;
  --amber-400: #fbbf24; --amber-50: #fffbeb; --amber-500: #f59e0b; --amber-600: #d97706; --amber-800: #92400e;
  --sidebar-w: 260px; --radius: 0.5rem; --radius-lg: 0.75rem; --radius-xl: 1rem;
  --shadow: 0 1px 3px rgba(0,0,0,.1); --shadow-lg: 0 10px 25px rgba(0,0,0,.12);
}
body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: var(--gray-50); color: var(--gray-900); line-height: 1.5; -webkit-font-smoothing: antialiased; }
.hidden { display: none !important; }
/* Inline-Styles schlagen die UA-Regel [hidden]{display:none}; ohne !important
   liesse sich ein Element mit style="display:..." nicht per hidden ausblenden. */
[hidden] { display: none !important; }

/* ── Login ── */
/* padding wie bei .register-screen und der Keycloak-Karte, sonst klebt die Karte
   auf dem Handy randlos am Displayrand */
.login-screen { min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--primary-50), #e0e7ff); padding: 2rem 1rem; }
.login-card { background: #fff; border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); padding: 2.5rem; max-width: 400px; width: 100%; text-align: center; }
.login-logo { width: 64px; height: 64px; border-radius: var(--radius-lg); display: block; margin: 0 auto 1.5rem; object-fit: contain; padding: 4px; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.1); }
.login-card h1 { font-size: 1.5rem; font-weight: 700; margin-bottom: .25rem; }
.login-card p { color: var(--gray-500); margin-bottom: 2rem; font-size: .875rem; }
.login-register { margin-top: 1rem; font-size: .875rem; color: var(--gray-500); }
/* Zweistufig, weil .login-card p (0,1,1) sonst mit seinen 2rem gewinnt. Die
   gelten dem Untertitel, nicht dieser Beschriftung: sie gehoert eng zu den
   Buttons darunter. */
.login-card .login-register { margin-bottom: .75rem; }
.login-register a { color: var(--primary); font-weight: 600; text-decoration: none; }
.login-register a:hover { text-decoration: underline; }

/* ── Registrierung ── */
.register-screen { min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--primary-50), #e0e7ff); padding: 2rem 1rem; }
.register-card { background: #fff; border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); padding: 2.5rem; max-width: 540px; width: 100%; text-align: center; }
.register-card h1 { font-size: 1.5rem; font-weight: 700; margin-bottom: .25rem; }
.register-subtitle { color: var(--gray-500); margin-bottom: 1.5rem; font-size: .875rem; }
.register-form { text-align: left; }
.register-form h2 { font-size: 1.125rem; font-weight: 600; margin-bottom: 1rem; text-align: center; }
.register-form .form-group { margin-bottom: .75rem; }
.register-form .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.register-form .form-actions { display: flex; justify-content: space-between; margin-top: 1.25rem; gap: .5rem; }
.register-error { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; border-radius: var(--radius); padding: .625rem .875rem; font-size: .8125rem; margin-top: .75rem; }
.register-back { display: inline-block; margin-top: 1.25rem; font-size: .8125rem; color: var(--gray-500); text-decoration: none; }
.register-back:hover { color: var(--primary); }
.consent-group { margin-bottom: .5rem !important; }
.checkbox-label { display: flex; align-items: flex-start; gap: .5rem; font-size: .875rem; cursor: pointer; line-height: 1.4; }
.checkbox-label input[type="checkbox"] { margin-top: .15rem; flex-shrink: 0; cursor: pointer; accent-color: var(--primary); width: 1rem; height: 1rem; }
.link-btn { background: none; border: none; padding: 0; color: var(--primary); text-decoration: underline; cursor: pointer; font-size: inherit; font-family: inherit; }
.link-btn:hover { color: var(--primary-dark, #1d4ed8); }
.legal-text { font-size: .875rem; line-height: 1.6; color: var(--gray-700); }
.legal-text h3 { font-size: .9375rem; font-weight: 600; margin: 1.25rem 0 .4rem; color: var(--gray-900); }
.legal-text p { margin-bottom: .5rem; text-align: justify; hyphens: auto; }
.legal-text ul, .legal-text ol { padding-left: 1.25rem; margin-bottom: .5rem; }
.legal-text li { margin-bottom: .25rem; text-align: justify; hyphens: auto; }
.legal-meta { color: var(--gray-400); font-size: .8125rem; margin-bottom: 1rem; }
.form-hint { font-size: .75rem; color: var(--gray-400); font-weight: 400; }
.pw-checklist { list-style: none; margin: .35rem 0 0; padding: 0; font-size: .8rem; }
.pw-req { color: var(--gray-400); line-height: 1.5; }
.pw-req.met { color: #16a34a; }

/* Stepper */
.register-stepper { display: flex; align-items: center; justify-content: center; gap: 0; margin-bottom: 1.5rem; }
.register-step { display: flex; flex-direction: column; align-items: center; gap: .25rem; }
.step-number { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .8125rem; font-weight: 600; background: var(--gray-200); color: var(--gray-500); transition: all .2s; }
.register-step.active .step-number { background: var(--primary); color: #fff; }
.register-step.done .step-number { background: #22c55e; color: #fff; }
.step-label { font-size: .75rem; color: var(--gray-500); font-weight: 500; }
.register-step.active .step-label { color: var(--primary); font-weight: 600; }
.register-step.done .step-label { color: #22c55e; }
.step-line { width: 48px; height: 2px; background: var(--gray-200); margin: 0 .5rem; margin-bottom: 1rem; transition: background .2s; }
.step-line.done { background: #22c55e; }

/* Erfolgs-Icon */
.register-success { text-align: center; }
.success-icon { width: 64px; height: 64px; border-radius: 50%; background: #dcfce7; color: #22c55e; display: flex; align-items: center; justify-content: center; font-size: 2rem; margin: 0 auto 1rem; }

/* ── Anmelde- und Registrierkarte auf Touchgeraeten ──────────────────────────
   Spiegelt die Touch-Regel des Keycloak-Themes
   (docker/keycloak/themes/mediskill/login/resources/css/mediskill.css), damit
   die Vorschaltseite und die Anmeldemaske auf dem Handy nicht unterschiedlich
   aussehen. Zwei Bedingungen, weil das iPhone im Querformat 844px breit ist
   und durch eine reine Breitenregel fiele.
   Wirkt bewusst nur auf diese beiden Karten, nicht auf die uebrige App. */
/* Auf dem Handy fuellt der Inhalt den Bildschirm. Der schwebende Rahmen kostete
   bei 390px rund 80px an Aussenrand und Innenabstand, also gut ein Fuenftel der
   Breite, ohne etwas beizutragen. Weisser Grund ohne Radius und Schatten laesst
   die Karte nahtlos in die Seite uebergehen, gleiche Werte wie im
   Keycloak-Theme. Ab 768px bleibt die schwebende Karte auf dem Verlauf. */
@media (max-width: 480px) {
  .login-screen, .register-screen { padding: 1.5rem 0; background: #fff; }
  .login-card, .register-card {
    max-width: none; padding: 2rem 1.25rem;
    border-radius: 0; box-shadow: none;
  }

  /* Die Registrierung wandert an den unteren Rand, in die bequeme Daumenzone.
     Bewusst ueber Flexbox und nicht position: fixed, damit sie den Inhalt nie
     ueberdecken kann: bei wenig Platz rueckt sie einfach wieder nach oben.
     Die beiden auto-Margins teilen sich den freien Raum, dadurch sitzt der
     Markenblock im oberen Drittel und die Registrierung unten.
     Eine Tastatur kann hier nichts verschieben, die Seite hat kein
     Eingabefeld. */
  /* Der Aussenabstand des Screens muss hier weg: er kaeme zu den 100dvh der
     Karte hinzu und die Seite scrollte um genau diese 48px. */
  .login-screen { padding: 0; }
  .login-card {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
  }
  .login-card .login-logo { margin-top: auto; }
  .login-card .login-register { margin-top: auto; padding-top: 2rem; }
}

@media (max-width: 767px), (pointer: coarse) {
  /* iOS Safari zoomt die Seite beim Antippen eines Feldes, dessen Schrift
     kleiner als 16px ist. Danach steht die Karte verschoben. */
  .register-card .form-group input,
  .register-card .form-group select,
  .register-card .form-group textarea { font-size: 1rem; min-height: 2.75rem; }

  /* 44px ist Apples Richtwert fuer Trefferflaechen. Der Anmelden-Button war
     40px hoch, die Registrier-Links darunter 45px: <button> erbt die
     Zeilenhoehe des Body nicht, <a> schon. line-height gleicht das an. */
  .login-card .btn, .register-card .btn {
    min-height: 2.75rem;
    line-height: 1.5;
    font-size: 1rem;
  }
}

/* ── Loading ── */
.loading-screen { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; }
.loading-screen p { color: var(--gray-500); }
.spinner { width: 48px; height: 48px; border: 3px solid var(--gray-200); border-top-color: var(--primary); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── App Shell ── */
.app-shell { display: flex; min-height: 100vh; }

/* ── Sidebar ── */
.sidebar { position: fixed; left: 0; top: 0; bottom: 0; width: var(--sidebar-w); background: #fff; border-right: 1px solid var(--gray-200); display: flex; flex-direction: column; z-index: 30; }
.sidebar-logo { display: flex; align-items: center; gap: .75rem; padding: 1.25rem; border-bottom: 1px solid var(--gray-100); }
.logo-icon { width: 36px; height: 36px; border-radius: var(--radius); display: block; object-fit: contain; padding: 3px; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,0.08), 0 1px 4px rgba(0,0,0,0.1); }
.logo-title { font-weight: 600; font-size: .875rem; }
.logo-sub { color: var(--gray-500); font-size: .75rem; }
.sidebar-school { padding: .75rem 1.25rem; border-bottom: 1px solid var(--gray-100); }
.sidebar-school .label { font-size: .625rem; text-transform: uppercase; letter-spacing: .06em; color: var(--gray-400); }
.sidebar-school .value { font-size: .875rem; font-weight: 500; color: var(--gray-700); margin-top: .125rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-nav { flex: 1; padding: 1rem .75rem; display: flex; flex-direction: column; gap: .25rem; overflow-y: auto; }
.nav-link { display: flex; align-items: center; gap: .75rem; padding: .625rem .75rem; border-radius: var(--radius); font-size: .875rem; font-weight: 500; color: var(--gray-600); text-decoration: none; cursor: pointer; transition: all .15s; }
.nav-link:hover { background: var(--gray-50); color: var(--gray-900); }
.nav-link.active { background: var(--primary-light); color: var(--primary-dark); }
.nav-link .icon { width: 1.25rem; height: 1.25rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.nav-link .icon svg { width: 1.25rem; height: 1.25rem; display: block; }
/* Unterpunkte der Einstellungen. Eingerueckt auf Hoehe der Beschriftung darueber,
   die Linie links macht die Zugehoerigkeit sichtbar. */
.nav-sublink {
  display: block; padding: .375rem .75rem; margin-left: 1.75rem;
  border-left: 2px solid var(--gray-200); border-radius: 0 var(--radius) var(--radius) 0;
  font-size: .8125rem; color: var(--gray-600); text-decoration: none; cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.nav-sublink:hover { background: var(--gray-50); color: var(--gray-900); }
.nav-sublink.active { color: var(--primary-dark); border-left-color: var(--primary); font-weight: 500; }
.sidebar-user { padding: 1rem; border-top: 1px solid var(--gray-100); display: flex; align-items: center; gap: .75rem; }
.user-avatar { width: 32px; height: 32px; background: var(--gray-200); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .75rem; font-weight: 600; color: var(--gray-600); flex-shrink: 0; }
.user-name { flex: 1; font-size: .875rem; font-weight: 500; color: var(--gray-700); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Main ── */
.main-content { margin-left: var(--sidebar-w); padding: 1.5rem; flex: 1; min-height: 100vh; overflow-x: hidden; }

/* ── Buttons ── */
.btn { display: inline-flex; align-items: center; gap: .5rem; padding: .5rem 1rem; border-radius: var(--radius); font-size: .875rem; font-weight: 500; border: none; cursor: pointer; transition: all .15s; }
.btn svg { width: 1rem; height: 1rem; display: block; flex-shrink: 0; }
a.btn { text-decoration: none; }
.mod-icon { width: 1.25rem; height: 1.25rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.mod-icon svg { width: 100%; height: 100%; display: block; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-primary { background: var(--primary); color: #fff; } .btn-primary:hover:not(:disabled) { background: var(--primary-dark); }
.btn-secondary { background: var(--gray-100); color: var(--gray-700); } .btn-secondary:hover:not(:disabled) { background: var(--gray-200); }
.btn-danger { color: var(--red-500); background: none; padding: .25rem .5rem; } .btn-danger:hover { color: var(--red-700); }
.btn-danger-fill { background: var(--red-500); color: #fff; } .btn-danger-fill:hover:not(:disabled) { background: var(--red-700); }
.btn-amber { background: var(--amber-500); color: #fff; } .btn-amber:hover:not(:disabled) { background: var(--amber-600); }
.btn-block { width: 100%; justify-content: center; padding: .75rem; }
.btn-sm { padding: .375rem .75rem; font-size: .8125rem; }
/* Quadratischer Button fuer Kopfzeilen. Die feste Groesse entspricht exakt der
   Hoehe eines Textbuttons (.5rem Innenabstand oben und unten plus 1.5 Zeilenhoehe
   bei .875rem Schrift), damit er in einer Reihe mit ihnen nicht verspringt. */
.btn.btn-square { width: 2.3125rem; height: 2.3125rem; padding: 0; justify-content: center; flex-shrink: 0; }
.btn.btn-square svg { width: 1.25rem; height: 1.25rem; display: block; }
.btn-icon { background: none; border: none; cursor: pointer; color: var(--gray-400); padding: .25rem; transition: color .15s; display: inline-flex; align-items: center; justify-content: center; }
.btn-icon svg { width: 1rem; height: 1rem; display: block; }
.btn-icon:hover { color: var(--red-500); }
.doc-icon-btn:hover { background: var(--primary-50) !important; color: var(--primary) !important; }
.wish-actions { display: flex; align-items: center; gap: .3rem; flex-shrink: 0; }
.wish-btn { width: 2rem; height: 2rem; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; background: var(--gray-100); border: none; border-radius: var(--radius); color: var(--gray-600); cursor: pointer; transition: background .15s, color .15s; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.wish-btn svg { width: 1rem; height: 1rem; display: block; pointer-events: none; }
.wish-btn:hover:not(:disabled) { background: var(--gray-200); }
.wish-btn:disabled { opacity: .35; cursor: not-allowed; }
.wish-btn-danger { color: var(--red-500); }
.wish-btn-danger:hover:not(:disabled) { background: var(--red-50); color: var(--red-700); }
@media (max-width: 480px) { .wish-btn { width: 2.375rem; height: 2.375rem; } }

/* ── Page Header ── */
.page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; }
.page-header h1 { font-size: 1.5rem; font-weight: 700; }

/* ── Cards & Panels ── */
.card { background: #fff; border-radius: var(--radius-xl); box-shadow: var(--shadow); border: 1px solid var(--gray-100); }
.card-body { padding: 1.5rem; }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.25rem; }
.stat-card { padding: 1.5rem; }
.stat-card .stat-icon { width: 40px; height: 40px; border-radius: var(--radius); display: flex; align-items: center; justify-content: center; margin-bottom: .75rem; }
.stat-card .stat-icon svg { width: 22px; height: 22px; display: block; }
.stat-card .stat-label { font-size: .875rem; color: var(--gray-500); }
.stat-card .stat-value { font-size: 1.75rem; font-weight: 700; margin-top: .25rem; }

/* ── Tables ── */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
thead th { padding: .75rem 1.5rem; text-align: left; font-size: .75rem; font-weight: 600; color: var(--gray-500); text-transform: uppercase; letter-spacing: .04em; background: var(--gray-50); }
tbody td { padding: 1rem 1.5rem; border-top: 1px solid var(--gray-100); font-size: .875rem; }
tbody tr { cursor: pointer; transition: background .1s; } tbody tr:hover { background: var(--gray-50); }
.text-muted { color: var(--gray-500); }
.text-center { text-align: center; }

/* ── Dokumente: Aktionsleiste bei Mehrfachauswahl ──
   Die Styles gehoeren bewusst hierher und nicht ins style-Attribut: ein Inline
   display schlaegt die UA-Regel [hidden]{display:none}, die Leiste liesse sich
   dann nicht mehr ausblenden. Statt space-between schiebt margin-left:auto die
   Buttons nach rechts, damit sie beim Umbruch nicht aus dem Bild laufen. */
.docs-action-bar {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  padding: .5rem .75rem; background: var(--primary-50);
  border: 1px solid var(--primary-light); border-radius: .375rem; margin-bottom: .5rem;
}
.docs-action-btns { display: flex; gap: .5rem; flex-wrap: wrap; margin-left: auto; }

@media (max-width: 768px) {
  .docs-action-btns { margin-left: 0; width: 100%; }
}

/* ── Tags / Badges ── */
.badge { display: inline-block; padding: .125rem .5rem; border-radius: 9999px; font-size: .75rem; font-weight: 500; }
.badge-green { background: var(--green-50); color: var(--green-700); }
.badge-gray { background: var(--gray-100); color: var(--gray-500); }
.badge-blue { background: var(--primary-light); color: var(--primary-dark); }
.badge-purple { background: #f3e8ff; color: #6d28d9; }
.badge-amber { background: #fef3c7; color: #92400e; }
.badge-red { background: var(--red-50); color: var(--red-700); }
.dept-tag { display: inline-block; padding: .125rem .375rem; border-radius: .25rem; font-size: .6875rem; font-weight: 500; color: #fff; margin: .125rem; }
.dept-tag-overflow { display: inline-block; padding: .125rem .375rem; border-radius: .25rem; font-size: .6875rem; font-weight: 500; color: var(--gray-500); background: var(--gray-100); margin: .125rem; cursor: default; }

/* ── Forms ── */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
/* Einspaltig, wenn die Felder breite Werte tragen (z.B. Wochen-Dropdowns mit vollem Datum). */
.form-grid-stacked { grid-template-columns: 1fr; }
.form-grid .col-span-2 { grid-column: 1 / -1; }
/* Grid-Kinder haben min-width:auto, ein Select mit langen Optionen sprengt damit seine
   Spalte und ragt in die Nachbarspalte. Mit min-width:0 bleibt die Spalte bei 1fr und
   der Inhalt wird stattdessen beschnitten. */
.form-grid > .form-group { min-width: 0; }
.form-grid > .form-group select { min-width: 0; max-width: 100%; }
.form-group { display: flex; flex-direction: column; gap: .25rem; }
.form-group label { font-size: .8125rem; font-weight: 500; color: var(--gray-700); }
.form-group input, .form-group select, .form-group textarea {
  padding: .5rem .75rem; border: 1px solid var(--gray-300); border-radius: var(--radius);
  font-size: .875rem; font-family: inherit; transition: border-color .15s, box-shadow .15s;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37,99,235,.15);
}
.form-group textarea { resize: vertical; min-height: 60px; }
/* Ohne eigene Hoehe quetscht das Feld-Padding den Farbfleck flach, das Feld sieht
   dann leer aus. */
.form-group input[type="color"] { height: 2.375rem; padding: .1875rem; cursor: pointer; }
.checkbox-label { display: flex; align-items: center; gap: .5rem; font-size: .875rem; cursor: pointer; }
.checkbox-label input[type="checkbox"], #login-all-header, .row-sel { width: 16px; height: 16px; accent-color: var(--primary); cursor: pointer; }
.form-actions { display: flex; justify-content: flex-end; gap: .75rem; margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--gray-100); }
/* Mehr als zwei Knoepfe (Rueckfrage mit Wahl) duerfen auf dem Handy umbrechen */
.form-actions.form-actions-wrap { flex-wrap: wrap; }
/* Knopf mit variablem Text (etwa einem Schuelernamen) in einer Rueckfrage: lange Texte
   enden mit "…", damit die Knoepfe auf dem Desktop in einer Reihe bleiben. Der volle
   Text steht im Tooltip und in der Frage darueber. */
.btn.btn-truncate { max-width: 16rem; min-width: 0; }
.btn.btn-truncate > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
fieldset { border: 1px solid var(--gray-200); border-radius: var(--radius); padding: 1rem; margin-bottom: 1rem; }
fieldset legend { font-size: .8125rem; font-weight: 600; color: var(--gray-700); padding: 0 .5rem; }

/* ── Filter Bar ── */
.filter-bar { display: flex; gap: .75rem; margin-bottom: 1rem; background: #fff; border-radius: var(--radius); border: 1px solid var(--gray-200); padding: .75rem; }
/* Selects in der Filterleiste sehen aus wie .dropdown-check-btn, damit einfache und
   Mehrfachauswahl nebeneinander nicht auseinanderfallen. Der native Pfeil weicht je
   nach Browser und OS ab, deshalb appearance:none und derselbe Pfeil als SVG. */
.filter-bar select {
  appearance: none; -webkit-appearance: none;
  border: 1px solid var(--gray-300); border-radius: var(--radius);
  padding: .5rem 1.75rem .5rem .75rem; font-size: .875rem; font-family: inherit;
  color: var(--gray-700); cursor: pointer; transition: border-color .15s;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath fill='%239ca3af' d='M0 0h8L4 5z'/%3E%3C/svg%3E") no-repeat right .5rem center;
}
.filter-bar select:hover { border-color: var(--gray-400); }
.filter-bar select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37,99,235,.15); }
/* Der Wrapper ist ein Flex-Item und wird auf Zeilenhoehe gedehnt, der Button darin
   nicht. Ohne display:flex bliebe er niedriger als die Selects daneben. Die feste
   Zeilenhoehe haelt beide auf exakt derselben Hoehe, da Browser fuer select und
   button unterschiedliche Voreinstellungen mitbringen. */
.filter-bar .dropdown-check { display: flex; }
.filter-bar .dropdown-check-btn { width: 100%; }
.filter-bar select, .filter-bar .dropdown-check-btn { line-height: 1.5; }
.filter-bar input[type="search"] { flex: 1; min-width: 0; border: 1px solid var(--gray-300); border-radius: var(--radius); padding: .5rem .75rem; font-size: .875rem; outline: none; }
.filter-bar input[type="search"]:focus { border-color: var(--primary-400); box-shadow: 0 0 0 3px var(--primary-50); }

/* ── Modal ── */
.modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 10000; display: flex; align-items: center; justify-content: center; }
.modal { background: #fff; border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); max-width: 48rem; width: calc(100% - 2rem); max-height: 90vh; overflow-y: auto; }
.modal.narrow { max-width: 32rem; }
.modal.modal-wider { max-width: 56rem; }
.modal-header { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.5rem; border-bottom: 1px solid var(--gray-100); position: sticky; top: 0; background: #fff; border-radius: var(--radius-xl) var(--radius-xl) 0 0; z-index: 1; }
.modal-header h2 { font-size: 1.125rem; font-weight: 600; }
.modal-body { padding: 1.5rem; }
/* Modal mit fixer Größe – Tabs sichtbar, nur Inhalt scrollt */
.modal.modal-fixed { height: min(92vh, 700px); overflow: hidden; display: flex; flex-direction: column; }
.modal.modal-fixed .modal-header { flex-shrink: 0; }
.modal.modal-fixed .modal-body { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; padding-bottom: 0; }
.modal.modal-fixed .detail-tabs { flex-shrink: 0; }
.modal.modal-fixed .tab-content-wrap { flex: 1; min-height: 0; overflow-y: auto; }
.modal.modal-fixed .form-actions { flex-shrink: 0; padding: 1rem 0 1.5rem; border-top: 1px solid var(--gray-100); background: #fff; }
/* Sehr grosses Modal fuer breite Tabellen. Zusammen mit modal-fixed die volle Hoehe,
   das min(92vh, 700px) von modal-fixed waere hier viel zu niedrig. */
/* Aktionsleiste bleibt unten stehen, der Inhalt laeuft darunter durch. Gegenstueck zum
   sticky .modal-header. Anders als .modal-fixed braucht das keinen eigenen
   Scroll-Container im Inhalt und funktioniert damit auch in Dialogen ohne Reiter.
   Die negativen Seitenraender heben das Padding des Bodys auf, damit die weisse Leiste
   die volle Breite deckt und nichts seitlich darunter durchscheint. */
.modal.modal-sticky-actions .modal-body { padding-bottom: 0; }
.modal.modal-sticky-actions .modal-body > .form-actions:last-child {
  position: sticky; bottom: 0; z-index: 2; background: #fff;
  margin: 1.5rem -1.5rem 0; padding: 1rem 1.5rem 1.5rem;
}

.modal.modal-xl { max-width: 92vw; width: 92vw; }
.modal.modal-xl.modal-fixed { height: 92vh; }

/* Zweite Modal-Ebene: Rueckfragen legen sich ueber das Arbeitsfenster, statt es
   zu verdraengen. Erbt Aussehen und Verhalten von .modal-backdrop/.modal, nur die
   Stapelhoehe unterscheidet sich. Der Toast bleibt mit z-index 20000 darueber. */
#modal2-backdrop { z-index: 10001; }

/* Scrollbalken-Platz dauerhaft reservieren. Ohne das verschiebt sich das gesamte
   Layout waagerecht, sobald ein kurzer Bereich den Balken verschwinden laesst. */
html { scrollbar-gutter: stable; }

/* Kopfzeile eines Einstellungs-Bereichs. Der Beschreibungstext schrumpft, die
   Schaltflaeche bleibt rechts oben stehen: sonst wandert sie je nach Textlaenge
   von Bereich zu Bereich. Der Abstand nach unten haelt sie von Suchleiste und
   Tabelle fern. */
.settings-page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.settings-page-header > div { flex: 1 1 320px; min-width: 0; }
.settings-page-header h1 { font-size: 1.4rem; font-weight: 700; margin: 0 0 .25rem; }
.settings-page-header p { color: var(--gray-600); font-size: .9rem; margin: 0; max-width: 70ch; }
/* Alles nach dem Textblock sind Aktionen: sie schrumpfen nicht und werden nach
   rechts geschoben, unabhaengig davon, ob es Schaltflaechen oder Container sind. */
.settings-page-header > * + * { flex: 0 0 auto; }
.settings-page-header > :nth-child(2) { margin-left: auto; }

/* ── Detail-Tabs ── */
.detail-tabs { display: flex; gap: .25rem; margin-bottom: 1rem; border-bottom: 2px solid var(--gray-200); }
.detail-tab { background: none; border: none; border-bottom: 2px solid transparent; padding: .5rem 1rem; margin-bottom: -2px; font-size: .9rem; color: var(--gray-600); cursor: pointer; transition: color .15s; }
.detail-tab:hover { color: var(--primary); }
.detail-tab.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: 500; }
.tab-pane { display: none; }
.tab-pane.active { display: block; }
.tab-content-wrap { min-height: 420px; }

/* ── Einsatz-Zeilen (Planung-Tab) ── */
.assignment-row { padding: .6rem .75rem; border-radius: var(--radius); margin-bottom: .5rem; border: 1px solid var(--gray-200); }
.assignment-row.assignment-past { opacity: .5; }
.assignment-row.assignment-current { border-color: transparent; }

/* ── Fortschritt Balken ── */
.progress-bar-row { display: flex; align-items: center; gap: .75rem; margin-bottom: .85rem; }
.progress-bar-label { width: 120px; font-size: .875rem; flex-shrink: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.progress-bar-track { width: 200px; flex-shrink: 0; height: 14px; background: var(--gray-200); border-radius: 8px; overflow: hidden; position: relative; }
.progress-bar-fill { height: 100%; border-radius: 8px; position: absolute; top: 0; left: 0; }
.progress-bar-text { font-size: .8rem; color: var(--gray-600); white-space: nowrap; }

/* ── Alert ── */
.alert { padding: .75rem 1rem; border-radius: var(--radius); font-size: .875rem; margin-bottom: 1rem; }
.alert-error { background: var(--red-50); color: var(--red-700); }
.alert-info { background: var(--gray-100); color: var(--gray-700); }

/* ── Quick Links ── */
.quick-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-top: 1rem; }
.quick-link { display: block; padding: 1rem; border: 1px solid var(--gray-200); border-radius: var(--radius); cursor: pointer; transition: all .15s; text-decoration: none; color: inherit; }
.quick-link:hover { border-color: var(--primary); background: var(--primary-50); }
.quick-link .ql-title { font-weight: 500; }
.quick-link .ql-desc { font-size: .8125rem; color: var(--gray-500); margin-top: .25rem; }

/* ── Planning Grid ── */
#planning-grid { flex: 1; min-height: 0; }
.planning-wrapper { background: #fff; border-radius: var(--radius-xl); border: 1px solid var(--gray-200); overflow: auto; height: 100%; }
.planning-wrapper table { border-collapse: collapse; min-width: 100%; }
.planning-wrapper thead { position: sticky; top: 0; z-index: 20; }
.planning-wrapper thead th { background: var(--gray-50); border-bottom: 2px solid var(--gray-200); border-right: 1px solid var(--gray-200); padding: .75rem; text-align: left; white-space: nowrap; }
.planning-wrapper thead th:first-child { position: sticky; left: 0; z-index: 25; min-width: 120px; }
.planning-wrapper tbody td { border-bottom: 1px solid var(--gray-200); border-right: 1px solid var(--gray-200); padding: .25rem; vertical-align: top; min-width: 180px; height: 64px; position: relative; }
.planning-wrapper tbody td:first-child { position: sticky; left: 0; z-index: 10; background: var(--gray-50); min-width: 120px; padding: .5rem; }
.student-header { font-size: .8125rem; font-weight: 600; }
.student-sub { font-size: .6875rem; color: var(--gray-400); }
.kw-label { font-size: .8125rem; font-weight: 600; color: var(--gray-700); }
.kw-dates { font-size: .6875rem; color: var(--gray-500); }
.kw-year { font-weight: 600; }
/* Jahresgrenze: box-shadow statt border, damit die Zeilenhöhe von 64px unangetastet bleibt. */
.planning-wrapper tbody tr.week-year-start > td { box-shadow: inset 0 2px 0 var(--primary); }
.planning-wrapper tbody tr.week-year-start .kw-year { color: var(--primary); }

.cell-empty { cursor: pointer; transition: background .1s; }
.cell-empty:hover { background: var(--primary-50); }

.assignment-block {
  position: absolute; left: 4px; right: 4px; top: 4px;
  border-radius: .375rem; color: #fff; font-size: .6875rem; font-weight: 500;
  padding: .25rem .5rem; cursor: pointer; z-index: 5; box-shadow: var(--shadow);
  overflow: hidden; transition: box-shadow .15s;
}
.assignment-block:hover { box-shadow: 0 4px 12px rgba(0,0,0,.2); z-index: 10; }
.assignment-block .ab-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Nur die Zahlen kuerzen, damit das Vorlaeufig-Kennzeichen daneben stehen bleibt:
   "40h/Woche" braucht mehr Platz als das fruehere "40h" und wuerde in schmalen
   Bloecken sonst umbrechen und das Kennzeichen aus dem Block schieben. */
.assignment-block .ab-meta { opacity: .85; display: flex; align-items: center; min-width: 0; }
.assignment-block .ab-meta-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.assignment-block .ab-preliminary { flex-shrink: 0; }
.assignment-block .ab-close {
  position: absolute; top: 0; right: 0; bottom: 0;
  display: flex; align-items: center; padding: 0 6px;
  opacity: 0; cursor: pointer;
  transition: opacity .15s; border-radius: 0 .375rem .375rem 0;
  background: rgba(0,0,0,.15);
}
.assignment-block .ab-close svg, .vacation-block .ab-close svg { width: .875rem; height: .875rem; display: block; }
.assignment-block:hover .ab-close { opacity: 1; }
.assignment-block .ab-close:hover { background: rgba(0,0,0,.35); }

/* ── Vorplanung: Sichtbarkeit/Vorläufig-Status ──
   Gilt fuer Einsaetze in der Praktikumsplanung UND fuer Unterrichtseinheiten im
   Stundenplan: derselbe Zustand soll in beiden Modulen gleich aussehen. */
.assignment-block.not-visible { opacity: .55; border: 2px dashed rgba(255,255,255,.75); }
.assignment-block .ab-visibility,
.lesson-block .ab-visibility {
  position: absolute; top: 0; left: 0;
  display: flex; align-items: center; padding: 2px 5px;
  cursor: pointer; border-radius: .375rem 0 .375rem 0;
  background: rgba(0,0,0,.35);
}
.assignment-block .ab-visibility svg,
.lesson-block .ab-visibility svg { width: .75rem; height: .75rem; display: block; }
.assignment-block .ab-visibility:hover,
.lesson-block .ab-visibility:hover { background: rgba(0,0,0,.55); }
.assignment-block .ab-preliminary,
.lesson-block .ab-preliminary,
.st-lesson .ab-preliminary {
  display: inline-block; margin-left: .25rem; padding: 0 .3rem;
  font-size: .625rem; font-weight: 700; letter-spacing: .02em;
  background: rgba(0,0,0,.3); border-radius: .25rem; cursor: pointer;
}
.assignment-block .ab-preliminary:hover,
.lesson-block .ab-preliminary:hover { background: rgba(0,0,0,.5); }

/* ── Vertretung und Entfall ──
   Eine ausgefallene Stunde bleibt im Plan stehen, statt gelöscht zu werden. Sie muss
   deshalb auf einen Blick als Ausfall lesbar sein: durchgestrichen und zurückgenommen,
   aber noch da. Die Vertretung bleibt kräftig, sie findet ja statt. */
.lesson-block .ab-cancelled,
.st-lesson .ab-cancelled,
.lesson-block .ab-substitute,
.st-lesson .ab-substitute {
  display: inline-block; margin-left: .25rem; padding: 0 .3rem;
  font-size: .625rem; font-weight: 700; letter-spacing: .02em;
  border-radius: .25rem; color: #fff;
}
.lesson-block .ab-cancelled,
.st-lesson .ab-cancelled { background: #b91c1c; }
.lesson-block .ab-substitute,
.st-lesson .ab-substitute { background: #b45309; }

.lesson-block.is-cancelled { opacity: .5; }
.lesson-block.is-cancelled .lb-name,
.st-lesson-cancelled .st-lesson-name { text-decoration: line-through; }
.st-lesson-cancelled { opacity: .65; }
/* Der geplante Dozent bleibt lesbar, ist aber erkennbar nicht mehr der aktuelle. */
.lesson-block .lb-replaced { text-decoration: line-through; opacity: .75; }

/* ── Schüler-Portal: Meine Abwesenheiten ──
   Karten statt Tabelle, wie bei „Mein Stundenplan": Eine Zeile mit vier Spalten ist auf
   einem Telefon nicht zu lesen, und dort wird das Portal ueberwiegend benutzt. */
.st-absence-form h2 { font-size: 1.05rem; margin: 0 0 .875rem; }
/* .form-group hat bewusst keinen Aussenabstand, damit Felder in einem Grid eng stehen.
   Zwischen zwei einzelnen Zeilen braucht es ihn aber, sonst klebt die Checkbox am Feld
   darueber und an der Schaltflaeche darunter. */
.st-absence-form .st-absence-toggle { margin-top: .875rem; }
.st-absence-form .alert { margin-top: .875rem; }

.st-absence-summary { padding: 1rem 1.25rem; margin: 1.5rem 0 1rem; }
.st-absence-hours { font-size: 1.5rem; font-weight: 700; color: var(--gray-900); }

.st-absence {
  display: flex; align-items: flex-start; gap: .75rem;
  padding: .75rem .875rem; border-top: 1px solid var(--gray-100);
}
.st-absence:first-of-type { border-top: none; }
.st-absence-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .125rem; }
.st-absence-period { font-size: .9375rem; font-weight: 600; color: var(--gray-900); }
.st-absence-meta { font-size: .8125rem; color: var(--gray-500); overflow-wrap: anywhere; }
.st-absence-side {
  display: flex; align-items: center; gap: .5rem;
  flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end;
}
.st-absence--retracted { opacity: .6; }
.st-absence--retracted .st-absence-period { text-decoration: line-through; }

@media (max-width: 768px) {
  /* Auf dem Telefon fuellt die Hauptaktion die Breite, statt rechts in der Ecke zu
     kleben; sie ist der einzige Grund, warum man das Formular geoeffnet hat. */
  .st-absence-form .form-actions { justify-content: stretch; }
  .st-absence-form .form-actions .btn { width: 100%; }
  /* Kennzeichen und Schaltflaeche unter den Zeitraum statt daneben. */
  .st-absence { flex-direction: column; gap: .5rem; }
  .st-absence-side { width: 100%; justify-content: flex-start; }
}

/* ── Abwesenheitsdialog: gemeldete Meldungen ──
   Liste statt Tabelle. Fuenf Spalten mit dem globalen Zellenpadding von 1.5rem passen
   nicht in einen 48rem breiten Dialog: Das erzwang horizontales Scrollen und verschenkte
   gleichzeitig Platz, weil in den Spalten kaum etwas stand. */
.abs-list { margin-top: .25rem; }
.abs-row {
  display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
  padding: .625rem 0; border-top: 1px solid var(--gray-100);
}
.abs-row:first-child { border-top: none; }
.abs-main { flex: 1 1 11rem; min-width: 0; }
.abs-period { font-size: .875rem; font-weight: 600; color: var(--gray-900); }
.abs-meta { font-size: .75rem; color: var(--gray-500); }
.abs-actions { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.abs-actions select { font-size: .8125rem; padding: .3rem .5rem; width: auto; }
.abs-attest {
  display: flex; align-items: center; gap: .35rem;
  font-size: .75rem; color: var(--gray-600); white-space: nowrap; cursor: pointer;
}
.abs-attest input { width: 1rem; height: 1rem; accent-color: var(--primary); cursor: pointer; }
.abs-row--retracted { opacity: .55; }
.abs-row--retracted .abs-period { text-decoration: line-through; }

/* ── Anwesenheitsmatrix ──
   Baut wie die Wochenansicht auf .planning-wrapper auf und erbt damit die fixierte
   Kopfzeile und die fixierte erste Spalte. Abweichend sind die Spalten: In einer Zelle
   steht nur ein Kreuz, und in einer Woche stehen schnell zwanzig davon nebeneinander.
   Mit den 150px der Wochenansicht waere das Gitter unlesbar breit. */
/* table-layout:fixed, damit allein die colgroup die Spaltenbreite bestimmt. Ueber
   min-width an der Zelle richtete sie sich nach dem laengsten Fachkuerzel, und die
   Spalten waren unterschiedlich breit. */
.attendance-wrapper table { table-layout: fixed; }
.attendance-wrapper .att-col-name { width: 12rem; }
.attendance-wrapper .att-col-lesson { width: 3rem; }

.attendance-wrapper thead th { padding: .4rem .35rem; text-align: center; }
.attendance-wrapper tbody td {
  /* .planning-wrapper setzt 180px fuer die breiten Planungszellen; das wuerde die feste
     Spaltenbreite wieder aushebeln. */
  min-width: 0;
  height: 2.25rem; padding: 0;
  text-align: center; vertical-align: middle; font-size: .8125rem;
}
.attendance-wrapper thead th:first-child,
.attendance-wrapper tbody td:first-child {
  text-align: left; padding: .3rem .75rem;
}
/* Ein zu langes Kuerzel darf die feste Spalte nicht sprengen. */
.attendance-wrapper .att-lesson,
.attendance-wrapper tbody td:first-child .att-name {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Tagesgrenze staerker als die Trennung zwischen zwei Stunden desselben Tages. */
.attendance-wrapper .att-daybreak { border-left: 2px solid var(--gray-300); }
.attendance-wrapper .att-lesson { font-weight: 500; text-transform: none; letter-spacing: 0; }

/* Die Zeile als Ganzes ist nicht anklickbar, anders als sonst in den Tabellen: hier
   fuehren Namensspalte und Zellen zu verschiedenen Dingen. Der Zeiger soll nichts
   versprechen, was der Klick nicht einloest. */
.attendance-wrapper tbody tr { cursor: default; }
.attendance-wrapper tbody tr:hover { background: transparent; }
.att-name { font-weight: 600; font-size: .8125rem; }
.att-off { background: var(--gray-100); }
.attendance-wrapper .student-sub { margin-top: .1rem; }

/* Nur wenn wirklich bearbeitet werden darf, sieht auch etwas nach Bearbeiten aus. Ein
   Betrachter bekommt dieselbe Tabelle, aber ohne Linkfarbe und ohne Zeiger. */
.att-editable tbody td:first-child { cursor: pointer; }
.att-editable .att-name { color: var(--primary); }
.att-editable tbody td:first-child:hover .att-name { text-decoration: underline; }

/* Eine leere Zelle heisst "war da" und ist der Normalfall, sie bleibt deshalb ruhig.
   Nur die Fehlstellen treten hervor. */
.att-editable .att-cell { cursor: pointer; transition: background .1s; }
.att-editable .att-cell:hover { background: var(--primary-50); }
.att-absent { background: #fee2e2; color: #b91c1c; font-weight: 700; }
.att-editable .att-absent:hover { background: #fecaca; }

/* ── Einsatz-Kommentare: Grid-Icons (unten links) ── */
.assignment-block .ab-comments {
  position: absolute; bottom: 0; left: 0;
  display: flex; gap: 2px;
}
.assignment-block .ab-comment {
  display: flex; align-items: center; padding: 2px 4px;
  cursor: pointer; background: rgba(0,0,0,.3);
  border-radius: 0 .375rem 0 .375rem;
}
.assignment-block .ab-comment svg { width: .75rem; height: .75rem; display: block; }
.assignment-block .ab-comment:hover { background: rgba(0,0,0,.55); }

/* ── Einsatz-Formular: Zwei-Spalten-Layout (Felder links, Kommentare rechts) ── */
.assign-form-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 1.5rem; align-items: start; }
.assign-form-col { display: flex; flex-direction: column; gap: .75rem; min-width: 0; }
.assign-form-col-comments { border-left: 1px solid var(--gray-100); padding-left: 1.5rem; }
.assign-form-col-comments textarea { min-height: 90px; }
/* "Art" steht in einer eigenen Grid-Zeile mit denselben Spurbreiten und endet damit
   exakt dort, wo auch "Schüler" in der linken Spalte endet. */
.assign-form-type-row { margin-bottom: .75rem; }
/* Hinweis aus dem internen Kommentar der Praktikumsstelle: bewusst amber, weil er beim
   Planen zu beachten ist. max-height, damit lange Notizen das Modal nicht sprengen. */
.assign-hint { background: var(--amber-50); border: 1px solid var(--amber-400); border-radius: var(--radius); padding: .625rem .75rem; }
.assign-hint-title { display: flex; align-items: center; gap: .375rem; font-size: .8125rem; font-weight: 600; color: var(--amber-800); margin-bottom: .25rem; }
.assign-hint-title svg { width: 1rem; height: 1rem; flex-shrink: 0; }
.assign-hint-text { font-size: .8125rem; color: var(--gray-700); white-space: pre-wrap; max-height: 12rem; overflow-y: auto; }
/* Rueckfrage "Ferien aussparen": beide Varianten nebeneinander, damit die Teile direkt
   verglichen werden koennen, auf dem Handy untereinander. Die Knoepfe stehen unten
   buendig, auch wenn eine Karte mehr Hinweise hat als die andere. */
.vsplit-intro { font-size: .875rem; color: var(--gray-700); margin-bottom: .5rem; }
.vsplit-vacations { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-direction: column; gap: .25rem; }
.vsplit-vacations li { display: flex; align-items: center; gap: .375rem; font-size: .8125rem; font-weight: 500; color: var(--amber-800); }
.vsplit-vacations svg { width: .875rem; height: .875rem; flex-shrink: 0; }
.vsplit-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1rem; margin-top: 1rem; }
.vsplit-option { display: flex; flex-direction: column; gap: .5rem; border: 1px solid var(--gray-200); border-radius: var(--radius); padding: .875rem 1rem; min-width: 0; }
.vsplit-option-title { font-size: .9375rem; font-weight: 600; color: var(--gray-900); }
.vsplit-option-sub { font-size: .8125rem; color: var(--gray-500); }
.vsplit-parts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .25rem; }
.vsplit-parts li { display: flex; justify-content: space-between; gap: .75rem; font-size: .8125rem; color: var(--gray-700); background: var(--gray-50); border-radius: .375rem; padding: .375rem .5rem; }
.vsplit-parts li span:last-child { color: var(--gray-500); white-space: nowrap; }
.vsplit-sum { font-size: .8125rem; color: var(--gray-600); }
.vsplit-note { font-size: .8125rem; color: var(--amber-800); background: var(--amber-50); border: 1px solid var(--amber-400); border-radius: .375rem; padding: .375rem .5rem; }
.vsplit-option .btn { margin-top: auto; justify-content: center; }
/* Dauer und Stunden pro Woche stehen immer nebeneinander: zwei schmale Zahlenfelder,
   jede Gruppe so breit wie ihr Inhalt, damit sich nichts über die ganze Spalte zieht. */
.assign-number-row { display: flex; gap: 1rem; }
.assign-number-row .form-group { flex: 0 0 auto; }
.assign-number-row label { white-space: nowrap; }
.assign-number-row input { width: 8rem; }
.label-hint { font-weight: 400; color: var(--gray-500); font-size: .75rem; }

/* Kommentar-Icon in Listen/Karten des Schueler-Portals */
.assignment-comment-icon { display: inline-flex; align-items: center; }
.assignment-comment-icon svg { width: 1rem; height: 1rem; display: block; }

.vacation-block {
  position: absolute; left: 4px; right: 4px; top: 4px;
  border-radius: .375rem; border: 2px solid var(--amber-400); background: var(--amber-50); color: var(--amber-800);
  font-size: .6875rem; font-weight: 500; padding: .25rem .5rem; cursor: pointer; z-index: 4;
}
.vacation-block .ab-close {
  position: absolute; top: 0; right: 0; bottom: 0;
  display: flex; align-items: center; padding: 0 6px;
  opacity: 0; cursor: pointer;
  transition: opacity .15s; border-radius: 0 .375rem .375rem 0;
  background: rgba(251,191,36,.25);
}
.vacation-block:hover .ab-close { opacity: 1; }
.vacation-block .ab-close:hover { background: rgba(251,191,36,.5); }
.vacation-block > svg { width: .6875rem; height: .6875rem; display: inline; vertical-align: middle; flex-shrink: 0; }
/* Ferien fuer alle Zeitraeume: gleiche Farbe, aber schraffiert und mit Zusatzzeile,
   damit vor dem Bearbeiten klar ist, dass die Aenderung ueberall wirkt */
.vacation-block.vacation-block-shared {
  background-image: repeating-linear-gradient(135deg, transparent 0 6px, rgba(251,191,36,.16) 6px 12px);
}
.vacation-block .vb-shared-label { display: block; font-size: .625rem; font-weight: 400; opacity: .85; }

/* ── Wochen-Range-Picker ── */
.wrp { font-size: .875rem; user-select: none; }
.wrp-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: .5rem; font-weight: 600; }
.wrp-nav { background: none; border: 1px solid var(--gray-200); cursor: pointer; padding: .25rem .625rem; border-radius: var(--radius); font-size: 1rem; line-height: 1; transition: background .1s; }
.wrp-nav:hover { background: var(--gray-100); }
.wrp table { border-collapse: collapse; width: 100%; }
.wrp th { font-size: .75rem; color: var(--gray-500); padding: .2rem .25rem; text-align: center; }
.wrp th.wrp-kw-th { width: 3.5rem; }
.wrp td { padding: .2rem .3rem; text-align: center; cursor: pointer; }
/* nowrap: "KW 40" darf nicht umbrechen, sonst wird die Zeile doppelt hoch und
   die Tabellenhoehe haengt vom Monat ab (Januar 1-stellig, Oktober 2-stellig). */
.wrp td.wrp-kw { font-size: .7rem; color: var(--gray-400); text-align: right; padding-right: .4rem; cursor: default; white-space: nowrap; }
.wrp tr:hover td:not(.wrp-kw) { background: var(--blue-50); }
.wrp tr.wrp-start td:not(.wrp-kw) { background: var(--primary); color: #fff; border-radius: 0; }
.wrp tr.wrp-end td:not(.wrp-kw) { background: var(--primary); color: #fff; border-radius: 0; }
.wrp tr.wrp-in-range td:not(.wrp-kw) { background: var(--blue-50); }
.wrp tr.wrp-start td:not(.wrp-kw):first-of-type { border-radius: var(--radius) 0 0 var(--radius); }
.wrp tr.wrp-end td:not(.wrp-kw):last-child { border-radius: 0 var(--radius) var(--radius) 0; }
.wrp td.wrp-other-month { color: var(--gray-300); }
.wrp-display { font-size: .875rem; color: var(--gray-600); margin-top: .5rem; min-height: 1.25rem; text-align: center; font-weight: 500; }

/* ── Auto-Planung Preview ── */
.assignment-block.preview { border: 2px dashed rgba(255,255,255,.8); opacity: 0.7; pointer-events: none; }
/* Bestehender Einsatz, den die Vorschau einer Neuplanung beim Übernehmen ersetzt */
.assignment-block.replaced { opacity: .35; filter: grayscale(1); }
.assignment-block.replaced .ab-name { text-decoration: line-through; }
.preview-bar { display: flex; align-items: center; gap: 1rem; padding: .75rem 1rem; background: var(--blue-50); border: 1px solid var(--blue-200); border-radius: var(--radius); margin-bottom: .5rem; font-size: .875rem; flex-shrink: 0; }
.warning-badge { color: var(--red-500); cursor: pointer; font-size: .8125rem; text-decoration: underline; }
.warning-badge:hover { color: var(--red-700); }

.empty-state { text-align: center; padding: 3rem 1.5rem; color: var(--gray-400); }
.empty-state p { margin-bottom: 1rem; }

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--gray-100); }
::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: 9999px; }
::-webkit-scrollbar-thumb:hover { background: var(--gray-400); }

/* ── Admin code tags ── */
code { font-family: 'SF Mono', 'Fira Code', monospace; font-size: .8125em; }

/* ── API Docs ── */
.api-search-bar { margin-bottom: 1rem; }
.api-search-bar input { width: 100%; padding: .75rem 1rem; border: 1px solid var(--gray-300); border-radius: var(--radius-lg); font-size: .9375rem; font-family: inherit; background: #fff; transition: border-color .15s, box-shadow .15s; }
.api-search-bar input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37,99,235,.12); }
.api-legend { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.5rem; font-size: .8125rem; color: var(--gray-500); align-items: center; }
.api-legend span { display: inline-flex; align-items: center; gap: .375rem; }
.api-group { background: #fff; border: 1px solid var(--gray-200); border-radius: var(--radius-xl); margin-bottom: 1.25rem; overflow: hidden; }
.api-group-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; background: var(--gray-50); border-bottom: 1px solid var(--gray-100); }
.api-group-title { font-size: 1rem; font-weight: 700; color: var(--gray-900); }
.api-group-desc { font-size: .8125rem; color: var(--gray-500); margin-top: .125rem; }
.api-endpoints { }
.api-endpoint { border-bottom: 1px solid var(--gray-100); }
.api-endpoint:last-child { border-bottom: none; }
.api-endpoint-summary { display: flex; align-items: center; gap: .75rem; padding: .75rem 1.25rem; cursor: pointer; list-style: none; transition: background .1s; }
.api-endpoint-summary::-webkit-details-marker { display: none; }
.api-endpoint-summary:hover { background: var(--gray-50); }
.api-endpoint[open] > .api-endpoint-summary { background: var(--primary-50); }
.api-method { display: inline-block; min-width: 56px; padding: .125rem .5rem; border-radius: .25rem; font-size: .6875rem; font-weight: 700; color: #fff; text-align: center; letter-spacing: .03em; font-family: 'SF Mono', 'Fira Code', monospace; flex-shrink: 0; }
.api-path { font-size: .875rem; font-weight: 500; color: var(--gray-800); background: none; padding: 0; white-space: nowrap; }
.api-desc { font-size: .8125rem; color: var(--gray-500); margin-left: auto; text-align: right; flex-shrink: 1; }
.api-endpoint-detail { padding: .75rem 1.25rem 1rem; background: var(--gray-50); border-top: 1px solid var(--gray-100); }
.api-detail-table { width: 100%; border-collapse: collapse; }
.api-detail-table td { padding: .375rem 0; vertical-align: top; font-size: .8125rem; border: none; }
.api-detail-table tr { cursor: default; }
.api-detail-table tr:hover { background: transparent; }
.api-detail-label { font-weight: 600; color: var(--gray-600); width: 140px; white-space: nowrap; padding-right: 1rem; }
.api-code-block { display: inline-block; background: var(--gray-100); border: 1px solid var(--gray-200); border-radius: .25rem; padding: .25rem .5rem; font-size: .75rem; line-height: 1.5; color: var(--gray-700); word-break: break-all; max-width: 100%; }
.api-auth-badge { display: inline-block; padding: .125rem .5rem; border-radius: 9999px; font-size: .6875rem; font-weight: 500; }
.api-auth-none { background: var(--green-50); color: var(--green-700); }
.api-auth-tenant { background: var(--primary-light); color: var(--primary-dark); }
.api-auth-admin { background: #fef3c7; color: #92400e; }

/* ── Map Page ── */
.map-toolbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem; padding: .75rem 1rem; background: #fff; border: 1px solid var(--gray-200); border-radius: var(--radius-lg); margin-bottom: .75rem; }
.map-toolbar-section { display: flex; flex-direction: column; gap: .25rem; }
.map-toolbar-section > label { font-size: .6875rem; font-weight: 600; color: var(--gray-500); text-transform: uppercase; letter-spacing: .04em; }
.map-toolbar-section > input,
.map-toolbar-section > .input-row > input { padding: .375rem .5rem; border: 1px solid var(--gray-300); border-radius: var(--radius); font-size: .8125rem; font-family: inherit; }
.map-toolbar-section > input:focus,
.map-toolbar-section > .input-row > input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37,99,235,.15); }
.map-toolbar-section .input-row { display: flex; align-items: center; gap: .375rem; font-size: .8125rem; color: var(--gray-600); }
.map-toolbar-buttons { flex-direction: row; gap: .375rem; align-self: flex-end; }
.map-toolbar-divider { width: 1px; height: 32px; background: var(--gray-200); align-self: flex-end; margin-bottom: 2px; }
.map-toolbar .dropdown-check-btn { font-size: .8125rem; padding: .375rem 1.5rem .375rem .5rem; }
.mode-toggle { display: flex; border: 1px solid var(--gray-300); border-radius: var(--radius); overflow: hidden; }
.mode-btn { padding: .375rem .75rem; font-size: .8125rem; border: none; background: #fff; cursor: pointer; color: var(--gray-600); line-height: 1.4; }
.mode-btn.active { background: var(--primary); color: #fff; }
.mode-btn:hover:not(.active) { background: var(--gray-50); }
.map-toolbar-search-group { display: flex; align-items: flex-end; min-width: 384px; }
#search-student { padding: .375rem .5rem; border: 1px solid var(--gray-300); border-radius: var(--radius); font-size: .8125rem; font-family: inherit; width: 384px; }

.map-body { display: flex; gap: .75rem; height: calc(100vh - 220px); }
.map-container { flex: 1; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--gray-200); min-height: 300px; }
.map-container .leaflet-container { height: 100%; width: 100%; }
.map-sidebar { width: 300px; flex-shrink: 0; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--gray-200); border-radius: var(--radius-lg); overflow: hidden; }
.map-list-header { padding: .625rem .75rem; font-size: .8125rem; font-weight: 600; color: var(--gray-700); background: var(--gray-50); border-bottom: 1px solid var(--gray-100); }
.map-practice-list { flex: 1; overflow-y: auto; }
.map-list-item { padding: .625rem .75rem; border-bottom: 1px solid var(--gray-100); cursor: pointer; transition: background .1s; }
.map-list-item:hover { background: var(--gray-50); }
.map-list-item.in-range { background: var(--green-50); }
.map-list-item.in-range:hover { background: #dcfce7; }
.map-list-item.highlighted { border-left: 3px solid var(--primary); }
.map-list-item-header { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; }
.map-list-item-header strong { font-size: .8125rem; }
.map-list-distance { font-size: .75rem; color: var(--gray-500); white-space: nowrap; }
.map-list-item-meta { font-size: .75rem; color: var(--gray-500); margin-top: .125rem; }
.map-list-item-tags { margin-top: .25rem; }
.map-list-separator { padding: .5rem .75rem; font-size: .75rem; font-weight: 600; color: var(--gray-400); background: var(--gray-100); text-transform: uppercase; letter-spacing: .04em; }
.map-list-item.no-geo { opacity: .55; }
.map-list-item.no-geo:hover { opacity: .75; }
.detail-table { width: 100%; border-collapse: collapse; }
.detail-table td { padding: .375rem .75rem; font-size: .875rem; border-bottom: 1px solid var(--gray-100); }

/* ── Fortschritts-Matrix ── */
.pm-wrap { display: flex; flex-direction: column; height: 100%; min-height: 0; }
/* Matrix fest auf einer Seite statt im Fenster: dort gab das feste Fensterformat die
   Hoehe vor, hier muss der Behaelter sie selbst setzen, sonst kollabiert .pm-wrap. */
.pm-inline { display: block; }
.pm-inline .pm-table-wrap { margin-bottom: 0; flex: none; }
.pm-controls { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; flex-shrink: 0; padding-bottom: .75rem; }
.pm-controls .pm-spacer { margin-left: auto; }
.pm-search { border: 1px solid var(--gray-300); border-radius: var(--radius); padding: .5rem .75rem; font-size: .875rem; font-family: inherit; outline: none; min-width: 190px; }
.pm-search:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37,99,235,.15); }
.pm-hint { font-size: .8125rem; color: var(--gray-500); padding-bottom: .5rem; flex-shrink: 0; }
/* Auf der Seite setzt fitToViewport() die Hoehe; im Fenster gibt sie das feste
   Format vor, dort greift flex. */
.pm-table-wrap { flex: 1; min-height: 0; overflow: auto; border: 1px solid var(--gray-200); border-radius: var(--radius); background: #fff; margin-bottom: 1.5rem; }
.pm-table { border-collapse: collapse; min-width: 100%; font-size: .8125rem; }
.pm-empty { padding: 2rem; text-align: center; color: var(--gray-500); font-size: .875rem; }

/* Kopf: zwei Zeilen (Fachbereich, darunter die drei Unterspalten). Bewusst ohne
   rowspan, weil rowspan und position:sticky sich in Kombination unzuverlaessig
   verhalten; die Namensspalte belegt in beiden Kopfzeilen eine eigene Zelle. */
.pm-table thead { position: sticky; top: 0; z-index: 20; }
.pm-table thead th { background: var(--gray-50); border-right: 1px solid var(--gray-200); padding: .375rem .5rem; white-space: nowrap; font-weight: 600; color: var(--gray-700); text-align: center; }
.pm-table thead tr:first-child th { border-bottom: 1px solid var(--gray-200); }
.pm-table thead tr:last-child th { border-bottom: 2px solid var(--gray-200); font-size: .6875rem; color: var(--gray-500); font-weight: 500; }
.pm-table thead th.pm-name { position: sticky; left: 0; z-index: 25; text-align: left; }
.pm-name { min-width: 210px; width: 210px; }
.pm-dept-head { border-left: 1px solid var(--gray-300); }
.pm-dept-color { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: .375rem; vertical-align: middle; }
.pm-sortable { cursor: pointer; user-select: none; }
.pm-sortable:hover { color: var(--primary); }
.pm-sort-active { color: var(--primary); }

/* Koerper: je Schueler zwei Zeilen, oben die Zahlen, darunter die Balken. */
.pm-table tbody td { border-right: 1px solid var(--gray-200); padding: .25rem .5rem; text-align: right; white-space: nowrap; }
.pm-table tbody td.pm-name { position: sticky; left: 0; z-index: 10; background: #fff; text-align: left; }
.pm-row-a td { padding-top: .375rem; }
.pm-row-b td { padding-top: 0; padding-bottom: .375rem; border-bottom: 1px solid var(--gray-200); }
.pm-student-name { font-weight: 600; color: var(--gray-800); }
.pm-student-sub { font-size: .6875rem; color: var(--gray-400); }
.pm-num { width: 56px; }
.pm-zero { color: var(--gray-300); }
.pm-ind { border-bottom: 1px dotted var(--gray-400); cursor: help; }
.pm-cell { cursor: pointer; }
.pm-hl { background: var(--primary-50); }
.pm-open { background: var(--primary-light); }
.pm-bar { height: 5px; border-radius: 999px; background: var(--gray-200); position: relative; overflow: hidden; }
.pm-bar-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; }

/* Gesamt-Block rechts */
/* Bleibt beim Querscrollen am rechten Rand stehen, genau wie der Gesamtblock der
   Unterrichtsauswertung. Die Rechtsabstaende setzt layoutStickyTotals() nach dem
   Zeichnen, weil sich die Spaltenbreiten erst aus dem Tabellensatz ergeben. */
.pm-total { position: sticky; background: var(--gray-50); border-left: 2px solid var(--gray-300); }
.pm-table thead th.pm-total { background: var(--gray-100); z-index: 22; }
.pm-table tbody td.pm-total { z-index: 5; }
.pm-table tfoot td.pm-total { z-index: 16; }

/* Klassen-Zwischenueberschrift: der Text bleibt beim Querscrollen am linken Rand. */
.pm-class-sep td { background: var(--gray-100); font-weight: 600; color: var(--gray-700); text-align: left; padding: .375rem .5rem; border-bottom: 1px solid var(--gray-200); }
.pm-class-sep span { position: sticky; left: .5rem; }

/* Aufgeklappte Einsaetze */
.pm-detail td { background: var(--primary-50); text-align: left; padding: .5rem .75rem; border-bottom: 1px solid var(--gray-200); }
.pm-detail-inner { position: sticky; left: .75rem; width: max-content; max-width: 60rem; display: flex; flex-direction: column; gap: .25rem; }
.pm-detail-title { font-weight: 600; color: var(--gray-700); font-size: .75rem; }
.pm-detail-item { color: var(--gray-700); display: flex; gap: .5rem; align-items: baseline; }
.pm-detail-meta { color: var(--gray-500); font-size: .75rem; }
.pm-detail-empty { color: var(--gray-500); }

/* Fusszeile mit den Spaltensummen */
.pm-table tfoot { position: sticky; bottom: 0; z-index: 15; }
.pm-table tfoot td { background: var(--gray-50); border-top: 2px solid var(--gray-200); border-right: 1px solid var(--gray-200); padding: .5rem; text-align: right; white-space: nowrap; font-weight: 600; color: var(--gray-700); }
.pm-table tfoot td.pm-name { position: sticky; left: 0; z-index: 16; text-align: left; }

/* ── Dropdown Checkbox ── */
.dropdown-check { position: relative; display: inline-block; }
.dropdown-check-btn { position: relative; text-align: left; padding: .5rem 1.75rem .5rem .75rem; border: 1px solid var(--gray-300); border-radius: var(--radius); font-size: .875rem; font-family: inherit; background: #fff; cursor: pointer; color: var(--gray-700); white-space: nowrap; transition: border-color .15s; }
.dropdown-check-btn::after { content: ""; position: absolute; right: .5rem; top: 50%; transform: translateY(-50%); border: 4px solid transparent; border-top: 5px solid var(--gray-400); }
.dropdown-check-btn:hover { border-color: var(--gray-400); }
.dropdown-check-btn:focus-visible { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37,99,235,.15); }
.dropdown-check-btn:disabled { opacity: .5; cursor: not-allowed; pointer-events: none; }
.dropdown-check.open .dropdown-check-btn { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37,99,235,.15); }
.dropdown-check-panel { display: none; position: absolute; top: calc(100% + 4px); right: 0; min-width: 100%; width: max-content; background: #fff; border: 1px solid var(--gray-200); border-radius: var(--radius); box-shadow: var(--shadow-lg); z-index: 1000; max-height: 200px; overflow-y: auto; }
.dropdown-check.open .dropdown-check-panel { display: block; }
/* Panel oeffnet nach rechts statt nach links: fuer Ausloeser am linken Rand (Filterleiste, Modal) */
.dropdown-check-panel-left { right: auto; left: 0; }
.dropdown-check-item { display: flex; align-items: center; gap: .5rem; padding: .5rem .75rem; font-size: .8125rem; cursor: pointer; transition: background .1s; }
.dropdown-check-item:hover { background: var(--gray-50); }
/* Gewaehlter Eintrag der Einfachauswahl (initDropdownSelect) */
.dropdown-check-item.is-active { background: var(--primary-50); color: var(--primary); font-weight: 600; }
.dropdown-check-item input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--primary); flex-shrink: 0; }
.dropdown-divider { height: 1px; background: var(--gray-200); margin: .25rem 0; }

/* ── Sidebar Settings (above user) ── */
/* Mit aufgeklappten Unterpunkten wird der Block hoch. Eigene Hoehenbegrenzung mit
   Scrollen, damit er die Hauptnavigation darueber nicht zusammendrueckt. */
.sidebar-settings { padding: .25rem .75rem; border-top: 1px solid var(--gray-100); flex-shrink: 0; max-height: 60vh; overflow-y: auto; }
.sidebar-settings:empty { display: none; padding: 0; border: none; }

/* ── Radio Group Cards (for settings modal) ── */
.radio-group-card { display: flex; align-items: flex-start; gap: .75rem; padding: .75rem; border: 1px solid var(--gray-200); border-radius: var(--radius); cursor: pointer; transition: all .15s; }
.radio-group-card:hover { border-color: var(--primary); background: var(--primary-50); }
.radio-group-card--active { border-color: var(--primary); background: var(--primary-50); }
.radio-group-card input[type="radio"] { margin-top: .25rem; accent-color: var(--primary); flex-shrink: 0; }

/* ── Warning Box ── */
.warning-box { background: var(--red-50); border: 1px solid #fecaca; border-radius: var(--radius); padding: 1rem 1.25rem; color: var(--red-700); line-height: 1.6; }
.warning-box strong { color: var(--red-700); }
.warning-box ul { color: var(--gray-800); }

/* ── Toast ── */
.toast { position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%) translateY(1rem); background: var(--gray-800); color: #fff; padding: .625rem 1.25rem; border-radius: var(--radius); font-size: .875rem; font-weight: 500; z-index: 20000; opacity: 0; transition: all .3s ease; pointer-events: none; }
.toast--visible { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ── Mobile Header ── */
.mobile-header { display: none; position: fixed; top: 0; left: 0; right: 0; height: 56px; background: #fff; border-bottom: 1px solid var(--gray-200); align-items: center; gap: .75rem; padding: 0 1rem; z-index: 35; }
.mobile-nav-toggle { background: none; border: none; cursor: pointer; color: var(--gray-600); padding: .25rem; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--radius); }
.mobile-nav-toggle svg { width: 1.4rem; height: 1.4rem; display: block; }
.mobile-nav-toggle:hover { background: var(--gray-100); }
.mobile-title { font-weight: 600; font-size: .9375rem; }
.mobile-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 29; }
.mobile-overlay.overlay-open { display: block; }

/* ── Schüler-Seiten responsive Klassen ── */
.student-contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem .75rem; font-size: .9rem; }
.student-stats-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1rem; margin-bottom: 1.5rem; }
.student-hours-row { display: flex; align-items: center; gap: .75rem; }
.student-hours-label { font-size: .85rem; min-width: 150px; color: #374151; }
.student-hours-value { font-size: .8rem; color: #6b7280; white-space: nowrap; min-width: 80px; text-align: right; }

/* ── Responsive (≤ 768 px) ── */
@media (max-width: 768px) {
  /* Mobile Header sichtbar */
  .mobile-header { display: flex; }

  /* Sidebar als Overlay-Drawer */
  .sidebar { transform: translateX(-100%); transition: transform .25s ease; z-index: 40; }
  .sidebar.sidebar-open { transform: translateX(0); }

  /* Main Content: kein Links-Offset, Abstand für Mobile Header */
  .main-content { margin-left: 0; padding: 1rem; padding-top: calc(56px + 1rem); }

  /* Page-Header stackt vertikal */
  .page-header { flex-direction: column; align-items: flex-start; gap: .25rem; }
  .page-header h1 { font-size: 1.25rem; }

  /* Card-Padding leicht reduzieren */
  .card-body { padding: 1rem; }

  /* Schüler: Kontaktdaten → 1 Spalte */
  .student-contact-grid { grid-template-columns: 1fr; }

  /* Schüler: Statistik-Kacheln → kompakter (bleiben 3-spaltig) */
  .student-stats-grid { gap: .5rem; }

  /* Schüler: Stunden-Zeilen → umbrechen */
  .student-hours-row { flex-wrap: wrap; gap: .4rem; }
  .student-hours-label { min-width: unset; width: 100%; }
  .student-hours-value { min-width: unset; text-align: left; }

  /* Formular-Grid: 2-spaltig → 1-spaltig */
  .form-grid { grid-template-columns: 1fr; }
  .register-form .form-grid { grid-template-columns: 1fr; }

  /* Einsatz-Formular: Felder + Kommentare untereinander */
  .assign-form-grid { grid-template-columns: 1fr; gap: 1rem; }
  .assign-form-col-comments { border-left: none; padding-left: 0; border-top: 1px solid var(--gray-100); padding-top: 1rem; }

  /* Filter-Bar: umbrechend */
  .filter-bar { flex-wrap: wrap; }

  /* Toast: volle Breite statt zentriert */
  .toast { left: 1rem; right: 1rem; transform: translateY(1rem); }
  .toast--visible { transform: translateY(0); }

  /* Mein Stundenplan: Kalender-Knopf unter die Überschrift, Wochennavigation über
     die volle Breite. Der Page-Header stackt hier ohnehin schon vertikal. */
  .page-header #st-ics { width: 100%; }
  .st-nav { width: 100%; margin-left: 0; }
  .st-nav .btn { flex: 1; }
  .st-lesson { padding: .625rem .75rem; gap: .5rem; }
  .st-lesson-time { flex-basis: 3rem; }

}

/* ── User-Dropdown in der Sidebar ────────────────────────────────────────── */
.sidebar-user { position: relative; }

.user-menu-trigger { display: flex; align-items: center; gap: 0.75rem; cursor: pointer; border-radius: var(--radius); padding: 0.25rem 0.5rem; margin: -0.25rem -0.5rem; transition: background 0.1s; min-width: 0; overflow: hidden; }
.user-menu-trigger:hover { background: var(--gray-100); }

.user-menu-chevron { color: var(--gray-400); flex-shrink: 0; display: flex; align-items: center; }
.user-menu-chevron svg { width: 0.9rem; height: 0.9rem; display: block; }

.user-menu-panel { display: none; position: absolute; bottom: calc(100% + 8px); left: 0; min-width: 180px; background: #fff; border: 1px solid var(--gray-200); border-radius: var(--radius); box-shadow: var(--shadow-lg); z-index: 200; }
.user-menu-panel.open { display: block; }

.user-menu-item { display: flex; align-items: center; gap: 0.5rem; width: 100%; padding: 0.6rem 0.75rem; font-size: 0.875rem; font-family: inherit; background: none; border: none; cursor: pointer; color: var(--gray-700); text-align: left; transition: background 0.1s; }
.user-menu-item svg { width: 1rem; height: 1rem; flex-shrink: 0; display: block; }
.user-menu-item:hover { background: var(--gray-50); }

/* Passwort-Eingabe mit Sichtbarkeits-Toggle */
.pw-field { position: relative; }
.pw-field input { padding-right: 2.5rem; width: 100%; box-sizing: border-box; }
.pw-toggle { position: absolute; right: 0.5rem; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; color: var(--gray-400); padding: 0.25rem; line-height: 0; display: flex; align-items: center; }
.pw-toggle svg { width: 1.125rem; height: 1.125rem; display: block; }
.pw-toggle:hover { color: var(--gray-600); }

/* Gruppe aktiv/inaktiv Toggle-Switch */
.group-toggle-switch { position: relative; display: inline-flex; align-items: center; gap: .375rem; cursor: pointer; font-size: .8125rem; color: var(--gray-600); user-select: none; }
.group-toggle-switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.group-toggle-track { width: 2rem; height: 1.125rem; background: var(--gray-300); border-radius: 1rem; transition: background .15s; flex-shrink: 0; position: relative; }
.group-toggle-switch input:checked ~ .group-toggle-track { background: var(--green-500); }
.group-toggle-knob { position: absolute; top: .1875rem; left: .1875rem; width: .75rem; height: .75rem; background: #fff; border-radius: 50%; transition: transform .15s; }
.group-toggle-switch input:checked ~ .group-toggle-track .group-toggle-knob { transform: translateX(.875rem); }

/* Auto-Plan Modal Layout */
.ap-cols  { display: flex; gap: 1.5rem; flex: 1; min-height: 0; overflow: hidden; }
.ap-col   { flex: 1; overflow-y: auto; min-height: 0; }
.ap-stack { display: flex; flex-direction: column; gap: .75rem; margin-top: .5rem; margin-bottom: .75rem; }
.ap-row   { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .375rem; }
.ap-section { font-size: .75rem; font-weight: 600; color: var(--gray-400); text-transform: uppercase; letter-spacing: .04em; }
.ap-footer  { display: flex; align-items: center; justify-content: space-between; gap: .75rem; border-top: 1px solid var(--gray-100); padding-top: 1rem; margin-top: 1rem; flex-shrink: 0; padding-bottom: 1.5rem; }
.ap-btn-group { display: flex; gap: .5rem; }
.map-list-separator .btn { text-transform: none; letter-spacing: normal; }

/* Praktikumsstellen: Login-Screen Auswahl */
/* kein margin-top: der Abstand kommt allein aus .login-register, sonst addieren
   sich beide im Flex-Layout der mobilen Ansicht, statt zu kollabieren */
.login-register-actions { display: flex; flex-direction: column; gap: .5rem; margin-top: 0; }
.login-register-actions .btn { text-decoration: none; }

/* Page-Container nutzt die volle Hauptbereich-Breite */
.page-container { width: 100%; }

/* Praktikumsstellen-Code Anzeige (Erfolgs-Screen nach Registrierung) */
.practice-code-box { background: var(--primary-50, #eff6ff); border: 1px solid var(--primary-200, #bfdbfe); border-radius: var(--radius); padding: 1.25rem; margin: 1.25rem 0; text-align: center; }
.practice-code-label { font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--gray-500); margin-bottom: .5rem; }
.practice-code-value { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 1.75rem; font-weight: 700; color: var(--primary, #2563eb); letter-spacing: .08em; margin: .25rem 0 .75rem; }
.practice-code-hint { font-size: .8125rem; color: var(--gray-600, #4b5563); margin-top: .5rem; }
.btn-sm { padding: .375rem .75rem; font-size: .8125rem; }

/* Code-Banner auf "Meine Einrichtung" (kompakter, horizontal) */
.code-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  background: linear-gradient(135deg, var(--primary-50, #eff6ff) 0%, #ffffff 100%);
  border: 1px solid var(--primary-200, #bfdbfe);
  border-radius: var(--radius-xl, .75rem);
  padding: 1.25rem 1.5rem;
}
.code-banner__main { display: flex; flex-direction: column; gap: .375rem; }
.code-banner__label { font-size: .6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--gray-500, #6b7280); }
.code-banner__value-row { display: flex; align-items: center; gap: .75rem; }
.code-banner__value { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 1.5rem; font-weight: 700; color: var(--primary, #2563eb); letter-spacing: .08em; user-select: all; }
.code-banner__hint { font-size: .8125rem; color: var(--gray-600, #4b5563); margin: 0; max-width: 380px; line-height: 1.45; text-align: right; }
@media (max-width: 640px) {
  .code-banner { flex-direction: column; align-items: flex-start; gap: .75rem; }
  .code-banner__hint { text-align: left; max-width: none; }
}

/* Sidebar: Code-Anzeige für Praktikumsstellen (kompakt) */
.sidebar-code { margin-top: .625rem; padding: .375rem .625rem; background: var(--primary-50, #eff6ff); border: 1px solid var(--primary-200, #bfdbfe); border-radius: var(--radius); }
.sidebar-code-label { font-size: .6rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--gray-500, #6b7280); margin-bottom: .125rem; }
.sidebar-code-value { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .875rem; font-weight: 700; color: var(--primary, #2563eb); letter-spacing: .05em; cursor: pointer; user-select: all; transition: opacity .15s; }
.sidebar-code-value:hover { opacity: .75; }
.sidebar-code-value.copied { color: #16a34a; }
.sidebar-code-value.copied::after { content: " ✓"; }

/* Empty-State Inline-Variante (für leichte Hinweis-Boxen in Cards) */
.empty-state--inline { padding: .875rem 1rem; background: var(--gray-50, #f9fafb); border: 1px dashed var(--gray-200, #e5e7eb); border-radius: var(--radius); color: var(--gray-600, #4b5563); font-size: .875rem; }

/* Connect-Sektion im Praktikumsstellen-Modal (Schul-FE) */
.connect-section { background: var(--gray-50, #f9fafb); border: 1px solid var(--gray-200, #e5e7eb); border-radius: var(--radius); padding: .875rem 1rem; margin-bottom: 1rem; }
.linked-badge { display: flex; align-items: center; gap: .5rem; color: #15803d; font-size: .875rem; margin-bottom: .625rem; }
.linked-badge code { background: #fff; border: 1px solid var(--gray-200, #e5e7eb); border-radius: .25rem; padding: .125rem .375rem; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .8125rem; }
.input-locked { background: var(--gray-50, #f9fafb) !important; cursor: not-allowed !important; color: var(--gray-600, #4b5563); }

/* Liste der verknüpften Schulen in "Meine Einrichtung" */
.linked-schools-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.linked-school-item { display: flex; align-items: center; gap: .75rem; padding: .625rem .875rem; background: var(--gray-50, #f9fafb); border: 1px solid var(--gray-200, #e5e7eb); border-radius: var(--radius); }
.linked-school-item .icon { color: var(--primary, #2563eb); flex-shrink: 0; width: 20px; height: 20px; }
.linked-school-item .icon svg { width: 100%; height: 100%; }
.linked-school-info { display: flex; flex-direction: column; gap: .125rem; }
.linked-school-name { font-weight: 600; color: var(--gray-900); font-size: .9375rem; }
.linked-school-since { color: var(--gray-500); font-size: .75rem; }

/* Praktikumsstellen-Planung (Step 3) */
.school-section {
  margin-bottom: 1.25rem;
  background: #fff;
  border: 1px solid var(--gray-200, #e5e7eb);
  border-radius: var(--radius-xl, .75rem);
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
  overflow: hidden;
}
.school-section summary {
  cursor: pointer;
  padding: .875rem 1.25rem;
  background: #fff;
  font-weight: 600;
  font-size: 1rem;
  color: var(--gray-900, #111827);
  display: flex;
  align-items: center;
  gap: .625rem;
  list-style: none;
  border-bottom: 1px solid transparent;
  transition: background .12s;
}
.school-section summary:hover { background: var(--gray-50, #f9fafb); }
.school-section[open] summary { border-bottom-color: var(--gray-200, #e5e7eb); }
.school-section summary::-webkit-details-marker { display: none; }
.school-section summary::before {
  content: "▸";
  transition: transform .15s;
  color: var(--gray-400, #9ca3af);
  font-size: .75rem;
}
.school-section[open] summary::before { transform: rotate(90deg); }
.school-section .school-count {
  color: var(--gray-500, #6b7280);
  font-weight: 400;
  font-size: .8125rem;
  margin-left: auto;
}
.school-section table { background: #fff; }
.school-section table th {
  text-align: left;
  padding: .75rem 1.25rem;
  border-bottom: 1px solid var(--gray-100, #f3f4f6);
  font-size: .6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--gray-500, #6b7280);
  background: var(--gray-50, #f9fafb);
}
.school-section table td {
  padding: .75rem 1.25rem;
  border-bottom: 1px solid var(--gray-100, #f3f4f6);
  font-size: .875rem;
  color: var(--gray-900, #111827);
}
.school-section table tr:last-child td { border-bottom: none; }
.school-section table tr:hover td { background: var(--gray-50, #f9fafb); }
.school-section table td.muted { color: var(--gray-600, #4b5563); }
.dept-dot { display: inline-block; width: .625rem; height: .625rem; border-radius: 50%; margin-right: .5rem; vertical-align: middle; }
.filter-chip-row { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.filter-chip { padding: .375rem .875rem; border-radius: 999px; border: 1px solid var(--gray-200, #e5e7eb); background: #fff; font-size: .8125rem; cursor: pointer; transition: all .12s; }
.filter-chip:hover { border-color: var(--gray-300, #d1d5db); }
.filter-chip.active { background: var(--primary, #2563eb); color: #fff; border-color: var(--primary, #2563eb); }

/* Praktikumsplanung: KW-Datepicker-Range */
.pp-range-filter { display: flex; align-items: flex-end; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 1.25rem; padding: 1rem 1.25rem; background: #fff; border: 1px solid var(--gray-200, #e5e7eb); border-radius: var(--radius-xl, .75rem); box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.pp-range-group { display: flex; flex-direction: column; gap: .25rem; }
.pp-range-group label { font-size: .75rem; font-weight: 600; color: var(--gray-600, #4b5563); text-transform: uppercase; letter-spacing: .04em; }
.pp-range-group input[type="date"] { padding: .375rem .625rem; border: 1px solid var(--gray-200, #e5e7eb); border-radius: var(--radius); font-size: .875rem; background: #fff; }
.pp-range-group input[type="date"]:focus { outline: 2px solid var(--primary, #2563eb); outline-offset: -1px; border-color: var(--primary, #2563eb); }
.pp-kw-hint { font-size: .75rem; color: var(--gray-500, #6b7280); margin-top: .125rem; }

/* ── Stundenplan: Wochenansicht ──
   Baut auf .planning-wrapper auf, damit sich das Gitter wie die Praktikumsplanung
   verhaelt: fixierte Kopfzeile, fixierte erste Spalte, ganze Zeile beim Ueberfahren
   hervorgehoben. Abweichend sind nur die Spaltenbreiten. */
.timetable-wrapper tbody td { min-width: 150px; height: 72px; }
.timetable-wrapper thead th { text-align: center; }
.timetable-wrapper thead th:first-child,
.timetable-wrapper tbody td:first-child { min-width: 110px; }
.timetable-wrapper .tp-slot { vertical-align: middle; }
.timetable-wrapper .tp-day { font-weight: 600; }
.timetable-wrapper .tp-date { font-size: .6875rem; color: var(--gray-500); font-weight: 400; }
/* Heutige Spalte hervorheben, wie die Jahresgrenze in der Planung. */
.timetable-wrapper .tp-today { box-shadow: inset 2px 0 0 var(--primary), inset -2px 0 0 var(--primary); }
.timetable-wrapper thead th.tp-today { color: var(--primary); }

/* Die Bloecke fuellen die Zelle aus, damit eine Einheit ueber zwei Bloecke auch
   farblich ueber beide geht und nicht nur die Zelle verbunden aussieht. */
.timetable-wrapper .lesson-stack { display: flex; flex-direction: column; gap: .25rem; height: 100%; }
.lesson-block {
  border-radius: .375rem; color: #fff; font-size: .6875rem; font-weight: 500;
  padding: .25rem .5rem; cursor: pointer; flex: 1; min-height: 0;
  box-shadow: var(--shadow); overflow: hidden; transition: box-shadow .15s;
  /* Bezugspunkt fuer das Sichtbarkeits-Icon in der Ecke, wie beim assignment-block. */
  position: relative;
}
/* Im Wochenraster liegt die Kachel absolut in ihrer Zelle, genau wie der Einsatz in der
   Praktikumsplanung. Nur so laesst sich paralleler Unterricht nebeneinander legen und
   eine Doppelstunde ueber zwei Zeilen ziehen, ohne dass ein rowspan die darunter
   liegende Zelle verschluckt. Hoehe und Breite setzt der Renderer je Kachel. */
.timetable-wrapper .lesson-block {
  position: absolute; left: 4px; right: 4px; top: 4px; z-index: 5;
  flex: none;
}
/* Ausnahme: die Zeile "Außerhalb". Diese Termine passen in keinen Block, es gibt also
   keine Zeile, ueber die sich eine Hoehe rechnen liesse; dort bleibt es beim Stapel. */
.timetable-wrapper .lesson-stack .lesson-block {
  position: relative; left: auto; right: auto; top: auto; flex: 1;
}
.lesson-block:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, .2); }
.lesson-block .lb-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lesson-block .lb-meta { opacity: .85; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Tage ohne Unterricht (Ferien, Praktikum) ruhig hinterlegen, damit erkennbar ist,
   warum dort nichts steht. Termine bleiben trotzdem sichtbar. */
.timetable-wrapper .tp-closed { background: repeating-linear-gradient(45deg, var(--gray-50), var(--gray-50) 6px, var(--gray-100) 6px, var(--gray-100) 12px); }
.timetable-wrapper thead th.tp-closed { background: var(--gray-100); }
.timetable-wrapper .tp-note { font-size: .625rem; font-weight: 500; color: var(--gray-500); margin-top: .15rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.timetable-wrapper td.tp-closed.cell-empty:hover { background: var(--primary-50); }

/* ── Schüler-Portal: Mein Stundenplan ──
   Bewusst kein Gitter wie oben: das braucht rund 860px und liesse sich auf einem
   Telefon nur seitwaerts scrollend lesen. Stattdessen eine Liste je Tag, die von
   360px bis Desktop mit derselben Auszeichnung auskommt. */
.st-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: .75rem; flex-wrap: wrap; margin-bottom: 1rem;
}
.st-week { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; min-width: 0; }
.st-week-kw { font-size: 1rem; font-weight: 600; color: var(--gray-900); }
.st-week-range { font-size: .8125rem; color: var(--gray-500); }
/* Die Navigation bleibt auch im Umbruch beieinander und gross genug für den Daumen. */
.st-nav { display: flex; gap: .375rem; margin-left: auto; }
/* .btn setzt kein justify-content und faellt damit auf flex-start: ohne das Zentrieren
   klebt der Pfeil am linken Rand, sobald der Knopf breiter wird als sein Inhalt. */
.st-nav .btn {
  min-width: 2.5rem; min-height: 2.25rem; justify-content: center;
  /* Mehr Kontrast als .btn-secondary: dessen Fuellung (--gray-100) liegt kaum ueber
     dem Seitenhintergrund (--gray-50). Weisse Flaeche mit klarer Kante stattdessen. */
  background: #fff; border: 1px solid var(--gray-300); color: var(--gray-900);
}
.st-nav .btn:hover:not(:disabled) { background: var(--gray-100); border-color: var(--gray-400); }
.st-nav .btn:active { background: var(--gray-200); }
/* Die einfachen Winkelzeichen rendern klein; etwas groesser sind sie besser zu treffen. */
.st-nav-arrow { font-size: 1.25rem; line-height: 1; }

.st-day {
  background: #fff; border: 1px solid var(--gray-200, #e5e7eb);
  border-radius: var(--radius-xl, .75rem); box-shadow: 0 1px 2px rgba(0,0,0,.04);
  margin-bottom: .75rem; overflow: hidden;
}
.st-day-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: .5rem;
  margin: 0; padding: .625rem .875rem; background: var(--gray-50, #f9fafb);
  border-bottom: 1px solid var(--gray-200, #e5e7eb);
  font-size: .875rem; font-weight: 600; color: var(--gray-900);
}
.st-day-date { font-size: .75rem; font-weight: 400; color: var(--gray-500); text-align: right; }
.st-day-today { border-color: var(--primary, #2563eb); box-shadow: 0 0 0 1px var(--primary, #2563eb); }
.st-day-today .st-day-head { background: var(--primary-50, #eff6ff); color: var(--primary, #2563eb); }
.st-day-empty { padding: .75rem .875rem; font-size: .8125rem; color: var(--gray-400, #9ca3af); }

.st-lesson {
  display: flex; align-items: stretch; gap: .625rem;
  padding: .625rem .875rem; border-top: 1px solid var(--gray-100, #f3f4f6);
}
.st-lesson:first-of-type { border-top: none; }
/* Farbbalken statt farbiger Flaeche: der Text bleibt so immer lesbar, egal welche
   Farbe die Schule dem Fach gegeben hat. */
.st-lesson-bar { flex: 0 0 4px; border-radius: 9999px; }
.st-lesson-time {
  flex: 0 0 3.25rem; font-size: .75rem; font-variant-numeric: tabular-nums;
  color: var(--gray-500); line-height: 1.35;
}
.st-lesson-main { display: flex; flex-direction: column; gap: .125rem; min-width: 0; }
.st-lesson-name { font-size: .9375rem; font-weight: 600; color: var(--gray-900); }
.st-lesson-meta { font-size: .8125rem; color: var(--gray-500); overflow-wrap: anywhere; }
/* Das Vorläufig-Badge sitzt hier auf hellem Grund, nicht auf einer farbigen Kachel. */
.st-lesson .ab-preliminary { background: var(--gray-200, #e5e7eb); color: var(--gray-700, #374151); cursor: default; }

/* ── Plattform-Administration ── */
/* Ein Modul im Features-Reiter der Schule: Kopfzeile mit Zustand und Schaltflaeche,
   darunter die Erklaerung und die Testphase. Die Bloecke sind untereinander durch
   eine Linie getrennt, damit die drei Module optisch nicht ineinanderlaufen. */
.admin-module { padding-top: .75rem; margin-top: .75rem; border-top: 1px solid var(--gray-200); }
.admin-module:first-child { padding-top: 0; margin-top: 0; border-top: none; }
.admin-module-head { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; font-size: .875rem; }
.admin-module-name { font-weight: 600; }
/* Die Schaltflaeche steht immer rechts, unabhaengig davon wie viele Badges davor liegen. */
.admin-module-head .btn { margin-left: auto; }
.admin-module-hint { font-size: .8125rem; color: var(--gray-500); margin-top: .375rem; max-width: 70ch; }
.admin-trial-row { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-top: .625rem; }
.admin-trial-state { font-size: .8125rem; flex: 1 1 100%; }
.admin-trial-row label { font-size: .8125rem; color: var(--gray-600); }
.admin-trial-row input[type="date"] { font-size: .8125rem; padding: .25rem .5rem; border: 1px solid var(--gray-300); border-radius: .25rem; }
/* Je eine schmale Spalte pro Modul in der Schulliste. Das seitliche Padding der
   Tabelle waere hier zu breit: die Spalte traegt nur ein Zeichen, ihre Breite
   bestimmt ohnehin die Ueberschrift. */
th.admin-mod, td.admin-mod { text-align: center; padding-left: .5rem; padding-right: .5rem; }
td.admin-mod { font-size: 1rem; font-weight: 600; line-height: 1; }
.admin-mod-on { color: var(--green-700); }
.admin-mod-trial { color: var(--amber-600); }
/* Der Slug steht unter dem Namen in derselben Zelle, damit die Modulspalten Platz haben. */
.admin-slug {
  display: inline-block; margin-top: .25rem; font-size: .75rem;
  background: var(--gray-100); color: var(--gray-500);
  padding: .0625rem .3125rem; border-radius: .25rem;
}
/* Legende zu den Modulspalten. Ohne sie bliebe das T unerklaert. */
.admin-legend { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; margin-top: .625rem; font-size: .8125rem; color: var(--gray-500); }
.admin-legend > span { display: flex; align-items: center; gap: .375rem; }
.admin-legend .admin-mod-on, .admin-legend .admin-mod-trial { font-weight: 600; }
/* Hinweisleiste ueber der Tabelle: auslaufende und abgelaufene Testphasen. */
.admin-trial-alert { margin-top: 1.5rem; padding: 1rem 1.25rem; }
.admin-trial-alert h2 { font-size: .9375rem; font-weight: 600; margin-bottom: .625rem; }
.admin-trial-alert ul { list-style: none; display: flex; flex-direction: column; gap: .375rem; }
.admin-trial-alert li { font-size: .875rem; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.admin-trial-alert button {
  background: none; border: none; padding: 0; font: inherit; font-weight: 600;
  color: var(--primary); cursor: pointer; text-align: left;
}
.admin-trial-alert button:hover { text-decoration: underline; }

/* ── Auswertungen ──────────────────────────────────────────────────────────────
   Aufbau wie die Fortschritts-Matrix (.pm-*): sticky Kopf, sticky erste Spalte,
   sticky Fusszeile. Anders als dort steht die Tabelle nicht in einem Fenster mit
   fester Groesse, deshalb gibt .aw-wrap die Hoehe selbst vor. */
.aw-wrap { display: flex; flex-direction: column; }
.aw-controls { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; flex-shrink: 0; padding-bottom: .75rem; }
/* Alle Bedienelemente der Leiste gleich hoch. Ohne feste Hoehe bringt jedes seine
   eigene mit: ein Auswahlfeld die des Knopfes, ein Datumsfeld die des Betriebssystems.
   Das faellt nebeneinander sofort auf. */
.aw-controls { --aw-control-h: 2.25rem; }
.aw-controls .dropdown-check-btn,
.aw-controls .aw-date,
.aw-controls .aw-seg { height: var(--aw-control-h); }
.aw-controls .aw-spacer { margin-left: auto; }
.aw-hint { font-size: .8125rem; color: var(--gray-500); padding-bottom: .5rem; flex-shrink: 0; }
/* Die Hoehe setzt fitToViewport() beim Zeichnen, siehe utils/fit-height.ts. */
.aw-table-wrap { min-height: 0; overflow: auto; border: 1px solid var(--gray-200); border-radius: var(--radius); background: #fff; }
.aw-table { border-collapse: collapse; min-width: 100%; font-size: .8125rem; }
.aw-empty { padding: 2rem; text-align: center; color: var(--gray-500); font-size: .875rem; }

/* Monatsfelder des freien Zeitraums. Gleiche Kastenmasse wie .dropdown-check-btn,
   damit sie neben den Auswahlfeldern nicht aus der Reihe fallen; ein Datumsfeld
   bringt sonst die Hoehe des Betriebssystems mit. */
.aw-date {
  padding: 0 .75rem; border: 1px solid var(--gray-300); border-radius: var(--radius);
  font-size: .875rem; font-family: inherit; background: #fff;
  color: var(--gray-700); outline: none; transition: border-color .15s;
}
.aw-date:hover { border-color: var(--gray-400); }
.aw-date:focus-visible { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37,99,235,.15); }
.aw-date::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .55; }
.aw-date::-webkit-calendar-picker-indicator:hover { opacity: 1; }

/* Segmentierter Umschalter, benutzt fuer Zeitachse und Einheit. */
.aw-seg { display: inline-flex; border: 1px solid var(--gray-300); border-radius: var(--radius); overflow: hidden; }
.aw-seg button {
  background: #fff; border: none; padding: 0 .75rem; height: 100%; font: inherit; font-size: .875rem;
  color: var(--gray-600); cursor: pointer; min-width: 3.5rem;
}
.aw-seg button + button { border-left: 1px solid var(--gray-300); }
.aw-seg button:hover { background: var(--gray-50); }
.aw-seg button.is-active { background: var(--primary); color: #fff; font-weight: 600; }

/* Kopf: oben die Stufenbaender, darunter die Monate. Wie bei .pm-table bewusst
   ohne rowspan, weil rowspan und position:sticky sich schlecht vertragen. */
.aw-table thead { position: sticky; top: 0; z-index: 20; }
.aw-table thead th { background: var(--gray-50); border-right: 1px solid var(--gray-200); padding: .375rem .5rem; white-space: nowrap; font-weight: 600; color: var(--gray-700); text-align: center; }
.aw-table thead tr:first-child th { border-bottom: 1px solid var(--gray-200); }
.aw-table thead tr:last-child th { border-bottom: 2px solid var(--gray-200); }
.aw-table thead th.aw-name { position: sticky; left: 0; z-index: 25; text-align: left; }
.aw-name { min-width: 190px; width: 190px; }
.aw-band { background: var(--primary-50); color: var(--primary-dark); border-left: 1px solid var(--gray-300); font-size: .75rem; }
.aw-month { font-size: .6875rem; color: var(--gray-500); font-weight: 500; min-width: 52px; }

.aw-table tbody td { border-right: 1px solid var(--gray-200); padding: .3125rem .5rem; text-align: right; white-space: nowrap; }
.aw-table tbody td.aw-name { position: sticky; left: 0; z-index: 10; background: #fff; text-align: left; }
.aw-table tbody tr { border-bottom: 1px solid var(--gray-200); }
.aw-subject { font-weight: 600; color: var(--gray-800); display: flex; align-items: center; gap: .375rem; }
.aw-dot { display: inline-block; width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }
.aw-zero { color: var(--gray-300); }
/* Geplante Stunden stehen klein unter dem gehaltenen Wert, damit die Spalte
   weiter auf einen Blick zeigt, was tatsaechlich gelaufen ist. */
/* Fehlstunden unter der besuchten Zahl. Rot, weil es ein Minus ist, und nicht grau:
   in der Schueleransicht ist das die wichtigere der beiden Zahlen. */
.aw-missed { display: block; font-size: .6875rem; color: var(--red-700); font-weight: 600; }
.aw-cell-hl { background: var(--primary-50); }

/* Gesamtblock rechts: Ist, Soll, Rest und der Balken darunter.
   Bleibt beim Querscrollen am rechten Rand stehen. Bei 36 Monatsspalten waere er
   sonst nie im Bild, und genau er beantwortet die Frage nach der Gesamtstundenzahl.
   Die Breiten sind fest, weil die rechten Abstaende dazu passen muessen. */
.aw-total { position: sticky; background: var(--gray-50); width: 64px; min-width: 64px; }
.aw-table thead th.aw-total { background: var(--gray-100); z-index: 22; }
.aw-table tbody td.aw-total { z-index: 5; }
.aw-table tfoot td.aw-total { z-index: 16; }
/* Den rechten Abstand setzt die Seite je Spalte inline: wie viele Spalten der Block
   hat, haengt von der Ansicht ab (Klasse, mehrere Klassen, Schueler). */
/* Trennlinie nur am linken Rand des Blocks, nicht zwischen seinen Spalten. */
.aw-total-first { border-left: 2px solid var(--gray-300); }
.aw-bar { height: 5px; border-radius: 999px; background: var(--gray-200); position: relative; overflow: hidden; margin-top: .25rem; min-width: 44px; }
.aw-bar-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; }

.aw-table tfoot { position: sticky; bottom: 0; z-index: 15; }
.aw-table tfoot td { background: var(--gray-50); border-top: 2px solid var(--gray-200); border-right: 1px solid var(--gray-200); padding: .5rem; text-align: right; white-space: nowrap; font-weight: 600; color: var(--gray-700); }
.aw-table tfoot td.aw-name { position: sticky; left: 0; z-index: 16; text-align: left; }

/* Startkarte des Praktikums-Reiters. */
.aw-launch { max-width: 46rem; }
.aw-launch p { color: var(--gray-600); font-size: .875rem; margin-bottom: 1rem; line-height: 1.6; }

/* Marke im Fortschrittsbalken: so weit muesste der Kurs heute sein. Steht auf dem
   Balken, damit Rueckstand und Vorsprung ohne Rechnen sichtbar werden. */
.aw-bar-mark { position: absolute; top: -2px; bottom: -2px; width: 2px; background: var(--gray-700); border-radius: 1px; }

/* Aufklappbare Zeilen: die Kennzahlen hinter der Zahl in der Zelle. */
.aw-row { cursor: pointer; }
.aw-row:hover td { background: var(--primary-50); }
.aw-row:hover td.aw-total { background: var(--primary-light); }
/* Dreieck aus Rahmen statt Schriftzeichen: der Unicode-Pfeil faellt je nach Font
   winzig aus. Gleiche Bauart wie der Pfeil an .dropdown-check-btn. */
.aw-caret {
  display: inline-block; width: 0; height: 0; flex-shrink: 0;
  border: 4px solid transparent; border-left: 6px solid var(--gray-400);
  margin-right: .125rem; transition: transform .15s;
}
.aw-row-open .aw-caret { border-left-color: var(--primary); transform: rotate(90deg); }
.aw-row-open td { background: var(--primary-50); }
.aw-row-open td.aw-total { background: var(--primary-light); }
.aw-table tbody tr.aw-detail td { background: var(--gray-50); color: var(--gray-600); border-bottom: none; }
.aw-table tbody tr.aw-detail td.aw-name { background: var(--gray-50); padding-left: 1.5rem; font-size: .75rem; }
.aw-table tbody tr.aw-detail td.aw-total { background: var(--gray-100); }
/* Letzte Kennzahl schliesst den Block sichtbar ab. */
.aw-table tbody tr.aw-detail-last td { border-bottom: 1px solid var(--gray-200); }
.aw-detail-sub td.aw-name { padding-left: 2.5rem; color: var(--gray-500); }

/* Zeitraeume, in denen noch nichts gelaufen ist: die geplante Zahl, kursiv und blass.
   Sie zaehlt nicht zu den gehaltenen Stunden und soll deshalb nicht wie eine gelaufene
   aussehen, aber die Spalte darf auch nicht leer wirken. */
.aw-future { font-style: italic; color: var(--gray-400); }
/* Trenner zwischen gelaufener und geplanter Zahl derselben Zelle. */
.aw-split { color: var(--gray-300); padding: 0 1px; }

/* Inhalt des Info-Fensters der Auswertungen. */
.aw-info-lead { color: var(--gray-600); font-size: .875rem; margin-bottom: .75rem; }
.aw-info-head { font-size: .875rem; font-weight: 600; color: var(--gray-800); margin: 1.25rem 0 .5rem; }
.aw-info-table { border-collapse: collapse; font-size: .875rem; }
.aw-info-table td { padding: .3125rem .75rem .3125rem 0; vertical-align: top; color: var(--gray-600); }
.aw-info-table td:first-child { text-align: right; white-space: nowrap; min-width: 5rem; color: var(--gray-800); }
.aw-info-list { list-style: none; display: flex; flex-direction: column; gap: .375rem; font-size: .875rem; color: var(--gray-600); line-height: 1.5; }
.aw-info-list li { padding-left: 1rem; position: relative; }
.aw-info-list li::before { content: ""; position: absolute; left: 0; top: .5rem; width: 4px; height: 4px; border-radius: 50%; background: var(--gray-300); }

/* ── Auswertung Wünsche pro Praktikumsstelle ──
   Ein Block je Stelle und Fachbereich in .aw-table-wrap. Die globalen Tabellenregeln
   (Grossbuchstaben im Kopf, Zeiger und Hover je Zeile) passen hier nicht: die Zeilen
   sind nicht anklickbar. */
.ww-block { padding: .75rem 1rem 1rem; border-bottom: 1px solid var(--gray-200); }
.ww-block:last-child { border-bottom: none; }
.ww-head { display: flex; align-items: center; gap: .375rem; flex-wrap: wrap; margin-bottom: .5rem; font-size: .875rem; color: var(--gray-800); }
.ww-dot { width: .625rem; height: .625rem; border-radius: 9999px; flex-shrink: 0; }
.ww-ort { color: var(--gray-500); font-size: .8125rem; margin-left: .25rem; }
.ww-count { color: var(--gray-500); font-size: .8125rem; margin-left: auto; }
/* Feste Spaltenbreiten, damit die Blöcke untereinander fluchten; auf schmalen
   Bildschirmen scrollt .aw-table-wrap waagerecht statt zu quetschen. */
.ww-table { font-size: .8125rem; table-layout: fixed; min-width: 40rem; }
.ww-table th:nth-child(2) { width: 28%; }
.ww-table th:nth-child(3) { width: 14%; }
.ww-table th:nth-child(4) { width: 10%; }
.ww-table thead th { padding: .375rem .5rem; text-transform: none; letter-spacing: 0; font-size: .75rem; color: var(--gray-600); border-bottom: 1px solid var(--gray-200); white-space: nowrap; }
.ww-table tbody td { padding: .375rem .5rem; font-size: .8125rem; white-space: nowrap; }
.ww-table tbody tr { cursor: default; }
.ww-table .ww-rank { width: 3.5rem; text-align: right; font-variant-numeric: tabular-nums; }
.ww-table td.ww-time { font-variant-numeric: tabular-nums; }
.ww-table td .badge { margin-left: .5rem; }

/* ── Schulträger ── */
.carrier-banner { position: fixed; top: 0; left: var(--sidebar-w); right: 0; z-index: 25; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .5rem 1.5rem; background: #f3e8ff; color: #5b21b6; border-bottom: 1px solid #ddd6fe; font-size: .875rem; }
.carrier-banner a { color: #5b21b6; font-weight: 600; white-space: nowrap; }
body.has-carrier-banner .main-content { padding-top: calc(1.5rem + 40px); }
.carrier-section-title { font-size: 1.0625rem; font-weight: 600; margin: 1.5rem 0 .75rem; }
/* Zähler am Menüpunkt "Schulen": offene Anfragen zum Verbinden */
.nav-count { margin-left: auto; min-width: 1.25rem; padding: 0 .375rem; border-radius: 999px; background: #6d28d9; color: #fff; font-size: .75rem; font-weight: 600; line-height: 1.25rem; text-align: center; }
.carrier-matrix th.carrier-matrix-school { font-size: .75rem; font-weight: 600; text-align: center; max-width: 140px; white-space: normal; }
.carrier-matrix td.carrier-matrix-cell { text-align: center; }
.carrier-matrix td.carrier-matrix-cell input { width: 16px; height: 16px; accent-color: var(--primary); cursor: pointer; }
.carrier-matrix td.carrier-matrix-cell input:disabled { cursor: not-allowed; }
.carrier-code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 1.25rem; font-weight: 700; color: var(--primary); letter-spacing: .08em; }
tr.carrier-sum td { font-weight: 600; border-top: 2px solid var(--gray-200); }
@media (max-width: 768px) {
  .carrier-banner { left: 0; top: 56px; padding: .5rem 1rem; }
  body.has-carrier-banner .main-content { padding-top: calc(56px + 1rem + 48px); }
}

/* ── Schulträger im Plattform-Admin: Organigramm-Karten ── */
.carrier-org-list { display: flex; flex-direction: column; gap: 1.25rem; }
.carrier-org-card { padding: 1.25rem 1.5rem; }
.carrier-org-card--warn { border: 2px solid var(--red-500, #ef4444); }
.carrier-org-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; padding-bottom: .875rem; margin-bottom: 1rem; border-bottom: 1px solid var(--gray-100); }
.carrier-org-head h2 { font-size: 1.125rem; font-weight: 700; margin: 0; }
.carrier-org-code { font-size: .8125rem; background: var(--gray-100); padding: .0625rem .375rem; border-radius: .25rem; }
.carrier-org-warn { background: var(--red-50, #fef2f2); color: var(--red-700, #b91c1c); border-radius: var(--radius); padding: .5rem .75rem; font-size: .8125rem; margin-bottom: 1rem; }
.carrier-org-body { display: grid; grid-template-columns: 280px 1fr; gap: 2rem; align-items: start; }
.carrier-org-person { display: flex; gap: .875rem; padding: 1rem; border: 1px solid #ddd6fe; background: #faf5ff; border-radius: var(--radius-lg); position: relative; }
.carrier-org-person--missing { border-color: #fecaca; background: #fff7f7; }
.carrier-avatar { width: 44px; height: 44px; border-radius: 9999px; background: #7c3aed; color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; flex-shrink: 0; }
.carrier-org-person--missing .carrier-avatar { background: var(--red-500, #ef4444); }
.carrier-org-foot { display: flex; justify-content: flex-end; margin-top: 1rem; }
.carrier-tree { font-size: .875rem; }
.carrier-tree-root { border: 2px solid #c4b5fd; border-radius: var(--radius); padding: .625rem .875rem; background: #fff; }
.carrier-tree-branches { list-style: none; margin: 0 0 0 1.25rem; padding: 0; }
.carrier-tree-node { position: relative; padding: .625rem 0 0 1.5rem; }
/* Senkrechte Linie je Knoten, beim letzten nur bis zu seinem Abzweig */
.carrier-tree-node::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; border-left: 2px solid var(--gray-200); }
.carrier-tree-node:last-child::after { bottom: auto; height: 1.625rem; }
.carrier-tree-node::before { content: ""; position: absolute; left: 0; top: 1.5rem; width: 1.25rem; border-top: 2px solid var(--gray-200); }
.carrier-tree-node > .carrier-tree-label { border: 1px solid var(--gray-200); border-radius: var(--radius); padding: .5rem .875rem; background: #fff; }
.carrier-tree-label { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.carrier-tree-name { font-weight: 600; }
.carrier-tree-meta { color: var(--gray-500); font-size: .8125rem; margin-top: .125rem; }
.carrier-tree-star { color: #7c3aed; margin-right: .25rem; }
.carrier-dots { display: inline-flex; gap: .3rem; }
.carrier-dot { width: 10px; height: 10px; border-radius: 9999px; border: 2px solid var(--gray-300, #d1d5db); display: inline-block; }
.carrier-dot--aktiv { background: var(--green-500, #22c55e); border-color: var(--green-500, #22c55e); }
.carrier-dot--test { border-color: #f59e0b; background: linear-gradient(90deg, #f59e0b 50%, transparent 50%); }
.carrier-org-list mark, .carrier-org-card mark { background: #fef08a; color: inherit; border-radius: 2px; padding: 0 1px; }
@media (max-width: 900px) {
  .carrier-org-body { grid-template-columns: 1fr; gap: 1rem; }
}
.carrier-star { background: none; border: none; cursor: pointer; font-size: 1.25rem; line-height: 1; color: var(--gray-300, #d1d5db); padding: .125rem .25rem; border-radius: var(--radius); }
.carrier-star:hover { color: #f59e0b; background: #fffbeb; }
.carrier-star--active { color: #f59e0b; }