/* ========================================================================== Kickbase Companion - Designsystem ========================================================================== Zwei Themen, hell als Vorgabe. Eine Akzentfarbe fuer Handlung, drei Signalfarben fuer Richtung (gut, Achtung, schlecht) - mehr nicht. Farbe traegt hier Bedeutung, sie ist keine Dekoration. ========================================================================== */ /* Zwei Themen. Hell ist die Vorgabe - am Schreibtisch und beim Herzeigen liest es sich besser; dunkel bleibt fuer den Abend und den Spieltag. Umgeschaltet wird ueber data-theme am , gemerkt in localStorage. Beide Themen benutzen dieselben Variablennamen, damit kein Bauteil zwei Faelle kennen muss. */ :root { /* Flaechen - hell */ --bg: #f6f7f9; --bg-erhoben: #ffffff; --bg-karte: #ffffff; --bg-tiefer: #f1f3f6; --rand: #e2e6ec; --rand-hell: #cfd6e0; /* Schrift */ --text: #12151c; --text-dim: #565f70; --text-leise: #7c8496; --schatten: 0 1px 2px rgba(16,24,40,.05), 0 4px 14px rgba(16,24,40,.06); } :root[data-theme="dunkel"] { --bg: #0b0d12; --bg-erhoben: #14171f; --bg-karte: #161a23; --bg-tiefer: #10131a; --rand: #232937; --rand-hell: #2f3747; --text: #eef1f6; --text-dim: #939bab; --text-leise: #6b7385; --schatten: 0 1px 2px rgba(0,0,0,.4), 0 4px 16px rgba(0,0,0,.25); } :root { /* Signal */ --akzent: #2563eb; --akzent-dim: #bfd3fb; --gruen: #17904a; --gelb: #a86a05; --rot: #cc2b31; --lila: #7c3aed; --grau: #98a1b3; /* Abstaende - eine Skala, keine Zufallswerte */ --s1: 0.25rem; --s2: 0.5rem; --s3: 0.75rem; --s4: 1rem; --s5: 1.5rem; --s6: 2rem; --s7: 3rem; --radius: 10px; --radius-s: 7px; } :root[data-theme="dunkel"] { --akzent: #4f8cff; --akzent-dim: #2b4a8a; --gruen: #3fbf72; --gelb: #f2b13c; --rot: #ef4d52; --lila: #a97bff; --grau: #5c6474; } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; } a { color: var(--akzent); } /* -------------------------------------------------------------------------- Grundgeruest -------------------------------------------------------------------------- */ .huelle { max-width: 1120px; margin: 0 auto; padding: 0 var(--s4) var(--s7); } .kopfleiste { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: saturate(1.4) blur(12px); border-bottom: 1px solid var(--rand); margin-bottom: var(--s5); } .kopfleiste-innen { max-width: 1120px; margin: 0 auto; padding: var(--s3) var(--s4); display: flex; align-items: center; gap: var(--s5); } .marke { font-weight: 700; letter-spacing: -0.02em; font-size: 0.95rem; color: var(--text); text-decoration: none; white-space: nowrap; } .marke span { color: var(--akzent); } .nav { display: flex; gap: var(--s1); overflow-x: auto; scrollbar-width: none; flex: 1; } .nav::-webkit-scrollbar { display: none; } .nav a { color: var(--text-dim); text-decoration: none; font-size: 0.875rem; font-weight: 550; padding: var(--s2) var(--s3); border-radius: var(--radius-s); white-space: nowrap; transition: background .12s, color .12s; } .nav a:hover { color: var(--text); background: var(--bg-erhoben); } .nav a.aktiv { color: var(--text); background: var(--bg-erhoben); box-shadow: inset 0 0 0 1px var(--rand-hell); } .abmelden { color: var(--text-leise); font-size: 0.8rem; text-decoration: none; white-space: nowrap; } .abmelden:hover { color: var(--text); } /* -------------------------------------------------------------------------- Typografie -------------------------------------------------------------------------- */ .seitenkopf { margin: 0 0 var(--s5); } .seitenkopf h1 { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; margin: 0; } .seitenkopf p { color: var(--text-dim); font-size: 0.9rem; margin: var(--s2) 0 0; max-width: 68ch; } h2 { font-size: 1.05rem; font-weight: 650; letter-spacing: -0.01em; margin: 0; } h3 { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-leise); margin: 0 0 var(--s3); } .klein { font-size: 0.82rem; color: var(--text-dim); margin: var(--s1) 0; } .leise { font-size: 0.76rem; color: var(--text-leise); } .fehler { color: var(--rot); } .erfolg { color: var(--gruen); } .warn { color: var(--gelb); } /* Deckungsausweis: worueber eine Zahl urteilt und worueber nicht. Bewusst unauffaellig, aber nie versteckt - er gehoert zu jeder Ausgabe. */ .deckung { font-size: 0.75rem; color: var(--text-leise); margin: var(--s3) 0 0; padding-top: var(--s2); border-top: 1px dashed var(--rand); } /* -------------------------------------------------------------------------- Karten und Raster -------------------------------------------------------------------------- */ .karte { background: var(--bg-karte); border: 1px solid var(--rand); border-radius: var(--radius); padding: var(--s4); margin-bottom: var(--s4); box-shadow: var(--schatten); } .karte-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; margin-bottom: var(--s4); } .stand { font-size: 0.75rem; font-weight: 400; color: var(--text-leise); } .raster { display: grid; gap: var(--s4); } @media (min-width: 800px) { .raster-2 { grid-template-columns: 1fr 1fr; } .raster-3 { grid-template-columns: repeat(3, 1fr); } .raster-seite { grid-template-columns: minmax(0,1.6fr) minmax(0,1fr); align-items: start; } } /* Kennzahlen */ .kennzahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px,1fr)); gap: var(--s3); } .kennzahl { background: var(--bg-tiefer); border: 1px solid var(--rand); border-radius: var(--radius-s); padding: var(--s3); } .kennzahl .wert { font-size: 1.35rem; font-weight: 650; letter-spacing: -0.02em; display: block; } .kennzahl .titel { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-leise); } .kennzahl .fuss { font-size: 0.75rem; color: var(--text-dim); } .wert--gruen { color: var(--gruen); } .wert--rot { color: var(--rot); } .wert--gelb { color: var(--gelb); } /* -------------------------------------------------------------------------- Marken und Abzeichen -------------------------------------------------------------------------- */ .abzeichen { display: inline-flex; align-items: center; gap: 0.3em; font-size: 0.7rem; font-weight: 650; letter-spacing: 0.03em; padding: 0.16em 0.5em; border-radius: 5px; background: var(--bg-erhoben); color: var(--text-dim); border: 1px solid var(--rand-hell); white-space: nowrap; } /* Rand und Flaeche aus der Signalfarbe gemischt - funktioniert in beiden Themen, ohne jede Farbe zweimal zu pflegen. */ .abzeichen--gruen { color: var(--gruen); border-color: color-mix(in srgb, var(--gruen) 40%, transparent); background: color-mix(in srgb, var(--gruen) 11%, transparent); } .abzeichen--gelb { color: var(--gelb); border-color: color-mix(in srgb, var(--gelb) 40%, transparent); background: color-mix(in srgb, var(--gelb) 11%, transparent); } .abzeichen--rot { color: var(--rot); border-color: color-mix(in srgb, var(--rot) 45%, transparent); background: color-mix(in srgb, var(--rot) 12%, transparent); } .abzeichen--blau { color: var(--akzent);border-color: color-mix(in srgb, var(--akzent) 40%, transparent);background: color-mix(in srgb, var(--akzent) 11%, transparent); } .abzeichen--lila { color: var(--lila); border-color: color-mix(in srgb, var(--lila) 40%, transparent); background: color-mix(in srgb, var(--lila) 11%, transparent); } .pos { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 0.68rem; width: 2.4em; text-align: center; display: inline-block; } .pos--1 { color: var(--gelb); } .pos--2 { color: var(--akzent); } .pos--3 { color: var(--gruen); } .pos--4 { color: var(--rot); } /* -------------------------------------------------------------------------- Tabellen -------------------------------------------------------------------------- */ .tabelle-scroll { overflow-x: auto; margin: 0 calc(-1 * var(--s4)); padding: 0 var(--s4); } table.t { width: 100%; border-collapse: collapse; font-size: 0.85rem; } table.t th { text-align: right; font-size: 0.68rem; font-weight: 650; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-leise); padding: 0 var(--s3) var(--s2); border-bottom: 1px solid var(--rand); white-space: nowrap; } table.t td { text-align: right; padding: var(--s2) var(--s3); border-bottom: 1px solid var(--rand); white-space: nowrap; font-variant-numeric: tabular-nums; } table.t th:first-child, table.t td:first-child { text-align: left; padding-left: 0; } table.t th:last-child, table.t td:last-child { padding-right: 0; } table.t tbody tr:hover { background: color-mix(in srgb, var(--text) 4%, transparent); } table.t tr.eigen { background: color-mix(in srgb, var(--akzent) 8%, transparent); } table.t tr.eigen td:first-child { color: var(--akzent); font-weight: 650; } table.t td.name { font-weight: 550; color: var(--text); white-space: normal; min-width: 8em; } table.t tfoot td { border-bottom: none; padding-top: var(--s3); font-weight: 650; } /* Balken in Tabellenzellen - Groessenverhaeltnisse sieht man, Zahlen liest man */ .balken { position: relative; display: block; height: 3px; border-radius: 2px; background: var(--rand-hell); margin-top: 3px; } .balken i { position: absolute; inset: 0 auto 0 0; border-radius: 2px; background: var(--akzent); } .balken--gruen i { background: var(--gruen); } .balken--rot i { background: var(--rot); } /* -------------------------------------------------------------------------- Listen -------------------------------------------------------------------------- */ .liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s2); } .liste li { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s3); padding: var(--s2) var(--s3); border-radius: var(--radius-s); background: var(--bg-tiefer); border-left: 3px solid var(--grau); } .liste .name { font-weight: 600; } .liste .zusatz { font-size: 0.78rem; color: var(--text-dim); } .liste .rechts { margin-left: auto; font-size: 0.8rem; color: var(--text-dim); font-variant-numeric: tabular-nums; text-align: right; } /* Phasenfarben - dieselbe Bedeutung ueberall in der App */ .phase-starker-Abstieg { border-left-color: var(--rot); } .phase-abschwaechender-Anstieg { border-left-color: var(--gelb); } .phase-verlangsamender-Abstieg { border-left-color: var(--grau); } .phase-starker-Anstieg { border-left-color: var(--gruen); } .phase-Wende-oben, .phase-Wende-unten { border-left-color: var(--akzent); } .phasengruppe { border-left: 3px solid var(--grau); border-radius: var(--radius-s); background: var(--bg-tiefer); padding: var(--s3); margin-bottom: var(--s2); } .phasenkopf { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s2); } .phasenkopf strong { font-size: 0.9rem; } .chips { margin: 0; display: flex; flex-wrap: wrap; gap: var(--s1); } .chip { display: inline-flex; align-items: baseline; gap: 0.35em; background: var(--bg-erhoben); border: 1px solid var(--rand); border-radius: 6px; padding: 0.2rem 0.5rem; font-size: 0.8rem; } .chip em { font-style: normal; color: var(--text-leise); font-size: 0.72rem; } /* -------------------------------------------------------------------------- Handlungsleiste - "was tue ich heute" -------------------------------------------------------------------------- */ .handlung { display: flex; gap: var(--s3); align-items: flex-start; padding: var(--s3) var(--s4); border-radius: var(--radius); border: 1px solid var(--rand); background: var(--bg-tiefer); margin-bottom: var(--s3); } .handlung-punkt { width: 8px; height: 8px; border-radius: 50%; margin-top: .5em; flex: none; background: var(--grau); } .handlung--gruen { border-color: color-mix(in srgb, var(--gruen) 35%, transparent); background: color-mix(in srgb, var(--gruen) 7%, transparent); } .handlung--gruen .handlung-punkt { background: var(--gruen); } .handlung--gelb { border-color: color-mix(in srgb, var(--gelb) 40%, transparent); background: color-mix(in srgb, var(--gelb) 8%, transparent); } .handlung--gelb .handlung-punkt { background: var(--gelb); } .handlung--rot { border-color: color-mix(in srgb, var(--rot) 45%, transparent); background: color-mix(in srgb, var(--rot) 9%, transparent); } .handlung--rot .handlung-punkt { background: var(--rot); } .handlung-text { flex: 1; min-width: 0; } .handlung-text strong { display: block; font-size: 0.93rem; } .handlung-text p { margin: var(--s1) 0 0; font-size: 0.82rem; color: var(--text-dim); } .handlung a.mehr { font-size: 0.8rem; white-space: nowrap; text-decoration: none; } .handlung a.mehr:hover { text-decoration: underline; } /* -------------------------------------------------------------------------- Spielfeld -------------------------------------------------------------------------- */ .feld { background: linear-gradient(180deg, color-mix(in srgb, var(--gruen) 9%, transparent), color-mix(in srgb, var(--gruen) 3%, transparent)), var(--bg-tiefer); border: 1px solid var(--rand); border-radius: var(--radius); padding: var(--s4) var(--s3); display: flex; flex-direction: column; gap: var(--s4); position: relative; overflow: hidden; } .feld::before { content: ""; position: absolute; left: 8%; right: 8%; top: 50%; border-top: 1px dashed color-mix(in srgb, var(--text) 12%, transparent); } .reihe { display: flex; justify-content: center; gap: var(--s2); flex-wrap: wrap; position: relative; } .spieler-karte { background: var(--bg-erhoben); border: 1px solid var(--rand-hell); border-radius: var(--radius-s); padding: var(--s2); width: 96px; text-align: center; font-size: 0.72rem; line-height: 1.3; } .spieler-karte .sname { font-weight: 650; font-size: 0.78rem; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .spieler-karte .spunkte { display: block; font-size: 0.95rem; font-weight: 700; font-variant-numeric: tabular-nums; margin-top: 2px; } .spieler-karte .sinfo { color: var(--text-leise); font-size: 0.68rem; } .spieler-karte--warn { border-color: color-mix(in srgb, var(--gelb) 55%, transparent); } .spieler-karte--neu { border-color: color-mix(in srgb, var(--gruen) 55%, transparent); } /* -------------------------------------------------------------------------- Formularelemente -------------------------------------------------------------------------- */ .formzeile { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s2); } label { font-size: 0.85rem; font-weight: 550; } input[type=text], input[type=number], input[type=password], select { padding: 0.5rem 0.7rem; border-radius: var(--radius-s); border: 1px solid var(--rand-hell); background: var(--bg-tiefer); color: var(--text); font-size: 0.9rem; font-family: inherit; } input:focus, select:focus, button:focus-visible { outline: 2px solid var(--akzent-dim); outline-offset: 1px; } button, .knopf { padding: 0.5rem 0.9rem; border-radius: var(--radius-s); border: 1px solid transparent; background: var(--akzent); color: #fff; font-size: 0.87rem; font-weight: 600; font-family: inherit; cursor: pointer; text-decoration: none; display: inline-block; } button:hover, .knopf:hover { filter: brightness(1.08); } button.still, .knopf.still { background: var(--bg-erhoben); color: var(--text); border-color: var(--rand-hell); } button:disabled { opacity: .5; cursor: default; } .reiter { display: flex; gap: var(--s1); flex-wrap: wrap; margin-bottom: var(--s4); } .reiter a { font-size: 0.8rem; padding: var(--s1) var(--s3); border-radius: 999px; text-decoration: none; color: var(--text-dim); border: 1px solid var(--rand); background: var(--bg-tiefer); } .reiter a.aktiv { color: var(--akzent); border-color: var(--akzent); background: color-mix(in srgb, var(--akzent) 10%, transparent); } /* -------------------------------------------------------------------------- Recherchefunde -------------------------------------------------------------------------- */ .fund { border-left: 2px solid var(--rand-hell); padding: var(--s2) 0 var(--s2) var(--s3); margin-top: var(--s2); } .fund--widerspruch { border-left-color: var(--rot); } .fund blockquote { margin: var(--s1) 0; font-style: italic; color: var(--text-dim); font-size: 0.83rem; } .fund a { word-break: break-all; font-size: 0.75rem; text-decoration: none; } .fund a:hover { text-decoration: underline; } .bericht { white-space: pre-wrap; word-break: break-word; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.76rem; line-height: 1.55; color: var(--text-dim); background: var(--bg-tiefer); border: 1px solid var(--rand); border-radius: var(--radius-s); padding: var(--s3); max-height: 30rem; overflow-y: auto; } /* -------------------------------------------------------------------------- Anmeldung -------------------------------------------------------------------------- */ .anmeldung { display: flex; align-items: center; justify-content: center; min-height: 88vh; padding: var(--s4); } .anmeldung form { width: 100%; max-width: 300px; display: flex; flex-direction: column; gap: var(--s3); } .anmeldung h1 { font-size: 1.15rem; margin: 0 0 var(--s2); } .anmeldung input, .anmeldung button { padding: 0.65rem 0.8rem; font-size: 1rem; } /* -------------------------------------------------------------------------- */ @media (max-width: 560px) { .kopfleiste-innen { gap: var(--s3); padding: var(--s2) var(--s3); } .marke { font-size: 0.85rem; } .huelle { padding: 0 var(--s3) var(--s6); } .spieler-karte { width: 82px; } } /* -------------------------------------------------------------------------- Spielerbilder -------------------------------------------------------------------------- Kommen von Kickbases eigenem CDN (kickbase.b-cdn.net). Das ist ein reiner Bildabruf ohne Anmeldung und zaehlt nicht gegen das API-Anfragebudget - Risiko R2 bleibt unberuehrt. Faellt das CDN aus, bleibt der Platzhalter stehen und die Seite kippt nicht. -------------------------------------------------------------------------- */ .bild { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; background: var(--bg-tiefer); border: 1px solid var(--rand); flex: none; } .bild--gross { width: 46px; height: 46px; } .liste .bild { margin-right: var(--s1); } table.t .bild { width: 26px; height: 26px; vertical-align: middle; margin-right: var(--s2); } .spieler-karte .bild--gross { margin: 0 auto var(--s1); display: block; } /* Themenschalter */ .themenschalter { background: none; border: 1px solid var(--rand); color: var(--text-dim); border-radius: var(--radius-s); padding: 0.3rem 0.5rem; font-size: 0.9rem; line-height: 1; cursor: pointer; } .themenschalter:hover { color: var(--text); background: var(--bg-erhoben); }