/* teamfilz Redesign: Design-Tokens und Basis-Komponenten (Quelle: docs/redesign/tokens.css) */

/* Selbst gehostet statt Google-Fonts-CDN (DSGVO: keine IP-Übertragung an Google).
   Nur latin-Subset — deckt Deutsch inkl. Umlaute/ß ab. Lizenz: SIL OFL 1.1 (fonts/OFL-*.txt). */
/* Sora: Fließtext/UI (bessere Lesbarkeit). Archivo bleibt Markenschrift für Schriftzug
   und Anzeigetafel-Kacheln (schmale Variante via font-stretch). */
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url(/fonts/sora-latin-var.woff2) format('woff2');
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url(/fonts/archivo-latin-var.woff2) format('woff2');
}


:root {
  /* Farben */
  --tf-night: #13244A;        /* Header, Primärtext, dunkle Flächen */
  --tf-court: #2F5FAF;        /* Hartplatz-Blau: Links, Platzfläche im Logo */
  --tf-court-surround: #234885; /* Umrandung des Platzes im Logo (Logo-Update F2) */
  --tf-clay: #B4532A;         /* Sandplatz: Trainings (Kontrast zu Weiß 5:1) */
  --tf-ball: #E4F64A;         /* Filzball-Gelb: Primär-CTA, aktive Zustände */
  --tf-chalk: #F4F2EA;        /* Kreide: App-Hintergrund */
  --tf-white: #FFFFFF;        /* Karten, Platzlinien */
  --tf-board: #1B1B1B;        /* Anzeigetafel-Kacheln */
  --tf-board-on-night: #0B1530; /* Kacheln auf Nachtblau */
  --tf-footer: #0E1B3A;

  --tf-text: #13244A;
  --tf-text-2: #3B4560;
  --tf-muted: #5B6478;
  --tf-on-dark: #FFFFFF;
  --tf-on-dark-2: #C9D6EE;
  --tf-on-dark-3: #A9C2EC;

  --tf-border: #D9D4C5;
  --tf-divider: #EFECE3;
  --tf-divider-2: #E3DFD2;

  /* Status */
  --tf-yes-bg: #DCEFE3;  --tf-yes-fg: #1D6B43;
  --tf-open-bg: #EFECE3; --tf-open-fg: #5B6478;
  --tf-no-bg: #F6DED8;   --tf-no-fg: #9A3220;
  --tf-info-bg: #E8EEF9; --tf-info-fg: #2F5FAF;

  /* Schrift */
  --tf-font: 'Sora', system-ui, sans-serif;
  --tf-font-brand: 'Archivo', system-ui, sans-serif; /* Schriftzug "teamfilz" + Anzeigetafel */

  /* Radien */
  --tf-r-chip: 8px;
  --tf-r-control: 12px;
  --tf-r-cta: 14px;
  --tf-r-card: 16px;
  --tf-r-card-lg: 20px;

  /* Abstände */
  --tf-gutter: 16px;          /* Inhalt links/rechts */
  --tf-header-pad: 20px;      /* Header links/rechts */
  --tf-nav-h: 84px;           /* untere Navigation */
  --tf-touch: 44px;           /* Mindesthöhe für Bedienelemente */

}

body { margin: 0; background: var(--tf-chalk); color: var(--tf-text); font-family: var(--tf-font); }
a { color: var(--tf-court); }

/* Typografie */
.tf-h1 { margin: 0; font-size: 30px; font-weight: 800; letter-spacing: -0.5px; }
.tf-h2 { margin: 0; font-size: 17px; font-weight: 800; }
.tf-display { font-weight: 900; letter-spacing: -3px; line-height: 0.98; }
.tf-label { font-family: var(--tf-font); font-weight: 600; font-size: 12px; letter-spacing: 0.6px; text-transform: uppercase; color: var(--tf-muted); }
.tf-meta { font-size: 12px; color: var(--tf-muted); }

/* Header: einfarbig Nachtblau (Platzlinien entfallen mit dem Logo-Update; das Logo zeigt den Platz) */
.tf-header { position: relative; overflow: hidden; background: var(--tf-night); color: var(--tf-on-dark); padding: 12px var(--tf-header-pad) 16px; }
.tf-header > * { position: relative; }

