/** Shopify CDN: Minification failed

Line 109:10 Expected identifier but found whitespace
Line 109:15 Unexpected ";"

**/
/* ===========================================================================
   CONTENT HUB — das gemeinsame Stilblatt fuer BEIDE Dashboards.
   ===========================================================================

   🔴 WARUM DIESE DATEI EXISTIERT.

   Der Content-Hub stand bis zum 09.10.2026 in berater-dashboard.css. Dann fiel
   auf, dass es ZWEI Dashboards gibt — /pages/berater und /pages/studio
   (Kosmetikstudios), jedes mit eigenem Layout und eigenem Stilblatt. Die
   Kosmetikstudios kamen am Hub nie vorbei. Marcel am 09.10.: „Ja, mit eigener
   Bereichsauswahl. Mach Studio fertig."

   Zwei Kopien desselben Stilblatts waeren zwei Fassungen, die ab dem ersten
   Tag auseinander laufen. Also eine Datei, die beide Layouts laden.

   ---------------------------------------------------------------------------
   🔴 DIE MODAL-FLAECHEN HEISSEN HIER sm-ch-modal UND NICHT sm-measure-modal
   ---------------------------------------------------------------------------
   Textleser und Vorschaufenster benutzten bis zum 09.10.2026 die Klassen der
   MESSUNG mit (.sm-measure-modal*). Das ging, solange der Hub nur im
   Berater-Dashboard stand — dort ist die Messung auch zu Hause.

   Im Studio-Stilblatt gibt es .sm-measure-modal NICHT, keine einzige Regel.
   Geliehen heisst also: im zweiten Dashboard waeren beide Fenster
   unformatierte Bloecke mitten in der Seite — kein Overlay, kein
   Hintergrund, kein Schliessknopf an seinem Platz.

   Deshalb bringt dieses Stilblatt seine eigenen Flaechen mit. Die Regeln sind
   aus den Modal-Regeln der Messung KOPIERT und umbenannt, nicht neu erfunden:
   die Fenster sollen aussehen wie die, die es im Dashboard schon gibt.

   ⚠️ UND JA, DAS IST EINE DUBLETTE von rund sechzig Zeilen. Sie ist die
   richtige Entscheidung, weil die Namen vorher die falsche waren: ein Fenster
   des Content-Hubs hat mit der Messung nichts zu tun, und wer die Messung
   umgestaltet, soll den Content-Hub nicht mitverformen. Zwei Dinge mit
   verschiedenen Lebenslaeufen unter einem Klassennamen sind keine
   Wiederverwendung, sondern eine Verwechslung, die auf ihren Tag wartet.

   ---------------------------------------------------------------------------
   WAS DIESE DATEI VON IHREM GASTGEBER BRAUCHT
   ---------------------------------------------------------------------------
   Die gemeinsamen Gestaltungsvariablen (--sm-bg, --sm-border, --sm-radius,
   --sm-text, --sm-shadow-*, --sm-transition, --sm-success, --sm-danger,
   --sm-bg-elevated) und die Grundklassen .sm-btn, .sm-chip, .sm-filter,
   .sm-spinner, .sm-tab-head. Geprueft am 09.10.2026: ALLE sind in
   berater-dashboard.css UND in studio-dashboard.css vorhanden.

   Die Content-Hub-eigenen Farben stehen unten auf .sm-ch selbst — dieses
   Stilblatt bringt sie also mit und erbt sie nicht.
   =========================================================================== */

