/* ============================================================================
 * theme-v2.css – gemeinsame Design-Ebene aller Cockpit-Apps ("ruhigerer Look",
 * abgenommene Vorschau vom 2026-09-23).
 * Kanonische Quelle: cockpit-Repo core/js/theme-v2.css  ->  public/js/_core/.
 * Wird NACH tailwind.css/style.css geladen und überschreibt gezielt einzelne
 * Tailwind-Utilities, damit nicht hunderte Markup-Stellen pro App angefasst
 * werden müssen:
 *   1. Überschriften in Sora, Fließtext bleibt Inter
 *   2. Zahlen (.tabular-nums/.tabular) und kleine Großbuchstaben-Labels wie im Postfach (Maßstab, 13.10.):
 *      Inter mit gleich breiten Ziffern; IBM Plex Mono nur noch für Technisches (Tastenkürzel, Code)
 *   3. Dünnere, leisere Linien (1px statt 2px, im Dunkelmodus ein halbtransparentes
 *      Slate statt kräftigem #334155), weichere Ecken/Schatten, Gewicht 900 -> 700
 * Zurückdrehen: den <link> auf theme-v2.css in index.html entfernen.
 * ========================================================================== */
:root{
  --f-body:Inter,system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-display:'Sora',Inter,system-ui,-apple-system,'Segoe UI',sans-serif;
  /* --f-mono heißt aus Gewohnheit noch so: Zahlen und Etiketten stehen wie im Postfach in Inter (gleich breite
     Ziffern über font-variant-numeric); echte Monospace nur noch für Tastenkürzel und Code (--f-code). */
  --f-mono:Inter,system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-code:'IBM Plex Mono',ui-monospace,SFMono-Regular,Consolas,monospace;
  --v2-line-dark:rgba(148,163,184,.16);
  --v2-line-dark-strong:rgba(148,163,184,.28);
  --v2-shadow:0 1px 2px rgba(15,23,42,.05),0 8px 24px -14px rgba(15,23,42,.14);
  --v2-shadow-dark:0 1px 2px rgba(0,0,0,.4),0 12px 32px -18px rgba(0,0,0,.65);
}

/* ---- 1. Schrift ---------------------------------------------------------- */
/* Fließtext überall Inter wie im Postfach (Maßstab, 13.10.) – ohne das fiel z. B. der Schulplaner auf die
   Systemschrift zurück; Tailwinds font-sans/font-mono zeigen auf dieselben Schriften wie der Rest der Suite. */
:root body,:root .font-sans{font-family:var(--f-body)}
/* Ziffern überall gleich breit (Tabellenziffern), auch mitten im Text – Beträge und Zeiten stehen so untereinander */
:root body{font-variant-numeric:tabular-nums}
:root .font-mono{font-family:var(--f-mono)}
:root h1,:root h2,:root h3,:root .font-display{font-family:var(--f-display);font-weight:600;letter-spacing:-.012em}
:root h1.font-black,:root h2.font-black,:root h3.font-black{font-weight:600}
:root .font-black{font-weight:700}
:root .font-extrabold{font-weight:650}

/* ---- 2. Zahlen & Mini-Labels wie im Postfach ------------------------------ */
:root .tabular-nums,:root .tabular,:root .mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums;letter-spacing:-.005em}
:root .uppercase[class*="text-[9px]"],:root .uppercase[class*="text-[10px]"],:root .uppercase[class*="text-[11px]"]{
  font-family:var(--f-body);letter-spacing:.07em;font-weight:700}
:root kbd,:root code{font-family:var(--f-code)}

/* ---- 3. Linien, Ecken, Schatten ----------------------------------------- */
:root .border-2{border-width:1px}
:root .border-b-2{border-bottom-width:1px}
:root .border-t-2{border-top-width:1px}
:root .border-l-2{border-left-width:1px}
:root .border-r-2{border-right-width:1px}
:root .rounded-3xl{border-radius:20px}
:root .rounded-2xl{border-radius:16px}
:root .shadow-lg,:root .shadow-xl,:root .shadow-2xl{box-shadow:var(--v2-shadow)}
:root.dark .shadow-lg,:root.dark .shadow-xl,:root.dark .shadow-2xl{box-shadow:var(--v2-shadow-dark)}

/* Dunkelmodus: kräftiges Slate-700/800 -> leise, halbtransparente Linie */
:root.dark .border-slate-700,:root.dark .dark\:border-slate-700,
:root.dark .border-slate-800,:root.dark .dark\:border-slate-800,
:root.dark .border-b-slate-700,:root.dark .divide-slate-700>*+*,:root.dark .divide-slate-800>*+*,
:root.dark .dark\:divide-slate-700>*+*,:root.dark .dark\:divide-slate-800>*+*{border-color:var(--v2-line-dark)}
:root.dark .dark\:hover\:border-slate-600:hover,:root.dark .hover\:border-slate-600:hover{border-color:var(--v2-line-dark-strong)}
:root.dark .border-slate-600,:root.dark .dark\:border-slate-600{border-color:var(--v2-line-dark-strong)}
:root.dark ::-webkit-scrollbar-thumb{background:rgba(148,163,184,.25)}
/* Farbschema für Bildlaufleiste & Formular-Elemente: ohne diese Angabe zeichnet der Browser im Dunkelmodus eine
   helle Leiste rechts („rechts ein Rand, als ob der Kopf nicht durchgeht“ – Philipp 09.10.2026) */
