/* Ergänzungen dieses Projekts zu base.css (aus den Submodulen übernommen).
 *
 * Farben ausschließlich über die Variablen aus base.css (--hs-blue,
 * --rule-grey, --card-bg, --muted-text, --soft-blue, --surface-tint). base.css
 * schaltet sie über `body.quarto-dark` um, sodass das dunkle Farbschema hier
 * ohne eigene Regeln mitläuft. Eigene @media (prefers-color-scheme)-Blöcke
 * wären sogar falsch: Sie würden bei dunklem Betriebssystem auch im hellen
 * Theme greifen.
 */

/* --- Schrift im Dark Mode -------------------------------------------------
 *
 * base.css setzt Arial nur auf body.quarto-light; das Dark-Theme (darkly)
 * bringt mit Lato eine eigene Schrift mit. Dieselbe Schrift wie im hellen
 * Modus. Gehört nicht in base.css, weil diese Datei aus den Submodulen
 * übernommen ist und hier nicht weiterentwickelt wird.
 */
body.quarto-dark {
  font-family: Arial, Helvetica, sans-serif;
}

/* --- Seitenbreite: Studiengangsseiten nutzen die volle Breite ------------
 *
 * Quarto begrenzt die Inhaltsspalte im Raster für Seiten mit Sidebar
 * (body.floating.fullcontent .page-columns) auf minmax(450px, calc(800px -
 * 3em)) und zentriert sie über beidseitige 5fr-Randspalten. Die
 * Gesamtübersicht kommt ohne Sidebar aus; base.css schaltet dort das Raster
 * ab und gibt main.content die volle Breite. Diese Regel holt dasselbe für
 * die Studiengangsseiten nach: Die Zentrierungsränder fallen weg, die
 * Inhaltsspalte bekommt den ganzen Platz neben der Sidebar. Die Obergrenze
 * bleibt wie auf der Übersicht die Regel main.content aus base.css
 * (max-width: min(1600px, calc(100vw - 3rem))).
 *
 * Die benannten Rasterlinien müssen exakt denen aus Quartos
 * page-columns-float-fullcontent-wide entsprechen: Die Sidebar sitzt in
 * grid-column: page-start/body-start, die rechte Randspalte in
 * body-end/page-end, und base.css spannt main.content von body-start bis
 * page-end. Spezifität (0,4,1) schlägt Quartos (0,3,1); diese Datei lädt als
 * letztes Stylesheet.
 *
 * Nur Desktop: Unter 992px gelten Quartos Mid- und Schmalraster mit anderer
 * Spurtenstruktur; sie bleiben unverändert.
 */
@media (min-width: 992px) {
  body.nav-sidebar.floating.fullcontent .page-columns {
    grid-template-columns:
      [screen-start] 1.5em
      [screen-start-inset] 0
      [page-start] 35px
      [page-start-inset] minmax(0px, 175px)
      [body-start-outset] 35px
      [body-start] 1.5em
      [body-content-start] minmax(0, 1fr)
      [body-content-end] 1.5em
      [body-end] 50px
      [body-end-outset] minmax(0px, 200px)
      [page-end-inset] 50px
      [page-end] 0
      [screen-end-inset] 1.5em
      [screen-end];
  }

  /* main.content trägt in base.css `margin: 0 auto`. Als Grid-Item schrumpft
     es damit auf seine Inhaltsbreite: Seiten mit Tabellen füllen den Platz,
     Seiten mit Karten und kurzen Texten nicht. width: 100% lässt es die
     Grid-Fläche immer ausfüllen; oberhalb von 1600px greifen weiterhin
     max-width und die auto-Ränder aus base.css – wie auf der Übersicht. */
  body.nav-sidebar main.content {
    width: 100%;
  }
}

/* --- Titelbanner ------------------------------------------------------- */

/* Der Kopfkasten aus base.css ist für zwei Textzeilen sehr großzügig
   (padding 2.2rem/2.4rem, Radius 22px). Hier verschlankt, damit der Inhalt
   früher beginnt. */
