/* ============================================================
   cd_fallstudie — Fallstudien-Kapitel
   ============================================================
   Links die Kapitelfolge mit der Leistungsliste, rechts eine
   mitlaufende Faktenkarte und die Seitenbox.

   Knoepfe und Kicker kommen aus komponenten.css (.cd-knopf,
   .cd-kicker, .cd-nummer). Hier steht nur, was die Fallstudie
   ausmacht.

   Regeln dieser Datei:
   - Farben, Abstaende und Radien ausschliesslich als Token.
   - Kein !important.
   - Im Raster minmax(0, 1fr) statt 1fr — eine lange Webadresse
     in der Faktenkarte sprengt sonst die Spalte.
   ============================================================ */

/* ------------------------------------------------------------
   Raster
   ------------------------------------------------------------
   Der Entwurf steht auf 1.35fr zu .65fr. Ohne verknuepfte
   Referenz entfaellt die Faktenkarte und die Kapitel laufen ueber
   die volle Breite — eine leere zweite Spalte waere ein Loch.
   ------------------------------------------------------------ */
.cd-fallstudie__raster {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--cd-a8);
  align-items: start;
}

.cd-fallstudie--mit-karte .cd-fallstudie__raster {
  grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr);
}

.cd-fallstudie__haupt,
.cd-fallstudie__seite {
  min-inline-size: 0;
}

.cd-fallstudie__titel {
  margin-block-start: var(--cd-a3);
}

.cd-fallstudie__unterzeile {
  margin-block-start: var(--cd-a3);
  font-size: var(--cd-gr-gross);
  color: var(--cd-text-2);
}

/* ------------------------------------------------------------
   Kapitel
   ------------------------------------------------------------
   Eine geordnete Liste ohne sichtbare Zahlen: die Reihenfolge
   traegt inhaltlich (Ausgangslage, Umsetzung, Ergebnis), aber die
   Kapitel benennen sich ueber ihren Kicker und nicht ueber eine
   Nummer.
   ------------------------------------------------------------ */
.cd-fallstudie__kapitel {
  display: grid;
  gap: var(--cd-a7);
  margin-block-start: var(--cd-a7);
}

.cd-fallstudie__kapitelpunkt {
  min-inline-size: 0;
}

.cd-fallstudie__kapiteltitel {
  margin-block-start: var(--cd-a3);
  font-size: var(--cd-gr-h2);
  font-weight: 700;
  letter-spacing: -.026em;
}

.cd-fallstudie__kapiteltext {
  margin-block-start: var(--cd-a4);
  font-size: var(--cd-gr-gross);
  line-height: var(--cd-zeile-text);
  color: var(--cd-text-2);
}

/* ------------------------------------------------------------
   Leistungen
   ------------------------------------------------------------
   Zweispaltige Liste aus haarfeinen Fugen: die Trennlinien sind
   der Hintergrund, die Punkte stehen als weisse Flaechen darauf.
   ------------------------------------------------------------ */
.cd-fallstudie__leistungen {
  margin-block-start: var(--cd-a8);
  padding-block-start: var(--cd-a6);
  border-block-start: 1px solid var(--cd-linie-2);
}

.cd-fallstudie__leistungstitel {
  font-weight: 500;
  margin-block-end: var(--cd-a5);
}

.cd-fallstudie__leistungsliste {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--cd-linie-2);
  border: 1px solid var(--cd-linie-2);
}

.cd-fallstudie__leistung {
  display: flex;
  gap: var(--cd-a3);
  padding: var(--cd-a4) var(--cd-a5);
  background: var(--cd-weiss);
  font-size: var(--cd-gr-klein);
  line-height: var(--cd-zeile-text);
  color: var(--cd-dunkel);
}

/* Der Pfeil steht als Zeichen im Stylesheet und nicht im Markup —
   im Markup landete er im vorgelesenen Text der Leistung. */
.cd-fallstudie__leistung::before {
  content: "\2192";
  flex: 0 0 auto;
  font-family: var(--cd-schrift-mono);
  color: var(--cd-rot);
}

/* ------------------------------------------------------------
   Faktenkarte
   ------------------------------------------------------------
   Sie laeuft mit. Der Versatz haelt sie von der festen Kopfleiste
   fern — sonst schoebe sich der Kartenkopf darunter.
   ------------------------------------------------------------ */
.cd-fallstudie__seite {
  position: sticky;
  inset-block-start: calc(var(--cd-kopf-gesamt) + var(--cd-a5));
}

