/* ---------------------------------------------------------------------------
   Kursplan — seiten.css
   Seitenspezifische Regeln.

   Glas ist fuer schwebende Ebenen (siehe glas.css). Listen und Zeilen bleiben
   hier bewusst ruhig: feine Raender, kein Schatten, keine zweite Glasschicht.
   --------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
   Gemeinsames
   --------------------------------------------------------------------------- */

.werkzeugleiste {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-3);
  align-items: center;
  margin-bottom: var(--abstand-5);
}

.zeitraum {
  margin-bottom: var(--abstand-4);
}

.zurueck {
  margin-bottom: var(--abstand-4);
  font-size: var(--schrift-s);
}

/* ---------------------------------------------------------------------------
   Übersicht (index.php)
   --------------------------------------------------------------------------- */

.tagesabschnitt + .tagesabschnitt {
  margin-top: var(--abstand-7);
}

.tagesabschnitt__titel {
  margin-bottom: var(--abstand-3);
  font-size: var(--schrift-m);
  font-weight: 600;
  color: var(--text-leise);
}

.tagesabschnitt--ueberfaellig .tagesabschnitt__titel {
  color: var(--fehler);
}

.hausaufgabenliste,
.terminliste,
.kursliste,
.stundenliste {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--abstand-2);
}

.hausaufgabe {
  display: flex;
  align-items: flex-start;
  gap: var(--abstand-3);
  padding: var(--abstand-3);
  border: 1px solid var(--rand);
  /* Die Kursfarbe als Kante — eine Flaeche, keine Schrift. */
  border-left: 3px solid var(--kursfarbe, var(--akzent));
  border-radius: var(--radius-m);
  background: color-mix(in srgb, var(--flaeche) 62%, transparent);
  transition: opacity var(--dauer-mittel) var(--kurve);
}

.hausaufgabe__text {
  flex: 1;
  min-width: 0;
}

.hausaufgabe__beschreibung {
  overflow-wrap: anywhere;
}

.hausaufgabe__faellig {
  margin-top: var(--abstand-1);
}

.hausaufgabe__knoepfe {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-2);
}

/*
 * Die Kursfarbe traegt die Zeile als Flaeche und als Kante, nicht als Schrift.
 *
 * Abschnitt 6.8: farbige Flaechen bekommen die Farbe nur transluzent als
 * Hintergrund, die Schrift bleibt in der Textfarbe. Farbige Schrift auf einer
 * Toenung derselben Farbe erreicht die 4,5:1 aus 8.6 bei den helleren Werten
 * der Palette nicht — Mint kommt auf hellem Grund rechnerisch nie ueber 3,1:1.
 */
.hausaufgabe__kurs a,
.termin__kurs a {
  display: inline-flex;
  align-items: center;
  gap: var(--abstand-2);
  margin-bottom: var(--abstand-1);
  color: var(--text-leise);
  text-decoration: none;
  font-size: var(--schrift-xs);
  font-weight: 600;
}

.hausaufgabe__kuerzel,
.termin__kuerzel {
  padding: 1px var(--abstand-2);
  border-radius: 999px;
  background: color-mix(in srgb, var(--kursfarbe, var(--akzent)) 24%, transparent);
  color: var(--text);
}

.hausaufgabe__kursname,
.termin__kursname {
  font-weight: 400;
}

/* Erledigt: durchgestrichen und abgeblendet, aber weiterhin lesbar. */
.hausaufgabe--erledigt .hausaufgabe__beschreibung {
  text-decoration: line-through;
}

.hausaufgabe--erledigt {
  opacity: .55;
}

.hausaufgabe--ueberfaellig .hausaufgabe__faellig strong {
  color: var(--fehler);
}

/* Das runde Haekchen. */
.haken {
  flex: none;
  display: grid;
  place-items: center;
  width: var(--treffer);
  height: var(--treffer);
  margin: calc(var(--abstand-2) * -1) 0 0 calc(var(--abstand-2) * -1);
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}

.haken::before {
  content: "";
  grid-area: 1 / 1;
  width: 24px;
  height: 24px;
  border: 1.5px solid var(--rand-stark);
  border-radius: 50%;
  transition: background var(--dauer-schnell) var(--kurve),
              border-color var(--dauer-schnell) var(--kurve),
              transform var(--dauer-schnell) var(--kurve);
}

.haken svg {
  grid-area: 1 / 1;
  color: var(--akzent-text);
  opacity: 0;
  transition: opacity var(--dauer-schnell) var(--kurve);
}

.haken[aria-pressed="true"]::before {
  background: var(--erfolg);
  border-color: var(--erfolg);
}

.haken[aria-pressed="true"] svg {
  opacity: 1;
}

.haken:active::before {
  transform: scale(.9);
}

/* ---------------------------------------------------------------------------
   Kursliste (kurse.php)
   --------------------------------------------------------------------------- */

.suchformular {
  flex: 1 1 16em;
  display: flex;
  gap: var(--abstand-2);
}

