/* * FoderKartan. Tre teman (Äng, Fjäll, Kontrast), vart och ett i ljust och * mörkt läge. Temat och läget står som data-theme och data-scheme på , * satta av appearance.js innan sidan ritas; ett tema byter bara variablerna, * aldrig selektorerna. * * Äng är standard och medvetet dämpad (ägarens synpunkt 2026-09-30: gula och * gröna punkter var för skrikiga). Kontrast behåller starka färger ur * Okabe–Ito-paletten, så att fodertyperna går att skilja åt även vid * färgblindhet, för den som behöver det. * * Varje temablock måste sätta ALLA färgvariabler: blocken ärver av varandra * genom kaskaden, och en variabel som glöms läcker in från Äng. * * Ingen inline-stil någonstans (CSP style-src 'self'): allt utseende är klasser * här, och JS sätter klasser och attribut, aldrig färger. */ :root { --fk-font: "Helvetica Neue", Helvetica, Inter, "Liberation Sans", Arial, sans-serif; --fk-shadow: 0 6px 24px rgba(17, 17, 17, 0.14); /* Äng, ljust: jordtoner, varmt papper. */ --fk-ink: #1d211c; --fk-paper: #fbfaf6; --fk-paper-alt: #f2f0e8; --fk-muted: #5b6056; --fk-hairline: #dcd9cd; --fk-accent: #3d6b4a; --fk-accent-ink: #ffffff; --fk-map-sea: #dfe5e3; --fk-map-land: #efede4; --fk-map-border: #a6a998; --fk-forage-ho: #c49a3a; --fk-forage-hosilage: #5f9470; --fk-forage-ensilage: #4f7ca3; --fk-forage-halm: #bf6c47; --fk-forage-lucern: #86709f; --fk-forage-mixed: #3a3d38; /* Fem steg, ljust till mörkt. Sökningar i blått, pris i grönt. Ingen data är marken själv, aldrig det ljusaste steget: "inga sökningar" och "få sökningar" ska inte se likadana ut. */ --fk-q-searches-0: #dde5ec; --fk-q-searches-1: #b9c8d7; --fk-q-searches-2: #8ea6bd; --fk-q-searches-3: #62809e; --fk-q-searches-4: #3f5a76; --fk-q-price-0: #e0e8da; --fk-q-price-1: #bfd1b5; --fk-q-price-2: #96b388; --fk-q-price-3: #6b905f; --fk-q-price-4: #476b3f; color-scheme: light; } :root[data-scheme="dark"] { --fk-shadow: 0 6px 24px rgba(0, 0, 0, 0.5); --fk-ink: #ebebe4; --fk-paper: #181b17; --fk-paper-alt: #20241f; --fk-muted: #a3a898; --fk-hairline: #343930; --fk-accent: #8cbf95; --fk-accent-ink: #181b17; --fk-map-sea: #101412; --fk-map-land: #22261f; --fk-map-border: #525a4b; --fk-forage-ho: #d2b263; --fk-forage-hosilage: #82b48e; --fk-forage-ensilage: #7fa5c8; --fk-forage-halm: #d58d69; --fk-forage-lucern: #ab98c6; --fk-forage-mixed: #ebebe4; --fk-q-searches-0: #1f2832; --fk-q-searches-1: #2a3f55; --fk-q-searches-2: #3a5877; --fk-q-searches-3: #5b7fa1; --fk-q-searches-4: #92b0cc; --fk-q-price-0: #20291e; --fk-q-price-1: #2d4229; --fk-q-price-2: #405e3a; --fk-q-price-3: #628758; --fk-q-price-4: #9cbf91; color-scheme: dark; } /* Fjäll: svala nordiska toner, blågrått papper. */ :root[data-theme="fjall"] { --fk-ink: #16212b; --fk-paper: #ffffff; --fk-paper-alt: #f1f4f7; --fk-muted: #53616d; --fk-hairline: #d5dde4; --fk-accent: #2f6690; --fk-accent-ink: #ffffff; --fk-map-sea: #d6e2eb; --fk-map-land: #eff2f5; --fk-map-border: #98a8b6; --fk-forage-ho: #c9a54f; --fk-forage-hosilage: #4f9488; --fk-forage-ensilage: #4a70ad; --fk-forage-halm: #c47a5f; --fk-forage-lucern: #7c70b8; --fk-forage-mixed: #16212b; --fk-q-searches-0: #dfe3f0; --fk-q-searches-1: #b8c1dd; --fk-q-searches-2: #8a98c4; --fk-q-searches-3: #5f6fa6; --fk-q-searches-4: #3d4a7e; --fk-q-price-0: #dbece9; --fk-q-price-1: #add2cc; --fk-q-price-2: #79b0a8; --fk-q-price-3: #4a8a82; --fk-q-price-4: #2a625c; color-scheme: light; } :root[data-theme="fjall"][data-scheme="dark"] { --fk-ink: #e8eef3; --fk-paper: #121920; --fk-paper-alt: #19232d; --fk-muted: #9aa9b6; --fk-hairline: #2b3845; --fk-accent: #86b5dd; --fk-accent-ink: #121920; --fk-map-sea: #0b1116; --fk-map-land: #1b2530; --fk-map-border: #4b5d6f; --fk-forage-ho: #dcbd70; --fk-forage-hosilage: #72bcae; --fk-forage-ensilage: #7ea4e0; --fk-forage-halm: #dc9a80; --fk-forage-lucern: #a89ee6; --fk-forage-mixed: #e8eef3; --fk-q-searches-0: #1d2336; --fk-q-searches-1: #2b3657; --fk-q-searches-2: #3e4e7f; --fk-q-searches-3: #6176ad; --fk-q-searches-4: #a0b0de; --fk-q-price-0: #15302d; --fk-q-price-1: #1f4945; --fk-q-price-2: #2d6b64; --fk-q-price-3: #4f9990; --fk-q-price-4: #92cdc5; color-scheme: dark; } /* Kontrast: Okabe–Ito för fodertyperna, svart bläck, tydliga gränser. Pris i lila i stället för grönt, så att ingen länsfärg delar kulör med en fodertyp. */ :root[data-theme="kontrast"] { --fk-ink: #000000; --fk-paper: #ffffff; --fk-paper-alt: #f2f2f2; --fk-muted: #3d3d3d; --fk-hairline: #8c8c8c; --fk-accent: #0055b3; --fk-accent-ink: #ffffff; --fk-map-sea: #cfe0ee; --fk-map-land: #f7f7f7; --fk-map-border: #4d4d4d; --fk-forage-ho: #e69f00; --fk-forage-hosilage: #009e73; --fk-forage-ensilage: #0072b2; --fk-forage-halm: #d55e00; --fk-forage-lucern: #cc79a7; --fk-forage-mixed: #000000; --fk-q-searches-0: #deebf7; --fk-q-searches-1: #9ecae1; --fk-q-searches-2: #6baed6; --fk-q-searches-3: #2171b5; --fk-q-searches-4: #08306b; --fk-q-price-0: #efedf5; --fk-q-price-1: #bcbddc; --fk-q-price-2: #9e9ac8; --fk-q-price-3: #6a51a3; --fk-q-price-4: #3f007d; color-scheme: light; } :root[data-theme="kontrast"][data-scheme="dark"] { --fk-ink: #ffffff; --fk-paper: #0a0a0a; --fk-paper-alt: #171717; --fk-muted: #d0d0d0; --fk-hairline: #6b6b6b; --fk-accent: #56b4e9; --fk-accent-ink: #000000; --fk-map-sea: #000000; --fk-map-land: #1c1c1c; --fk-map-border: #a3a3a3; --fk-forage-ho: #ffb000; --fk-forage-hosilage: #2ecc9a; --fk-forage-ensilage: #56b4e9; --fk-forage-halm: #ff7a1a; --fk-forage-lucern: #e59cc8; --fk-forage-mixed: #ffffff; --fk-q-searches-0: #0d2440; --fk-q-searches-1: #16427a; --fk-q-searches-2: #2a6fb5; --fk-q-searches-3: #5aa2e0; --fk-q-searches-4: #a8d4ff; --fk-q-price-0: #25163d; --fk-q-price-1: #43287a; --fk-q-price-2: #6a47b0; --fk-q-price-3: #9b7fd9; --fk-q-price-4: #d2c2ff; color-scheme: dark; } *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; height: 100%; } body { background: var(--fk-map-sea); color: var(--fk-ink); font: 17px/1.45 var(--fk-font); -webkit-text-size-adjust: 100%; } a { color: var(--fk-accent); } /* ---- Kartan ------------------------------------------------------------ */ .fk-map { position: fixed; inset: 0; background: var(--fk-map-sea); } .leaflet-container { background: var(--fk-map-sea); font: inherit; } .fk-county { fill: var(--fk-map-land); fill-opacity: 1; stroke: var(--fk-map-border); stroke-width: 1; cursor: pointer; transition: fill 0.2s; } .fk-county:focus { outline: none; } .fk-county--hover { stroke: var(--fk-ink); stroke-width: 2; } .fk-county--selected, .fk-county--selected.fk-county--hover { stroke: var(--fk-accent); stroke-width: 3; } .fk-county--searches-0 { fill: var(--fk-q-searches-0); } .fk-county--searches-1 { fill: var(--fk-q-searches-1); } .fk-county--searches-2 { fill: var(--fk-q-searches-2); } .fk-county--searches-3 { fill: var(--fk-q-searches-3); } .fk-county--searches-4 { fill: var(--fk-q-searches-4); } .fk-county--price-0 { fill: var(--fk-q-price-0); } .fk-county--price-1 { fill: var(--fk-q-price-1); } .fk-county--price-2 { fill: var(--fk-q-price-2); } .fk-county--price-3 { fill: var(--fk-q-price-3); } .fk-county--price-4 { fill: var(--fk-q-price-4); } .fk-dot { stroke: var(--fk-paper); stroke-width: 2; fill-opacity: 0.95; } .fk-dot--ho { fill: var(--fk-forage-ho); } .fk-dot--hosilage { fill: var(--fk-forage-hosilage); } .fk-dot--ensilage { fill: var(--fk-forage-ensilage); } .fk-dot--halm { fill: var(--fk-forage-halm); } .fk-dot--lucern { fill: var(--fk-forage-lucern); } .fk-dot--mixed { fill: var(--fk-forage-mixed); } /* Bläck med en gloria i pappersfärg: läsbart på varje länsfärg, i båda lägena. */ .fk-town { color: var(--fk-ink); font-size: 12px; font-weight: 600; white-space: nowrap; pointer-events: none; text-shadow: 0 0 2px var(--fk-paper), 0 0 2px var(--fk-paper), 0 0 4px var(--fk-paper); } .fk-town span { display: inline-block; transform: translate(-50%, -50%); } .fk-tip { font-size: 14px; } .leaflet-popup-content-wrapper, .leaflet-popup-tip, .leaflet-tooltip { background: var(--fk-paper); color: var(--fk-ink); box-shadow: var(--fk-shadow); } .leaflet-tooltip { border-color: var(--fk-hairline); } .leaflet-popup-content { margin: 12px 14px; font-size: 15px; line-height: 1.4; } .fk-popup__item + .fk-popup__item { border-top: 1px solid var(--fk-hairline); margin-top: 8px; padding-top: 8px; } .fk-popup__title { font-weight: 700; } .fk-popup__meta { color: var(--fk-muted); font-size: 14px; } .leaflet-control-scale-line { /* Sidans 17 px får inte plats i Leaflets linje: "100 km" klipptes. */ font-size: 12px; line-height: 1.4; white-space: nowrap; overflow: visible; background: var(--fk-paper); color: var(--fk-ink); border-color: var(--fk-ink); } .leaflet-bar a, .leaflet-bar a:hover, .fk-fullscreen__btn { background: var(--fk-paper); color: var(--fk-ink); border-color: var(--fk-hairline); } /* Helskärmsknappen ser ut som zoomknapparna: samma ruta, samma storlek. */ .fk-fullscreen__btn { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 4px; cursor: pointer; } .fk-fullscreen__btn:hover { background: var(--fk-paper-alt); } .fk-fullscreen__btn:focus-visible { outline: 2px solid var(--fk-accent); outline-offset: 2px; } /* Skalan nere till höger lyfts över bladet på telefonen (map.js); en mjuk övergång när bladet fälls ut och ihop. */ .leaflet-bottom { transition: bottom 0.2s; } /* På stor skärm ligger panelen över kartans vänstra kant (16 px + 380 px), så zoomknapparna ställer sig till höger om den. */ @media (min-width: 48em) { .leaflet-top.leaflet-left { left: 396px; } } /* ---- Panelen: ett blad nedtill på telefonen, ett kort till vänster på större skärmar. Kartan ligger alltid under, i helskärm. -------- */ .fk-panel { position: fixed; z-index: 1000; left: 0; right: 0; bottom: 0; max-height: 48vh; display: flex; flex-direction: column; background: var(--fk-paper); border-radius: 16px 16px 0 0; box-shadow: var(--fk-shadow); padding-bottom: env(safe-area-inset-bottom); } .fk-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px 8px; border-bottom: 1px solid var(--fk-hairline); } .fk-panel__titles { display: flex; flex-direction: column; gap: 2px; min-width: 0; } /* Telefonen: kartan är produkten, så bladet börjar ihopfällt med bara rubriken synlig. Ett tryck på knappen (eller på ett län) fäller ut det. */ .fk-sheet-toggle { flex: none; min-height: 36px; padding: 0 14px; border: 1px solid var(--fk-ink); border-radius: 999px; background: var(--fk-ink); color: var(--fk-paper); font: inherit; font-size: 15px; line-height: 1; cursor: pointer; } .fk-panel__actions { flex: none; display: flex; align-items: center; gap: 8px; } /* Kugghjulet och stängkrysset: runda ikonknappar, 40 px så att de går att träffa med tummen. */ .fk-icon-btn { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--fk-hairline); border-radius: 50%; background: var(--fk-paper); color: var(--fk-ink); cursor: pointer; } .fk-icon-btn:hover { border-color: var(--fk-ink); } .fk-icon-btn:focus-visible, .fk-sheet-toggle:focus-visible { outline: 2px solid var(--fk-accent); outline-offset: 2px; } .fk-icon { display: block; fill: currentColor; } .fk-sheet-toggle[aria-expanded="true"] { background: var(--fk-paper); color: var(--fk-ink); } .fk-panel--collapsed .fk-panel__body, .fk-panel--collapsed .fk-panel__foot { display: none; } .fk-panel--collapsed .fk-panel__head { border-bottom: 0; padding-bottom: 14px; } .fk-brand { margin: 0; font-size: 1.25rem; line-height: 1.2; letter-spacing: -0.01em; } .fk-updated { margin: 0; color: var(--fk-muted); font-size: 13px; } .fk-panel__body { overflow-y: auto; padding: 4px 16px 12px; -webkit-overflow-scrolling: touch; } .fk-panel__foot { padding: 8px 16px 12px; border-top: 1px solid var(--fk-hairline); color: var(--fk-muted); font-size: 13px; line-height: 1.4; } .fk-panel__foot p { margin: 0; } .fk-panel__foot p + p { margin-top: 4px; } @media (min-width: 48em) { .fk-panel { top: 16px; left: 16px; right: auto; bottom: 16px; width: 380px; max-height: none; border-radius: 16px; padding-bottom: 0; } /* På stor skärm får panelen plats bredvid kartan och fälls aldrig ihop. */ .fk-sheet-toggle { display: none; } .fk-panel--collapsed .fk-panel__body, .fk-panel--collapsed .fk-panel__foot { display: block; } .fk-panel--collapsed .fk-panel__head { border-bottom: 1px solid var(--fk-hairline); padding-bottom: 8px; } } /* ---- Val: chips, som FoderTorgets formulär (ägarens regel 2026-09-29: val är knappar att trycka på, aldrig lösa kryssrutor). ---------- */ .fk-group { border: 0; margin: 12px 0 0; padding: 0; min-width: 0; } .fk-label { padding: 0; margin-bottom: 6px; color: var(--fk-muted); font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; } .fk-chips { display: flex; flex-wrap: wrap; gap: 6px; } .fk-chips--single { margin-top: 8px; } .fk-chip__input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; } .fk-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px; border: 1px solid var(--fk-hairline); border-radius: 999px; background: var(--fk-paper); color: var(--fk-ink); font-size: 15px; line-height: 1; cursor: pointer; user-select: none; } .fk-chip:hover { border-color: var(--fk-ink); } .fk-chip__input:checked + .fk-chip { background: var(--fk-ink); border-color: var(--fk-ink); color: var(--fk-paper); } .fk-chip__input:focus-visible + .fk-chip { outline: 2px solid var(--fk-accent); outline-offset: 2px; } /* Fodertypens färgprick i chipet: samma färg som punkterna på kartan. */ .fk-swatch { flex: none; width: 10px; height: 10px; border-radius: 50%; border: 1px solid var(--fk-paper); box-shadow: 0 0 0 1px var(--fk-hairline); } .fk-swatch--ho { background: var(--fk-forage-ho); } .fk-swatch--hosilage { background: var(--fk-forage-hosilage); } .fk-swatch--ensilage { background: var(--fk-forage-ensilage); } .fk-swatch--halm { background: var(--fk-forage-halm); } .fk-swatch--lucern { background: var(--fk-forage-lucern); } .fk-swatch--mixed { background: var(--fk-forage-mixed); } /* ---- Teckenförklaring --------------------------------------------------- */ .fk-legend { margin-top: 12px; font-size: 13px; color: var(--fk-muted); } .fk-legend__title { margin: 0 0 4px; } .fk-legend__scale { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px; } .fk-legend__step { height: 10px; border-radius: 2px; } .fk-legend__step--searches-0 { background: var(--fk-q-searches-0); } .fk-legend__step--searches-1 { background: var(--fk-q-searches-1); } .fk-legend__step--searches-2 { background: var(--fk-q-searches-2); } .fk-legend__step--searches-3 { background: var(--fk-q-searches-3); } .fk-legend__step--searches-4 { background: var(--fk-q-searches-4); } .fk-legend__step--price-0 { background: var(--fk-q-price-0); } .fk-legend__step--price-1 { background: var(--fk-q-price-1); } .fk-legend__step--price-2 { background: var(--fk-q-price-2); } .fk-legend__step--price-3 { background: var(--fk-q-price-3); } .fk-legend__step--price-4 { background: var(--fk-q-price-4); } .fk-legend__ends { display: flex; justify-content: space-between; margin-top: 2px; font-variant-numeric: tabular-nums; } .fk-legend__none { margin: 6px 0 0; display: flex; align-items: center; gap: 6px; } .fk-legend__none::before { content: ""; flex: none; width: 14px; height: 10px; border-radius: 2px; background: var(--fk-map-land); box-shadow: inset 0 0 0 1px var(--fk-map-border); } /* ---- Området: tabellen är svaret, kartan är tillägget. ------------------- */ .fk-area { margin-top: 16px; } .fk-label--block { display: block; } /* Länsväljaren: samma svar som att klicka på kartan, men nåbar med tangentbord och skärmläsare. Kartan är tillägget, tabellen är svaret. */ .fk-select { width: 100%; min-height: 40px; padding: 0 12px; border: 1px solid var(--fk-hairline); border-radius: 10px; background: var(--fk-paper); color: var(--fk-ink); font: inherit; font-size: 16px; } .fk-area__title { margin: 14px 0 6px; font-size: 1.125rem; } .fk-table { width: 100%; border-collapse: collapse; font-size: 15px; } .fk-table th, .fk-table td { padding: 7px 0; border-bottom: 1px solid var(--fk-hairline); vertical-align: baseline; } .fk-table th { text-align: left; font-weight: 400; color: var(--fk-muted); padding-right: 12px; } .fk-table td { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; } .fk-table .fk-quiet { font-weight: 400; color: var(--fk-muted); } .fk-note { margin: 8px 0 0; color: var(--fk-muted); font-size: 13px; } .fk-note:empty { display: none; } .fk-listings { list-style: none; margin: 12px 0 0; padding: 0; } .fk-listings:empty { display: none; } .fk-listings li { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--fk-hairline); font-size: 15px; } .fk-listings a { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fk-listings .fk-price { flex: none; font-variant-numeric: tabular-nums; color: var(--fk-muted); } .fk-noscript { position: fixed; inset: auto 16px 16px; z-index: 2000; margin: 0; padding: 16px; background: var(--fk-paper); border-radius: 12px; } /* ---- Utseende: dialogen bakom kugghjulet. Ett blad nedifrån på telefonen, ett kort i mitten på större skärmar. ------------------------------ */ .fk-settings { width: 100%; max-width: 100%; max-height: 85vh; margin: auto 0 0; padding: 0; border: 0; border-radius: 16px 16px 0 0; background: var(--fk-paper); color: var(--fk-ink); box-shadow: var(--fk-shadow); } .fk-settings::backdrop { background: rgba(0, 0, 0, 0.35); } /* Innehållet i en egen låda: ett klick som landar på själva är då alltid ett klick på bakgrunden, och stänger. */ .fk-settings__inner { padding: 14px 16px calc(16px + env(safe-area-inset-bottom)); } .fk-settings__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .fk-settings__title { margin: 0; font-size: 1.125rem; } .fk-settings .fk-group { margin-top: 16px; } .fk-settings .fk-note { margin-top: 16px; } @media (min-width: 48em) { .fk-settings { width: 420px; margin: auto; border-radius: 16px; } .fk-settings__inner { padding: 18px 20px 20px; } } .fk-themes { display: grid; gap: 8px; } .fk-theme { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "preview name" "preview desc"; column-gap: 12px; align-items: center; padding: 10px 12px; border: 1px solid var(--fk-hairline); border-radius: 12px; background: var(--fk-paper); cursor: pointer; } .fk-theme:hover { border-color: var(--fk-ink); } .fk-chip__input:checked + .fk-theme { border-color: var(--fk-accent); box-shadow: inset 0 0 0 1px var(--fk-accent); background: var(--fk-paper-alt); } .fk-chip__input:focus-visible + .fk-theme { outline: 2px solid var(--fk-accent); outline-offset: 2px; } .fk-theme__name { grid-area: name; font-weight: 700; font-size: 15px; } .fk-theme__desc { grid-area: desc; color: var(--fk-muted); font-size: 13px; line-height: 1.35; } /* Förhandsvisningen visar temats egna färger, oavsett vilket tema som är valt just nu: fodertypernas fem punkter på temats mark. */ .fk-theme__preview { grid-area: preview; display: grid; grid-template-columns: repeat(5, 10px); gap: 4px; padding: 8px 9px; border-radius: 8px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12); } .fk-theme__preview span { width: 10px; height: 10px; border-radius: 50%; } .fk-theme__preview--ang { background: #efede4; } .fk-theme__preview--ang span:nth-child(1) { background: #c49a3a; } .fk-theme__preview--ang span:nth-child(2) { background: #5f9470; } .fk-theme__preview--ang span:nth-child(3) { background: #4f7ca3; } .fk-theme__preview--ang span:nth-child(4) { background: #bf6c47; } .fk-theme__preview--ang span:nth-child(5) { background: #86709f; } .fk-theme__preview--fjall { background: #eff2f5; } .fk-theme__preview--fjall span:nth-child(1) { background: #c9a54f; } .fk-theme__preview--fjall span:nth-child(2) { background: #4f9488; } .fk-theme__preview--fjall span:nth-child(3) { background: #4a70ad; } .fk-theme__preview--fjall span:nth-child(4) { background: #c47a5f; } .fk-theme__preview--fjall span:nth-child(5) { background: #7c70b8; } .fk-theme__preview--kontrast { background: #f7f7f7; } .fk-theme__preview--kontrast span:nth-child(1) { background: #e69f00; } .fk-theme__preview--kontrast span:nth-child(2) { background: #009e73; } .fk-theme__preview--kontrast span:nth-child(3) { background: #0072b2; } .fk-theme__preview--kontrast span:nth-child(4) { background: #d55e00; } .fk-theme__preview--kontrast span:nth-child(5) { background: #cc79a7; }