/* ==========================================================
   SCHULSPANISCH.DE – HÖRVERSTEHEN
   Nur Hörverstehen-spezifische Elemente (Präfix: hv-).
   Globale Grammatik-Styles werden nicht überschrieben.

   Farben ausschließlich über die bestehenden --sg-* Tokens
   aus grammar-exercises-master_neu.css. Diese werden dort per
   @media (prefers-color-scheme: dark) auf .sg-page umgeschaltet
   – der Dark Mode folgt damit automatisch demselben Mechanismus.
   ========================================================== */


/* ----------------------------------------------------------
   INFO-LEISTE „ÜBER DAS VIDEO“
   Breite kommt aus .sg-shell (wie der Rest der Seite).
   ---------------------------------------------------------- */

.hv-video-info {
  padding: 4px 0 40px;
  background: var(--sg-bg);
}

.hv-video-info__card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 24px;
  row-gap: 2px;

  padding: 16px 20px;

  background: var(--sg-surface-soft);
  border: 1px solid var(--sg-border-soft);
  border-radius: 14px;
}

.hv-video-info__card > .sg-eyebrow {
  grid-column: 1;
  margin: 0;

  color: var(--sg-muted);
  font-size: 0.68rem;
}

.hv-video-info__title {
  grid-column: 1;
  margin: 0;

  color: var(--sg-text);
  font-size: 1.05rem;
  font-weight: 680;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.hv-video-info__source {
  grid-column: 2;
  grid-row: 1 / span 2;
  margin: 0;

  color: var(--sg-text-soft);
  font-size: 0.88rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.hv-video-info__source a {
  color: var(--sg-blue);
  font-weight: 620;
  text-decoration: none;
}

.hv-video-info__source a:hover {
  color: var(--sg-blue-hover);
  text-decoration: underline;
  text-underline-offset: 3px;
}


/* ----------------------------------------------------------
   DARK MODE – gleicher Mechanismus wie grammar-exercises-master_neu.css
   (Tokens schalten automatisch; hier nur die Fläche feinjustiert,
   damit sie sich ruhiger vom Hintergrund absetzt)
   ---------------------------------------------------------- */

@media (prefers-color-scheme: dark) {

  .hv-video-info__card {
    background: var(--sg-surface);
    border-color: var(--sg-border);
  }

}


/* ----------------------------------------------------------
   MOBIL
   ---------------------------------------------------------- */

@media (max-width: 600px) {

  .hv-video-info {
    padding-bottom: 32px;
  }

  .hv-video-info__card {
    grid-template-columns: minmax(0, 1fr);
    padding: 14px 16px;
    border-radius: 12px;
  }

  .hv-video-info__source {
    grid-column: 1;
    grid-row: auto;
    margin-top: 6px;
  }

}


/* ----------------------------------------------------------
   VERTEILER: THEMEN-BUTTONS IM NIVEAU-OVERLAY
   Wirkt nur auf Hörverstehen-Seiten (Datei wird nur dort geladen).
   Ursache des Overflows: lehrer_neu.css setzt
   ".level-topic-grid a > span:last-child { flex: 0 0 auto }".
   Bei Themen ohne Pfeil ist der Titel-Span zugleich das letzte
   Kind und darf dadurch nicht schrumpfen.
   ---------------------------------------------------------- */

.level-topic-grid a {
  min-width: 0;
  padding-top: 12px;
  padding-bottom: 12px;
}

/* Titel + Zeit: darf schrumpfen, Zeit bricht bei Bedarf um */
.level-topic-grid a > span:first-child {
  flex: 1 1 auto;
  min-width: 0;

  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 0.5em;
  row-gap: 2px;

  overflow-wrap: anywhere;
}

.level-topic-grid a > span:first-child small {
  white-space: nowrap;
  font-size: 0.82em;
  font-weight: 500;
  opacity: 0.62;
}

/* Tablet/Mobil: Zeit immer unter dem Titel, etwas dezenter */
@media (max-width: 820px) {

  .level-topic-grid a > span:first-child {
    flex-direction: column;
    align-items: flex-start;
  }

  .level-topic-grid a > span:first-child small {
    font-size: 0.78rem;
  }

}

/* Schmale Phones: eine Spalte, damit lange Titel lesbar bleiben */
@media (max-width: 560px) {

  .level-topic-grid {
    grid-template-columns: minmax(0, 1fr);
  }

}

/* ==========================================================
   LEHRERBEREICH: HÖRVERSTEHEN-THEMENSEITEN
   /lehrer/hoerverstehen/*.html
   Nur über .hv-teacher-topic gescoped – Grammatik-Lehrerseiten
   (.teacher-topic-page--beginner/--advanced/--expert) bleiben unberührt.
   Farben über die --topic-* / --teacher-* Tokens aus
   lehrer_inhalte_neu.css → Dark Mode über denselben
   @media (prefers-color-scheme: dark)-Mechanismus.
   ========================================================== */

/* Level-Bilder */
.hv-teacher-topic--beginner .teacher-topic-image-hero {
  background-image: url("/lehrer/grammatik/bilder/anfaenger_hoeren.jpg");
  background-position: center 10%;
}

.hv-teacher-topic--advanced .teacher-topic-image-hero {
  background-image: url("/lehrer/grammatik/bilder/fortgeschrittene_hoeren.jpg");
  background-position: center 42%;
}

/* Ohne Eduki-Sidebar: Inhalt einspaltig und zentriert.
   Seiten mit Eduki-Material (.hv-teacher-topic--with-eduki) nutzen
   unverändert das zweispaltige Grammatik-Layout aus lehrer_inhalte_neu.css. */
.hv-teacher-topic:not(.hv-teacher-topic--with-eduki) .teacher-topic-layout {
  display: block;
  width: min(760px, 100%);
}

/* Quellenhinweis unter den kostenlosen Inhalten */
.hv-teacher-source {
  margin: 22px 0 0;

  color: var(--topic-text-secondary);
  font-size: 0.86rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.hv-teacher-source a {
  color: var(--topic-text);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.hv-teacher-source a:hover {
  color: var(--teacher-accent);
}


/* ==========================================================
   LEHRER-VERTEILER: UNTERZEILE DER THEMENBLÖCKE
   (/lehrer/hoerverstehen/index.html – „Kurze Hörtexte“ /
   „Längere Gespräche“). Eigene hv-Klasse, keine globale
   Klasse umdefiniert. Dark Mode über prefers-color-scheme
   wie in lehrer_neu.css.
   ========================================================== */

.hv-topics-desc {
  margin: -8px 0 16px;

  color: #6e6e73;
  font-size: 0.88rem;
  line-height: 1.5;
}

@media (prefers-color-scheme: dark) {

  .hv-topics-desc {
    color: #a1a1a6;
  }

}