/* ==========================================================================
   Variablen & Basis
   ========================================================================== */
:root{
  --brand: #22c55e;      /* Grün (emerald 500) */
  --brand-dark: #16a34a; /* Grün dunkler (emerald 600) */
  --panel: #fff3c4;
  --bg: #fef6e4;
  --text: #333;
  --muted: #6b7280;
  --ok: #06d6a0;
  --ok-dark:#05b386;
  --border: #ffd166;
  --shadow: 0 4px 8px rgba(0,0,0,0.1);
}

*{box-sizing:border-box}

html,body{height:100%}
body{
  margin:0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Baloo 2', cursive, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  overflow-x:hidden; /* Sicherheitsnetz gegen horizontale Scrollbalken */
}

/* Hilfsklassen */
.hidden{display:none!important}
.muted{color: var(--muted)}

/* Links */
a{color:#1f2937; text-decoration: underline;}
a:hover{text-decoration: none}

/* Container */
.container{max-width:1100px; margin:auto; padding:20px}

table {
  font-size: .95rem;   /* ca. 14,4px */
}

/* ==========================================================================
   Header (header.php)
   ========================================================================== */
/* Ein einziger, konsolidierter Header-Block */
header {
  position: relative;
  height: 140px;
  background: url("../img/header-pitch.svg") center center / cover no-repeat;
  box-shadow: none; /* überschreibt altes Shadow */
  padding: 0;       /* überschreibt Ziel-Header-Padding */
}

header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 8px;         /* Weißer Streifen oben */
  background: #fff;
  z-index: 3;
}

/* Logo-Kreis */
.logo-container {
  position: absolute;
  top: 65%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  padding: 10px;
  border-radius: 50%;
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
  z-index: 11;
}

.logo-container img {
  display: block;
  width: 160px;
  height: auto;
  z-index: 10;
}

nav{margin-top:8px; display:flex; justify-content:center; gap:14px; position:relative; z-index:1}
nav a{
  color:#fff; text-decoration:none; font-size:0.95rem;
  background: rgba(255,255,255,.25);
  padding:6px 12px; border-radius:8px;
  transition: background .25s, transform .2s;
}
nav a:hover{background: rgba(255,255,255,.4); transform: translateY(-1px)}

/* ==========================================================================
   Footer (footer.php) – helle, dezente, zentrierte Variante
   ========================================================================== */
/* ==========================================================================
   Footer (footer.php) – kompakte, dezente Variante
   ========================================================================== */
.site-footer {
  background: #fefcf9;
  color: #555;
  margin-top: 30px;
  padding: 14px 12px;       /* etwas weniger Padding */
  text-align: center;
  border-top: 1px solid #eee;
  font-weight: 400;
  line-height: 1.3;         /* engerer Zeilenabstand */
}

.site-footer .inner {
  max-width: 900px;
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;                 /* minimaler Abstand zwischen Elementen */
}

/* Navigation */
.footer-nav {
  display: flex;
  gap: 14px;                /* gleichmäßiger Abstand statt Trenner */
  justify-content: center;
  font-size: 0.82rem;
}

.footer-nav a {
  color: var(--brand-dark);
  text-decoration: none;
  font-weight: 400;
  transition: color 0.2s ease;
}

.footer-nav a:hover {
  color: var(--brand);
  text-decoration: underline;
}

/* Mail-Zeile */
.footer-mail {
  font-size: 0.78rem;
  color: var(--muted);
  margin-top: 2px;          /* enger zur Navigation */
}

.footer-mail a {
  color: var(--brand-dark);
  text-decoration: none;
}

.footer-mail a:hover {
  color: var(--brand);
  text-decoration: underline;
}

/* Copyright */
.footer-copy {
  font-size: 0.72rem;
  color: var(--muted);
  margin-top: 2px;          /* enger zur Mail */
}

/* ==========================================================================
   Form/Filter
   ========================================================================== */
