/* ================================================================
   Jahresübersicht – Nord- und Südkarte sticky links,
   Artikelkarten scrollend rechts daneben.
   Geladen via css('@auto') im Header-Snippet.

   Bildmaße: alle 1600 × 1066 px  → ratio = 1600/1066 ≈ 1,5009.
   Das Kartenpaar (Nord über Süd) ist damit EIN Block mit dem
   Seitenverhältnis 1600 : 2132  (= 0,75047 breit zu hoch).

   Damit beide Kartenteile NAHTLOS aneinander stoßen, darf die
   Höhe nicht fest gesetzt werden (feste Höhe + object-fit:contain
   erzeugte die Letterbox-Lücke zwischen Nord und Süd, sobald die
   Breite durch 50vw / 640px gedeckelt war).
   Stattdessen: Breite = min(0,7505 × verfügbare Höhe, 50vw, 640px),
   Höhe ergibt sich über aspect-ratio: 1600 / 2132.
   → Jede Hälfte hat exakt 1600 × 1066 Proportion, kein Rand,
     und weil die Breite an die verfügbare Höhe gekoppelt ist,
     bleibt das Paar in jedem Viewport vollständig sichtbar.
   object-fit: cover = Sicherheitsnetz gegen Subpixel-Rundung
   (schneidet notfalls einen Bruchteil eines Pixels ab, statt
   eine sichtbare Lücke stehen zu lassen).
   ================================================================ */

.jahresuebersicht-wrapper {
  max-width: 1220px;
  width: 100%;
  box-sizing: border-box;
  margin: 0 auto;
  padding: 3rem 1rem 3rem;
}

/* --- Zweispaltiges Layout ---------------------------------------- */
/* auto: Grid übernimmt die explizite width von .jahresuebersicht-karten */

.jahresuebersicht-layout {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0 1.5rem;
  align-items: start;
}

/* --- Kartenpaar (linke Spalte, sticky) --------------------------- */
/* Nur die BREITE wird gesetzt: 0,7505 × verfügbare Höhe
   (100dvh − 4rem = Viewport unterhalb des Fixed-Headers),
   gedeckelt auf 50vw und 640px. Die Höhe kommt ausschließlich
   aus aspect-ratio: 1600 / 2132 → Nord und Süd stoßen nahtlos
   aneinander und das Paar passt immer in den Viewport.        */

.jahresuebersicht-karten {
  position: sticky;
  top: 4rem;
  width: min(
    calc(0.7505 * (100dvh - 4rem)),
    50vw,
    640px
  );
  max-width: 100%;
  aspect-ratio: 1600 / 2132;
  height: auto;
  display: flex;
  flex-direction: column;
  gap: 0;
  line-height: 0;
}

.jahresuebersicht-karte {
  flex: 1;
  display: block;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.jahresuebersicht-karte a {
  display: block;
  height: 100%;
  cursor: zoom-in;
  line-height: 0;
}

/* Die Hälfte hat dank aspect-ratio exakt das Bildseitenverhältnis,
   cover füllt sie damit randlos – kein Letterbox-Streifen zwischen
   Nord und Süd, auch nicht bei krummen Subpixel-Höhen. */
.jahresuebersicht-karte img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #847964;
  margin: 0;
  padding: 0;
}

/* --- Rechte Spalte (scrollbar) ---------------------------------- */

/* padding-top entfernt (Sven-Meldung 2026-08-26: "Ueberschrift soll oben
   buendig mit der Uebungsraumkarte abschliessen") - die 1.5rem Abstand
   liessen "Uebungen <Jahr>" gegenueber der Karte sichtbar tiefer starten,
   obwohl beide Spalten sich per align-items:start (.jahresuebersicht-
   layout) dieselbe obere Grid-Linie teilen. Ohne eigenes Padding beginnt
   der Titel jetzt exakt auf dieser Linie, genau wie die Karte. */
.jahresuebersicht-moc-col {
  padding: 0 0 4rem;
}

/* --- MOC-Bereich ------------------------------------------------- */

.jahresuebersicht-moc {
  margin-top: 0;
}

.jahresuebersicht-moc-titel {
  font-size: 1.25rem;
  font-weight: 600;
  color: #292b30;
  margin: 0 0 0.75rem;
  border-bottom: 2px solid #ff5722;
  padding-bottom: 0.4rem;
}

.jahresuebersicht-moc-liste {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 1rem;
}

.jahresuebersicht-moc-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: #292b30;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid rgba(41, 43, 48, 0.12);
  transition: color 150ms, box-shadow 150ms;
}

.jahresuebersicht-moc-card:hover {
  color: #ff5722;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.jahresuebersicht-moc-thumb {
  display: block;
  margin: 0;
  padding: 0;
  aspect-ratio: 3/2;
  overflow: hidden;
}

.jahresuebersicht-moc-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 250ms;
}

.jahresuebersicht-moc-card:hover .jahresuebersicht-moc-thumb img {
  transform: scale(1.04);
}

.jahresuebersicht-moc-nothumb {
  aspect-ratio: 3/2;
  background: #e0e0e0;
}