:root{color-scheme:light}
:root.dark{color-scheme:dark}

/* ---- 4. Bewegung: Ansichtswechsel (View Transitions) --------------------- */
::view-transition-old(root),::view-transition-new(root){animation-duration:.2s;animation-timing-function:cubic-bezier(.2,.8,.2,1)}
::view-transition-old(root){animation-name:v2-vt-out}
::view-transition-new(root){animation-name:v2-vt-in}
@keyframes v2-vt-out{to{opacity:0;transform:translateY(-4px)}}
@keyframes v2-vt-in{from{opacity:0;transform:translateY(8px)}}
/* Navigationsleisten bleiben beim Wechsel ruhig stehen */
#cockpit-bottom-nav,#bottom-nav-slot{view-transition-name:v2-bottomnav}
#cockpit-nav-rail,#pp-nav-rail-slot{view-transition-name:v2-navrail}
@media (prefers-reduced-motion:reduce){
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}

/* ---- 5. Platzhalter-Gerüste beim Laden (ux.js skeletonHTML) --------------- */
.ux-skel-wrap{display:flex;flex-direction:column;gap:10px;padding:8px 0}
.ux-skel-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.ux-skel-card{display:flex;flex-direction:column;gap:10px;padding:16px;border-radius:16px;border:1px solid rgba(148,163,184,.25)}
.ux-skel-row{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:14px;border:1px solid rgba(148,163,184,.2)}
.ux-skel-col{display:flex;flex-direction:column;gap:7px;flex:1}
.ux-skel{display:block;border-radius:8px;background:linear-gradient(90deg,rgba(148,163,184,.16) 25%,rgba(148,163,184,.30) 37%,rgba(148,163,184,.16) 63%);background-size:400% 100%;animation:v2-skel 1.3s ease infinite}
.ux-skel-row>.ux-skel{border-radius:50%;flex:none}
@keyframes v2-skel{0%{background-position:100% 50%}100%{background-position:0 50%}}
@media (prefers-reduced-motion:reduce){.ux-skel{animation:none}}

