/* Detailseite eines Referats. Die Karten des Katalogs zeigen einen Anriss,
   hier steht alles: Beschreibung, Leitung, jeder Termin und was am Campus
   sonst noch in diese Richtung geht.

   Der Aufbau von oben nach unten: Titelzeile, ein zweispaltiges Raster fuer
   Text und Bild (und darunter Neuigkeiten und Leitung), dann die beiden
   Abschnitte ueber die volle Breite. Termine und weitere Angebote liegen als
   Reihe nebeneinander und scrollen waagerecht, wenn es mehr werden als
   passen - untereinander waere die Seite bei zwoelf Terminen nur noch eine
   Liste.

   Die Seite kommt weitgehend mit den Bausteinen der uebrigen Seiten aus -
   Kopf aus header.css, die Marken (.tag) und Karten aus catalog_items.css,
   der Schlussblock aus banner.css. */

/* Zwei Werte, die die Palette (noch) nicht hergibt. Sobald stylesheet.css eine
   gedaempfte Schrift und einen Ton fuer "laeuft gerade nicht" kennt, ziehen
   diese beiden dorthin um. */
.referat {
  --leise: #3e4a42; /* gedaempfte Schrift, derselbe Ton wie .card__desc */
  --ruht-flaeche: rgba(217, 164, 65, 0.14); /* wie .tag--kosten */
  --ruht-linie: rgba(217, 164, 65, 0.45);
}

/* stylesheet.css faerbt mit "* { color: white }" jedes einzelne Element weiss.
   Das trifft nicht nur die Schrift, es unterbricht auch die Vererbung: ein
   Absatz erbt dann nicht mehr die Farbe seines Kastens, sondern bekommt sein
   eigenes Weiss. Innerhalb der Seite wird die Vererbung hier wieder
   eingeschaltet, damit unten nur noch dort eine Farbe steht, wo sie etwas
   bedeutet.

   ":where(...) *" hat die Spezifitaet 0 - die Regel gewinnt gegen das "*" aus
   stylesheet.css nur ueber die Reihenfolge und verliert gegen jede Zuweisung
   an eine Klasse. Auch gegen die aus catalog_items.css: die Marken behalten
   damit ihre Farbe. */
:where(.referat) * {
  color: inherit;
}

/* Unten nur 8px: den Rest des Abstands bis zum Footer traegt .banner-flaeche. */
.referat {
  padding: 28px var(--seiten-rand) 8px;
  color: var(--tinte);
}

/* ==========================
   Titelzeile
   ========================== */
/* Der Titel steht mittig, die Sprachwahl rechts. Als Raster mit gleich
   breiten Aussenspalten, damit der Titel auf der Mitte der Seite sitzt und
   nicht auf der Mitte des Platzes, den die Sprachwahl uebrig laesst. */
.referat-titelzeile {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}

.referat-titel {
  grid-column: 2;
  font-family: 'Big Shoulders Display', sans-serif;
  font-weight: 700;
  font-size: 44px;
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  text-align: center;
  color: var(--tanne);
}

.sprachwahl {
  grid-column: 3;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border: 1px solid var(--linie);
  border-radius: 999px;
  background: var(--karte);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--tanne);
}

.sprachwahl__trenner {
  color: var(--linie);
}

/* Die zweite Sprache ist angelegt, aber noch nicht erreichbar - blass statt
   ausgeblendet, damit spaeter nichts an der Stelle springt. */
.sprachwahl__wahl--aus {
  color: var(--leise);
  opacity: 0.55;
  cursor: not-allowed;
}

/* Hinweis auf ein pausiertes Referat, ueber allem anderen */
.referat-ruht {
  margin-bottom: 24px;
  padding: 12px 16px;
  border: 1px solid var(--ruht-linie);
  border-radius: 10px;
  background: var(--ruht-flaeche);
  color: var(--weg-dunkel);
  font-size: 14.5px;
  line-height: 1.55;
}

