/* ============================================================================ SportStart · App-Branding-Theme (A15) Buildfrei geladen per Render-Hook (panels::head.end) in beiden Panels. Filament nutzt sein Default-CSS; diese Datei liegt DANACH im und überschreibt gezielt. Status-Hex bleiben unangetastet (app/Support/StatusFarbe.php). Self-hosted Fonts (kein Google-CDN, DSGVO). ============================================================================ */ /* ---------- 1 · Fonts (Baloo 2 Headings · Nunito Text) --------------------- */ @font-face { font-family:'Baloo 2'; font-style:normal; font-weight:600; font-display:swap; src:url('/fonts/baloo2-600-latin-ext.woff2') format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face { font-family:'Baloo 2'; font-style:normal; font-weight:600; font-display:swap; src:url('/fonts/baloo2-600-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family:'Baloo 2'; font-style:normal; font-weight:700; font-display:swap; src:url('/fonts/baloo2-700-latin-ext.woff2') format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face { font-family:'Baloo 2'; font-style:normal; font-weight:700; font-display:swap; src:url('/fonts/baloo2-700-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family:'Baloo 2'; font-style:normal; font-weight:800; font-display:swap; src:url('/fonts/baloo2-800-latin-ext.woff2') format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face { font-family:'Baloo 2'; font-style:normal; font-weight:800; font-display:swap; src:url('/fonts/baloo2-800-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family:'Nunito'; font-style:normal; font-weight:600; font-display:swap; src:url('/fonts/nunito-600-latin-ext.woff2') format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face { font-family:'Nunito'; font-style:normal; font-weight:600; font-display:swap; src:url('/fonts/nunito-600-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family:'Nunito'; font-style:normal; font-weight:700; font-display:swap; src:url('/fonts/nunito-700-latin-ext.woff2') format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face { font-family:'Nunito'; font-style:normal; font-weight:700; font-display:swap; src:url('/fonts/nunito-700-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family:'Nunito'; font-style:normal; font-weight:800; font-display:swap; src:url('/fonts/nunito-800-latin-ext.woff2') format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face { font-family:'Nunito'; font-style:normal; font-weight:800; font-display:swap; src:url('/fonts/nunito-800-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } /* ---------- 2 · Marken-Variablen ------------------------------------------ */ :root{ --ss-green:#a3c020; --ss-green-600:#849c1a; --ss-green-ink:#3c4a10; --ss-green-tint:#f4f8e6; --ss-pink:#e5397f; --ss-pink-600:#c72767; --ss-orange:#f28c00; --ss-blue-link:#3f6fa3; --ss-creme:#fff8ec; --ss-sand:#fdeede; --ss-ink:#2a2320; --ss-ink-soft:#6b615a; --ss-line:#ece2d4; --ss-radius-card:16px; --ss-radius-btn:12px; --ss-radius-field:8px; --ss-focus:0 0 0 3px rgba(163,192,32,.30); --ss-card-shadow:0 1px 3px rgba(60,74,16,.05), 0 18px 48px -28px rgba(60,74,16,.16); } .dark{ --ss-green:#b4cf4a; --ss-green-tint:rgba(180,207,74,.14); --ss-creme:#131318; --ss-surface:#18181f; --ss-line:#2e2e38; --ss-ink:#f3f4f6; --ss-ink-soft:#9ca3af; --ss-focus:0 0 0 3px rgba(180,207,74,.32); } /* ---------- 3 · Typografie -------------------------------------------------- */ .fi-body{ font-family:'Nunito', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif; } /* Überschriften in Baloo 2 (Seiten-, Sektions-, Modal-, Widget-Titel + Login) */ .fi-header-heading, .fi-section-header-heading, .fi-modal-heading, .fi-simple-header-heading, .fi-wi-stats-overview-stat-value, .ss-baloo{ font-family:'Baloo 2', 'Nunito', ui-sans-serif, system-ui, sans-serif; font-weight:700; letter-spacing:-.01em; } .fi-wi-stats-overview-stat-value{ font-weight:800; } /* ---------- 4 · Seiten-Hintergrund (Creme) --------------------------------- */ .fi-body{ background-color:var(--ss-creme); } .dark .fi-body{ background-color:#131318; } /* ---------- 5 · Fokus-Ring (Pflicht, Barrierefreiheit) --------------------- */ .fi-body a:focus-visible, .fi-body button:focus-visible, .fi-body [role="button"]:focus-visible, .fi-body .fi-input:focus-visible, .fi-body input:focus-visible, .fi-body select:focus-visible, .fi-body textarea:focus-visible, .fi-body .fi-btn:focus-visible{ outline:2px solid var(--ss-green); outline-offset:2px; border-radius:6px; } /* Formularfeld-Fokus zusätzlich mit weichem Grün-Ring */ .fi-body .fi-input-wrp:focus-within{ box-shadow:var(--ss-focus); border-color:var(--ss-green); } /* ---------- 6 · Karten / Sektionen / Widgets ------------------------------- */ .fi-section, .fi-wi-stats-overview-stat, .fi-ta-ctn{ border-radius:var(--ss-radius-card); } .fi-wi-stats-overview-stat{ box-shadow:var(--ss-card-shadow); } /* ---------- 7 · Links nur in Blau ------------------------------------------ */ .fi-body .fi-link:not(.fi-btn):not([class*="fi-color"]){ color:var(--ss-blue-link); } /* ---------- 8 · Status-Chips (Hex unverändert – nur Optik) ----------------- */ /* Filament-Badges erhalten ihre Farbe aus StatusFarbe::filament(); wir setzen nur Pille + kräftige Schrift gem. Spec. */ .fi-badge{ border-radius:999px; font-weight:800; letter-spacing:.01em; } /* ---------- 9 · Büro-Tabellen: Dichte & Marken-Kopf ------------------------ */ .fi-ta-header-cell{ background-color:#fbf9f3; text-transform:uppercase; letter-spacing:.04em; font-size:11.5px; font-weight:800; color:#8a8078; } .dark .fi-ta-header-cell{ background-color:#1b1b22; color:#9ca3af; } /* Zebra dezent */ .fi-ta-row:nth-child(even){ background-color:#fffdf8; } .dark .fi-ta-row:nth-child(even){ background-color:rgba(255,255,255,.02); } /* MRN o.ä. Mono-Badges gut lesbar */ .fi-ta-text-item .font-mono, .fi-badge .font-mono{ font-variant-numeric:tabular-nums; } /* ---------- 10 · Floh-Backdrop-Helfer -------------------------------------- */ /* Für Floh-PNGs mit weißen Randpixeln auf grünem/dunklem Grund. */ .ss-floh-backdrop{ display:inline-flex; align-items:center; justify-content:center; background:#fffdf8; border-radius:999px; box-shadow:0 2px 8px rgba(0,0,0,.10); } /* ============================================================================ 11 · Custom-Login (zweispaltig, gebrandet) – scoped unter .ss-login ============================================================================ */ /* Karte des Simple-Layouts für die Login-Seite auf volle Breite/ohne Padding. */ main.fi-simple-main:has(.ss-login){ max-width:60rem; padding:0; overflow:hidden; border-radius:20px; box-shadow:var(--ss-card-shadow); } .ss-login{ display:grid; grid-template-columns:1fr 1fr; min-height:30rem; font-family:'Nunito',sans-serif; } /* Linke Markenseite */ .ss-login__marke{ position:relative; display:flex; flex-direction:column; gap:1.5rem; justify-content:center; padding:3rem 2.5rem; color:#fff; background:linear-gradient(158deg,#a3c020,#7f981a); } .ss-login__logokarte{ align-self:flex-start; background:#fff; border-radius:14px; padding:.75rem 1rem; box-shadow:0 6px 18px rgba(0,0,0,.12); } .ss-login__logokarte img{ height:2.75rem; width:auto; display:block; } .ss-login__floh{ width:8rem; height:8rem; } .ss-login__floh img{ width:100%; height:100%; object-fit:contain; padding:1rem; } .ss-login__claim{ font-family:'Baloo 2',sans-serif; font-weight:800; font-size:2rem; line-height:1.1; } .ss-login__sub{ font-weight:700; opacity:.92; margin-top:-.5rem; } /* Rechte Formularseite */ .ss-login__form{ display:flex; flex-direction:column; justify-content:center; padding:3rem 2.75rem; background:#fffdf8; } .dark main.fi-simple-main:has(.ss-login){ box-shadow:0 18px 48px -20px rgba(0,0,0,.6); } .dark .ss-login__form{ background:#18181f; } .ss-login__titel{ font-family:'Baloo 2',sans-serif; font-weight:800; font-size:1.5rem; color:var(--ss-ink); margin-bottom:.25rem; } .dark .ss-login__titel{ color:#f3f4f6; } .ss-login__hint{ color:var(--ss-ink-soft); font-weight:600; margin-bottom:1.5rem; } /* 2FA-Hinweisbox */ .ss-login__2fa{ margin-top:1.5rem; display:flex; gap:.625rem; align-items:flex-start; background:#e9eeff; color:#2f52b3; border-radius:12px; padding:.75rem .875rem; font-size:.8125rem; font-weight:700; line-height:1.35; } .ss-login__2fa svg{ width:1.25rem; height:1.25rem; flex-shrink:0; } .dark .ss-login__2fa{ background:rgba(102,145,255,.14); color:#9db4ff; } /* Mobil: einspaltig, Markenseite als schlanker Kopf */ @media (max-width:640px){ main.fi-simple-main:has(.ss-login){ max-width:26rem; } .ss-login{ grid-template-columns:1fr; min-height:0; } .ss-login__marke{ padding:1.75rem 1.5rem; flex-direction:row; align-items:center; gap:1rem; } .ss-login__floh{ width:4rem; height:4rem; } .ss-login__claim{ font-size:1.375rem; } .ss-login__sub{ display:none; } .ss-login__form{ padding:1.75rem 1.5rem; } }