/*
 * AkademieOS — Main Stylesheet
 * Version: 1.0
 * Stand: 2026-04-06
 *
 * Dieses CSS ist das vorcompilierte Ergebnis des Design-Systems.
 * Es ersetzt Tailwind JIT im Betrieb und enthält alle benötigten Utility-
 * und Komponenten-Klassen.
 *
 * Inhaltsverzeichnis:
 *   1.  @font-face Deklarationen
 *   2.  CSS Custom Properties (Design Tokens)
 *   3.  Reset & Base Styles
 *   4.  Body & Document Styles
 *   5.  Scrollbar Styling
 *   6.  Material Symbols Icons
 *   7.  Typografie Utility Classes
 *   8.  Surface / Background Utilities
 *   9.  Text Color Utilities
 *  10.  Glassmorphism-Effekte
 *  11.  Layout-Klassen (Sidebar, Header, Main-Content)
 *  12.  Navigation (Sidebar)
 *  13.  Input-Felder & Formulare
 *  14.  Buttons
 *  15.  Toggle Switches
 *  16.  Cards & Container
 *  17.  Tabellen
 *  18.  Badges & Status-Chips
 *  19.  Branding-Elemente
 *  20.  Section-Header-Muster
 *  21.  Avatar-Komponenten
 *  22.  FAB (Floating Action Button)
 *  23.  Status-Indikatoren
 *  24.  Animationen & Transitions
 *  25.  Gradient Utilities
 *  26.  Responsive Breakpoints
 *  27.  Login-Page spezifische Styles
 *  28.  Grid-Utilities
 *  29.  Spacing Utilities
 *  30.  Flex Utilities
 *  31.  Misc Utilities
 */


/* =============================================================================
   1. @font-face Deklarationen
   ============================================================================= */

/* Inter — Body Font (Variable Font) */
@font-face {
  font-family: 'Inter';
  src: url("../fonts/inter/Inter-VariableFont_slnt,wght.260c81a4759b.woff2") format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Inter Fallback — statische Gewichte (falls Variable Font nicht vorhanden) */
@font-face {
  font-family: 'Inter';
  src: url("../fonts/inter/Inter-Light.260c81a4759b.woff2") format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url("../fonts/inter/Inter-Regular.260c81a4759b.woff2") format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url("../fonts/inter/Inter-Medium.260c81a4759b.woff2") format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url("../fonts/inter/Inter-SemiBold.260c81a4759b.woff2") format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url("../fonts/inter/Inter-Bold.260c81a4759b.woff2") format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Noto Serif — Headline Font */
@font-face {
  font-family: 'Noto Serif';
  src: url("../fonts/noto-serif/NotoSerif-Regular.c919254265f0.woff2") format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Noto Serif';
  src: url("../fonts/noto-serif/NotoSerif-Italic.882c6b9ae38e.woff2") format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Noto Serif';
  src: url("../fonts/noto-serif/NotoSerif-SemiBold.c919254265f0.woff2") format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Noto Serif';
  src: url("../fonts/noto-serif/NotoSerif-Bold.c919254265f0.woff2") format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Noto Serif';
  src: url("../fonts/noto-serif/NotoSerif-ExtraBold.c919254265f0.woff2") format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Noto Serif';
  src: url("../fonts/noto-serif/NotoSerif-Black.c919254265f0.woff2") format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* Material Symbols Outlined — Icon Font (Variable Font) */
@font-face {
  font-family: 'Material Symbols Outlined';
  src: url("../fonts/material-symbols/MaterialSymbolsOutlined[FILL,GRAD,opsz,wght].fd548007af5e.woff2") format('woff2-variations');
  font-weight: 100 700;
  font-style: normal;
  font-display: block; /* block verhindert FOUT bei Icon-Fonts */
}


/* =============================================================================
   2. CSS Custom Properties (Design Tokens)
   Material You — Dark Scheme
   ============================================================================= */

:root {
  /* --- Surface Hierarchy (Tonal Layering — dunkel nach hell) --- */
  --surface-container-lowest:  #060e20;  /* Elevation 0 — Input-Felder, tiefste Ebene */
  --surface-dim:               #0b1326;  /* Elevation 1 — Seiten-Hintergrund          */
  --surface:                   #0b1326;  /* identisch mit surface-dim                  */
  --background:                #0b1326;  /* identisch                                  */
  --surface-container-low:     #131b2e;  /* Elevation 2 — Cards, Stat-Karten          */
  --surface-container:         #171f33;  /* Elevation 3 — Sidebar (mit opacity)        */
  --surface-container-high:    #222a3d;  /* Elevation 4 — Hover-States, Tabellen-Header */
  --surface-container-highest: #2d3449;  /* Elevation 5 — Avatar, Chips/Tags          */
  --surface-variant:           #2d3449;  /* identisch mit surface-container-highest    */
  --surface-bright:            #31394d;  /* Elevation 6 — Hover Secondary Button      */

  /* --- Primary — Sapphire/Blau --- */
  --primary:                   #b0c6ff;
  --on-primary:                #002c6f;
  --primary-container:         #00153d;
  --on-primary-container:      #4b7de6;
  --primary-fixed:             #d9e2ff;
  --primary-fixed-dim:         #b0c6ff;
  --on-primary-fixed:          #001945;
  --on-primary-fixed-variant:  #00419c;
  --inverse-primary:           #1d59c1;
  --surface-tint:              #b0c6ff;

  /* --- Secondary — Grün --- */
  --secondary:                 #66dd8b;
  --on-secondary:              #003919;
  --secondary-container:       #25a55a;
  --on-secondary-container:    #003115;
  --secondary-fixed:           #83fba5;
  --secondary-fixed-dim:       #66dd8b;

  /* --- Tertiary — Gold/Amber --- */
  --tertiary:                  #fbbc00;
  --on-tertiary:               #402d00;
  --tertiary-container:        #211600;
  --tertiary-fixed:            #ffdfa0;
  --tertiary-fixed-dim:        #fbbc00;

  /* --- Text-Farben --- */
  --on-surface:                #dae2fd;  /* Primärer Text auf dunklen Hintergründen   */
  --on-background:             #dae2fd;  /* identisch                                  */
  --on-surface-variant:        #c6c6cd;  /* Sekundärer Text, Labels, Placeholder      */
  --outline:                   #909097;  /* Input-Placeholder-Text                    */
  --outline-variant:           #45464d;  /* Borders, Trennlinien                      */

  /* --- Fehlerfarben --- */
  --error:                     #ffb4ab;
  --error-container:           #93000a;
  --on-error:                  #690005;
  --on-error-container:        #ffdad6;

  /* --- Inverse --- */
  --inverse-surface:           #dae2fd;
  --inverse-on-surface:        #283044;

  /* --- Typografie --- */
  --font-headline:  'Noto Serif', Georgia, 'Times New Roman', serif;
  --font-body:      'Inter', system-ui, -apple-system, sans-serif;
  --font-label:     'Inter', system-ui, -apple-system, sans-serif;

  /* --- Layout-Dimensionen --- */
  --sidebar-width:             256px;   /* 16rem / w-64  */
  --header-height:             64px;    /* 4rem  / h-16  */

  /* --- Effekte --- */
  --glass-blur:                24px;
  --glass-blur-md:             12px;

  /* --- Gradients --- */
  --gradient-sapphire: linear-gradient(135deg, #b0c6ff 0%, #4b7de6 100%);

  /* --- Border Radius --- */
  --radius-sm:    0.25rem;   /* rounded     */
  --radius-md:    0.5rem;    /* rounded-lg  */
  --radius-lg:    0.75rem;   /* rounded-xl  */
  --radius-full:  9999px;    /* rounded-full */

  /* --- Shadows --- */
  --shadow-sm:   0 1px 2px 0 rgba(0, 0, 0, 0.3);
  --shadow-md:   0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
  --shadow-lg:   0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
  --shadow-xl:   0 20px 25px -5px rgba(0, 0, 0, 0.6), 0 10px 10px -5px rgba(0, 0, 0, 0.3);
  --shadow-2xl:  0 25px 50px -12px rgba(0, 0, 0, 0.7);
  --shadow-primary: 0 10px 15px -3px rgba(176, 198, 255, 0.1);
}


/* =============================================================================
   3. Reset & Base Styles
   ============================================================================= */

/* Alpine.js — hide x-cloak elements until Alpine initializes */
[x-cloak] { display: none !important; }

/* Modal utility */
.overflow-hidden { overflow: hidden; }

/* Modal enter animation */
#modal-container > *:not(.modal-backdrop) {
  animation: modal-enter 0.2s ease-out;
}
@keyframes modal-enter {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  tab-size: 4;
}

/* Dark Mode — immer aktiv, kein Light Mode Fallback */
html.dark {
  color-scheme: dark;
}

img,
video,
svg {
  display: block;
  max-width: 100%;
}

button,
input,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

button {
  cursor: pointer;
  border: none;
  background: none;
}

a {
  color: inherit;
  text-decoration: none;
}

table {
  border-collapse: collapse;
}


/* =============================================================================
   4. Body & Document Styles
   ============================================================================= */

body {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--on-surface);
  background-color: var(--background);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Text-Selektion */
::selection {
  background-color: rgba(176, 198, 255, 0.3);
  color: var(--on-surface);
}


/* =============================================================================
   5. Scrollbar Styling (Webkit)
   ============================================================================= */

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

::-webkit-scrollbar-track {
  background: var(--surface-container-lowest);
}

::-webkit-scrollbar-thumb {
  background: var(--surface-container-high);
  border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--surface-container-highest);
}

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--surface-container-high) var(--surface-container-lowest);
}


