/* Sektion inningen, Mikrolage (neu 2026-11-11, umgebaut 2026-11-11 nachmittags: Golf-Foto und Bayernkarte statt Drohnenbild; Golf-Foto ohne Laibung und ohne Label, schneidet hart ins Blau). IGC-Blau.
   Ab 1280 px Breite: H2 über Spalte 1 bis 8, rechts daneben das Golf-Foto (Spalte 9 bis 12, randlos im Raster, Kanten auf den Spaltenlinien).
   Darunter drei gleich breite Spalten auf einer gemeinsamen Oberkante: Fahrzeittafel (1 bis 4), Bayernkarte quadratisch (5 bis 8),
   Liste „Im Stadtteil“ (9 bis 12). Ab 860 px Höhe ein Bildschirm; darunter wächst die Sektion mit.
   1024 bis 1279: H2, dann Tafel (1 bis 7) neben Karte (8 bis 12), dann Golf-Fenster (1 bis 7) neben Liste (8 bis 12).
   Unter 1024: H2, Golf-Fenster über die volle Breite, Tafel, dann Karte neben Liste; unter 768 alles untereinander.
   Fahrzeittafel: Ziel links, Minuten groß rechts, Display 800, tabellarische Ziffern. Keine Linie zwischen Zielen außer der Haarlinie je Zeile. */
#inningen > .wrap { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 40px; align-content: start;
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas:
    "h h h h h h h h g g g g"
    "f f f f k k k k n n n n"; }
#inningen h2 { grid-area: h; align-self: start; }

/* Golf-Foto: ohne Rahmen, Kanten auf den Spaltenlinien, Luftbild der Bunker */
#inningen .in-golf { grid-area: g; align-self: start; position: relative; margin: 0; overflow: hidden;
  height: clamp(200px, calc(100svh - 644px), 256px); }
#inningen .in-golf img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 66% 50%; transition: transform .6s var(--ease-out); }
#inningen .in-golf:hover img { transform: scale(1.03); }
.mo #inningen .in-golf img { clip-path: inset(calc((1 - clamp(0, (var(--p, 1) - .15) / .45, 1)) * 50%) 0); }

/* Bayernkarte: quadratisch, so groß wie die Zeile hoch und die Spalte breit ist (Container-Einheiten) */
#inningen .in-karte { grid-area: k; margin: 0; min-width: 0; min-height: 0; container-type: size; }
#inningen .in-karte-f { width: min(100cqw, 100cqh); aspect-ratio: 1 / 1; }
#inningen .in-karte-f > img { display: block; width: 100%; height: 100%; object-fit: contain; }
/* Platzhalter, bis karte-bayern.svg vom Infografiker kommt */
#inningen .in-karte-ph { width: 100%; height: 100%; display: grid; place-items: center; border: 1px dashed var(--rule-on-blue); color: var(--on-blue-soft); }

/* Köpfe der beiden Gruppen: Text 16/600, Haarlinie darüber */
#inningen .in-h3 { display: flex; align-items: center; gap: 12px; min-height: 24px; padding-top: var(--s-4); border-top: 1px solid var(--rule-on-blue);
  font-family: var(--font-text); font-size: 16px; line-height: 1.3; font-weight: 600; font-stretch: 100%; letter-spacing: 0; color: var(--on-blue); margin: 0 0 var(--s-2); }
#inningen .in-h3 .ic { --ic: 20px; }

/* Fahrzeittafel */
#inningen .in-fahrt { grid-area: f; align-self: start; min-width: 0; }
#inningen .in-tab { width: 100%; border-collapse: collapse; }
#inningen .in-tab tr { border-bottom: 1px solid var(--rule-on-blue); }
#inningen .in-tab th { text-align: left; vertical-align: middle; padding: var(--s-2) var(--s-4) var(--s-2) 0; font-size: 16px; line-height: 1.3; font-weight: 400; color: var(--on-blue); }
#inningen .in-tab td { text-align: right; vertical-align: middle; white-space: nowrap; padding: var(--s-2) 0; color: var(--on-blue); }
#inningen .in-min { display: inline-block; font-family: var(--font-display); font-weight: 800; font-stretch: 125%; font-size: 36px; line-height: 1;
  letter-spacing: -.04em; font-feature-settings: "tnum"; vertical-align: middle; }
