/* ==========================================================================
   SG Chemie Erkner e.V. – Abteilung Leichtathletik
   Shared stylesheet
   --------------------------------------------------------------------------
   Design notes:
   - Color tokens are chosen to keep the club's green identity while meeting
     WCAG 2.1 AA contrast requirements (see comments next to each token).
   - No external fonts/CDNs are used: the system font stack keeps the site
     fast, works offline, and avoids sending visitor data to third parties.
   - Layout motif: a "lane line" (vertical rule) references athletics
     track lanes and is used as the one recurring structural accent.
   ========================================================================== */

/* -------------------------------------------------------------------------
   1. Design tokens
   ------------------------------------------------------------------------- */
:root {
  /* Brand colors, sampled from the club logo */
  --color-green: #00993e;        /* logo green – header/button background */
  --color-green-dark: #046a2c;   /* darkened green – links/text on light bg, 8.4:1 on white */
  --color-green-header: #045c26; /* header/nav background – deep enough for white text at 8.2:1 (AAA) */
  --color-green-tint: #eef8f1;   /* very light green – page background, ~16:1 with ink text */
  --color-ink: #1f1a17;          /* near-black from logo – primary text, borders, focus ring */
  --color-white: #ffffff;
  --color-accent: #ffc107;       /* gold – current-page indicator on the dark header, 5:1 against it, never color-only */
  --color-border: #cfe3d6;

  /* Typography: system font stack only (no external requests) */
  --font-heading: "Arial Narrow", "Helvetica Neue Condensed", Arial, sans-serif;
  --font-body: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* Layout */
  --content-max-width: 72ch;
  --nav-height: auto;
  --radius: 4px;

  /* Motion */
  --transition-fast: 150ms ease;
}

/* -------------------------------------------------------------------------
   2. Reset & base
   ------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  /* Covers any viewport area below a short page's content, so no default
     white background from <html> shows through beneath the footer. */
  background-color: var(--color-green-tint);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.0625rem; /* 17px base for comfortable reading */
  line-height: 1.6;
  color: var(--color-ink);
  background-color: var(--color-green-tint);
  /* Sticky footer: even on short pages (e.g. a mostly-empty Kontakt page),
     the footer is pinned to the bottom of the viewport instead of floating
     mid-page with a visible gap underneath. */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.01em;
  color: var(--color-ink);
}

h1 {
  font-size: clamp(1.9rem, 1.5rem + 1.6vw, 2.6rem);
  margin: 0 0 0.5em;
}

h2 {
  font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.8rem);
  margin: 1.6em 0 0.6em;
}

h3 {
  font-size: 1.2rem;
  margin: 1.4em 0 0.5em;
}

p,
ul,
ol,
table {
  margin: 0 0 1.1em;
}

a {
  color: var(--color-green-dark);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

a:hover {
  color: var(--color-ink);
}

/* Visible, high-contrast focus indicator everywhere (never remove outline) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--color-ink);
  outline-offset: 3px;
  border-radius: var(--radius);
}

/* -------------------------------------------------------------------------
   3. Skip link (keyboard/screen reader users can bypass navigation)
   ------------------------------------------------------------------------- */
.skip-link {
  position: absolute;
  left: 0.5rem;
  top: -3.5rem;
  z-index: 1000;
  background: var(--color-ink);
  color: var(--color-white);
  padding: 0.75em 1.25em;
  border-radius: var(--radius);
  transition: top var(--transition-fast);
}

.skip-link:focus {
  top: 0.5rem;
}

/* -------------------------------------------------------------------------
   4. Site header & navigation
   ------------------------------------------------------------------------- */
.site-header {
  background-color: var(--color-green);
  border-bottom: 4px solid var(--color-ink);
}

.header-bar {
  max-width: 68rem;
  margin: 0 auto;
  padding: 0.75rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  flex-wrap: wrap;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  color: var(--color-ink); /* 4.62:1 on logo green – meets AA for this bold/large text */
}

.brand:hover,
.brand:focus-visible {
  color: var(--color-ink);
}

.brand__logo {
  width: 62px;
  height: auto;
}

.brand__text {
  display: flex;
  flex-direction: column;
  line-height: 1.5;
}

.brand__club {
  font-size: 1.1rem;
  font-weight: 600;
}

.brand__department {
  font-family: var(--font-heading);
  font-size: 1.45rem;
  font-weight: 700;
}

/* Mobile nav toggle button (hidden on wide screens) */
.nav-toggle {
  margin-left: auto;
  display: none;
  align-items: center;
  gap: 0.5em;
  background: var(--color-ink);
  color: var(--color-white);
  border: none;
  padding: 0.55em 0.9em;
  border-radius: var(--radius);
  font-size: 1rem;
  cursor: pointer;
}

.nav-toggle:hover {
  background: #3a322c;
}

/* The default focus ring (--color-ink) has too little contrast against the
   dark header background (2.1:1, below the 3:1 non-text minimum), so
   header controls get a white ring instead. */
.site-header a:focus-visible,
.site-header button:focus-visible {
  outline-color: var(--color-white);
}

.main-nav {
  width: 100%;
}

.main-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.25);
  padding-top: 0.4rem;
}

.main-nav__list a {
  display: inline-block;
  color: var(--color-white); /* 8.19:1 on the deep-green header – exceeds AAA */
  text-decoration: none;
  font-weight: 600;
  padding: 0.55em 0.7em;
  border-bottom: 3px solid transparent;
}

.main-nav__list a:hover {
  border-bottom-color: var(--color-white);
}

/* Current page indicator: never color-only – also bold + text label via aria-current */
.main-nav__list a[aria-current="page"] {
  border-bottom-color: var(--color-accent);
  font-weight: 700;
}

@media (max-width: 42rem) {
  .nav-toggle {
    display: inline-flex;
  }

  .main-nav__list {
    flex-direction: column;
    border-top: 1px solid rgba(255, 255, 255, 0.25);
  }

  /* Collapsed by default on small screens; JS toggles [hidden] */
  .main-nav.is-collapsible .main-nav__list[hidden] {
    display: none;
  }
}

/* -------------------------------------------------------------------------
   5. Main content
   ------------------------------------------------------------------------- */
.site-main {
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: 2.5rem 1.25rem 4rem;
  width: 100%;
  /* Grows to fill remaining vertical space (see body's flex column above),
     which is what pins the footer to the bottom on short pages. */
  flex: 1 0 auto;
}

/* "Lane line" accent: recurring motif referencing an athletics track lane */
.page-intro {
  border-left: 6px solid var(--color-green);
  padding-left: 1rem;
  margin-bottom: 2rem;
}

.card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.5rem;
}

.placeholder-note {
  background: #fff8e6;
  border: 1px dashed #b8860b;
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  color: var(--color-ink);
}

.placeholder-note strong {
  display: inline-block;
  margin-bottom: 0.3em;
}

/* Tables (used e.g. for training times / competition dates) */
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 1.0rem;
}

.data-table caption {
  text-align: left;
  font-weight: 600;
  margin-bottom: 0.5em;
}

.data-table th,
.data-table td {
  text-align: left;
  padding: 0.45em 0.7em;
  border: 1px solid var(--color-border);
  vertical-align: top; /* keeps short cells aligned with tall, bullet-point cells */
}

.data-table th {
  background: var(--color-green-tint);
}

/* Reset default list spacing inside table cells (e.g. training content
   bullet points), so a list doesn't add extra height beyond its own
   lines - this was the main cause of "chunky" rows. */
.data-table td ul,
.data-table td ol {
  margin: 0;
  padding-left: 1.1em;
}
 
.data-table td li {
  margin: 0;
}
 
.data-table td li + li {
  margin-top: 0.15em; /* small breathing room between bullet points only */
}

/* Collapsible cell content (e.g. training content bullet points), using
   the native <details>/<summary> element: keyboard-operable and announced
   correctly by screen readers with no custom JavaScript needed. Collapsed
   by default, which keeps rows compact - especially valuable on mobile. */
.data-table td details {
  margin: 0;
}
 
.data-table td summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--color-green-dark);
  list-style: none; /* remove default marker; a custom one is added below */
  padding: 0.1em 0;
}
 
/* Remove the default marker in WebKit/Blink too (list-style alone isn't
   enough for <summary> in all browsers) */
.data-table td summary::-webkit-details-marker {
  display: none;
}
 
.data-table td summary::before {
  content: "\25B8"; /* ▸ small triangle, rotates open like a native disclosure */
  display: inline-block;
  width: 1em;
  transition: transform var(--transition-fast);
}
 
.data-table td details[open] summary::before {
  transform: rotate(90deg);
}
 
.data-table td summary:hover {
  color: var(--color-ink);
}
 
.data-table td details ul,
.data-table td details ol {
  margin: 0.4em 0 0 1.4em; /* aligns roughly under the summary text, not the marker */
  padding-left: 0;
}
 