#title-block-header {
  padding: 1.3rem 1.6rem;
  margin-bottom: 1.5rem;
  border-radius: 14px;
  box-shadow: 0 10px 28px rgba(24, 81, 145, 0.08);
}

#title-block-header::before {
  width: 6rem;
  margin-bottom: 0.8rem;
}

/* Quarto gibt den Metablock (Autor, Datum) immer aus; auf diesen Seiten hat
   er nie Inhalt und hinterließe sonst eine verwaiste Trennlinie samt Leerraum
   am Bannerende. Der Selektor muss Quartos eigene Regel
   `#title-block-header.quarto-title-block.default .quarto-title-meta`
   (display: grid) erreichen: gleiche Spezifität, und diese Datei lädt als
   letztes Stylesheet. Ohne :has()-Support bliebe der alte Zustand. */
#title-block-header.quarto-title-block.default .quarto-title-meta:not(:has(*)) {
  display: none;
}

/* base.css setzt unter 700px padding 1.2rem; ohne eigene Regel würde der
   Wert oben die Mobilfassung wieder aufblähen. */
@media (max-width: 700px) {
  #title-block-header {
    padding: 1rem 1.1rem;
  }
}

/* --- Karten: gemeinsame Grundlage -------------------------------------- */
/*
 * Die Karten sind <article>-Elemente aus rohem HTML, keine Markdown-Über-
 * schriften in einem Div. Quarto würde daraus section.level3 machen, und
 * base.css gestaltet solche Abschnitte als Modulbeschreibungen: Trennlinie
 * oben, große Außenabstände, und über `section.level3 + section.level3` auch
 * noch unterschiedliche Abstände für erste und folgende Karte – die erste Karte
 * einer Reihe säße dadurch sichtbar tiefer als ihre Geschwister.
 */

.studiengangs-karte,
.einstiegskarte,
.modulkarte {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin: 0;
  border: 1px solid var(--rule-grey);
  border-radius: 0.65rem;
  background: var(--card-bg);
}

.studiengangs-karte > *,
.einstiegskarte > *,
.modulkarte > * {
  margin: 0;
}

.studiengangs-karte h3,
.einstiegskarte h3,
.modulkarte h3 {
  margin: 0;
  line-height: 1.35;
}

.studiengangs-karte h3 a,
.einstiegskarte h3 a,
.modulkarte h3 a {
  text-decoration: none;
}

.studiengangs-karte h3 a:hover,
.einstiegskarte h3 a:hover,
.modulkarte h3 a:hover {
  text-decoration: underline;
}

/* --- Übersichtsseite --------------------------------------------------- */

.studiengangs-karten {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: 1.25rem;
  margin: 1.5rem 0 2.5rem;
  align-items: stretch;
}

.studiengangs-karte {
  position: relative;
  overflow: hidden;
  padding: 1.35rem 1.35rem 1.25rem;
  border-top: 3px solid var(--hs-blue);
  box-shadow: 0 0.6rem 1.6rem var(--surface-tint);
  transition: transform 0.15s ease-out, box-shadow 0.15s ease-out;
}

.studiengangs-karte:hover {
  transform: translateY(-2px);
  box-shadow: 0 0.8rem 2rem var(--soft-blue);
}

.studiengangs-karte h3 {
  font-size: 1.28rem;
  line-height: 1.25;
}

.studiengangs-karte > p:not([class]) {
  color: var(--muted-text);
}

.karten-marke {
  order: -1;
  align-self: start;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.1rem 0.55rem;
  border-radius: 999px;
  background: var(--soft-blue);
  color: var(--hs-blue);
}

/* margin-top: auto schiebt die Linkzeile ans Kartenende, damit sie in allen
   Karten einer Reihe auf gleicher Höhe steht – unabhängig von der Textlänge. */
.karten-link {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: auto;
  padding-top: 0.75rem;
  border-top: 1px solid var(--rule-grey);
  font-size: 0.86rem;
}

.karten-link a {
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  background: var(--soft-blue);
  text-decoration: none;
}

.karten-link a:hover {
  text-decoration: underline;
}

