/* ============================================================================ youbooth — TEIL 2: Tokens Quelle: entwurf/design_handoff_youbooth/BUILD_SPEC.md, Teil 2. Diese Datei ist die EINZIGE Stelle, an der Farbe, Schrift, Mass, Radius, Schatten und Zeit definiert werden. Steht ein Wert nicht hier, ist er falsch. Geltungsbereich: die Basisregeln haengen an .yb (auf ), damit die bestehenden Seiten der Box unveraendert weiterlaufen, bis sie umgestellt sind. Die Variablen selbst liegen auf :root und wirken nirgends von allein. ========================================================================= */ /* --- Schriften, lokal. Kein Fremdabruf. -------------------------------- */ @font-face { font-family: 'Archivo'; font-style: normal; font-weight: 400; font-display: swap; src: url('schrift/archivo-latin-ext-400.woff2') format('woff2'); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Archivo'; font-style: normal; font-weight: 400; font-display: swap; src: url('schrift/archivo-latin-400.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Archivo'; font-style: normal; font-weight: 500; font-display: swap; src: url('schrift/archivo-latin-ext-500.woff2') format('woff2'); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Archivo'; font-style: normal; font-weight: 500; font-display: swap; src: url('schrift/archivo-latin-500.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Archivo'; font-style: normal; font-weight: 600; font-display: swap; src: url('schrift/archivo-latin-ext-600.woff2') format('woff2'); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Archivo'; font-style: normal; font-weight: 600; font-display: swap; src: url('schrift/archivo-latin-600.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Archivo'; font-style: normal; font-weight: 700; font-display: swap; src: url('schrift/archivo-latin-ext-700.woff2') format('woff2'); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Archivo'; font-style: normal; font-weight: 700; font-display: swap; src: url('schrift/archivo-latin-700.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Archivo'; font-style: normal; font-weight: 800; font-display: swap; src: url('schrift/archivo-latin-ext-800.woff2') format('woff2'); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Archivo'; font-style: normal; font-weight: 800; font-display: swap; src: url('schrift/archivo-latin-800.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Archivo'; font-style: normal; font-weight: 900; font-display: swap; src: url('schrift/archivo-latin-ext-900.woff2') format('woff2'); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Archivo'; font-style: normal; font-weight: 900; font-display: swap; src: url('schrift/archivo-latin-900.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('schrift/plexmono-latin-ext-400.woff2') format('woff2'); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('schrift/plexmono-latin-400.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('schrift/plexmono-latin-ext-500.woff2') format('woff2'); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('schrift/plexmono-latin-500.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* Instrument Serif — die dritte Schrift der Vorlagen. Sie setzt die Titel INNERHALB der Karten und die ruhigen Zwischenzeilen; der Wechsel zu ihr gibt den Seiten ihren Rhythmus (Abschnitt schreit in Archivo-Versalien, Karte antwortet ruhig in Serife). Die Vorlagen laden sie von fonts.googleapis.com. Hier liegt sie lokal: vier Dateien, 67 KB, geholt am 20.08.2026, Lizenz OFL. Kein Fremdabruf. */ @font-face { font-family: 'Instrument Serif'; font-style: normal; font-weight: 400; font-display: swap; src: url('schrift/instrumentserif-latin-ext-400.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Instrument Serif'; font-style: normal; font-weight: 400; font-display: swap; src: url('schrift/instrumentserif-latin-400.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Instrument Serif'; font-style: italic; font-weight: 400; font-display: swap; src: url('schrift/instrumentserif-latin-ext-400i.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Instrument Serif'; font-style: italic; font-weight: 400; font-display: swap; src: url('schrift/instrumentserif-latin-400i.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* --- Farben ------------------------------------------------------------ */ /* Regel: EIN Akzent (amber), ZWEI Grundflaechen (paper, ink), DREI Zustandsfarben (ok, warn, und amber als Kennzeichnung). ok/warn nie dekorativ. Auf Amber immer amber-ink, nie Weiss. */ :root { --yb-ink: #0b0b0d; --yb-ink-soft: #17171c; --yb-amber: #F2B23E; --yb-amber-ink: #141008; --yb-paper: #f6f4f1; --yb-white: #ffffff; --yb-deep: #8e2b26; --yb-line: rgba(0,0,0,.09); --yb-line-dark: rgba(244,242,238,.14); --yb-text: #0b0b0d; --yb-text-muted: rgba(0,0,0,.58); --yb-on-dark: #f4f2ee; --yb-on-dark-muted: rgba(244,242,238,.62); /* BUILD_SPEC nennt .42. Gemessen auf ink ergibt das 3,75:1 und faellt damit unter 4,5:1 durch. Auf .48 angehoben: gemessen 4,58:1. Ein Etikett, das man nicht lesen kann, ist kein Etikett. */ --yb-on-dark-faint: rgba(244,242,238,.48); --yb-link: #a8412f; --yb-link-hover: #7d2f21; --yb-ok: #17B187; --yb-warn: #E0483C; /* Die beiden Zustandsfarben aus Teil 2 sind fuer DUNKLE Flaechen gesetzt und tragen dort (ok 7,19:1 · warn 4,83:1 auf ink). Als Text auf Hell fallen sie durch: ok 2,49:1 · warn 4,07:1 auf paper. Dafuer gibt es dieselben Toene abgedunkelt — gemessen 4,52:1 und 4,51:1 auf paper. Der Farbton bleibt, nur die Helligkeit gibt nach. */ --yb-ok-hell: #117f61; --yb-warn-hell: #c84036; /* Und umgekehrt: auf ink-soft (der Kartenflaeche im Dunkeln) misst warn nur 4,39:1. Um 2 % aufgehellt sind es 4,52:1 auf ink-soft und 4,97:1 auf ink. ok braucht dort nichts (6,53:1). */ --yb-warn-dunkel: #e14c40; /* Flaechenabhaengig: auf Hell die dunkle Fassung, auf Dunkel das Original. */ --yb-zustand-ok: var(--yb-ok-hell); --yb-zustand-warn: var(--yb-warn-hell); /* Flaechenbezogene Aliase. Werden von .yb-sec--ink umgeschaltet, damit Bausteine nicht wissen muessen, auf welchem Grund sie stehen. */ --yb-flaeche: var(--yb-paper); --yb-vordergrund: var(--yb-text); --yb-gedaempft: var(--yb-text-muted); --yb-rahmen: var(--yb-line); --yb-karte-grund: var(--yb-white); /* Eyebrow-Farbe ist flaechenabhaengig: Amber auf ink misst 10,5:1, auf paper aber nur 1,71:1. Auf Hell traegt deshalb ink-soft (16,27:1) — Teil 2 weist ink-soft ohnehin "Ueberschriften auf Hell" zu. */ --yb-eyebrow-farbe: var(--yb-ink-soft); /* --- Schrift -------------------------------------------------------- */ --yb-font-display: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif; --yb-font-ui: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif; --yb-font-mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Code', Consolas, monospace; /* Die ruhige Gegenstimme zu Archivo: Kartentitel und Zwischenzeilen, wie in den Vorlagen. */ --yb-font-serif: 'Instrument Serif', Georgia, 'Times New Roman', serif; /* --- Abstandsraster: 4 8 12 16 20 26 32 44 56 72 96 ------------------ */ --yb-s0: 0px; --yb-s1: 4px; --yb-s2: 8px; --yb-s3: 12px; --yb-s4: 16px; --yb-s5: 20px; --yb-s6: 26px; --yb-s7: 32px; --yb-s8: 44px; --yb-s9: 56px; --yb-s10: 72px; --yb-s11: 96px; /* --- Radien --------------------------------------------------------- */ --yb-r-pill: 9px; --yb-r-btn: 10px; --yb-r-chip: 12px; --yb-r-card: 14px; --yb-r-card-lg: 16px; --yb-r-hero: 22px; --yb-r-full: 999px; /* --- Schatten ------------------------------------------------------- */ --yb-schatten-karte: 0 1px 2px rgba(0,0,0,.04); --yb-schatten-hebung: 0 18px 40px -28px rgba(0,0,0,.45); --yb-schatten-cta: 0 6px 18px -8px rgba(242,178,62,.75); --yb-schatten-cta-an: 0 10px 26px -8px rgba(242,178,62,.85); --yb-schatten-kopf: 0 10px 30px -22px rgba(0,0,0,.7); /* --- Zeit ----------------------------------------------------------- */ --yb-t-farbe: .15s ease; /* Farbe, Flaeche */ --yb-t-weg: .2s ease; /* transform */ --yb-t-klapp: .35s cubic-bezier(.22,.61,.36,1); /* auf- und zuklappen */ /* --- Mass ----------------------------------------------------------- */ --yb-rand: clamp(20px, 4vw, 56px); --yb-breite: 1240px; --yb-textbreite: 720px; --yb-leadbreite: 640px; --yb-kopfhoehe: 74px; } /* Bruchstellen (nur als Notiz, Media Queries koennen keine Variablen lesen): nav 1160px · lg 1020px · md 900px · sm 640px */ /* ======================================================================== Basis. Gilt nur fuer Seiten mit . ===================================================================== */ html:has(> body.yb) { scroll-behavior: smooth; } .yb, .yb *, .yb *::before, .yb *::after { box-sizing: border-box; } body.yb { margin: 0; background: var(--yb-paper); color: var(--yb-text); font-family: var(--yb-font-ui); font-size: 16px; font-weight: 400; line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } :where(.yb h1, .yb h2, .yb h3, .yb h4, .yb p, .yb figure, .yb ul, .yb ol) { margin: 0; } .yb img, .yb svg, .yb video { display: block; max-width: 100%; } /* `hidden` muss staerker sein als jede Bausteinklasse mit display:flex. Gemessen: die Ersparnis-Zeile auf /preise blieb trotz hidden sichtbar, weil .yb-reihe display:flex setzt. */ .yb [hidden] { display: none !important; } /* Archivo hat KEINEN Kursivschnitt. Ein laesst den Browser die Buchstaben darum selbst neigen und verzerren — auf einer Ueberschrift sieht das schief aus, nicht betont. Gemessen an /gallery und /guestbook, bevor diese Regel stand. Das System betont mit dem einen Akzent, nicht mit Neigung. Symbol- Platzhalter (``, ``) sind davon ausgenommen — sie tragen ein Bild, keinen Text. */ :where(.yb em, .yb i:not([data-ic]):not([class])) { font-style: normal; color: var(--yb-eyebrow-farbe); } /* --- Typo-Skala T1 ------------------------------------------------------ */ /* Die Grundregeln fuer Elementnamen stehen in :where() und haben damit Spezifitaet 0. Sonst schlaegt ".yb h1" jede Bausteinklasse und ".yb a" faerbt Navigation und Knoepfe rostrot — gemessen und behoben. */ /* Lange deutsche Woerter sprengen bei 375 px jede Spalte: "Weiterempfehlen" misst bei 38 px 405 px, "Systemanforderungen" 425 px — beide schoben das Dokument breiter als das Fenster. `break-word` genuegt dafuer NICHT: es aendert die Mindestbreite des Kastens nicht, und ein zentriertes Flex-Kind wird nach seiner Mindestbreite bemessen. `anywhere` zaehlt in die Mindestbreite hinein. NUR AM TELEFON. Diese Regel stand vorher ohne Abfrage und griff damit auf jeder Breite. Gemessen bei 1440 px auf `/`: die H1 lief ueber SECHS Zeilen und trennte mitten im Wort zu "DIE SOFT-WARE". Die Vorlage `Start.dc.html` steht dort in DREI Zeilen mit `hyphens: manual`. Ab 768 px bleibt der Umbruch deshalb normal — dort ist die Spalte breit genug, dass kein Wort sie sprengt. */ @media (max-width: 767px) { :where(.yb h1, .yb h2, .yb h3, .yb .yb-h1, .yb .yb-h2, .yb .yb-h3) { overflow-wrap: anywhere; hyphens: auto; } } :where(.yb h1, .yb .yb-h1) { font-family: var(--yb-font-display); font-weight: 900; font-size: clamp(38px, 5vw, 72px); line-height: .94; letter-spacing: -.035em; text-transform: uppercase; text-wrap: balance; } :where(.yb h2, .yb .yb-h2) { font-family: var(--yb-font-display); font-weight: 900; font-size: clamp(30px, 3.6vw, 48px); line-height: .96; letter-spacing: -.03em; text-transform: uppercase; text-wrap: balance; } :where(.yb h3, .yb .yb-h3) { font-family: var(--yb-font-display); font-weight: 800; font-size: clamp(20px, 2vw, 26px); line-height: 1; letter-spacing: -.02em; text-transform: uppercase; } .yb .yb-lead { font-size: 17.5px; line-height: 1.65; color: var(--yb-gedaempft); max-width: var(--yb-leadbreite); text-wrap: pretty; } .yb .yb-text { font-size: 15.5px; line-height: 1.6; color: var(--yb-gedaempft); max-width: var(--yb-textbreite); text-wrap: pretty; } .yb .yb-klein { font-size: 14.5px; line-height: 1.5; color: var(--yb-gedaempft); } .yb .yb-label { font-family: var(--yb-font-ui); font-weight: 600; font-size: 12.5px; line-height: 1.2; } /* Eyebrow — Mono, Versalien, in der Regel Amber */ .yb .yb-eyebrow { font-family: var(--yb-font-mono); font-weight: 500; font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--yb-eyebrow-farbe); } /* Datenwert — Mono, fuer Zahlen, Uhrzeiten, Kennungen */ .yb .yb-wert { font-family: var(--yb-font-mono); font-weight: 500; font-size: 13px; letter-spacing: .08em; font-variant-numeric: tabular-nums; } /* Badge — Mono, klein, Versalien */ .yb .yb-badge { display: inline-block; font-family: var(--yb-font-mono); font-weight: 600; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; line-height: 1; } /* Booth-, Gaeste- und Beamer-Oberflaechen schreiben gemischt, nicht in Versalien. Ausnahme laut Teil 2. */ .yb-gemischt h1, .yb-gemischt h2, .yb-gemischt h3, .yb-gemischt .yb-h1, .yb-gemischt .yb-h2, .yb-gemischt .yb-h3 { text-transform: none; } /* KARTENTITEL schreiben gemischt — auch auf Versalien-Seiten. Die Vorlage `Start.dc.html` fuehrt dafuer eine eigene Ausnahmeliste: .h2, .stitle, .ybh2, .pname, .serif, .tt { text-transform: none } Sie setzt Abschnittsueberschriften in schreiende Versalien und laesst die Titel INNERHALB der Karten ruhig. Erst dieser Wechsel gibt der Seite ihren Rhythmus; ohne ihn schreit jede Zeile gleich laut. Gemessen auf /: die Vorlage hat 8 Versalien-Ueberschriften, diese Umsetzung hatte 32. Alle 24 zusaetzlichen sind Kartentitel — und alle 110 h3 des Projekts stehen in einer Karte, keiner frei. Darum reicht diese eine Regel. Die Serifenschrift `Instrument Serif` wird NICHT gesetzt — obwohl sie in den Inline-Stilen der Vorlagen steht. Die Vorlage schaltet sie naemlich selbst ab: [style*="Instrument Serif"] { font-family: Archivo !important; font-weight: 800 !important; letter-spacing: -.025em !important } Gemessen an `Start.dc.html`: die Kartentitel tragen den Inline-Stil `font: 400 30px 'Instrument Serif'`, gerendert werden sie als Archivo 800. Genau das sagt auch BUILD_SPEC.md Zeile 15. Die Werte unten sind aus dieser Regel abgeschrieben. Die Schriftdateien liegen trotzdem lokal (20 statt 16), damit keine Vorlage mehr fonts.googleapis.com anruft. */ :where(.yb .yb-karte h3, .yb .yb-karte .yb-h3, .yb [class*="karte"] h3, .yb [class*="kachel"] h3) { font-weight: 800; font-size: clamp(21px, 1.7vw, 27px); line-height: 1.06; text-transform: none; letter-spacing: -.025em; } /* Die grossen Karten der Startseite tragen den Titel deutlich groesser — in der Vorlage `clamp(30px,3vw,40px)/1.02`. */ :where(.yb .yb-karte--gross h3, .yb .yb-karte--breit h3) { font-size: clamp(27px, 3vw, 40px); line-height: 1.02; } /* --- Links -------------------------------------------------------------- */ :where(.yb a) { color: var(--yb-link); text-decoration: none; } :where(.yb a:hover) { color: var(--yb-link-hover); } /* Rost auf ink misst 3,24:1 und faellt durch. Auf dunkler Flaeche traegt Amber (10,5:1) — dieselbe Regel gilt schon fuer den Textlink-Knopf. */ :where(.yb-sec--ink a, .yb-karte--ink a, .yb-fuss a) { color: var(--yb-amber); } :where(.yb-sec--ink a:hover, .yb-karte--ink a:hover) { color: var(--yb-amber); } /* Unterstrichen nur im Fliesstext. */ .yb .yb-text a, .yb .yb-lead a, .yb p.yb-fliess a { text-decoration: underline; text-underline-offset: 2px; } /* --- Fokus -------------------------------------------------------------- */ .yb :focus-visible { outline: 2px solid var(--yb-amber); outline-offset: 2px; border-radius: 4px; } /* --- Bewegung abschaltbar ----------------------------------------------- */ @media (prefers-reduced-motion: reduce) { html:has(> body.yb) { scroll-behavior: auto; } .yb *, .yb *::before, .yb *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }