/* ═══════════════════════════════════════════════════════════════════════════
   Der Karteikasten – Gestaltungsgrundlage aller drei Oberflächen.

   Das deutsche Wort trägt die ganze Gestaltung: ein *Fach* ist beides, das
   Schulfach und das Fach im Kasten. Die Seite ist deshalb kein Stapel von
   Abschnitten, sondern ein Register: Inhalt liegt auf Karten, jede Karte hat
   einen Reiter, und der Reiter trägt Kürzel und Farbe ihres Fachs.

   Der Reiter ist das eine wiederkehrende Element – auf der Startseite, an den
   Angebotskarten der Börse und in beiden Verwaltungen. Wer ihn einmal gesehen
   hat, erkennt jede weitere Seite als dieselbe Anwendung.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Farben ────────────────────────────────────────────────────────────────
   Karten aus hellem Karton auf einem kühlen Steinfeld. Gesättigt ist einzig
   die Fachfarbe – so wirkt sie auch als kleiner Reiter, und die Schulfarbe
   aus der Datenbank fügt sich ein, statt aufzufallen. */
:root {
  --stein:      #e6e7e2;   /* Feld, auf dem der Kasten liegt */
  --stein-tief: #d9dad3;   /* Vertiefungen, ruhende Reiter */
  --karton:     #fdfdfc;   /* Kartenfläche */
  --karton-alt: #f4f4f1;   /* zweite Ebene auf der Karte */
  --kante:      #cfd0c9;   /* Kartenkante */
  --kante-weich:#e2e3dd;
  --tinte:      #16181c;
  --tinte-mit:  #4a4e57;
  --tinte-leis: #7c818c;

  /* Fächerfarben: gleich stark gedämpft, damit acht davon nebeneinander
     ein Register ergeben und keinen Jahrmarkt. */
  --f-mathe:  #3a5aa4;
  --f-deutsch:#a3452f;
  --f-eng:    #2f6d58;
  --f-gw:     #876a1c;
  --f-nawi:   #68488a;
  --f-info:   #1d6b88;
  --f-sport:  #b0602c;
  --f-musik:  #74583c;

  --gut:  #2f6d58;
  --warn: #876a1c;
  --fehl: #a3452f;

  /* Das aktive Fach. Wird von der jeweiligen Seite gesetzt – auf der
     Startseite vom Reiter, in der Börse von der Schulfarbe. */
  --fach: var(--f-mathe);

  --rund:      10px;
  --rund-klein: 6px;
  --reiter-h:  2rem;

  /* Karten liegen auf dem Feld, sie schweben nicht: enger, harter Schatten
     statt weichem Schein. */
  --schatten:      0 1px 0 var(--kante), 0 2px 6px rgba(22, 24, 28, .07);
  --schatten-hoch: 0 1px 0 var(--kante), 0 10px 26px rgba(22, 24, 28, .13);

  --schrift-ui:    'Archivo', system-ui, -apple-system, sans-serif;
  --schrift-lese:  'Literata', Georgia, serif;
  --schrift-code:  'Spline Sans Mono', ui-monospace, monospace;
}