.suchformular input {
  flex: 1;
  font-size: 16px;
  min-height: var(--treffer);
  padding: var(--abstand-3) var(--abstand-4);
  background: var(--flaeche);
  color: var(--text);
  border: 1px solid var(--rand-stark);
  border-radius: 999px;
}

.kursliste__eintrag {
  display: flex;
  align-items: center;
  gap: var(--abstand-3);
  padding: var(--abstand-2) var(--abstand-3);
  border: 1px solid var(--rand);
  border-left: 3px solid var(--kursfarbe, var(--akzent));
  border-radius: var(--radius-m);
  background: color-mix(in srgb, var(--flaeche) 62%, transparent);
}

.kurskarte {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--abstand-3);
  min-height: var(--treffer);
  color: inherit;
  text-decoration: none;
}

/* Die Kursfarbe nur transluzent als Flaeche, die Schrift bleibt lesbar. */
.kurskarte__kuerzel {
  flex: none;
  display: grid;
  place-items: center;
  min-width: 3rem;
  padding: var(--abstand-2);
  border-radius: var(--radius-s);
  background: color-mix(in srgb, var(--kursfarbe, var(--akzent)) 24%, transparent);
  color: var(--text);
  font-size: var(--schrift-s);
  font-weight: 700;
}

.kurskarte__text {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.kurskarte__name {
  font-weight: 600;
}

.kurskarte__leise,
.kurskarte__marke {
  color: var(--text-leise);
  font-size: var(--schrift-xs);
}

.kurskarte__marke {
  flex: none;
}

/* ---------------------------------------------------------------------------
   Kursdetail (kurs.php)
   --------------------------------------------------------------------------- */

.stundenliste__eintrag {
  display: flex;
  align-items: center;
  gap: var(--abstand-3);
  padding: var(--abstand-3);
  border: 1px solid var(--rand);
  border-radius: var(--radius-s);
}

.stundenliste__zeit {
  flex: 1;
  min-width: 0;
  font-size: var(--schrift-s);
}

.stundenliste__raum {
  flex: none;
  color: var(--text-leise);
  font-size: var(--schrift-s);
}

.stundenformular {
  display: grid;
  gap: var(--abstand-4);
  padding-top: var(--abstand-4);
  margin-top: var(--abstand-4);
  border-top: 1px solid var(--rand);
}

@media (min-width: 560px) {
  .stundenformular {
    grid-template-columns: 1fr 1fr 1fr;
    align-items: end;
  }

  .stundenformular > div:last-child {
    grid-column: 1 / -1;
  }
}

/* ---------------------------------------------------------------------------
   Stundenplan (stundenplan.php)
   --------------------------------------------------------------------------- */

.wochentagsleiste {
  display: flex;
  gap: var(--abstand-2);
  margin-bottom: var(--abstand-4);
  overflow-x: auto;
  scrollbar-width: none;
}

.wochentagsleiste::-webkit-scrollbar {
  display: none;
}

.wochentagsleiste__tag {
  flex: 1 0 auto;
  min-width: 3rem;
  min-height: var(--treffer);
  padding: var(--abstand-2) var(--abstand-4);
  border: 1px solid var(--rand);
  border-radius: 999px;
  background: color-mix(in srgb, var(--flaeche) 62%, transparent);
  color: var(--text-leise);
  font-weight: 600;
  cursor: pointer;
  transition: color var(--dauer-schnell) var(--kurve),
              border-color var(--dauer-schnell) var(--kurve),
              background var(--dauer-schnell) var(--kurve);
}

.wochentagsleiste__tag[aria-pressed="true"] {
  border-color: transparent;
  background: var(--akzent);
  color: var(--akzent-text);
}

.stundenplan {
  --stundenhoehe: 4.5rem;
  --pausenhoehe: 10px;
}

@media (max-width: 767px) {
  .stundenplan {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: var(--abstand-4);
    scrollbar-width: none;
  }

  .stundenplan::-webkit-scrollbar {
    display: none;
  }

  .stundenplan__zeiten {
    display: none;
  }

  .stundenplan__tag {
    flex: 0 0 100%;
    scroll-snap-align: start;
    display: grid;
    gap: var(--abstand-2);
    align-content: start;
  }

  /* Im Tagesstapel zaehlt die Reihenfolge im HTML, nicht das Gitter. */
  .stundenplan__tagname,
  .stundenplan__zelle {
    grid-row: auto !important;
    grid-column: auto !important;
  }

  .stundenplan__tagname {
    font-size: var(--schrift-l);
    font-weight: 600;
    margin-bottom: var(--abstand-1);
  }

  .stundenkachel {
    min-height: 3.75rem;
  }
}

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

  .stundenplan {
    display: grid;
    grid-template-columns: 4.5rem repeat(var(--tage), minmax(0, 1fr));
    grid-template-rows: var(--zeilen);
    gap: var(--abstand-2);
  }

  .stundenplan__zeiten,
  .stundenplan__tag {
    display: contents;
  }

  .zeitmarke {
    grid-column: 1;
    display: grid;
    align-content: center;
    justify-items: end;
    gap: 1px;
    padding-right: var(--abstand-1);
    color: var(--text-leise);
    font-size: var(--schrift-xs);
  }

  .zeitmarke__nummer {
    font-size: var(--schrift-s);
    font-weight: 600;
    color: var(--text);
  }

  .stundenplan__tagname {
    align-self: end;
    padding-bottom: var(--abstand-2);
    font-size: var(--schrift-s);
    font-weight: 600;
    color: var(--text-leise);
  }
}