.filters{
  display:flex; flex-wrap:wrap; gap:10px; align-items:center;
  background: var(--panel);
  padding:15px; border-radius:15px; box-shadow:0 3px 6px rgba(0,0,0,.1);
}
.filters label{font-size:1rem; color:#555}
input, select, button {
  padding:8px 12px;
  border-radius:10px;
  border:2px solid var(--border);
  font-family:'Baloo 2', cursive, system-ui;
  font-size:.9rem;   /* Standard-Schriftgröße */
  background:#fff;
}

button{background: var(--ok); color:#fff; border:none; cursor:pointer}
button:hover{background: var(--ok-dark)}
#todayNotice{
  background:#fff3c4; padding:10px; border-radius:8px; margin-top:10px; box-shadow:0 2px 4px rgba(0,0,0,.1);
}

/* ==========================================================================
   Tabellen (Desktop)
   ========================================================================== */
table{
  width:100%; border-collapse:separate; border-spacing:0;
  margin-top:20px; background:#fff;
  border-radius:15px; overflow:hidden; box-shadow: var(--shadow);
}
th, td{padding:12px; text-align:left; vertical-align:top}
thead th{
  background: var(--brand);
  color:#fff; font-size:1rem;
  cursor:pointer; user-select:none;
}
tbody tr:nth-child(even){background:#fff3c4}
tbody tr:hover{background:#fde68a}

/* Sortier-Indikatoren */
th.sort-asc::after{content:" ▲"}
th.sort-desc::after{content:" ▼"}

/* Ort-Inhalt (Desktop & Mobile) */
td .place{font-weight:600; line-height:1.2}
td .addr-small{font-size:.9rem; line-height:1.2; opacity:.95}
.addr-block .line1{font-size:.8rem; line-height:1.2}
.addr-block .line2{font-size:.8rem; line-height:1.1; opacity:.95}
@media (max-width:480px){ .addr-block .line2{font-size:.85rem} }

/* Pager */
.pager{display:flex; gap:10px; align-items:center; justify-content:flex-end; margin-top:10px}
.pager button{padding:6px 10px; border-radius:8px}

/* Hinweistext nur in der Desktopansicht kleiner */
@media (min-width: 761px) {
  #notice {
    font-size: 0.9rem;   /* kleiner als Standard */
    line-height: 1.4;
  }
  #notice strong {
    font-size: 0.95rem;  /* "Hinweis:" leicht größer */
  }
}

/* ==========================================================================
   Mobile: gruppierte Tages-Tabellen (3 Spalten – Zeit | Spiel | Ort)
   ========================================================================== */
.mobile-groups{display:none}

@media (max-width: 760px){
  /* große Desktop-Tabelle verstecken */
  #mainTable{display:none}
  .mobile-groups{display:block}

  .day-block{
    background:#fff; border-radius:12px; box-shadow:0 2px 8px rgba(0,0,0,.06);
    margin:12px 0; overflow:hidden;
  }

  /* Datum-Header + Spaltenüberschriften bündig, gleiche Farbe */
  .day-header{
    margin:0; padding:10px 12px;
    background: var(--brand); color:#fff;
    font-size:1.0rem; font-weight:700; border-bottom:0;
    border-bottom-left-radius:0;   /* bündig mit Tabelle */
    border-bottom-right-radius:0;
  }

  .day-table{
    width:100%; border-collapse:collapse; margin:0; table-layout:fixed;
    border-radius:0 !important;     /* überschreibt globales table-radius */
    box-shadow:none !important;
  }
  .day-table thead th{
    background: var(--brand); color:#fff;
    border-bottom:2px solid rgba(0,0,0,.08);
    padding:8px 10px; font-weight:700;
    border-radius:0 !important;
  }
  .day-table td{padding:8px 8px; vertical-align:top}
  .day-table tbody tr:nth-child(even){background:#fffaf0}

  /* schmalere Zeitspalte */
  .day-table--compact .t-time{
    width:3.0rem; min-width:3.0rem; white-space:nowrap; padding-right:6px;
  }
  .day-table--compact thead th:nth-child(1){ width:3.0rem }

  /* mehr Platz für Ort */
  .day-table--compact .t-location{width:46%}
  .day-table--compact .t-match{width:auto}

  /* Worttrennung schonend */
  .day-table--compact th, .day-table--compact td{
    word-break:normal; overflow-wrap:break-word; hyphens:manual;
  }
  .t-match .home, .t-match .guest{white-space:nowrap}
  .t-match .vs{margin:0 .25rem; opacity:.75}
  .t-match .league{font-size:.88rem; opacity:.9; margin-top:2px}

  .t-location .place{font-weight:600; line-height:1.2}
  .addr-block, .map-link{word-break:normal; overflow-wrap:break-word}
  .addr-block .line2{font-size:.85rem; line-height:1.1; opacity:.95}

  /* Pager mittig */
  .pager{justify-content:center}

  /* engerer Abstand Datum <-> Spaltenkopf */
  .day-header{ padding-top:5px; padding-bottom:1px; margin-bottom:0; }
  .day-table{ margin-top:0; }
  .day-table thead th{ padding-top:4px; padding-bottom:4px; border-top:0; }
}

/* Entfernungstext nur in der Desktop-Ansicht kleiner machen */
@media (min-width: 761px) {
  #mainTable .t-location .muted {
    font-size: 0.8rem;   /* gleich wie .line1 */
    line-height: 1.2;
    opacity: 0.95;
  }
}

/* ==========================================================================
   Kartenansicht (map.php)
   ========================================================================== */
.map-wrap{position:relative; margin-top:20px}
#map{
  width:100%; height:60vh;
  border-radius:15px; box-shadow: var(--shadow); overflow:hidden;
}