/* Anzeigetafel-Kachel: Zahlen, Platzierungen, Positionen */
.tf-tile {
  position: relative; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 30px; height: 40px; border-radius: 5px;
  background: var(--tf-board); color: #fff;
  font-family: var(--tf-font-brand); font-weight: 800; font-stretch: 65%; font-size: 30px; line-height: 1;
}
.tf-tile::after { content: ""; position: absolute; left: 0; right: 0; top: calc(50% - 0.75px); height: 1.5px; background: #000; opacity: 0.5; }
.tf-tile--sm { width: 22px; height: 30px; font-size: 20px; }
.tf-tile--lg { width: 56px; height: 76px; font-size: 62px; border-radius: 8px; }
.tf-tile--on-night { background: var(--tf-board-on-night); }
.tf-tile--ball { background: var(--tf-ball); color: #111; }
.tf-tile--doubles { width: 34px; background: var(--tf-night); color: var(--tf-ball); font-size: 20px; }

/* Buttons */
.tf-btn { height: 52px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 20px;
  border-radius: var(--tf-r-cta); font: 700 16px var(--tf-font); text-decoration: none; cursor: pointer; border: 1.5px solid transparent; }
.tf-btn--primary { background: var(--tf-ball); color: var(--tf-night); font-weight: 800; }
.tf-btn--outline { background: #fff; color: var(--tf-night); border-color: var(--tf-night); }
.tf-btn--quiet { background: #fff; color: var(--tf-night); border-color: var(--tf-border); }
.tf-btn--sm { height: 44px; font-size: 14px; border-radius: var(--tf-r-control); }

/* Zu-/Absage */
.tf-rsvp { display: flex; gap: 8px; }
.tf-rsvp button { flex: 1 1 0; height: 48px; border-radius: var(--tf-r-control); font: 700 15px var(--tf-font);
  background: #fff; color: var(--tf-night); border: 1.5px solid var(--tf-border); cursor: pointer; }
.tf-rsvp button[aria-pressed="true"].is-yes { background: var(--tf-ball); border-color: var(--tf-ball); font-weight: 800; }
.tf-rsvp button[aria-pressed="true"].is-no { background: var(--tf-night); border-color: var(--tf-night); color: #fff; }

/* Chips */
.tf-chip { flex-shrink: 0; font-family: var(--tf-font); font-weight: 600; font-size: 12px; padding: 5px 8px; border-radius: var(--tf-r-chip); }
.tf-chip--yes { background: var(--tf-yes-bg); color: var(--tf-yes-fg); }
.tf-chip--open { background: var(--tf-open-bg); color: var(--tf-open-fg); }
.tf-chip--no { background: var(--tf-no-bg); color: var(--tf-no-fg); }
.tf-chip--info { background: var(--tf-info-bg); color: var(--tf-info-fg); }

/* Karten und Listen */
.tf-card { background: #fff; border-radius: var(--tf-r-card); overflow: hidden; }
.tf-row { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 0 14px; border-bottom: 1px solid var(--tf-divider); text-decoration: none; color: inherit; }
.tf-row:last-child { border-bottom: 0; }

/* Datums-Kachel in Terminlisten (Spiel = Nachtblau/Gelb, Training = weiß) */
.tf-date { width: 46px; height: 52px; box-sizing: border-box; border-radius: 10px; border: 1.5px solid var(--tf-divider-2);
  background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; flex-shrink: 0; }
.tf-date small { font-family: var(--tf-font); font-weight: 600; font-size: 11px; letter-spacing: 1px; }
.tf-date strong { font-size: 20px; font-weight: 800; line-height: 1.1; }
.tf-date--match { background: var(--tf-night); border-color: var(--tf-night); color: var(--tf-ball); }

/* Segment-Umschalter im Header (Liste/Kalender/Archiv, Tabelle/Spielplan) */
.tf-seg { display: flex; gap: 4px; padding: 4px; border-radius: var(--tf-r-control); background: rgba(255,255,255,0.08); }
.tf-seg button { flex: 1 1 0; height: 40px; border: 0; border-radius: 9px; background: transparent; color: #fff; font: 600 14px var(--tf-font); cursor: pointer; }
.tf-seg button[aria-selected="true"] { background: #fff; color: var(--tf-night); font-weight: 700; }

/* Filter-Pillen im Header */
.tf-pill { height: 36px; padding: 0 16px; border: 0; border-radius: 18px; background: rgba(255,255,255,0.08); color: #fff; font: 700 14px var(--tf-font); cursor: pointer; }
.tf-pill[aria-pressed="true"] { background: var(--tf-ball); color: var(--tf-night); }

/* Untere Navigation */
.tf-nav { position: fixed; left: 0; right: 0; bottom: 0; height: var(--tf-nav-h); box-sizing: border-box;
  padding: 8px 8px env(safe-area-inset-bottom); background: #fff; border-top: 1px solid var(--tf-divider-2);
  display: flex; justify-content: space-around; align-items: flex-start; }
.tf-nav a { width: 70px; display: flex; flex-direction: column; align-items: center; gap: 4px; text-decoration: none; color: var(--tf-muted); font-size: 11px; font-weight: 500; }
.tf-nav a .tf-nav-pill { width: 52px; height: 30px; border-radius: 15px; display: flex; align-items: center; justify-content: center; }
.tf-nav a[aria-current="page"] { color: var(--tf-night); font-weight: 700; }
.tf-nav a[aria-current="page"] .tf-nav-pill { background: var(--tf-ball); }

/* Schalter */
.tf-switch { position: relative; width: 52px; height: 32px; padding: 0; border: 0; border-radius: 16px; background: var(--tf-border); cursor: pointer; }
.tf-switch::after { content: ""; position: absolute; top: 4px; left: 4px; width: 24px; height: 24px; border-radius: 12px; background: #fff; transition: left .15s; }
.tf-switch[aria-pressed="true"] { background: var(--tf-night); }
.tf-switch[aria-pressed="true"]::after { left: 24px; background: var(--tf-ball); }

/* Formulare */
.tf-input { height: 48px; box-sizing: border-box; width: 100%; padding: 0 14px; border: 1.5px solid var(--tf-border);
  border-radius: var(--tf-r-control); background: #fff; font: 16px var(--tf-font); color: var(--tf-text); }
.tf-input:focus { outline: 2px solid var(--tf-court); outline-offset: 1px; }
.tf-field-label { font-size: 13px; font-weight: 700; }