/* Funktionsseiten (Übersicht, Noten-Tracker, Mein Studiengang, Meine Uni).
   Bausteine aus gradion.css, Vorführungen aus vorfuehrung.css. */

/* ---------- Seitenkopf (ohne Vollbild-Hero) ---------- */
.seitenkopf { padding: clamp(120px, 12vw, 160px) 0 clamp(48px, 6vw, 80px); }
.seitenkopf__reihe { display: flex; flex-wrap: wrap; gap: 48px 72px; align-items: flex-start; }
.seitenkopf__text { flex: 1 1 440px; display: flex; flex-direction: column; gap: 24px; }
.seitenkopf__text .h1 { font-size: clamp(44px, 5.4vw, 80px); }
.seitenkopf__bild { flex: 1 1 440px; min-width: 0; }
.seitenkopf__knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
/* Hinweis wie „Keine Zahlungsdaten nötig.“ klein und mittig unter dem Knopf statt daneben */
.seitenkopf__knoepfe:has(> .klein) { flex-direction: column; width: max-content; max-width: 100%; gap: 10px; }
.knopf--gross + .klein { font-size: 13px; }
[aria-label="Loslegen"] .knopf--gross + .klein { margin-top: -14px; }   /* Schluss: dicht unter dem Knopf */

/* ---------- Teile: Text und Ansicht im Wechsel ---------- */
.teile { display: flex; flex-direction: column; gap: clamp(64px, 8vw, 112px); }
.teil { display: flex; flex-wrap: wrap; gap: 32px 72px; align-items: center; }
.teil:nth-child(even) { flex-direction: row-reverse; }
.teil__text { flex: 1 1 380px; display: flex; flex-direction: column; gap: 16px; max-width: 560px; }
.teil__text .h3 { font-size: clamp(28px, 2.8vw, 38px); letter-spacing: -0.025em; line-height: 1.1; }
.teil__bild { flex: 1 1 420px; min-width: 0; }

/* ---------- Kleine Ansichten wie in der App ---------- */
.ansicht { background: var(--papier-hell); border: 1px solid var(--linie); border-radius: 20px; padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.abschnitt--hell .ansicht { background: var(--papier); }
.ansicht__kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 15px; font-weight: 600; }
.ansicht__kopf small { font-size: 13px; font-weight: 500; color: var(--text-gedaempft); }
.ansicht__hinweis { font-size: 13px; color: var(--text-gedaempft); }

/* Aufteilung eines Studiengangs (Mein Studiengang) */
.aufteilung { display: flex; gap: 4px; height: 26px; }
.aufteilung span { border-radius: 6px; background: var(--graphit); }
.aufteilung-legende { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 14px; }
.aufteilung-legende b { font-weight: 600; }

/* Fristen-Karte */
.fristen { display: flex; flex-direction: column; gap: 10px; }
.fristen__kopf { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fristen__kopf div { background: var(--weiss); border: 1px solid var(--linie); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; }
.fristen__kopf small { font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--text-gedaempft); }
.fristen__kopf b { font-size: 24px; font-weight: 500; }
.frist { display: grid; grid-template-columns: auto 1fr auto; gap: 4px 14px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--linie); }
.frist:last-child { border-bottom: none; }
.frist__datum { font-weight: 600; font-size: 15px; }
.frist__titel { font-size: 15px; font-weight: 500; }
.frist__titel span { display: block; font-size: 13px; font-weight: 400; color: var(--text-gedaempft); }
.frist__titel .frist__folge { margin-top: 2px; font-size: 14px; color: inherit; }
.frist__stand { display: block; height: 6px; margin: 8px 0 4px; border-radius: 99px; background: var(--linie); overflow: hidden; }
.frist__stand i { display: block; height: 100%; border-radius: inherit; background: var(--graphit); transition: width 1.1s cubic-bezier(.33, 1, .68, 1) var(--d, 0ms); }
.frist__titel .frist__stand-text { margin-bottom: 4px; }
.frist__rest { font-size: 13px; font-weight: 600; white-space: nowrap; min-width: 8em; text-align: right; }   /* gleich breit, damit die Balken gleich lang sind */

/* Listen mit Status (Öffnungszeiten, Termine) */
.statusliste { display: flex; flex-direction: column; }
.statusliste > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--linie); font-size: 15px; }
.statusliste > div:last-child { border-bottom: none; }
.statusliste em { font-style: normal; color: var(--text-gedaempft); font-size: 14px; white-space: nowrap; }
.termin__datum { flex: 0 0 124px; font-weight: 600; white-space: nowrap; }   /* breit genug für „24. Dez – 6. Jan“ */
.termin__text { flex: 1; }
.statusliste em.termin__laeuft { color: var(--gruen-text); font-weight: 600; }   /* Frist läuft gerade */
/* Schmal: Datum und Countdown oben, der Titel darunter über die volle Breite */
@media (max-width: 520px) {
  .statusliste > div:has(.termin__datum) { flex-wrap: wrap; row-gap: 2px; }
  .termin__datum { flex: 1 0 auto; }
  .termin__text { order: 3; flex-basis: 100%; }
}

/* Anliegen */
.anliegen__stelle { display: flex; justify-content: space-between; align-items: flex-start; gap: 6px 12px; flex-wrap: wrap; background: var(--weiss); border: 1px solid var(--linie); border-radius: 12px; padding: 10px 14px; font-size: 15px; }
.anliegen__stelle > div { display: flex; flex-direction: column; gap: 2px; }
.anliegen__stelle > div span { font-size: 13px; color: var(--text-gedaempft); }
/* Live-Pille der Stelle (zeiten-demo.js), wie in der App */
.anliegen__status { flex-shrink: 0; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; background: var(--chip); color: var(--text-gedaempft); }
.anliegen__status--offen { background: var(--gruen-hell); color: var(--gruen-text); }
.anliegen__status--bald { background: oklch(0.95 0.045 70); color: oklch(0.5 0.11 55); }
.anliegen ol { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; font-size: 15px; line-height: 1.5; }
/* Die Frage klappt auf und zu wie eine Modulkarte (› dreht sich) */
.anliegen__frage summary { list-style: none; cursor: pointer; }
.anliegen__frage summary::-webkit-details-marker { display: none; }
.anliegen__frage summary:focus-visible { outline: none; box-shadow: inset var(--fokus); border-radius: 20px; }
.anliegen__rechts { flex: none; display: flex; align-items: center; gap: 12px; }
.anliegen__pfeil { font-size: 18px; line-height: 1; transition: transform .2s; }
.anliegen__frage[open] .anliegen__pfeil { transform: rotate(90deg); }
.anliegen__antwort { display: flex; flex-direction: column; gap: 10px; padding: 0 0 16px; }
.anliegen__hinweis { margin: 0; font-size: 13px; line-height: 1.5; color: var(--text-gedaempft); }
/* Mehrere Fragen untereinander, getrennt durch eine Linie */
.anliegen { gap: 0; }
.anliegen__frage + .anliegen__frage { border-top: 1px solid var(--linie); }
.anliegen__frage > summary { margin: 0 -20px; padding: 14px 20px; }   /* klickbar über die ganze Breite und Höhe der Zeile, bis an den Kartenrand */
.anliegen__frage:first-child > summary { margin-top: -20px; padding-top: 20px; }
.anliegen__frage:last-child:not([open]) > summary { margin-bottom: -20px; padding-bottom: 20px; }
.anliegen__frage:last-child .anliegen__antwort { padding-bottom: 0; }

/* Campusplan */
.campusplan { border-radius: 20px; overflow: hidden; border: 1px solid var(--linie); background: var(--weiss); }
.campusplan img { width: 100%; height: auto; }

/* ---------- Preis-Hinweis und Weiter ---------- */
.preishinweis { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 20px 40px; background: var(--chip); border-radius: 24px; padding: clamp(24px, 3vw, 36px); }
.preishinweis > div { display: flex; flex-direction: column; gap: 8px; max-width: 620px; }
.preishinweis strong { font-size: clamp(22px, 2vw, 26px); font-weight: 500; letter-spacing: -0.015em; }
.weiter { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 20px; }
.weiter a { display: flex; flex-direction: column; gap: 10px; text-decoration: none; background: var(--papier-hell); border: 1px solid var(--linie); border-radius: 24px; padding: 28px; transition: border-color .15s; }
.weiter a:hover { border-color: var(--graphit); }
.weiter strong { font-size: 24px; font-weight: 500; letter-spacing: -0.02em; display: flex; justify-content: space-between; gap: 12px; }
.weiter span { color: var(--text-gedaempft); font-size: 16px; }