/* ---- Personen: Avatar statt Farbpunkt (person.js, #362) ------------------- */
.p-av{display:inline-grid;place-items:center;flex:none;border-radius:50%;background:var(--pc,#64748b);color:#fff;font-family:var(--f-display);font-weight:600;line-height:1;letter-spacing:0;font-variant-numeric:normal;vertical-align:middle;box-shadow:0 0 0 1.5px var(--p-ring,transparent)}
.p-av svg{width:62%;height:62%}
.p-chip{display:inline-flex;align-items:center;gap:6px;min-width:0}
.p-chip-n{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---- 4. Klapplisten (components/selectPop.js) ------------------------------
   Eigene Liste statt der Systemliste: Fläche, Linien und Akzent wie die Apps (Postfach-Maßstab),
   am Handy als Blatt von unten. Liegt über Fenstern (z-index 1050) und Leaflet (1000). */
:root{--sp-bg:#fff;--sp-line:#d5dbe4;--sp-text:#0f172a;--sp-faint:#8a98ad;--sp-hover:rgb(var(--acc-600,37 99 235)/.09);--sp-sel:rgb(var(--acc-700,29 78 216));
  --sp-shadow:0 18px 44px -12px rgba(15,23,42,.3),0 2px 6px rgba(15,23,42,.06)}
:root.dark{--sp-bg:#0f172a;--sp-line:rgba(255,255,255,.14);--sp-text:#e6ebf3;--sp-faint:#7c8aa3;--sp-hover:rgb(var(--acc-500,59 130 246)/.18);--sp-sel:rgb(var(--acc-300,147 197 253));
  --sp-shadow:0 22px 48px -10px rgba(0,0,0,.72),0 0 0 1px rgba(255,255,255,.02)}
.sp-pop{position:fixed;z-index:1200;display:flex;flex-direction:column;box-sizing:border-box;width:max-content;max-width:min(460px,calc(100vw - 16px));
  padding:6px;border:1px solid var(--sp-line);border-radius:14px;background:var(--sp-bg);color:var(--sp-text);box-shadow:var(--sp-shadow);
  font:400 14px/1.35 var(--f-body);text-align:left;transform-origin:top center;animation:sp-in .12s ease-out}
.sp-pop.sp-above{transform-origin:bottom center;animation-name:sp-in-up}
.sp-pop,.sp-pop *{box-sizing:border-box}
.sp-pop [hidden]{display:none!important}
.sp-list{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;outline:none}
.sp-opt{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:9px;cursor:pointer;user-select:none;-webkit-user-select:none;overflow-wrap:anywhere}
.sp-opt .sp-t{flex:1;min-width:0}
.sp-opt svg{flex:none;width:16px;height:16px;color:var(--sp-sel);visibility:hidden}
.sp-opt.sp-act{background:var(--sp-hover)}
.sp-opt[aria-selected="true"]{color:var(--sp-sel);font-weight:600}
.sp-opt[aria-selected="true"] svg{visibility:visible}
.sp-opt[aria-disabled="true"]{opacity:.45;cursor:default}
.sp-grp{padding:10px 10px 4px;font:700 10.5px/1.2 var(--f-body);letter-spacing:.07em;text-transform:uppercase;color:var(--sp-faint)}
.sp-list>.sp-grp:first-child{padding-top:4px}
.sp-empty{padding:12px 10px;color:var(--sp-faint)}
.sp-search{display:flex;align-items:center;gap:8px;flex:none;height:36px;margin:0 0 6px;padding:0 10px;border:1px solid var(--sp-line);border-radius:10px;color:var(--sp-faint);cursor:text}
.sp-search:focus-within{border-color:rgb(var(--acc-500,59 130 246)/.6)}
.sp-search input,.sp-search input:focus,.sp-search input:focus-visible{flex:1;min-width:0;height:100%;padding:0;border:0;outline:0!important;background:transparent;color:var(--sp-text);font:inherit;box-shadow:none}
.sp-back{position:fixed;inset:0;z-index:1199;background:rgba(2,6,23,.45);animation:sp-fade .15s ease-out}
.sp-pop.sp-sheet{left:0;right:0;bottom:0;top:auto;width:auto;max-width:none;max-height:78vh;padding:6px 10px calc(10px + env(safe-area-inset-bottom,0px));
  border-bottom:0;border-radius:18px 18px 0 0;animation:sp-sheet .2s ease-out}
.sp-grip{flex:none;width:40px;height:4px;margin:2px auto 6px;border-radius:2px;background:var(--sp-line)}
/* nur im Auswahlfenster (selectPop) – der Schulplaner-Kopf heißt ebenfalls .sp-head (Avatar rutschte sonst in die Mitte) */
.sp-pop .sp-head{display:flex;align-items:center;gap:8px;flex:none;padding:0 2px 8px 6px;font:600 15px/1.3 var(--f-display)}
.sp-pop .sp-head span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sp-x{display:grid;place-items:center;width:36px;height:36px;border:0;border-radius:10px;background:transparent;color:var(--sp-faint);cursor:pointer}
.sp-sheet .sp-opt{min-height:46px;padding:10px 12px;font-size:15px}
.sp-sheet .sp-search{height:42px}
@keyframes sp-in{from{opacity:0;transform:translateY(-4px) scale(.98)}}
@keyframes sp-in-up{from{opacity:0;transform:translateY(4px) scale(.98)}}
@keyframes sp-sheet{from{transform:translateY(100%)}}
@keyframes sp-fade{from{opacity:0}}
@media (prefers-reduced-motion:reduce){.sp-pop,.sp-back{animation:none}}

/* ---- 5. Diagramm-Hinweise (components/chartTip.js) --------------------------
   Wert unter Maus und Finger: schwebender Hinweis, Hilfslinie oder Band, Punkte je Reihe. */
.ct-tip{position:fixed;z-index:1300;pointer-events:none;box-sizing:border-box;max-width:min(300px,calc(100vw - 16px));padding:7px 10px;
  border:1px solid var(--sp-line);border-radius:10px;background:var(--sp-bg);color:var(--sp-text);box-shadow:var(--sp-shadow);
  font:400 12.5px/1.45 var(--f-body);font-variant-numeric:tabular-nums;text-align:left}
.ct-tip b{display:block;margin-bottom:1px;font-weight:600;font-size:11.5px;color:var(--sp-faint)}
.ct-tip b:only-child{margin:0;font-size:12.5px;color:var(--sp-text)}
.ct-row{display:flex;align-items:center;gap:6px;white-space:nowrap}
.ct-row i{flex:none;width:8px;height:8px;border-radius:50%}
.ct-row strong{margin-left:auto;padding-left:10px;font-weight:650}
.ct-row strong.solo{margin-left:0;padding-left:0}
svg[data-xchart]{touch-action:pan-y;outline:none}
svg[data-xchart]:focus-visible{outline:2px solid rgb(var(--acc-500,59 130 246)/.5);outline-offset:2px;border-radius:6px}
.ct-hover .ct-guide{stroke:var(--sp-faint);stroke-width:1;stroke-dasharray:3 3}
.ct-back .ct-band{fill:rgb(var(--acc-500,59 130 246)/.1)}
.ct-hover .ct-dot{stroke:var(--sp-bg);stroke-width:2}
.ct-on{filter:brightness(1.12) saturate(1.08)}