/* CO Tagesablauf.

   Alle Farben kommen aus Variablen, die das Skript beim Scrollen setzt. Ohne
   Skript bleibt die Sektion hell und vollstaendig lesbar - der Farbverlauf ist
   Zugabe, keine Voraussetzung. */

/* Zwei Zustaende, dazwischen eine Ueberblendung. Beim Scrollen zurueck blendet
   die Seite genauso zurueck - deshalb steht der Uebergang auf der Sektion und
   nicht in einer Animation. */
.co-tag {
  position: relative;
  padding: var(--co-sektion) var(--co-rand) var(--co-sektion) var(--co-tag-spur);
  --co-tag-bg: var(--co-sand, #F4ECE5);
  --co-tag-fg: var(--co-tinte, #1B1A19);
  --co-tag-text: var(--co-tinte-2, #3D3835);
  --co-tag-label: var(--co-akzent, #8C6F5C);
  --co-tag-linie: var(--co-ton, #C9AE9B);
  --co-tag-slot: var(--co-sand-warm, #EADBCF);
  /* Die Achse der Zeitleiste. Linie und Gestirn beziehen sich auf denselben
     Wert, damit sie nicht auseinanderlaufen koennen. */
  /* Die Zeitspur: ein eigener Streifen links neben dem Inhalt. Linie, Sonne
     und Uhrzeit sitzen alle in seiner Mitte - deshalb koennen sie nicht mehr
     auseinanderlaufen, egal wie breit der Streifen auf einem Geraet ist.
     Der Inhalt beginnt genau dort, wo der Streifen endet. */
  --co-tag-spur: clamp(44px, 6vw, 96px);
  --co-tag-scheibe: 22px;
  background: var(--co-tag-bg);
  color: var(--co-tag-fg);
  transition: background .9s ease, color .9s ease;
}
.co-tag.is-nacht {
  --co-tag-bg: var(--co-tief, #141210);
  --co-tag-fg: var(--co-sand, #F4ECE5);
  --co-tag-text: var(--co-ton, #C9AE9B);
  --co-tag-label: var(--co-ton, #C9AE9B);
  --co-tag-linie: rgba(201, 174, 155, .25);
  --co-tag-slot: var(--co-tinte, #1B1A19);
}
/* Alles, was die Farbe mittraegt, blendet im selben Takt. */
.co-tag__rand, .co-tag__uhr, .co-tag__rolle, .co-tag__text, .co-tag__satz { transition: color .9s ease; }
.co-tag__leiste { transition: background .9s ease; }
.co-tag__abschnitt { transition: border-color .9s ease; }
.co-tag__platz { transition: background .9s ease; }
.co-tag__nummer { transition: -webkit-text-stroke-color .9s ease; }
.co-tag__innen { max-width: 1200px; margin: 0 auto; }

.co-tag__rand {
  position: absolute; right: clamp(6px, 1.4vw, 22px); top: var(--co-sektion);
  writing-mode: vertical-rl;
  font-family: var(--co-sans, 'Manrope', sans-serif);
  font-size: 10px; letter-spacing: .34em; text-transform: uppercase;
  color: var(--co-tag-label, #8C6F5C); 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;
}

/* ---- Zeitleiste ---- */
.co-tag__leiste {
  position: absolute; left: calc(var(--co-tag-spur) / 2);
  top: var(--co-sektion); bottom: var(--co-sektion);
  width: 1px; background: var(--co-tag-linie, #C9AE9B);
}
/* Das Gestirn bleibt auf halber Fensterhoehe stehen und laeuft mit. */
/* Die Huelle beginnt an der Sektionskante, nicht am Textrand. Damit ist der
   Bezug fuer das Gestirn derselbe wie fuer die Linie, und beide brauchen
   keinen Umrechnungswert mehr. */
/* Die Huelle hebt den Einzug auf und beginnt damit an der Sektionskante.
   So gilt fuer sie derselbe Nullpunkt wie fuer die Linie. */
.co-tag__mit {
  position: sticky; top: 50vh; height: 0; z-index: 3; pointer-events: none;
  margin-left: calc(-1 * var(--co-tag-spur));
}
/* Das Gestirn sitzt in der stickenden Huelle, die um den Seitenrand eingerueckt
   ist. Deshalb der Abzug: So liegt seine Mitte genau auf der Linie.
   Die halbe Scheibenbreite kommt dazu, weil translate erst danach greift. */
/* Die Scheibe liegt mit ihrer Mitte auf der Achse. Frueher wurde die ganze
   Gruppe zentriert - dadurch schob die Uhrzeit die Scheibe zur Seite, je
   nachdem wie breit sie gerade war. Jetzt wird nur die Scheibe gesetzt, die
   Uhrzeit haengt darunter. */
/* Sonne und Uhrzeit sitzen dicht an der Bildkante, nicht mittig in der Luecke:
   Optisch gehoeren sie zum Inhalt und nicht zum Rand. Der Wert haengt am
   Einzug, damit sie mitwandern, wenn er sich aendert. */
/* Genau in der Mitte der Spur, wie die Linie. */
.co-tag__gestirn {
  position: absolute;
  left: calc(var(--co-tag-spur) / 2);
  transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
/* Die Uhrzeit haengt mittig unter der Scheibe. Sie bekommt den Hintergrund der
   Sektion, damit der Strich hinter ihr verschwindet - sonst laeuft die Linie
   mitten durch die Ziffern. Der Innenabstand gibt ihr etwas Luft, die Farbe
   wechselt bei Nacht automatisch mit. */
.co-tag__uhr {
  margin-left: 0;
  background: var(--co-tag-bg, #F4ECE5);
  padding: 6px 2px;
  transition: background .9s ease, color .9s ease;
}
.co-tag__scheibe {
  position: relative; overflow: hidden;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--co-stern, #E2B33C);
  box-shadow: 0 0 0 6px rgba(226, 179, 60, .18), 0 0 24px rgba(226, 179, 60, .45);
  transition: background .6s ease, box-shadow .6s ease;
}
/* Der Biss macht aus der Sonne den Mond: Ein Kreis in Hintergrundfarbe faehrt
   ueber die Scheibe. */
.co-tag__biss {
  position: absolute; width: 18px; height: 18px; border-radius: 50%;
  background: var(--co-tag-bg, #F4ECE5);
  left: 40px; top: -3px;
  transition: left .8s cubic-bezier(.4, 0, .2, 1), background .6s ease;
}
.co-tag.is-nacht .co-tag__scheibe {
  background: var(--co-sand-warm, #EADBCF);
  box-shadow: 0 0 0 6px rgba(234, 219, 207, .10), 0 0 28px rgba(234, 219, 207, .22);
}
.co-tag.is-nacht .co-tag__biss { left: 9px; }

.co-tag__uhr {
  font-family: var(--co-serif, 'Gilda Display', serif);
  font-size: 12px; letter-spacing: .08em;
  writing-mode: vertical-rl;
  color: var(--co-tag-label, #8C6F5C);
  font-variant-numeric: tabular-nums;
  /* Etwas fetter: Bei dieser Groesse und Laufweite wirkt Gewicht 300 auf
     Sand fast wie ein Schatten. */
  font-weight: 600;
}

/* ---- Kopf ---- */
.co-tag__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(40px, 5vw, 72px);
}
.co-tag__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-tag-label, #8C6F5C);
}
.co-tag__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-tag__text {
  font-family: var(--co-sans, 'Manrope', sans-serif);
  font-size: clamp(15px, 1.15vw, 16px); line-height: 1.8; font-weight: 300;
  color: var(--co-tag-text, #3D3835); margin: 0; max-width: 46ch;
}

/* ---- Abschnitt ---- */
.co-tag__abschnitt {
  display: flex; flex-direction: column; gap: clamp(18px, 2.6vw, 32px);
  padding: clamp(28px, 4vw, 56px) 0;
  border-top: 1px solid var(--co-tag-linie, #C9AE9B);
}
.co-tag__zeile { display: flex; gap: 14px; align-items: baseline; flex-wrap: wrap; }
.co-tag__zeit {
  font-family: var(--co-serif, 'Gilda Display', serif);
  font-size: clamp(26px, 2.6vw, 36px); line-height: 1;
  font-variant-numeric: tabular-nums;
}
.co-tag__rolle {
  font-family: var(--co-sans, 'Manrope', sans-serif);
  font-size: 10px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--co-tag-label, #8C6F5C);
}
.co-tag__satz {
  font-family: var(--co-sans, 'Manrope', sans-serif);
  font-size: clamp(15px, 1.15vw, 16px); line-height: 1.8; font-weight: 300;
  color: var(--co-tag-text, #3D3835); margin: 0; max-width: 52ch;
}

/* ---- Bildplaetze ---- */
.co-tag__bilder { display: grid; gap: clamp(10px, 1.5vw, 20px); }
.co-tag__platz {
  position: relative; overflow: hidden; margin: 0;
  background: var(--co-tag-slot, #EADBCF);
}
.co-tag__platz img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: opacity .45s ease;
}
.co-tag__platz--gross,
.co-tag__platz--halb,
.co-tag__platz--neben { aspect-ratio: 3 / 2; }
.co-tag__platz--weit  { aspect-ratio: 21 / 9; }
.co-tag__platz--klein { aspect-ratio: auto; }

/* Wo der Text steht, wechselt je Variante. Das ist der eigentliche Grund, warum
   zehn Abschnitte untereinander nicht wie ein Raster wirken. */

/* Variante 1: Text links, grosses Bild rechts daneben.
   Der Text sitzt auf der Unterkante des Bildes. Mittig zentriert schwebt er
   neben dem Bild, ohne Bezug zu einer Kante; buendig unten hat er eine. */
.co-tag__abschnitt--v1 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(20px, 3vw, 40px);
  align-items: end;
}
.co-tag__abschnitt--v1 .co-tag__bilder { grid-column: span 2; }

/* Variante 2: Zeile oben, darunter gross und zwei kleine gestapelt. */
.co-tag__abschnitt--v2 { display: flex; flex-direction: column; gap: clamp(20px, 3vw, 40px); }
.co-tag__abschnitt--v2 .co-tag__bilder { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.co-tag__stapel { display: grid; grid-template-rows: 1fr 1fr; gap: clamp(10px, 1.5vw, 20px); }

/* Variante 3: zwei Bilder oben, Text darunter. */
.co-tag__abschnitt--v3 { display: flex; flex-direction: column; gap: clamp(20px, 3vw, 40px); }
.co-tag__abschnitt--v3 .co-tag__bilder { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }

/* Variante 4: weites Bild oben, darunter Text links und ein Bild rechts.
   Auch hier steht der Text auf der Unterkante des Bildes. */
.co-tag__abschnitt--v4 { display: flex; flex-direction: column; gap: clamp(20px, 3vw, 40px); }
.co-tag__paar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(20px, 3vw, 40px);
  align-items: end;
}

/* Variante 5: Serie aus sechs Bildern in drei Zeilen. Zwei grosse aussen, vier
   kleinere dazwischen - der Wechsel der Groessen macht aus sechs Bildern eine
   Folge statt eines Rasters. */
.co-tag__abschnitt--v5 { display: flex; flex-direction: column; gap: clamp(20px, 3vw, 40px); }
.co-tag__serie {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(10px, 1.4vw, 18px);
}
/* In jeder Zeile dasselbe Verhaeltnis, sonst stehen Kanten allein. Die
   Abwechslung kommt aus der Anzahl je Zeile - und daraus, dass die drei Folgen
   sie unterschiedlich anordnen.

   a: 2 - 3 - 1 weit   b: 1 weit - 2 - 3   c: 3 - 1 weit - 2 */
.co-tag__serie .co-tag__platz { aspect-ratio: 3 / 2; }

/* Folge a */
.co-tag__serie--a .co-tag__platz--sa,
.co-tag__serie--a .co-tag__platz--sb { grid-column: span 3; }
.co-tag__serie--a .co-tag__platz--sc,
.co-tag__serie--a .co-tag__platz--sd,
.co-tag__serie--a .co-tag__platz--se { grid-column: span 2; }
.co-tag__serie--a .co-tag__platz--sf { grid-column: span 6; aspect-ratio: 21 / 9; }

/* Folge b: beginnt weit, danach zwei, dann drei */
.co-tag__serie--b .co-tag__platz--sa { grid-column: span 6; aspect-ratio: 21 / 9; }
.co-tag__serie--b .co-tag__platz--sb,
.co-tag__serie--b .co-tag__platz--sc { grid-column: span 3; }
.co-tag__serie--b .co-tag__platz--sd,
.co-tag__serie--b .co-tag__platz--se,
.co-tag__serie--b .co-tag__platz--sf { grid-column: span 2; }

/* Folge c: drei, dann eines weit, dann zwei */
.co-tag__serie--c .co-tag__platz--sa,
.co-tag__serie--c .co-tag__platz--sb,
.co-tag__serie--c .co-tag__platz--sc { grid-column: span 2; }
.co-tag__serie--c .co-tag__platz--sd { grid-column: span 6; aspect-ratio: 21 / 9; }
.co-tag__serie--c .co-tag__platz--se,
.co-tag__serie--c .co-tag__platz--sf { grid-column: span 3; }

/* Auftakt des ersten Abschnitts: Text links, erstes Bild rechts daneben.
   Darunter laeuft die Serie weiter - Zeile zwei mit drei Bildern, Zeile drei
   mit einem weiten. */
.co-tag__auftakt {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(20px, 3vw, 40px);
  /* Text an der Oberkante des Bildes: Der Abschnitt beginnt mit der Uhrzeit,
     also soll sie auch oben stehen und nicht neben der Bildmitte schweben. */
  align-items: start;
}
.co-tag__auftakt .co-tag__platz--gross { grid-column: span 2; aspect-ratio: 3 / 2; }

.co-tag__serie--start .co-tag__platz--sb,
.co-tag__serie--start .co-tag__platz--sc,
.co-tag__serie--start .co-tag__platz--sd { grid-column: span 2; }
.co-tag__serie--start .co-tag__platz--se { grid-column: span 6; aspect-ratio: 21 / 9; }

/* Folge d: grosses Bild links, zwei gestapelt rechts, darunter drei.
   Das grosse Bild spannt zwei Zeilen; die beiden kleinen teilen sich dieselbe
   Hoehe. Dadurch schliesst der Block unten buendig ab. */
.co-tag__serie--d .co-tag__platz--sa {
  grid-column: 1 / span 4; grid-row: 1 / span 2; aspect-ratio: 3 / 2;
}
.co-tag__serie--d .co-tag__platz--sb { grid-column: 5 / span 2; grid-row: 1; aspect-ratio: auto; }
.co-tag__serie--d .co-tag__platz--sc { grid-column: 5 / span 2; grid-row: 2; aspect-ratio: auto; }
/* Untere Zeile: zwei Bilder nebeneinander, gleich breit. */
.co-tag__serie--d .co-tag__platz--sd,
.co-tag__serie--d .co-tag__platz--se { grid-column: span 3; grid-row: 3; }

/* Folge e: dieselbe Anordnung gespiegelt - zwei gestapelt links, gross rechts. */
.co-tag__serie--e .co-tag__platz--sa { grid-column: 1 / span 2; grid-row: 1; aspect-ratio: auto; }
.co-tag__serie--e .co-tag__platz--sb { grid-column: 1 / span 2; grid-row: 2; aspect-ratio: auto; }
.co-tag__serie--e .co-tag__platz--sc {
  grid-column: 3 / span 4; grid-row: 1 / span 2; aspect-ratio: 3 / 2;
}
.co-tag__serie--e .co-tag__platz--sd,
.co-tag__serie--e .co-tag__platz--se { grid-column: span 3; grid-row: 3; }

/* Textbloecke: neben dem Bild schmal, in einer Zeile zweispaltig. */
.co-tag__text { display: flex; flex-direction: column; gap: 12px; max-width: 40ch; }
.co-tag__oben,
.co-tag__unten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 20px; align-items: baseline;
}
.co-tag__oben .co-tag__satz,
.co-tag__unten .co-tag__satz { max-width: 52ch; }

@media (max-width: 860px) {
  /* Platz fuer die Zeitachse: Auf dem Handy ist der Seitenrand schmal, und
     Sonne und Uhrzeit lagen auf den Bildern. Der Inhalt rueckt deshalb nach
     rechts, die Achse bleibt links davon frei. */
  /* Auf dem Handy nur die Spur schmaler und die Scheibe kleiner. Alles andere
     rechnet sich daraus - kein zweiter Satz Werte. */
  .co-tag {
    --co-tag-spur: 38px;
    --co-tag-scheibe: 15px;
  }
  .co-tag__scheibe { width: var(--co-tag-scheibe); height: var(--co-tag-scheibe); }
  .co-tag__biss { width: 13px; height: 13px; }
  .co-tag__uhr { font-size: 10px; }

  /* Serie auf dem Handy: zwei Spalten, alles im selben Verhaeltnis. */
  .co-tag__serie { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Auf dem Handy zaehlt nur noch, dass es aufgeht: zwei Spalten, gleiches
     Verhaeltnis, das letzte Bild breit. Die drei Folgen spielen hier keine Rolle. */
  /* Auf dem Handy zaehlt nur, dass es aufgeht: zwei Spalten, gleiches
     Verhaeltnis, das letzte Bild breit. Die Folgen spielen hier keine Rolle -
     deshalb werden auch ihre Zeilenangaben zurueckgesetzt. */
  .co-tag__serie .co-tag__platz {
    grid-column: span 1 !important; grid-row: auto !important; aspect-ratio: 3 / 2 !important;
  }
  .co-tag__serie .co-tag__platz--sf { grid-column: span 2 !important; }
  .co-tag__abschnitt--v1 { grid-template-columns: minmax(0, 1fr); }
  .co-tag__abschnitt--v1 .co-tag__bilder { grid-column: auto; }
  .co-tag__abschnitt--v2 .co-tag__bilder { grid-template-columns: minmax(0, 1fr); }
  .co-tag__stapel { grid-template-rows: auto auto; }
  .co-tag__platz--klein { aspect-ratio: 3 / 2; }
  /* Die Zeitleiste braucht auf schmalen Bildschirmen keine eigene Spalte. */
  .co-tag__uhr { font-size: 11px; }
  .co-tag__rand { display: none; }
}

/* ---------- Bild antippen und gross ansehen ---------- */

/* Der Knopf ersetzt das blosse Bild, damit es auch mit der Tastatur
   erreichbar ist. Er soll aber wie das Bild aussehen, nicht wie ein Knopf. */
.co-tag__lupe {
  all: unset; cursor: zoom-in;
  display: block; position: absolute; inset: 0;
}
.co-tag__lupe img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.co-tag__lupe:focus-visible {
  outline: 2px solid var(--co-tag-label, #8C6F5C); outline-offset: 3px;
}

/* Die Vollbildansicht selbst steht in co-vollbild.css - gemeinsam mit der
   Galerie. Hier bleibt nur der Knopf auf dem Bildplatz. */