/* Systemvorgabe – gilt nur, solange nicht ausdrücklich hell gewählt wurde. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --stein:      #101115;
    --stein-tief: #0a0b0e;
    --karton:     #1b1d22;
    --karton-alt: #22252b;
    --kante:      #2e3138;
    --kante-weich:#25282e;
    --tinte:      #eceef1;
    --tinte-mit:  #b0b5bf;
    --tinte-leis: #7d828d;

    --f-mathe:  #7d9bdd;
    --f-deutsch:#e08a6f;
    --f-eng:    #6cb79c;
    --f-gw:     #d3ae5a;
    --f-nawi:   #b18ecd;
    --f-info:   #5fb0cc;
    --f-sport:  #e0a06c;
    --f-musik:  #bfa183;

    --gut:  #6cb79c;
    --warn: #d3ae5a;
    --fehl: #e08a6f;

    --schatten:      0 1px 0 rgba(0,0,0,.5), 0 2px 8px rgba(0, 0, 0, .35);
    --schatten-hoch: 0 1px 0 rgba(0,0,0,.5), 0 12px 30px rgba(0, 0, 0, .5);
  }
}

/* Ausdrückliche Wahl schlägt die Systemvorgabe in beide Richtungen. */
:root[data-theme="dark"] {
  --stein:      #101115;
  --stein-tief: #0a0b0e;
  --karton:     #1b1d22;
  --karton-alt: #22252b;
  --kante:      #2e3138;
  --kante-weich:#25282e;
  --tinte:      #eceef1;
  --tinte-mit:  #b0b5bf;
  --tinte-leis: #7d828d;

  --f-mathe:  #7d9bdd;
  --f-deutsch:#e08a6f;
  --f-eng:    #6cb79c;
  --f-gw:     #d3ae5a;
  --f-nawi:   #b18ecd;
  --f-info:   #5fb0cc;
  --f-sport:  #e0a06c;
  --f-musik:  #bfa183;

  --gut:  #6cb79c;
  --warn: #d3ae5a;
  --fehl: #e08a6f;

  --schatten:      0 1px 0 rgba(0,0,0,.5), 0 2px 8px rgba(0, 0, 0, .35);
  --schatten-hoch: 0 1px 0 rgba(0,0,0,.5), 0 12px 30px rgba(0, 0, 0, .5);
}

/* ── Grundlage ──────────────────────────────────────────────────────────── */

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

body {
  background: var(--stein);
  color: var(--tinte);
  font-family: var(--schrift-ui);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  transition: background-color .4s ease, color .4s ease;
}

:where(a) { color: inherit; }

:where(button, input, textarea, select) { font: inherit; color: inherit; }

/* Ein durchgehender Fokusring in der Fachfarbe – Tastaturbedienung soll
   überall gleich aussehen, nicht je Oberfläche anders. */
:where(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: 2px solid var(--fach);
  outline-offset: 2px;
  border-radius: var(--rund-klein);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Die Karte ─────────────────────────────────────────────────────────────
   Oben links bleibt die Ecke eckig: dort sitzt der Reiter und geht nahtlos
   in die Karte über. Genau diese eine fehlende Rundung macht aus einem
   beliebigen Kasten eine Karteikarte. */
.karte {
  position: relative;
  background: var(--karton);
  border: 1px solid var(--kante);
  border-radius: 0 var(--rund) var(--rund) var(--rund);
  box-shadow: var(--schatten);
  transition: box-shadow .3s ease, transform .3s ease, background-color .4s ease;
}

.karte-tief { background: var(--karton-alt); }

/* ── Der Reiter ────────────────────────────────────────────────────────────
   Sitzt auf der Oberkante der Karte und verschmilzt mit ihr: gleiche Fläche,
   gleiche Kante, und der Deckstreifen darunter schließt die Naht. */
.reiter {
  position: absolute;
  bottom: 100%;
  left: -1px;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  height: var(--reiter-h);
  padding: 0 .85rem;
  background: var(--karton);
  border: 1px solid var(--kante);
  border-bottom: none;
  border-radius: var(--rund-klein) var(--rund-klein) 0 0;
  font-family: var(--schrift-code);
  font-size: .72rem;
  letter-spacing: .04em;
  color: var(--tinte-mit);
  white-space: nowrap;
}

/* Deckt die Linie zwischen Reiter und Karte ab. */
.reiter::after {
  content: '';
  position: absolute;
  left: 1px; right: 1px; top: 100%;
  height: 1px;
  background: var(--karton);
}

/* Platz für den Reiter, der außerhalb seiner Karte steht.
   Bewusst als Innenabstand am umgebenden Element: benachbarte *Ränder* fallen
   zusammen, aus 1,4 + 1,6 rem würden also 1,6 rem – und der Reiter schnitte in
   den Text darüber. Innenabstände fallen nicht zusammen. */
.reiter-luft { padding-top: calc(var(--reiter-h) + .55rem); }

/* Das Fachzeichen: Kürzel in der Farbe seines Fachs. */
.zeichen {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.45rem;
  height: 1.45rem;
  padding: 0 .3rem;
  border-radius: 4px;
  background: color-mix(in srgb, var(--fach) 16%, transparent);
  color: var(--fach);
  font-family: var(--schrift-code);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: 0;
  transition: background-color .4s ease, color .4s ease;
}

/* ── Schrift ───────────────────────────────────────────────────────────────
   Archivo trägt Überschriften und Oberfläche, Literata den Lesetext,
   Spline Sans Mono alles Maschinelle: Kürzel, Adressen, Kennungen, Beträge. */
.titel {
  font-family: var(--schrift-ui);
  font-weight: 700;
  font-stretch: 112%;
  letter-spacing: -.02em;
  line-height: 1.08;
}

.lese {
  font-family: var(--schrift-lese);
  font-size: 1.02rem;
  line-height: 1.7;
  color: var(--tinte-mit);
}
.lese p + p { margin-top: 1rem; }
.lese strong { font-weight: 500; color: var(--tinte); }

.code {
  font-family: var(--schrift-code);
  font-size: .8rem;
  letter-spacing: -.01em;
}

.marke {
  font-family: var(--schrift-code);
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tinte-leis);
}

