/* CO Botschaft - Vollbildtafeln, die durchwechseln. Werte aus der Vorlage. */

.co-botschaft {
  position: relative;
  height: 100vh;
  min-height: 620px;
  background: var(--co-tinte, #1B1A19);
  color: var(--co-sand, #F4ECE5);
  overflow: hidden;
  touch-action: pan-y;
  cursor: grab;
  user-select: none;
}
.co-botschaft:active { cursor: grabbing; }

.co-botschaft__buehne { position: absolute; inset: 0; }

.co-botschaft__bild {
  position: absolute; inset: 0;
  opacity: 0; visibility: hidden; transform: scale(1.06);
  transition: opacity 1.8s ease, transform 8s linear, visibility 0s linear 1.8s;
}
.co-botschaft__bild.is-an {
  opacity: 1; visibility: visible; transform: scale(1);
  transition: opacity 1.8s ease, transform 8s linear, visibility 0s;
}
.co-botschaft__bild img { width: 100%; height: 100%; object-fit: cover; display: block; }

.co-botschaft__schleier {
  position: absolute; inset: 0; pointer-events: none;
  /* Kraeftiger nach unten, damit der tiefer sitzende Text auf jedem Bild traegt. */
  background: linear-gradient(180deg, rgba(27,26,25,.18) 0%, rgba(27,26,25,.12) 38%, rgba(27,26,25,.52) 72%, rgba(27,26,25,.82) 100%);
}

.co-botschaft__mitte {
  position: absolute; inset: 0;
  /* Der Textblock sitzt bewusst im unteren Bereich statt mittig - in der Bildmitte
     lagen regelmaessig die Gesichter darunter. Die Bilder wechseln bei jedem Aufruf,
     eine mittige Position waere also immer ein Gluecksspiel. */
  display: grid;
  align-items: end;
  justify-items: center;
  padding: clamp(20px, 5vw, 64px);
  /* Der Abstand waechst mit der Hoehe des Bildschirms: 9 Prozent der Hoehe,
     mindestens 56 und hoechstens 130 Pixel. So steht der Block ueberall im
     selben Verhaeltnis ueber der Unterkante - fest gesetzte Pixel wirken auf
     einem hohen Monitor zu knapp und auf einem flachen zu weit. */
  padding-bottom: clamp(56px, 9vh, 130px);
}
.co-botschaft__buehne-text {
  position: relative;
  width: min(1100px, 100%);
  /* Bewusst niedrig: Die Tafeln liegen absolut darin und zentrieren sich in dieser
     Hoehe. Eine hohe Buehne zieht den Text wieder nach oben, egal wie der Rahmen
     ausgerichtet ist. */
  min-height: clamp(96px, 11vw, 150px);
}

.co-botschaft__tafel {
  position: absolute; inset: 0;
  display: grid;
  /* Beide Spalten gleich breit, damit der Trennstrich exakt in der Seitenmitte
     sitzt - der Faden der naechsten Sektion steht dort ebenfalls. Der Entwurf
     hatte links 1.1fr; das schob den Strich rund 26 Pixel nach rechts, und
     untereinander fiel die Abweichung sofort auf. */
  grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: end;
  opacity: 0; visibility: hidden; transform: translateY(18px);
  transition: opacity 1s ease .2s, transform 1.2s cubic-bezier(.2,.8,.2,1) .2s, visibility 0s linear 1.2s;
  pointer-events: none;
}
.co-botschaft__tafel.is-an {
  opacity: 1; visibility: visible; transform: translateY(0);
  transition: opacity 1s ease .2s, transform 1.2s cubic-bezier(.2,.8,.2,1) .2s, visibility 0s;
}

.co-botschaft__links { text-align: right; }
.co-botschaft__wort {
  font-family: var(--co-serif, 'Gilda Display', serif);
  font-weight: 400;
  /* Ein einzelnes Wort darf nicht getrennt werden - „Reportagen“ brach sonst
     als „Reporta-gen“ um. Statt zu trennen schrumpft die Schrift, bis das Wort
     in die Spalte passt. */
  font-size: clamp(28px, 4.2vw, 74px);
  line-height: 1;
  letter-spacing: .02em;
  text-transform: uppercase;
  overflow-wrap: normal;
  word-break: keep-all;
  hyphens: none;
  white-space: nowrap;
  text-shadow: 0 2px 30px rgba(0,0,0,.35);
}
.co-botschaft__kicker {
  font-family: var(--co-sans, 'Manrope', sans-serif);
  font-size: 11px; letter-spacing: .34em; text-transform: uppercase;
  color: var(--co-sand-warm, #EADBCF); margin-top: 14px;
}
.co-botschaft__strich { width: 1px; height: 100%; min-height: 120px; background: rgba(244,236,229,.6); }
.co-botschaft__zeile {
  font-family: var(--co-sans, 'Manrope', sans-serif);
  font-size: clamp(16px, 1.35vw, 20px); line-height: 1.7; font-weight: 300;
  margin: 0; max-width: 34ch;
  text-shadow: 0 1px 16px rgba(0,0,0,.45);
}

/* Nur noch die Striche, rechts unten - wie im Hero. */
.co-botschaft__fuss {
  position: absolute;
  right: clamp(20px, 5vw, 64px);
  bottom: clamp(20px, 4vh, 40px);
  display: flex; justify-content: flex-end; align-items: center;
}
.co-botschaft__marke {
  font-family: var(--co-sans, 'Manrope', sans-serif);
  font-size: 11px; letter-spacing: .24em; text-transform: uppercase;
  color: var(--co-sand-warm, #EADBCF);
}
.co-botschaft__nav { display: flex; align-items: center; }
.co-botschaft__zahl { font-family: var(--co-serif, 'Gilda Display', serif); font-size: 18px; letter-spacing: .04em; }
.co-botschaft__trenner { color: var(--co-ton, #C9AE9B); }
.co-botschaft__balken { display: flex; gap: 6px; }
/* Dieselben Striche wie im Hero: gleiche Breite, gleiche Hoehe, gleicher
   Abstand - nur anklickbar. */
.co-botschaft__punkt {
  all: unset; cursor: pointer;
  width: 14px; height: 1px;
  background: var(--co-sand, #F4ECE5); opacity: .4;
  transition: opacity .9s ease;
}
.co-botschaft__punkt.is-an { opacity: 1; }

@media (max-width: 900px) {
  .co-botschaft__tafel {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    align-content: center;
    text-align: center;
  }
  .co-botschaft__links { text-align: center; }
  .co-botschaft__strich { width: 60px; height: 1px; min-height: 0; margin: 0 auto; }
  .co-botschaft__zeile { max-width: none; margin: 0 auto; }
  .co-botschaft__marke { display: none; }
  .co-botschaft__fuss { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .co-botschaft__bild, .co-botschaft__tafel { transition: opacity .4s ease, visibility 0s; transform: none; }
}

@media (max-width: 640px) {
  /* Hier ist die Spalte zu schmal fuer ein langes Wort in einer Zeile: Umbruch
     zwischen Woertern erlaubt, Trennung im Wort weiterhin nicht. */
  .co-botschaft__wort { white-space: normal; font-size: clamp(26px, 8vw, 44px); }
}

/* ---------- Senkrecht am linken Rand ----------

   Dieselbe Behandlung wie im Hero: klein, weit gesperrt, in Versalien. So
   sprechen die beiden Vollbild-Sektionen dieselbe Sprache. */
.co-botschaft__rand {
  position: absolute; z-index: 20;
  left: clamp(10px, 1.6vw, 26px); 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; font-weight: 600;
  color: var(--co-sand, #F4ECE5);
  white-space: nowrap; pointer-events: none;
  /* Kraeftiger als im Hero: Die Bilder hier sind heller, und es gibt keinen
     Verlauf an dieser Stelle. */
  text-shadow: 0 1px 12px rgba(27, 26, 25, .85), 0 0 30px rgba(27, 26, 25, .55);
}

/* Die Zahlen sind weg - der Platz gehoert jetzt allein den Balken. */
.co-botschaft__zahl, .co-botschaft__trenner { display: none; }
.co-botschaft__marke { display: none; }

@media (max-width: 720px) {
  /* Auf dem Telefon ist am Rand kein Platz. */
  .co-botschaft__rand { display: none; }
}