.referat-ruht a {
  font-weight: 700;
  text-decoration: underline;
}

/* ==========================
   Raster: Text/Bild, Neuigkeiten/Leitung
   ========================== */
/* Beide Zeilen im selben Raster, damit Neuigkeiten und Leitung auf den
   Kanten von Beschreibung und Bild stehen. align-items:start, weil die
   Kaesten unterschiedlich hoch sind und sich nicht gegenseitig strecken
   sollen. */
.referat-raster {
  display: grid;
  /* minmax(0, 1fr), sonst zwingt ein langes Wort die Spalte breiter */
  grid-template-columns: minmax(0, 1fr) minmax(0, 360px);
  gap: 24px;
  align-items: start;
}

/* ==========================
   Bloecke
   ========================== */
.referat-block {
  background: var(--karte);
  border: 1px solid var(--linie);
  border-radius: 14px;
  padding: 22px 24px 24px;
}

.referat-block--text {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Das Bild daneben ist bei kurzer Beschreibung hoeher als der Text. Ohne
   diese Zeile bliebe unter dem Kasten eine Luecke, die wie ein Fehler
   aussieht - gestreckt endet er auf der Unterkante des Bildes und die Marken
   rutschen (per margin-top:auto) dorthin. */
.referat-block--neben-bild {
  align-self: stretch;
}

/* dieselbe Schrift wie die Kartentitel - die Seite bleibt im Klang des
   Katalogs, aus dem man kommt */
.referat-h2 {
  font-family: 'Big Shoulders Display', sans-serif;
  font-weight: 700;
  font-size: 26px;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1.05;
  color: var(--tanne);
}

/* Ueber den Abschnitten, die die volle Breite einnehmen: mittig, weil sie
   dort keine Spalte haben, an der sie sich ausrichten koennten. */
.referat-h2--mitte {
  text-align: center;
}

.referat-text {
  font-size: 15px;
  line-height: 1.65;
  color: var(--tinte);
}

.referat-text--leer {
  color: var(--leise);
}

/* Die Marken schliessen den Textblock ab und stehen deshalb unten - mit
   margin-top:auto sitzen sie auch dann am Fuss, wenn der Kasten von seinem
   Nachbarn gestreckt wird. */
.referat-marken {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: auto;
}

.referat-marken__label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--leise);
}

/* Die Art ist die Einordnung des Referats und deshalb als einzige Marke
   gefuellt - die blassen daneben nennen Bedingungen. Ohne den Unterschied
   stuende "Sport" in derselben Farbe wie "Anmeldepflichtig". */
.tag--sport {
  background: var(--berg-dunkel);
  border: 1px solid var(--berg-dunkel);
  color: #fff;
}

/* --moos ist als Flaeche unter weisser Schrift zu hell (3,7:1), hier deshalb
   eine dunklere Stufe desselben Gruens. */
.tag--freizeit {
  background: #4f6b57;
  border: 1px solid #4f6b57;
  color: #fff;
}

/* Pausiert ist keine Warnung, sondern ein Hinweis - deshalb im Gold der
   Seite und nicht in Rot. */
.tag--ruht {
  background: var(--ruht-flaeche);
  border: 1px solid var(--ruht-linie);
  color: var(--weg-dunkel);
}

/* ==========================
   Bild
   ========================== */
/* Das Bild steht in der schmalen Spalte und bleibt im 4:3-Ausschnitt - bei
   16/9 waere der Kasten neben dem Text nur noch ein Streifen. Beschnitten
   wird ueber object-fit. */
.referat-bild {
  aspect-ratio: 4 / 3;
  border: 1px solid var(--linie);
  border-radius: 14px;
  overflow: hidden;
  background: var(--karte);
}

/* cover statt der gestreckten Kachel des Katalogs: so gross faellt ein
   verzerrtes Bild sofort auf */