/* Dunkle Kontraskarte unter dem Vorschaubild (Sven-Meldung 2026-08-26:
   "fehlt eine dunkle Kontrastfarbe unten unter den Artikelbildern") -
   bisher "color: inherit" ohne eigenen Hintergrund, der Titel stand also
   direkt auf der hellen Seiten-Hintergrundfarbe. Anthrazit + Gold ist
   dieselbe Farbkombination wie ueberall sonst im Projekt (Sidebar,
   Steckbrief, Jahres-Chips in der Chronik) - macht aus der bisher
   isolierten Jahresuebersicht-Kachel optisch dieselbe Familie. */
.jahresuebersicht-moc-cardtitle {
  display: block;
  font-size: 0.85rem;
  font-weight: 500;
  line-height: 1.35;
  padding: 0.4rem 0.5rem 0.5rem;
  background-color: #3e3f51;
  color: #ffcc33;
  transition: background-color 150ms, color 150ms;
}

/* Ersetzt die alte "color: #ff5722"-Aufhellung auf .jahresuebersicht-moc-
   card:hover (die griff bisher nur, weil der Titel per "inherit" von
   dort geerbt hat - jetzt hat der Titel seine eigene Farbe, siehe oben).
   Gleiche Hover-Chip-Optik wie z. B. .chronik-year-tab:hover in
   chronik.css. */
.jahresuebersicht-moc-card:hover .jahresuebersicht-moc-cardtitle {
  background-color: #565875;
  color: #ffffff;
}

.jahresuebersicht-moc-leer {
  color: #666;
  font-style: italic;
  margin-top: 1.5rem;
}

/* Titelbanner-Breite korrigieren (2026-08-26, Mobil-Bugfix): title.css
   setzt auf .pagetitle-container bewusst ein volles "width: 100dvw" fuer
   den Full-Bleed-Banner-Look (siehe dortiger Kommentar zum iOS-Safari-
   Bug), aber ohne box-sizing:border-box - das eigene horizontale Padding
   (1.5rem 1rem) kam dadurch im Content-Box-Modell ON TOP zur 100dvw-
   Breite dazu. Die tatsaechlich gerenderte Box war also "100dvw + 2rem"
   breit, also breiter als der Viewport. Auf grossen Bildschirmen (viel
   Luft neben der max-width:1220px-Spalte) fiel das nie auf, auf dem
   Smartphone (Balken praktisch Viewport-breit) ragte der Ueberschuss
   rechts ueber den Bildschirmrand hinaus - html{overflow-x:hidden}
   (index.css) schneidet ihn dort einfach ab, wodurch das rechte Margin
   der Seite komplett verschwand (per Playwright bei 390px nachgemessen:
   Bannerkante bei 406px statt 390px). Chronik und Manoeverbericht haben
   dieses Problem nicht, weil beide .pagetitle-container dort ohnehin
   komplett auf "width:auto" umstellen (Titelkachel statt Balken, siehe
   dortige CSS-Dateien) - hier soll bewusst der volle Balken-Look
   bleiben, nur mit korrektem Boxmodell. Bewusst auf diese Vorlage
   beschraenkt (statt in title.css selbst geaendert), um andere Seiten
   mit demselben Balken-Look (Startseite, Suche, DSGVO-Seiten ...) nicht
   anzufassen, ohne dass Sven danach gefragt hat. */
.jahresuebersicht-wrapper .pagetitle-container {
  box-sizing: border-box;
}

/* --- Mobile (≤ 768 px) ------------------------------------------ */
/* Einspaltig: Karten sticky (60 svh gesamt = je 30 svh),
   Artikelkarten darunter. contain + Seitenfarbe → volle Karte.   */

@media (max-width: 768px) {
  .jahresuebersicht-layout {
    grid-template-columns: 1fr;
  }

  .jahresuebersicht-karten {
    /* Breite an die verfügbare Höhe gekoppelt (max. 70svh hoch),
       aspect-ratio aus der Basisregel sorgt weiter für den
       nahtlosen Übergang. */
    width: min(100%, calc(0.7505 * 70svh));
    margin: 0 auto;
    /* Auf dem Smartphone NICHT sticky: die Karte soll komplett
       nach oben wegscrollen, damit die Artikel des Jahres den
       ganzen Bildschirm bekommen. */
    position: static;
  }

  .jahresuebersicht-moc-col {
    padding: 1rem 0 3rem;
  }

  .jahresuebersicht-moc-liste {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Übungsnamen unter den Vorschaubildern auf dem Handy etwas
     größer (Desktop bleibt bei 0.85rem). */
  .jahresuebersicht-moc-cardtitle {
    font-size: 1rem;
  }
}

@media (max-width: 480px) {
  /* Bis 2026-08-01 stand hier `grid-template-columns: 1fr` - dadurch
     rutschte die Artikelliste auf dem iPhone (390px) trotz der
     Zweispalten-Regel oben wieder auf EINE Spalte zurueck.
     Sven moechte auch auf dem Smartphone zwei Spalten, die
     768px-Regel gilt jetzt also durchgehend weiter. */

  /* Auf sehr kleinen Displays noch eine Spur größer. */
  .jahresuebersicht-moc-cardtitle {
    font-size: 1.1rem;
  }
}