/* --- Einleitungsseite: Einstiegskarten --------------------------------- */

.einstiegskarten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1rem;
  margin: 0 0 2rem;
}

.einstiegskarte {
  border-left: 3px solid var(--hs-blue);
  border-radius: 0.5rem;
  padding: 0.9rem 1.05rem;
}

.einstiegskarte h3 {
  font-size: 1.05rem;
}

.einstiegskarte p {
  font-size: 0.9rem;
  color: var(--muted-text);
}

/* --- Verlaufsplan-Seite ------------------------------------------------ */

.verlaufs-intro {
  max-width: 62ch;
}

/* Bewusst nicht sticky: Ein mitscrollender Kasten legt sich über Grafik und
   Tabellen und verdeckt genau das, was gerade gelesen wird. */
.verlaufsauswahl {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
  align-items: end;
  padding: 1rem 1.15rem;
  margin: 1.25rem 0 1.75rem;
  border: 1px solid var(--rule-grey);
  border-radius: 0.6rem;
  background: var(--surface-tint);
}

.verlaufsauswahl label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.9rem;
}

.verlaufsauswahl label > span {
  font-weight: 600;
}

.verlaufsauswahl select {
  min-width: 14rem;
  padding: 0.35rem 0.5rem;
  border-radius: 0.35rem;
  border: 1px solid var(--rule-grey);
  background: var(--card-bg);
  color: inherit;
  font: inherit;
}

.verlaufshinweis {
  padding: 0.75rem 1rem;
  border-left: 3px solid #b4291f;
  background: rgba(180, 41, 31, 0.07);
}

.verlaufsdaten {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.15rem 0.75rem;
  margin: 0 0 1.25rem;
  font-size: 0.95rem;
}

.verlaufsdaten dt {
  font-weight: 600;
}

.verlaufsdaten dd {
  margin: 0;
}

/* --- Verlaufsgrafik: anklickbare Modulkästen --------------------------- */

.verlaufsgrafik {
  margin: 0 0 2rem;
}

/* Das SVG steht inline im Dokument, damit die Modulkästen verlinkbar sind.
   Es bringt eine eigene weiße Grundfläche mit und bleibt deshalb auch im
   dunklen Farbschema hell – wie die Abbildungen in den Modulhandbüchern. */
.verlaufs-svg {
  display: block;
  width: 100%;
  max-width: 60rem;
  height: auto;
  border: 1px solid var(--rule-grey);
  border-radius: 12px;
}

.verlaufsgrafik figcaption {
  margin-top: 0.45rem;
  max-width: 60rem;
  font-size: 0.88rem;
  color: var(--muted-text);
}

.modulkasten {
  cursor: pointer;
}

.modulkasten rect {
  transition: filter 0.12s ease-out;
}

.modulkasten:hover rect,
.modulkasten:focus-visible rect {
  filter: brightness(1.18);
}

.modulkasten:focus-visible {
  outline: 2px solid #111;
  outline-offset: -2px;
}

/* Ohne das fängt der Text die Klicks ab und der Kasten reagiert nicht. */
.modulkasten text {
  pointer-events: none;
}

/* --- Verlaufsplan-Tabellen --------------------------------------------- */

.semester {
  margin: 0 0 1.75rem;
}

.semester-titel {
  font-size: 1.05rem;
  margin: 0 0 0.4rem;
  display: flex;
  gap: 0.75rem;
  align-items: baseline;
}

.semester-credits {
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--muted-text);
}

.tabelle-scroll {
  overflow-x: auto;
}

.verlaufstabelle {
  width: 100%;
  font-size: 0.9rem;
  /* base.css gibt Tabellen abgerundete Ecken; das verträgt sich nur mit
     border-collapse: separate. */
  border-collapse: separate;
  border-spacing: 0;
  /* Spaltenbreiten: Modul, Cr. und Art tragen nur kurze Kennungen und bleiben
     schmal; den freien Platz bekommt Bestandteil. min-width hält die
     Aufteilung auf schmalen Bildschirmen lesbar, .tabelle-scroll scrollt
     dann waagerecht. */
  table-layout: fixed;
  min-width: 40rem;
}

