/* ============================================================
   merson.ch — Design-Feinschliff
   Liegt über styles.css aus der Kunden-ZIP und bleibt beim nächsten
   Import erhalten. Zwei Ziele: Logos auf einen Blick, und aus 39
   verschiedenen Knopf-Varianten werden drei.
   ============================================================ */

:root {
  --k-hoehe: 48px;           /* eine Knopfhöhe für alle */
  --k-schrift: 900 13px/1 Arial, Helvetica, sans-serif;
  --k-sperrung: .05em;
}

/* ---------- 1. Referenzen: Logo-Wand ----------
   Vorher ein Karussell mit 5 Seiten (4 von 20 Marken sichtbar) und teils
   nachgetippten Schriftzügen. Jetzt alle Marken auf einen Blick, als echte
   Logos in Markenfarben auf hellen Kacheln — gleich gross, gleich gewichtet. */
.ref-viewport { overflow: visible; }
.ref-track {
  display: block !important;
  padding: 28px;
  transform: none !important;
  transition: none !important;
}
.ref-slide {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;     /* unvollständige letzte Reihe steht mittig */
  gap: 10px;
  padding: 0 !important;
}
.ref-logo {
  flex: 0 0 calc((100% - 5 * 10px) / 6);
  min-height: 118px !important;
  padding: 18px !important;
  background: #fff !important;
  border: 0 !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  transition: transform .18s ease, box-shadow .18s ease;
}
.ref-logo::after { display: none !important; }
.ref-logo:hover {
  transform: translate(-3px, -3px);
  box-shadow: 6px 6px 0 var(--yellow);
}
.ref-logo img {
  height: var(--h, 40px) !important;
  width: auto !important;
  max-width: 88% !important;
  max-height: none !important;
  object-fit: contain;
  filter: none !important;
  mix-blend-mode: normal !important;
  opacity: 1 !important;
  transform: none !important;
}
/* weisse PNG-Logos werden auf der hellen Kachel schwarz */
.ref-logo img.logo-weiss { filter: invert(1) !important; }
/* weiss auf schwarzem Grund: umkehren, der (jetzt weisse) Grund verschmilzt */
.ref-logo img.logo-schwarz { filter: invert(1) !important; mix-blend-mode: multiply !important; }
.ref-logo .wordmark {
  font-size: clamp(1.05rem, 1.4vw, 1.4rem) !important;
  color: #111 !important;
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
}
.ref-controls, .ref-count { display: none !important; }

@media (max-width: 1100px) { .ref-logo { flex-basis: calc((100% - 4 * 10px) / 5); } }
@media (max-width: 860px)  { .ref-logo { flex-basis: calc((100% - 3 * 10px) / 4); } }
@media (max-width: 620px) {
  .ref-track { padding: 12px; }
  .ref-slide { gap: 6px; }
  .ref-logo { flex-basis: calc((100% - 2 * 6px) / 3); min-height: 74px !important; padding: 8px !important; }
  .ref-logo img { height: calc(var(--h, 40px) * .6) !important; }
  .ref-logo .wordmark { font-size: 12px !important; }
}

/* ---------- 2. Knöpfe: drei Arten statt 39 ---------- */

/* 2a. Gefüllter Knopf — Farben bleiben wie gestaltet, Form wird gleich */
.btn,
.contact-pill,
.form-submit,
.community-links a,
.community-readmore a,
.press-feature-copy a,
.community-clip-outbound,
.hero-video-start,
.community-reel-launch {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--k-hoehe) !important;
  padding: 0 20px !important;
  border-radius: 0 !important;
  font: var(--k-schrift) !important;
  letter-spacing: var(--k-sperrung) !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease !important;
}
.btn:hover,
.contact-pill:hover,
.form-submit:hover,
.community-links a:hover,
.community-readmore a:hover,
.press-feature-copy a:hover,
.community-clip-outbound:hover,
.hero-video-start:hover,
.community-reel-launch:hover {
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px 0 rgba(0, 0, 0, .85);
}

/* 2b. "Video abspielen" — überall derselbe gelbe Knopf.
   Repariert nebenbei "SRF-Video laden" (war weiss auf gelb) und
   "Parodie laden" (war weiss auf weiss). */
.community-reel-launch,
.hero-video-start,
.community-clip-outbound {
  background: var(--yellow) !important;
  color: var(--ink) !important;
  border: 2px solid var(--yellow) !important;
}

/* 2c. Textlink mit Pfeil — für "Auf Instagram ansehen ↗" & Co. */
.hero-video-source,
.community-clip-copy a,
.community-reel > a,
.video-caption a,
.apprenticeship-copy a,
.format-link,
.community-footer a,
.community-proof-grid a,
.parody-gallery a:not(.parody-card),
.press-parody > div > a,
.mk-download--kontakt a {
  display: inline-flex !important;
  align-items: center;
  min-height: 44px;
  font: var(--k-schrift) !important;
  letter-spacing: var(--k-sperrung) !important;
  text-transform: uppercase !important;
  text-decoration: underline !important;
  text-decoration-thickness: 2px !important;
  text-underline-offset: 5px !important;
  transition: text-underline-offset .15s ease, opacity .15s ease;
}
.hero-video-source:hover,
.community-clip-copy a:hover,
.community-reel > a:hover,
.video-caption a:hover,
.apprenticeship-copy a:hover,
.format-link:hover,
.community-footer a:hover,
.community-proof-grid a:hover,
.parody-gallery a:not(.parody-card):hover,
.press-parody > div > a:hover,
.mk-download--kontakt a:hover { text-underline-offset: 8px !important; }

