/* ========================================================================== Kickerscup - Kaderverwaltung V2 tokens.css - design tokens (colours, type, metrics, breakpoint scaling) Every value the layout depends on lives here as a custom property. Media queries only ever REDEFINE tokens; they never restyle components. Component files (shell.css / kader.css) read tokens and never hard-code a colour or a breakpoint-dependent size. Live copy of public/dev/kader-v4/css/tokens.css, cut down to the tokens the shipped v4 stylesheets read. Each ported screen brings its own tokens back: the base value AND every media override of it, together. Moving one without the other breaks exactly one viewport width, silently. Breakpoint ladder ----------------- <=767px phone (iPhone SE upwards, Android) 768px - 1023px tablet 1024px - 1559px desktop compact >=1560px desktop full (1920x1080) >=2400px desktop wide (2560x1440) height <=899px "dense" override (1366x768) - shrinks vertical rhythm height <=540px phone landscape - table instead of the two-line card ========================================================================== */ :root { /* ---- palette: surfaces ------------------------------------------------ */ --kc-color-void: #07090a; /* page background */ --kc-color-void-deep: #050706; /* behind the stadium backdrop */ --kc-color-bar: #050809; /* sticky footer bar */ --kc-color-panel-top: rgba(9, 15, 12, 0.92); --kc-color-panel-bottom: rgba(6, 11, 9, 0.86); --kc-color-menu: rgba(6, 9, 10, 0.985); /* ---- palette: text ---------------------------------------------------- */ --kc-color-text: #e6e2d9; --kc-color-text-bright: #f4f1e9; --kc-color-text-strong: #ffffff; --kc-color-text-soft: #d4cfc5; --kc-color-text-muted: #b9b3a8; --kc-color-text-dim: #948f86; --kc-color-text-label: #9d978c; /* ---- palette: accents ------------------------------------------------- */ --kc-color-mint: #7ddcae; /* interactive accent */ --kc-color-mint-light: #a5ebc8; --kc-color-mint-deep: #89caa1; /* headings inside the view */ --kc-color-mint-dim: #8ba79a; --kc-color-mint-icon: #9fb7ab; --kc-color-on-mint: #0a1712; /* text on a mint fill */ --kc-color-gold: #e6ad44; /* ActionDollar / premium */ --kc-color-gold-soft: #d8a24a; --kc-color-gold-pale: #f0dcae; --kc-color-amber: #d59a4a; /* The middle step of the value scale is deliberately colourless. Good is green and critical is amber; a third hue between them was a second green, and mint against lime is exactly the pair that separates "good" from "average" - unreadable for anyone with a red-green weakness. Neutral, the scale carries two signals and one resting state. */ --kc-color-scale-mid: #847f74; --kc-color-danger: #e2603f; /* ---- the four lines --------------------------------------------------- One hue per line, and the single place they are written down. They used to sit as literals in aaa.css, struct.css and team-proto.css, all four inside the green-yellow band, with the keeper carrying #7ddcae - the interaction accent itself. Simulated for deuteranopia, the old set put three of six pairs on top of each other, midfield against attack at an RGB distance of 7: one colour, four labels. These four keep every pair apart, the weakest at 45, and they stagger lightness (61 / 46 / 36 / 28) so the three that all turn yellow under deuteranopia still separate. Contrast on the void runs 12.5 / 9.7 / 7.8 / 6.4, well past the 3:1 a category marker needs. Hues follow DESIGN.md's assignment (keeper gold, defence blue, midfield green, attack red), pulled down to the muted broadcast palette. */ --kc-area-tw: #e8c98a; /* keeper - gold, lightest */ --kc-area-def: #7aa6cf; /* defence - the one cool hue */ --kc-area-mid: #8bc46a; /* midfield - green */ --kc-area-atk: #d4795a; /* attack - red, darkest */ /* ---- palette: lines and fills ----------------------------------------- */ --kc-color-bronze: rgba(196, 146, 86, 0.34); /* main divider */ --kc-color-bronze-soft: rgba(196, 146, 86, 0.28); --kc-color-bronze-faint: rgba(196, 146, 86, 0.16); --kc-color-bronze-strong: rgba(196, 146, 86, 0.45); /* The 1px inset that draws a panel's own edge. Six uses across the pitch, the Kaderstruktur board and the team photo stage, all of them `inset 0 0 0 1px`, all of them typed out by hand. It is not a step of the surface ladder below - that one fills a control, this one draws a line - which is why it carries its own name at an alpha the ladder does not have. */ --kc-color-hairline: rgba(226, 220, 206, 0.09); --kc-color-rule: rgba(226, 220, 206, 0.15); --kc-color-rule-faint: rgba(226, 220, 206, 0.06); --kc-color-track: rgba(226, 220, 206, 0.13); /* empty bar/seg */ --kc-color-hover: color-mix(in srgb, var(--kc-color-mint) 10%, transparent); --kc-color-selected: color-mix(in srgb, var(--kc-color-mint) 12%, transparent); /* ---- interactive surfaces and edges ----------------------------------- The alpha ladder every control is built from. Named after the role, not the colour: swapping the base hue later means editing these lines, not hunting literals across four files. Values are the ones already in use, taken over unchanged - the near-duplicates (0.12 vs 0.13 track, 0.14 vs 0.16 pressed) are still separate on purpose so this stays a rename and not a redesign. */ --kc-color-surface-1: rgba(226, 220, 206, 0.04); /* disabled, quietest */ --kc-color-surface-2: rgba(226, 220, 206, 0.05); /* button face */ --kc-color-surface-3: rgba(226, 220, 206, 0.10); /* hover */ --kc-color-surface-4: rgba(226, 220, 206, 0.14); /* pressed */ --kc-color-track-soft: rgba(226, 220, 206, 0.12); /* empty meter block */ /* Six tokens carried the triplet 125 220 174 as a literal and one carried 137 202 161 - the edges and washes here, --kc-color-hover and --kc-color-selected further up, and --kc-color-sep-mint below. So a brand change had to be made in eight places and the eighth was always the one that got missed. They are mixed from --kc-color-mint and --kc-color-mint-deep instead. Mixing against `transparent` yields exactly the rgba() they used to hold - measured across 22487 computed properties, nothing moved. --kc-color-edge keeps its own 160 205 175: a different colour, derived from nothing. The same goes for the bronze family above and the mint fills below - they are stored with their alpha already applied, so color-mix() against them would multiply the two alphas rather than set one. Deriving those needs opaque base tokens first. */ --kc-color-edge: rgba(160, 205, 175, 0.28); /* interactive border */ --kc-color-edge-mint: color-mix(in srgb, var(--kc-color-mint) 55%, transparent); /* primary border */ --kc-color-edge-mint-soft: color-mix(in srgb, var(--kc-color-mint) 35%, transparent); /* primary, quieter */ --kc-color-fill-mint: rgba(96, 170, 120, 0.22); /* primary face */ --kc-color-fill-mint-hover: rgba(96, 170, 120, 0.34); --kc-color-wash-mint: color-mix(in srgb, var(--kc-color-mint) 6%, transparent); /* faintest tint */ --kc-color-wash-mint-2: color-mix(in srgb, var(--kc-color-mint) 16%, transparent); /* Separators between inline values ("Verein · 19 Profis · Gegr. 2026"). They are text, so they carry a text contrast requirement even though they read as decoration - the alpha values below are the measured minimum for 4.5:1 on their own backgrounds, not a guess. */ --kc-color-sep-mint: color-mix(in srgb, var(--kc-color-mint-deep) 62%, transparent); --kc-color-sep-bronze: rgba(196, 146, 86, 0.76); /* ---- typography ------------------------------------------------------- */ /* -------------------------------------------------------------------- Type sizes are rem, not px. A raised browser base font or text-only zoom moved nothing while everything here was px; the values are unchanged at the 16px default, they just scale now. The boxes that WRAP text scale with it - row, chip, field, dialog row, header and footer heights, the pitch nodes and the pager. A box left in px next to type in rem clips the moment the user raises their font. Two things stay px on purpose: --kc-tap-min a touch target is a physical measure, not type. --kc-track-* letter-spacing is applied at both 0.65rem and 1.3rem, so no single em value reproduces the current look. Tracking does not scale with the user's font size; that is the accepted limit. Container-relative terms (7.5cqw, 16cqw) keep their unit - only their px guards became rem. -------------------------------------------------------------------- */ /* -------------------------------------------------------------------- Role scale. Seven steps, named for the job the text does rather than for its size. Before this the CSS carried twenty different text sizes between 9.5px and 19px, seven of them half-pixels; eight separate Oswald sizes sat between 11.5px and 14px, which cannot carry eight different jobs. Every value rounded UP to its step, so nothing on the screen got smaller and nothing became harder to read. Thirty declarations moved, twenty-three of them by half a pixel. Not in the scale, on purpose (seven declarations plus the icons): icons .kc-icon, carets, chevrons and arrows size a glyph, not a text role - they keep their own values, and so do .kc-menu__link-icon and .kc-focus__detail-icon. 20px the pager glyph and the dialog's cancel button are a button pair with the barrel CTA, not body text. 29/31/34px three deliberately staggered hero numerals on the squad page; collapsing them destroys their hierarchy. A second layer is untouched: the ~65 per-component size tokens further down still carry their own values and breakpoint variants. Folding those onto these roles is a separate pass. -------------------------------------------------------------------- */ --kc-fs-micro: 0.6875rem; /* 11px - kicker, units, table heads */ --kc-fs-tiny: 0.75rem; /* 12px - pills, counts, status */ --kc-fs-label: 0.8125rem; /* 13px - badges, group labels, meta */ --kc-fs-ui: 0.875rem; /* 14px - navigation, chips, buttons */ --kc-fs-body: 0.9375rem; /* 15px - prose, names, list rows */ --kc-fs-strong: 1.0625rem; /* 17px - highlighted values and headings */ --kc-fs-title: 1.1875rem; /* 19px - section headings */ --kc-font-display: Oswald, "Arial Narrow", system-ui, sans-serif; --kc-font-body: Barlow, system-ui, -apple-system, sans-serif; --kc-font-num: "Barlow Semi Condensed", Barlow, system-ui, sans-serif; --kc-font-icon: "Material Symbols Rounded"; --kc-track-tight: 1.2px; /* letter-spacing scale */ --kc-track-label: 0.10625rem; --kc-track-kicker: 2.4px; --kc-track-wide: 2.6px; --kc-panel-bg: linear-gradient(180deg, var(--kc-color-panel-top), var(--kc-color-panel-bottom)); /* The shared plate form: a bolted steel box. A continuous hairline all the way round, plus eight bracket strokes where the sheets meet. Every panel-like surface reads these, so the form cannot drift apart between screens again. The bracket is a fixed length on purpose. A bracket is a part, and a part does not grow because the panel holding it grew - that is what makes it read as a bracket rather than as decoration. Patterns tile; parts do not. */ --kc-plate-edge: rgba(196, 146, 86, 0.34); --kc-plate-light: rgba(240, 220, 190, 0.14); --kc-plate-bracket: rgba(214, 168, 106, 0.85); --kc-plate-bracket-l: 26px; --kc-plate-bracket-w: 2px; --kc-menu-shadow: 0 30px 70px rgba(0, 0, 0, 0.75); /* ---- backdrop --------------------------------------------------------- */ /* The illustrated tunnel carries more contrast than the photographic one it replaced, so it runs a little dimmer under a slightly heavier veil - but it has to stay visible, it is the piece of art the view is built on. */ --kc-backdrop-opacity: 0.72; --kc-backdrop-veil: radial-gradient(120% 90% at 60% 42%, rgba(214, 160, 88, 0.07) 0%, rgba(8, 11, 9, 0.52) 52%, rgba(5, 8, 6, 0.8) 100%); --kc-backdrop-glow-width: 220px; --kc-backdrop-glow-alpha: 0.09; /* ---- app shell metrics ------------------------------------------------ */ --kc-shell-header-height: 4.875rem; --kc-shell-crest-width: 76px; --kc-shell-crest-img-w: 38px; --kc-shell-crest-img-h: 44px; --kc-shell-plus-width: 52px; --kc-shell-switch-min: 14.375rem; --kc-shell-switch-gap: 18px; --kc-shell-switch-pad: 16px; --kc-shell-club-size: 1.3125rem; --kc-shell-club-max: 15rem; --kc-shell-club-meta: block; /* hidden once the header gets tight */ --kc-shell-switch-word: inline; /* the word "Wechseln" next to icon */ --kc-shell-nav-size: 0.875rem; --kc-shell-nav-pad: 0 15px; --kc-shell-nav-row-pad: 0 6px; --kc-shell-nav-flex: 0 1 auto; --kc-shell-nav-order: 0; --kc-shell-nav-item-flex: 0 0 auto; --kc-shell-nav-border-top: 0 solid transparent; --kc-shell-nav-overflow: visible; --kc-shell-nav-overflow-y: visible; --kc-shell-header-wrap: nowrap; --kc-shell-spacer-flex: 1 1 auto; --kc-shell-money-size: 1.0625rem; --kc-shell-money-pad: 0 16px; --kc-shell-caret-display: inline-block; --kc-shell-switch-flex: 0 1 auto; --kc-shell-switch-lead: 18px; --kc-shell-money-gap: 9px; --kc-shell-coin-size: 22px; --kc-shell-topup-size: 34px; --kc-shell-profile-pad: 0 12px; /* The bottom tab bar and the burger only exist on the phone; on every wider screen the header's nav row does that job, so they collapse to nothing. */ --kc-shell-tabbar-display: none; --kc-shell-tabbar-height: 0px; /* The header sticks everywhere except on a phone held sideways, where the screen is too short to keep a bar reserved. */ --kc-shell-header-position: sticky; --kc-shell-burger-display: none; --kc-shell-avatar-display: inline-block; --kc-shell-nav-display: flex; --kc-shell-footer-display: flex; --kc-shell-club-kicker: block; --kc-shell-switch-action: flex; --kc-shell-plus-display: flex; --kc-shell-footer-height: 5.3125rem; --kc-shell-tag-width: 14rem; --kc-shell-tag-pad: 20px; --kc-shell-tag-size: 1.3125rem; --kc-shell-tag-track: 4px; --kc-shell-clock-display: flex; --kc-shell-legal-display: flex; /* inline legal links (desktop) */ --kc-shell-legal-btn: none; /* "Rechtliches" sheet button (phone) */ --kc-shell-ticker-speed: 42s; /* The fixed slot for the next entry and the rolling list of the whole day. Both fit on a desktop bar; below 1024px they do not (measured at 820px: tag 180 + slot 311 + clock 116 + legal 303 leaves the roll nothing), so there the slot takes the width and the roll goes. The slot is the one that answers "what now?" - the roll is the day, the slot is the pointer. */ --kc-shell-ticker-display: flex; --kc-shell-now-flex: 0 1 auto; --kc-shell-now-max: 24rem; /* ---- menu / dropdown geometry ----------------------------------------- */ --kc-menu-position: absolute; --kc-menu-top: 100%; --kc-menu-bottom: auto; --kc-menu-width: 22.5rem; --kc-menu-max-height: calc(100vh - 144px); --kc-menu-team-width: 26.25rem; --kc-menu-profile-width: 15.625rem; --kc-menu-sheet-title: none; /* only the phone bottom-sheet has a title */ /* ---- kader view metrics ----------------------------------------------- */ --kc-view-pad: 18px 22px 20px; --kc-view-gap: 18px; --kc-hero-title-size: 4.25rem; /* The club line under the title. It repeats what the topbar already shows, so the sideways phone drops it for the height. */ --kc-hero-meta-display: block; --kc-chip-pad: 6px 15px; /* Squad actions: three groups across, their buttons stacked inside. */ --kc-actions-cols: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 0.8fr); --kc-actions-btn-cols: minmax(0, 1fr); --kc-actions-icon: 30px; /* Player profile dialog. Centred card on every layout above the phone, bottom sheet below - the same switch the shell menus make. */ --kc-modal-align: center; --kc-modal-inset: 20px; --kc-modal-width: 47.5rem; --kc-modal-pad: 20px 26px 22px; --kc-modal-avatar: 92px; --kc-modal-name: 2rem; --kc-modal-ew: 34px; --kc-modal-info-cols: repeat(3, minmax(0, 1fr)); --kc-modal-foot-dir: row; /* Hero layout. Wide enough, the EW plate sits beside the name and keeps clear of the close button; on a phone it wraps to its own full-width row instead, so the name is not squeezed into a two-line break. */ --kc-modal-hero-wrap: nowrap; --kc-modal-ew-flex: none; --kc-modal-ew-dir: column; --kc-modal-ew-mr: 46px; /* the footer is column-reverse on a phone, so the note needs the higher order value there to end up above the buttons instead of below them */ --kc-modal-reason-order: 0; --kc-modal-scale-from: 0.94; --kc-modal-anim: 200ms; /* Where the room is lit. The backdrop is one fixed drawing, but the veil over it is not - it follows the crest, so the light pools where the crest stands instead of beside it once the view stacks. */ --kc-tap-min: 44px; /* minimum comfortable touch target */ /* ---- kader (P1) ---- */ --kc-color-danger-pale: #f0b5a5; --kc-color-surface-5: rgba(226, 220, 206, 0.16); --kc-view-gutter: 220px; --kc-view-gutter-display: flex; --kc-view-crest-size: 11rem; --kc-view-crest-top: 190px; --kc-roster-count-display: inline; --kc-kader-left-flex: 1 1 720px; --kc-kader-right-flex: 1 1 550px; --kc-kader-right-max: 34.375rem; --kc-kader-right-min: 29.375rem; --kc-table-name-max: 15rem; --kc-table-cols: 44px 42px minmax(0, var(--kc-table-name-max)) minmax(52px, 1fr) minmax(78px, 1fr) 32px minmax(72px, 1fr) minmax(52px, 1fr) minmax(60px, 1fr) minmax(62px, 1fr) minmax(58px, 1fr) minmax(76px, 1fr) minmax(58px, 1fr); --kc-table-col-mid: block; --kc-table-col-bar: block; --kc-table-col-avatar: block; --kc-table-col-mark: block; --kc-table-col-wide: block; --kc-table-row-height: var(--kc-tap-min); --kc-table-max-height: clamp(300px, 44vh, 1000px); --kc-table-head-display: grid; --kc-row-display: grid; --kc-row-pad: 0 6px; --kc-row-value-size: 0.96875rem; --kc-row-group-display: contents; --kc-row-col-gap: 0; --kc-row-row-gap: 0; --kc-row-label-display: none; --kc-focus-cols: 196px minmax(0, 1fr); --kc-focus-bar: 118px; --kc-focus-stage: 242px; --kc-focus-season-cols: repeat(4, minmax(0, 1fr)); --kc-bonus-mint: #2fe08d; --kc-bonus-mint-label: #4fd39a; --kc-bonus-mint-soft: #5fd8a4; --kc-bonus-on-mint: #052015; --kc-bonus-width: 58.75rem; --kc-bonus-card-bg: #0a0d0d; --kc-bonus-card-edge: rgba(160, 205, 175, 0.2); --kc-bonus-title: #ecebe3; --kc-bonus-lead: #c8c4b9; --kc-bonus-label: #9b9689; --kc-bonus-value: #dedad0; --kc-bonus-text: #d3cfc4; --kc-bonus-strong: #f2efe6; --kc-bonus-name: #e3dfd4; --kc-bonus-mot: #a8a49a; --kc-bonus-toggle: #c3bfb4; --kc-bonus-cancel: #b7b3a8; --kc-bonus-row-rule: rgba(160, 205, 175, 0.12); --kc-bonus-hint-rule: rgba(196, 146, 86, 0.22); /* No surface reads this since the panel form became a closed box. Left in place rather than deleted: removing pre-existing declarations is a separate decision. */ --kc-plate-chamfer: 13px; /* ---- Leihspieler view metrics ----------------------------------------- Three named grid areas: `pick` (Spielfeld + Spielerkarten), `profile` (Portrait) and `terms` (Vertragsdaten, Leihdauer, Abschluss). The two grid tokens are the whole responsive switch for this screen. */ /* The panel frame is cut from the original plate art (9-slice). The width token is what carries its "Stärke": chunky on desktop so the corner brackets and rivets read, slim on phones so it does not eat the screen. */ /* The panel padding-top carries the shared legend: components.css hangs it 14px above the content box, which lands on the frame band here instead of on a hairline. Every breakpoint keeps that 14px of headroom. */ /* frame-plate.png was a badly cut 9-slice: a whole plate object floating in opaque black, plus a sliver of the NEXT plate stuck to its right edge - which is why every panel had a black ring and something that read as a divider down its right side. frame-brass.png is cut properly from plate-right.webp instead: four corner blocks plus one clean pixel of each edge, so the band is continuous, and the black keyed out to alpha. */ /* Band thickness in source pixels, NOT the corner ornament size: border-image slices by band, and a value larger than the band pulls empty middle into the border and the frame disappears. Measure it with an alpha profile through the middle of each edge, never estimate. */ /* The slab has to sit a clear value step above the room, otherwise the black contour has nothing to separate and disappears. */ /* The pitch fills its box now instead of being capped at the art's native width - the art is a stretched background, so it scales without loss and the inset no longer has empty margins beside it. */ /* Sized from the button's own width via its container, not per breakpoint: the label measures ~8.2px per font-size unit and must stay inside the 66%-wide glass, so 7.5cqw always fits with a little air. */ /* Two pieces of CSS-drawn metal, named so they read as art rather than as four loose colour values: the brass bezel and the slab behind it. */ /* ---- Starspieler view metrics ------------------------------------------ Two named grid areas: `pick` (the pitch with the fourteen position rings) and `profile` (avatar, name, attributes, CTA). The two grid tokens are the whole responsive switch for this screen: side by side from 1280px up, stacked below it. The artboard scales on three steps, not four. Its widest and its mid-width layouts share every type size and only differ in whether the two panels sit next to each other - which is why the 1024-1279 block puts the full-size values back after the compact block has lowered them, instead of introducing a fourth step of its own. */ /* 1 : 1.42, with the artboard's floors under each column */ /* ---- Verträge verlängern view metrics ---------------------------------- Two columns - the contract table on the left, the three summary plates on the right - over a full-width confirmation bar. The table is the part that has to give way. It carries eleven columns at full width; --kc-vertrag-cols and the three display tokens below drop them in two steps, and the two must always agree: every column a display token hides has to disappear from --kc-vertrag-cols in the same breakpoint, or the whole grid shears by one track. full 11 tracks everything mid 8 tracks no avatar, no strength, no status narrow 6 tracks ... and no number and no age either -------------------------------------------------------------------- */ /* ---- Trikot designen view metrics -------------------------------------- Three regions across one row: the control column, the atelier and the studio. The atelier is the elastic one - the two side columns are fixed because their contents (a 42px kit thumbnail, a sixteen-swatch palette) do not scale, so anything the layout gives up has to come out of the middle. Below 1280px there is nothing left to give and the stage moves to its own row above the two columns. -------------------------------------------------------------------- */ --kc-trikot-areas: "controls stage studio"; --kc-trikot-cols: 326px minmax(0, 1fr) 750px; --kc-trikot-gap: 13px; --kc-trikot-stack-gap: 11px; --kc-trikot-title-size: 2.5rem; --kc-trikot-lead-size: 1rem; --kc-trikot-slot-kit-w: 42px; --kc-trikot-slot-kit-h: 52px; --kc-trikot-cut-cols: repeat(2, minmax(0, 1fr)); --kc-trikot-stage-min-h: 30rem; --kc-trikot-status-pad: 10px 16px; --kc-trikot-status-gap: 14px; --kc-trikot-status-size: 0.875rem; --kc-trikot-status-chip: 20px; --kc-trikot-pattern-cols: repeat(5, minmax(0, 1fr)); /* The colour rows and the premium banner are one line at every width the palette still fits on; on a phone they break instead. */ --kc-trikot-row-dir: row; --kc-trikot-row-align: center; --kc-trikot-row-gap: 12px; --kc-trikot-swatch-wrap: nowrap; --kc-trikot-color-label: 125px; --kc-trikot-swatch-max: 34px; --kc-trikot-swatch-min: 0; --kc-trikot-hex-input-w: 86px; --kc-trikot-premium-icon: 38px; --kc-trikot-premium-title: 1.25rem; --kc-trikot-premium-btn: 213px; --kc-trikot-buy-flex: none; --kc-trikot-save-h: 86px; --kc-trikot-save-size: 2rem; --kc-trikot-scrim-pos: absolute; --kc-trikot-dialog-dir: row; --kc-trikot-dialog-kit-w: 120px; --kc-trikot-dialog-kit-h: 163px; --kc-trikot-dialog-key: 96px; --kc-trikot-dialog-w: 40rem; --kc-trikot-dialog-title: 1.625rem; /* ---- Wappen designen view metrics --------------------------------------- Two regions across one row: the podium on the left, the studio on the right. The split is the artboard's, 36 / 64 - the studio is the one that has to carry a nine-column tile grid and two colour columns, and the podium is a square that simply takes what is left. Below 1280px there is no room for both and the podium moves onto its own row above the studio. Four colours the rest of kader-v3 does not have. The crest atelier lights the screen in a colder green than the squad pages, and these are the four places that show: the panel headings, the lead line under the title, the premium gold of the unlock strip, and the mint of every "selected" check. -------------------------------------------------------------------- */ --kc-wappen-heading: #4fb98a; --kc-wappen-lead-color: #6cbf94; --kc-wappen-gold: #e8b45c; --kc-wappen-check: #5fd7ae; --kc-wappen-cols: minmax(0, 36fr) minmax(0, 64fr); --kc-wappen-gap: 28px; --kc-wappen-title-size: 3.375rem; --kc-wappen-lead-size: 1.0625rem; --kc-wappen-crest-size: 470px; --kc-wappen-stage-pad: 14px 0 18px; /* The plinth is measured against the crest, never against the screen: half again as wide, and lifted so its top rim meets the crest a little under the lower banner. Both are shares of the crest box. */ --kc-wappen-plinth-width: 120%; --kc-wappen-plinth-top: 74%; /* Where the room is lit. The backdrop is one fixed drawing, but the veil over it is not - it follows the crest, so the light pools where the crest stands instead of beside it once the view stacks. */ /* The beam widens from just above the crest down onto the plinth top. */ --kc-wappen-beam-top: -9%; --kc-wappen-beam-width: 108%; --kc-wappen-beam-height: 100%; --kc-wappen-band-size: 2.125rem; --kc-wappen-band-sub-size: 1.3125rem; --kc-wappen-cmp-gap: 24px; --kc-wappen-ingame-label: 0.9375rem; --kc-wappen-ingame-name: 1.375rem; --kc-wappen-ingame-icon: 46px; --kc-wappen-strip-wrap: nowrap; --kc-wappen-strip-title: 1.0625rem; --kc-wappen-strip-sub: 0.90625rem; --kc-wappen-unlock-h: 42px; --kc-wappen-unlock-pad-x: 20px; --kc-wappen-unlock-size: 0.875rem; --kc-wappen-panel-gap: 14px; --kc-wappen-panel-pad: 20px 24px 22px; --kc-wappen-section-size: 0.96875rem; --kc-wappen-section-gap: 15px; --kc-wappen-tab-gap: 9px; --kc-wappen-tab-h: 36px; --kc-wappen-tab-pad-x: 15px; --kc-wappen-tab-size: 0.84375rem; --kc-wappen-tab-count: 0.8125rem; --kc-wappen-hint-size: 0.8125rem; --kc-wappen-slider-w: 96px; --kc-wappen-combos-display: inline; /* Four rows of motifs are 262px; anything shorter scrolls inside the grid rather than pushing the colour panels off the screen. */ --kc-wappen-tile-cols: repeat(9, minmax(0, 1fr)); --kc-wappen-tile-gap: 13px; --kc-wappen-tiles-max-h: 262px; --kc-wappen-tiles-overflow: auto; --kc-wappen-tiles-scroll-pad: 6px; --kc-wappen-tile-check: 19px; --kc-wappen-tile-check-glyph: 0.8125rem; --kc-wappen-scheme-h: 62px; --kc-wappen-dot: 30px; --kc-wappen-dot-small: 20px; --kc-wappen-dot-gap: 10px; --kc-wappen-check-size: 24px; --kc-wappen-check-glyph: 1.0625rem; --kc-wappen-color-cols: repeat(2, minmax(0, 1fr)); --kc-wappen-row-h: 50px; --kc-wappen-row-pad-x: 12px; --kc-wappen-row-gap: 16px; --kc-wappen-row-label: 0.96875rem; --kc-wappen-chip-w: 104px; --kc-wappen-chip-h: 28px; --kc-wappen-hex-w: 80px; --kc-wappen-hex-size: 0.96875rem; --kc-wappen-field-cols: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 0.8fr) minmax(0, 0.8fr); --kc-wappen-field-label: 0.78125rem; --kc-wappen-field-size: 1.03125rem; --kc-wappen-field-h: 44px; --kc-wappen-switch-w: 84px; --kc-wappen-switch-radius: 22px; --kc-wappen-knob: 32px; --kc-wappen-knob-on: 47px; --kc-wappen-save-h: 60px; --kc-wappen-save-size: 1.375rem; } /* ========================================================================== Desktop wide - 2560x1440 and up ========================================================================== */ @media (min-width: 2400px) { :root { --kc-backdrop-glow-width: 520px; /* kader (P1) */ --kc-view-gutter: 300px; --kc-view-crest-size: 12.5rem; --kc-view-crest-top: 210px; --kc-kader-right-max: 38.75rem; /* The contract screen only widens its summary column out here; the table already had all eleven of its columns. */ /* Wappen: the studio is wide enough out here for a third colour column, and the podium column can carry a bigger crest. */ --kc-wappen-color-cols: repeat(3, minmax(0, 1fr)); --kc-wappen-crest-size: 560px; /* The tiles are square and grow with the panel, so the row height grows with it too - a 262px window would show one and a half rows here. */ --kc-wappen-tiles-max-h: 380px; } } /* ========================================================================== Desktop compact - 1024px .. 1559px (header sheds its wider affordances) ========================================================================== */ @media (min-width: 1024px) and (max-width: 1559px) { :root { --kc-shell-header-height: 4.25rem; --kc-shell-crest-width: 62px; --kc-shell-switch-min: 11rem; --kc-shell-switch-gap: 10px; --kc-shell-switch-pad: 11px; --kc-shell-club-size: 1.0625rem; --kc-shell-club-max: 9.375rem; --kc-shell-club-meta: none; --kc-shell-switch-word: none; --kc-shell-plus-width: 46px; --kc-shell-nav-size: 0.8125rem; --kc-shell-nav-pad: 0 9px; --kc-shell-nav-row-pad: 0 2px; --kc-shell-money-size: 0.9375rem; --kc-shell-money-pad: 0 11px; /* kader (P1) */ --kc-view-gutter: 0px; --kc-view-gutter-display: none; --kc-kader-right-min: 26.25rem; /* Starspieler - the artboard's compact step */ /* Verträge verlängern - the artboard's compact step. Every plate loses a little height so the table, the three summary plates and the bar still fit on one screen. The 1024-1279 block further down stacks the two columns on top of these values. */ /* ---- Trikot designen ------------------------------------------------ The atelier gives up width first; the studio follows once four pattern tiles are all that still fit across it. */ --kc-trikot-cols: 292px minmax(0, 1fr) 560px; --kc-trikot-title-size: 2.125rem; --kc-trikot-stage-min-h: 26rem; --kc-trikot-pattern-cols: repeat(4, minmax(0, 1fr)); --kc-trikot-color-label: 104px; --kc-trikot-swatch-max: 30px; --kc-trikot-hex-input-w: 72px; --kc-trikot-premium-title: 1.125rem; --kc-trikot-premium-btn: 168px; --kc-trikot-premium-icon: 32px; --kc-trikot-save-h: 74px; --kc-trikot-save-size: 1.75rem; /* Wappen, compact desktop - the artboard's "dense" state. Every vertical measure comes down one notch so the tile grid, both colour columns and the save button still land inside one screen. */ --kc-wappen-gap: 22px; --kc-wappen-title-size: 2.75rem; --kc-wappen-lead-size: 0.9375rem; --kc-wappen-crest-size: 390px; --kc-wappen-stage-pad: 10px 0 14px; --kc-wappen-band-size: 1.75rem; --kc-wappen-band-sub-size: 1.125rem; --kc-wappen-cmp-gap: 18px; --kc-wappen-ingame-label: 0.8125rem; --kc-wappen-ingame-name: 1.1875rem; --kc-wappen-ingame-icon: 38px; --kc-wappen-strip-title: 0.9375rem; --kc-wappen-strip-sub: 0.8125rem; --kc-wappen-unlock-h: 38px; --kc-wappen-unlock-pad-x: 16px; --kc-wappen-unlock-size: 0.8125rem; --kc-wappen-panel-gap: 9px; --kc-wappen-panel-pad: 13px 16px 15px; --kc-wappen-section-size: 0.84375rem; --kc-wappen-section-gap: 10px; --kc-wappen-tab-gap: 7px; --kc-wappen-tab-h: 32px; --kc-wappen-tab-pad-x: 12px; --kc-wappen-tab-size: 0.78125rem; --kc-wappen-tab-count: 0.75rem; --kc-wappen-hint-size: 0.75rem; --kc-wappen-slider-w: 78px; --kc-wappen-combos-display: none; --kc-wappen-tile-gap: 10px; --kc-wappen-tiles-max-h: 206px; --kc-wappen-tile-check: 17px; --kc-wappen-tile-check-glyph: 0.75rem; --kc-wappen-scheme-h: 54px; --kc-wappen-dot: 26px; --kc-wappen-dot-small: 17px; --kc-wappen-dot-gap: 8px; --kc-wappen-check-size: 22px; --kc-wappen-check-glyph: 0.9375rem; --kc-wappen-row-h: 44px; --kc-wappen-row-pad-x: 10px; --kc-wappen-row-gap: 12px; --kc-wappen-row-label: 0.875rem; --kc-wappen-chip-w: 86px; --kc-wappen-chip-h: 24px; --kc-wappen-hex-w: 72px; --kc-wappen-hex-size: 0.875rem; --kc-wappen-field-label: 0.71875rem; --kc-wappen-field-size: 0.9375rem; --kc-wappen-field-h: 40px; --kc-wappen-switch-w: 76px; --kc-wappen-switch-radius: 20px; --kc-wappen-knob: 28px; --kc-wappen-knob-on: 42px; --kc-wappen-save-h: 48px; --kc-wappen-save-size: 1.1875rem; } } /* ========================================================================== Table columns between 1280px and 1559px (1366x768 lives here). All thirteen columns stay visible, just on a tighter rhythm, so no value is lost on a laptop. ========================================================================== */ @media (min-width: 1280px) and (max-width: 1559px) { :root { --kc-table-col-bar: none; --kc-table-cols: 36px 32px minmax(0, var(--kc-table-name-max)) minmax(38px, 1fr) 30px minmax(52px, 1fr) minmax(44px, 1fr) minmax(48px, 1fr) minmax(54px, 1fr) minmax(44px, 1fr) minmax(56px, 1fr) minmax(44px, 1fr); --kc-kader-right-min: 22.5rem; --kc-row-value-size: 0.875rem; } } /* One row header, 1280px .. 1799px: with seven nav entries the row needs about 1380px (compact) or 1690px (wide). The dropdown carets and the word "Wechseln" go first; the menus still open on click. */ @media (min-width: 1280px) and (max-width: 1799px) { :root { --kc-shell-caret-display: none; --kc-shell-switch-word: none; } } /* Below 1280px there is not enough room for thirteen columns next to the insight panel, so the secondary values fold away like on a tablet. */ @media (min-width: 1024px) and (max-width: 1279px) { :root { /* Same call as below 1024px: measured at 1024px the roll was left 55 pixels, which is a sliver, not a reading. The slot takes the bar until there is room for both again. */ --kc-shell-ticker-display: none; --kc-shell-now-flex: 1 1 auto; --kc-shell-now-max: none; /* Seven nav entries need about 600px next to crest, switcher, plus and both currencies; at 1024 there are 450. The nav takes its own row, as on a tablet, instead of running over the currencies. */ --kc-shell-header-wrap: wrap; --kc-shell-nav-pad: 0 11px; --kc-shell-nav-row-pad: 0 8px; --kc-shell-nav-flex: 1 1 100%; --kc-shell-nav-order: 9; --kc-shell-nav-border-top: 1px solid var(--kc-color-bronze-soft); /* kader (P1) */ --kc-table-cols: 44px 42px minmax(0, var(--kc-table-name-max)) minmax(52px, 1fr) minmax(78px, 1fr) 32px minmax(58px, 1fr); --kc-table-col-wide: none; /* Starspieler - the panels stack here, but the type stays full size: the artboard only shrinks it once the two panels sit side by side again. */ /* Verträge verlängern - same story as Starspieler above. The two columns stack and the table gives up its avatar, its strength pair and its status column, but the type goes back to full size: the artboard only shrinks it once the columns sit side by side again. One deliberate difference from the artboard: it decides "compact" from the container width alone, so a short 1100px window would keep the full rhythm. The dense block below is a height rule and comes after this one, so here a short window gets the compact plates instead - which is what every other screen in this prototype does. */ /* ---- Trikot designen ------------------------------------------------ Under 1280px three columns leave the atelier too narrow to show a jersey, so it takes a row of its own above the other two. */ --kc-trikot-areas: "stage stage" "controls studio"; --kc-trikot-cols: 300px minmax(0, 1fr); --kc-trikot-stage-min-h: 24rem; --kc-trikot-pattern-cols: repeat(5, minmax(0, 1fr)); /* Wappen: below 1280 the podium and the studio no longer fit beside each other. The crest takes its own row and sizes off the viewport height instead of the column, and the tile grid stops scrolling inside itself - with the studio full width there is room to simply show every tile. */ --kc-wappen-cols: minmax(0, 1fr); --kc-wappen-gap: 20px; --kc-wappen-title-size: 2.625rem; --kc-wappen-crest-size: clamp(210px, 46vh, 340px); --kc-wappen-stage-pad: 18px 0 22px; --kc-wappen-tiles-max-h: none; --kc-wappen-tiles-overflow: visible; --kc-wappen-tiles-scroll-pad: 0px; } } /* ========================================================================== Dense - short viewports. 1366x768 is the target here, not a width. Comes after the width rules so it wins on the vertical rhythm. ========================================================================== */ @media (min-width: 1024px) and (max-height: 899px) { :root { --kc-hero-title-size: 3.5rem; --kc-actions-cols: repeat(3, minmax(0, 1fr)); --kc-actions-icon: 24px; --kc-modal-inset: 14px; --kc-modal-width: 43.75rem; --kc-modal-pad: 14px 20px 16px; --kc-modal-avatar: 72px; --kc-modal-name: 1.625rem; --kc-modal-ew: 28px; --kc-view-pad: 14px 18px 16px; /* kader (P1) */ --kc-focus-bar: 104px; --kc-focus-stage: 214px; --kc-table-max-height: clamp(240px, 34vh, 320px); --kc-view-gutter: 0px; --kc-view-gutter-display: none; /* Starspieler - the artboard's compact step */ /* Verträge verlängern - the artboard's compact step. Every plate loses a little height so the table, the three summary plates and the bar still fit on one screen. The 1024-1279 block further down stacks the two columns on top of these values. */ /* ---- Trikot designen ------------------------------------------------ The studio column is what overruns a short laptop screen: four rows of pattern tiles, three colour rows, the banner and an 86px button. The banner and the button give up the height, not the tiles - those are what the manager is actually picking from. */ --kc-trikot-stage-min-h: 22rem; --kc-trikot-save-h: 60px; --kc-trikot-save-size: 1.625rem; --kc-trikot-premium-icon: 30px; --kc-trikot-premium-title: 1.0625rem; /* Wappen on a short desktop. The artboard turns "dense" on at 1000px of height as well as on width, but only the vertical rhythm is at stake here - the width tokens above already fit. */ --kc-wappen-crest-size: 390px; --kc-wappen-stage-pad: 10px 0 14px; --kc-wappen-panel-gap: 9px; --kc-wappen-panel-pad: 13px 16px 15px; --kc-wappen-section-gap: 10px; --kc-wappen-scheme-h: 54px; --kc-wappen-row-h: 44px; --kc-wappen-field-h: 40px; --kc-wappen-save-h: 48px; --kc-wappen-ingame-icon: 38px; --kc-wappen-tiles-max-h: 178px; --kc-wappen-tile-check: 16px; --kc-wappen-tile-check-glyph: 0.6875rem; } } /* ========================================================================== Desktop, very short - 1024px and up, under 780px of height Only the crest atelier reacts here: its tile grid is the one element that would push the save button off a laptop screen, so it loses one more row. ========================================================================== */ @media (min-width: 1024px) and (max-height: 779px) { :root { --kc-wappen-tiles-max-h: 150px; --kc-wappen-tile-check: 14px; --kc-wappen-tile-check-glyph: 0.625rem; } } /* ========================================================================== Tablet - 768px .. 1023px. Nav drops onto its own full-width row. ========================================================================== */ @media (max-width: 1023px) { :root { --kc-shell-header-height: 4rem; --kc-shell-header-wrap: wrap; --kc-shell-crest-width: 64px; --kc-shell-switch-min: 13.125rem; --kc-shell-switch-gap: 10px; --kc-shell-switch-pad: 12px; --kc-shell-club-size: 1.125rem; --kc-shell-club-max: 12.5rem; --kc-shell-club-meta: none; --kc-shell-nav-size: 0.8125rem; --kc-shell-nav-pad: 0 11px; --kc-shell-nav-row-pad: 0 8px; --kc-shell-nav-flex: 1 1 100%; --kc-shell-nav-order: 9; --kc-shell-nav-border-top: 1px solid var(--kc-color-bronze-soft); --kc-shell-money-size: 0.9375rem; --kc-shell-money-pad: 0 12px; --kc-shell-footer-height: 4.5rem; --kc-shell-tag-width: 11.25rem; --kc-shell-tag-pad: 16px; --kc-shell-tag-size: 1.0625rem; /* No room for both readings, see the note by the defaults. */ --kc-shell-ticker-display: none; --kc-shell-now-flex: 1 1 auto; --kc-shell-now-max: none; /* still anchored to the trigger, just narrower */ --kc-menu-width: min(340px, calc(100vw - 16px)); --kc-menu-team-width: min(340px, calc(100vw - 16px)); --kc-menu-profile-width: min(280px, calc(100vw - 16px)); --kc-menu-max-height: calc(100vh - 140px); --kc-view-pad: 16px 16px 18px; --kc-actions-cols: repeat(3, minmax(0, 1fr)); --kc-actions-icon: 26px; /* kader (P1) */ --kc-table-row-height: var(--kc-tap-min); --kc-view-gutter: 0px; --kc-view-gutter-display: none; --kc-kader-left-flex: 1 1 100%; --kc-kader-right-flex: 1 1 100%; --kc-kader-right-max: 100%; --kc-kader-right-min: 0; --kc-focus-cols: 170px minmax(0, 1fr); --kc-table-col-bar: none; --kc-table-cols: 36px 32px minmax(0, var(--kc-table-name-max)) minmax(38px, 1fr) 30px minmax(52px, 1fr) minmax(44px, 1fr) minmax(48px, 1fr) minmax(54px, 1fr) minmax(44px, 1fr) minmax(56px, 1fr) minmax(44px, 1fr); --kc-row-value-size: 0.875rem; --kc-table-max-height: 340px; /* Back to four in a row: down here the pick region spans both columns, so it has the width the folded 2 x 2 above was compensating for. */ /* Starspieler - stacked, everything else stays at the artboard's full step */ /* Verträge verlängern - stacked, same eight-column table as 1024-1279, and like Starspieler the type stays at the artboard's full step. */ /* ---- Trikot designen ------------------------------------------------ */ --kc-trikot-areas: "stage stage" "controls studio"; --kc-trikot-cols: 280px minmax(0, 1fr); --kc-trikot-gap: 12px; --kc-trikot-stack-gap: 10px; --kc-trikot-title-size: 1.875rem; --kc-trikot-scrim-pos: fixed; --kc-trikot-stage-min-h: 22rem; --kc-trikot-status-pad: 8px 12px; --kc-trikot-status-gap: 10px; --kc-trikot-status-size: 0.75rem; --kc-trikot-status-chip: 16px; --kc-trikot-pattern-cols: repeat(4, minmax(0, 1fr)); --kc-trikot-color-label: 92px; --kc-trikot-swatch-max: 28px; --kc-trikot-hex-input-w: 68px; --kc-trikot-premium-icon: 30px; --kc-trikot-premium-title: 1.0625rem; --kc-trikot-premium-btn: 150px; --kc-trikot-save-h: 68px; --kc-trikot-save-size: 1.5rem; /* Wappen on a tablet: one column, and the colour rows give up their second column - at 768px two of them would clip the hex readout. */ --kc-wappen-cols: minmax(0, 1fr); --kc-wappen-gap: 20px; --kc-wappen-color-cols: minmax(0, 1fr); --kc-wappen-field-cols: repeat(2, minmax(0, 1fr)); --kc-wappen-title-size: 2.625rem; --kc-wappen-crest-size: clamp(210px, 46vh, 340px); --kc-wappen-stage-pad: 18px 0 22px; --kc-wappen-tiles-max-h: none; --kc-wappen-tiles-overflow: visible; --kc-wappen-tiles-scroll-pad: 0px; --kc-wappen-combos-display: none; } } /* ========================================================================== Phone - <=767px. One column, menus become bottom sheets, bigger targets. ========================================================================== */ @media (max-width: 767px) { :root { /* The artboard's top bar is 82 of 1820, which is 37px on a 390 screen - below the touch minimum. 52 is the compromise: still a slim bar, still a 44px hit area inside it. */ --kc-shell-header-height: 3.25rem; --kc-shell-crest-width: 52px; --kc-shell-crest-img-w: 28px; --kc-shell-crest-img-h: 32px; --kc-shell-switch-min: 6.875rem; --kc-shell-switch-gap: 8px; --kc-shell-switch-pad: 10px; --kc-shell-switch-word: none; --kc-shell-plus-width: 44px; --kc-shell-nav-size: 0.75rem; --kc-shell-nav-pad: 0 6px; --kc-shell-nav-row-pad: 0; --kc-shell-nav-item-flex: 1 1 0; --kc-shell-nav-overflow: auto; --kc-shell-nav-overflow-y: hidden; --kc-shell-spacer-flex: 1 1 auto; --kc-shell-caret-display: none; /* The header keeps one slim row - crest, club, money, burger - and the navigation moves to a fixed tab bar at the bottom, per the phone mock-ups. The Tagesplan ticker has no place on that screen and the tab bar takes over its edge, so it goes. */ --kc-shell-header-wrap: nowrap; /* Only the header's nav BUTTONS go, not the nav: the menu sheets the tab bar opens live inside it. With the whole nav on display:none every tab-bar menu opened (aria-expanded true) and painted nothing. */ --kc-shell-nav-display: contents; --kc-shell-nav-item-display: contents; --kc-shell-nav-button-display: none; --kc-shell-footer-display: none; --kc-shell-tabbar-display: flex; --kc-shell-tabbar-height: 3.625rem; --kc-shell-burger-display: inline-block; --kc-shell-avatar-display: none; --kc-shell-club-kicker: none; --kc-shell-switch-action: none; --kc-shell-plus-display: none; /* One row has to hold crest, club, both purses and the burger inside 375px. Measured at 390: crest 46 + club 70 + Taler 100 + A$ 104 + burger 44 = 364. A wider purse pushes the club name under the Taler. */ --kc-shell-switch-min: 4.5rem; --kc-shell-crest-width: 46px; --kc-shell-switch-pad: 0px; --kc-shell-club-size: 0.875rem; /* 3.9rem cut "FC KICKERS" to "FC KICK…" - the club's own name, ellipsed in its own header. Raised to fit an eleven-character name now that the purses no longer repeat their unit. */ --kc-shell-club-max: 5.5rem; /* The budget is 375, not 390: every page but this one scrolls, and base.css keeps a scrollbar gutter open for it. */ --kc-shell-money-size: 0.75rem; --kc-shell-money-pad: 0 4px; --kc-shell-money-gap: 4px; --kc-shell-coin-size: 18px; --kc-shell-topup-size: 26px; --kc-shell-profile-pad: 0 4px; --kc-shell-switch-lead: 8px; /* The switcher must not be squeezed: its button does not shrink, so a shrinking wrapper only makes the club name spill over the purse. */ --kc-shell-switch-flex: 0 0 auto; --kc-shell-footer-height: 3.625rem; --kc-shell-tag-width: 8.25rem; --kc-shell-tag-pad: 10px; --kc-shell-tag-size: 0.875rem; --kc-shell-tag-track: 2px; --kc-shell-clock-display: none; --kc-shell-legal-display: none; --kc-shell-legal-btn: flex; --kc-shell-ticker-speed: 26s; /* dropdowns become bottom sheets */ --kc-menu-position: fixed; --kc-menu-top: auto; --kc-menu-bottom: 0; --kc-menu-width: auto; --kc-menu-team-width: auto; --kc-menu-profile-width: auto; --kc-menu-max-height: calc(100vh - 120px); --kc-menu-sheet-title: flex; --kc-backdrop-glow-width: 140px; --kc-view-pad: 12px 12px 16px; --kc-view-gap: 14px; --kc-hero-title-size: 2.5rem; --kc-actions-cols: minmax(0, 1fr); --kc-actions-btn-cols: repeat(2, minmax(0, 1fr)); --kc-actions-icon: 24px; --kc-modal-align: flex-end; --kc-modal-inset: 0px; --kc-modal-width: 100%; --kc-modal-pad: 14px 14px 16px; --kc-modal-avatar: 62px; --kc-modal-name: 1.4375rem; --kc-modal-ew: 26px; --kc-modal-info-cols: repeat(2, minmax(0, 1fr)); --kc-modal-foot-dir: column-reverse; --kc-modal-hero-wrap: wrap; --kc-modal-ew-flex: 1 1 100%; --kc-modal-ew-dir: row; --kc-modal-ew-mr: 0px; --kc-modal-reason-order: 1; --kc-modal-scale-from: 1; /* kader (P1) */ --kc-focus-cols: 1fr; --kc-focus-bar: 90px; --kc-focus-stage: 260px; --kc-focus-season-cols: repeat(2, minmax(0, 1fr)); --kc-table-col-mid: inline-flex; --kc-table-col-bar: none; --kc-table-col-avatar: inline-flex; --kc-table-col-mark: inline-flex; --kc-table-col-wide: inline-flex; --kc-table-row-height: auto; --kc-table-max-height: none; --kc-table-head-display: none; --kc-row-display: grid; --kc-row-pad: 10px 6px 11px; --kc-row-value-size: 0.9375rem; --kc-row-col-gap: 8px; --kc-row-row-gap: 0; --kc-row-label-display: block; /* Face before price: the player you are buying used to sit BELOW the buy button, so a phone user scrolled past the CTA to see who it was for. */ /* Starspieler - the artboard's narrow step */ /* Verträge verlängern - the table is down to six columns: the checkbox, the position, the name and the three contract numbers. The confirmation bar drops its minimum height and lets its four parts wrap. */ /* ---- Trikot designen ------------------------------------------------ One column, stage first. The colour rows put their label over their swatches rather than beside them, and the presets box stops taking the leftover height - on a phone the column scrolls anyway. */ --kc-trikot-areas: "stage" "controls" "studio"; --kc-trikot-cols: minmax(0, 1fr); --kc-trikot-stage-min-h: 20rem; --kc-trikot-status-pad: 7px 9px; --kc-trikot-status-gap: 7px; --kc-trikot-status-size: 0.6875rem; --kc-trikot-status-chip: 14px; --kc-trikot-pattern-cols: repeat(3, minmax(0, 1fr)); --kc-trikot-row-dir: column; --kc-trikot-row-align: stretch; --kc-trikot-row-gap: 6px; --kc-trikot-swatch-wrap: wrap; --kc-trikot-color-label: auto; --kc-trikot-swatch-max: 32px; --kc-trikot-swatch-min: 22px; --kc-trikot-premium-btn: 100%; --kc-trikot-buy-flex: 1 1 100%; --kc-trikot-dialog-w: 100%; --kc-trikot-dialog-dir: column; --kc-trikot-dialog-kit-w: 92px; --kc-trikot-dialog-kit-h: 125px; --kc-trikot-dialog-key: 76px; --kc-trikot-dialog-title: 1.375rem; /* Wappen on a phone. Six tile columns rather than the artboard's nine: nine of them are 33px wide here, under the touch target, and the artboard hard-codes the count without checking. The premium strip breaks onto a second line for the same reason. */ --kc-wappen-title-size: 2.125rem; --kc-wappen-lead-size: 0.875rem; --kc-wappen-gap: 16px; --kc-wappen-tile-cols: repeat(6, minmax(0, 1fr)); --kc-wappen-tile-gap: 10px; --kc-wappen-strip-wrap: wrap; --kc-wappen-strip-title: 0.9375rem; --kc-wappen-strip-sub: 0.8125rem; --kc-wappen-panel-pad: 14px 16px 16px; --kc-wappen-section-size: 0.875rem; --kc-wappen-band-size: 1.625rem; --kc-wappen-band-sub-size: 1.0625rem; --kc-wappen-cmp-gap: 16px; --kc-wappen-ingame-name: 1.1875rem; --kc-wappen-ingame-icon: 38px; --kc-wappen-chip-w: 72px; --kc-wappen-hex-w: 72px; --kc-wappen-save-size: 1.1875rem; } } /* ========================================================================== Phone in landscape - width is plentiful, height is not. The two-line card would halve the number of visible rows, so the compact table comes back and the whole vertical rhythm shrinks. Must come after the phone block. ========================================================================== */ @media (max-width: 1023px) and (max-height: 540px) { :root { /* vertical rhythm */ --kc-shell-header-height: 3.25rem; --kc-shell-footer-height: 3.125rem; /* A phone held sideways has 390 pixels of height, and the two-row header was taking 111 of them for good. The navigation moves into the tab bar at the bottom exactly as it does in portrait, which by itself only trades 45 pixels of header for 44 pixels of tab bar - so the header also stops sticking here. What stays reserved while reading is the tab bar alone: 44 pixels instead of 111, and the list gets 346 instead of 279. `relative` rather than `static`, so the header keeps its z-index and the backdrop cannot paint over it. */ --kc-shell-header-position: relative; --kc-shell-header-wrap: nowrap; --kc-shell-nav-display: contents; --kc-shell-nav-item-display: contents; --kc-shell-nav-button-display: none; --kc-shell-tabbar-display: flex; /* 46 rather than 44: the bar's own top border eats a pixel, and the buttons inside have to clear the touch minimum, not the bar. */ --kc-shell-tabbar-height: 2.875rem; --kc-shell-burger-display: inline-block; --kc-shell-avatar-display: none; /* Of the 390 pixels of height, the title block was taking 76 and the panel head another 52 before a single player was visible. The title shrinks, the club line goes (the topbar carries it), and the two headings close up: together that is the difference between a photo strip and a photo. */ --kc-hero-title-size: 1.375rem; --kc-hero-meta-display: none; --kc-chip-pad: 6px 10px; --kc-view-pad: 10px 12px 14px; --kc-view-gap: 12px; /* kader (P1) */ --kc-row-display: grid; --kc-row-label-display: none; --kc-row-pad: 0 4px; --kc-row-col-gap: 0; --kc-row-row-gap: 0; --kc-row-value-size: 0.84375rem; --kc-table-head-display: grid; --kc-table-col-mid: block; --kc-table-col-bar: none; --kc-table-col-avatar: none; --kc-table-col-mark: block; --kc-table-col-wide: block; --kc-table-cols: 32px 28px minmax(0, var(--kc-table-name-max)) minmax(34px, 1fr) 28px minmax(48px, 1fr) minmax(40px, 1fr) minmax(44px, 1fr) minmax(50px, 1fr) minmax(40px, 1fr) minmax(52px, 1fr) minmax(40px, 1fr); --kc-table-row-height: var(--kc-tap-min); --kc-table-max-height: none; --kc-roster-count-display: none; --kc-focus-stage: 190px; } } /* Very small phones (iPhone SE, 320px) - buy back horizontal room. */ @media (max-width: 380px) { :root { --kc-hero-title-size: 2rem; --kc-shell-club-max: 5.5rem; --kc-view-pad: 10px 10px 14px; /* One header row still has to fit: at 360 the purses give back what the crest and the club name cannot. Measured at 360: the row was 2px over the 345px content width before the purses were tightened, which the page-level overflow check reads as a horizontal scroll. */ --kc-shell-money-size: 0.6875rem; --kc-shell-money-pad: 0 2px; --kc-shell-money-gap: 3px; --kc-shell-coin-size: 16px; --kc-shell-topup-size: 24px; --kc-shell-switch-min: 3.75rem; /* The crest is the tap target back to the Zentrale, so it cannot go under 44px even here — the purses pay the 4px, not the club name. */ --kc-shell-crest-width: 44px; /* ---- Trikot designen ------------------------------------------------ */ --kc-trikot-pattern-cols: repeat(2, minmax(0, 1fr)); --kc-trikot-cut-cols: minmax(0, 1fr); } } /* Users who asked for less motion get no marquee. */ @media (prefers-reduced-motion: reduce) { :root { --kc-shell-ticker-speed: 0s; --kc-modal-scale-from: 1; --kc-modal-anim: 0ms; } }