/**
 * lehrerintern Designsystem — eigene, Tailwind-freie Komponenten-Schicht.
 * Token-Quelle: docs/DESIGN.md (Schul-Markenpalette). Bewusst KEIN Tailwind, weil das
 * kompilierte tailwind-output.css lückenhaft ist (truncate/min-w-0/leading-tight u.a. fehlen)
 * und nicht jede Seite style.css lädt. Diese Datei wird zentral via includes/header.php geladen
 * und ist auf die Schul-Wünsche zugeschnitten.
 */

:root {
  /* Marke */
  --ds-penn: #141B4D;
  --ds-penn-hover: #20306e;
  --ds-cadet: #6B6E72;        /* Subtitle/Sekundärtext (WCAG AA) */
  --ds-border: #E5E7EB;
  --ds-surface: #FFFFFF;
  --ds-bg: #F8F8F8;           /* Seasalt */
  --ds-gold: #CEB829;         /* NUR Conversion-CTA */

  /* Sektions-Akzente: ink (kontraststark) + tint (Badge-Fläche) + bc (Badge-Rand) */
  --ds-ink-penn: #141B4D;     --ds-tint-penn: rgba(20,27,77,.08);    --ds-bc-penn: rgba(20,27,77,.20);
  --ds-ink-powder: #3A5A78;   --ds-tint-powder: rgba(177,198,219,.20); --ds-bc-powder: rgba(58,90,120,.22);
  --ds-ink-olivine: #5A6B2E;  --ds-tint-olivine: rgba(188,202,135,.20); --ds-bc-olivine: rgba(90,107,46,.22);
  --ds-ink-gray: #4A4A48;     --ds-tint-gray: rgba(107,107,104,.12);  --ds-bc-gray: rgba(74,74,72,.20);

  /* Maße */
  --ds-radius: 12px;
  --ds-radius-sm: 8px;
  --ds-radius-pill: 9999px;

  /* Schrift (zugeschnitten, unabhängig von Tailwind/Seiten-Font) */
  --ds-font: "Source Sans Pro", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.ds-header, .ds-card, .ds-kpi, .ds-btn, .ds-pill, .ds-search__input { font-family: var(--ds-font); }

/* ---- Karte / Header ---- */
.ds-card,
.ds-header {
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius);
}
.ds-header { margin-bottom: 24px; }
.ds-header__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
}
.ds-header__main {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;            /* erlaubt truncate im Kind */
}
.ds-header__text { min-width: 0; }
.ds-title {
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--ds-penn);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ds-subtitle {
  font-size: .875rem;
  color: var(--ds-cadet);
  margin: 2px 0 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---- Icon-Badge (trägt dezent die Sektionsfarbe) ---- */
.ds-badge {
  width: 40px; height: 40px;
  flex: 0 0 auto;
  border-radius: var(--ds-radius);
  border: 1px solid var(--ds-bc-penn);
  background: var(--ds-tint-penn);
  color: var(--ds-ink-penn);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.125rem;
}
.ds-badge--penn    { background: var(--ds-tint-penn);    border-color: var(--ds-bc-penn);    color: var(--ds-ink-penn); }
.ds-badge--powder  { background: var(--ds-tint-powder);  border-color: var(--ds-bc-powder);  color: var(--ds-ink-powder); }
.ds-badge--olivine { background: var(--ds-tint-olivine); border-color: var(--ds-bc-olivine); color: var(--ds-ink-olivine); }
.ds-badge--gray    { background: var(--ds-tint-gray);    border-color: var(--ds-bc-gray);    color: var(--ds-ink-gray); }

/* ---- Button (primär = Penn Blue) ---- */
.ds-btn {
  display: inline-flex; align-items: center; gap: 8px;
  flex: 0 0 auto;
  padding: 8px 16px;
  border: 0; border-radius: var(--ds-radius-sm);
  background: var(--ds-penn); color: #fff;
  font-size: .875rem; font-weight: 600;
  cursor: pointer; text-decoration: none;
  transition: background .15s ease;
}
.ds-btn:hover { background: var(--ds-penn-hover); }

/* ---- KPI-Karte ---- */
.ds-kpi {
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius);
  padding: 16px;
}
.ds-kpi__head { display: flex; align-items: flex-start; justify-content: space-between; }
.ds-kpi__label {
  font-size: .75rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  color: var(--ds-cadet);
}
.ds-kpi__value { font-size: 1.5rem; font-weight: 700; color: var(--ds-penn); margin-top: 8px; }

