/* ak27 — Design Tokens „Abschluss 2027"
   Hell, farbenfroh, jugendlich. Die acht Gruppenfarben stammen vom gedruckten
   Orga-Blatt der Klasse — bitte unverändert lassen, sie sind der Wiedererkennungsanker
   zwischen Papier und Seite. */

:root {
  /* Grundflächen — heller, leicht warmer Grund, nie reines Grau */
  --bg:             #F7F9FC;
  --bg-tint:        #EEF4FF;   /* für Verläufe hinter Glasflächen */
  --surface:        #FFFFFF;
  --surface-sunken: #F1F5F9;

  /* Glas (Liquid Glass auf HELLEM Grund) */
  --glass-bg:       rgba(255, 255, 255, 0.62);
  --glass-bg-soft:  rgba(255, 255, 255, 0.42);
  --glass-border:   rgba(255, 255, 255, 0.75);
  --glass-blur:     18px;
  --glass-shadow:   0 8px 32px rgba(31, 41, 84, 0.10), 0 2px 8px rgba(31, 41, 84, 0.05);
  --glass-glare:    linear-gradient(135deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 55%);

  /* Text — muss auf Glas über Fotos noch sitzen, darum dunkel und satt */
  --text:           #14204A;
  --text-muted:     #5A6789;
  --text-subtle:    #8C97B4;
  --text-faint:     #B4BCD0;   /* für Randnotizen und dezente Löschsymbole */
  --text-on-color:  #FFFFFF;

  /* Marke: frisches Blau-Violett + Sonnengelb als Signal */
  --brand:          #4F46E5;
  --brand-hover:    #4338CA;
  --brand-soft:     #E9E8FF;
  --sun:            #FFC53D;
  --sun-soft:       #FFF4D6;
  --mint:           #22C99B;
  --mint-soft:      #D9FBEF;
  --coral:          #FF6B6B;
  --coral-soft:     #FFE4E4;

  /* Die acht Gruppen vom Orga-Blatt (Reihenfolge = Nummerierung auf dem Zettel) */
  --g1: #F0619B;  --g1-soft: #FDE7F0;  /* 1 Abschlussfeier Programm   */
  --g2: #3EA7E8;  --g2-soft: #DCEEFB;  /* 2 Abschlussfeier Deko       */
  --g3: #9B7BE0;  --g3-soft: #EDE6FB;  /* 3 Abschlusszeitung          */
  --g4: #43C08A;  --g4-soft: #DBF5E9;  /* 4 Mottowoche                */
  --g5: #F5B93E;  --g5-soft: #FDF0D3;  /* 5 Halli-Galli-Tag           */
  --g6: #F2856A;  --g6-soft: #FCE5DE;  /* 6 Finanzen                  */
  --g7: #4CC7D4;  --g7-soft: #D8F4F7;  /* 7 Fotos & Erinnerungen      */
  --g8: #7C8CF0;  --g8-soft: #E3E7FD;  /* 8 Orga & Kommunikation      */

  /* Status */
  --ok:             #16A34A;
  --ok-soft:        #DCFCE7;
  --open:           #F59E0B;
  --open-soft:      #FEF3C7;

  /* Rundungen — großzügig, das trägt den „Teeny"-Ton */
  --r-sm: 10px; --r-md: 16px; --r-lg: 22px; --r-xl: 28px; --r-full: 999px;

  /* Abstände */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;

  /* Schatten (weich, farbig getönt statt neutralgrau) */
  --shadow-sm: 0 2px 8px rgba(31, 41, 84, 0.06);
  --shadow-md: 0 8px 24px rgba(31, 41, 84, 0.10);
  --shadow-lg: 0 20px 48px -12px rgba(31, 41, 84, 0.20);

  /* Typo — Systemstack, keine externen Schriftserver (siehe Briefing, DSGVO) */
  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --fs-display: clamp(2rem, 7vw, 3.4rem);
  --fs-h1: clamp(1.5rem, 4.5vw, 2.1rem);
  --fs-h2: 1.15rem;
  --fs-body: 1rem;
  --fs-small: .85rem;

  /* Bewegung */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --dur-fast: 160ms; --dur: 280ms; --dur-slow: 600ms;
}

/* Wiederverwendbare Glasfläche */
.glass {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-lg);
  box-shadow: var(--glass-shadow);
}

/* Fallback, wo backdrop-filter fehlt (ältere Android-Browser der Eltern!) */
@supports not (backdrop-filter: blur(1px)) {
  .glass { background: rgba(255, 255, 255, 0.92); }
}

/* Bewegung nur, wenn gewünscht */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}