/* =============================================================================
   stenVal Consult — vier Minuten (AudioCast)
   Ergänzt stenval.css um die AudioCast-Übersicht. Filterknöpfe und
   Trefferzeile folgen der Optik der Beitragsseite.
   ========================================================================== */

.vier-minuten-seite { max-width: calc(52rem + 112px); }

/* --------------------------------------------------------------------------
   Steuerung: nur die Themenknöpfe, mittig gesetzt
   -------------------------------------------------------------------------- */
.vm-steuerung {
  padding: 18px 0 16px;
  border-top: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair);
  margin-bottom: 14px;
}

.filter.vm-themen {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  justify-content: center;
}
.filter.vm-themen button {
  font: inherit;
  font-size: 14px;
  letter-spacing: 0.02em;
  padding: 8px 14px;
  border: 1px solid var(--hair-strong);
  border-radius: 999px;
  background: #fff;
  color: var(--sten);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
@media (hover: hover) { .filter.vm-themen button:hover { border-color: var(--consult); } }
.filter.vm-themen button[aria-pressed="true"] {
  background: var(--val);
  border-color: var(--val);
  color: #fff;
}

/* Beide Klassen sind sonst nur in beitraege.css definiert, das diese Seite
   nicht lädt – deshalb hier vollständig und nicht bloß ergänzend. */
.vier-minuten-seite .trefferzeile {
  text-align: left;
  margin: 0 0 24px;
  font-size: 14px;
  color: var(--ink-soft);
}
.vier-minuten-seite .leer {
  margin: 40px 0;
  font-size: 17px;
  color: var(--ink-soft);
  text-align: center;
}

/* --------------------------------------------------------------------------
   Ein AudioCast
   -------------------------------------------------------------------------- */
.vm-liste { display: flex; flex-direction: column; gap: clamp(24px, 4vh, 40px); }

.audiocast {
  border: 1px solid var(--hair);
  border-radius: 20px;
  background: #fff;
  padding: clamp(22px, 3.2vw, 38px);
}
.audiocast.versteckt { display: none; }

/* Sprungziel nicht unter der Fensterkante verschwinden lassen */
.audiocast { scroll-margin-top: 90px; }

.ac-datum {
  margin: 0 0 6px;
  font-size: 13.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--consult);
}

/* Überschrift je Folge: für Screenreader die Sprungmarke, sichtbar dezent –
   das Thema steht ohnehin noch als Marke darunter. */
.ac-titel {
  margin: 0 0 16px;
  font-size: clamp(1.05rem, 2.2vw, 1.3rem);
  font-weight: 600;
  color: var(--sten);
}

/* Play, Text, Kommentar und Link mittig um die horizontale Achse verteilt */
.ac-zeile {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 2.2vw, 22px);
}

/* Play-Knopf in Blau */
.ac-play {
  flex: 0 0 auto;
  width: 58px;
  height: 58px;
  border: 0;
  border-radius: 50%;
  background: var(--val);
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s ease, filter 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 6px 18px rgba(0, 47, 166, 0.28);
}
.ac-play svg { width: 26px; height: 26px; fill: currentColor; margin-left: 3px; }
@media (hover: hover) { .ac-play:hover { filter: brightness(1.12); box-shadow: 0 8px 22px rgba(0, 47, 166, 0.36); } }
.ac-play:active { transform: scale(0.95); }

/* Textanriss: schmal, kleine Schrift, drei Zeilen, danach ausblendend */
.ac-anriss {
  flex: 0 1 26rem;
  min-width: 0;
  position: relative;
  display: block;
  text-align: left;
  font: inherit;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--mist);
  border: 1px solid var(--hair);
  border-radius: 14px;
  padding: 11px 14px 3px;
  cursor: pointer;
  max-height: calc(1.5em * 3 + 14px);    /* drei Zeilen, dann Fade-out */
  overflow: hidden;
  transition: border-color 0.15s;
}
@media (hover: hover) { .ac-anriss:hover { border-color: var(--consult); } }
.ac-anriss-text { display: block; white-space: pre-line; }
.ac-anriss::after {
  content: "";
  position: absolute;
  left: 1px; right: 1px; bottom: 1px;
  height: 1.9em;
  border-radius: 0 0 13px 13px;
  background: linear-gradient(to bottom, rgba(245, 245, 247, 0), var(--mist) 88%);
  pointer-events: none;
}