/* =============================================================================
   6. Material Symbols Icons
   ============================================================================= */

.material-symbols-outlined {
  font-family: 'Material Symbols Outlined', sans-serif;
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* Icon-Grössen */
.icon-sm  { font-size: 14px; }
.icon-md  { font-size: 18px; }  /* text-lg */
.icon-lg  { font-size: 20px; }  /* text-xl */
.icon-xl  { font-size: 24px; }  /* Standard */
.icon-2xl { font-size: 36px; }  /* text-4xl */

/* Filled Icon Variant */
.icon-filled {
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}


/* =============================================================================
   7. Typografie Utility Classes
   ============================================================================= */

/* Schriftfamilien */
.font-headline { font-family: var(--font-headline); }
.font-body     { font-family: var(--font-body); }
.font-label    { font-family: var(--font-label); }

/* Schriftgewichte */
.font-light     { font-weight: 300; }
.font-normal    { font-weight: 400; }
.font-medium    { font-weight: 500; }
.font-semibold  { font-weight: 600; }
.font-bold      { font-weight: 700; }
.font-extrabold { font-weight: 800; }
.font-black     { font-weight: 900; }

/* Schriftgrößen */
.text-xs    { font-size: 0.75rem;    line-height: 1rem;    }  /* 12px */
.text-sm    { font-size: 0.875rem;   line-height: 1.25rem; }  /* 14px */
.text-base  { font-size: 1rem;       line-height: 1.5rem;  }  /* 16px */
.text-lg    { font-size: 1.125rem;   line-height: 1.75rem; }  /* 18px */
.text-xl    { font-size: 1.25rem;    line-height: 1.75rem; }  /* 20px */
.text-2xl   { font-size: 1.5rem;     line-height: 2rem;    }  /* 24px */
.text-3xl   { font-size: 1.875rem;   line-height: 2.25rem; }  /* 30px */
.text-4xl   { font-size: 2.25rem;    line-height: 2.5rem;  }  /* 36px */
.text-5xl   { font-size: 3rem;       line-height: 1;       }  /* 48px */
.text-6xl   { font-size: 3.5rem;     line-height: 1;       }  /* 56px — Seiten-Headline Admin */

/* Spezifische Grössen aus Design-Spec */
.text-label-xs { font-size: 0.6875rem; line-height: 1rem; }  /* 11px — Labels, Footer */
.text-badge    { font-size: 0.625rem;  line-height: 0.75rem; } /* 10px — Badges */

/* Letter-Spacing */
.tracking-tighter { letter-spacing: -0.05em; }
.tracking-tight   { letter-spacing: -0.025em; }
.tracking-normal  { letter-spacing: 0em; }
.tracking-wide    { letter-spacing: 0.025em; }
.tracking-wider   { letter-spacing: 0.05em; }
.tracking-widest  { letter-spacing: 0.1em; }
.tracking-brand   { letter-spacing: 0.2em; }   /* Sidebar Sub-Label */
.tracking-label   { letter-spacing: 0.15em; }  /* Formular-Labels */

/* Text-Transformation */
.uppercase   { text-transform: uppercase; }
.lowercase   { text-transform: lowercase; }
.capitalize  { text-transform: capitalize; }
.normal-case { text-transform: none; }

/* Line-Height */
.leading-none    { line-height: 1; }
.leading-tight   { line-height: 1.25; }
.leading-snug    { line-height: 1.375; }
.leading-normal  { line-height: 1.5; }
.leading-relaxed { line-height: 1.625; }
.leading-loose   { line-height: 2; }

/* Text-Effekte */
.text-glow {
  text-shadow: 0 0 12px rgba(176, 198, 255, 0.3);
}

/* Stat-Wert (grosse Zahlen) */
.stat-value {
  font-family: var(--font-headline);
  font-size: 1.875rem;
  font-weight: 700;
  line-height: 1;
}


/* =============================================================================
   8. Surface / Background Utilities
   ============================================================================= */

.bg-background             { background-color: var(--background); }
.bg-surface                { background-color: var(--surface); }
.bg-surface-dim            { background-color: var(--surface-dim); }
.bg-surface-container-lowest  { background-color: var(--surface-container-lowest); }
.bg-surface-container-low     { background-color: var(--surface-container-low); }
.bg-surface-container         { background-color: var(--surface-container); }
.bg-surface-container-high    { background-color: var(--surface-container-high); }
.bg-surface-container-highest { background-color: var(--surface-container-highest); }
.bg-surface-variant           { background-color: var(--surface-variant); }
.bg-surface-bright            { background-color: var(--surface-bright); }

.bg-primary           { background-color: var(--primary); }
.bg-on-primary        { background-color: var(--on-primary); }
.bg-primary-container { background-color: var(--primary-container); }

.bg-secondary           { background-color: var(--secondary); }
.bg-secondary-container { background-color: var(--secondary-container); }

.bg-tertiary           { background-color: var(--tertiary); }
.bg-tertiary-container { background-color: var(--tertiary-container); }

.bg-error           { background-color: var(--error); }
.bg-error-container { background-color: var(--error-container); }


/* =============================================================================
   9. Text Color Utilities
   ============================================================================= */

.text-on-surface         { color: var(--on-surface); }
.text-on-background      { color: var(--on-background); }
.text-on-surface-variant { color: var(--on-surface-variant); }
.text-outline            { color: var(--outline); }
.text-outline-variant    { color: var(--outline-variant); }

.text-primary                { color: var(--primary); }
.text-on-primary             { color: var(--on-primary); }
.text-on-primary-container   { color: var(--on-primary-container); }

.text-secondary              { color: var(--secondary); }
.text-on-secondary           { color: var(--on-secondary); }
.text-on-secondary-container { color: var(--on-secondary-container); }

.text-tertiary               { color: var(--tertiary); }
.text-on-tertiary            { color: var(--on-tertiary); }

.text-error                  { color: var(--error); }
.text-on-error               { color: var(--on-error); }
.text-on-error-container     { color: var(--on-error-container); }

.text-white { color: #ffffff; }
.text-black { color: #000000; }


/* =============================================================================
   10. Glassmorphism-Effekte
   ============================================================================= */

/* Login-Card — 60% opacity + starkem Blur */
.glass-card {
  background: rgba(34, 42, 61, 0.6);        /* surface-container-high @ 60% */
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
}

/* Header (Login-Page) — 70% opacity */
.glass-header-login {
  background: rgba(11, 19, 38, 0.7);        /* #0b1326 @ 70% */
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
}

/* Sidebar (Admin-Layout) — 70% opacity */
.glass-sidebar {
  background: rgba(23, 31, 51, 0.7);        /* #171f33 @ 70% */
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
}

/* Admin-Header — 60% opacity + schwächerem Blur */
.glass-header-admin {
  background: rgba(11, 19, 38, 0.6);        /* #0b1326 @ 60% */
  backdrop-filter: blur(var(--glass-blur-md));
  -webkit-backdrop-filter: blur(var(--glass-blur-md));
}


/* =============================================================================
   11. Layout-Klassen (Sidebar, Header, Main-Content)
   ============================================================================= */

/* --- Sidebar --- */
.sidebar {
  position: fixed;
  left: 0;
  top: 0;
  width: var(--sidebar-width);
  height: 100vh;
  z-index: 50;
  padding: 1rem;
  border-right: 1px solid rgba(34, 42, 61, 0.5);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

/* --- Admin-Header --- */
.admin-header {
  position: fixed;
  top: 0;
  right: 0;
  left: var(--sidebar-width);
  height: var(--header-height);
  z-index: 40;
  padding-left: 2rem;
  padding-right: 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* --- Main Content Area (Admin) --- */
.main-content {
  margin-left: var(--sidebar-width);
  padding-top: 6rem;     /* 96px — deckt Header + Extra-Space ab */
  padding-bottom: 3rem;
  padding-left: 3rem;
  padding-right: 3rem;
  min-height: 100vh;
}

/* --- Login-Page Header --- */
.login-header {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 50;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
}

/* --- Login-Page Footer --- */
.login-footer {
  position: fixed;
  bottom: 0;
  z-index: 50;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 2rem 3rem;
  background: transparent;
}

/* --- Login-Page Main --- */
.login-main {
  position: relative;
  z-index: 20;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: 5rem;
  padding-bottom: 8rem;
}

/* --- Background-Layer (Login) --- */
.bg-layer {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.bg-layer-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 10;
}

.bg-layer-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.05);
}


/* =============================================================================
   12. Navigation (Sidebar)
   ============================================================================= */

/* --- Logo-Bereich --- */
.sidebar-logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 2rem;
}

.sidebar-logo-icon {
  width: 2.5rem;         /* 40px */
  height: 2.5rem;
  border-radius: var(--radius-md);
  background: var(--gradient-sapphire);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.sidebar-logo-text {
  display: flex;
  flex-direction: column;
}

.sidebar-logo-wordmark {
  font-family: var(--font-headline);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--primary);
  letter-spacing: -0.025em;
  line-height: 1.25;
}

.sidebar-logo-sublabel {
  font-size: 0.625rem;
  color: var(--on-surface-variant);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/* --- Nav-Container --- */
.sidebar-nav {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

/* Trennlinie zwischen Haupt-Nav und Bottom-Nav */
.sidebar-nav-divider {
  height: 1px;
  background-color: rgba(69, 70, 77, 0.2);
  margin: 0.5rem 0;
}

/* --- Nav-Item (Standard / inaktiv) --- */
.nav-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 0.75rem;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: -0.025em;
  color: var(--on-surface-variant);  /* #c6c6cd — WCAG AA auf dunklem Grund */
  border-radius: var(--radius-md);
  transition: all 200ms ease;
  text-decoration: none;
}

.nav-item:hover {
  color: var(--primary);
  background-color: var(--surface-container-high);
  transform: translateY(-2px);
}

.nav-item:focus-visible {
  color: var(--primary);
  background-color: var(--surface-container-high);
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* --- Nav-Item Aktiv --- */
.nav-item-active {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 0.75rem;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: -0.025em;
  color: var(--primary);
  background-color: var(--surface-container-high);
  border-radius: var(--radius-md);
  text-decoration: none;
}

/* --- Bottom Nav (Help, Logout) — kompakter, kein Hover-Hintergrund --- */
.nav-item-bottom {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: -0.025em;
  color: var(--on-surface-variant);  /* #c6c6cd — WCAG AA */
  border-radius: var(--radius-md);
  transition: all 200ms ease;
  text-decoration: none;
}

.nav-item-bottom:hover {
  color: var(--primary);
}

.nav-item-bottom:focus-visible {
  color: var(--primary);
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}


/* =============================================================================
   13. Input-Felder & Formulare
   ============================================================================= */

/* --- Standard Label --- */
.form-label {
  display: block;
  font-family: var(--font-label);
  font-size: 0.6875rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--on-surface-variant);
  margin-left: 0.25rem;
  margin-bottom: 0.375rem;
}

/* --- Input-Wrapper (für Icon-Prefix) --- */
.input-wrapper {
  position: relative;
}

.input-icon-prefix {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--outline-variant);
  font-size: 1.25rem;
  pointer-events: none;
}

.input-icon-suffix {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--outline-variant);
  font-size: 1.25rem;
  background: none;
  border: none;
  cursor: pointer;
  transition: color 200ms ease;
}

.input-icon-suffix:hover {
  color: var(--on-surface);
}

/* --- Standard Input (Login — mit Icon-Prefix) --- */
.input-field {
  width: 100%;
  background-color: var(--surface-container-lowest);
  border: 1px solid rgba(69, 70, 77, 0.15);
  border-radius: var(--radius-md);
  padding: 0.875rem 1rem 0.875rem 3rem;  /* py-3.5, pl-12, pr-4 */
  font-size: 1rem;
  color: var(--on-surface);
  outline: none;
  transition: all 200ms ease;
}

.input-field::placeholder {
  color: var(--outline);
}

.input-field:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 1px rgba(176, 198, 255, 0.4);
}