#inningen .in-ca, #inningen .in-u, #inningen .in-bis { font-size: 14px; line-height: 1; color: var(--on-blue-soft); }
#inningen .in-ca { margin-right: 8px; }
#inningen .in-bis { margin: 0 8px; }
#inningen .in-u { margin-left: 6px; }
#inningen .in-sub { display: block; margin-top: 2px; font-size: 14px; line-height: 1.3; color: var(--on-blue-soft); }
#inningen .in-note { margin: var(--s-3) 0 0; font-size: 13px; line-height: 1.4; color: var(--on-blue-soft); }

/* Liste im Stadtteil */
#inningen .in-nah { grid-area: n; align-self: start; min-width: 0; }
#inningen .in-nah .ilist { font-size: 16px; line-height: 1.5; color: var(--on-blue); padding-top: var(--s-3); }
#inningen .in-nah .ilist > li + li { margin-top: var(--s-3); }

/* niedriger als 860 px: gleiche Ordnung, die Sektion wächst mit dem Inhalt (mindestens ein Bildschirm) */
@media (max-height: 859px) {
  #inningen { height: auto; min-height: 100vh; min-height: 100svh; }
  #inningen > .wrap { height: auto; grid-template-rows: none; }
}

/* 1024 bis 1279: Tafel neben Karte, Golf-Fenster neben Liste */
@media (max-width: 1279px) {
  #inningen { height: auto; min-height: 100vh; min-height: 100svh; }
  #inningen > .wrap { height: auto; grid-template-rows: none; row-gap: var(--s-7);
    grid-template-areas:
      "h h h h h h h h h h h h"
      "f f f f f f f k k k k k"
      "g g g g g g g n n n n n"; }
  #inningen h2 { margin-bottom: 0; }
  #inningen .in-golf { height: auto; aspect-ratio: 3 / 2; }
}

/* unter 1024: H2, Golf-Fenster breit, Tafel, dann Karte neben Liste */
@media (max-width: 1023px) {
  #inningen > .wrap {
    grid-template-areas:
      "h h h h h h h h h h h h"
      "g g g g g g g g g g g g"
      "f f f f f f f f f f f f"
      "k k k k k k n n n n n n"; }
  #inningen .in-golf { aspect-ratio: 16 / 9; }
  #inningen .in-karte { container-type: normal; align-self: start; }
  #inningen .in-karte-f { width: 100%; }
}
/* Telefon: alles untereinander */
@media (max-width: 767px) {
  #inningen > .wrap { row-gap: var(--s-7);
    grid-template-areas: "h h h h h h h h h h h h" "g g g g g g g g g g g g" "f f f f f f f f f f f f" "k k k k k k k k k k k k" "n n n n n n n n n n n n"; }
  #inningen .in-golf { aspect-ratio: 3 / 2; }
  #inningen .in-karte-f { max-width: 480px; }
  #inningen .in-tab th { padding-top: var(--s-3); padding-bottom: var(--s-3); }
  #inningen .in-tab td { padding: var(--s-3) 0; }
  #inningen .in-min { font-size: 32px; }
}
@media (max-width: 479px) {
  #inningen .in-tab tr { display: block; padding: var(--s-3) 0; }
  #inningen .in-tab th, #inningen .in-tab td { display: block; padding: 0; text-align: left; }
  #inningen .in-tab td { margin-top: var(--s-1); }
  #inningen .in-sub { display: inline; margin: 0 0 0 var(--s-2); }
}
@media (max-width: 359px) {
  #inningen .in-ca { margin-right: 4px; }
  #inningen .in-bis { margin: 0 4px; }
}