/* Reportagenseite: Kopf, Einstieg, Moment, Orte, Weiter.
   Masse und Verhaeltnisse eins zu eins aus dem Entwurf. */

/* ---- Kopf ----
   Hell, kein Vollbild: Der Text steht ueber dem Bild, nicht darauf. Das
   unterscheidet die Reportagenseite von Orts- und Locationseiten. */
.co-rkopf {
  position: relative;
  min-height: 100svh;
  display: grid; grid-template-rows: 1fr auto;
  gap: clamp(24px, 4vh, 44px);
  padding: clamp(100px, 15vh, 150px) var(--co-rand) clamp(36px, 5vh, 56px);
  background: var(--co-sand, #F4ECE5);
  color: var(--co-tinte, #1B1A19);
}
.co-rkopf__rand {
  position: absolute; left: clamp(6px, 1.4vw, 22px); top: 50%;
  transform: translateY(-50%) rotate(180deg);
  writing-mode: vertical-rl;
  font-family: var(--co-sans, 'Manrope', sans-serif);
  font-size: 10px; letter-spacing: .34em; text-transform: uppercase;
  color: var(--co-ton, #C9AE9B); white-space: nowrap; pointer-events: none;
  /* Etwas fetter: Bei dieser Groesse und Laufweite wirkt Gewicht 300 auf
     Sand fast wie ein Schatten. */
  font-weight: 600;
}
.co-rkopf__oben {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: clamp(24px, 4vw, 64px);
  align-items: end;
}
.co-rkopf__name { min-width: 0; }
.co-rkopf__schreib {
  font-family: var(--co-schreib, 'Alex Brush', cursive);
  font-size: clamp(32px, 3.6vw, 54px); line-height: 1;
  color: var(--co-akzent, #8C6F5C);
}
/* Namen werden nie mitten im Wort getrennt. „Ti / m“ waere ein Fehler, den man
   nicht wieder vergisst - deshalb hier ausdruecklich keine Worttrennung und kein
   overflow-wrap. Passt ein Name nicht, wird er kleiner, nicht zerschnitten. */
.co-rkopf__h1 {
  font-family: var(--co-serif, 'Gilda Display', serif);
  font-weight: 400; font-size: clamp(38px, 7vw, 132px);
  line-height: .95; letter-spacing: -.03em;
  margin: 10px 0 0;
  text-wrap: balance;
  overflow-wrap: normal;
  word-break: keep-all;
  hyphens: none;
}
/* Jede Zeile ein eigener Block: Der Umbruch steht damit fest und haengt nicht
   mehr an der Laenge der Namen. */
.co-rkopf__zeile { display: block; }

/* Das Et-Zeichen zwischen den Namen, in Handschrift und im Akzentton.
   Etwas groesser als das Wort „und“ es war: Ein & wirkt bei gleicher Groesse
   kleiner, weil es schmaler baut. */
.co-rkopf__und {
  font-family: var(--co-schreib, 'Alex Brush', cursive);
  font-size: .74em; letter-spacing: 0;
  color: var(--co-akzent, #8C6F5C);
  /* Steht es vorn in der Zeile, braucht es rechts Luft und links keine. */
  padding: 0 .12em 0 0;
}
.co-rkopf__rechts {
  display: flex; flex-direction: column; gap: 16px;
  justify-self: end; max-width: 44ch;
  padding-bottom: clamp(6px, 1.2vw, 18px);
}
.co-rkopf__satz {
  font-family: var(--co-serif, 'Gilda Display', serif);
  font-size: clamp(19px, 1.7vw, 24px); line-height: 1.45;
  margin: 0; text-wrap: pretty;
}
.co-rkopf__daten {
  display: flex; gap: 18px 26px; flex-wrap: wrap;
  font-family: var(--co-sans, 'Manrope', sans-serif);
  font-size: 10px; letter-spacing: .22em; text-transform: uppercase;
  padding-top: 14px; border-top: 1px solid var(--co-ton, #C9AE9B);
  color: var(--co-akzent, #8C6F5C);
}
.co-rkopf__daten a {
  color: var(--co-tinte, #1B1A19); text-decoration: none;
  border-bottom: 1px solid var(--co-ton, #C9AE9B); padding-bottom: 2px;
  transition: border-color .3s ease;
}
.co-rkopf__daten a:hover { border-color: var(--co-akzent, #8C6F5C); }
/* Zwei Bilder nebeneinander, gleich gross, wie im Kopf der Ortsseiten. */
.co-rkopf__bilder {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(10px, 1.4vw, 18px);
  max-height: 60svh;
}
.co-rkopf__bild {
  position: relative; margin: 0;
  aspect-ratio: 3 / 2; overflow: hidden;
  background: var(--co-sand-warm, #EADBCF);
}
.co-rkopf__bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---- Einstieg ---- */
.co-rein { padding: var(--co-sektion) var(--co-rand); color: var(--co-tinte, #1B1A19); }
.co-rein__innen {
  max-width: 1200px; margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
  gap: clamp(32px, 5vw, 80px); align-items: start;
}
.co-rein__nummer {
  font-family: var(--co-serif, 'Gilda Display', serif);
  font-size: clamp(44px, 5vw, 72px); line-height: 1.1;
  color: transparent; -webkit-text-stroke: 1px var(--co-akzent, #8C6F5C);
}
.co-rein__titel {
  font-family: var(--co-serif, 'Gilda Display', serif);
  font-weight: 400; font-size: clamp(32px, 4vw, 58px);
  line-height: 1.05; margin: 4px 0 0; text-wrap: balance;
}
.co-rein__rechts { display: flex; flex-direction: column; gap: 28px; }
.co-rein__text {
  font-family: var(--co-sans, 'Manrope', sans-serif);
  font-size: 17px; line-height: 1.8; font-weight: 300;
  color: var(--co-tinte-2, #3D3835);
  display: flex; flex-direction: column; gap: 14px;
}
.co-rein__text p { margin: 0; text-wrap: pretty; }
/* Drei Kacheln nebeneinander, mit Passepartout wie ueberall. */
.co-rein__zahlen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.co-rein__kachel {
  background: var(--co-karte-grund, #F4ECE5);
  padding: 20px 18px 22px;
  outline: 1px solid var(--co-ton, #C9AE9B); outline-offset: -9px;
}
.co-rein__zahl { font-family: var(--co-serif, 'Gilda Display', serif); font-size: clamp(28px, 2.6vw, 38px); line-height: 1; }
.co-rein__label {
  font-family: var(--co-sans, 'Manrope', sans-serif);
  font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--co-akzent, #8C6F5C); margin-top: 8px;
}

/* ---- Moment ---- */
.co-rmom {
  background: var(--co-tief, #141210);
  color: var(--co-sand, #F4ECE5);
  padding: var(--co-sektion) var(--co-rand);
  border-top: 1px solid rgba(201, 174, 155, .18);
}
.co-rmom__innen { max-width: 880px; margin: 0 auto; text-align: center; }
.co-rmom__label {
  font-family: var(--co-sans, 'Manrope', sans-serif);
  font-size: 10px; letter-spacing: .24em; text-transform: uppercase;
  color: var(--co-akzent, #8C6F5C); margin-bottom: 24px;
}
.co-rmom__satz {
  font-family: var(--co-serif, 'Gilda Display', serif);
  font-size: clamp(28px, 3.6vw, 54px); line-height: 1.25;
  margin: 0; text-wrap: balance;
}
.co-rmom__schreib {
  font-family: var(--co-schreib, 'Alex Brush', cursive);
  font-size: clamp(30px, 3vw, 44px); line-height: 1;
  color: var(--co-ton, #C9AE9B); margin-top: 28px;
}

/* ---- Orte des Tages ---- */
.co-rorte { padding: var(--co-sektion) var(--co-rand); color: var(--co-tinte, #1B1A19); }
.co-rorte__innen { max-width: 1200px; margin: 0 auto; }
.co-rorte__kopf {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
  gap: clamp(24px, 4vw, 64px); align-items: end;
  margin-bottom: clamp(24px, 3.4vw, 48px);
}
.co-rorte__nummer {
  font-family: var(--co-serif, 'Gilda Display', serif);
  font-size: clamp(44px, 5vw, 72px); line-height: 1.1;
  color: transparent; -webkit-text-stroke: 1px var(--co-akzent, #8C6F5C);
}
.co-rorte__titel {
  font-family: var(--co-serif, 'Gilda Display', serif);
  font-weight: 400; font-size: clamp(34px, 4.4vw, 64px);
  line-height: 1.05; margin: 4px 0 0;
}
.co-rorte__text {
  font-family: var(--co-sans, 'Manrope', sans-serif);
  font-size: 16px; line-height: 1.8; font-weight: 300;
  color: var(--co-tinte-2, #3D3835); margin: 0; max-width: 46ch;
}
/* Zwei Karten nebeneinander erst ab genug Breite. Darunter untereinander, damit
   die Textspalte nicht auf Handbreite zusammenschrumpft. */
.co-rorte__raster {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 520px), 1fr));
  gap: clamp(14px, 2vw, 24px);
}
/* Bild links, Text rechts. Beide Spalten sind gleich hoch: Das Bild bestimmt
   seine Hoehe nicht mehr ueber ein Seitenverhaeltnis, sondern fuellt die Karte.
   Vorher blieb unter dem Bild Leerraum, sobald der Text laenger war. */
.co-rorte__karte {
  background: var(--co-karte-grund, #EADBCF);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
  outline: 1px solid var(--co-ton, #C9AE9B); outline-offset: -9px;
  color: var(--co-tinte, #1B1A19); text-decoration: none;
  transition: outline-color .3s ease;
}
.co-rorte__karte:hover { outline-color: var(--co-akzent, #8C6F5C); }
.co-rorte__bild {
  position: relative; overflow: hidden;
  margin: 9px 0 9px 9px;
  /* Mindesthoehe, damit die Karte bei kurzem Text nicht flach wird. */
  min-height: 240px;
}
.co-rorte__bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.co-rorte__inhalt {
  padding: clamp(22px, 2.6vw, 36px);
  display: flex; flex-direction: column; gap: 10px; justify-content: center;
  /* Ohne das duerfen Kinder im Raster breiter werden als ihre Spalte. */
  min-width: 0;
}
.co-rorte__inhalt > * { min-width: 0; }
.co-rorte__label {
  font-family: var(--co-sans, 'Manrope', sans-serif);
  font-size: 10px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--co-akzent, #8C6F5C);
}
/* Lange Namen wie „Hochzeitsfotograf Ratingen“ sind breiter als die Textspalte.
   Sie duerfen weder ueber die Kante laufen noch mitten im Wort brechen: Deshalb
   Silbentrennung und ein Umbruch als letzte Rettung, bevor etwas herausragt. */
.co-rorte__name {
  font-family: var(--co-serif, 'Gilda Display', serif);
  font-size: clamp(22px, 2vw, 30px); line-height: 1.15;
  hyphens: auto;
  overflow-wrap: break-word;
  text-wrap: balance;
}
.co-rorte__unten {
  font-family: var(--co-sans, 'Manrope', sans-serif);
  font-size: 14px; font-weight: 300; color: var(--co-tinte-2, #3D3835);
}

/* ---- Weitere Reportagen ---- */
.co-rweiter { padding: var(--co-sektion) var(--co-rand); color: var(--co-tinte, #1B1A19); }
.co-rweiter__innen { max-width: 1200px; margin: 0 auto; }
.co-rweiter__kopf {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
  gap: clamp(24px, 4vw, 64px); align-items: end;
  margin-bottom: clamp(24px, 3.4vw, 48px);
}
.co-rweiter__schreib {
  font-family: var(--co-schreib, 'Alex Brush', cursive);
  font-size: clamp(30px, 3vw, 44px); line-height: 1;
  color: var(--co-akzent, #8C6F5C);
}
.co-rweiter__titel {
  font-family: var(--co-serif, 'Gilda Display', serif);
  font-weight: 400; font-size: clamp(34px, 4.4vw, 64px);
  line-height: 1.05; margin: 4px 0 0;
}
.co-rweiter__text {
  font-family: var(--co-sans, 'Manrope', sans-serif);
  font-size: 16px; line-height: 1.8; font-weight: 300;
  color: var(--co-tinte-2, #3D3835); margin: 0; max-width: 46ch;
}
/* Zwei Karten je Zeile: Mit Bild und Text nebeneinander braucht jede Karte mehr
   Breite als vorher. Drei nebeneinander wuerden beides zusammendruecken. */


@media (max-width: 760px) {
  /* Auf dem Handy stehen Bild und Text wieder untereinander. */
  /* Erst auf dem Handy untereinander, dann wieder mit festem Verhaeltnis. */
  .co-rorte__karte { grid-template-columns: minmax(0, 1fr); }
  .co-rorte__bild { aspect-ratio: 3 / 2; min-height: 0; margin: 9px 9px 0; }
}

@media (max-width: 900px) {
  .co-rkopf__rechts { justify-self: start; }
  /* Zwei Bilder bleiben auch schmal nebeneinander: Untereinander waere der Kopf
     doppelt so hoch und das Bild verlore seinen Zusammenhang. */
  .co-rkopf__bilder { max-height: none; gap: 8px; }
  .co-rkopf__rand { display: none; }
  .co-rein__zahlen { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .co-rein__kachel { padding: 16px 14px 18px; outline-offset: -7px; }
}

/* ---------- Vollbild-Kopf, nur auf dem Handy ----------
   Auf schmalen Schirmen wirkt ein bildschirmfuellendes Bild staerker als der
   zweispaltige Kopf: Zwei kleine Bilder nebeneinander verlieren dort ihre
   Wirkung. Am Rechner bleibt alles wie bisher. */
.co-rvoll { display: none; }

@media (max-width: 860px) {
  .co-rvoll {
    display: block; position: relative;
    /* Ausgangswert, bis das Skript in Pixeln nachmisst. Ohne das blitzt beim
       Ein- und Ausfahren der Browserleisten die naechste Sektion unten auf. */
    height: 100svh; min-height: 520px;
    overflow: hidden; background: var(--co-tief, #141210);
  }
  .co-rvoll__bild {
    position: absolute; inset: 0;
    width: 100%; height: 100%; object-fit: cover; display: block;
  }
  /* Zwei Verlaeufe: oben fuer die Kopfzeile, unten fuer den Text. */
  .co-rvoll__schleier {
    position: absolute; inset: 0;
    background:
      linear-gradient(to bottom, rgba(20,18,16,.45) 0%, rgba(20,18,16,0) 28%),
      linear-gradient(to top, rgba(20,18,16,.72) 0%, rgba(20,18,16,.2) 42%, rgba(20,18,16,0) 62%);
  }
  .co-rvoll__text {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: 0 var(--co-rand) clamp(48px, 12vh, 96px);
    color: var(--co-sand, #F4ECE5); text-align: center;
  }
  .co-rvoll__schreib {
    font-family: var(--co-schreib, 'Alex Brush', cursive);
    font-size: clamp(30px, 9vw, 44px); line-height: 1;
    color: var(--co-sand, #F4ECE5); opacity: .92;
  }
  .co-rvoll__name {
    font-family: var(--co-serif, 'Gilda Display', serif);
    font-size: clamp(44px, 13vw, 68px); line-height: 1.02;
    letter-spacing: -.02em; margin-top: 8px;
    text-shadow: 0 2px 30px rgba(20, 18, 16, .45);
  }
  .co-rvoll__name .co-rkopf__zeile { display: block; }
  .co-rvoll__name .co-rkopf__und {
    font-family: var(--co-schreib, 'Alex Brush', cursive);
    font-size: .8em; color: var(--co-ton, #C9AE9B); padding-right: .12em;
  }
  .co-rvoll__daten {
    margin-top: 18px; padding-top: 16px;
    border-top: 1px solid rgba(244, 236, 229, .35);
    display: inline-block;
    font-family: var(--co-sans, 'Manrope', sans-serif);
    font-size: 10px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase;
    color: var(--co-sand, #F4ECE5);
  }
  /* Ein schmaler Strich als Hinweis, dass es weitergeht. */
  .co-rvoll__pfeil {
    display: block; width: 1px; height: 34px; margin: 22px auto 0;
    background: linear-gradient(to bottom, rgba(244,236,229,.9), rgba(244,236,229,0));
  }

  /* Der helle Kopf entfaellt, wenn das Vollbild laeuft. */
  .co-rkopf--handyaus { display: none; }
}