/* ─────────────────────────────────────────────────────────────
   Spessarträuber — Theme & Tokens
   Dark-Mode: Charcoal mit grünem Unterton, Deep Forest Green,
   Champagner-Gold-Akzente, Glassmorphismus.
   ───────────────────────────────────────────────────────────── */

:root {
  /* Hintergründe */
  --bg-0: oklch(0.165 0.012 155);
  --bg-1: oklch(0.205 0.014 156);
  --bg-2: oklch(0.255 0.016 158);
  --bg-3: oklch(0.305 0.018 158);

  /* Grün */
  --green:       oklch(0.64 0.135 150);
  --green-deep:  oklch(0.43 0.10 152);
  --green-soft:  oklch(0.74 0.10 150);

  /* Gold / Champagne */
  --gold:        oklch(0.83 0.095 88);
  --gold-bright: oklch(0.91 0.085 92);
  --gold-dim:    oklch(0.66 0.065 86);

  /* Text */
  --text:      oklch(0.97 0.006 120);
  --text-dim:  oklch(0.79 0.012 135);
  --text-mute: oklch(0.60 0.012 145);

  /* Feedback */
  --ok:  oklch(0.74 0.145 150);
  --bad: oklch(0.66 0.165 26);

  /* Hairlines & Glas — Nutzer-Feedback: die goldene Kante überall wirkt
     wertiger als eine neutrale, bewusst zurückgenommen. --hairline-gold
     bleibt als Alias bestehen (von .glass-gold referenziert). */
  --hairline:      rgba(220, 184, 116, 0.22);
  --hairline-gold: rgba(220, 184, 116, 0.22);
  --hairline-soft: rgba(232, 230, 224, 0.10);
  /* Deckend statt Milchglas (Daniel 07.10.2026): die Unschärfe hinter jeder Karte kostete beim Scrollen
     spürbar Leistung (Tablets/ältere Handys) und war vor dem ruhigen Hintergrund kaum zu sehen.
     Farben = die alten halbtransparenten Füllungen über dem dunklen Grund. */
  --glass-fill:    rgb(27, 34, 30);
  --glass-fill-hi: rgb(41, 49, 43);

  /* steuerbar via Tweaks */
  --glow-op: 0.55;
  --glass-blur: 14px;

  --r-lg: 28px;
  --r-md: 20px;
  --r-sm: 14px;

  /* font-display bleibt die robuste UI-Schrift (Buttons, Pills, Tabs, Zahlen
     in kleiner Größe) — font-headline ist die neue, markantere Serife für
     echte Überschriften-Momente (Begrüßung, Bildschirmtitel, große Zahlen). */
  --font-display: 'Sora', system-ui, sans-serif;
  --font-headline: 'Libre Caslon Display', Georgia, 'Times New Roman', serif;
  --font-body: 'Hanken Grotesk', system-ui, sans-serif;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

.ds-screen {
  font-family: var(--font-body);
  color: var(--text);
  letter-spacing: -0.01em;
}

/* App-Hintergrund: tiefes Charcoal + leichte grün/gold Aurora */
.ds-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 80% at 18% -8%, oklch(0.30 0.045 152 / 0.55), transparent 55%),
    radial-gradient(90% 60% at 95% 8%, oklch(0.32 0.05 88 / 0.30), transparent 50%),
    radial-gradient(140% 100% at 50% 120%, oklch(0.22 0.03 150 / 0.6), transparent 60%),
    var(--bg-0);
}
.ds-bg::after {
  content: ''; position: absolute; inset: 0;
  /* dezentes Korn (Leder/Papier-Anmutung) + die bestehende dunkle Vignette
     in einer Ebene — hält die Fläche von reinem Flat-Gradient weg, ohne
     zusätzlichen Paint-Layer. */
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.07'/%3E%3C/svg%3E"),
    radial-gradient(140% 120% at 50% 0%, transparent 60%, rgba(0,0,0,0.25));
  opacity: 0.5; pointer-events: none;
}

/* Metallischer Glanz für Fortschrittsbalken-Füllungen: konvexe "Stab"-Wölbung
   (heller oben, dunkler unten) statt einer flachen Farbfläche — dieselbe
   Wertigkeit wie bei Buttons/Medaillen, nur ruhig genug für viele dünne
   Balken gleichzeitig auf einem Screen. */
.bar-shine {
  position: relative; overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.55), inset 0 -1.5px 2px rgba(0,0,0,0.3);
}
.bar-shine::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.35), transparent 45%);
  pointer-events: none;
}

/* Grün glänzender Erledigt-Haken (Tagesstrecke): metallischer Grün-Verlauf,
   weicher Schein und ein langsam durchlaufender Lichtreflex. */