.sm-ch-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.sm-ch-modal[hidden] { display: none; }
.sm-ch-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.45);
  cursor: pointer;
}
.sm-ch-modal__panel {
  position: relative;
  background: #fff;
  border-radius: var(--sm-radius-lg);
  padding: 28px;
  max-width: 620px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--sm-shadow-lg);
}
.sm-ch-modal__close {
  position: absolute;
  top: 12px; right: 14px;
  background: transparent;
  border: 0;
  font-size: 28px;
  cursor: pointer;
  color: var(--sm-text-muted);
  line-height: 1;
  width: 32px; height: 32px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.sm-ch-modal__close:hover { background: var(--sm-bg); color: var(--sm-text); }
.sm-ch-modal__title {
  font-size: 22px;
  margin: 0 0 6px;
  font-weight: 500;
}
.sm-ch-modal__customer {
  font-size: 14px;
  color: var(--sm-text-muted);
  margin: 0 0 18px;
}
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.sm-ch-modal__hint {
  font-size: 12px;
  color: var(--sm-text-muted);
  margin: 12px 0 0;
  line-height: 1.5;
}
.sm-consent {
  margin-top: 20px;
  padding: 16px;
  border: 1px solid var(--sm-border);
  border-radius: var(--sm-radius);
  background: var(--sm-bg);
}
.sm-consent__check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}
.sm-consent__check input { margin-top: 3px; flex: 0 0 auto; }
.sm-consent__text {
  margin: 10px 0 0;
  font-size: 12px;
  line-height: 1.55;
  color: var(--sm-text-muted);
}
.sm-ch-modal__error {
  background: #fde8e8;
  border: 1px solid #f5c6c6;
  color: var(--sm-danger);
  padding: 12px 14px;
  border-radius: var(--sm-radius);
  margin-top: 16px;
  font-size: 13px;
  line-height: 1.5;
}
.sm-ch-modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--sm-border);
}
@media (max-width: 600px) {
  .sm-ch-modal__actions { flex-direction: column-reverse; }
  .sm-ch-modal__actions .sm-btn { width: 100%; }
}

/* ==========================================================
   CONTENT HUB (Reiter „Content Hub" — Marketing-Material)

   FUERS HANDY GEBAUT, nicht „geht auch": 150 Beraterinnen arbeiten
   ueberwiegend am Telefon. Zwei Kachelspalten ab 360 px, jeder Knopf
   mindestens 44 px hoch, die Bereichsleiste waagerecht zu schieben.

   Akzente kommen aus der skinmade-CI. Bewusst OHNE den farbigen linken Rand
   als Auszeichnung: im Bestand ist das die Form fuer Infokaesten und bleibt
   dort — neue Flaechen hier zeichnen sich ueber Flaeche, Rundung und einen
   vollen Rahmen aus.
   ========================================================== */
.sm-ch {
  /* CI, verbindlich (Quelle: skinmade-ci-brand-colors) */
  --sm-ch-softpeach:    #F9C2A9;
  --sm-ch-tenderviolet: #DEC4DF;
  --sm-ch-botanique:    #BEDEC5;
  --sm-ch-darkcedar:    #34312E;
  --sm-ch-peach-soft:   #FDF1EA;
}

/* ---- Bereichsleiste ---- */
.sm-ch-bereiche {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 2px 0 10px;
  margin-bottom: 12px;
}
.sm-ch-bereiche::-webkit-scrollbar { display: none; }
.sm-ch-bereich {
  flex: 0 0 auto;
  min-height: 40px;
  font-weight: 500;
  white-space: nowrap;
}
.sm-ch-bereich[data-active] {
  background: var(--sm-ch-darkcedar);
  border-color: var(--sm-ch-darkcedar);
  color: #fff;
}

/* ---- Filterleiste (nur wenn im Bereich Achsen haengen) ---- */
.sm-ch-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 16px;
  padding: 14px 16px;
  margin-bottom: 16px;
  background: var(--sm-bg-elevated);
  border: 1px solid var(--sm-border);
  border-radius: var(--sm-radius-lg);
  box-shadow: var(--sm-shadow-sm);
}
.sm-ch-filter__block {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.sm-ch-filter__block > span,
.sm-ch-filter__label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--sm-text-muted);
}
.sm-ch-filter__block select {
  min-height: 44px;
  max-width: 100%;
}
.sm-ch-filter__block .sm-chip-list { margin-top: 0; }
.sm-ch-filter__block .sm-chip { min-height: 40px; }
.sm-ch-filter__reset { margin-left: auto; }

/* ---- Hinweiszeile: Serverhinweise (abgeschnittene Liste, Vorschau-Warnung) ---- */
.sm-ch-note {
  margin: 0 0 16px;
  padding: 10px 14px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--sm-text);
  background: var(--sm-ch-peach-soft);
  border: 1px solid var(--sm-ch-softpeach);
  border-radius: var(--sm-radius);
}

/* ---- Zustaende ---- */
.sm-ch-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 44px 20px;
  text-align: center;
}
.sm-ch-state h2 {
  margin: 4px 0 0;
  font-size: 18px;
}
.sm-ch-state p {
  margin: 0;
  max-width: 44ch;
  color: var(--sm-text-muted);
  font-size: 14px;
}
.sm-ch-state--error {
  display: block;
  padding: 16px 18px;
  text-align: left;
  font-size: 14px;
  line-height: 1.55;
  color: var(--sm-danger);
  background: #fde8e8;
  border: 1px solid #f5c6c6;
  border-radius: var(--sm-radius);
}

