/* ==========================================================================
   SHK-Info.de – Seite für Hersteller und Industrie (Mediadaten)
   ========================================================================== */

.kennzahlen {
  display: grid; gap: var(--raum-6);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
}

.kennzahl {
  padding: var(--raum-6);
  border: 1px solid var(--farbe-linie);
  border-radius: var(--radius-lg);
  background: #fff;
  /* Balken und Legende sollen unten bündig stehen, egal wie lang der Text ist */
  display: flex; flex-direction: column;
}
.kennzahl__symbol {
  display: block; width: 2rem; height: 2rem;
  margin-bottom: var(--raum-4);
}
.kennzahl .aufteilung { margin-top: auto; padding-top: var(--raum-4); }
/* Zweite Zahl für Karten ohne Balken – steht auf derselben Höhe wie die Legenden */
.kennzahl__fuss {
  margin-top: auto; padding-top: var(--raum-4);
  font-size: var(--text-xs); color: var(--farbe-text-leise);
  font-variant-numeric: tabular-nums;
}
.kennzahl__fuss strong { color: var(--blau-700); font-weight: 700; }
.kennzahl__wert {
  display: block;
  font-size: var(--text-3xl); font-weight: 700;
  letter-spacing: -0.03em; line-height: 1.1;
  color: var(--blau-700);
  font-variant-numeric: tabular-nums;
  margin-bottom: var(--raum-2);
}
.kennzahl__name { display: block; font-weight: 600; margin-bottom: var(--raum-2); }
.kennzahl__text { font-size: var(--text-sm); color: var(--farbe-text-leise); }

/* Die Aufteilung der Zuschauerschaft als Balken, nicht als Tortendiagramm */
.aufteilung { margin-top: var(--raum-4); }
.aufteilung__balken {
  display: flex; height: .5rem;
  border-radius: var(--radius-voll); overflow: hidden;
  background: var(--grau-200);
}
.aufteilung__teil--fach { background: var(--shk-blau); }
.aufteilung__teil--kunde { background: var(--shk-gelb); }
/* Für Anteile, die keine zwei gleichwertigen Gruppen sind */
.aufteilung__teil--anteil { background: var(--blau-700); }
.aufteilung__teil--rest   { background: var(--grau-300); }
.aufteilung__legende {
  display: flex; flex-wrap: wrap; gap: var(--raum-4);
  margin-top: var(--raum-3);
  font-size: var(--text-xs); color: var(--farbe-text-leise);
}
.aufteilung__punkt {
  display: inline-block; width: .6rem; height: .6rem;
  border-radius: 50%; margin-right: var(--raum-2);
}

/* Partnerlogos */
.partner {
  display: flex; flex-wrap: wrap; gap: var(--raum-8);
  align-items: center;
  padding: var(--raum-8);
  border-radius: var(--radius-lg);
  background: #fff;
  border: 1px solid var(--farbe-linie);
}
.partner__name {
  font-size: var(--text-lg); font-weight: 700;
  color: var(--grau-400); letter-spacing: -0.01em;
}

/* Transparenzhinweis – gehört sichtbar auf die Seite, nicht ins Kleingedruckte */
.transparenz {
  margin-top: var(--raum-12);
  padding: var(--raum-6);
  border-radius: var(--radius);
  background: var(--gelb-100);
  border: 1px solid var(--gelb-300);
  font-size: var(--text-sm);
  max-width: var(--breite-text);
}
.transparenz strong { display: block; margin-bottom: var(--raum-2); }