/* --- Kompakteres Admin Input (kein Icon-Prefix) --- */
.input-field-sm {
  width: 100%;
  background-color: var(--surface-container-lowest);
  border: 1px solid rgba(69, 70, 77, 0.15);
  border-radius: var(--radius-md);
  padding: 0.625rem 1rem;   /* px-4 py-2.5 */
  font-size: 0.875rem;
  color: var(--on-surface);
  outline: none;
  transition: all 200ms ease;
}

.input-field-sm::placeholder {
  color: var(--outline);
}

.input-field-sm:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 1px rgba(176, 198, 255, 0.2);
}

/* --- Header-Suchfeld (noch kompakter) --- */
.input-search {
  width: 100%;
  background-color: var(--surface-container-lowest);
  border: 1px solid rgba(69, 70, 77, 0.15);
  border-radius: var(--radius-md);
  padding: 0.375rem 1rem 0.375rem 2.5rem;  /* pl-10, pr-4, py-1.5 */
  font-size: 0.875rem;
  color: var(--on-surface);
  outline: none;
  transition: all 200ms ease;
}

.input-search::placeholder {
  color: var(--outline);
}

.input-search:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(176, 198, 255, 0.2);
}

/* --- Select-Feld --- */
.select-field {
  width: 100%;
  background-color: var(--surface-container-lowest);
  border: 1px solid rgba(69, 70, 77, 0.15);
  border-radius: var(--radius-md);
  padding: 0.625rem 1rem;
  font-size: 0.875rem;
  color: var(--on-surface);
  outline: none;
  transition: all 200ms ease;
  appearance: auto;  /* Browser-Standard-Arrow bleibt erhalten */
}

