/* * JETZT.GOLF – Design-Tokens. EINZIGE QUELLE DER WAHRHEIT. * * Wird von Web-App UND öffentlicher Status-Seite eingebunden. Werte hier ändern * = überall ändern. Doku & Regeln: Claude/Styleguide.md. * * Kanonische Namen sind `--jg-*`. Darunter Rückwärts-Aliase (--g, --gruen, …), * damit bestehendes CSS unverändert weiterläuft. */ :root { /* ---- Farben ---- */ --jg-green: #0f6e56; /* Marke, primär (Buttons, Links, Logo) */ --jg-green-dark: #0c5b47; /* Hover primär */ /* NUR FLÄCHE, RAHMEN ODER SYMBOL – NIE TEXTFARBE. Auf Weiß nur 3,4:1: das genügt für ein Bedienelement, nicht für Schrift (dafür braucht es 4,5:1). Wer damit Text einfärben will, nimmt --jg-green (6,2:1). Am 15.08.2026 an sechs Stellen korrigiert. */ --jg-green-light: #1d9e75; /* an / geöffnet / aktiv */ --jg-red: #c0392b; /* aus / geschlossen / Gefahr */ /* Heller Rotton fuer RAENDER, nie fuer Text: 2,1:1 gegen Weiss – als Schrift unlesbar, als Kontur genau richtig (Konturen brauchen 3:1 nur, wenn sie ein Bedienelement BEGRENZEN; hier tut das zusaetzlich das Zeichen darin). Angelegt 25.08.2026 fuer den Entfernen-Knopf der Spielerliste. */ --jg-red-hell: #e3b3ad; /* Am 15.08.2026 von #b8860b abgedunkelt (Farbton bleibt, 42,7° -> 41,3°). Amber steht IMMER an Schrift: entweder als Textfarbe auf einer hellen Tönung oder als Fläche unter weißer Schrift – beides lag mit 2,9-3,3:1 unter der Lesbarkeitsschwelle, auf der getönten Fläche schlechter als auf Weiß. Jetzt durchweg über 5:1. Nicht wieder aufhellen. */ --jg-amber: #8a5f00; /* pausiert / wartend (Automatik-Status) */ /* Am 15.08.2026 leicht abgedunkelt (#b4560f, Farbton 25,8° -> 26,1°). Nur EINE Konstellation fiel durch – Text auf `--jg-orange-tint` mit 4,42:1 (Veranstaltung im Turnierkalender, Belegzeit-Formular). Trotzdem am Token geändert statt eine zweite Stufe einzuführen: für 0,08 lohnt kein zusätzlicher Farbwert, den danach jeder verwechselt. Jetzt alles über 5,2:1. */ --jg-orange: #a34d0b; /* Veranstaltung (kein Turnier) – Rahmen/Text */ --jg-bg: #f5f8f6; /* Seitenhintergrund */ --jg-card: #ffffff; /* Karten, Kopf-/Fußleiste, Felder */ --jg-ink: #15211c; /* Haupttext */ --jg-muted: #5c6b64; /* Sekundärtext, Icons */ --jg-line: #e4eae7; /* Trennlinien, Rahmen */ --jg-switch-off: #cfd8d3; /* Schalter aus */ /* Abgeleitete Flächen-Tönungen (projektweit) */ --jg-green-tint: #e3f3ea; /* aktive Navigation, Rollen-Badge */ --jg-green-wash: #f0faf5; /* grüne Hover-Fläche */ --jg-green-faint: #edf7f1; /* SEHR leichte grüne Fläche: abgegrenzte Einstellungsbereiche */ --jg-hover: #eef2f0; /* neutrale Hover-Fläche */ --jg-green-rand: #b7ddc9; /* dezenter grüner Rahmen (Mannschaftsspiele) */ --jg-orange-tint: #fdf1e7; /* sehr leichte orange Fläche (Veranstaltungen) */ --jg-orange-rand: #eccfb4; /* dezenter oranger Rahmen (Veranstaltungen) */ /* Rahmen um AUFKLAPPBARE Bereiche – projektweit gleich, damit man überall auf einen Blick sieht: hier steckt noch etwas dahinter. Bewusst etwas dicker als die normalen Linien (1px) und grün, aber nicht in Signalgrün – es soll führen, nicht schreien. */ --jg-aufklapp-rand: #9ed3b8; --jg-aufklapp-staerke: 2px; /* ---- Typografie ---- */ --jg-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* Schnitte: 400 Standard · 500 Navigation/Labels · 600 Namen/Buttons/Überschriften · 700 Marke/AKTIV */ /* Sub-Headlines (Feldnamen/Bereichsüberschriften wie „Beschreibung", „Plätze", „Greenfee"). EIN Schema, projektweit – hier ändern = überall ändern. */ --jg-subhead-size: 15px; --jg-subhead-weight: 500; /* ---- Breiten (Layout) ---- */ /* Zwei Breiten, nach Inhalt getrennt – NICHT nach Seite: - `wide` für Listen, Karten, Kacheln, Bilder (Status, Club, Turniere, Backend). Dort ist Breite Nutzen: mehr passt nebeneinander, weniger bricht um. - `read` für Fließtext (Impressum, Datenschutz, Ausschreibung) und für Textabsätze INNERHALB der breiten Seiten. Rund 70 Zeichen je Zeile; wird eine Zeile deutlich länger, verliert das Auge beim Rücksprung die nächste Zeile. Beides sind max-width-Werte: auf dem Handy wirken sie gar nicht, nur am Desktop. */ --jg-w-wide: 1080px; /* Listen-/Kartenseiten (Desktop-Obergrenze) */ --jg-w-app: var(--jg-w-wide); /* Backend: Kopf, Inhalt, Fuß – gleiche Kante */ --jg-w-read: 640px; /* Fließtext: Rechtsseiten, Ausschreibung, Absätze */ --jg-w-form: 600px; /* Formularspalte innerhalb der Web-App (linksbündig) */ /* Der Club-Bereich ist kein gewöhnliches Formular: Plätze, Webcams, Indoor und die großen Textfelder brauchen Platz. 600 px liessen ihn neben der breiten Seite unfertig wirken. */ --jg-w-club: 880px; --jg-w-login: 380px; /* zentrierte Login-Karte */ --jg-gutter: 18px; /* seitlicher Innenabstand der Leisten/Spalten */ /* ---- Radien ---- */ --jg-r-sm: 8px; --jg-r: 10px; --jg-r-lg: 14px; --jg-r-pill: 99px; /* ---- Buttons (einheitliche CTA-Größe projektweit) ---- */ --jg-btn-pad: 8px 16px; --jg-btn-fs: 14px; /* ---- Fokus-Ring ---- */ --jg-focus: 0 0 0 3px rgba(29,158,117,.15); /* ===== Rückwärts-Aliase (nicht in neuem CSS verwenden) ===== */ /* Web-App */ --g: var(--jg-green); --gb: var(--jg-green-light); --rd: var(--jg-red); --bg: var(--jg-bg); --cd: var(--jg-card); --ink: var(--jg-ink); --mut: var(--jg-muted); --ln: var(--jg-line); --schalter-aus: var(--jg-switch-off); /* Status-/Rechtsseiten */ --gruen: var(--jg-green-light); --rot: var(--jg-red); --text: var(--jg-ink); --grau: var(--jg-muted); --linie: var(--jg-line); --karte: var(--jg-card); } /* ---- Eingabefelder auf Touch-Geräten ---- iOS Safari zoomt beim Antippen automatisch in JEDES Eingabefeld, dessen Schrift kleiner als 16px ist. Die Seite wird dadurch breiter als der Bildschirm: Der Kopf steht angeschnitten, und beim Tippen sieht es aus, als zerreiße das Layout (am 27.07.2026 an der Turniersuche gemeldet). Deshalb gilt hier für ALLE öffentlichen Seiten: auf Touch-Geräten mindestens 16px. Am Bildschirm bleibt jede Seite bei ihren eigenen, kompakteren Größen – `pointer: coarse` trifft nur Finger, nicht die Maus. Der Viewport-Meta bleibt bewusst ohne `maximum-scale=1`: Damit ließe sich der Zoom auch unterbinden, es nimmt aber allen Nutzern das Vergrößern. NEUE FELDER brauchen nichts extra – außer sie setzen selbst eine kleinere Größe über einen spezifischeren Selektor. Dann dort ebenfalls auf 16px gehen (siehe Claude/Styleguide.md). */ @media (pointer: coarse) { input, select, textarea { font-size: 16px; } } /* ---- Doppeltipp-Zoom auf Bedienelementen abschalten ---- iOS Safari zoomt bei zwei schnellen Antippern auf das getroffene Element – und bleibt danach gezoomt. Beim Bedienen passiert das leicht: Feld verlassen und gleich auf „Abbrechen" tippen, Schalter zweimal antippen. Die Ansicht wirkt danach „zerrissen" (am iPhone gemeldet, 27.07.2026, auch beim reinen Knopfdruck – ein Knopf löst den Feld-Zoom gar nicht aus). `manipulation` erlaubt weiterhin Tippen, Scrollen und Wischen; es fällt nur der Doppeltipp-Zoom auf DIESEN Elementen weg. Das Vergrößern mit zwei Fingern bleibt überall erhalten – anders als bei `maximum-scale=1`, das wir bewusst nicht setzen. Auf Fließtext gilt die Regel absichtlich nicht, dort ist der Doppeltipp zum Vergrößern nützlich. */ button, a, label, summary, input, select, textarea, [role="button"], [role="option"], [role="switch"] { touch-action: manipulation; } /* ---- Markenfuß (Frontend UND Backend) ---- Erzeugt von markenfuss.js; steht ganz unten, unter der Fußzeile mit Impressum/Datenschutz. Warum dieses CSS ausgerechnet HIER steht: tokens.css ist die einzige Datei, die wirklich ALLE Seiten laden – die sechs öffentlichen, die Konto-Formulare (die konto.css statt kopfmenue.css laden) und die drei im Backend. Jede andere Ablage hiesse, dieselbe Regel an zwei bis drei Stellen zu pflegen. Präzedenzfall ist die 16px-Touch-Regel weiter oben. */ .markenfuss { background: var(--jg-green); color: #fff; flex-shrink: 0; } .markenfuss-inner { max-width: var(--jg-w-wide); margin: 0 auto; padding: 14px var(--jg-gutter); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 22px; font-size: 14px; } .markenfuss-kontakt { display: flex; flex-wrap: wrap; gap: 6px 22px; } /* Weiß auf Grün, auch für Links – eine blaue Standardfarbe wäre hier unlesbar. Unterstrichen, damit sie als Links erkennbar bleiben. */ .markenfuss a { color: #fff; text-decoration: underline; } .markenfuss a:hover { text-decoration: none; } /* Handy: Marke und Kontakt untereinander statt gequetscht nebeneinander. */ @media (max-width: 560px) { .markenfuss-inner { flex-direction: column; align-items: flex-start; gap: 4px; } .markenfuss-kontakt { flex-direction: column; gap: 2px; } } /* ---- Installationshinweis (PWA) -------------------------------------------------------------- Erzeugt von `installhinweis.js`, sitzt in der Fußzeile (`.sitefoot-inner`) LINKS neben Impressum/Datenschutz. Hier in tokens.css, weil das die einzige Datei ist, die Frontend und Backend gemeinsam laden – wie beim Markenfuß darüber. Ausdrücklich KEIN `margin-left: auto`: Das tragen `.jg-konto-wer`/`.jg-anmelden`, und ein zweites davon liesse Flexbox den freien Platz dazwischen verteilen. */ .jg-install { display: flex; align-items: center; } .jg-install-knopf { display: inline-flex; align-items: center; gap: 6px; background: none; border: 1px solid var(--jg-line); border-radius: var(--jg-r-sm); padding: 5px 10px; color: var(--jg-green); font-size: 13px; font-weight: 500; font-family: inherit; cursor: pointer; } .jg-install-knopf:hover { background: var(--jg-green-wash); } /* PFLICHT, nicht Kosmetik: `hidden` wirkt nur über das `display: none` im Standardstil des Browsers – jede eigene `display`-Regel schlägt es. Der Hinweis startet versteckt (er darf erst erscheinen, wenn der Browser die Installation anbietet) und stand ohne diese Zeile trotzdem da, als toter Knopf. Im DOM meldete er brav `hidden === true`; aufgefallen ist es erst beim Messen des tatsächlichen `display`-Werts. Beide Selektoren, damit es auch stimmt, wenn später wieder der Knopf statt der Hülle versteckt wird. */ .jg-install[hidden], .jg-install-knopf[hidden] { display: none !important; } .jg-install-tipp { display: inline-flex; align-items: center; gap: 6px; color: var(--jg-muted); font-size: 13px; } /* Das Teilen-Symbol ist ein inline-SVG (die öffentlichen Seiten laden den Icon-Font nicht) – es darf beim Umbruch nicht schrumpfen. */ .jg-install svg { flex: 0 0 auto; } /* Handy: Die Fußzeile hat nur `gap`, kein Umbruch – mit dem Hinweis wird sie sonst gequetscht. */ @media (max-width: 560px) { .sitefoot-inner { flex-wrap: wrap; row-gap: 10px; } } /* ---- ABSCHLAGSFARBEN (25.08.2026 zentralisiert) ---- Die Farben der Tees – als Punkt (kraeftig) und als Flaeche (ganz dezent, eine Zuordnungshilfe und kein Farbfeld). ⚠️ SIE STANDEN BIS HIERHER NUR INLINE IN `club.html`, mit dem Hinweis „wer dort eine Farbe aendert, muss sie hier mitaendern". Mit der dritten Verwendung (Spielerliste im Rundenstart) waere daraus ein Dreieck geworden, das garantiert auseinanderlaeuft. Jetzt eine Quelle. Die Werte sind woertlich uebernommen, nicht neu gewaehlt: Sie sind auf der Clubseite seit Phase 11 im Einsatz und dort im Bild abgenommen. */ :root { --jg-tee-gelb: #f2c200; --jg-tee-blau: #2f6fd0; --jg-tee-rot: #cf2f2f; --jg-tee-weiss: #fff; --jg-tee-schwarz: #1b1b1b; --jg-tee-orange: #e07b1a; --jg-tee-gruen: #2e8b45; --jg-tee-keine: var(--bg); --jg-teeflaeche-gelb: rgba(242, 194, 0, .13); --jg-teeflaeche-blau: rgba( 47, 111, 208, .09); --jg-teeflaeche-rot: rgba(207, 47, 47, .08); --jg-teeflaeche-weiss: rgba( 0, 0, 0, .03); --jg-teeflaeche-schwarz: rgba( 0, 0, 0, .06); --jg-teeflaeche-orange: rgba(224, 123, 26, .10); --jg-teeflaeche-gruen: rgba( 46, 139, 69, .09); --jg-teeflaeche-keine: transparent; }