/* CO Reportagen - Variante "Kapitel" nach Chris' Entwurf.
   Breites Bild links, schmale Textspalte rechts, horizontal blaetterbar.
   Werte aus der Vorlage uebernommen, nur fuer kleinere Fenster ergaenzt. */

.co-kap {
  position: relative;
  color: var(--co-tinte, #1B1A19);
  padding: var(--co-sektion) 0;
  overflow: hidden;
}

/* ---------- Kopf ---------- */
.co-kap__kopf {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 32px;
  padding: 0 clamp(20px, 5vw, 64px);
  margin-bottom: var(--co-kopf);
}
.co-kap__schreib {
  font-family: var(--co-schreib, 'Alex Brush', cursive);
  font-size: clamp(30px, 3.4vw, 48px);
  color: var(--co-akzent, #8C6F5C);
  line-height: 1;
}
.co-kap__titel {
  font-family: var(--co-serif, 'Gilda Display', serif);
  font-weight: 400;
  font-size: clamp(34px, 5vw, 72px);
  line-height: 1;
  letter-spacing: -.02em;
  margin: 6px 0 0;
}
.co-kap__kopf-rechts {
  display: flex; flex-direction: column; align-items: flex-end; gap: 14px;
}
.co-kap__text {
  max-width: 34ch; text-align: right; margin: 0;
  font-family: var(--co-sans, 'Manrope', sans-serif);
  font-size: clamp(14px, 1.1vw, 16px); line-height: 1.7; font-weight: 300;
  color: var(--co-tinte-2, #3D3835);
}
.co-kap__pfeile { display: flex; gap: 8px; }
.co-kap__pfeil {
  all: unset; cursor: pointer;
  width: 48px; height: 48px; border-radius: 50%;
  border: 1px solid rgba(27, 26, 25, .3);
  display: grid; place-items: center; font-size: 18px;
  transition: background .3s ease, color .3s ease, border-color .3s ease;
}
.co-kap__pfeil:hover {
  background: var(--co-tinte, #1B1A19);
  color: var(--co-sand, #F4ECE5);
  border-color: var(--co-tinte, #1B1A19);
}

/* ---------- Kapitel ---------- */
.co-kap__reihe {
  display: flex;
  gap: clamp(20px, 2.6vw, 40px);
  overflow-x: auto;
  padding: 0 clamp(20px, 5vw, 64px) 24px;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  cursor: grab; user-select: none;
  /* Kein weiches Scrollen: Am Trackpad wirkt es wie Widerstand. Die Pfeile
     setzen es fuer ihren Sprung selbst. */
  scroll-behavior: auto;
}
.co-kap__reihe::-webkit-scrollbar { display: none; }
.co-kap__reihe:active { cursor: grabbing; }

.co-kap__karte {
  flex: 0 0 min(880px, 88vw);
  scroll-snap-align: start;
  /* Mindesthoehe, damit die Karte bei kurzem Text nicht flach wird -
     sie entspricht etwa 3:2 auf der Bildspalte. */
  min-height: clamp(300px, 26vw, 390px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(240px, 22vw, 300px);
  /* Der Untergrund wechselt durch das Zebra - die Karte muss sich davon immer
     absetzen. Feste Farbe waere auf einer der beiden Sektionsfarben unsichtbar. */
  background: var(--co-karte, #EADBCF);
  border: 1px solid var(--co-karte-kante, rgba(27, 26, 25, .08));
  box-shadow: 0 24px 48px -36px rgba(27, 26, 25, .38);
  color: inherit; text-decoration: none;
  transition: transform .5s ease;
}
.co-kap__karte:hover { transform: translateY(-6px); }

/* Das Bild fuellt die volle Kartenhoehe. Mit festem 3:2 richtete sich die
   Kartenhoehe nach der Textspalte - war der Text laenger, blieb unter dem Bild
   eine leere Flaeche stehen. */
.co-kap__bild {
  position: relative; display: block;
  height: 100%;
  overflow: hidden;
}
.co-kap__bild img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 1.4s cubic-bezier(.2, .8, .2, 1);
}
.co-kap__karte:hover .co-kap__bild img { transform: scale(1.04); }
.co-kap__nummer {
  position: absolute; top: 20px; left: 22px; z-index: 2;
  font-family: var(--co-sans, 'Manrope', sans-serif);
  font-size: 11px; letter-spacing: .24em; text-transform: uppercase;
  color: var(--co-sand, #F4ECE5);
  text-shadow: 0 1px 10px rgba(0, 0, 0, .55);
}

.co-kap__spalte {
  display: flex; flex-direction: column; justify-content: space-between;
  gap: 20px;
  padding: clamp(22px, 2.4vw, 32px) clamp(20px, 2.2vw, 30px);
}
.co-kap__oben { display: block; }
.co-kap__namen {
  display: block;
  font-family: var(--co-schreib, 'Alex Brush', cursive);
  font-size: clamp(32px, 3.2vw, 44px); line-height: 1;
}
.co-kap__ort {
  display: block; margin-top: 10px;
  font-family: var(--co-sans, 'Manrope', sans-serif);
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--co-akzent, #8C6F5C);
}
.co-kap__satz {
  font-family: var(--co-serif, 'Gilda Display', serif);
  font-size: clamp(18px, 1.6vw, 22px); line-height: 1.35;
  text-wrap: pretty;
}
.co-kap__link {
  align-self: flex-start;
  font-family: var(--co-sans, 'Manrope', sans-serif);
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  border-bottom: 1px solid currentColor; padding-bottom: 3px;
  transition: color .3s ease;
}
.co-kap__karte:hover .co-kap__link { color: var(--co-akzent, #8C6F5C); }

/* ---------- Fortschritt ---------- */
.co-kap__leiste {
  padding: 0 clamp(20px, 5vw, 64px);
  display: flex; align-items: center; gap: 24px;
  margin-top: 12px;
}
.co-kap__zahl {
  font-family: var(--co-serif, 'Gilda Display', serif);
  font-size: 20px; white-space: nowrap;
}
.co-kap__trenner { color: var(--co-akzent, #8C6F5C); }
.co-kap__schiene { flex: 1; height: 1px; background: rgba(27, 26, 25, .18); position: relative; }
.co-kap__balken {
  position: absolute; left: 0; top: -1px; height: 3px; width: 0;
  background: var(--co-tinte, #1B1A19);
  transition: width .2s;
}
.co-kap__hinweis {
  font-family: var(--co-sans, 'Manrope', sans-serif);
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--co-akzent, #8C6F5C); white-space: nowrap;
}

.co-kap__leer {
  text-align: center; color: var(--co-akzent, #8C6F5C);
  font-family: var(--co-sans, 'Manrope', sans-serif);
}

@media (max-width: 900px) {
  .co-kap__kopf { grid-template-columns: minmax(0, 1fr); }
  .co-kap__kopf-rechts { align-items: flex-start; }
  .co-kap__text { text-align: left; }
  .co-kap__karte { grid-template-columns: minmax(0, 1fr); flex-basis: 86vw; min-height: 0; }
  .co-kap__bild { aspect-ratio: 3 / 2; height: auto; }
  .co-kap__hinweis { display: none; }
}

/* Der Hinweis ueber dem Weg: leiser als der Weg selbst, aber lesbar. */
.co-kap__auswahl {
  margin: clamp(28px, 3.5vw, 48px) auto 0;
  max-width: 46ch;
  text-align: center;
  font-family: var(--co-serif, 'Gilda Display', serif);
  font-size: clamp(15px, 1.15vw, 18px);
  line-height: 1.6;
  color: var(--co-akzent, #8C6F5C);
}
/* Steht der Satz darueber, rueckt der Weg naeher heran - beide gehoeren
   zusammen. */
.co-kap__auswahl + .co-kap__alle { margin-top: clamp(14px, 1.6vw, 22px); }

/* ---------- Der Weg zu allen Reportagen ----------

   Hier laufen nur die markierten Hochzeiten. Wer durchgeblaettert hat, will
   danach die ganze Liste - deshalb steht der Weg am Ende der Reihe, nicht
   oben bei der Ueberschrift. */
.co-kap__alle {
  /* Mittig unter der Reihe - der Weg gehoert keiner Spalte, er schliesst die
     Sektion ab. "width: fit-content" mit automatischen Raendern zentriert das
     Element, ohne dass die Linie darunter ueber die ganze Breite laeuft. */
  display: flex; align-items: center; justify-content: center; gap: 12px;
  width: fit-content;
  margin: clamp(28px, 3.5vw, 48px) auto 0;
  padding-bottom: 6px;
  font-family: var(--co-sans, 'Manrope', sans-serif);
  font-size: 11px; letter-spacing: .26em; text-transform: uppercase; font-weight: 600;
  color: var(--co-tinte, #1B1A19);
  text-decoration: none;
  border-bottom: 1px solid var(--co-ton, #C9AE9B);
  transition: color .3s, border-color .3s, gap .3s;
}
.co-kap__alle:hover {
  color: var(--co-akzent, #8C6F5C);
  border-bottom-color: var(--co-akzent, #8C6F5C);
  gap: 18px;
}
.co-kap__alle-pfeil { transition: transform .3s; }
.co-kap__alle:hover .co-kap__alle-pfeil { transform: translateX(3px); }