.referat-bild img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Ohne hochgeladenes Bild dieselbe Kachel wie auf den Karten */
.referat-bild--leer {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--navy-blue);
}

.referat-bild--leer img {
  width: auto;
  height: 40%;
  max-width: 50%;
  object-fit: contain;
  opacity: 0.85;
}

/* ==========================
   Leitung
   ========================== */
/* Steht neben den Neuigkeiten, unter dem Bild - dieselbe Spalte, damit die
   Person dort sitzt, wo auch das Gesicht des Referats war. */
.profil {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  background: var(--karte);
  border: 1px solid var(--linie);
  border-radius: 14px;
}

.profil__bild {
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--navy-blue);
}

.profil__bild img {
  width: 60%;
  height: auto;
  opacity: 0.85;
}

.profil__daten {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.profil__name {
  font-size: 16px;
  font-weight: 700;
  color: var(--tanne);
  overflow-wrap: anywhere;
}

a.profil__name {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.profil__name--leer {
  font-weight: 600;
  color: var(--leise);
}

.profil__rolle {
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--leise);
}

/* ==========================
   Abschnitte ueber die volle Breite
   ========================== */
.referat-abschnitt {
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ==========================
   Termine
   ========================== */
/* Waagerechte Reihe. "flex: 1 0 280px" laesst die Karten die Breite fuellen,
   solange sie zu wenige sind, und haelt sie bei 280px, sobald es mehr werden
   - dann wird gescrollt. Der Innenabstand unten ist der Platz fuer die
   Scrollleiste, sonst liegt sie auf den Karten.

   TODO: Der Entwurf sieht Pfeile neben der Reihe vor. Die brauchen JS, das
   es auf der Seite noch nirgends gibt - vorerst scrollt man mit Finger,
   Rad oder Tastatur. */
.termin-reihe {
  list-style: none;
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding-bottom: 10px;
  scroll-snap-type: x proximity;
  overscroll-behavior-x: contain;
}

.termin {
  position: relative;
  flex: 1 0 280px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 18px 16px;
  border-radius: 12px;
  border: 1px solid var(--linie);
  border-top: 4px solid var(--tanne);
  background: var(--karte);
  text-align: center;
  /* haelt die Fahne des pausierten Termins im Kasten */
  overflow: hidden;
}

/* Ein einzelner Termin ueber die ganze Seite waere ein Kasten mit vier Zeilen
   und sehr viel Luft. Er bekommt hoechstens die halbe Breite und steht dann
   mittig - "margin-inline: auto" statt "justify-content" auf der Reihe, weil
   das Zentrieren eines ueberlaufenden Flex-Containers den Anfang unerreichbar
   macht, sobald es doch mehrere Termine sind. */
.termin:only-child {
  max-width: 50%;
  margin-inline: auto;
}

.termin__kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
  font-weight: 700;
  color: var(--tanne);
}

.termin__kopf time {
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  color: var(--tinte);
}

.termin__ort {
  font-size: 14px;
  color: var(--tinte);
}

.termin__treff {
  font-size: 13px;
  color: var(--leise);
}

/* Der Abstand zur Schaltflaeche darunter haengt hier und nicht an ihr: sie
   traegt margin-top:auto und koennte keinen festen Wert danebenstellen. */
.termin__plaetze {
  margin-bottom: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.03em;
  color: var(--leise);
}

/* Die Schaltflaeche schliesst die Karte ab. margin-top:auto haelt sie am
   Fuss, damit sie bei unterschiedlich hohen Karten auf einer Linie steht. */
.termin__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: auto;
  padding: 10px 20px;
  background: var(--tanne);
  border: 1px solid var(--tanne);
  border-radius: 999px;
  color: #fff;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.termin__btn:hover {
  background: var(--moos);
  border-color: var(--moos);
}

.termin__ohne {
  margin-top: auto;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--leise);
}

/* Ein pausierter Termin bleibt stehen - er sagt, was hier ueblicherweise
   laeuft. Wie im Kalender tritt er nur deutlich zurueck. */