.select-field:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 1px rgba(176, 198, 255, 0.2);
}

/* --- Form-Group (Vertikaler Abstand zwischen Feldern) --- */
.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;  /* space-y-1.5 */
}

.form-stack {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;    /* space-y-6 */
}

/* --- Passwort vergessen Link --- */
.forgot-password-link {
  font-family: var(--font-label);
  font-size: 0.6875rem;
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  transition: all 200ms ease;
  text-decoration: none;
}

.forgot-password-link:hover {
  text-decoration: underline;
}


/* =============================================================================
   14. Buttons
   ============================================================================= */

/* --- Base Button Reset --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
  font-weight: 700;
  text-decoration: none;
  transition: all 300ms ease;
  outline: none;
  white-space: nowrap;
}

/* Globale Focus-Visible-Styles für Keyboard-Navigation (WCAG 2.1 — 2.4.7) */
:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* Buttons und Links ohne sichtbaren Outline bei Maus-Klick */
button:focus:not(:focus-visible),
a:focus:not(:focus-visible),
input:focus:not(:focus-visible),
select:focus:not(:focus-visible),
textarea:focus:not(:focus-visible) {
  outline: none;
}

/* --- Primary CTA (Sapphire Gradient — full-width Login) --- */
.btn-primary {
  width: 100%;
  background: var(--gradient-sapphire);
  color: var(--on-primary);
  font-size: 0.875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 1rem;  /* py-4 */
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xl);
  margin-top: 1rem;
}

