/* Neuer Aufbau der Fallstudien.
 *
 * Grundsaetze, die aus den Regeln des Kunden folgen:
 *   - durchgehend ein Hintergrund, kein Farbwechsel zwischen Abschnitten.
 *     Getrennt wird mit Abstand und Haarlinien.
 *   - Editorial-Raster, linksbuendig. Nichts durchgehend zentriert.
 *   - keine Symbol-Kacheln. Zahlen und Typo tragen die Seite.
 *   - Rot nur als Akzent, nie als Flaeche.
 */

/* ---- Feste Stufen ----
 * Vorher liefen hier zehn verschiedene Schriftgroessen zwischen 0,72 und
 * 1,2rem nebeneinander. Ab jetzt nur noch diese fuenf Stufen und diese
 * fuenf Farben. Wer eine neue braucht, aendert sie hier, nicht unten.
 */
:root {
  --t-marke: .75rem;    /* Versalien-Marken, Kicker, Quellenzeile */
  --t-klein: .85rem;    /* Zweitzeilen, Bildunterschriften */
  --t-grund: 1rem;      /* Fliesstext */
  --t-gross: 1.1rem;    /* Vorspann, hervorgehobene Zeilen */
  --t-titel: 1.2rem;    /* Zwischenueberschriften */

  --f-hell:  #ffffff;
  --f-text:  #c9ced6;
  --f-matt:  #8c94a1;
  --f-leise: #767f8c;
  --f-linie: #262b33;
  /* Keine Satzfarbe: die Flaeche hinter Bildern und Videos, solange nichts
   * geladen ist. Stand vorher zweimal von Hand im Code. */
  --f-platzhalter: #0e1216;
}


.fall__kopf,
.fall__beweis,
.fall__stimme,
.fall__weg,
.fall__werkschau,
.fall__schluss { padding-block: 3.5rem; }
@media (min-width: 768px) {
  .fall__kopf { padding-block: 4.5rem 3.5rem; }
  .fall__beweis,
  .fall__stimme,
  .fall__weg,
  .fall__werkschau,
  .fall__schluss { padding-block: 4.5rem; }
}

/* ---- 1. Kopf und Film ----
 * Der Film steht gleichberechtigt neben der Aussage, nicht als vierter
 * Block weiter unten. Bisher lief er auf rund einem Drittel der Breite.
 */
.fall__kopf-raster { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 1200px) {
  .fall__kopf-raster { grid-template-columns: 1fr 1.3fr; gap: 3.5rem; }
}

.fall__kicker {
  margin: 0 0 .9rem;
  font-size: var(--t-marke);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--f-leise);
}
.fall__kunde {
  margin: 0;
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  line-height: 1.05;
  hyphens: auto;
}
.fall__aufgabe {
  max-width: 32em;
  margin: 1.1rem 0 0;
  font-size: var(--t-gross);
  line-height: 1.6;
  color: var(--f-text);
}
.fall__logo {
  display: block;
  width: auto;
  max-width: 160px;
  height: auto;
  margin-top: 1.75rem;
  opacity: .85;
}

.fall__film { margin: 0; }
.fall__film-rahmen {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
  background: var(--f-platzhalter);
}
.fall__film-rahmen iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.fall__film figcaption {
  margin-top: .75rem;
  font-size: var(--t-klein);
  color: var(--f-matt);
}

/* ---- Abschnittsmarke ----
 * Kleine Marke statt grosser Ueberschrift, damit die Zahlen das groesste
 * Element der Seite bleiben.
 */
.fall__abschnitt-marke {
  margin: 0 0 1.75rem;
  font-size: var(--t-marke);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--main-red);
  font-weight: 700;
}

/* ---- 2. Beweisleiste ---- */
.fall__zahlen {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2rem;
  border-top: 1px solid var(--f-linie);
  padding-top: 2rem;
}
@media (min-width: 768px) {
  .fall__zahlen { grid-template-columns: repeat(3, 1fr); gap: 3rem; }
}
.fall__zahl-wert {
  margin: 0;
  color: var(--main-red);
  /* Ohne diese Zeile erbt die Zahl als Absatz die Fliesstextschrift
   * Montserrat, und die ist nur in einem Schnitt geladen. font-weight: 900
   * blieb dadurch wirkungslos und die Zahl duenn. Inter liegt mit der
   * vollen Achse 100 bis 900 vor. */
  font-family: "Inter", sans-serif;
  font-size: clamp(3rem, 7vw, 5.5rem);
  line-height: 1;
  font-weight: 900;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}

.fall__zahl-was {
  margin: .6rem 0 0;
  font-size: var(--t-grund);
  line-height: 1.4;
  color: var(--f-text);
}
.fall__zahl-quelle {
  margin: .4rem 0 0;
  font-size: var(--t-marke);
  color: var(--f-leise);
}

/* ---- 3. Zitat ----
 * Eins, gross, linksbuendig. Vorher standen auf manchen Seiten drei
 * Testimonials untereinander, die niemand alle liest.
 */
.fall__zitat {
  max-width: 24em;
  margin: 0;
  padding-left: 1.75rem;
  border-left: 3px solid var(--main-red);
}
.fall__zitat p {
  margin: 0;
  font-size: clamp(1.25rem, 2.4vw, 1.75rem);
  line-height: 1.4;
  color: var(--f-hell);
}
.fall__zitat footer { margin-top: 1.1rem; }
.fall__zitat-name { display: block; font-weight: 700; }
.fall__zitat-rolle { display: block; font-size: var(--t-klein); color: var(--f-matt); margin-top: .15rem; }