/* ---------- Übersicht „Funktionen“ ---------- */
.bereiche { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.bereich { display: flex; flex-direction: column; gap: 16px; background: var(--papier-hell); border: 1px solid var(--linie); border-radius: 28px; padding: clamp(24px, 3vw, 40px); }
.bereich--gross { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 32px 56px; align-items: center; }
.bereich--gross .bereich__text { display: flex; flex-direction: column; gap: 16px; }
.bereich .h3 { font-size: clamp(28px, 2.8vw, 38px); }
.bereich .knopf { margin-top: 4px; }
@media (max-width: 820px) {
  .bereiche { grid-template-columns: 1fr; }
  .bereich--gross { grid-template-columns: 1fr; }
}

/* Die Frage, die der Besucher gerade im Kopf hat, über jedem Teil */
.frage { font-size: 17px; font-style: italic; color: var(--text-gedaempft); }

/* Umschalter in kleinen Ansichten darf umbrechen */
.ansicht .umschalter { display: flex; }
.ansicht .umschalter button { flex: 1 1 0; min-width: 0; padding: 9px 8px; font-size: 15px; }
@media (max-width: 480px) { .ansicht .umschalter button { font-size: 14px; padding: 9px 4px; } }

/* ---------- Preisseite ---------- */
.preise-kopf { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 28px 48px; }
.zwei-spalten { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 20px; }
.spalte { background: var(--papier-hell); border: 1px solid var(--linie); border-radius: 24px; padding: clamp(24px, 3vw, 32px); display: flex; flex-direction: column; gap: 14px; }
.spalte ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.wahlhilfe { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 24px 48px; align-items: start; }
@media (max-width: 820px) { .wahlhilfe { grid-template-columns: 1fr; } }
.wahlhilfe__eingabe { display: flex; flex-direction: column; gap: 16px; }
.wahlhilfe__eingabe label { display: flex; flex-direction: column; gap: 8px; font-size: 15px; font-weight: 500; }
.wahlhilfe__eingabe select { font-size: 17px; padding: 12px 14px; border: 1px solid var(--linie); border-radius: 12px; background: var(--weiss); color: var(--graphit); }
.wahlhilfe__ergebnis { background: var(--zweitton-hell); border-radius: 24px; padding: clamp(22px, 3vw, 32px); display: flex; flex-direction: column; gap: 14px; }
.wahlhilfe__vergleich { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.wahlhilfe__vergleich div { background: var(--papier-hell); border-radius: 16px; padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; }
.wahlhilfe__vergleich div.besser { outline: 2px solid var(--graphit); }
.wahlhilfe__vergleich small { font-size: 13px; color: var(--text-gedaempft); }
.wahlhilfe__vergleich b { font-size: 30px; font-weight: 500; letter-spacing: -0.03em; }
.wahlhilfe__satz { font-size: clamp(20px, 2vw, 24px); font-weight: 500; letter-spacing: -0.015em; line-height: 1.25; }
.wahlhilfe__zusatz { display: block; margin-top: 8px; font-size: 17px; font-weight: 400; letter-spacing: 0; line-height: 1.5; color: var(--text-gedaempft); }

/* ---------- Hochschulen ---------- */
.unikarten { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 20px; }
.unikarte { display: flex; flex-direction: column; gap: 10px; text-decoration: none; background: var(--papier-hell); border: 1px solid var(--linie); border-radius: 24px; padding: 28px; transition: border-color .15s; }
.unikarte:hover { border-color: var(--graphit); }
.unikarte strong { font-size: 24px; font-weight: 500; letter-spacing: -0.02em; display: flex; justify-content: space-between; gap: 12px; }
.unikarte span { font-size: 16px; color: var(--text-gedaempft); }
/* Hochschulen auf der Wunschliste: schlichte Liste in Spalten, Zahl der Studiengänge leise dahinter */
/* Bundesland-Überschrift nah an ihrer Liste, mehr Luft zur nächsten Gruppe */
.unigruppe { display: flex; flex-direction: column; gap: 8px; }
.unigruppe + .unigruppe { margin-top: 20px; }
/* Raster statt CSS-Spalten: so liegen die Linien über alle Spalten auf einer Höhe */
.uniliste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(max(min(100%, 260px), calc((100% - 80px) / 3)), 1fr)); column-gap: 40px; } /* höchstens 3 Spalten */
.uniliste li { min-width: 0; padding: 7px 0; border-bottom: 1px solid var(--linie); font-size: 17px; display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.uniliste a { text-decoration: none; }
.uniliste a:hover { text-decoration: underline; text-underline-offset: 3px; }
.uniliste__zahl { flex: none; color: var(--text-gedaempft); font-size: 15px; font-variant-numeric: tabular-nums; }
/* Einzeilig, damit alle Zeilen gleich hoch sind. Gekürzter Name: beim Drüberfahren hebt sich genau diese Zeile
 * ein Stück nach vorne und wird so lang, dass der Name ganz drin steht (gradion.js setzt .zeigt-voll und die Maße).
 * Gleiche Farbe wie der Abschnitt, damit es dieselbe Zeile bleibt und nur die Nachbarn verdeckt. */
.uniliste__name { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.uniliste li { position: relative; transition: transform .15s ease, box-shadow .15s ease; }
.uniliste li.zeigt-voll {
  z-index: 5; width: var(--voll-breite); margin-left: var(--voll-links); padding-left: 12px; padding-right: 12px;
  background: var(--papier); border-radius: 8px; transform: translateY(-2px);
  box-shadow: 0 8px 20px oklch(0.2 0.03 50 / 0.12);
}
.abschnitt--hell .uniliste li.zeigt-voll { background: var(--papier-hell); }
.uniliste li.zeigt-voll .uniliste__name { overflow: visible; white-space: normal; text-overflow: clip; }
.rangliste { display: flex; flex-direction: column; gap: 10px; }
.treffer__platz { flex: none; width: 18px; color: var(--orange); font-family: var(--schrift-display); font-weight: 600; font-size: 17px; }

/* ---------- Suche „Ist dein Studiengang dabei?“ (wie auf der Startseite) ---------- */
.dabei { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 24px; }
.dabei__suche { width: min(640px, 100%); position: relative; }
.dabei__suche .feld { font-size: 19px; padding: 18px 22px; border-radius: 16px; }
.dabei__ergebnisse { width: min(640px, 100%); display: flex; flex-direction: column; gap: 10px; text-align: left; }
.treffer {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  background: var(--papier-hell); border: 1px solid var(--linie); border-radius: 16px; padding: 14px 16px;
}
/* Name links, Knopf immer rechts auf gleicher Höhe */
.treffer__name { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.treffer__name strong { font-size: 17px; font-weight: 500; }
/* Name und Uni einzeilig, damit alle Karten gleich hoch sind; Klick auf die Karte zeigt alles (katalog.js) */
.treffer__name > strong, .treffer__name > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.treffer.ist-kuerzbar { cursor: pointer; }
.treffer.ist-offen .treffer__name > strong, .treffer.ist-offen .treffer__name > span { white-space: normal; overflow-wrap: anywhere; }
.treffer__kurz { display: none; }
/* Handy: Name darf zwei Zeilen haben, sonst bleibt zu wenig übrig; „Dabei“ fällt weg, der Knopf heißt nur „Testen“ */
@media (max-width: 560px) {
  .treffer__name > strong { white-space: normal; hyphens: auto; -webkit-hyphens: auto; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
  .treffer.ist-offen .treffer__name > strong { display: block; -webkit-line-clamp: unset; line-clamp: none; }
  .treffer--dabei .badge, .treffer__lang { display: none; }
  .treffer__kurz { display: inline; }
}
.treffer > .knopf, .treffer > .badge, .treffer > a.knopf { flex: none; }
/* Abschluss als feste Spalte links, durch eine feine Linie getrennt */
.treffer__abschluss { flex: none; width: 76px; align-self: stretch; display: flex; align-items: center; border-right: 1px solid var(--linie); font-size: 14px; color: var(--text-gedaempft); }
@media (max-width: 560px) { .treffer__abschluss { width: 62px; font-size: 13px; } }
/* Wunschliste einer Hochschule: Bachelor und Master nebeneinander, auf schmalen Bildschirmen untereinander */
.wunsch-gruppen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 40px; align-items: start; }
/* Suchfeld mittig über beiden Spalten (wie auf der Hochschulen-Seite): es durchsucht Bachelor und Master */
.dabei__suche.wunsch-suche { width: min(640px, 100%); align-self: center; }
@media (max-width: 900px) { .wunsch-gruppen { grid-template-columns: 1fr; } }
.treffer[hidden], .wunsch-gruppe[hidden] { display: none; } /* sonst gewinnt display:flex über hidden */
/* Abstimmen ist eine Aktion auf der Seite, kein Weg woandershin: ohne Pfeil */
.treffer .knopf[data-abstimmen] { padding: 9px 16px; }
@media (max-width: 560px) {
  .treffer .knopf[data-abstimmen] { padding: 8px 12px; font-size: 14px; }
}
.treffer__name span { font-size: 14px; color: var(--text-gedaempft); }
.treffer .badge { flex: none; }
.treffer .knopf { padding: 6px 6px 6px 14px; font-size: 15px; }
.treffer .knopf .knopf__pfeil { width: 26px; height: 26px; }
.dabei__leer { font-size: 16px; color: var(--text-gedaempft); text-align: center; }
.dabei__zwischen { margin: 14px 0 0; font-size: 15px; color: var(--text-gedaempft); }
.dabei__zwischen:first-child { margin-top: 0; }

.teile--text .teil:nth-child(even) { flex-direction: row; }
.teile--text .teil { align-items: flex-start; }

/* ---------- FAQ ---------- */
.faq-kopf { display: flex; flex-wrap: wrap; gap: 32px 56px; align-items: flex-end; }
.faq-kontakt {
  flex: 0 1 320px; display: flex; flex-direction: column; gap: 6px; text-decoration: none;
  background: var(--zweitton-hell); border-radius: 24px; padding: 24px 26px; transition: background-color .15s;
}
.faq-kontakt:hover { background: var(--zweitton); }
.faq-kontakt-platz { flex: 0 1 320px; }   /* hält oben den Platz frei, solange die Karte mitläuft (faq.js) */
.faq-kontakt strong { font-size: 26px; font-weight: 500; letter-spacing: -0.02em; display: flex; justify-content: space-between; gap: 12px; }
.faq-liste { display: flex; flex-direction: column; gap: clamp(40px, 5vw, 64px); max-width: calc(880px + 2 * var(--rand)); margin-left: max(0px, calc((100vw - var(--inhalt)) / 2)); }
.faq-thema { display: flex; flex-direction: column; gap: 4px; scroll-margin-top: 96px; }
.faq-thema[hidden] { display: none; } /* sonst gewinnt display:flex über hidden */
/* Am Desktop läuft „Schreib uns“ beim Scrollen mit */
@media (min-width: 1280px) {
  .faq-kontakt--mitlaufend { position: fixed; right: max(24px, calc((100vw - var(--inhalt)) / 2 + 24px)); bottom: 24px; z-index: 30; flex-basis: auto; width: 300px; transition: background-color .15s, opacity .3s ease, visibility .3s; }
  /* Unten, wo „Frage nicht dabei?“ steht, ausgeblendet (faq.js) */
  .faq-kontakt--mitlaufend.faq-kontakt--weg { opacity: 0; visibility: hidden; pointer-events: none; }
}

/* ---------- Kontakt ---------- */
.kontakt { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 40px 72px; align-items: start; }
@media (max-width: 900px) { .kontakt { grid-template-columns: 1fr; } .kontakt .formular { order: -1; } }
.formular { display: flex; flex-direction: column; gap: 18px; background: var(--papier-hell); border: 1px solid var(--linie); border-radius: 24px; padding: clamp(22px, 3vw, 32px); }
.formular label { display: flex; flex-direction: column; gap: 8px; font-size: 15px; font-weight: 500; }
.formular textarea { min-height: 180px; resize: vertical; line-height: 1.5; }
.formular select.feld { appearance: auto; }
.formular .feld-falle { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formular__fuss { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.hinweis { border-radius: 14px; padding: 12px 16px; font-size: 15px; line-height: 1.45; }
.hinweis--gut { background: var(--gruen-hell); color: var(--gruen-text); }
.hinweis--fehler { background: var(--rot-hell); color: var(--rot-text); }

/* ---------- Rechtliche Seiten ---------- */
.recht { max-width: 760px; display: flex; flex-direction: column; gap: 14px; font-size: 17px; line-height: 1.6; }
.recht h2 { font-size: clamp(22px, 2vw, 26px); font-weight: 500; letter-spacing: -0.015em; margin: 28px 0 0; }
.recht h3 { font-size: 18px; font-weight: 600; margin: 12px 0 0; }
.recht p, .recht ul, .recht ol { margin: 0; color: var(--graphit); }
.recht ul, .recht ol { padding-left: 22px; display: flex; flex-direction: column; gap: 6px; }
.recht .gedaempft { color: var(--text-gedaempft); }
.luecke { background: var(--zweitton-hell); border: 1px dashed var(--zweitton-punkt); border-radius: 6px; padding: 0 6px; font-weight: 500; }
.entwurf { background: var(--rot-hell); color: var(--rot-text); border-radius: 14px; padding: 12px 16px; font-size: 15px; line-height: 1.45; max-width: 760px; }
.recht-stand { font-size: 14px; color: var(--text-gedaempft); }
.formular fieldset { border: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.formular legend { font-size: 15px; font-weight: 500; margin-bottom: 8px; padding: 0; }
.wahl { display: flex; align-items: flex-start; gap: 10px; font-weight: 400 !important; flex-direction: row !important; font-size: 16px !important; }
.wahl input { margin-top: 4px; accent-color: var(--graphit); }
.bestaetigung { display: flex; flex-direction: column; gap: 10px; background: var(--gruen-hell); color: var(--gruen-text); border-radius: 20px; padding: 22px 24px; }
.bestaetigung pre { margin: 0; white-space: pre-wrap; font-family: inherit; font-size: 15px; color: var(--graphit); background: var(--weiss); border-radius: 12px; padding: 14px 16px; }

/* Funktionen-Seite: Stimmungsbild in der Noten-Tracker-Karte */
.gefuehl { display: flex; flex-direction: column; justify-content: center; gap: 10px; min-height: 280px; padding: clamp(24px, 3vw, 36px); background: var(--papier); border-radius: 24px; }
.gefuehl__gross { font-family: var(--schrift-display); font-size: clamp(56px, 6vw, 84px); font-weight: 500; letter-spacing: -0.04em; line-height: 1; }
.gefuehl__unter { font-size: 17px; color: var(--text-gedaempft); }
.gefuehl__balken { height: 12px; border-radius: 8px; background: var(--chip); margin-top: 18px; overflow: hidden; }
.gefuehl__balken i { display: block; height: 100%; border-radius: 8px; background: var(--orange); }
.gefuehl__marken { display: flex; justify-content: space-between; font-size: 13px; color: var(--text-gedaempft); }
.gefuehl__marken .an { color: var(--graphit); font-weight: 600; }
/* Animation (funktionen.js) */
.gefuehl__balken i { transition: width 1.2s cubic-bezier(0.33, 1, 0.68, 1); }
/* Text-Wechsel: alter und neuer Text liegen übereinander, der alte gleitet nach oben weg, der neue von unten rein */
.gefuehl__gross { display: grid; }
.gefuehl__gross > span { grid-area: 1 / 1; transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1), filter 0.7s cubic-bezier(0.22, 1, 0.36, 1); }
.gefuehl__gross > .rein { opacity: 0; transform: translateY(0.3em); filter: blur(6px); }
.gefuehl__gross > .raus { opacity: 0; transform: translateY(-0.3em); filter: blur(6px); }
.gefuehl__marken span { transition: color 0.3s ease; }
.gefuehl--sofort, .gefuehl--sofort * { transition: none !important; }

/* ---------- Infografiken auf der Noten-Tracker-Seite ----------
   Gleiche Regeln für alle: gleiche Karte und Mindesthöhe, große Zahlen in der Überschriftenschrift,
   Graphit als Grundfarbe, genau ein oranger Akzent pro Grafik. */
.grafik { min-height: 440px; display: flex; flex-direction: column; justify-content: center; gap: 24px; padding: clamp(24px, 3vw, 40px); background: var(--papier); border: 1px solid var(--linie); border-radius: 24px; }
.grafik__label { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text-gedaempft); }
.grafik__zahl { font-family: var(--schrift-display); font-size: clamp(64px, 7vw, 104px); font-weight: 500; letter-spacing: -0.045em; line-height: 0.95; }
.grafik__klein { font-size: 14px; color: var(--text-gedaempft); }
.grafik__hinweis { font-size: 13px; color: var(--text-gedaempft); font-variant-numeric: tabular-nums; }

/* Schnitt: gerundet gegen abgeschnitten */
.vergleich { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.vergleich__seite { display: flex; flex-direction: column; gap: 10px; padding: 22px 22px 20px; border-radius: 18px; border: 1px dashed var(--linie); }
.vergleich__falsch { color: oklch(0.15 0.005 60 / 0.3); text-decoration: line-through; text-decoration-thickness: 4px; text-decoration-color: oklch(0.15 0.005 60 / 0.45); }
.vergleich__seite--an { border: 0; background: var(--graphit); color: var(--weiss); }
.vergleich__seite--an .grafik__zahl { color: var(--orange); }
.vergleich__seite--an .grafik__klein { color: var(--auf-dunkel-gedaempft); }
@media (max-width: 480px) { .vergleich { grid-template-columns: 1fr; } }

/* Vertiefung: Weggabelung */
.gabel { display: flex; flex-direction: column; align-items: center; }
.gabel__start { position: relative; padding: 10px 18px; border-radius: 999px; background: var(--graphit); color: var(--weiss); font-size: 15px; font-weight: 600; }
.gabel__aeste { position: relative; width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding-top: 60px; }
/* Linien: vom Start nach unten, quer über beide Äste, in jeden Ast hinein */
.gabel__aeste::before { content: ""; position: absolute; top: 0; left: calc(50% - 1px); width: 2px; height: 30px; background: var(--orange); }
.gabel__aeste::after { content: ""; position: absolute; top: 30px; left: calc(25% - 4px); right: calc(25% - 4px); height: 2px; background: linear-gradient(to right, var(--orange) 50%, var(--linie) 50%); }
.gabel__ast { position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.gabel__ast::before { content: ""; position: absolute; top: -30px; left: calc(50% - 1px); width: 2px; height: 30px; background: var(--linie); }
.gabel__ast--an::before { background: var(--orange); }
.gabel__knoten { padding: 10px 16px; border-radius: 14px; border: 2px solid var(--linie); background: var(--papier-hell); font-size: 15px; font-weight: 600; text-align: center; color: var(--text-gedaempft); }
.gabel__ast--an .gabel__knoten { border-color: var(--orange); color: var(--graphit); }
.gabel__blaetter { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.gabel__blaetter span { font-size: 13px; line-height: 1.35; padding: 7px 10px; border-radius: 10px; background: var(--papier-hell); border: 1px solid var(--linie); color: var(--text-gedaempft); text-align: center; }
.gabel__ast--an .gabel__blaetter span { color: var(--graphit); }
.gabel__blaetter span.an { background: var(--graphit); border-color: var(--graphit); color: var(--weiss); font-weight: 500; }

/* Schon eingerichtet: die große Null */
.null { display: flex; align-items: center; gap: 24px; }
.null .grafik__zahl { color: var(--orange); font-size: clamp(96px, 11vw, 150px); }
.null__text { font-family: var(--schrift-display); font-size: clamp(22px, 2.2vw, 28px); font-weight: 500; letter-spacing: -0.02em; line-height: 1.2; }
.fakten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.fakten span { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border-radius: 14px; background: var(--papier-hell); border: 1px solid var(--linie); font-size: 13px; color: var(--text-gedaempft); }
.fakten b { font-family: var(--schrift-display); font-size: 28px; font-weight: 500; letter-spacing: -0.03em; color: var(--graphit); line-height: 1.1; }
@media (max-width: 480px) { .fakten { grid-template-columns: 1fr; } }

/* Nur erlaubt: Haken und eine Sperre */
.erlaubt { display: flex; flex-direction: column; gap: 8px; }
.erlaubt span { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 13px 16px; border-radius: 14px; background: var(--papier-hell); border: 1px solid var(--linie); font-size: 15px; font-weight: 500; }
.erlaubt i { font-style: normal; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--graphit); color: var(--weiss); font-size: 13px; flex: none; }
.erlaubt__nein { color: var(--text-gedaempft); text-decoration: line-through; text-decoration-color: oklch(0.15 0.005 60 / 0.35); background: transparent !important; border-style: dashed !important; }
.erlaubt__nein em { font-style: normal; text-decoration: none; display: inline-block; flex: none; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: var(--orange); color: var(--graphit); }

/* Noten eintragen: große Notenkästchen */
.notenwahl { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.notenwahl span { display: grid; place-items: center; height: 56px; border-radius: 14px; background: var(--papier-hell); border: 1px solid var(--linie); font-family: var(--schrift-display); font-size: 22px; font-weight: 500; }
.notenwahl span.an { background: var(--orange); border-color: var(--orange); color: var(--graphit); transform: scale(1.06); box-shadow: 0 8px 20px oklch(0.72 0.15 55 / 0.35); }
.notenwahl__breit { grid-column: 1 / -1; font-family: var(--schrift-text) !important; font-size: 16px !important; height: 48px !important; color: var(--text-gedaempft); }

/* Fortschritt: große Zahl und Meilensteine */
.stand { display: flex; align-items: baseline; gap: 14px; }
.stand__von { font-family: var(--schrift-display); font-size: clamp(22px, 2.2vw, 28px); font-weight: 500; color: var(--text-gedaempft); }
.meilen { display: flex; flex-direction: column; gap: 10px; }
.meilen__balken { position: relative; height: 16px; border-radius: 9px; background: var(--chip); }
.meilen__balken i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 9px; }
.meilen__balken .geplant { background: var(--linie); }
.meilen__balken .erbracht { background: var(--graphit); }
.meilen__marken { position: relative; height: 22px; font-size: 13px; color: var(--text-gedaempft); }
.meilen__marken span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.meilen__marken span:first-child { transform: none; }
.meilen__marken span:last-child { transform: translateX(-100%); }
.meilen__marken .ok { color: var(--graphit); font-weight: 600; }
.meilen__marken .ok::before { content: "✓ "; }
.meilen__marken .naechste { color: var(--orange); font-weight: 600; }
.stand__noch { font-size: 16px; font-weight: 500; }

/* Bachelor und Master: zwei Karten, ein Wechsel */
.konto { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; }
.konto__karte { display: flex; flex-direction: column; gap: 4px; padding: 20px; border-radius: 18px; background: var(--papier-hell); border: 1px solid var(--linie); min-width: 0; }
.konto__karte strong { font-family: var(--schrift-display); font-size: 20px; font-weight: 500; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.konto__karte--an { border: 2px solid var(--graphit); }
.konto__karte--neu { background: transparent; border-style: dashed; }
.konto__wechsel { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--orange); font-size: 20px; font-weight: 600; }
@media (max-width: 480px) { .konto { grid-template-columns: 1fr; justify-items: center; } .konto__karte { width: 100%; } .konto__wechsel { transform: rotate(90deg); } }

/* ---------- Einmal-Animation der Infografiken (grafiken.js) ----------
   .grafik--wartet = Anfangszustand, bis die Grafik zum ersten Mal sichtbar ist.
   --d = Verzögerung je Teil, setzt grafiken.js. Ohne JavaScript gibt es kein --wartet, also gleich den Endzustand. */
.grafik .fakten > span, .grafik .erlaubt > span, .grafik[data-grafik="erlaubt"] > .grafik__klein, .gabel__start, .gabel__knoten,
.gabel__blaetter span, .notenwahl > span, .meilen__marken span, .stand__noch, .vergleich__seite, .konto__karte {
  transition: opacity .55s ease var(--d, 0ms), translate .55s cubic-bezier(0.22, 1, 0.36, 1) var(--d, 0ms);
}
.grafik--wartet .fakten > span, .grafik--wartet .erlaubt > span, .grafik--wartet[data-grafik="erlaubt"] > .grafik__klein, .grafik--wartet .gabel__start, .grafik--wartet .gabel__knoten,
.grafik--wartet .gabel__blaetter span, .grafik--wartet .notenwahl > span, .grafik--wartet .meilen__marken span, .grafik--wartet .stand__noch, .grafik--wartet .vergleich__seite, .grafik--wartet .konto__karte {
  opacity: 0; translate: 0 12px;
}

/* Nur erlaubt: Haken ploppen, die Sperre kommt zuletzt */
.erlaubt i { transition: scale .45s cubic-bezier(0.34, 1.56, 0.64, 1) var(--d, 0ms); }
.grafik--wartet .erlaubt i { scale: 0; }
.erlaubt__nein { transition: opacity .55s ease var(--d, 0ms), translate .55s cubic-bezier(0.22, 1, 0.36, 1) var(--d, 0ms), text-decoration-color .4s ease 1000ms !important; }
.grafik--wartet .erlaubt__nein { text-decoration-color: transparent; }
.erlaubt__nein em { transition: scale .45s cubic-bezier(0.34, 1.56, 0.64, 1) var(--d, 0ms); }
.grafik--wartet .erlaubt__nein em { scale: 0; }

/* Weggabelung: Linien wachsen, die Spezialisierung wird am Ende gewählt */
.gabel__aeste::before { transform-origin: top; transition: scale .3s ease 250ms; }
.gabel__aeste::after { transition: scale .35s ease 500ms; }
.gabel__ast::before { transform-origin: top; transition: scale .25s ease 750ms; }
.grafik--wartet .gabel__aeste::before, .grafik--wartet .gabel__ast::before { scale: 1 0; }
.grafik--wartet .gabel__aeste::after { scale: 0 1; }
.gabel__knoten { transition: opacity .55s ease var(--d, 0ms), translate .55s cubic-bezier(0.22, 1, 0.36, 1) var(--d, 0ms), border-color .4s ease 1500ms, color .4s ease 1500ms; }
.grafik--wartet .gabel__ast--an .gabel__knoten { border-color: var(--linie); color: var(--text-gedaempft); }
.gabel__blaetter span.an { transition: opacity .55s ease var(--d, 0ms), translate .55s cubic-bezier(0.22, 1, 0.36, 1) var(--d, 0ms), background-color .4s ease 1700ms, border-color .4s ease 1700ms, color .4s ease 1700ms; }
.grafik--wartet .gabel__blaetter span.an { background: var(--papier-hell); border-color: var(--linie); color: var(--graphit); }

/* Noten: Kästchen kommen, dann wird 1,7 gewählt */
.notenwahl > span.an { transition: opacity .55s ease var(--d, 0ms), translate .55s cubic-bezier(0.22, 1, 0.36, 1) var(--d, 0ms), background-color .3s ease 850ms, border-color .3s ease 850ms, transform .45s cubic-bezier(0.34, 1.56, 0.64, 1) 850ms, box-shadow .45s ease 850ms; }
.grafik--wartet .notenwahl > span.an { background: var(--papier-hell); border-color: var(--linie); transform: none; box-shadow: none; }

/* Fortschritt: Balken füllt sich, Meilensteine kommen nacheinander */
/* Gleiche Dauer und Kurve wie das Hochzählen der Zahl (1,4 s, ease-out), damit beide zusammen ankommen.
   Der Endwert muss als inset() dastehen, von „none“ aus würde nichts gleiten. */
.meilen__balken i { clip-path: inset(0 0 0 0 round 9px); transition: clip-path 1.4s cubic-bezier(0.33, 1, 0.68, 1); }
.grafik--wartet .meilen__balken i { clip-path: inset(0 100% 0 0 round 9px); }

/* Schnitt: links 1,94, rechts 1,93, dann wird 1,94 durchgestrichen */
.vergleich__falsch { transition: color .5s ease 1100ms, text-decoration-color .4s ease 1100ms; }
.grafik--wartet .vergleich__falsch { color: var(--graphit); text-decoration-color: transparent; }

/* Bachelor und Master: Karten kommen, der Wechsel-Knopf dreht sich hinein */
.konto__wechsel { transition: rotate .7s cubic-bezier(0.34, 1.56, 0.64, 1) var(--d, 0ms), scale .5s cubic-bezier(0.34, 1.56, 0.64, 1) var(--d, 0ms); }
.grafik--wartet .konto__wechsel { rotate: -180deg; scale: 0; }

/* ---------- Campusplan zum Ausprobieren (Meine Uni, campus.js) ---------- */
.campus { display: flex; flex-direction: column; gap: 12px; }
.campus__fenster { position: relative; height: 420px; }
.campus__buehne { position: absolute; left: 0; top: 0; width: 100%; transform-origin: 0 0; transition: transform .7s cubic-bezier(0.22, 1, 0.36, 1); }
.campus__buehne--sofort { transition: none; }
.campus__bild { display: block; width: 100%; height: auto; }
.campus__ebene { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.campus__schleier { fill: #fff; opacity: 0; transition: opacity .3s ease; }
.campus__schleier--an { opacity: 0.68; }   /* wie in der App: das Gewählte knallt, der Rest tritt zurück */
.campus__puls { fill: #fff; fill-opacity: 0; animation: campus-puls 1.8s ease-in-out infinite; }
@keyframes campus-puls { 0%, 100% { fill-opacity: 0; } 50% { fill-opacity: 0.5; } }
.campus__kontur { fill: none; stroke: var(--orange); stroke-width: 2px; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.campus__halo { fill: var(--orange); opacity: 0.25; transform-box: fill-box; transform-origin: center; animation: campus-halo 1.8s ease-in-out infinite; }
.campus__punkt { fill: var(--orange); stroke: #fff; stroke-width: 0.35; }
/* Einmal-Scan beim ersten Hinsehen (campus.js): jedes Gebäude blitzt kurz orange auf */
.campus__scan { fill: var(--orange); opacity: 0; animation: campus-scan 750ms ease-out both; }
@keyframes campus-scan { 0% { opacity: 0; } 25% { opacity: 0.9; } 100% { opacity: 0; } }
@keyframes campus-halo { 0%, 100% { transform: scale(1); opacity: 0.25; } 50% { transform: scale(1.4); opacity: 0.08; } }
.campus__bereiche .pill { border: 0; font: inherit; font-size: 14px; font-weight: 500; color: var(--graphit); cursor: pointer; transition: background-color .2s ease; }
.campus__bereiche .pill:hover { background: var(--chip-hover); }
.campus__bereiche .pill.pill--aktiv { background: var(--orange); }
@media (prefers-reduced-motion: reduce) { .campus__buehne { transition: none; } .campus__puls, .campus__halo { animation: none; } }

/* Öffnungszeiten wie in der App (js/oeffnungszeiten.js zeichnet, Aufbau wie dort; Farben der Seite) */
.zeiten-demo__liste { max-height: 640px; overflow-y: auto; margin: 0 -6px; padding: 2px 6px 6px; }
.zeiten-demo .zeiten { display: flex; flex-direction: column; gap: 8px; }
.zeiten-demo .zeiten > * { flex-shrink: 0; }   /* die Liste scrollt, die Gruppen dürfen nicht schrumpfen */
.zeiten-demo .zeiten__gruppe { transition: opacity .5s ease var(--d, 0ms), translate .55s cubic-bezier(0.22, 1, 0.36, 1) var(--d, 0ms); }
.zeiten-demo--wartet .zeiten__gruppe { opacity: 0; translate: 0 12px; }   /* bis zum ersten Hinsehen (zeiten-demo.js) */
.zeiten-demo .zeiten__gruppe { overflow: hidden; border-radius: 14px; border: 1px solid var(--linie); background: var(--weiss); }
.zeiten-demo .zeiten__gruppe-kopf { display: flex; align-items: center; gap: 12px; padding: 13px 16px; cursor: pointer; list-style: none; }
.zeiten-demo .zeiten__gruppe-kopf::-webkit-details-marker { display: none; }
.zeiten-demo .zeiten__gruppe-kopf::marker { content: ''; }
.zeiten-demo .zeiten__gruppe-kopf:focus-visible { outline: none; box-shadow: inset var(--fokus); border-radius: 14px; }
.zeiten-demo .zeiten__gruppe-titel { font-size: 15px; font-weight: 600; }
.zeiten-demo .zeiten__gruppe-kurz { margin-left: auto; padding: 4px 10px; border-radius: 999px; background: var(--chip); font-size: 12px; font-weight: 600; color: var(--text-gedaempft); white-space: nowrap; }
.zeiten-demo .zeiten__gruppe-kurz--offen { background: var(--gruen-hell); color: var(--gruen-text); }
.zeiten-demo .zeiten__plus { position: relative; flex-shrink: 0; width: 22px; height: 22px; border-radius: 999px; background: var(--chip); color: var(--text-gedaempft); font-size: 0; transition: transform .18s, background-color .18s, color .18s; }
/* Plus aus zwei Strichen statt Schriftzeichen, damit es genau mittig sitzt */
.zeiten-demo .zeiten__plus::before, .zeiten-demo .zeiten__plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 1.6px; margin: -0.8px 0 0 -5px; border-radius: 1px; background: currentColor; }
.zeiten-demo .zeiten__plus::after { transform: rotate(90deg); }
.zeiten-demo .zeiten__gruppe[open] .zeiten__plus { transform: rotate(45deg); background: var(--graphit); color: var(--weiss); }
.zeiten-demo .zeiten__gruppe[open] > .zeiten__gruppe-kopf { border-bottom: 1px solid var(--linie); }
.zeiten-demo .zeiten__gruppe-inhalt { display: flex; flex-direction: column; gap: 8px; padding: 12px; }
.zeiten-demo .zeiten__eintrag { padding: 12px 14px; border-radius: 12px; border: 1px solid var(--linie); background: var(--papier-hell); }
.zeiten-demo .zeiten__eintrag--offen { border: 1.75px solid var(--gruen); padding: 11.25px 13.25px; }
.zeiten-demo .zeiten__eintrag--bald { border-color: var(--orange); }
.zeiten-demo .zeiten__kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 6px 12px; flex-wrap: wrap; }
.zeiten-demo .zeiten__titel { margin: 0; font-size: 15px; font-weight: 600; }
.zeiten-demo .zeiten__ort { margin: 2px 0 0; font-size: 13px; color: var(--text-gedaempft); }
.zeiten-demo .zeiten__status, .mensa-demo .zeiten__status { flex-shrink: 0; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; background: var(--chip); color: var(--text-gedaempft); }
.zeiten-demo .zeiten__status--offen, .mensa-demo .zeiten__status--offen { background: var(--gruen-hell); color: var(--gruen-text); }
.zeiten-demo .zeiten__status--bald, .mensa-demo .zeiten__status--bald { background: oklch(0.95 0.045 70); color: oklch(0.5 0.11 55); }
.zeiten-demo .zeiten__periode { margin: 10px 0 2px; font-size: 13px; font-weight: 600; color: oklch(0.55 0.13 55); }
.zeiten-demo .zeiten__tabelle { margin: 6px 0 0; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.zeiten-demo .zeiten__tabelle th, .zeiten-demo .zeiten__tabelle td { padding: 2px 0; text-align: left; vertical-align: top; font-weight: 400; }
.zeiten-demo .zeiten__tabelle th { width: 4.5em; padding-right: 12px; color: var(--text-gedaempft); }
.zeiten-demo .zeiten__zeile--zu td { color: oklch(0.65 0.01 60); }
.zeiten-demo .zeiten__zeile--heute th, .zeiten-demo .zeiten__zeile--heute td { font-weight: 700; color: var(--graphit); }
.zeiten-demo .zeiten__zeile--heute.zeiten__zeile--zu td { color: oklch(0.65 0.01 60); }
.zeiten-demo .zeiten__hinweise { margin: 8px 0 0; padding: 0 0 0 18px; font-size: 13px; line-height: 1.5; color: var(--text-gedaempft); }

/* Mensa wie in der App (js/mensa.js zeichnet, Aufbau wie dort; Farben der Seite) */
.mensa-demo .mensa__kopf { align-items: flex-start; flex-wrap: wrap; }
.mensa-demo__titel small { display: block; margin-top: 2px; }
.mensa-demo .mensa__zustand { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; font-size: 13px; font-weight: 500; color: var(--text-gedaempft); }
.mensa-demo .mensa__zustand-zeiten { text-align: right; }
.mensa-demo .mensa__zustand-zeile { display: block; }
.mensa-demo .mensa__leiste { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 12px; margin: 6px 0 14px; }
.mensa-demo .mensa__tage { display: flex; gap: 2px; max-width: 100%; padding: 4px; border-radius: 12px; background: var(--chip); overflow-x: auto; scrollbar-width: none; }
.mensa-demo .mensa__tag { display: flex; flex-direction: column; align-items: center; min-width: 64px; padding: 6px 10px; border: 0; border-radius: 9px; background: none; font: inherit; color: var(--graphit); cursor: pointer; transition: background-color .15s; }
.mensa-demo .mensa__tag:hover { background: var(--chip-hover); }
.mensa-demo .mensa__tag:focus-visible { outline: none; box-shadow: var(--fokus); }
.mensa-demo .mensa__tag[aria-selected="true"] { background: var(--weiss); box-shadow: 0 1px 2px oklch(0.15 0.005 60 / 0.08); }
.mensa-demo .mensa__tag-name { font-size: 14px; font-weight: 600; }
.mensa-demo .mensa__tag-datum { font-size: 12px; color: var(--text-gedaempft); font-variant-numeric: tabular-nums; }
.mensa-demo .mensa__tag--zu .mensa__tag-name { color: var(--text-gedaempft); }
.mensa-demo .mensa__tage-trenner { flex-shrink: 0; align-self: center; width: 1px; height: 24px; margin: 0 4px; background: var(--linie); }
.mensa-demo .mensa__schalter { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; margin-left: auto; padding: 8px 13px; border-radius: 999px; border: 1px solid var(--linie); background: var(--weiss); font: inherit; font-size: 13px; font-weight: 600; color: var(--text-gedaempft); white-space: nowrap; cursor: pointer; }
.mensa-demo .mensa__schalter:focus-visible { outline: none; box-shadow: var(--fokus); }
.mensa-demo .mensa__schalter-spur { position: relative; width: 28px; height: 16px; border-radius: 999px; background: var(--linie); transition: background-color .15s; }
.mensa-demo .mensa__schalter-spur::after { content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--weiss); box-shadow: 0 1px 2px oklch(0 0 0 / 0.2); transition: transform .15s; }
.mensa-demo .mensa__schalter[aria-pressed="true"] { color: var(--graphit); }
.mensa-demo .mensa__schalter[aria-pressed="true"] .mensa__schalter-spur { background: var(--graphit); }
.mensa-demo .mensa__schalter[aria-pressed="true"] .mensa__schalter-spur::after { transform: translateX(12px); }
/* Gerichte scrollen im Kasten, Tage und Schalter bleiben oben stehen */
.mensa-demo .mensa__inhalt { max-height: 560px; overflow-y: auto; margin: 0 -6px; padding: 2px 6px 6px; }
.mensa-demo .mensa__notiz { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; padding: 10px 14px; border-radius: 12px; background: var(--zweitton-hell); font-size: 14px; }
.mensa-demo .mensa__notiz svg { flex-shrink: 0; color: var(--orange); }
.mensa-demo .mensa__gerichte { display: flex; flex-direction: column; gap: 10px; }
.mensa-demo .mensa__reihe { display: grid; grid-template-columns: repeat(var(--mensa-spalten, 1), minmax(0, 1fr)); grid-template-rows: repeat(4, auto); column-gap: 10px; }
.mensa-demo .mensa__gericht { grid-row: span 4; display: grid; grid-template-rows: subgrid; row-gap: 0; min-width: 0; padding: 14px 16px; border-radius: 14px; background: var(--weiss); border: 1px solid var(--linie); }
.mensa-demo .mensa__gericht-oben { grid-row: 1; display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 22px; margin-bottom: 8px; }
.mensa-demo .mensa__kategorie { font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--text-gedaempft); }
.mensa-demo .mensa__arten { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
.mensa-demo .mensa__art { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; background: var(--chip); color: var(--text-gedaempft); font-size: 12px; font-weight: 600; white-space: nowrap; }
.mensa-demo .mensa__art svg { width: 13px; height: 13px; margin-left: -2px; }
.mensa-demo .mensa__art--vegan, .mensa-demo .mensa__art--vegetarisch { background: var(--gruen-hell); color: var(--gruen-text); }
.mensa-demo .mensa__name { grid-row: 2; }
.mensa-demo .mensa__gericht-titel { margin: 0; font-family: var(--schrift-text); font-size: 16px; font-weight: 700; line-height: 1.35; letter-spacing: 0; text-wrap: balance; }
.mensa-demo .mensa__beschreibung { margin: 3px 0 0; font-size: 14px; color: var(--text-gedaempft); }
.mensa-demo .mensa__gericht > .mensa__allergene { grid-row: 3; align-self: start; }
.mensa-demo .mensa__gericht-unten { grid-row: 4; align-self: end; display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; padding-top: 14px; }
.mensa-demo .mensa__preis { font-size: 20px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.mensa-demo .mensa__co2 { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; font-size: 11px; color: var(--text-gedaempft); }
.mensa-demo .mensa__co2-skala { display: flex; gap: 2px; }
.mensa-demo .mensa__co2-stufe { display: grid; place-items: center; width: 20px; height: 18px; border-radius: 5px; background: var(--chip); color: oklch(0.75 0.01 60); font-size: 11px; font-weight: 700; }
.mensa-demo .mensa__co2-stufe--an.mensa__co2-stufe--A { background: var(--gruen-hell); color: var(--gruen-text); }
.mensa-demo .mensa__co2-stufe--an.mensa__co2-stufe--B { background: oklch(0.95 0.045 70); color: oklch(0.5 0.11 55); }
.mensa-demo .mensa__co2-stufe--an:is(.mensa__co2-stufe--C, .mensa__co2-stufe--D, .mensa__co2-stufe--E) { background: var(--rot-hell); color: var(--rot-text); }
.mensa-demo .mensa__allergene { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 10px; }
.mensa-demo.mensa-demo .mensa--ohne-allergene .mensa__allergene { display: none; }
.mensa-demo .mensa__allergen { padding: 2px 8px; border-radius: 6px; background: var(--chip); font-size: 12px; color: var(--graphit-2); }
.mensa-demo .mensa__allergene-keine { font-size: 12px; color: var(--text-gedaempft); }
.mensa-demo .mensa__beilagen { margin-top: 18px; }
.mensa-demo .mensa__beilagen-titel { margin: 0; font-family: var(--schrift-text); font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--text-gedaempft); }
.mensa-demo .mensa__beilagen-liste { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 0; padding: 0; list-style: none; }
.mensa-demo .mensa__beilage { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "name preis" "allerg allerg"; align-items: center; column-gap: 10px; max-width: 100%; padding: 8px 14px; border-radius: 999px; background: var(--weiss); border: 1px solid var(--linie); }
.mensa-demo .mensa__plan:not(.mensa--ohne-allergene) .mensa__beilage { border-radius: 14px; }
.mensa-demo .mensa__beilage-name { grid-area: name; display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; line-height: 1.3; }
.mensa-demo .mensa__beilage-preis { grid-area: preis; justify-self: end; padding-left: 10px; border-left: 1px solid var(--linie); font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.mensa-demo .mensa__beilage .mensa__allergene { grid-area: allerg; margin-top: 6px; }
.mensa-demo .mensa__blatt { display: inline-flex; color: var(--gruen); }
.mensa-demo .mensa__blatt svg { width: 14px; height: 14px; }
.mensa-demo .mensa__leer { margin: 0; font-size: 15px; color: var(--text-gedaempft); }
@media (max-width: 520px) {
  .mensa-demo .mensa__zustand { align-items: flex-start; }
  .mensa-demo .mensa__zustand-zeiten { text-align: left; }
  .mensa-demo .mensa__tage { flex: 1 1 100%; }
  .mensa-demo .mensa__tag { flex: 1; min-width: 0; padding: 6px 4px; }
}

/* Einmal beim ersten Hinsehen (termine-demo.js, mensa-demo.js): Zeilen bzw. Gerichte nacheinander, --d je Teil */
[data-termine] .statusliste > div, .mensa-demo .mensa__gericht { transition: opacity .5s ease var(--d, 0ms), translate .55s cubic-bezier(0.22, 1, 0.36, 1) var(--d, 0ms); }
.auftritt--wartet[data-termine] .statusliste > div, .auftritt--wartet .mensa__gericht { opacity: 0; translate: 0 12px; }

/* Aufbau wie in der App (../js/studiengang.js zeichnet, aufbau-demo.js; Aufbau wie dort, Farben der Bereiche wie in der App) */
.aufbau-demo__plan { max-height: 680px; overflow-y: auto; margin: 0 -6px; padding: 0 6px 6px; }
.aufbau-demo__plan:empty { height: 680px; }   /* bis der Aufbau aus dem Katalog da ist: schon so hoch wie danach */
.aufbau-demo .sg { display: flex; flex-direction: column; gap: 12px; }
.aufbau-demo .sg-oben { position: sticky; top: 0; z-index: 2; display: flex; flex-direction: column; gap: 10px; padding: 2px 0 12px; background: var(--papier-hell); }
.abschnitt--hell .aufbau-demo .sg-oben { background: var(--papier); }
.aufbau-demo .sg-bloecke { display: flex; flex-direction: column; gap: 10px; }
.aufbau-demo .sg-lp { flex-shrink: 0; font-size: 13px; font-weight: 700; color: var(--text-gedaempft); font-variant-numeric: tabular-nums; white-space: nowrap; }
.aufbau-demo .sg-balken-kopf { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 16px; font-size: 14px; font-weight: 600; }
.aufbau-demo .sg-balken-kopf__regel { font-weight: 400; color: var(--text-gedaempft); }
.aufbau-demo .sg-balken { display: flex; gap: 3px; height: 14px; border-radius: 7px; overflow: hidden; }
.aufbau-demo .sg-balken__stueck { flex-basis: 0; min-width: 6px; cursor: default; }
.aufbau-demo .sg-legende { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; padding: 0; list-style: none; font-size: 13px; color: var(--text-gedaempft); }
.aufbau-demo .sg-legende__eintrag { display: inline-flex; align-items: center; gap: 6px; }
.aufbau-demo .sg-legende__punkt { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
/* Maus über dem Balken: dieser Bereich bleibt, der Rest wird grau */
.aufbau-demo .sg-balken__stueck, .aufbau-demo .sg-legende__eintrag, .aufbau-demo .sg-block { transition: opacity .35s ease, filter .35s ease, color .35s ease; }   /* weich, auch beim Durchlauf beim Öffnen */
.aufbau-demo .sg--hervor .sg-balken__stueck:not(.sg--an), .aufbau-demo .sg--hervor .sg-legende__eintrag:not(.sg--an), .aufbau-demo .sg--hervor .sg-block:not(.sg--an) { opacity: .35; filter: grayscale(1); }
.aufbau-demo .sg--hervor .sg-legende__eintrag.sg--an { font-weight: 600; color: var(--graphit); }
.aufbau-demo .sg-block { padding: 13px 15px 15px; border-radius: 14px; background: var(--weiss); border: 2px solid color-mix(in srgb, var(--sg-farbe) 55%, #fff); }
.aufbau-demo .sg-block__kopf { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.aufbau-demo .sg-block__kopf::before { content: ''; width: 12px; height: 12px; border-radius: 4px; flex-shrink: 0; background: var(--sg-farbe); }
.aufbau-demo .sg-block__titel { flex: 1; margin: 0; font-family: var(--schrift-text); font-size: 15px; font-weight: 700; letter-spacing: 0; }
.aufbau-demo .sg-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.aufbau-demo .sg-chip { display: inline-flex; align-items: baseline; gap: 8px; padding: 5px 10px; border-radius: 8px; background: var(--chip); font-size: 13px; }
.aufbau-demo .sg-chip__ects { font-size: 12px; color: var(--text-gedaempft); font-variant-numeric: tabular-nums; white-space: nowrap; }
.aufbau-demo .sg-chip--wahl { background: var(--weiss); border: 1px dashed var(--linie); }
.aufbau-demo .sg-teil { margin-top: 12px; }
.aufbau-demo .sg-teil__kopf { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.aufbau-demo .sg-teil__titel { flex: 1; font-size: 14px; font-weight: 700; }
.aufbau-demo .sg-auswahl { margin-top: 8px; padding: 8px 12px; border-radius: 10px; background: var(--papier-hell); font-size: 13px; }
.aufbau-demo .sg-wahl__frage { margin: 0 0 8px; font-size: 14px; font-weight: 600; }
.aufbau-demo .sg-wahl .sg-wahl__frage { margin-top: 10px; }
.aufbau-demo .sg-block > .sg-wahl > .sg-wahl__frage { margin-top: 0; }
.aufbau-demo .sg-optionen { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.aufbau-demo .sg-optionen--klein { grid-template-columns: repeat(var(--sg-spalten, 3), minmax(0, 1fr)); gap: 6px; }
.aufbau-demo .sg-option { min-width: 0; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--linie); background: var(--weiss); }
.aufbau-demo .sg-optionen--klein .sg-option { padding: 7px 10px; }
.aufbau-demo .sg-option--deine { border-color: var(--graphit); box-shadow: 0 0 0 3px oklch(0.15 0.005 60 / 0.08); }
.aufbau-demo .sg-option__kopf { display: flex; align-items: center; gap: 8px; }
.aufbau-demo .sg-option__titel { flex: 0 1 auto; min-width: 0; font-size: 14px; font-weight: 700; }
.aufbau-demo .sg-option__kopf .sg-lp { margin-left: auto; }
.aufbau-demo .sg-optionen--klein .sg-option__titel { font-size: 13px; font-weight: 600; }
.aufbau-demo .info-marke { padding: 2px 9px; border-radius: 999px; background: var(--orange); font-size: 12px; font-weight: 600; }
@media (max-width: 600px) { .aufbau-demo .sg-optionen--klein { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .aufbau-demo .sg-balken__stueck, .aufbau-demo .sg-legende__eintrag, .aufbau-demo .sg-block { transition: none; } }
/* Große Ansicht (aufbau-demo.js, wie beim Noten-Tracker): auf der Seite am PC nur Vorschaubild, im Fenster über die ganze Breite */
.aufbau-demo--vorschaubild { cursor: pointer; transition: border-color .2s ease, box-shadow .2s ease; }
.aufbau-demo--vorschaubild > * { pointer-events: none; }
.aufbau-demo--vorschaubild .aufbau-demo__plan { overflow: hidden; }
.aufbau-demo--vorschaubild:hover, .aufbau-demo--vorschaubild:focus-visible { border-color: var(--orange); box-shadow: var(--fokus); outline: none; }
.vorschau--aufbau .aufbau-demo { flex: 1; min-height: 0; background: transparent; border: 0; padding: 0; }
.vorschau--aufbau .aufbau-demo > .ansicht__kopf { display: none; }   /* der Titel steht schon im Fensterkopf */
.vorschau--aufbau .aufbau-demo__plan { flex: 1; min-height: 0; max-height: none; margin: 0; padding: 0 14px 6px 4px; scrollbar-gutter: stable; }
.vorschau--aufbau .aufbau-demo .sg-oben { background: var(--chip); }
/* „Lieber in groß ansehen?“ wie beim Noten-Tracker, aber in einem normalen Bereich: mittig wie die anderen, direkt unter dem Text */
.teil__text .vorschau-tipp { margin-top: 12px; }
.teil__text .vorschau-tipp[hidden] { display: none; }
.aufbau-demo--sofort * { transition: none !important; }   /* erster Schritt des Durchlaufs ohne Überblendung */

/* Mein Studiengang: Beschreibung in der Modulkarte erst nur zur Hälfte (7 Zeilen), „Weiterlesen“ klappt sie auf */
.kurztext { max-height: calc(1.55em * 7); overflow: hidden; transition: max-height .45s ease;
  -webkit-mask-image: linear-gradient(#000 60%, transparent); mask-image: linear-gradient(#000 60%, transparent); }
.kurztext--offen { -webkit-mask-image: none; mask-image: none; }
.kurztext-knopf { align-self: flex-start; margin-top: -8px; padding: 0; border: 0; background: none; font: inherit; font-size: 15px; font-weight: 500; color: inherit; cursor: pointer; display: inline-flex; gap: 6px; align-items: center; }
.kurztext-knopf span { transition: transform .2s; }
.kurztext-knopf[aria-expanded="true"] span { transform: rotate(-90deg); }
.kurztext-knopf:hover { text-decoration: underline; text-decoration-color: var(--orange); text-underline-offset: 3px; }
.kurztext-knopf[hidden] { display: none; }

/* Akkordeon als letztes im Kasten (Regeln): unter der letzten Frage keine Linie mehr */
.ansicht > .akkordeon:last-child > details:last-child { border-bottom: none; }

/* Mein Studiengang, Aufbau und Modulkarte: Teile tauchen beim ersten Hinsehen nacheinander auf (auftritt.js, --d je Teil).
   Die Übergänge gelten nur, solange es läuft – danach wieder die eigenen (Hervorheben im Aufbau). */
.auftritt--laeuft .sg-oben, .auftritt--laeuft .sg-bloecke > *,
.auftritt--laeuft.modulkarte > summary, .auftritt--laeuft .kurztext, .auftritt--laeuft .kurztext-knopf, .auftritt--laeuft .modulkarte__schlagworte,
.auftritt--laeuft .eckdaten > div, .auftritt--laeuft .wortlaut, .auftritt--laeuft .modulkarte__quelle {
  transition: opacity .5s ease var(--d, 0ms), translate .55s cubic-bezier(0.22, 1, 0.36, 1) var(--d, 0ms);
}
.auftritt--wartet .sg-oben, .auftritt--wartet .sg-bloecke > *,
.auftritt--wartet.modulkarte > summary, .auftritt--wartet .kurztext, .auftritt--wartet .kurztext-knopf, .auftritt--wartet .modulkarte__schlagworte,
.auftritt--wartet .eckdaten > div, .auftritt--wartet .wortlaut, .auftritt--wartet .modulkarte__quelle { opacity: 0; translate: 0 12px; }

/* Preise: „Was du dir damit sparst“ (vier Kästen) und „Es gibt keinen“ (vier Fragen ohne Kasten) */
.ersparnis { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 20px; }
.ersparnis .spalte { gap: 10px; }
.ersparnis strong, .haken strong { font-size: 20px; font-weight: 500; line-height: 1.3; }
.ersparnis p, .haken p { margin: 0; font-size: 16px; }
.haken { display: grid; grid-template-columns: 1fr; gap: 36px 64px; }
@media (min-width: 760px) { .haken { grid-template-columns: 1fr 1fr; } }   /* immer zwei mal zwei, nie drei plus eins */
.haken > div { display: flex; flex-direction: column; gap: 8px; }

/* Sternchen und Anmerkungen (Preisseite) */
.sternchen { color: inherit; text-decoration: underline dotted; text-underline-offset: 3px; }
.sternchen:hover { color: var(--graphit); text-decoration-style: solid; }
.anmerkungen .inhalt { padding-bottom: 32px; }
.anmerkungen details { border-top: 1px solid var(--linie); padding-top: 16px; scroll-margin-top: 120px; }
.anmerkungen summary { cursor: pointer; list-style: none; font-size: 14px; color: var(--text-gedaempft); display: inline-flex; gap: 8px; align-items: center; }
.anmerkungen summary::-webkit-details-marker { display: none; }
.anmerkungen summary::after { content: "+"; font-size: 16px; line-height: 1; }
.anmerkungen details[open] summary::after { content: "−"; }
.anmerkungen p { margin: 12px 0 0; max-width: 760px; font-size: 13px; line-height: 1.6; color: var(--text-gedaempft); }
.anmerkungen p .textlink { display: inline-block; margin-top: 6px; font-size: 13px; }

/* Mensa-Demo: der Schieber ist hier hell wie der gewählte Tag (js/schieber.js) */
.mensa-demo .schieber { border-radius: 9px; background: var(--weiss); box-shadow: 0 1px 2px oklch(0.15 0.005 60 / 0.08); }
.mensa-demo .schieber-leiste > .mensa__tag[aria-selected="true"],
.mensa-demo .schieber-leiste > .mensa__tag[aria-selected="true"]:hover { background: transparent; box-shadow: none; }