.btn-primary:hover {
  filter: brightness(1.1);
}

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

/* --- Primary Compact (Settings Speichern) --- */
.btn-primary-sm {
  width: 100%;
  background: var(--gradient-sapphire);
  color: var(--on-primary);
  font-size: 0.875rem;
  font-weight: 700;
  padding: 0.75rem;  /* py-3 */
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xl), 0 10px 15px -3px rgba(176, 198, 255, 0.2);
}

.btn-primary-sm:hover {
  transform: scale(1.02);
}

.btn-primary-sm:active {
  transform: scale(0.95);
}

/* --- Header CTA (kleines Inline-Button) --- */
.btn-primary-inline {
  background: var(--gradient-sapphire);
  color: var(--on-primary);
  font-size: 0.875rem;
  font-weight: 600;
  padding: 0.375rem 1rem;  /* px-4 py-1.5 */
  border-radius: var(--radius-md);
  box-shadow: 0 4px 6px -1px rgba(176, 198, 255, 0.1);
  transition: opacity 200ms ease;
}

.btn-primary-inline:active {
  opacity: 0.8;
}

/* --- Secondary Button (Login — "Apply for Access") --- */
.btn-secondary {
  width: 100%;
  background-color: var(--surface-container-high);
  color: var(--on-surface);
  font-family: var(--font-body);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.875rem;  /* py-3.5 */
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  transition: all 200ms ease;
}

.btn-secondary:hover {
  background-color: var(--surface-bright);
  border-color: rgba(69, 70, 77, 0.2);
}