/* Table wrapper: enables horizontal scrolling on narrow viewports instead
   of squeezing columns or breaking the page layout. Markup pattern:
   <div class="table-scroll-region">
     <div class="table-scroll" tabindex="0" role="region" aria-label="...">
       <table class="data-table">...</table>
     </div>
     <div class="table-scroll-bar" aria-hidden="true">
       <div class="table-scroll-bar__inner"></div>
     </div>
   </div>
   A plain <div> wrapper (rather than styling <table> directly) is used
   because changing a table's own `display` value can strip its implicit
   table semantics for assistive technology in some browsers. */
.table-scroll-region {
  position: relative;
  margin-bottom: 1.0em;
}
 
/* Table wrapper: enables horizontal scrolling on narrow viewports instead
   of squeezing columns or breaking the page layout. Wrap markup as:
   <div class="table-scroll"><table class="data-table">...</table></div>
   A plain <div> wrapper (rather than styling <table> directly) is used
   because changing a table's own `display` value can strip its implicit
   table semantics for assistive technology in some browsers. */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 1.1em;
}

/* tabindex="0" + role="region" on .table-scroll (in the HTML) makes the
   scrollable area itself keyboard-reachable, so it needs a visible focus
   style like any other interactive element. */
.table-scroll:focus-visible {
  outline: 3px solid var(--color-ink);
  outline-offset: -3px;
}
 
.table-scroll .data-table {
  margin-bottom: 0; /* spacing now lives on the wrapper instead */
}
 
/* Sticky bottom scrollbar: mirrors the table's horizontal scroll position
   so people don't have to scroll all the way down a tall table just to
   find its scrollbar. It sticks to the bottom of the viewport for as long
   as the table region is on screen, then scrolls away with the page once
   the table has fully passed - handled by JS in main.js, which also shows
   it only when the table both overflows horizontally AND is taller than
   the viewport (otherwise the table's own scrollbar is already visible). */
.table-scroll-bar {
  display: none; /* toggled to block by JS via .is-visible */
  position: sticky;
  bottom: 0;
  overflow-x: auto;
  overflow-y: hidden;
  height: 15px;
  background: var(--color-green-tint);
  border-top: 1px solid var(--color-border);
}
 
.table-scroll-bar.is-visible {
  display: block;
}
 
.table-scroll-bar__inner {
  height: 5px;
}
 
@media (max-width: 42rem) {
  .table-scroll {
    /* Subtle edge shading hints that more content is scrollable */
    background:
      linear-gradient(to right, var(--color-green-tint) 0%, rgba(238, 248, 241, 0) 100%) left,
      linear-gradient(to left, var(--color-green-tint) 0%, rgba(238, 248, 241, 0) 100%) right;
    background-repeat: no-repeat;
    background-size: 20px 100%;
    background-attachment: local, local;
  }
}

/* Simple button style (e.g. for form downloads) */
.button {
  display: inline-block;
  background: var(--color-green-dark);
  color: var(--color-white);
  text-decoration: none;
  font-weight: 600;
  padding: 0.65em 1.1em;
  border-radius: var(--radius);
  border: 2px solid transparent;
}

.button:hover {
  background: var(--color-ink);
  color: var(--color-white);
}

/* Download list (e.g. Formulare): a compact row per document, sized for
   lists of several items rather than one large call-to-action button. */
.download-list {
  list-style: none;
  margin: 0 0 1.1em;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
 
.download-list__item {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-white);
}
 
.download-list__link {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.65em 0.9em;
  color: var(--color-green-dark);
  font-weight: 600;
  text-decoration: none;
}
 
.download-list__link:hover {
  background: var(--color-green-tint);
  color: var(--color-ink);
}
 
/* Small file-type tag, e.g. "PDF" - text-based, no icon font needed */
.download-list__type {
  flex: 0 0 auto;
  background: var(--color-green);
  color: var(--color-ink); /* 4.62:1 contrast, matches header brand text */
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 0.2em 0.5em;
  border-radius: var(--radius);
}
 
.download-list__meta {
  margin-left: auto;
  flex: 0 0 auto;
  font-weight: 400;
  font-size: 0.85rem;
  color: var(--color-ink);
}

/* ---------------------------------------------------------------------
   Photo gallery (Fotos & Berichte)
   - Single row, horizontally scrollable, with prev/next buttons for
     click-through navigation (in addition to native scroll/swipe).
   - Each photo opens in a larger "lightbox" view on click, built on the
     native <dialog> element for free keyboard/Escape/focus handling.
   --------------------------------------------------------------------- */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
 