.stundenplan__zelle {
  display: flex;
  gap: var(--abstand-1);
  min-width: 0;
}

/* Zwei eigene Kurse auf derselben Stunde: beide in halber Breite. */
.stundenplan__zelle--geteilt .stundenkachel {
  flex: 1 1 50%;
}

/*
 * Die Kacheln sind schwebende Ebenen und bekommen deshalb Glas — getoent in der
 * Kursfarbe. Die Schrift bleibt in der Textfarbe, nur das Kuerzel ist farbig.
 */
.stundenkachel {
  flex: 1;
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 2px;
  padding: var(--abstand-3);
  border-radius: var(--radius-m);
  border: 1px solid color-mix(in srgb, var(--kursfarbe, var(--akzent)) 30%, var(--glas-rand));
  border-left: 3px solid var(--kursfarbe, var(--akzent));
  background:
    linear-gradient(color-mix(in srgb, var(--kursfarbe, var(--akzent)) 14%, transparent) 0 100%),
    var(--glas-fuellung);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow: 0 1px 0 0 var(--glas-glanz) inset,
              0 6px 18px -12px var(--glas-schatten);
  color: var(--text);
  text-decoration: none;
  overflow: hidden;
  transition: transform var(--dauer-schnell) var(--kurve);
}

.stundenkachel:active {
  transform: scale(.98);
}

@supports not (backdrop-filter: blur(1px)) {
  .stundenkachel {
    background:
      linear-gradient(color-mix(in srgb, var(--kursfarbe, var(--akzent)) 14%, transparent) 0 100%),
      var(--glas-fuellung-deckend);
  }
}

.stundenkachel__kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--abstand-1);
}

.stundenkachel__kuerzel {
  font-weight: 700;
  font-size: var(--schrift-s);
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stundenkachel__warnung {
  flex: none;
  display: grid;
  color: var(--fehler);
}

.stundenkachel__raum,
.stundenkachel__zeit {
  font-size: var(--schrift-xs);
  color: var(--text-leise);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Die laufende Stunde ist hervorgehoben. */
.stundenkachel--laeuft {
  border-color: var(--kursfarbe, var(--akzent));
  box-shadow: 0 1px 0 0 var(--glas-glanz) inset,
              0 0 0 1px var(--kursfarbe, var(--akzent)),
              0 8px 24px -12px var(--glas-schatten);
}

/* ---------------------------------------------------------------------------
   Termine (termine.php)
   --------------------------------------------------------------------------- */

.termin {
  display: flex;
  align-items: flex-start;
  gap: var(--abstand-3);
  padding: var(--abstand-3);
  border: 1px solid var(--rand);
  border-left: 3px solid var(--kursfarbe, var(--akzent));
  border-radius: var(--radius-m);
  background: color-mix(in srgb, var(--flaeche) 62%, transparent);
}

.termin--vergangen {
  opacity: .6;
}

.termin__datum {
  flex: none;
  display: grid;
  justify-items: center;
  min-width: 3rem;
  padding: var(--abstand-2) var(--abstand-1);
  border-radius: var(--radius-s);
  background: color-mix(in srgb, var(--kursfarbe, var(--akzent)) 24%, transparent);
  color: var(--text);
}

.termin__tag {
  font-size: var(--schrift-l);
  font-weight: 700;
  line-height: 1.1;
}

.termin__wochentag {
  font-size: var(--schrift-xs);
  font-weight: 600;
}

.termin__text {
  flex: 1;
  min-width: 0;
}

.termin__beschreibung {
  overflow-wrap: anywhere;
}

/* Ein Termin mit Notiz traegt ein kleines Symbol. */
.termin__notiz {
  display: flex;
  align-items: flex-start;
  gap: var(--abstand-2);
  margin-top: var(--abstand-2);
  color: var(--text-leise);
  font-size: var(--schrift-s);
}

.termin__notizsymbol {
  flex: none;
  display: grid;
  padding-top: 2px;
}

.termin__notiztext {
  overflow-wrap: anywhere;
}

.termin__knoepfe {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-2);
}

/* ---------------------------------------------------------------------------
   Faelligkeitszeile im Sheet (Abschnitt 6.2)
   --------------------------------------------------------------------------- */

.faelligkeit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--abstand-2);
}

.faelligkeit__wert {
  flex: 1 0 auto;
  font-weight: 600;
}

.faelligkeit__zurueck {
  padding-inline: var(--abstand-3);
}

.faelligkeit__zurueck svg {
  display: block;
}