/* Kommentar- und Link-Knopf */
.ac-aktionen {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ac-knopf {
  font: inherit;
  font-size: 14px;
  letter-spacing: 0.02em;
  padding: 9px 16px;
  border: 1px solid var(--hair-strong);
  border-radius: 999px;
  background: #fff;
  color: var(--sten);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  white-space: nowrap;
}
@media (hover: hover) {
  .ac-knopf:hover { border-color: var(--val); color: var(--val); }
}
.ac-knopf.ist-kopiert {
  background: var(--val);
  border-color: var(--val);
  color: #fff;
}

/* Themenmarke unter dem Eintrag – klickbar als Filter */
.ac-thema { margin: 16px 0 0; }
.ac-thema button {
  font: inherit;
  font-size: 14px;
  padding: 5px 12px;
  border: 1px solid var(--hair);
  border-radius: 999px;
  background: #fff;
  color: var(--val);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
/* Fingerbedienung: dasselbe Mindestmaß wie überall sonst auf der Seite */
@media (pointer: coarse) {
  .ac-thema button { min-height: 44px; padding: 5px 16px; }
}
@media (hover: hover) { .ac-thema button:hover { border-color: var(--val); background: rgba(0, 47, 166, 0.04); } }

/* --------------------------------------------------------------------------
   Schwebefenster: Video und Zeichenzähler
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   Video-Fenster

   Ziel ist, dass man nicht schieben muss. Ein festes overflow: hidden wäre
   dafür der falsche Weg – auf großen Schirmen deckelt .sheet bei 900px, und
   alles darüber wäre unerreichbar abgeschnitten. Stattdessen wächst das Video
   nur so weit, wie das Fenster wirklich hergibt: 86svh ist die Fensterhöhe,
   900px dessen Deckel, davon geht das Drumherum ab. Der untere Wert von 180px
   verhindert, dass im Querformat nichts mehr übrig bleibt.
   -------------------------------------------------------------------------- */
.sheet--video .page-head { margin-bottom: 14px; }
.vm-video { margin: 0; }
.vm-video video {
  width: auto;
  max-width: 100%;
  max-height: max(180px, min(86svh, 900px) - 210px);
  margin: 0 auto;
  border-radius: 14px;
  background: #000;
  display: block;
}

/* Im Querformat ist Höhe das knappe Gut: Kopfzeile kleiner, Video größer */
@media (orientation: landscape) and (max-height: 560px) {
  .sheet--video .page-head { margin-bottom: 8px; }
  .sheet--video .page-head h1 { font-size: 1.25rem; }
  .sheet--video .page-eyebrow { display: none; }
  .vm-video video { max-height: max(150px, min(92svh, 900px) - 165px); }
  .vm-video figcaption { margin-top: 6px; font-size: 12.5px; }
}
.vm-video figcaption {
  margin-top: 10px;
  font-size: 13.5px;
  color: var(--ink-soft);
  text-align: center;
}

.zeichenzaehler {
  display: block;
  margin-top: 6px;
  font-size: 13.5px;
  color: var(--ink-soft);
  text-align: right;
}
.zeichenzaehler.ist-knapp { color: #b3261e; }

/* --------------------------------------------------------------------------
   Schmale Bildschirme
   -------------------------------------------------------------------------- */
@media (max-width: 720px) {
  .ac-zeile { flex-wrap: wrap; }
  .ac-anriss { flex-basis: calc(100% - 58px - 16px); }
  .ac-aktionen { flex-direction: row; width: 100%; }
  .ac-knopf { flex: 1 1 auto; min-height: 44px; }
  .filter.vm-themen button { min-height: 44px; }
}