/* ---- Filter-Pills ---- */
.ds-pill {
  padding: 4px 12px;
  border-radius: var(--ds-radius-pill);
  border: 1px solid var(--ds-border);
  background: var(--ds-surface);
  color: var(--ds-cadet);
  font-size: .8125rem; font-weight: 600;
  cursor: pointer;
  transition: all .15s ease;
}
.ds-pill:hover { border-color: var(--ds-ink-penn); color: var(--ds-penn); }
.ds-pill--active { background: var(--ds-penn); border-color: var(--ds-penn); color: #fff; }

/* ---- Suchfeld (Icon links, korrekt eingerückt) ---- */
.ds-search { position: relative; display: inline-flex; align-items: center; }
.ds-search__icon {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: var(--ds-cadet); font-size: .8125rem; pointer-events: none;
}
.ds-search__input {
  padding: 7px 12px 7px 32px;
  border: 1px solid var(--ds-border); border-radius: var(--ds-radius-sm);
  font-size: .875rem; color: var(--ds-penn);
  width: 180px; max-width: 100%;
  outline: none;
}
.ds-search__input:focus { border-color: var(--ds-ink-penn); box-shadow: 0 0 0 1px var(--ds-ink-penn); }

/* ============================================================================
   Seiten-Bausteine (ergänzt für steuergruppen-Referenz, Tailwind-frei).
   Token-Quelle: docs/DESIGN.md. Penn-Blue-Anker, Border statt Schatten,
   keine scattered Farben (DEC-003/DEC-004).
   ============================================================================ */

/* ---- Grundgerüst ---- */
.ds-main { padding: 16px; }
@media (min-width: 1024px) { .ds-main { padding: 32px; } }
.ds-container { max-width: 80rem; margin: 0 auto; }

/* truncate-Helfer (Tailwind-frei) */
.ds-truncate { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds-muted { color: #c9ccd1; }

/* ---- Abschnitts-Kopf im Content ---- */
.ds-section-head {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px; margin-bottom: 12px;
}
.ds-h2 {
  font-size: 1.125rem; font-weight: 600; color: var(--ds-penn);
  margin: 0; display: flex; align-items: center; gap: 8px;
}
.ds-h2__icon { color: var(--ds-cadet); font-size: .9em; }
.ds-count { font-size: .875rem; font-weight: 400; color: var(--ds-cadet); }

/* ---- KPI-Strip ---- */
.ds-kpi-strip { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 24px; }
@media (min-width: 768px) { .ds-kpi-strip { grid-template-columns: repeat(4, 1fr); } }

/* ---- Panel (weiße Box) ---- */
.ds-panel {
  background: var(--ds-surface); border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius); padding: 20px; margin-bottom: 24px;
}

/* ---- Aufgaben-Liste ---- */
.ds-tasklist { display: flex; flex-direction: column; gap: 8px; }
.ds-task {
  display: flex; align-items: center; gap: 12px; padding: 8px;
  border-radius: var(--ds-radius-sm); text-decoration: none; transition: background .15s ease;
}
.ds-task:hover { background: var(--ds-bg); }
.ds-task__title { font-size: .875rem; color: #1F2937; flex: 1 1 auto; }
.ds-task__meta { font-size: .75rem; color: var(--ds-cadet); white-space: nowrap; }
.ds-task__meta--danger { color: #DC2626; font-weight: 500; }

/* ---- Status-Badge (klein, getönt) ---- */
.ds-status {
  flex: 0 0 auto; padding: 2px 8px; border-radius: var(--ds-radius-sm);
  font-size: .6875rem; font-weight: 600; background: var(--ds-tint-gray); color: var(--ds-ink-gray);
}
.ds-status--arbeit { background: var(--ds-tint-penn); color: var(--ds-ink-penn); }
.ds-status--pruefung { background: var(--ds-tint-olivine); color: var(--ds-ink-olivine); }

/* ---- Zähl-Pill ---- */
.ds-count-pill {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 22px; padding: 0 6px; border-radius: var(--ds-radius-pill);
  background: var(--ds-tint-penn); color: var(--ds-ink-penn); font-size: .75rem; font-weight: 700;
}

/* ---- Gruppen-Karten ---- */
.ds-cards { display: grid; grid-template-columns: 1fr; gap: 16px; margin-bottom: 40px; }
@media (min-width: 768px)  { .ds-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .ds-cards { grid-template-columns: repeat(3, 1fr); } }
.ds-gcard { display: block; text-decoration: none; padding: 16px; transition: border-color .15s ease; }
.ds-gcard:hover { border-color: var(--ds-bc-penn); }
.ds-gcard__top { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.ds-gcard__grow { flex: 1 1 auto; min-width: 0; }
.ds-gcard__title { font-weight: 600; color: var(--ds-penn); margin: 0; }
.ds-gcard__sub { font-size: .75rem; color: var(--ds-cadet); margin: 2px 0 0; }
.ds-gcard__snippet { background: var(--ds-bg); border-radius: var(--ds-radius-sm); padding: 8px 12px; font-size: .75rem; }
.ds-gcard__snippet-meta { color: var(--ds-cadet); margin-bottom: 2px; }
.ds-gcard__snippet-title { color: #374151; font-weight: 500; }
.ds-empty { font-size: .75rem; color: #c9ccd1; font-style: italic; padding: 4px 0; }

/* ---- Hinweis-Box ---- */
.ds-note {
  background: var(--ds-tint-penn); border: 1px solid var(--ds-bc-penn);
  border-radius: var(--ds-radius); padding: 20px; margin-bottom: 40px; text-align: center;
}
.ds-note__icon { color: var(--ds-ink-penn); font-size: 1.5rem; margin-bottom: 8px; }
.ds-note__text { font-size: .875rem; color: var(--ds-cadet); margin: 0; }

/* ---- Filterbar ---- */
.ds-filterbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ---- Tabelle ---- */
.ds-tablewrap {
  background: var(--ds-surface); border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius); overflow: hidden;
}
.ds-table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.ds-table thead { background: var(--ds-bg); }
.ds-table th {
  padding: 10px 16px; text-align: left; font-weight: 600;
  font-size: .6875rem; color: var(--ds-cadet); text-transform: uppercase; letter-spacing: .05em;
}
.ds-table td { padding: 12px 16px; vertical-align: middle; }
.ds-table th.ds-c, .ds-table td.ds-c { text-align: center; }
.ds-table tbody tr { border-top: 1px solid #F1F2F4; cursor: pointer; transition: background .15s ease; }
.ds-table tbody tr:hover { background: var(--ds-bg); }
.ds-cell-group { display: flex; align-items: center; gap: 12px; }
.ds-cell-title { font-weight: 500; color: #111827; display: flex; align-items: center; gap: 6px; }
.ds-cell-desc { font-size: .75rem; color: var(--ds-cadet); }
.ds-leitung { color: var(--ds-cadet); white-space: nowrap; }
.ds-active { color: var(--ds-ink-olivine); font-weight: 500; white-space: nowrap; }
.ds-active__dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--ds-ink-olivine); margin-right: 4px; }
.ds-iconbtn { background: none; border: 0; color: #c9ccd1; cursor: pointer; transition: color .15s ease; }
.ds-iconbtn:hover { color: #DC2626; }
.ds-mitglied-check { color: var(--ds-ink-olivine); font-size: .75rem; }
.ds-noresults { padding: 32px; text-align: center; color: var(--ds-cadet); font-size: .875rem; }
.ds-noresults i { font-size: 1.5rem; color: #d1d5db; display: block; margin-bottom: 8px; }

/* responsive Spalten (ersetzt hidden lg:table-cell / hidden sm:table-cell / hidden md:block) */
@media (max-width: 1023px) { .ds-hide-lg { display: none; } }
@media (max-width: 639px)  { .ds-hide-sm { display: none; } }
@media (max-width: 767px)  { .ds-hide-md { display: none; } }

/* ============================================================================
   u-* Utility-Schicht (DEC-007) — eigene, vollständige Utilities, KEIN Tailwind-Build.
   Layout/Spacing/Typografie 1:1; FARBEN nur über DS-Tokens (keine Tailwind-Skalen).
   ============================================================================ */

/* Display & Flex/Grid */
.u-flex{display:flex} .u-inline-flex{display:inline-flex} .u-grid{display:grid}
.u-block{display:block} .u-inline-block{display:inline-block} .u-hidden{display:none}
.u-items-center{align-items:center} .u-items-start{align-items:flex-start} .u-items-end{align-items:flex-end}
.u-justify-between{justify-content:space-between} .u-justify-center{justify-content:center} .u-justify-end{justify-content:flex-end}
.u-flex-wrap{flex-wrap:wrap} .u-flex-col{flex-direction:column}
.u-grow{flex:1 1 auto} .u-shrink-0{flex:0 0 auto}
.u-w-full{width:100%} .u-mx-auto{margin-left:auto;margin-right:auto}

/* Typografie */
.u-text-xs{font-size:.75rem} .u-text-sm{font-size:.875rem} .u-text-base{font-size:1rem}
.u-text-lg{font-size:1.125rem} .u-text-xl{font-size:1.25rem} .u-text-2xl{font-size:1.5rem} .u-text-3xl{font-size:1.875rem}
.u-font-medium{font-weight:500} .u-font-semibold{font-weight:600} .u-font-bold{font-weight:700}
.u-text-center{text-align:center} .u-text-left{text-align:left} .u-text-right{text-align:right}
.u-uppercase{text-transform:uppercase} .u-nowrap{white-space:nowrap} .u-leading-tight{line-height:1.25}

/* Farb-Helfer — NUR DS-Tokens (DEC-007 Farb-Regel) */
.u-text-ink{color:var(--ds-penn)}        /* Überschriften/Anker */
.u-text-body{color:#374151}              /* Fließtext */
.u-text-muted{color:var(--ds-cadet)}     /* Sekundärtext */
.u-text-faint{color:#9ca3af}             /* Icons/Tertiär */
.u-bg-surface{background:var(--ds-surface)} .u-bg-subtle{background:var(--ds-bg)}

/* Spacing-Skala (rem): 1=.25 2=.5 3=.75 4=1 5=1.25 6=1.5 8=2 10=2.5 */
.u-p-0{padding:0} .u-p-1{padding:.25rem} .u-p-2{padding:.5rem} .u-p-3{padding:.75rem} .u-p-4{padding:1rem} .u-p-5{padding:1.25rem} .u-p-6{padding:1.5rem} .u-p-8{padding:2rem}
.u-px-1{padding-left:.25rem;padding-right:.25rem} .u-px-2{padding-left:.5rem;padding-right:.5rem} .u-px-3{padding-left:.75rem;padding-right:.75rem} .u-px-4{padding-left:1rem;padding-right:1rem} .u-px-5{padding-left:1.25rem;padding-right:1.25rem} .u-px-6{padding-left:1.5rem;padding-right:1.5rem}
.u-py-1{padding-top:.25rem;padding-bottom:.25rem} .u-py-2{padding-top:.5rem;padding-bottom:.5rem} .u-py-3{padding-top:.75rem;padding-bottom:.75rem} .u-py-4{padding-top:1rem;padding-bottom:1rem} .u-py-5{padding-top:1.25rem;padding-bottom:1.25rem} .u-py-6{padding-top:1.5rem;padding-bottom:1.5rem}
.u-pt-2{padding-top:.5rem} .u-pt-4{padding-top:1rem} .u-pb-2{padding-bottom:.5rem} .u-pb-4{padding-bottom:1rem} .u-pl-2{padding-left:.5rem} .u-pl-4{padding-left:1rem} .u-pr-2{padding-right:.5rem} .u-pr-4{padding-right:1rem}
.u-m-0{margin:0} .u-mt-1{margin-top:.25rem} .u-mt-2{margin-top:.5rem} .u-mt-3{margin-top:.75rem} .u-mt-4{margin-top:1rem} .u-mt-6{margin-top:1.5rem}
.u-mb-1{margin-bottom:.25rem} .u-mb-2{margin-bottom:.5rem} .u-mb-3{margin-bottom:.75rem} .u-mb-4{margin-bottom:1rem} .u-mb-5{margin-bottom:1.25rem} .u-mb-6{margin-bottom:1.5rem} .u-mb-8{margin-bottom:2rem}
.u-ml-1{margin-left:.25rem} .u-ml-2{margin-left:.5rem} .u-ml-3{margin-left:.75rem} .u-ml-4{margin-left:1rem}
.u-mr-1{margin-right:.25rem} .u-mr-2{margin-right:.5rem} .u-mr-3{margin-right:.75rem} .u-mr-4{margin-right:1rem}
.u-gap-1{gap:.25rem} .u-gap-2{gap:.5rem} .u-gap-3{gap:.75rem} .u-gap-4{gap:1rem} .u-gap-5{gap:1.25rem} .u-gap-6{gap:1.5rem}

/* Tag — uniform, dezent (ersetzt bunte Kategorie-Pills; DEC-005/007 Farb-Regel) */
.ds-tag{display:inline-block;padding:2px 10px;border-radius:var(--ds-radius-pill);background:var(--ds-tint-penn);color:var(--ds-ink-penn);font-size:.75rem;font-weight:600}

/* Nachgezogene Utilities (von Modul-Migrationen aufgedeckt) */
.u-py-8{padding-top:2rem;padding-bottom:2rem} .u-pt-3{padding-top:.75rem}
.u-min-w-0{min-width:0}
.u-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.u-border-t{border-top:1px solid var(--ds-border)}

/* Rahmen + Rundung (DEC-007/DESIGN.md-Soll; Farbe IMMER über DS-Token, nicht Tailwind-Default).
   Rundung nur die 3 Radien, die exakt mit Tailwind UND der DS-Skala übereinstimmen
   (rounded-lg=8px, rounded-xl=12px, rounded-full). Tailwind rounded(4px)/rounded-md(6px)/
   rounded-2xl(16px) haben kein DS-Pendant → bleiben Handarbeit (Radius-Entscheidung). */
.u-border{border:1px solid var(--ds-border)}
.u-border-b{border-bottom:1px solid var(--ds-border)}
.u-rounded-lg{border-radius:var(--ds-radius-sm)}   /* 8px */
.u-rounded-xl{border-radius:var(--ds-radius)}      /* 12px */
.u-rounded-full{border-radius:var(--ds-radius-pill)}

/* Info-Box (dezent, linksbündig) */
.ds-info{background:var(--ds-tint-penn);border:1px solid var(--ds-bc-penn);border-radius:var(--ds-radius-sm);padding:12px;font-size:.75rem;color:var(--ds-cadet)}

/* Formular-Input — font-size:16px verhindert iOS-Auto-Zoom beim Fokus (Mobile-Checkliste §4) */
.ds-input{padding:8px 12px;border:1px solid var(--ds-border);border-radius:var(--ds-radius-sm);font-size:16px;color:var(--ds-penn);outline:none}
.ds-input:focus{border-color:var(--ds-ink-penn);box-shadow:0 0 0 2px var(--ds-tint-penn)}

/* Daten-/Ergebnis-Tabelle (klassenlose th/td, eigene Zellen-Stile) */
.ds-grades{width:100%;border-collapse:collapse;font-size:.875rem}
.ds-grades thead{background:var(--ds-bg)}
.ds-grades th{padding:8px 16px;text-align:left;font-size:.6875rem;font-weight:600;color:var(--ds-cadet);text-transform:uppercase}
.ds-grades td{padding:10px 16px;white-space:nowrap;color:var(--ds-penn)}
.ds-grades tbody tr{border-top:1px solid var(--ds-border)}
.ds-row-best{background:var(--ds-tint-olivine)}

.u-overflow-x{overflow-x:auto}

/* Nachgezogen für schueler_verwaltung-Migration (2026-05-29, additiv, Fenster A) */
.u-font-normal{font-weight:400}
.u-cursor-help{cursor:help}
/* Statistik-Grid 2→4→6 (analog ds-kpi-strip/ds-cards) */
.ds-statgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media (min-width:768px){.ds-statgrid{grid-template-columns:repeat(4,1fr)}}
@media (min-width:1024px){.ds-statgrid{grid-template-columns:repeat(6,1fr)}}
/* Button-Varianten: danger (destruktiv, semantisch rot DEC-009 #2) + ghost (sekundär) */
.ds-btn--danger{background:#DC2626}
.ds-btn--danger:hover{background:#B91C1C}
.ds-btn--ghost{background:transparent;color:var(--ds-penn);border:1px solid var(--ds-border)}
.ds-btn--ghost:hover{background:var(--ds-bg)}
/* Chrome-Fallback: tailwind-output.css enthaelt aktuell kein lg:translate-x-0 fuer die fixed Sidebar. */
@media (min-width:1024px){.lg\:translate-x-0{transform:translateX(0) !important}}