/* ==========================================================================
   SuS Grün-Weiß Amecke 1922 e.V. – eigene Stile ergänzend zu Tailwind
   Vereinsfarben aus dem Wappen: #009442 (Grün) / #0b3d22 (Dunkelgrün) / Weiß

   Gestaltungsregeln:
   · Grün ist Akzent, nicht Grundton – Flächen und Rahmen sind neutral.
   · Radien höchstens 4 px; Rundungen nur dort, wo sie etwas bedeuten.
   · Trennung entsteht durch Haarlinien und Flächenwechsel, nicht durch Schatten.
     Schatten trägt ausschließlich, was über der Seite liegt (Menü, Lightbox).
   ========================================================================== */

:root {
  --gwa-green: #009442;
  --gwa-dark: #0b3d22;
  --gwa-line: #e0e5e1;   /* Haarlinie */
  --gwa-fill: #f4f6f4;   /* ruhige Füllfläche */
  --gwa-fill-2: #fafbfa; /* Zebrastreifen */
}

html { -webkit-text-size-adjust: 100%; }
body { text-rendering: optimizeLegibility; }

::selection { background: var(--gwa-green); color: #fff; }

:where(a, button, summary, input, select, textarea):focus-visible {
  outline: 2px solid var(--gwa-green);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Versalien in der Display-Schrift laufen sonst zu eng aufeinander */
.font-display { font-feature-settings: "kern" 1; }

/* Zahlen in Tabellen, Ergebnissen und Terminen bündig untereinander */
time, .tabular { font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------- aufliegende Ebenen
   shadow-card/shadow-lift sind bewusst auf "none" gesetzt. Was wirklich über
   der Seite schwebt, bekommt seinen Schatten hier – und nur hier. */
[role="menu"] { box-shadow: 0 12px 28px -18px rgba(11, 61, 34, .55); }

/* --------------------------------------------------------------- Fließtext */
.rich { color: #41544a; font-size: 1.0625rem; line-height: 1.75; }
.rich > * + * { margin-top: 1rem; }
.rich p { margin: 0 0 1rem; }
.rich p:last-child { margin-bottom: 0; }
/* angenehme Zeilenlänge für Fließtext – Tabellen und Karten bleiben breit */
.rich > p, .rich > ul, .rich > ol, .rich > blockquote { max-width: 68ch; }
.rich strong, .rich b { color: #111c15; font-weight: 600; }
.rich em { font-style: italic; }
.rich a {
  color: #0d6431; font-weight: 500;
  text-decoration: underline; text-decoration-color: rgba(0, 148, 66, .35);
  text-underline-offset: 3px;
}
.rich a:hover { color: var(--gwa-green); text-decoration-color: currentColor; }

.rich h2, .rich h3, .rich h4 {
  color: #0d4a27; font-family: 'Barlow Condensed', Inter, sans-serif;
  font-weight: 700; text-transform: uppercase; letter-spacing: .01em;
  margin: 2.25rem 0 .75rem;
}
.rich h2 {
  font-size: 1.75rem;
  padding-bottom: .4rem; border-bottom: 1px solid var(--gwa-line);
}
.rich h3 { font-size: 1.4rem; }
.rich > :first-child { margin-top: 0; }

.rich ul, .rich ol { margin: 0 0 1rem; padding-left: 1.35rem; }
.rich ul { list-style: none; padding-left: 0; }
.rich ul > li { position: relative; padding-left: 1.25rem; margin-bottom: .4rem; }
.rich ul > li::before {
  content: ""; position: absolute; left: .1rem; top: .82em;
  width: .5rem; height: 1px; background: var(--gwa-green);
}
.rich ol { list-style: decimal; }
.rich ol > li { margin-bottom: .4rem; padding-left: .25rem; }
.rich ol > li::marker { color: var(--gwa-green); font-weight: 600; }

.rich hr { margin: 2rem 0; border: 0; border-top: 1px solid var(--gwa-line); }

.rich blockquote {
  margin: 1.5rem 0; padding: .25rem 0 .25rem 1.25rem;
  border-left: 2px solid var(--gwa-green); color: #111c15; font-style: italic;
}

.rich iframe {
  width: 100%; aspect-ratio: 16 / 10; border: 1px solid var(--gwa-line);
  border-radius: 3px;
}

.rich img { max-width: 100%; height: auto; border-radius: 3px; }

/* Downloads als Schaltfläche darstellen */
.rich a[href$=".pdf"] {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .65rem 1.05rem; border-radius: 3px;
  background: #0d4a27; color: #fff; font-weight: 600;
  text-decoration: none;
  transition: background .15s ease;
}
.rich a[href$=".pdf"]:hover { background: var(--gwa-green); color: #fff; }
.rich a[href$=".pdf"]::before {
  content: ""; width: 1.05rem; height: 1.05rem; flex: none;
  background: currentColor;
  -webkit-mask: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 3v9m0 0 3.5-3.5M10 12 6.5 8.5M4 15.5h12'/%3E%3C/svg%3E");
  mask: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 3v9m0 0 3.5-3.5M10 12 6.5 8.5M4 15.5h12'/%3E%3C/svg%3E");
}

/* ------------------------------------------------- Tabellen im Fließtext */
.rich .table-wrap { overflow-x: auto; margin: 1.5rem 0; }
.rich table {
  width: 100%; border-collapse: collapse; font-size: 1rem;
  background: #fff; border: 1px solid var(--gwa-line);
}
.rich thead th {
  background: var(--gwa-dark); color: #fff; text-align: left;
  font-weight: 600; font-size: .9rem; letter-spacing: .02em;
  padding: .6rem .9rem;
}
.rich td, .rich th { padding: .65rem .9rem; vertical-align: top; }
.rich tbody tr + tr { border-top: 1px solid var(--gwa-line); }
.rich tbody tr:nth-child(even) { background: var(--gwa-fill-2); }
.rich td p { margin: 0 0 .35rem; }
.rich td p:last-child { margin-bottom: 0; }

/* Zweispaltige Label/Wert-Tabellen (Trainer, Trainingszeiten …) */
.rich table.pairs td:first-child {
  width: 12rem; color: #0d4a27; font-weight: 600; background: var(--gwa-fill);
}
.rich table.pairs strong { color: #0d4a27; }

@media (max-width: 640px) {
  .rich table.pairs, .rich table.pairs tbody, .rich table.pairs tr, .rich table.pairs td { display: block; width: 100%; }
  .rich table.pairs td:first-child { background: transparent; padding-bottom: 0; }
  .rich table.pairs tr + tr { border-top: 1px solid var(--gwa-line); }
}

/* ----------------------------------------------------- Ergebnis-Tabellen */
.results-table { width: 100%; border-collapse: collapse; font-size: .95rem; }
/* Der Rahmen um die Tabelle scrollt waagerecht (overflow-x) und ist damit
   selbst der Bezug fuer position:sticky - top:5rem haette die Kopfzeile ueber
   die ersten Datenzeilen geschoben. Erst ab xl, wo die Tabelle ohne
   waagerechtes Scrollen passt, haengt sie wieder am Seitenkopf. */
.results-table thead th {
  position: sticky; top: 0; z-index: 1;
  background: var(--gwa-dark); color: #fff; text-align: left;
  padding: .6rem .8rem; font-weight: 600; white-space: nowrap;
}
.results-table thead th[data-sort] { cursor: pointer; user-select: none; }
.results-table thead th[data-sort]:hover { background: #0d4a27; }
.results-table thead th .arrow { opacity: .35; margin-left: .3rem; }
.results-table thead th[aria-sort="ascending"] .arrow,
.results-table thead th[aria-sort="descending"] .arrow { opacity: 1; }
.results-table td { padding: .5rem .8rem; border-top: 1px solid var(--gwa-line); }
.results-table tbody tr:nth-child(even) { background: var(--gwa-fill-2); }
.results-table tbody tr:hover { background: var(--gwa-fill); }
.results-table .num { font-variant-numeric: tabular-nums; }

@media (min-width: 1280px) {
  div:has(> .results-table) { overflow: visible; }
  .results-table thead th { top: 5rem; }
}

/* ------------------------------------------------------------- Lightbox */
.lb-open { overflow: hidden; }

/* Servicenavigation im Kopf: scrollt bei Bedarf, ohne sichtbare Leiste */
.metabar { scrollbar-width: none; -ms-overflow-style: none; }
.metabar::-webkit-scrollbar { display: none; }

/* ---------------------------------------------------------- Kalender */
[data-cal-grid] > button:nth-child(7n) { border-right: 0; }
[data-cal-grid] > button:nth-last-child(-n+7) { border-bottom: 0; }

/* ------------------------------------------------------------ Utilities */
.hyphen { hyphens: auto; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

@media print {
  header, footer, .no-print { display: none !important; }
  body { color: #000; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; }
}