.gallery-carousel {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
 
.gallery-carousel__nav {
  flex: 0 0 auto;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  border: none;
  background: var(--color-green-header);
  color: var(--color-white);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
 
.gallery-carousel__nav:hover:not(:disabled) {
  background: var(--color-ink);
}
 
.gallery-carousel__nav:disabled {
  opacity: 0.35;
  cursor: default;
}
 
.gallery {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  gap: 1.25rem;
  list-style: none;
  padding: 0.25rem; /* room for the focus ring on the first/last item */
  margin: 0;
}
 
.gallery li {
  flex: 0 0 220px;
  scroll-snap-align: start;
}
 
.gallery figure {
  margin: 0;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
}
 
.gallery__trigger {
  display: block;
  width: 100%;
  padding: 0;
  border: none;
  background: none;
  cursor: zoom-in;
}
 
.gallery__trigger img {
  width: 100%;
  height: 160px;
  object-fit: cover;
}
 
.gallery figcaption {
  padding: 0.6em 0.8em;
  font-size: 0.95rem;
}
 
/* Lightbox: native <dialog>, styled and controlled via a little JS in
   main.js (opening, closing, arrow-key navigation between photos). */
.lightbox {
  position: fixed;
  margin: auto;
  border: none;
  border-radius: var(--radius);
  padding: 0;
  max-width: min(90vw, 900px);
  max-height: 90vh;
  background: var(--color-ink);
}
 
.lightbox::backdrop {
  background: rgba(0, 0, 0, 0.75);
}
 
.lightbox__close {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  border: none;
  background: var(--color-white);
  color: var(--color-ink);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
}
 
/* Prev/next buttons, overlaid on the enlarged photo. The <dialog> element
   is itself position:fixed, which makes it the containing block for these
   position:absolute buttons, so no extra wrapper is needed. */
.lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.9);
  color: var(--color-ink);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}
 
.lightbox__nav:hover:not(:disabled) {
  background: var(--color-white);
}
 
.lightbox__nav:disabled {
  opacity: 0.3;
  cursor: default;
}
 
.lightbox__nav--prev {
  left: 0.6rem;
}
 
.lightbox__nav--next {
  right: 0.6rem;
}
 
@media (max-width: 30rem) {
  /* Keep the arrows from overlapping a narrow photo too heavily */
  .lightbox__nav {
    width: 2.25rem;
    height: 2.25rem;
    font-size: 1.2rem;
  }
}
 
.lightbox__image {
  display: block;
  max-width: min(90vw, 900px);
  max-height: 75vh;
  width: auto;
  height: auto;
  margin: 0 auto;
}
 
.lightbox__caption {
  color: var(--color-white);
  text-align: center;
  padding: 0.75em 1em;
  margin: 0;
}
 
@media (max-width: 42rem) {
  .gallery-carousel__nav {
    /* Prev/next buttons take up valuable width on small screens; native
       swipe/scroll on the row remains available either way. */
    width: 2.1rem;
    height: 2.1rem;
  }
 
  .gallery li {
    flex-basis: 180px;
  }
}

/* -------------------------------------------------------------------------
   6. Footer
   ------------------------------------------------------------------------- */
.site-footer {
  background: var(--color-ink);
  color: var(--color-white);
  text-align: center;
  padding: 1.5rem 1.25rem;
  font-size: 0.9rem;
}

.site-footer a {
  color: var(--color-white);
}

/* Sponsor logo: the source image has its own white background, so it is
   wrapped in a white card rather than placed directly on the dark footer.
   This keeps it legible and reads as an intentional placement rather than
   a rendering glitch. Contrast is unaffected by the footer color since the
   logo carries its own background. */
.site-footer__sponsor {
  margin-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem 1rem;
}
 
.site-footer__sponsor-label {
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  color: var(--color-white);
}
 
.site-footer__sponsor-badge {
  display: inline-block;
  background: var(--color-white);
  border-radius: var(--radius);
  padding: 0.6rem 1.1rem;
}

.site-footer__sponsor-badge a {
  display: block;
  line-height: 0; /* avoid extra inline-image whitespace inside the badge */
}
 
.site-footer__sponsor-badge img {
  width: 300px;
  height: auto;
}

/* -------------------------------------------------------------------------
   Ergänzungen für die Grav-Version
   ------------------------------------------------------------------------- */

/* Wettkampftermine: Liste ohne Aufzählungszeichen, wirkt wie die bisherigen Zeilen */
.termin-liste {
  list-style: none;
  margin: 0 0 1.1em;
  padding: 0;
}

.termin-liste li + li {
  margin-top: 0.25em;
}