/* Tastatur: überall derselbe sichtbare Fokus */
a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--red) !important;
  outline-offset: 3px !important;
}

@media (prefers-reduced-motion: reduce) {
  .btn, .contact-pill, .form-submit, .community-links a, .community-readmore a,
  .press-feature-copy a, .community-clip-outbound, .hero-video-start,
  .community-reel-launch { transition: none !important; }
}

/* ---------- 3. Symbole ----------
   Vorher Unicode-Pfeile, die das iPhone als bunte Emoji-Kästchen zeichnet.
   Jetzt kleine Vektor-Symbole in Textfarbe. */
.ic {
  width: .95em; height: .95em;
  display: inline-block;
  vertical-align: -.12em;
  flex-shrink: 0;
  margin-left: .15em;
  transition: transform .15s ease;
}
.ic-play { margin: 0 .35em 0 0; }
a:hover .ic:not(.ic-play) { transform: translate(2px, -2px); }
.mk-download a:hover .ic { transform: translateY(2px); }

/* ---------- 4. Videos: Vorschaubild + ein runder Play-Knopf ---------- */
.video-poster { justify-content: center !important; align-items: center !important; }
.video-poster:before { background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.35)) !important; }
.play-mark {
  position: relative; z-index: 1;
  width: 68px; height: 68px;
  border-radius: 50%;
  background: var(--yellow);
  color: var(--ink);
  display: flex !important; align-items: center; justify-content: center;
  font-size: 0 !important;                 /* falls doch Text drinsteht */
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  transition: transform .18s ease;
}
.play-mark .ic-play { width: 26px; height: 26px; margin: 0 0 0 4px; }
.video-launch:hover .play-mark { transform: scale(1.08); }
.poster-label { position: absolute !important; left: 23px; bottom: 23px; z-index: 1; }

/* Event-Clips, Lehrstellen, Presse, Parodie: derselbe runde Play-Knopf wie
   bei den grossen Video-Karten — mittig, verdeckt keinen Titel am Bildrand.
   Der Text "Video abspielen" bleibt für Bildschirmleser im aria-label. */
.community-clip-screen:has(> .community-reel-launch),
.apprenticeship-poster:has(> .community-reel-launch),
.press-feature-video:has(> .community-reel-launch),
.press-parody-player:has(> .community-reel-launch) {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
:is(.community-clip-screen, .apprenticeship-poster, .press-feature-video, .press-parody-player) > .community-reel-launch {
  position: relative; z-index: 2;
  width: 68px !important; height: 68px !important; min-height: 68px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  font-size: 0 !important; gap: 0 !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.35) !important;
  margin: auto !important;
}
:is(.community-clip-screen, .apprenticeship-poster, .press-feature-video, .press-parody-player) > .community-reel-launch .ic-play {
  width: 26px; height: 26px; margin: 0 0 0 4px;
}
:is(.community-clip-screen, .apprenticeship-poster, .press-feature-video, .press-parody-player) > .community-reel-launch:hover {
  transform: scale(1.08) !important;
  box-shadow: 0 14px 34px rgba(0,0,0,.45) !important;
}

/* Nau-Clip ist ein Link auf nau.ch, kein eingebettetes Video — bekam darum
   kein Bild. Jetzt das Vorschaubild des Nau-Artikels zum McDonald's-Event. */
.community-clip-nau {
  background: linear-gradient(0deg, rgba(0,0,0,.65), rgba(0,0,0,0) 50%),
              url('/assets/poster/nau-67110280.jpg?v=c7cde8f1') center/cover !important;
}
.community-clip-nau::before,
.community-clip-nau::after { display: none !important; }

/* ---------- 5. "Privatjet. Jungfraujoch. Community." ----------
   Bei 92 px Schrift war "JUNGFRAUJOCH." breiter als die Karte und wurde am
   Rand abgeschnitten. Die Schrift richtet sich jetzt nach der Kartenbreite
   (Container-Einheit cqi) — nie grösser als vorher. */
.community-extra { container-type: inline-size; }
.community-extra h3 { font-size: min(5.7rem, 12.5cqi) !important; }

/* ---------- 6. Reichweite-Zahlen einheitlich einzeilig ----------
   "20,2 Mio." brach als einzige Zahl auf zwei Zeilen. Alle vier Zahlen
   richten sich jetzt nach der Kachelbreite und bleiben gleich gross. */
.stat { container-type: inline-size; }
.stat strong { white-space: nowrap; font-size: min(6.2rem, 25cqi) !important; }

/* ---------- 7. Presse-Videos füllen ihren Rahmen ----------
   SRF (Hochformat-Screenshot) und TeleZüri standen verkleinert mit
   schwarzen Balken im Rahmen. Jetzt füllt das Bild die Fläche; der
   Ausschnitt liegt auf dem Inhalt (Titel + Clip). */
.press-feature-video > img {
  object-fit: cover !important;
  object-position: center 52% !important;
  width: 100% !important; height: 100% !important;
  position: absolute; inset: 0;
}
.press-feature-video { position: relative; overflow: hidden; }
/* Auf breiten Schirmen ist die letzte Kachel etwas breiter — Grösse darum
   an der ganzen Zahlenreihe messen, damit alle vier exakt gleich sind. */
@media (min-width: 900px) {
  .stat-grid { container-type: inline-size; }
  .stat { container-type: normal; }
  .stat strong { font-size: min(6.2rem, 5.5cqi) !important; }
}
/* SRF: Ausschnitt so, dass Titel ("Steve Merson verändert Social Media …")
   und Clip zusammen im Rahmen stehen — gemessen: Inhalt bei 420–1264 px. */
.press-feature-video > img[src*="srf-social-media-steve"] { object-position: center 39% !important; }