/* ---- 4. Die drei Schritte ---- */
.fall__schritte {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--f-linie);
}
.fall__schritt {
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  gap: 1.25rem;
  padding: 1.75rem 0;
  border-bottom: 1px solid var(--f-linie);
}
@media (min-width: 768px) {
  .fall__schritt { grid-template-columns: 5rem 1fr; gap: 2.5rem; }
}
.fall__schritt-nr {
  font-size: var(--t-grund);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: .08em;
  color: var(--main-red);
  padding-top: .35rem;
}
.fall__schritt-titel { margin: 0 0 .5rem; font-size: var(--t-titel); line-height: 1.3; }
.fall__schritt p { margin: 0; max-width: 46em; line-height: 1.7; color: var(--f-text); }

/* ---- 5. Werkschau ----
 * Dichtes Raster, keine Ueberschrift je Bild. Vorher standen hier
 * Etiketten wie "FOTOS" als h2 in der Gliederung.
 */
.fall__galerie {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .5rem;
}
@media (min-width: 768px) {
  .fall__galerie { grid-template-columns: repeat(4, 1fr); gap: .75rem; }
  /* Das erste Bild groesser, damit das Raster nicht wie eine Kachelreihe
   * wirkt. */
  .fall__galerie img:first-child { grid-column: span 2; grid-row: span 2; }
}
.fall__galerie img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 8px;
}

/* ---- 6. Schluss ---- */
.fall__schluss-inhalt { max-width: 40em; }
.fall__schluss-inhalt p { margin: 1rem 0 2rem; line-height: 1.65; color: var(--f-text); }
.fall__siegelzeile {
  margin-top: 1.75rem !important;
  font-size: var(--t-klein);
  color: var(--f-leise);
}

/* ---- Einsatzleiste, wenn es keine Kennzahlen gibt ----
 * Bewusst DEUTLICH kleiner gesetzt als die Kennzahlen. Einsatzfakten in
 * Kennzahlen-Typografie zu setzen waere eine optische Luege: Der Leser
 * liest grosse Ziffern als Ergebnis, auch wenn "Website und Social Media"
 * danebensteht.
 */
.fall__einsatz {
  margin: 0;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--f-linie);
}
@media (min-width: 768px) {
  .fall__einsatz { grid-template-columns: repeat(3, 1fr); gap: 0 2.5rem; }
}
.fall__einsatz-paar {
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--f-linie);
}
@media (min-width: 768px) {
  .fall__einsatz-paar { border-bottom: 0; }
}
.fall__einsatz dt {
  font-size: var(--t-marke);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--f-leise);
}
.fall__einsatz dd {
  margin: .35rem 0 0;
  font-size: var(--t-gross);
  line-height: 1.35;
  color: var(--f-hell);
}

/* ---- Weitere Filme ---- */
.fall__filmreihe { display: grid; gap: 1.75rem; }
@media (min-width: 768px) {
  .fall__filmreihe { grid-template-columns: repeat(2, 1fr); gap: 2rem; }
}
.fall__nebenfilm { margin: 0; }
.fall__nebenfilm figcaption { margin-top: .75rem; }
.fall__nebenfilm-titel { display: block; font-weight: 700; font-size: var(--t-grund); }
.fall__nebenfilm-text {
  display: block;
  margin-top: .2rem;
  font-size: var(--t-klein);
  line-height: 1.5;
  color: var(--f-matt);
}
.fall__weitere { padding-block: 3.5rem; }
@media (min-width: 768px) { .fall__weitere { padding-block: 4.5rem; } }

/* Einsatzleiste als zweite Reihe unter den Kennzahlen: weniger Abstand
 * nach oben, damit beide als ein Block gelesen werden. */
.fall__beweis--zweit { padding-top: 0 !important; }

/* Werte wie "28 bis 30" sind keine kurze Ziffer. In der vollen Groesse
 * brechen sie mitten im Ausdruck um und lesen sich als zwei Zeilen.
 * Kleiner gesetzt und gegen den Umbruch gesichert. */
.fall__zahl-wert--lang {
  font-size: clamp(2.2rem, 4.2vw, 3.4rem);
  text-wrap: nowrap;
}

/* ---- Einsatzgebiete ----
 * Wiederkehrendes Element auf allen Fallstudien: gleiche Namen, gleiche
 * Farben, damit man sie nach der zweiten Seite wiedererkennt.
 *
 * Bewusst KEINE Kaesten mit runden Ecken, keine Farbpunkte und keine
 * bunten Kanalfarben. Beides ist der Vorlagen-Look, den die Regel
 * ausschliesst. Stattdessen dasselbe Muster wie bei den uebrigen
 * Spaltenkoepfen der Seite: eine rote Oberkante, sonst nur Typo.
 */
.fall__gebiete {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.5rem 2rem;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
}
.fall__gebiet {
  border-top: 2px solid var(--main-red);
  padding-top: .9rem;
}
.fall__gebiet-name {
  display: block;
  font-size: var(--t-grund);
  font-weight: 700;
  line-height: 1.25;
  color: var(--f-hell);
}
.fall__gebiet-detail {
  display: block;
  margin-top: .3rem;
  font-size: var(--t-klein);
  line-height: 1.45;
  color: var(--f-matt);
}


/* Faelle ohne Stream-Video: einspaltiger Kopf, sonst klafft rechts eine
 * Luecke. Betrifft derzeit All Seasons TikTok, dort liegen die Clips nur
 * als selbst gehostete MP4 aus dem Webflow-Export vor. */
@media (min-width: 1200px) {
  .fall__kopf-raster--ohnefilm { grid-template-columns: minmax(0, 46em); }
}