/* ── Bedienelemente ───────────────────────────────────────────────────────── */

.knopf {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .62rem 1.1rem;
  background: var(--tinte);
  color: var(--stein);
  border: 1px solid var(--tinte);
  border-radius: var(--rund-klein);
  font-size: .88rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease, transform .12s ease;
}
.knopf:hover { background: var(--fach); border-color: var(--fach); }
.knopf:active { transform: translateY(1px); }
.knopf:disabled { opacity: .45; cursor: not-allowed; transform: none; }

.knopf-leer {
  background: none;
  color: var(--tinte-mit);
  border-color: var(--kante);
  font-weight: 500;
}
.knopf-leer:hover { background: none; color: var(--fach); border-color: var(--fach); }

.feld {
  width: 100%;
  padding: .58rem .7rem;
  background: var(--stein-tief);
  border: 1px solid var(--kante);
  border-radius: var(--rund-klein);
  font-size: .9rem;
  outline: none;
  transition: border-color .2s ease, background-color .4s ease;
}
.feld:focus { border-color: var(--fach); }
.feld::placeholder { color: var(--tinte-leis); }

.aufschrift {
  display: block;
  margin-bottom: .38rem;
  font-family: var(--schrift-code);
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tinte-leis);
}

/* ── Meldungen ─────────────────────────────────────────────────────────────
   Ein Mittel für alle Zustände: getönte Fläche, umlaufende Kante. */
.meldung {
  padding: .7rem .9rem;
  border-radius: var(--rund-klein);
  border: 1px solid;
  font-size: .87rem;
}
.meldung-gut  { color: var(--gut);  border-color: color-mix(in srgb, var(--gut) 40%, transparent);  background: color-mix(in srgb, var(--gut) 9%, transparent); }
.meldung-warn { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, transparent); background: color-mix(in srgb, var(--warn) 9%, transparent); }
.meldung-fehl { color: var(--fehl); border-color: color-mix(in srgb, var(--fehl) 40%, transparent); background: color-mix(in srgb, var(--fehl) 9%, transparent); }

/* ── Auftritt ──────────────────────────────────────────────────────────────
   Karten kommen aus dem Kasten: ein kurzer Weg nach oben, sonst nichts. */
.tritt-auf {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .55s ease, transform .55s cubic-bezier(.2, .7, .3, 1);
}
.tritt-auf[data-da="true"] { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .tritt-auf { opacity: 1; transform: none; }
}