/* --- Ghost / Text-Button --- */
.btn-ghost {
  background: none;
  color: var(--primary);
  font-size: 0.875rem;
  font-weight: 500;
  padding: 0;
  border: none;
  transition: color 200ms ease;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.btn-ghost:hover {
  color: #ffffff;
}

/* --- Danger / Delete Button --- */
.btn-danger {
  background-color: var(--error-container);
  color: var(--on-error-container);
  font-size: 0.875rem;
  font-weight: 600;
  padding: 0.5rem 1rem;
  border-radius: var(--radius-md);
  transition: all 200ms ease;
}

.btn-danger:hover {
  filter: brightness(1.15);
}

/* --- Icon-Button (Tabellen-Aktionen) --- */
.btn-icon {
  background: none;
  border: none;
  padding: 0.25rem;
  color: var(--on-surface-variant);
  border-radius: var(--radius-sm);
  transition: color 200ms ease;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
}

.btn-icon-edit:hover  { color: var(--primary); }
.btn-icon-delete:hover { color: var(--error); }

.btn-icon:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* --- Header-Buttons (Login-Page) --- */
.header-btn-login {
  color: var(--on-surface-variant);  /* #c6c6cd — WCAG AA */
  transition: color 300ms ease;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: none;
  border: none;
  cursor: pointer;
}

.header-btn-login:hover { color: var(--primary); }

.header-btn-login .btn-label {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* --- Notification-Button (Admin Header) --- */
.btn-notification {
  padding: 0.5rem;
  color: var(--on-surface-variant);
  transition: color 200ms ease;
  background: none;
  border: none;
  cursor: pointer;
  border-radius: var(--radius-md);
}

.btn-notification:hover { color: var(--primary); }

/* --- Language Toggle Buttons (Settings) --- */
.btn-lang {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.5rem;
  border-radius: var(--radius-md);
  font-size: 0.75rem;
  font-weight: 500;
  transition: all 200ms ease;
  cursor: pointer;
  border: 1px solid transparent;
}

.btn-lang-active {
  background-color: var(--primary-container);
  color: var(--primary);
  font-weight: 700;
  border-color: rgba(176, 198, 255, 0.2);
}

.btn-lang-inactive {
  background-color: var(--surface-container-highest);
  color: var(--on-surface-variant);
}

.btn-lang-inactive:hover {
  border-color: rgba(69, 70, 77, 0.3);
}


/* =============================================================================
   15. Toggle Switches
   ============================================================================= */

/* --- Toggle-Track (Aus-Zustand) --- */
.toggle-track {
  position: relative;
  display: inline-block;
  width: 2.5rem;    /* 40px */
  height: 1.25rem;  /* 20px */
  background-color: var(--surface-container-highest);
  border-radius: var(--radius-full);
  cursor: pointer;
}

.toggle-thumb {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 0.75rem;  /* 12px */
  height: 0.75rem;
  background-color: var(--on-surface-variant);
  border-radius: var(--radius-full);
  transition: all 200ms ease;
}

.toggle-track:hover .toggle-thumb {
  background-color: var(--on-surface);
}

/* --- Toggle-Track (Ein-Zustand) --- */
.toggle-track-on {
  background-color: rgba(102, 221, 139, 0.2);
}

.toggle-thumb-on {
  left: auto;
  right: 4px;
  background-color: var(--secondary);
}

/* --- Login Toggle (Persistent Session) --- */
.toggle-session {
  position: relative;
  display: inline-block;
  width: 2.75rem;   /* 44px — w-11 */
  height: 1.5rem;   /* 24px — h-6  */
  background-color: var(--surface-container-highest);
  border-radius: var(--radius-full);
  cursor: pointer;
}

/* CSS-only Toggle mit Checkbox */
.toggle-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-input + .toggle-track-visual {
  position: relative;
  display: inline-block;
  width: 2.75rem;
  height: 1.5rem;
  background-color: var(--surface-container-highest);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: background-color 200ms ease;
}

.toggle-input + .toggle-track-visual::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 1.25rem;
  height: 1.25rem;
  background-color: #ffffff;
  border: 1px solid #d1d5db;
  border-radius: var(--radius-full);
  transition: all 200ms ease;
}

.toggle-input:checked + .toggle-track-visual {
  background-color: var(--secondary);
}

.toggle-input:checked + .toggle-track-visual::after {
  transform: translateX(100%);
  border-color: #ffffff;
}

/* Focus-Visible für Toggle (Keyboard-Navigation) */
.toggle-input:focus-visible + .toggle-track-visual {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}


/* =============================================================================
   16. Cards & Container
   ============================================================================= */

/* --- Standard Content-Card (Admin) --- */
.card {
  background-color: var(--surface-container-low);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
}

/* --- Stat-Karte mit Hover-Effekt --- */
.card-stat {
  background-color: var(--surface-container-low);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  transition: all 200ms ease;
  cursor: default;
}

.card-stat:hover {
  transform: translateY(-2px);
}

/* --- Elevated Card (etwas mehr Tiefe) --- */
.card-elevated {
  background-color: var(--surface-container-low);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  box-shadow: var(--shadow-md);
}

/* --- Settings-Panel (sticky) --- */
.card-settings {
  background-color: var(--surface-container-low);
  border-radius: var(--radius-lg);
  padding: 2rem;
  position: sticky;
  top: 6rem;  /* top-24 */
}

/* --- Aktivitäts-Kategorie-Card --- */
.card-category {
  background-color: var(--surface-container-low);
  padding: 1.25rem;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(69, 70, 77, 0.1);
  transition: all 200ms ease;
  cursor: pointer;
}

.card-category:hover {
  border-color: rgba(176, 198, 255, 0.3);
}

/* --- "Neue Kategorie" Add-Card --- */
.card-add {
  border: 2px dashed rgba(69, 70, 77, 0.2);
  border-radius: var(--radius-lg);
  padding: 1.5rem 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  transition: all 200ms ease;
  cursor: pointer;
  background: none;
}

.card-add:hover {
  background-color: var(--surface-container-low);
  border-color: rgba(176, 198, 255, 0.5);
}

/* --- Info/Ambient-Card (Backup Status) --- */
.card-info {
  margin-top: 3rem;
  padding: 1rem;
  background-color: var(--surface-container-lowest);
  border-radius: var(--radius-md);
  border: 1px solid rgba(176, 198, 255, 0.05);
}

/* --- Login-Card --- */
.login-card {
  max-width: 28rem;
  width: 100%;
  padding: 2.5rem;
  border-radius: var(--radius-lg);
}

/* --- Tag/Chip in Kategorie-Cards --- */
.chip {
  font-size: 0.625rem;
  background-color: var(--surface-container-highest);
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius-sm);
}


/* =============================================================================
   17. Tabellen
   ============================================================================= */

.table-wrapper {
  background-color: var(--surface-container-low);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.table {
  width: 100%;
  text-align: left;
  border-collapse: collapse;
}

.table-head {
  background-color: var(--surface-container);
  color: var(--on-surface-variant);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.table-head th {
  padding: 1rem 1.5rem;  /* px-6 py-4 */
}

.table-body tr {
  border-bottom: 1px solid rgba(69, 70, 77, 0.1);
  transition: background-color 200ms ease;
}

.table-body tr:last-child {
  border-bottom: none;
}

.table-body tr:hover {
  background-color: var(--surface-container-high);
}

.table-body td {
  padding: 1rem 1.5rem;  /* px-6 py-4 */
}

/* Textstile innerhalb der Tabellen-Zellen */
.table-cell-name {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--on-surface);
}

.table-cell-sub {
  font-size: 0.625rem;
  color: var(--on-surface-variant);
}


/* =============================================================================
   18. Badges & Status-Chips
   ============================================================================= */

/* --- Base Badge --- */
.badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.025em;
  padding: 0.125rem 0.625rem;
  border-radius: var(--radius-full);
}

/* --- Primary Badge (Admin-Rolle) --- */
.badge-primary {
  background-color: var(--primary-container);
  color: var(--primary);
}

/* --- Neutral Badge (Dozent, Zuarbeiter) --- */
.badge-neutral {
  background-color: var(--surface-container-highest);
  color: var(--on-surface-variant);
}

/* --- Success Badge (Geregelt) --- */
.badge-success {
  background-color: rgba(37, 165, 90, 0.2);
  color: var(--secondary);
  border-radius: var(--radius-sm);
  padding: 0.125rem 0.5rem;
}

/* --- Warning Badge (Pending) --- */
.badge-warning {
  background-color: rgba(251, 188, 0, 0.15);
  color: var(--tertiary);
  border-radius: var(--radius-sm);
  padding: 0.125rem 0.5rem;
}

/* --- Error Badge --- */
.badge-error {
  background-color: rgba(147, 0, 10, 0.3);
  color: var(--error);
  border-radius: var(--radius-sm);
  padding: 0.125rem 0.5rem;
}


/* =============================================================================
   19. Branding-Elemente
   ============================================================================= */

/* --- Login-Logo-Kreis (64px, sapphire gradient) --- */
.brand-icon-login {
  width: 4rem;    /* 64px */
  height: 4rem;
  border-radius: var(--radius-full);
  background: var(--gradient-sapphire);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
  box-shadow: var(--shadow-lg);
}