.legend-toggle{
  position:absolute; top:10px; right:10px;
  display:flex; gap:8px; align-items:flex-start; z-index:1000;
}
.legend-btn{
  background: rgba(17,24,39,.9); color:#fff;
  border:1px solid rgba(255,255,255,.3);
  padding:6px 10px; border-radius:8px; cursor:pointer; font-size:.9rem;
  box-shadow:0 2px 6px rgba(0,0,0,.35); backdrop-filter: blur(2px);
  text-shadow:0 1px 1px rgba(0,0,0,.4);
}
.legend-btn:hover{background: rgba(17,24,39,1)}
.legend-btn:focus-visible{outline:2px solid #fff; outline-offset:2px}

.legend{
  background: rgba(255,255,255,.95);
  border-radius:10px; padding:8px 10px;
  box-shadow:0 2px 6px rgba(0,0,0,.15);
  font-size:.9rem; max-width:240px; backdrop-filter: blur(2px);
}
.legend h4{margin:0 0 6px; font-size:.95rem}
.legend .item{display:flex; align-items:center; gap:8px; margin:4px 0}
.legend .swatch{width:14px; height:14px; border-radius:4px; flex:0 0 14px; border:1px solid rgba(0,0,0,.15)}

.map-toolbar{position:relative; margin-top:10px; display:flex; gap:10px; flex-wrap:wrap; align-items:center}
.counter{background:#fff; border-radius:10px; padding:6px 10px; box-shadow:0 2px 4px rgba(0,0,0,.08); font-size:.95rem}

/* Hinweis-Badge */
.badge{display:inline-flex; align-items:center; gap:6px; background:#1f2937; color:#fff; padding:4px 8px; border-radius:999px; font-size:.85rem}
.badge.hidden{display:none}

/* Leaflet-Popup Feinschliff */
.leaflet-popup-content{font-family:'Baloo 2', cursive, system-ui; font-size:.95rem}
.popup-title{font-weight:600; margin-bottom:4px}
.popup-meta{font-size:.9rem; opacity:.9}
.popup-actions a{text-decoration:underline}

/* ==========================================================================
   Eigener Standort – DivIcon mit Puls (map.php)
   ========================================================================== */
.user-loc .pulse-wrap{position:relative; width:24px; height:24px}
.user-loc .dot{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:12px; height:12px; border-radius:50%;
  background:#2563eb; box-shadow:0 0 0 2px #fff, 0 0 12px rgba(37,99,235,.6);
}
.user-loc .ring, .user-loc .ring.r2{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:24px; height:24px; border-radius:50%;
  border:2px solid rgba(37,99,235,.6);
  animation: ping 1.8s cubic-bezier(.2,.7,.3,1) infinite;
}
.user-loc .ring.r2{animation-delay:.9s}
@keyframes ping{
  0%{opacity:.8; transform: translate(-50%,-50%) scale(.6)}
  70%{opacity:.2}
  100%{opacity:0; transform: translate(-50%,-50%) scale(1.6)}
}
.user-loc .tag{
  position:absolute; top:-18px; left:50%; transform:translateX(-50%);
  background:#111827; color:#fff; border:1px solid rgba(255,255,255,.25);
  border-radius:6px; font-size:.7rem; padding:1px 4px;
  box-shadow:0 1px 4px rgba(0,0,0,.25);
}

/* ==========================================================================
   Kleinzeug
   ========================================================================== */
/* Map-Link in Tabellenzellen */
td a.map-link{color:#1f2937; text-decoration:underline}
td a.map-link:hover{text-decoration:none}

/* Buttons in Kartenliste */
.zoom-btn {
  align-self:flex-start;
  margin-top:2px;
  background: var(--ok);
  color:#fff;
  border:none;
  border-radius:8px;
  padding:6px 10px;
  cursor:pointer;
}
.zoom-btn:hover {
  background: var(--ok-dark);
}

/* Desktop: Zoom-Button kleiner machen */
@media (min-width: 761px) {
  .zoom-btn {
    font-size: 0.78rem;   /* kleinere Schrift */
    padding: 4px 8px;     /* kompaktere Abmessungen */
    border-radius: 6px;   /* etwas kleinerer Radius */
    margin-top: 4px;      /* optional leicht anheben */
  }
}


/* --- Neue Tagesabschnitte im Desktop-Table optisch trennen --- */
#mainTable tbody tr.date-start td{
  border-top: 1px solid #94a3b8;  /* dezente Slate-Linie */
  padding-top: 14px;              /* Luft über der ersten Zeile des Tages */
}

/* Datumsetikett über der ersten Zelle einblenden */
#mainTable tbody tr.date-start td:first-child::before{
  content: attr(data-date-label);
  display: block;
  font-weight: 700;
  color: #334155;
  margin-bottom: 4px;
}

/* Nummernfelder unten für Seitenwechsel */
.page-nums {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  margin-right: 8px;
  flex-wrap: wrap;
  font-size: 0.8rem;         /* kleinere Schrift */
  color: #6b7280;            /* dezente graue Schriftfarbe */
}

.page-nums .pn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  padding: 2px 6px;
  border-radius: 6px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  font-size: 0.8rem;
  color: #6b7280;
  cursor: pointer;
  transition: background 0.2s;
}

.page-nums .pn:hover {
  background: #f3f4f6;
}

.page-nums .pn.active {
  background: #10b981;       /* dezentes Grün für aktive Seite */
  color: #fff;
  border-color: #10b981;
  cursor: default;
}

.page-nums .pn.disabled,
.page-nums .pn.dots {
  background: transparent;
  border: none;
  color: #9ca3af;            /* noch heller grau */
  cursor: default;
  box-shadow: none;
}

/* Datumszeilen in der Tabelle */
#mainTable tbody tr.date-row td {
  border-top: 2px solid #e5e7eb;   /* dezente Trennlinie */
  padding: 8px 6px;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--muted);
  background: #fafafa;
  text-align: left;
}
/* --- Fix: Mobile – Spiel ragt nicht mehr in Ort --- */
@media (max-width: 760px) {
  /* Teamnamen dürfen wieder bei Leerzeichen umbrechen */
  .day-table--compact .t-match .home,
  .day-table--compact .t-match .guest {
    white-space: normal;              /* war: nowrap */
  }

  /* Für sehr lange Tokens (z.B. Bindestrichlose Namen) trotzdem weich umbrechen */
  .day-table--compact .t-match {
    overflow-wrap: break-word;        /* alias: word-wrap: break-word; */
    word-wrap: break-word;
  }

  /* Mehr Platz für Spiel, etwas weniger für Ort */
  .day-table--compact .t-location { width: 40%; }  /* war: 46% */
  .day-table--compact .t-match    { width: auto; }
  .day-table--compact thead th:nth-child(3) { width: 40%; } /* Header anpassen */

  /* Sicherheit: Text läuft nicht optisch in Nachbarspalten */
  .day-table--compact td { overflow: hidden; }
}
/* Mobile: Zeilenumbruch nach "vs." in der Spiel-Spalte */
@media (max-width: 760px) {
  .day-table--compact .t-match .guest {
    display: block;          /* macht Gast in neuer Zeile */
    margin-top: 2px;
  }
  /* optional: "vs." groß schreiben */
 /* .day-table--compact .t-match .vs { text-transform: uppercase; }*/
}