.termin--ruht {
  border-top-color: #cbd5e1;
  background: #f8fafc;
}

.termin--ruht .termin__kopf,
.termin--ruht .termin__kopf time,
.termin--ruht .termin__ort {
  color: #64748b;
}

/* Die Fahne quer ueber die Karte - im Entwurf ist sie das Erste, was man an
   einem Termin sieht, der nicht stattfindet.

   Gold und nicht Rot: pausiert ist keine Warnung, sondern ein Hinweis, und
   die Seite nutzt Rot sonst nirgends. Der Winkel ist flach, weil die Karten
   breit sind und hoch: 4 Grad heben die Fahne ueber 600px Breite schon um
   gut 40px, bei 8 Grad liefe sie oben und unten aus der Karte heraus. Die
   negativen Raender fuehren sie ueber beide Kanten hinaus, den Ueberstand
   schneidet .termin per overflow ab. */
.termin__fahne {
  position: absolute;
  left: -12%;
  right: -12%;
  top: 50%;
  transform: translateY(-50%) rotate(-4deg);
  padding: 6px 0;
  background: var(--weg);
  border-top: 1px solid var(--weg-dunkel);
  border-bottom: 1px solid var(--weg-dunkel);
  color: var(--tanne);
  font-family: 'JetBrains Mono', monospace;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: center;
  pointer-events: none;
}

.termin--leer {
  list-style: none;
  flex: 1 1 auto;
  padding: 18px;
  border: 1px dashed var(--linie);
  border-radius: 12px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--leise);
}

/* ==========================
   Weitere Angebote
   ========================== */
/* Derselbe Streifen wie bei den Terminen, nur mit den Karten des Katalogs.
   Sie sind hier schmaler als dort: der Streifen ist ein Ausblick, keine
   zweite Uebersicht. */
.referat-streifen {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  padding-bottom: 10px;
  scroll-snap-type: x proximity;
  overscroll-behavior-x: contain;
}

.card--schmal {
  flex: 0 0 240px;
  max-width: none;
  scroll-snap-align: start;
}

.card--schmal .card__title {
  font-size: 20px;
}

.card--schmal .card__desc {
  margin-bottom: 0;
}

/* ==========================
   Schmale Bildschirme
   ========================== */
/* Bild und Leitung passen neben dem Text nicht mehr und rutschen darunter.
   Das Bild kommt dabei vor die Beschreibung - auf dem Telefon ist es der
   Einstieg in die Seite, so wie auf der Karte im Katalog. */
@media (max-width: 900px) {
  .referat-raster {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }

  .referat-bild {
    order: -1;
    aspect-ratio: 16 / 9;
  }

  .referat-titel {
    font-size: 36px;
  }
}

@media (max-width: 640px) {
  .referat {
    padding-top: 20px;
  }

  /* Der Titel steht dann links wie jede andere Ueberschrift, die Sprachwahl
     daneben - fuer drei Spalten reicht die Breite nicht. */
  .referat-titelzeile {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    margin-bottom: 20px;
  }

  .referat-titel {
    grid-column: 1;
    font-size: 30px;
    text-align: left;
  }

  .sprachwahl {
    grid-column: 2;
  }

  .referat-block {
    padding: 18px 18px 20px;
  }

  .referat-h2 {
    font-size: 22px;
  }

  .referat-abschnitt {
    margin-top: 32px;
  }

  /* Eine Karte fast ueber die Breite, die naechste blitzt am Rand hervor -
     so sieht man, dass die Reihe weitergeht. */
  .termin {
    flex: 0 0 85%;
  }

  /* Die halbe Breite waere hier eine Spalte von 170px - der einzelne Termin
     nimmt auf dem Telefon die ganze. */
  .termin:only-child {
    flex: 1 0 auto;
    max-width: none;
  }

  .card--schmal {
    flex: 0 0 200px;
  }
}