/* Wortmarke Login-Header */
.brand-wordmark-login {
  font-family: var(--font-headline);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--primary);
  letter-spacing: -0.025em;
}

/* Subline unter dem Logo in der Card */
.brand-tagline {
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: var(--on-surface-variant);
  letter-spacing: 0.025em;
  opacity: 0.8;
}


/* =============================================================================
   20. Section-Header-Muster (Admin)
   ============================================================================= */

.section-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0 0.5rem;
  margin-bottom: 1.5rem;
}

.section-header h2 {
  font-family: var(--font-headline);
  font-size: 1.25rem;
  font-weight: 700;
}

/* Section-Header mit Action-Button rechts */
.section-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.5rem;
  margin-bottom: 1.5rem;
}

.section-header-row .section-title-group {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.section-header-row h2 {
  font-family: var(--font-headline);
  font-size: 1.25rem;
  font-weight: 700;
}

/* Seiten-Hauptüberschrift (3.5rem, font-black) */
.page-headline {
  font-family: var(--font-headline);
  font-size: 3.5rem;
  font-weight: 900;
  letter-spacing: -0.05em;
  line-height: 1;
  color: var(--on-surface);
}


/* =============================================================================
   21. Avatar-Komponenten
   ============================================================================= */

/* --- Tabellen-Avatar (quadratisch, mit Initialen) --- */
.avatar-table {
  width: 2rem;     /* 32px */
  height: 2rem;
  border-radius: var(--radius-sm);
  background-color: var(--surface-container-highest);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--primary);
  flex-shrink: 0;
}

/* --- Header User-Avatar (rund) --- */
.avatar-header {
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-full);
  border: 1px solid rgba(176, 198, 255, 0.2);
  overflow: hidden;
  flex-shrink: 0;
}

/* --- Avatar-Wrapper mit Trennlinie (Admin-Header) --- */
.header-user-group {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-left: 1rem;
  border-left: 1px solid rgba(69, 70, 77, 0.2);
}


/* =============================================================================
   22. FAB (Floating Action Button — Mobile Only)
   ============================================================================= */

.fab {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 3.5rem;    /* 56px */
  height: 3.5rem;
  background-color: var(--tertiary);
  color: var(--on-tertiary);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-2xl);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  transition: all 200ms ease;
  border: none;
  cursor: pointer;
}

.fab:hover  { transform: scale(1.1); }
.fab:active { transform: scale(0.95); }


/* =============================================================================
   23. Status-Indikatoren
   ============================================================================= */

.status-dot {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.75rem;
}

.status-dot-indicator {
  width: 0.375rem;   /* 6px */
  height: 0.375rem;
  border-radius: var(--radius-full);
  flex-shrink: 0;
}

/* Aktiv */
.status-active {
  color: var(--secondary);
}

.status-active .status-dot-indicator {
  background-color: var(--secondary);
}

/* Inaktiv */
.status-inactive {
  color: var(--on-surface-variant);
  opacity: 0.5;
}

.status-inactive .status-dot-indicator {
  background-color: var(--on-surface-variant);
}

/* Pending */
.status-pending {
  color: var(--tertiary);
}

.status-pending .status-dot-indicator {
  background-color: var(--tertiary);
}


/* =============================================================================
   24. Animationen & Transitions
   ============================================================================= */

/* Standard-Transitions */
.transition-none    { transition: none; }
.transition-all     { transition: all 200ms ease; }
.transition-colors  { transition: color 200ms ease, background-color 200ms ease, border-color 200ms ease; }
.transition-opacity { transition: opacity 200ms ease; }
.transition-shadow  { transition: box-shadow 200ms ease; }
.transition-transform { transition: transform 200ms ease; }

/* Dauer-Varianten */
.duration-150 { transition-duration: 150ms; }
.duration-200 { transition-duration: 200ms; }
.duration-300 { transition-duration: 300ms; }

/* Hover-Transforms */
.hover-lift:hover { transform: translateY(-2px); }
.hover-scale:hover { transform: scale(1.02); }
.active-shrink:active { transform: scale(0.95); }


/* =============================================================================
   25. Gradient Utilities
   ============================================================================= */

/* Sapphire-Gradient */
.gradient-sapphire,
.sapphire-gradient {
  background: var(--gradient-sapphire);
}

/* Text mit Gradient (Clip) */
.text-gradient-sapphire {
  background: var(--gradient-sapphire);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent; /* Fallback for browsers without -webkit-text-fill-color */
  -webkit-text-fill-color: transparent;
}


/* =============================================================================
   26. Responsive Breakpoints
   ============================================================================= */

/* Tailwind-kompatible Breakpoints:
   md:  768px
   xl:  1280px
*/

/* FAB nur auf Mobile sichtbar (bis 768px) */
.fab {
  display: flex;
}

@media (min-width: 768px) {
  .fab {
    display: none;
  }

  .login-footer {
    flex-direction: row;
  }

  /* Stat-Grid: 1 → 3 Spalten */
  .grid-stats {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1280px) {
  /* Content-Grid: 1 → 3 Spalten */
  .grid-content {
    grid-template-columns: repeat(3, 1fr);
  }
}


/* =============================================================================
   27. Login-Page spezifische Styles
   ============================================================================= */

/* Divider zwischen Login-Buttons */
.login-divider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0.5rem 0;
}

.login-divider-line {
  flex: 1;
  height: 1px;
  background-color: rgba(69, 70, 77, 0.2);
}

.login-divider-text {
  font-size: 0.6875rem;
  color: var(--on-surface-variant);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* Persistent-Session-Row */
.session-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.5rem;
}

.session-toggle-label {
  font-size: 0.6875rem;
  color: var(--on-surface-variant);
  text-transform: uppercase;
  letter-spacing: 0.15em;
}


/* =============================================================================
   28. Grid-Utilities
   ============================================================================= */