/* Quartos Tabellen-Nachbearbeitung fügt ein colgroup mit gleichmäßigen
   Inline-Breiten (col style="width: 16%") ein; ein eigenes colgroup im
   Roh-HTML entfernt sie wieder. Bei table-layout: fixed schlagen die
   col-Inline-Breiten die Breiten der Kopfzellen, deshalb werden die
   col-Elemente selbst überschrieben – gegen Inline-Stile nur mit
   !important. */
.verlaufstabelle col:nth-child(1) {
  width: 5rem !important;
}

.verlaufstabelle col:nth-child(2) {
  width: auto !important;
}

.verlaufstabelle col:nth-child(3) {
  width: 6rem !important;
}

.verlaufstabelle col:nth-child(4) {
  width: 3.2rem !important;
}

.verlaufstabelle col:nth-child(5) {
  width: 9.5rem !important;
}

.verlaufstabelle col:nth-child(6) {
  width: 3.2rem !important;
}

.verlaufstabelle th,
.verlaufstabelle td {
  padding: 0.35rem 0.55rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--rule-grey);
}

.verlaufstabelle tbody:last-child tr:last-child > * {
  border-bottom: none;
}

.verlaufstabelle thead th {
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border-bottom-width: 2px;
  white-space: nowrap;
}

.verlaufstabelle .modulzeile {
  background: var(--soft-blue);
}

.verlaufstabelle .modulzeile > * {
  font-weight: 600;
}

.verlaufstabelle .bestandteilzeile td:first-child {
  border-bottom: none;
}

.verlaufstabelle .angebot {
  font-weight: 400;
  font-size: 0.85rem;
  color: var(--muted-text);
}

/* --- Kernmodulkataloge -------------------------------------------------- */

/* Stehen unter den Verlaufsvarianten und gelten für alle gleichermaßen. */
.kataloge {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 2px solid var(--rule-grey);
}

.katalog {
  margin: 1.75rem 0;
}

.katalog h3 {
  display: flex;
  gap: 0.75rem;
  align-items: baseline;
  flex-wrap: wrap;
  font-size: 1.05rem;
  margin: 0 0 0.4rem;
}

.katalog-anzahl {
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--muted-text);
}

/* --- Wahlpflichtmodule --------------------------------------------------- */

/* Stehen wie die Kernmodulkataloge unter den Studienplänen, aber innerhalb
   der Verlaufspanels, weil die Belegung vom Studienprofil abhängt. */
.wahlmodell-katalog {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 2px solid var(--rule-grey);
}

/* Ohne eigene Größe wären die h3 hier größer als das h2 der Überschrift,
   weil base.css nur h2 begrenzt. Gleiches Maß wie die Semestertitel. */
.wahlmodell-katalog h3 {
  font-size: 1.05rem;
  margin: 1.2rem 0 0.4rem;
}

/* --- Modulübersicht ---------------------------------------------------- */

.modulliste {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
  gap: 0.75rem;
  margin: 1rem 0 2.25rem;
}

.modulkarte {
  border-radius: 0.5rem;
  padding: 0.7rem 0.9rem;
}

.modulkarte h3 {
  font-size: 0.98rem;
}

.modulkarte-meta {
  margin-top: auto;
  padding-top: 0.3rem;
  font-size: 0.82rem;
  color: var(--muted-text);
}

/* --- Modulseite und Seitennavigation ----------------------------------- */

/* site.py schreibt auf jeder Modulseite die unsichtbare Anker-Überschrift
   ### {.module-anchor}, damit der Lua-Filter die Metadatenfelder erkennt.
   Quartos section-divs hüllt sie in eine section.level3, die in base.css die
   Trennlinie und oberen Abstand einer sichtbaren Modulbeschreibung bekommt.
   Ohne sichtbaren Inhalt hinterließe das eine verwaiste Linie unter dem
   Titelbanner. */