.check-shine {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, oklch(0.84 0.13 150) 0%, oklch(0.68 0.14 150) 38%, oklch(0.50 0.11 152) 64%, oklch(0.72 0.13 150) 88%, oklch(0.44 0.09 152) 100%);
  box-shadow: inset 0 1.5px 0 rgba(255,255,255,0.65), inset 0 -2px 3px rgba(0,30,10,0.4), 0 0 12px rgba(91,174,114,0.45);
}
.check-shine > * { position: relative; z-index: 1; }
.check-shine::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,0.6) 48%, rgba(255,255,255,0.12) 54%, transparent 65%) 0 0 / 250% 100% no-repeat;
  animation: ds-shine 3.4s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) { .check-shine::after { animation: none; } }

/* Metallischer Glanz für Gold-Text (Kennzahlen, Sachgebiets-Kürzel, große
   Ergebnis-Zahlen) — derselbe mehrstufige Verlauf wie Buttons/Medaillen,
   nur als Textfüllung statt Fläche. Ersetzt reines flaches --gold/--gold-
   bright überall dort, wo eine Zahl/ein Wert wirklich "wertig" wirken soll. */
.gold-shine-text {
  background: linear-gradient(180deg, oklch(0.97 0.03 95) 0%, oklch(0.91 0.085 92) 20%, oklch(0.83 0.095 88) 45%, oklch(0.70 0.075 84) 65%, oklch(0.88 0.09 90) 85%, oklch(0.60 0.07 80) 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}

/* Glas-Oberfläche */
.glass {
  position: relative;
  background: linear-gradient(160deg, var(--glass-fill-hi), var(--glass-fill));
  border: 1px solid var(--hairline-soft);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 12px 32px rgba(0,0,0,0.35);
}
.glass-gold { border-color: var(--hairline-gold); }
.disp-headline { font-family: var(--font-headline); font-weight: 400; }

/* Gold-Glow-Layer — Intensität via --glow-op */
.glow {
  position: absolute; border-radius: inherit; pointer-events: none;
  opacity: var(--glow-op);
}

.tabnums { font-variant-numeric: tabular-nums; }
.disp { font-family: var(--font-display); }

/* sanftes Aufploppen */
@keyframes ds-pop { from { transform: scale(0.94); } to { transform: scale(1); } }
@keyframes ds-rise { from { transform: translateY(9px); } to { transform: translateY(0); } }
@keyframes ds-flicker {
  0%, 100% { transform: scale(1) rotate(-1deg); opacity: 0.95; }
  50% { transform: scale(1.06) rotate(1.5deg); opacity: 1; }
}
@keyframes ds-shine {
  0% { background-position: -120% 0; }
  100% { background-position: 220% 0; }
}
@keyframes ds-ringfill { from { stroke-dashoffset: var(--dash); } }
@keyframes ds-pulse { 0%, 100% { opacity: 0.45; } 50% { opacity: 1; } }
.pulse { animation: ds-pulse 1.4s ease-in-out infinite; }

.rise { animation: ds-rise 0.5s cubic-bezier(0.22,1,0.36,1) both; }
.pop  { animation: ds-pop 0.4s cubic-bezier(0.34,1.56,0.64,1) both; }

/* Scrollbars verstecken im Telefon */
.noscroll::-webkit-scrollbar { width: 0; height: 0; }
.noscroll { scrollbar-width: none; }

/* ── Badge-Freischalt-Animation ── */
@keyframes badge-backdrop {
  from { opacity: 0; backdrop-filter: blur(0px); }
  to   { opacity: 1; backdrop-filter: blur(8px); }
}
@keyframes badge-medal-pop {
  0%   { transform: scale(0.1) rotate(-20deg); opacity: 0; }
  55%  { transform: scale(1.28) rotate(6deg);  opacity: 1; }
  72%  { transform: scale(0.93) rotate(-3deg); }
  86%  { transform: scale(1.06) rotate(1.5deg); }
  100% { transform: scale(1)    rotate(0deg);  }
}
@keyframes badge-shine {
  0%   { left: -120%; opacity: 0; }
  15%  { opacity: 1; }
  100% { left: 120%; opacity: 0; }
}
@keyframes badge-title {
  from { transform: translateY(22px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
@keyframes badge-particle {
  0%   { transform: translate(0,0) scale(1);   opacity: 1; }
  70%  { opacity: 0.7; }
  100% { transform: translate(var(--px),var(--py)) scale(0); opacity: 0; }
}
@keyframes badge-ring-glow {
  0%, 100% { box-shadow: 0 0 18px 4px rgba(216,178,106,0.35); }
  50%       { box-shadow: 0 0 38px 12px rgba(216,178,106,0.65); }
}

@media (prefers-reduced-motion: reduce) {
  .rise, .pop { animation: none !important; }
}

/* ── Mikro-Interaktionen: Druck-Feedback + Tab-Übergänge ── */
button:not(:disabled) {
  transition: transform 0.12s ease, filter 0.12s ease;
}
button:not(:disabled):active {
  transform: scale(0.965);
  filter: brightness(1.08);
}
.tabfade {
  animation: tabfade 0.28s ease both;
}
@keyframes tabfade {
  from { opacity: 0; transform: translateY(7px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .tabfade { animation: none !important; }
  button:not(:disabled):active { transform: none; }
}

/* ── Skeleton-Shimmer (Ladezustände) ── */
.skel {
  position: relative; overflow: hidden;
  background: rgba(255,255,255,0.045); border-radius: 13px;
}
.skel::after {
  content: ''; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.07), transparent);
  animation: skel-slide 1.3s infinite;
}
@keyframes skel-slide { to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .skel::after { animation: none; } }

/* Tastaturfokus sichtbar machen (Barrierefreiheit) — nur bei Tastatur-Bedienung, nicht bei Touch/Maus */
button:focus-visible, [role="button"]:focus-visible, [role="switch"]:focus-visible, a:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 2px solid var(--gold-bright, #f0d27a);
  outline-offset: 2px;
}
/* Doppeltipp-Zoom aus, Pinch-Zoom bleibt erlaubt */
html, body { touch-action: manipulation; }

/* ── PC-Ansicht des Schul-Portals (/schulportal): breites Layout, Sheets mittig ── */
.pd-wrap { max-width: 1240px; margin: 0 auto; padding: 0 12px 40px; }
.pd-bar { display: flex; align-items: center; justify-content: flex-end; gap: 14px; padding: 14px 22px 0; font-size: 13px; color: var(--text-dim); }
.pd-bar-name { margin-right: auto; color: var(--text-mute); }
.pd-bar a { color: var(--gold-bright); text-decoration: none; }
.pd-bar a:hover { text-decoration: underline; }
.pd-bar button { background: none; border: 1px solid var(--hairline-soft); border-radius: 10px; padding: 6px 12px; color: var(--text-dim); font: inherit; cursor: pointer; }
@media (min-width: 900px) {
  .pd .pd-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px !important; align-items: start; }
  .pd .pd-cols { display: block !important; column-count: 2; column-gap: 18px; }
  .pd .pd-cols > * { break-inside: avoid; margin-bottom: 14px; }
  .pd .pd-split { display: grid !important; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 18px !important; align-items: start; }
  .pd .pd-split > :only-child { grid-column: 1 / -1; }
  .pd .pd-rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 10px; align-content: start; }
}
@media (min-width: 1300px) {
  .pd .pd-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.pd .pd-narrow { max-width: 780px; }
/* Login am PC: schmale Spalte in der Mitte statt über die volle Breite */
.pd .pd-auth { display: flex; justify-content: center; }
.pd .pd-auth > * { width: 100%; max-width: 460px; }
/* Bottom-Sheets: auf dem PC mittig und schmal statt über die ganze Breite */
.pd .glass.glass-gold.pop { max-width: 640px; width: 100%; align-self: center; border-radius: 26px !important; margin-bottom: 24px; }

/* Autofill (Chrome/Google, Safari): vorausgefüllte Felder bekommen sonst einen hellen Grund
   mit unserer hellen Schrift. Innenschatten überdeckt den Browser-Hintergrund, die Transition
   verhindert das kurze Aufblitzen. Zwei getrennte Regeln, weil ein unbekannter Selektor sonst
   die ganze Regel ungültig macht. */
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus,
textarea:-webkit-autofill, select:-webkit-autofill {
  -webkit-text-fill-color: var(--text, #f2efe6);
  -webkit-box-shadow: 0 0 0 1000px #1a201c inset;
  box-shadow: 0 0 0 1000px #1a201c inset;
  caret-color: var(--text, #f2efe6);
  transition: background-color 600000s 0s, color 600000s 0s;
}
input:autofill, textarea:autofill, select:autofill {
  -webkit-text-fill-color: var(--text, #f2efe6);
  box-shadow: 0 0 0 1000px #1a201c inset;
  caret-color: var(--text, #f2efe6);
}

/* Übrige Bildschirme sind fürs Hochformat gebaut: quer auf dem Handy freundlich bitten zu drehen */
#dreh-hinweis { display: none; position: fixed; inset: 0; z-index: 99999; background: #0d1210; color: #f0e3c0;
  flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; padding: 24px;
  font-family: var(--font-body, system-ui, sans-serif); }
#dreh-hinweis .dh-icon { font-size: 44px; animation: dhDreh 2.4s ease-in-out infinite; }
#dreh-hinweis .dh-titel { font-size: 18px; font-weight: 800; }
#dreh-hinweis .dh-text { font-size: 13px; opacity: 0.75; max-width: 420px; line-height: 1.4; }
@keyframes dhDreh { 0%, 30% { transform: rotate(-90deg); } 60%, 100% { transform: rotate(0deg); } }
/* body.geraet-quer setzt app.jsx nach der echten Gerätelage (screen.orientation). Die Media-Query
   allein reicht nicht: Öffnet sich die Tastatur (z. B. Passwortfeld), wird der sichtbare Bereich
   flacher als breit und „orientation: landscape“ greift auch im Hochformat (06.10.2026). */
@media (orientation: landscape) and (max-height: 560px) and (hover: none) {
  body.geraet-quer:not(.quer-ok) #dreh-hinweis { display: flex !important; }
}