.grid           { display: grid; }
.grid-cols-1    { grid-template-columns: repeat(1, 1fr); }
.grid-cols-2    { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3    { grid-template-columns: repeat(3, 1fr); }

/* Stat-Cards Grid (1 col default, 3 col md+) */
.grid-stats {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-bottom: 3rem;
}

/* Content Grid (1 col default, 3 col xl+) */
.grid-content {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

/* 2-col Grid für Aktivitäts-Kategorien (1 col default, 2 col md+) */
.grid-categories {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 768px) {
  .grid-categories {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Language-Toggle Grid */
.grid-lang {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
}

/* col-span Utilities */
.col-span-1 { grid-column: span 1; }
.col-span-2 { grid-column: span 2; }
.col-span-3 { grid-column: span 3; }

@media (min-width: 1280px) {
  .xl-col-span-2 { grid-column: span 2; }
}

/* Gap-Utilities */
.gap-1  { gap: 0.25rem; }
.gap-2  { gap: 0.5rem; }
.gap-3  { gap: 0.75rem; }
.gap-4  { gap: 1rem; }
.gap-6  { gap: 1.5rem; }
.gap-8  { gap: 2rem; }


/* =============================================================================
   29. Spacing Utilities
   ============================================================================= */

/* Margin */
.m-0   { margin: 0; }
.m-1   { margin: 0.25rem; }
.m-2   { margin: 0.5rem; }
.m-4   { margin: 1rem; }

.mb-2  { margin-bottom: 0.5rem; }
.mb-4  { margin-bottom: 1rem; }
.mb-6  { margin-bottom: 1.5rem; }
.mb-8  { margin-bottom: 2rem; }
.mb-12 { margin-bottom: 3rem; }

.mt-1  { margin-top: 0.25rem; }
.mt-2  { margin-top: 0.5rem; }
.mt-4  { margin-top: 1rem; }
.mt-6  { margin-top: 1.5rem; }
.mt-12 { margin-top: 3rem; }

.ml-1  { margin-left: 0.25rem; }
.ml-4  { margin-left: 1rem; }

/* Padding */
.p-4   { padding: 1rem; }
.p-5   { padding: 1.25rem; }
.p-6   { padding: 1.5rem; }
.p-8   { padding: 2rem; }
.p-10  { padding: 2.5rem; }

.px-2  { padding-left: 0.5rem;  padding-right: 0.5rem; }
.px-3  { padding-left: 0.75rem; padding-right: 0.75rem; }
.px-4  { padding-left: 1rem;    padding-right: 1rem; }
.px-6  { padding-left: 1.5rem;  padding-right: 1.5rem; }
.px-8  { padding-left: 2rem;    padding-right: 2rem; }
.px-12 { padding-left: 3rem;    padding-right: 3rem; }

.py-1    { padding-top: 0.25rem;   padding-bottom: 0.25rem; }
.py-1-5  { padding-top: 0.375rem;  padding-bottom: 0.375rem; }
.py-2    { padding-top: 0.5rem;    padding-bottom: 0.5rem; }
.py-2-5  { padding-top: 0.625rem;  padding-bottom: 0.625rem; }
.py-3    { padding-top: 0.75rem;   padding-bottom: 0.75rem; }
.py-3-5  { padding-top: 0.875rem;  padding-bottom: 0.875rem; }
.py-4    { padding-top: 1rem;      padding-bottom: 1rem; }
.py-6    { padding-top: 1.5rem;    padding-bottom: 1.5rem; }
.py-8    { padding-top: 2rem;      padding-bottom: 2rem; }


/* =============================================================================
   30. Flex Utilities
   ============================================================================= */

.flex         { display: flex; }
.inline-flex  { display: inline-flex; }
.flex-col     { flex-direction: column; }
.flex-row     { flex-direction: row; }
.flex-wrap    { flex-wrap: wrap; }
.flex-nowrap  { flex-wrap: nowrap; }

.items-start    { align-items: flex-start; }
.items-center   { align-items: center; }
.items-end      { align-items: flex-end; }
.items-stretch  { align-items: stretch; }

.justify-start   { justify-content: flex-start; }
.justify-center  { justify-content: center; }
.justify-end     { justify-content: flex-end; }
.justify-between { justify-content: space-between; }

.flex-1         { flex: 1 1 0%; }
.flex-auto      { flex: 1 1 auto; }
.flex-none      { flex: none; }
.flex-shrink-0  { flex-shrink: 0; }


/* =============================================================================
   31. Misc Utilities
   ============================================================================= */

/* Display */
.block        { display: block; }
.inline-block { display: inline-block; }
.hidden       { display: none; }

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

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

/* Width & Height */
.w-full    { width: 100%; }
.h-full    { height: 100%; }
.min-h-screen { min-height: 100vh; }
.w-80      { width: 20rem; } /* Header-Suchfeld */

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

.border            { border: 1px solid; }
.border-transparent { border-color: transparent; }
.border-outline-variant { border-color: var(--outline-variant); }

/* Opacity */
.opacity-50  { opacity: 0.5; }
.opacity-80  { opacity: 0.8; }
.opacity-100 { opacity: 1; }

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

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

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

/* Divider */
.divide-y > * + * {
  border-top: 1px solid rgba(69, 70, 77, 0.1);
}

/* Screen-Reader only — visuell versteckt, für AT sichtbar (WCAG 1.3.1) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Skip-Link sichtbar bei Focus */
.sr-only.focus\:not-sr-only:focus,
.sr-only:focus {
  position: static;
  width: auto;
  height: auto;
  padding: initial;
  margin: initial;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

/* Focus-sichtbar + nicht-sr-only für Skip-Link */
.focus\:not-sr-only:focus {
  position: static;
  width: auto;
  height: auto;
  padding: initial;
  margin: initial;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

/* Skip-Link Darstellung */
.focus\:absolute:focus { position: absolute; }
.focus\:z-50:focus     { z-index: 50; }
.focus\:p-4:focus      { padding: 1rem; }
.focus\:bg-white:focus { background-color: #ffffff; }
.focus\:text-black:focus { color: #000000; }