/* Intro-Text oberhalb der Galerie */
.intro {
  max-width: 800px;
  margin: 3.5rem auto 1rem;  /* zentriert, mit Abstand nach unten */
  text-align: center;
  line-height: 1.6;
  color: var(--color-text);
}
.intro p {
  margin-bottom: 1rem;
}
.intro p strong {
  font-size: 1.25rem;
}
.intro p em {
  display: block;
  margin-top: 1rem;
  font-style: normal;
  color: var(--color-primary);
}

/* Mobile: Intro-Text seitlich einrücken */
@media (max-width: 760px) {
  .intro {
    padding-left: 14px;
    padding-right: 14px;
    text-align: center;   /* optional: linksbündig statt zentriert */
  }
}

/* Navi unter dem Logo halten (unterhalb vom Logokreis zeichnen) */
.main-nav{
  margin-top: 50px;          /* statt negativem Margin */
  margin-bottom: 8px;        /* kleiner Abstand nach unten */
  display:flex;
  justify-content:center;
  gap:14px;
  position: relative;
  z-index: 9;                /* Logo hat z-index:11 → Logo liegt oben */
}

.main-nav a {
  background: #fff;               /* Standard weiß */
  color: var(--brand-dark);       /* Text in Grün */
  text-decoration: none;
  font-size: 0.95rem;
  padding: 6px 14px;
  border-radius: 8px;
  transition: background .25s, transform .2s, color .25s;
  box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}