/* ---- Kachelraster ---- */
.sm-ch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 18px;
}

.sm-ch-card {
  display: flex;
  flex-direction: column;
  background: var(--sm-bg-elevated);
  border: 1px solid var(--sm-border);
  border-radius: var(--sm-radius-lg);
  overflow: hidden;
  box-shadow: var(--sm-shadow-sm);
  transition: box-shadow var(--sm-transition), transform var(--sm-transition);
}
.sm-ch-card:hover { transform: translateY(-2px); box-shadow: var(--sm-shadow-md); }

.sm-ch-card__bild {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--sm-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.sm-ch-card__bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Kein Vorschaubild ist KEIN Fehler, sondern „es gibt keines" — eine PDF oder
   ein Textbaustein hat kein Standbild. Deshalb ein ruhiges Symbol und keine
   Fehlerfarbe. */
.sm-ch-card__platz {
  font-size: 40px;
  line-height: 1;
  opacity: 0.55;
}

/* ---- Das Bild als Knopf: ein Tipp holt den Titel hervor ----
   Marcel am 08.10.2026: „bildtitel nur bei Print anzeigen, sonst brauchen wir
   es nicht." Ausserhalb von Print hat die Kachel also keine Titelzeile — der
   Name darf dadurch aber nicht unerreichbar werden. Ein Tipp auf das Bild legt
   ihn darueber, ein zweiter nimmt ihn weg.

   Ein echter <button> und keine klickbare Flaeche: nur er ist mit der Tastatur
   erreichbar und teilt seinen Zustand ueber aria-expanded mit. Die
   Browser-Grundgestalt muss dafuer weg — sonst steht ein grauer Rahmen um
   jedes Vorschaubild. */
.sm-ch-card__bildflaeche {
  appearance: none;
  -webkit-appearance: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
/* Die Tastaturmarkierung NACH INNEN, nicht nach aussen: das Bild fuellt die
   Kachel randlos aus, ein aeusserer Ring waere unter dem overflow: hidden des
   Bildrahmens zur Haelfte abgeschnitten. */
.sm-ch-card__bildflaeche:focus-visible {
  /* --sm-ch-softpeach wie bei .sm-ch-textbox weiter unten — NICHT
     --sm-softpeach: die ist auf .sm-rank-band gesetzt und reicht nicht in den
     Content-Hub hinein. */
  outline: 2px solid var(--sm-ch-softpeach);
  outline-offset: -3px;
}

/* ---- Titel AUF dem Bild ----
   🔴 KEIN :hover UND KEIN opacity-Trick. Das Dashboard wird ueberwiegend am
   Handy benutzt, und dort gibt es kein Hovern — ein Titel, den nur eine Maus
   hervorholt, ist fuer 150 Beraterinnen keiner. Verborgen wird er ueber das
   hidden-ATTRIBUT, das der Knopf darueber umschaltet; damit ist er auch fuer
   Vorlesehilfen weg, solange er zu ist, statt unsichtbar mitgelesen zu werden.

   ⚠️ DIE REGEL FUER [hidden] MUSS AUSDRUECKLICH DASTEHEN. Die
   Browser-Grundregel [hidden] { display: none } ist nur eine
   Elementtyp-Auswahl und verliert gegen die display-Angabe dieser Klasse
   (-webkit-box, fuer die Zweizeilen-Begrenzung) — ohne die Regel unten waere
   das hidden-Attribut wirkungslos und der Titel immer zu sehen.

   pointer-events: none, damit der Streifen keinen Tipp abfaengt: darunter liegt
   jetzt der Knopf, und ein Titel, der das zweite Tippen schluckt, liesse sich
   nicht wieder wegklappen.

   Der Verlauf aus DARKCEDAR traegt weisse Schrift auch auf einem hellen Foto;
   ein flacher Balken wuerde das Bild abschneiden, der Verlauf laesst es
   auslaufen. */
.sm-ch-card__bildtitel[hidden] { display: none; }
.sm-ch-card__bildtitel {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 20px 10px 7px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  color: #fff;
  text-align: left;
  overflow-wrap: anywhere;
  background: linear-gradient(to top, rgba(52, 49, 46, 0.85), rgba(52, 49, 46, 0));
  text-shadow: 0 1px 2px rgba(52, 49, 46, 0.6);
  pointer-events: none;
  /* Zwei Zeilen, dann Schluss: ein langer Titel darf das Bild nicht zudecken.
     Das Vollstaendige steht im Bereich und im Textleser. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---- Das Zeichen, dass sich das Bild oeffnen laesst ----
   Marcel am 08.10.2026: „Dass man sich die Bilder öffnen kann [...] man möchte
   quasi eine Vorschau sowohl vom Foto als auch vom Video."

   🔴 EIN SICHTBARES ZEICHEN IST PFLICHT, KEIN SCHMUCK. Ein Bild, das sich
   antippen laesst, sieht genauso aus wie eines, das es nicht tut — am Handy
   gibt es keinen Mauszeiger, der es verraet. Ohne das Zeichen muesste die
   Beraterin raten, und sie wuerde es nicht versuchen.

   ▶ bei Video, ⤢ bei Foto: zwei Zeichen fuer zwei Handlungen. „Abspielen" ist
   nicht „grösser ansehen", und ein Dreieck auf einem Foto waere ein
   Versprechen, das die Vorschau nicht haelt.

   DER KREIS IST DUNKEL UND NICHT HELL. Auf einem hellen Foto verschwindet ein
   weisses Zeichen, auf einem dunklen ein schwarzes — DARKCEDAR mit halber
   Deckkraft traegt beides. Deshalb auch der Schatten.

   pointer-events: none, wie beim Titelstreifen darueber: das Zeichen liegt IM
   Knopf, und es darf den Tipp nicht abfangen. */
.sm-ch-card__lupe {
  position: absolute;
  right: 8px;
  bottom: 8px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 1;
  color: #fff;
  background: rgba(52, 49, 46, 0.55);
  box-shadow: 0 1px 4px rgba(52, 49, 46, 0.35);
  pointer-events: none;
  transition: background var(--sm-transition);
}
.sm-ch-card__bildflaeche.is-vorschau:hover .sm-ch-card__lupe,
.sm-ch-card__bildflaeche.is-vorschau:focus-visible .sm-ch-card__lupe {
  background: rgba(52, 49, 46, 0.8);
}
/* Die Lupe statt des Zeigers — am Rechner das zweite Zeichen, dass hier etwas
   aufgeht. cursor: pointer allein sagt nur „anklickbar". */
.sm-ch-card__bildflaeche.is-vorschau { cursor: zoom-in; }

.sm-ch-card__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px 10px;
  flex: 1;
}
.sm-ch-card__titel {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.sm-ch-card__meta {
  font-size: 12px;
  color: var(--sm-text-muted);
}

/* ---- Fortschritt beim Holen der Datei ----
   Ein 130-MB-Video braucht Sekunden bis Minuten. Ohne Anzeige sieht der Knopf
   aus, als haette er nichts getan. */
.sm-ch-card__fort {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 0 16px 8px;
}
.sm-ch-card__bar {
  height: 6px;
  background: var(--sm-border);
  border-radius: 999px;
  overflow: hidden;
}
/* 🔴 GEFUELLT WIRD UEBER transform: scaleX(), NICHT UEBER width.

   Begruendung: fortschritt() setzt diesen Balken bei einem 500-MB-Video
   VIERMAL JE SEKUNDE ueber Minuten hinweg. Eine Breitenaenderung zwingt den
   Browser jedes Mal zu Layout und Neuzeichnen; scaleX laeuft auf der
   Grafikkarte. Auf einem Telefon ist das der Unterschied zwischen einem
   laufenden Balken und einer ruckelnden Seite — und das Telefon ist hier der
   Normalfall.

   Dieselbe Loesung und dieselbe Begruendung wie bei .adm-ct-progress__fill in
   admin-dashboard.css (Upload-Fortschritt, 08.10.2026). Zwei Balken mit
   derselben Aufgabe sollen nicht zwei Verfahren haben.

   transform-origin: left, damit er von links waechst statt aus der Mitte.
   width: 100% ist die Grundlage, die scaleX staucht.

   ⚠️ Der waagerechte Eckenradius wird von scaleX mitgestaucht. Bei 6 px Hoehe
   begrenzt der Browser den Radius ohnehin auf 3 px — der Unterschied liegt
   unter einem Pixel und ist den Gewinn wert. */
.sm-ch-card__bar > span {
  display: block;
  height: 100%;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left;
  background: var(--sm-ch-softpeach);
  border-radius: 999px;
  transition: transform 140ms linear;
}
/* Ohne bekannte Gesamtgroesse keine erfundene Prozentzahl: der Balken wandert
   statt zu fuellen.

   🔴 transform: none UND KEIN scaleX. Die Wander-Animation unten schreibt
   ebenfalls auf `transform` (translateX) — zwei Schreiber auf derselben
   Eigenschaft. Eine CSS-Animation gewinnt zwar gegen eine Regel wie gegen
   einen Inline-Stil, aber auf diesem Vorrang soll nichts ruhen: der Zustand
   steht hier ausdruecklich auf none, und fortschritt() nimmt im unbestimmten
   Fall den inline gesetzten transform wieder weg.

   width: 40% ohne !important — es braucht es nicht mehr, seit fortschritt()
   keine Breite setzt. Das !important stand fuer genau diesen Fall. */
.sm-ch-card__bar > span.is-unbestimmt {
  width: 40%;
  transform: none;
  animation: sm-ch-wander 1.1s ease-in-out infinite alternate;
}
@keyframes sm-ch-wander {
  from { transform: translateX(-100%); }
  to   { transform: translateX(250%); }
}
.sm-ch-card__fort-text {
  font-size: 12px;
  color: var(--sm-text-muted);
  font-variant-numeric: tabular-nums;
}

.sm-ch-card__fehler {
  margin: 0;
  padding: 10px 16px;
  font-size: 12.5px;
  line-height: 1.5;
  color: #8a4034;
  background: #fdeceb;
  border-top: 1px solid #f5c6c6;
}

/* Eine ruhige Mitteilung statt einer Fehlermeldung -- "die Datei ist bereit,
   tippe noch einmal" ist auf dem iPhone der normale Weg bei grossen Videos. */
.sm-ch-card__fehler.is-hinweis {
  color: var(--sm-text);
  background: var(--sm-ch-peach-soft);
  border-top-color: var(--sm-ch-softpeach);
}

.sm-ch-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 16px 16px;
}
.sm-ch-card__btn {
  flex: 1 1 100%;
  min-height: 44px;
  padding: 11px 14px;
  font-size: 14px;
}

/* ---- Textleser ---- */
.sm-ch-textbox {
  margin-top: 16px;
  max-height: 46vh;
  overflow: auto;
  padding: 14px 16px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 14px;
  line-height: 1.6;
  background: var(--sm-bg);
  border: 1px solid var(--sm-border);
  border-radius: var(--sm-radius);
  -webkit-user-select: text;
  user-select: text;
}
.sm-ch-textbox:focus-visible {
  outline: 2px solid var(--sm-ch-softpeach);
  outline-offset: 2px;
}
.sm-ch-texthint {
  margin: 10px 0 0;
  font-size: 13px;
  color: var(--sm-success);
}

/* =========================================================================
   DIE GROSSE VORSCHAU — Foto ansehen, Video abspielen (08.10.2026)
   =========================================================================
   Marcel: „Dass man sich die Bilder öffnen kann, sodass die auf dem Handy oder
   auch auf dem Desktop angezeigt werden."

   Der Rahmen kommt von .sm-ch-modal (Hintergrund, Mitte, Schliessknopf) —
   hier steht nur, was die Vorschau anders braucht: BREITER, weil ein Foto in
   620 px nicht gross ist, und eine BUEHNE mit festem Platz, damit das Fenster
   beim Laden nicht springt. */
.sm-ch-lightbox__panel {
  /* Breiter als die 620 px des Textlesers, aber nicht randlos: ab etwa 1.000 px
     gewinnt ein Foto nichts mehr und das Fenster verliert seine Gestalt. */
  max-width: 1000px;
  padding: 20px;
}

/* 🔴 DIE BUEHNE HAT EINE FESTE HOEHE, BEVOR DAS BILD DA IST.
   Ohne sie ist das Fenster beim Oeffnen eine schmale Leiste mit Spinner und
   springt beim Eintreffen des Bildes auf seine volle Groesse — mitten unter dem
   Finger, der gerade auf „Schließen" zielte. min-height haelt den Platz frei.

   Der dunkle Grund ist nicht Geschmack: ein Foto mit weissem Rand (ein
   Produktfreisteller) verschwimmt auf weissem Grund mit dem Fenster, und bei
   einem Video zeigen die schwarzen Balken links und rechts, wo es aufhoert. */
.sm-ch-lightbox__buehne {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 240px;
  max-height: 68vh;
  margin: 8px 0 16px;
  border-radius: var(--sm-radius);
  background: #1c1a18;
  overflow: hidden;
}
/* object-fit: contain UND NICHT cover — anders als an der Kachel.
   Die Kachel ist ein Daumennagel und darf beschneiden; hier will die Beraterin
   das GANZE Bild sehen, weil sie entscheidet, ob sie es verschickt. Ein
   beschnittenes Vorschaubild waere eine Vorschau, die luegt. */
.sm-ch-lightbox__bild,
.sm-ch-lightbox__video {
  display: block;
  max-width: 100%;
  max-height: 68vh;
  width: auto;
  height: auto;
  object-fit: contain;
}
.sm-ch-lightbox__bild[hidden],
.sm-ch-lightbox__video[hidden] { display: none; }
/* Der Spieler darf schmal werden (Hochformat vom Handy), aber nicht winzig:
   die Bedienleiste von Safari braucht Breite, sonst liegen Abspielknopf und
   Lautstaerke uebereinander. */
.sm-ch-lightbox__video { min-width: min(100%, 280px); }
/* Der Spinner liegt UEBER der Buehne und nicht darin: ein Spinner, der den
   Platz mitnimmt, verschiebt das Bild in dem Augenblick, in dem es ankommt. */
.sm-ch-lightbox__buehne > .sm-spinner { position: absolute; }

@media (max-width: 720px) {
  /* Zwei Spalten bleiben auch auf einem 360-px-Display: eine einspaltige
     Liste macht aus 60 Kacheln endloses Wischen. */
  .sm-ch-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
  .sm-ch-card__body { padding: 12px 12px 8px; }
  .sm-ch-card__titel { font-size: 14px; }
  /* Auf einem 150-px-Daumennagel bleibt der Streifen schmal, damit er nicht
     ein Drittel des Bildes verdeckt. */
  .sm-ch-card__bildtitel { padding: 16px 8px 6px; font-size: 11.5px; }
  .sm-ch-card__actions { padding: 8px 12px 12px; gap: 6px; }
  .sm-ch-card__fort { padding: 0 12px 8px; }
  .sm-ch-card__fehler { padding: 9px 12px; }
  .sm-ch-filter { gap: 12px; padding: 12px 14px; }
  .sm-ch-filter__block { flex: 1 1 100%; }
  .sm-ch-filter__reset { margin-left: 0; width: 100%; }
  .sm-ch-state { padding: 32px 14px; }

  /* ---- Die Vorschau am Handy ----
     Fast randlos: 24 px Luft auf jeder Seite sind bei 360 px Breite ein
     Sechstel des Bildes. Das Fenster behaelt seine Ecken, damit es als Fenster
     erkennbar bleibt und nicht als neue Seite. */
  .sm-ch-lightbox { padding: 10px; }
  .sm-ch-lightbox__panel { padding: 16px 14px; }
  .sm-ch-lightbox__buehne { min-height: 180px; max-height: 56vh; margin: 6px 0 12px; }
  .sm-ch-lightbox__bild,
  .sm-ch-lightbox__video { max-height: 56vh; }
  /* Die Knoepfe stapeln sich HIER NICHT — das tut schon
     @media (max-width: 600px) weiter oben fuer jedes .sm-ch-modal, und
     eine zweite Regel daneben waere eine, die beim naechsten Mal nur an einer
     Stelle nachgezogen wird. Zwischen 600 und 720 px ist das Panel breit
     genug fuer drei Knoepfe in einer Zeile.
     Nur der Abstand wird knapper, weil das Panel schmaler ist. */
  .sm-ch-lightbox__panel .sm-ch-modal__actions {
    margin-top: 14px;
    padding-top: 14px;
    gap: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sm-ch-card { transition: none; }
  .sm-ch-card:hover { transform: none; }
  .sm-ch-card__bar > span.is-unbestimmt { animation-duration: 3s; }
  .sm-ch-card__lupe { transition: none; }
}