.cd-fallstudie__fakten {
  border: 1px solid var(--cd-linie-2);
}

.cd-fallstudie__faktentitel {
  padding: var(--cd-a5) var(--cd-a5);
  background: var(--cd-tinte);
  color: var(--cd-weiss);
  font-family: var(--cd-schrift-mono);
  font-size: var(--cd-gr-mikro);
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.cd-fallstudie__marke {
  display: flex;
  align-items: center;
  justify-content: center;
  min-block-size: 96px;
  padding: var(--cd-a5);
  background: var(--cd-weiss);
  border-block-end: 1px solid var(--cd-linie-2);
}

/* Feste Hoehe, freie Breite: Kundenlogos kommen in jedem
   Seitenverhaeltnis. Eine feste Breite wuerde hohe Logos winzig
   und breite Logos riesig machen. */
.cd-fallstudie__logo {
  display: block;
  inline-size: auto;
  max-inline-size: 100%;
  block-size: 52px;
  object-fit: contain;
}

.cd-fallstudie__wortmarke {
  font-family: var(--cd-schrift-display);
  font-size: var(--cd-gr-h3);
  font-weight: 700;
  letter-spacing: -.03em;
  color: var(--cd-dunkel);
}

.cd-fallstudie__eckdaten {
  display: grid;
  gap: 1px;
  background: var(--cd-linie-2);
}

.cd-fallstudie__eckdatum {
  padding: var(--cd-a4) var(--cd-a5);
  background: var(--cd-weiss);
}

.cd-fallstudie__eckdatum dt {
  font-family: var(--cd-schrift-mono);
  font-size: var(--cd-gr-mikro);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cd-text-3);
}

.cd-fallstudie__eckdatum dd {
  margin: 0;
  margin-block-start: var(--cd-a1);
  font-size: var(--cd-gr-text);
  line-height: var(--cd-zeile-text);
  color: var(--cd-dunkel);
}

.cd-fallstudie__website {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cd-a4);
  margin-block-start: 1px;
  padding: var(--cd-a4) var(--cd-a5);
  background: var(--cd-weiss);
  border-block-start: 1px solid var(--cd-linie-2);
  color: var(--cd-dunkel);
  transition: background var(--cd-zeit) ease, color var(--cd-zeit) ease;
}
.cd-fallstudie__website:hover {
  background: var(--cd-flaeche-1);
  color: var(--cd-rot);
}

/* Die Adresse kann laenger sein als die Spalte. Sie bricht am
   Wortende und notfalls mitten im Wort — abgeschnitten waere sie
   nicht mehr pruefbar. */
.cd-fallstudie__webadresse {
  display: block;
  margin-block-start: var(--cd-a1);
  font-size: var(--cd-gr-text);
  line-height: var(--cd-zeile-text);
  overflow-wrap: anywhere;
}

.cd-fallstudie__website .cd-knopf__pfeil {
  flex: 0 0 auto;
  color: var(--cd-rot);
}

/* ------------------------------------------------------------
   Seitenbox
   ------------------------------------------------------------ */
.cd-fallstudie__box {
  margin-block-start: var(--cd-a4);
  padding: var(--cd-a5);
  background: var(--cd-flaeche-2);
  border: 1px solid var(--cd-linie-2);
}

.cd-fallstudie__boxtext {
  font-size: var(--cd-gr-text);
  line-height: var(--cd-zeile-text);
  color: var(--cd-dunkel);
}

.cd-fallstudie__boxknopf {
  display: flex;
  justify-content: space-between;
  inline-size: 100%;
  margin-block-start: var(--cd-a4);
}

/* ------------------------------------------------------------
   Schmale Fenster
   ------------------------------------------------------------
   Unter 1100 px steht die Faktenkarte unter den Kapiteln. Das
   Mitlaufen wird dabei abgeschaltet: eine klebende Karte am Ende
   der Seite haette nichts, an dem sie kleben koennte.
   ------------------------------------------------------------ */
@media (max-width: 1100px) {
  .cd-fallstudie--mit-karte .cd-fallstudie__raster {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--cd-a7);
  }
  .cd-fallstudie__seite {
    position: static;
  }
}

@media (max-width: 700px) {
  .cd-fallstudie__leistungsliste {
    grid-template-columns: minmax(0, 1fr);
  }
  .cd-fallstudie__kapitel {
    gap: var(--cd-a6);
  }
  .cd-fallstudie__kapiteltitel {
    font-size: var(--cd-gr-h3);
  }
}