.main-nav a:hover {
  background: #f9fafb;            /* leichtes Grau beim Hover */
  transform: translateY(-1px);
}

.main-nav a.active {
  background: var(--brand);       /* aktiver Link grün */
  color: #fff;                    /* weiße Schrift */
  box-shadow: 0 2px 6px rgba(0,0,0,.2);
}

/* Abstand zwischen Navi und Intro straffen */
.main-nav + .intro{
  margin-top: 1.25rem;       /* statt 3.5rem */
}

/* ==========================================================
   Mobile Feinschliff: Ort-Spalte & Zoom-Button
   ========================================================== */
@media (max-width: 760px) {
  .day-table--compact .t-location {
    font-size: 0.85rem;
    line-height: 1.3;
  }
  .day-table--compact .t-location .muted {
    font-size: 0.78rem;
  }
  .day-table--compact .t-location .map-link {
    font-size: 0.8rem;
  }
  .day-table--compact .t-location .zoom-btn {
    font-size: 0.78rem;
    padding: 4px 8px;
    border-radius: 6px;
    margin-top: 4px;
  }
  /* Ligen-Bezeichnung (unter vs.) auch kleiner */
  .day-table--compact .t-match .league {
    font-size: 0.78rem;   /* kleiner wie Entfernung */
    opacity: 0.9;         /* darf dezent bleiben */
  }
  /* Hinweis-Block oben kleiner */
  #notice {
    font-size: 0.82rem;
    line-height: 1.3;
  }
  #notice strong {
    font-size: 0.85rem; /* "Hinweis:" minimal hervorgehoben */
  }
}

@media (min-width: 761px) {
  /* breite Datumsspalte und schmale Liga für bessere Lesbarkeit */
  #mainTable thead th:nth-child(1),
  #mainTable tbody td.t-datetime { white-space: nowrap; }

  #mainTable thead th:nth-child(2),
  #mainTable thead th:nth-child(3),
  #mainTable tbody td.t-home,
  #mainTable tbody td.t-guest {
    word-break: normal;
  }

  #mainTable thead th:nth-child(4),
  #mainTable tbody td.t-league {
    white-space: nowrap;
    width: 10%;
  }
}
/* Newsletter-Block */
.newsletter {
  max-width: 600px;
  margin: 2rem auto;
  text-align: center;
}
.newsletter-message {
  margin-bottom: 1rem;
  font-weight: 500;
  color: green;
}
.newsletter-text {
  font-size: 1rem;
  margin-bottom: 1rem;
  color: var(--color-text, #333);
}
.newsletter-form {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
}
.newsletter-form input[type="email"] {
  flex: 1;
  padding: 0.5rem 1rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 1rem;
}
.newsletter-form button {
  padding: 0.5rem 1.5rem;
  background: var(--brand, #ff7f11);
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.3s ease;
}
.newsletter-form button:hover {
  background: var(--brand-dark, #e56700);
}

@media (max-width: 760px) {
  .newsletter-form {
    padding-left: 12px;
    padding-right: 12px;
  }
}