.kontaktblock {
  margin-top: var(--raum-12);
  padding: var(--raum-8);
  border-radius: var(--radius-lg);
  background: var(--blau-900);
  color: var(--blau-100);
  border-left: 4px solid var(--shk-rot);
}
.kontaktblock h2 { color: #fff; margin-bottom: var(--raum-3); }
.kontaktblock p { font-size: var(--text-sm); margin-bottom: var(--raum-6); max-width: 46rem; }

/* --- Partnerlogos ---------------------------------------------------------
   Logos kommen in allen Formaten und Farben. Graustufen plus einheitliche
   Kachelhöhe bringen Ruhe hinein; beim Überfahren zeigt sich die Originalfarbe.
   ------------------------------------------------------------------------- */
.partner {
  display: grid; gap: var(--raum-4);
  /* 45 % statt 100 %: auf dem Handy bleiben es zwei Kacheln nebeneinander,
     sonst wuerde eine einzige die ganze Breite einnehmen. */
  grid-template-columns: repeat(auto-fill, minmax(min(45%, 11rem), 1fr));
  list-style: none; padding: 0;
}
.partner__feld {
  display: flex; align-items: center; justify-content: center;
  /* Knapper Innenabstand: die Kachel ist Rahmen, nicht Passepartout */
  height: 5.5rem; padding: var(--raum-2);
  background: #fff;
  border: 1px solid var(--farbe-linie);
  border-radius: var(--radius);
}
.partner__feld img {
  /* Feste Obergrenze statt 100 %: im Raster löst sich die Prozenthöhe
     zirkulär auf und die Logos laufen aus der Kachel heraus.
     Die Dateien sind auf den Schriftzug zugeschnitten - ohne den früheren
     Leerrand wirkt dieselbe Grenze deutlich größer. */
  max-height: 4.25rem;
  max-width: 100%;
  width: auto; height: auto;
  object-fit: contain;
  filter: grayscale(1);
  opacity: .85;
  transition: filter .2s, opacity .2s;
}
.partner__feld:hover img { filter: none; opacity: 1; }

.partner__hinweis {
  margin-top: var(--raum-4);
  font-size: var(--text-xs);
  color: var(--farbe-text-leise);
  max-width: var(--breite-text);
}

/* Partnername über dem Videotitel */
.referenz__partner {
  font-size: var(--text-xs); font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--shk-rot);
  margin-bottom: var(--raum-1);
}
.referenz__aufrufe {
  margin-top: var(--raum-2);
  font-size: var(--text-sm); font-weight: 600;
  color: var(--blau-700);
  font-variant-numeric: tabular-nums;
}

/* --- Ansprechpartner ------------------------------------------------------
   Ein Gesicht statt eines Formulars: Wer eine Kooperation anfragt, will
   wissen, mit wem er spricht.
   ------------------------------------------------------------------------- */
.ansprechpartner {
  display: grid; gap: var(--raum-8);
  align-items: center;
  margin-top: var(--raum-12);
  padding: var(--raum-8);
  border-radius: var(--radius-lg);
  background: var(--blau-900);
  color: var(--blau-100);
  border-left: 4px solid var(--shk-rot);
}
@media (min-width: 48rem) {
  .ansprechpartner { grid-template-columns: auto 1fr; gap: var(--raum-12); }
}

.ansprechpartner__bild {
  width: 9rem; height: 9rem;
  border-radius: 50%;
  /* Die Teamfotos sind bereits kreisförmig freigestellt – nicht noch
     einmal verschieben, sonst wird der Kopf angeschnitten. */
  object-fit: cover; object-position: center;
  background: var(--blau-800);
  border: 3px solid rgb(255 255 255 / .18);
}

.ansprechpartner h2 { color: #fff; margin-bottom: var(--raum-2); }
.ansprechpartner__rolle {
  font-size: var(--text-sm);
  color: rgb(255 255 255 / .62);
  margin-bottom: var(--raum-4);
}
.ansprechpartner p { font-size: var(--text-sm); }

.ansprechpartner__wege {
  display: flex; flex-wrap: wrap; gap: var(--raum-3) var(--raum-6);
  margin-top: var(--raum-6);
  list-style: none; padding: 0;
}
.ansprechpartner__wege a {
  display: inline-flex; align-items: center; gap: var(--raum-2);
  color: #fff; font-weight: 600;
  text-decoration-color: rgb(255 255 255 / .4);
}
.ansprechpartner__wege a:hover { text-decoration-color: #fff; }
.ansprechpartner__zeichen { opacity: .7; }