section.level3.module-anchor {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.seiten-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.25rem;
  font-size: 0.9rem;
  justify-content: space-between;
  margin: 2.5rem 0 0;
  padding-top: 0.85rem;
  border-top: 1px solid var(--rule-grey);
}

.seiten-nav .disabled {
  color: var(--muted-text);
}

/* --- Prüfungsordnung --------------------------------------------------- */

.paragraphenliste {
  columns: 2 24rem;
  column-gap: 2.5rem;
  list-style: none;
  padding: 0;
  margin: 1rem 0 2rem;
}

.paragraphenliste li {
  break-inside: avoid;
  margin-bottom: 0.35rem;
}

.paragraphenliste a {
  text-decoration: none;
}

.paragraphenliste a:hover {
  text-decoration: underline;
}

.paragraf-nummer {
  display: inline-block;
  min-width: 3.4rem;
  font-weight: 650;
  color: var(--hs-blue);
}

/* --- Rechtlicher Vorbehalt --------------------------------------------- */

/* Steht auf jeder Seite, die Ordnungsinhalte wiedergibt. Bewusst deutlich
   abgesetzt und nicht ausblendbar. */
.rechtshinweis {
  border-left: 3px solid #b4291f;
  background: rgba(180, 41, 31, 0.06);
  padding: 0.85rem 1.1rem;
  margin: 0 0 1.75rem;
  border-radius: 0 0.35rem 0.35rem 0;
}

.rechtshinweis p {
  margin: 0;
}

.rechtshinweis.kompakt {
  padding: 0.55rem 0.9rem;
  margin-bottom: 1.5rem;
  font-size: 0.88rem;
  color: var(--muted-text);
}

@media print {
  .rechtshinweis {
    border-left-width: 2px;
  }
}

/* --- Quellenhinweis ---------------------------------------------------- */

.quellenhinweis {
  border-left: 3px solid var(--hs-blue);
  background: var(--soft-blue);
  padding: 0.85rem 1.1rem;
  margin: 0 0 2rem;
  border-radius: 0 0.35rem 0.35rem 0;
}

.quellenhinweis p:last-child,
.quellenhinweis ul:last-child {
  margin-bottom: 0;
}

/* --- Navigationsleiste -------------------------------------------------- */

/* base.css setzt für Fließtextlisten `li + li { margin-top: 0.15rem }`. Diese
   Regel greift auch in der Navigationsleiste, der Seitenleiste und den
   Klappmenüs: Dort saß "Übersicht" dadurch 1,2 px höher als "Bachelor" und
   "Master", weil deren Listenpunkte den zusätzlichen Abstand erbten. Die
   Bedienelemente sind kein Fließtext – der Abstand gehört hier zurückgesetzt. */
.navbar li + li,
.dropdown-menu li + li,
.sidebar li + li,
.quarto-secondary-nav li + li,
.quarto-page-breadcrumbs li + li {
  margin-top: 0;
}

.navbar-nav {
  align-items: center;
}

/* --- Inhaltsverzeichnis im Textfluss ----------------------------------- */

/* Steht als Karte zwischen Titel und Text (toc-location: body). Auf breiten
   Fenstern in zwei Spalten, damit es nicht unnötig hoch wird; auf schmalen
   automatisch einspaltig. */
#TOC > ul {
  columns: 2 18rem;
  column-gap: 2rem;
  margin-bottom: 0;
}

#TOC li {
  break-inside: avoid;
}

/* --- Suchbereich-Umschalter -------------------------------------------- */

.suchbereich {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0.9rem;
  font-size: 0.85rem;
  white-space: nowrap;
  color: var(--muted-text);
  cursor: pointer;
  user-select: none;
}

.suchbereich input {
  margin: 0;
}

@media (max-width: 575px) {
  .suchbereich {
    margin: 0.4rem 0.6rem;
    font-size: 0.8rem;
  }
}

/* --- Druck ------------------------------------------------------------- */

@media print {
  .verlaufsauswahl,
  .suchbereich,
  .seiten-nav {
    display: none;
  }

  .verlaufspanel[hidden] {
    display: none !important;
  }
}