@charset "UTF-8"; /* ============================================================================ ONE UI - Myso44 Designsprache "Analog Red" Version 1.0. Regelwerk: ONE_UI.md. Demo: demo/index.html. Einbinden: Alle Klassen und Variablen tragen das Präfix "ou-". So können bestehende Projekte schrittweise umziehen, ohne dass sich Namen beißen. ============================================================================ */ /* 1. Schriften --------------------------------------------------------------- Selbst gehostet (DSGVO), Dateien und Lizenzen liegen in fonts/. Bebas Neue: Headlines · Inter: Text und UI · Rock Salt: Handschrift. Wer one-ui.css kopiert, kopiert den Ordner fonts/ daneben mit. */ @font-face { font-family: "Bebas Neue"; src: url("fonts/bebas-neue-latin-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Rock Salt"; src: url("fonts/rock-salt-latin-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Inter"; src: url("fonts/inter-latin-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; 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: "Inter"; src: url("fonts/inter-latin-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; 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: "Inter"; src: url("fonts/inter-latin-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; 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: "Inter"; src: url("fonts/inter-latin-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; 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; } /* Latin-Ext: lädt nur, wenn Zeichen wie Ł, Š oder Ő tatsächlich vorkommen */ @font-face { font-family: "Inter"; src: url("fonts/inter-latin-ext-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; 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: "Inter"; src: url("fonts/inter-latin-ext-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; 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: "Inter"; src: url("fonts/inter-latin-ext-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; 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: "Inter"; src: url("fonts/inter-latin-ext-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; 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; } /* 2. Farben ------------------------------------------------------------------ */ /* Basis-Palette aus Konzept B, unabhängig vom Modus */ :root { --ou-black: #121110; --ou-coal: #201D1A; --ou-ash: #302B26; --ou-cream: #F4EFE6; --ou-stone: #A9A097; --ou-red: #E5533D; --ou-yellow: #E9B84C; --ou-green: #769B72; --ou-blue: #6F98BC; /* ergänzt: Info-Status und Projektfarbe */ --ou-paper: #E7DFD0; /* Sticker-Papier */ } /* Dark ist der Standard */ :root, [data-ou-theme="dark"] { color-scheme: dark; --ou-bg: var(--ou-black); --ou-surface: var(--ou-coal); --ou-surface-2: var(--ou-ash); --ou-field-bg: #171513; --ou-line: #38322C; --ou-line-strong: #564E45; --ou-text: var(--ou-cream); --ou-muted: var(--ou-stone); --ou-faint: #8A8178; /* Schrift-Varianten der Akzentfarben: mind. 4,5:1 auf bg, surface und surface-2 */ --ou-red-ink: #F06A53; --ou-yellow-ink: var(--ou-yellow); --ou-green-ink: #7FA57B; --ou-blue-ink: var(--ou-blue); --ou-sticker-bg: var(--ou-paper); --ou-sticker-text: #1A1714; --ou-tape: rgb(231 223 208 / .72); --ou-drop: 0 10px 14px rgb(0 0 0 / .45); --ou-focus: var(--ou-yellow); } /* Light ist optional */ [data-ou-theme="light"] { color-scheme: light; --ou-bg: #EFE9DF; --ou-surface: #F8F4ED; --ou-surface-2: #E4DCCF; --ou-field-bg: #FFFDF9; --ou-line: #D8CEBF; --ou-line-strong: #B4A795; --ou-text: #1A1714; --ou-muted: #635B53; --ou-faint: #7A7066; --ou-red-ink: #AD3426; --ou-yellow-ink: #765410; --ou-green-ink: #456443; --ou-blue-ink: #3B5E7D; --ou-sticker-bg: #FBF7EE; --ou-sticker-text: #1A1714; --ou-tape: rgb(140 120 95 / .28); --ou-drop: 0 8px 12px rgb(70 50 30 / .22); --ou-focus: #1A1714; } /* Semantische Rollen. Stehen bei jedem Theme-Wechsel neu, damit auch verschachtelte Themes korrekt auflösen. */ :root, [data-ou-theme] { --ou-primary: var(--ou-red); --ou-primary-ink: var(--ou-red-ink); --ou-primary-fill: var(--ou-red); --ou-primary-fill-hover: #EE6450; --ou-on-primary: var(--ou-black); --ou-info: var(--ou-blue); --ou-info-ink: var(--ou-blue-ink); --ou-success: var(--ou-green); --ou-success-ink: var(--ou-green-ink); --ou-warning: var(--ou-yellow); --ou-warning-ink: var(--ou-yellow-ink); --ou-danger: var(--ou-red); --ou-danger-ink: var(--ou-red-ink); /* Projektakzent: kennzeichnet, ersetzt nie die Primary-Farbe */ --ou-accent: var(--ou-primary); --ou-accent-ink: var(--ou-primary-ink); } [data-ou-accent="red"] { --ou-accent: var(--ou-red); --ou-accent-ink: var(--ou-red-ink); } [data-ou-accent="yellow"] { --ou-accent: var(--ou-yellow); --ou-accent-ink: var(--ou-yellow-ink); } [data-ou-accent="green"] { --ou-accent: var(--ou-green); --ou-accent-ink: var(--ou-green-ink); } [data-ou-accent="blue"] { --ou-accent: var(--ou-blue); --ou-accent-ink: var(--ou-blue-ink); } /* 3. Schrift, Abstand, Form, Bewegung ---------------------------------------- */ :root { --ou-font-display: "Bebas Neue", "Oswald", "Arial Narrow", sans-serif; --ou-font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --ou-font-label: var(--ou-font-body); --ou-font-hand: "Rock Salt", "Segoe Print", cursive; --ou-label-tracking: .16em; --ou-fs-xs: .75rem; /* 12 */ --ou-fs-sm: .875rem; /* 14 */ --ou-fs-md: 1rem; /* 16 */ --ou-fs-lg: 1.125rem; /* 18 */ --ou-fs-xl: 1.375rem; /* 22 */ --ou-ds-sm: 1.75rem; /* Karten, Panels */ --ou-ds-md: clamp(2.25rem, 1.7rem + 2.2vw, 3.25rem); /* Sektionen */ --ou-ds-lg: clamp(3rem, 2rem + 4.5vw, 5.5rem); /* Seitentitel */ --ou-ds-xl: clamp(3.75rem, 1.8rem + 8.5vw, 9rem); /* Hero */ --ou-space-1: 4px; --ou-space-2: 8px; --ou-space-3: 12px; --ou-space-4: 16px; --ou-space-5: 24px; --ou-space-6: 32px; --ou-space-7: 48px; --ou-space-8: 64px; --ou-space-9: 96px; --ou-radius-sm: 2px; --ou-radius: 4px; --ou-radius-pill: 999px; --ou-container: 1240px; --ou-gutter: 16px; --ou-dur-fast: 120ms; --ou-dur: 200ms; --ou-dur-slow: 320ms; --ou-ease: cubic-bezier(.2, .7, .2, 1); } /* 4. Stufen: wie viel Analog darf sein ---------------------------------------- loud Landingpage, Hero, Social Korn, Sticker, Tape, Risskanten balanced Content-Seiten leichtes Korn, Sticker, Markierungen calm App-UI, Formulare, Panels nichts davon, nur Farbe und Schrift */ :root, [data-ou-level="balanced"] { --ou-grain: .035; --ou-deco: block; --ou-deco-loud: none; --ou-mark: 1; --ou-tilt: 1; --ou-hand: var(--ou-font-hand); --ou-torn: none; } [data-ou-level="loud"] { --ou-grain: .075; --ou-deco: block; --ou-deco-loud: block; --ou-mark: 1; --ou-tilt: 1; --ou-hand: var(--ou-font-hand); --ou-torn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 480 16' preserveAspectRatio='none'%3E%3Cpath d='M0 0H480V10L468 13L455 8L441 14L430 10L414 15L401 9L386 12L372 7L360 13L344 10L331 15L318 9L302 12L290 8L276 14L262 10L247 13L233 7L220 12L205 9L192 15L178 10L165 13L150 8L137 14L122 10L108 13L95 7L82 12L68 9L54 15L41 10L27 13L14 8L0 10Z'/%3E%3C/svg%3E") left bottom / 480px 16px repeat-x, linear-gradient(#000 0 0) left top / 100% calc(100% - 15px) no-repeat; } [data-ou-level="calm"] { --ou-grain: 0; --ou-deco: none; --ou-deco-loud: none; --ou-mark: 0; --ou-tilt: 0; --ou-hand: var(--ou-font-display); --ou-torn: none; } /* 5. Basis ------------------------------------------------------------------- */ .ou { margin: 0; background: var(--ou-bg); color: var(--ou-text); font-family: var(--ou-font-body); font-size: var(--ou-fs-md); line-height: 1.55; font-synthesis: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* Resets ohne Spezifität, damit Komponenten- und Projektklassen immer gewinnen */ :where(.ou) *, :where(.ou) *::before, :where(.ou) *::after { box-sizing: border-box; } :where(.ou) :where(h1, h2, h3, h4, p, figure) { margin: 0; } :where(.ou) :where(img) { display: block; max-width: 100%; } :where(.ou) ::selection { background: var(--ou-primary); color: var(--ou-black); } :where(.ou) :focus-visible { outline: 2px solid var(--ou-focus); outline-offset: 2px; } :where(.ou) [data-ou-theme] { background: var(--ou-bg); color: var(--ou-text); } /* 6. Typografie -------------------------------------------------------------- */ .ou-display-xl, .ou-display-lg, .ou-display-md, .ou-display-sm, .ou-title { font-family: var(--ou-font-display); font-weight: 400; line-height: .9; letter-spacing: .01em; text-transform: uppercase; text-wrap: balance; } .ou-display-xl { font-size: var(--ou-ds-xl); } .ou-display-lg { font-size: var(--ou-ds-lg); } .ou-display-md { font-size: var(--ou-ds-md); } .ou-display-sm { font-size: var(--ou-ds-sm); } .ou-title { font-size: var(--ou-ds-sm); line-height: 1; } .ou-eyebrow { font-family: var(--ou-font-label); font-size: var(--ou-fs-xs); font-weight: 600; line-height: 1.35; letter-spacing: var(--ou-label-tracking); text-transform: uppercase; color: var(--ou-muted); } .ou-lead { max-width: 58ch; font-size: var(--ou-fs-lg); line-height: 1.5; color: var(--ou-muted); } .ou-hand { display: inline-block; font-family: var(--ou-hand); font-weight: 400; line-height: 1.4; /* Rock Salt hat hohe Ober- und Unterlängen */ text-transform: uppercase; color: var(--ou-accent-ink); transform: rotate(calc(var(--ou-tilt) * -2deg)); } .ou-muted { color: var(--ou-muted); } .ou-num { font-variant-numeric: tabular-nums; } /* 7. Layout-Helfer ------------------------------------------------------------ */ .ou-container { width: min(100% - 2 * var(--ou-gutter), var(--ou-container)); margin-inline: auto; } .ou-section { position: relative; padding-block: clamp(48px, 4vw + 32px, 96px); } .ou-heading { display: grid; gap: 6px; margin-bottom: var(--ou-space-6); } .ou-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ou-space-3); } /* 8. Komponenten -------------------------------------------------------------- */ /* Button */ .ou-btn { --_bg: transparent; --_fg: var(--ou-text); --_bd: transparent; display: inline-flex; align-items: center; justify-content: center; gap: .5em; min-height: 40px; padding: 0 16px; border: 1px solid var(--_bd); border-radius: var(--ou-radius-sm); background: var(--_bg); color: var(--_fg); font: 600 var(--ou-fs-sm)/1 var(--ou-font-body); letter-spacing: .01em; text-decoration: none; white-space: nowrap; cursor: pointer; user-select: none; transition: background-color var(--ou-dur-fast) var(--ou-ease), border-color var(--ou-dur-fast) var(--ou-ease), color var(--ou-dur-fast) var(--ou-ease), transform var(--ou-dur-fast) var(--ou-ease); } .ou-btn svg { width: 1.15em; height: 1.15em; flex: none; transition: transform var(--ou-dur) var(--ou-ease); } .ou-btn:active { transform: translateY(1px); } .ou-btn:focus-visible { outline: 2px solid var(--ou-focus); outline-offset: 2px; } .ou-btn:hover .ou-btn__arrow { transform: translateX(3px); } .ou-btn--primary { --_bg: var(--ou-primary-fill); --_fg: var(--ou-on-primary); --_bd: var(--ou-primary-fill); } .ou-btn--primary:hover { --_bg: var(--ou-primary-fill-hover); --_bd: var(--ou-primary-fill-hover); } .ou-btn--secondary { --_bd: color-mix(in srgb, var(--ou-text) 65%, transparent); } .ou-btn--secondary:hover { --_bg: color-mix(in srgb, var(--ou-text) 8%, transparent); --_bd: var(--ou-text); } .ou-btn--ghost { --_bd: color-mix(in srgb, var(--ou-primary) 45%, transparent); } .ou-btn--ghost:hover { --_bg: color-mix(in srgb, var(--ou-primary) 12%, transparent); --_bd: var(--ou-primary); } .ou-btn--danger { --_fg: var(--ou-danger-ink); --_bd: color-mix(in srgb, var(--ou-danger) 55%, transparent); } .ou-btn--danger:hover { --_bg: color-mix(in srgb, var(--ou-danger) 12%, transparent); --_bd: var(--ou-danger); } .ou-btn--quiet { --_fg: var(--ou-muted); } .ou-btn--quiet:hover { --_fg: var(--ou-text); --_bg: var(--ou-surface-2); } .ou-btn--sm { min-height: 32px; padding: 0 12px; font-size: .8125rem; } .ou-btn--lg { min-height: 48px; padding: 0 22px; font-size: var(--ou-fs-md); } .ou-btn--icon { width: 40px; padding: 0; } .ou-btn--icon.ou-btn--sm { width: 32px; } .ou-btn:disabled, .ou-btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; transform: none; } /* Textlink */ .ou-link { display: inline-flex; align-items: center; gap: .35em; color: var(--ou-primary-ink); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .24em; } .ou-link:hover { text-decoration-thickness: 2px; } .ou-link svg { width: 1em; height: 1em; transition: transform var(--ou-dur) var(--ou-ease); } .ou-link:hover svg { transform: translateX(3px); } /* Formularfelder */ .ou-field { display: grid; gap: 6px; } .ou-label { font: 600 var(--ou-fs-xs)/1.2 var(--ou-font-label); letter-spacing: var(--ou-label-tracking); text-transform: uppercase; color: var(--ou-muted); } .ou-input, .ou-select select, .ou-textarea { width: 100%; min-height: 40px; padding: 0 12px; border: 1px solid var(--ou-line-strong); border-radius: var(--ou-radius-sm); background: var(--ou-field-bg); color: var(--ou-text); font: 400 .9375rem/1.4 var(--ou-font-body); transition: border-color var(--ou-dur-fast) var(--ou-ease), box-shadow var(--ou-dur-fast) var(--ou-ease); } .ou-textarea { min-height: 96px; padding: 10px 12px; resize: vertical; } .ou-input::placeholder, .ou-textarea::placeholder { color: var(--ou-faint); } .ou-input:hover, .ou-select select:hover, .ou-textarea:hover { border-color: color-mix(in srgb, var(--ou-text) 35%, var(--ou-line-strong)); } .ou-input:focus, .ou-select select:focus, .ou-textarea:focus { outline: none; border-color: var(--ou-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ou-primary) 22%, transparent); } .ou-input[aria-invalid="true"], .ou-textarea[aria-invalid="true"] { border-color: var(--ou-danger); } .ou-hint { font-size: .8125rem; color: var(--ou-muted); } .ou-hint--error { display: flex; align-items: center; gap: 6px; color: var(--ou-danger-ink); } .ou-hint svg { width: 14px; height: 14px; flex: none; } .ou-search { position: relative; } .ou-search .ou-input { padding-right: 40px; } .ou-search svg { position: absolute; top: 50%; right: 12px; width: 18px; height: 18px; translate: 0 -50%; color: var(--ou-muted); pointer-events: none; } .ou-select { position: relative; } .ou-select select { appearance: none; padding-right: 36px; cursor: pointer; } .ou-select::after { content: ""; position: absolute; top: 50%; right: 15px; width: 7px; height: 7px; border-right: 1.5px solid var(--ou-muted); border-bottom: 1.5px solid var(--ou-muted); transform: translateY(-70%) rotate(45deg); pointer-events: none; } /* Toggle */ .ou-switch { display: inline-flex; align-items: center; gap: 10px; font-size: var(--ou-fs-sm); cursor: pointer; } .ou-switch input { position: absolute; width: 1px; height: 1px; opacity: 0; } .ou-switch__track { position: relative; width: 38px; height: 22px; flex: none; border: 1px solid var(--ou-line-strong); border-radius: var(--ou-radius-pill); background: var(--ou-surface-2); transition: background-color var(--ou-dur) var(--ou-ease), border-color var(--ou-dur) var(--ou-ease); } .ou-switch__track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--ou-muted); transition: transform var(--ou-dur) var(--ou-ease), background-color var(--ou-dur) var(--ou-ease); } .ou-switch input:checked + .ou-switch__track { border-color: var(--ou-primary-fill); background: var(--ou-primary-fill); } .ou-switch input:checked + .ou-switch__track::after { transform: translateX(16px); background: var(--ou-cream); } .ou-switch input:focus-visible + .ou-switch__track { outline: 2px solid var(--ou-focus); outline-offset: 2px; } .ou-switch input:disabled + .ou-switch__track { opacity: .45; } /* Checkbox und Radio */ .ou-check { display: inline-flex; align-items: center; gap: 10px; font-size: var(--ou-fs-sm); cursor: pointer; } .ou-check input { appearance: none; display: grid; place-content: center; width: 18px; height: 18px; flex: none; margin: 0; border: 1.5px solid var(--ou-line-strong); border-radius: var(--ou-radius-sm); background: var(--ou-field-bg); cursor: pointer; transition: background-color var(--ou-dur-fast) var(--ou-ease), border-color var(--ou-dur-fast) var(--ou-ease); } .ou-check input[type="radio"] { border-radius: 50%; } .ou-check input::before { content: ""; width: 10px; height: 10px; transform: scale(0); transition: transform var(--ou-dur-fast) var(--ou-ease); } .ou-check input[type="checkbox"]::before { background: var(--ou-on-primary); clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%); } .ou-check input[type="radio"]::before { border-radius: 50%; background: var(--ou-primary); width: 8px; height: 8px; } .ou-check input:checked { border-color: var(--ou-primary-fill); } .ou-check input[type="checkbox"]:checked { background: var(--ou-primary-fill); } .ou-check input:checked::before { transform: scale(1); } .ou-check input:hover:not(:checked) { border-color: var(--ou-muted); } /* Segmentschalter */ .ou-segmented { display: inline-flex; gap: 2px; padding: 2px; border: 1px solid var(--ou-line-strong); border-radius: var(--ou-radius-sm); background: var(--ou-field-bg); } .ou-segmented button { appearance: none; padding: 7px 10px; border: 0; border-radius: 1px; background: transparent; color: var(--ou-muted); font: 600 .75rem/1 var(--ou-font-body); white-space: nowrap; cursor: pointer; transition: color var(--ou-dur-fast) var(--ou-ease), background-color var(--ou-dur-fast) var(--ou-ease); } .ou-segmented button:hover { color: var(--ou-text); } .ou-segmented button[aria-pressed="true"] { background: var(--ou-surface-2); color: var(--ou-text); box-shadow: inset 0 -2px 0 var(--ou-primary); } /* Tabs */ .ou-tabs { display: flex; gap: 4px; overflow-x: auto; border-bottom: 1px solid var(--ou-line); scrollbar-width: none; } .ou-tab { position: relative; appearance: none; padding: 12px 14px; border: 0; background: none; color: var(--ou-muted); font: 600 var(--ou-fs-sm)/1 var(--ou-font-body); white-space: nowrap; cursor: pointer; transition: color var(--ou-dur-fast) var(--ou-ease); } .ou-tab:hover { color: var(--ou-text); } .ou-tab[aria-selected="true"] { color: var(--ou-text); } .ou-tab[aria-selected="true"]::after { content: ""; position: absolute; right: 14px; bottom: -1px; left: 14px; height: 2px; background: var(--ou-primary); } /* Navigation */ .ou-nav { display: flex; align-items: center; gap: var(--ou-space-5); min-height: 68px; } .ou-nav__brand { display: inline-flex; flex: none; align-items: center; gap: 8px; color: var(--ou-text); text-decoration: none; } .ou-nav__links { display: flex; gap: var(--ou-space-5); margin-inline: auto; overflow-x: auto; scrollbar-width: none; } .ou-nav__link { position: relative; padding: 8px 0; color: var(--ou-muted); font-size: var(--ou-fs-sm); font-weight: 500; text-decoration: none; white-space: nowrap; transition: color var(--ou-dur-fast) var(--ou-ease); } .ou-nav__link:hover { color: var(--ou-text); } .ou-nav__link[aria-current="page"] { color: var(--ou-primary-ink); } .ou-nav__link[aria-current="page"]::after { content: ""; position: absolute; right: 0; bottom: 2px; left: 0; height: 2px; background: var(--ou-primary); } /* Badge */ .ou-badge { --_c: var(--ou-muted); display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border: 1px solid color-mix(in srgb, var(--_c) 50%, transparent); border-radius: var(--ou-radius-sm); background: color-mix(in srgb, var(--_c) 10%, transparent); color: var(--_c); font: 600 .6875rem/1 var(--ou-font-label); letter-spacing: calc(var(--ou-label-tracking) * .7); text-transform: uppercase; white-space: nowrap; } .ou-badge--red { --_c: var(--ou-red-ink); } .ou-badge--yellow { --_c: var(--ou-yellow-ink); } .ou-badge--green { --_c: var(--ou-green-ink); } .ou-badge--blue { --_c: var(--ou-blue-ink); } .ou-badge--solid { border-color: var(--ou-primary-fill); background: var(--ou-primary-fill); color: var(--ou-on-primary); } .ou-badge--live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: ou-pulse 1.6s ease-in-out infinite; } @keyframes ou-pulse { 50% { opacity: .3; } } /* Hinweis */ .ou-alert { --_c: var(--ou-info); --_ink: var(--ou-info-ink); display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 11px 10px 11px 14px; border: 1px solid color-mix(in srgb, var(--_c) 55%, transparent); border-radius: var(--ou-radius-sm); background: color-mix(in srgb, var(--_c) 9%, var(--ou-surface)); font-size: var(--ou-fs-sm); line-height: 1.45; } .ou-alert--success { --_c: var(--ou-success); --_ink: var(--ou-success-ink); } .ou-alert--warning { --_c: var(--ou-warning); --_ink: var(--ou-warning-ink); } .ou-alert--danger { --_c: var(--ou-danger); --_ink: var(--ou-danger-ink); } .ou-alert__icon { display: grid; place-items: center; width: 22px; height: 22px; margin-top: -1px; border-radius: 50%; background: var(--_c); color: var(--ou-black); } .ou-alert__icon svg { width: 14px; height: 14px; } .ou-alert__title { font-weight: 600; } .ou-alert__close { display: grid; place-items: center; width: 26px; height: 26px; margin: -3px 0 0; padding: 0; border: 0; border-radius: var(--ou-radius-sm); background: none; color: var(--_ink); cursor: pointer; } .ou-alert__close:hover { background: color-mix(in srgb, var(--_c) 16%, transparent); } .ou-alert__close svg { width: 16px; height: 16px; } /* Karte und Panel */ .ou-card { border: 1px solid var(--ou-line); border-radius: var(--ou-radius); background: var(--ou-surface); } .ou-card--raised { background: var(--ou-surface-2); } .ou-card__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; padding: 14px 18px; border-bottom: 1px solid var(--ou-line); } .ou-card__body { padding: 18px; } /* Projektkarte */ .ou-project { display: flex; flex-direction: column; overflow: hidden; border: 1px solid color-mix(in srgb, var(--ou-accent) 60%, transparent); border-radius: var(--ou-radius); background: var(--ou-surface); color: inherit; text-decoration: none; transition: border-color var(--ou-dur) var(--ou-ease), transform var(--ou-dur) var(--ou-ease); } .ou-project:hover { border-color: var(--ou-accent); transform: translateY(-2px); } .ou-project__media { aspect-ratio: 16 / 9; background: var(--ou-surface-2); object-fit: cover; } .ou-project__body { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: end; padding: 12px 14px 14px; border-top: 1px solid var(--ou-line); } .ou-project__title { font-family: var(--ou-font-display); font-size: 1.625rem; line-height: 1; letter-spacing: .01em; text-transform: uppercase; } .ou-project__text { grid-column: 1; font-size: .8125rem; color: var(--ou-muted); } .ou-project__arrow { grid-row: 1 / span 2; grid-column: 2; width: 22px; height: 22px; color: var(--ou-accent-ink); transition: transform var(--ou-dur) var(--ou-ease); } .ou-project:hover .ou-project__arrow { transform: translateX(4px); } /* Kennzahlen */ .ou-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; overflow: hidden; border: 1px solid var(--ou-line); border-radius: var(--ou-radius); background: var(--ou-line); } .ou-stat { display: grid; gap: 4px; justify-items: center; padding: 18px 12px; background: var(--ou-surface); text-align: center; } .ou-stat__value { font-family: var(--ou-font-display); font-size: 2.5rem; line-height: 1; font-variant-numeric: tabular-nums; } .ou-stat__label { font: 600 .6875rem/1.2 var(--ou-font-label); letter-spacing: var(--ou-label-tracking); text-transform: uppercase; color: var(--ou-muted); } @media (max-width: 560px) { .ou-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* Tabelle */ .ou-table { width: 100%; border-collapse: collapse; font-size: var(--ou-fs-sm); font-variant-numeric: tabular-nums; } .ou-table th { padding: 10px 12px; border-bottom: 1px solid var(--ou-line-strong); color: var(--ou-muted); font: 600 .6875rem/1.2 var(--ou-font-label); letter-spacing: var(--ou-label-tracking); text-align: left; text-transform: uppercase; } .ou-table td { padding: 10px 12px; border-bottom: 1px solid var(--ou-line); vertical-align: middle; } .ou-table tbody tr:last-child td { border-bottom: 0; } .ou-table tbody tr:hover { background: color-mix(in srgb, var(--ou-text) 4%, transparent); } .ou-table .is-num { text-align: right; } /* Fortschritt */ .ou-progress { height: 6px; overflow: hidden; border-radius: var(--ou-radius-sm); background: var(--ou-surface-2); } .ou-progress > span { display: block; width: var(--value, 0%); height: 100%; background: var(--ou-accent); transition: width var(--ou-dur-slow) var(--ou-ease); } /* 9. Analoge Elemente ---------------------------------------------------------- Alles hier reagiert auf die Stufe. In "calm" verschwindet es vollständig. Pinselstrich, Kreis und Wegkritzeln lassen sich zeichnen: --ou-draw von 0 bis 1 (Standard 1). one-ui-motion.js animiert den Wert per Scroll oder Ereignis. */ /* Filmkorn als Ebene über einem Bereich */ .ou-grain { position: relative; isolation: isolate; } .ou-grain::after { content: ""; position: absolute; inset: 0; z-index: 2; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 180px 180px; opacity: var(--ou-grain); pointer-events: none; } /* Sticker: Papierzettel mit Handschrift */ .ou-sticker { --ou-sticker-rot: -4deg; display: var(--ou-deco); position: relative; isolation: isolate; width: max-content; max-width: 21ch; padding: .7em 1.1em .8em; color: var(--ou-sticker-text); font-family: var(--ou-font-hand); font-size: 1rem; line-height: 1.55; text-transform: uppercase; transform: rotate(calc(var(--ou-tilt) * var(--ou-sticker-rot))); filter: drop-shadow(var(--ou-drop)); } .ou-sticker::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(165deg, rgb(255 255 255 / .22), transparent 45%, rgb(0 0 0 / .07)), var(--ou-sticker-bg); clip-path: polygon(1% 4%, 12% 0, 30% 3%, 52% 0, 74% 2%, 90% 0, 100% 5%, 98% 30%, 100% 58%, 98% 84%, 100% 97%, 80% 100%, 58% 97%, 34% 100%, 14% 98%, 0 100%, 2% 72%, 0 44%, 2% 20%); } .ou-sticker--red { --ou-sticker-bg: var(--ou-red); --ou-sticker-text: var(--ou-black); } /* Klebeband */ .ou-tape { display: var(--ou-deco-loud); position: absolute; width: 88px; height: 26px; background: var(--ou-tape); transform: rotate(var(--ou-tape-rot, -7deg)); clip-path: polygon(0 10%, 4% 0, 96% 0, 100% 12%, 97% 30%, 100% 50%, 96% 70%, 100% 88%, 95% 100%, 5% 100%, 0 90%, 3% 70%, 0 50%, 4% 30%); pointer-events: none; } .ou-tape--top { top: -13px; left: 50%; translate: -50% 0; } /* Pinselstrich unter einem Wort */ .ou-brush { position: relative; display: inline-block; isolation: isolate; } .ou-brush::after { content: ""; position: absolute; right: -.1em; bottom: .02em; left: -.06em; z-index: -1; height: .3em; background: var(--ou-brush-color, var(--ou-primary)); opacity: var(--ou-mark); clip-path: inset(-60% calc((1 - var(--ou-draw, 1)) * 100%) -60% 0); /* --ou-draw 0..1 zeichnet von links nach rechts */ transform: rotate(calc(var(--ou-tilt) * -1.2deg)); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 40' preserveAspectRatio='none'%3E%3Cpath fill-rule='evenodd' d='M5 21C45 12 95 16 145 12C205 8 265 12 325 9C355 8 382 7 396 12C400 18 392 23 378 24C328 27 278 27 218 29C158 31 98 33 48 35C28 36 11 34 5 31C1 28 1 24 5 21ZM110 20C170 18 240 17 300 16L300 18C240 19 170 20 110 22ZM60 28C120 26 160 26 210 25L210 26.5C160 27.5 120 28 60 29.5Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 40' preserveAspectRatio='none'%3E%3Cpath fill-rule='evenodd' d='M5 21C45 12 95 16 145 12C205 8 265 12 325 9C355 8 382 7 396 12C400 18 392 23 378 24C328 27 278 27 218 29C158 31 98 33 48 35C28 36 11 34 5 31C1 28 1 24 5 21ZM110 20C170 18 240 17 300 16L300 18C240 19 170 20 110 22ZM60 28C120 26 160 26 210 25L210 26.5C160 27.5 120 28 60 29.5Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; } /* Handgezeichneter Kreis um ein Wort */ .ou-circled { position: relative; display: inline-block; } .ou-circled::after { content: ""; position: absolute; inset: -.3em -.45em; background: var(--ou-mark-color, var(--ou-primary)); opacity: var(--ou-mark); pointer-events: none; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 80' preserveAspectRatio='none'%3E%3Cpath d='M148 9C108 1 42 5 17 25C3 40 30 73 100 73C168 73 197 53 189 31C183 14 143 5 90 8' fill='none' stroke='%23000' stroke-width='4.5' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat, conic-gradient(from 57deg, transparent calc((1 - var(--ou-draw, 1)) * 360deg), #000 0); mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 80' preserveAspectRatio='none'%3E%3Cpath d='M148 9C108 1 42 5 17 25C3 40 30 73 100 73C168 73 197 53 189 31C183 14 143 5 90 8' fill='none' stroke='%23000' stroke-width='4.5' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat, conic-gradient(from 57deg, transparent calc((1 - var(--ou-draw, 1)) * 360deg), #000 0); -webkit-mask-composite: source-in; mask-composite: intersect; } /* Wegkritzeln (nur dekorativ, für echtes Durchstreichen nutzen) */ .ou-scratch { position: relative; display: inline-block; } .ou-scratch::after { content: ""; position: absolute; inset: 30% -6% 26%; background: var(--ou-mark-color, var(--ou-primary)); opacity: var(--ou-mark); clip-path: inset(-60% calc((1 - var(--ou-draw, 1)) * 100%) -60% 0); /* --ou-draw 0..1 zeichnet von links nach rechts */ pointer-events: none; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 40' preserveAspectRatio='none'%3E%3Cpath d='M4 24L58 10L22 30L112 8L64 33L164 12L124 32L196 16' fill='none' stroke='%23000' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 40' preserveAspectRatio='none'%3E%3Cpath d='M4 24L58 10L22 30L112 8L64 33L164 12L124 32L196 16' fill='none' stroke='%23000' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat; } /* Papierbogen für Phasenwechsel (one-ui-motion.js, Muster "wipe"). Der Container braucht position: relative und overflow: hidden. */ .ou-wipe-sheet { position: absolute; inset: -4% -8%; z-index: 30; background: linear-gradient(165deg, rgb(255 255 255 / .14), transparent 45%, rgb(0 0 0 / .08)), var(--ou-paper); clip-path: polygon(3% 0, 97% 2%, 100% 20%, 98% 45%, 100% 70%, 97% 100%, 2% 98%, 0 75%, 2% 50%, 0 25%); visibility: hidden; /* kein transform hier: GSAP würde ihn als Startversatz übernehmen */ pointer-events: none; } /* Gerissene Unterkante (nur loud) */ .ou-torn-bottom { -webkit-mask: var(--ou-torn); mask: var(--ou-torn); } /* Kritzel-Grafik (Inline-SVG mit stroke="currentColor") */ .ou-doodle { display: var(--ou-deco); flex: none; overflow: visible; color: var(--ou-primary); } /* Foto mit handschriftlichem Label */ .ou-photo { position: relative; overflow: hidden; border-radius: var(--ou-radius); background: var(--ou-ash); } .ou-photo > img { width: 100%; height: 100%; object-fit: cover; } .ou-photo__label { display: var(--ou-deco); position: absolute; right: 6%; bottom: 7%; z-index: 3; color: var(--ou-cream); font-family: var(--ou-font-hand); font-size: clamp(1.1rem, .7rem + 1.6vw, 2rem); line-height: 1.3; text-transform: uppercase; text-shadow: 0 2px 14px rgb(0 0 0 / .65); transform: rotate(calc(var(--ou-tilt) * -7deg)); pointer-events: none; } /* 10. Bühne: Beamer und Stream --------------------------------------------------- Bezug 1920 × 1080. Alle Maße in Bühnen-Einheiten: 1 u = 1 px bei 1080p. Die Bühne füllt das Fenster (OBS-Browserquelle, Beamer) und bleibt 16:9. Eingebettete Vorschauen setzen --ou-stage-u selbst, z. B. auf 0.5px. Kein Filmkorn: Rauschen verschlechtert die Stream-Kompression. Mindestgröße für Text: 34 u. Rote Schrift erst ab 54 u (Farbunterabtastung im Stream). */ .ou-stage { --ou-stage-u: min(100vw / 1920, 100vh / 1080); --ou-grain: 0; --ou-stage-line: calc(3 * var(--ou-stage-u)); --ou-stage-radius: calc(8 * var(--ou-stage-u)); --ou-stage-gap: calc(24 * var(--ou-stage-u)); position: relative; width: calc(1920 * var(--ou-stage-u)); height: calc(1080 * var(--ou-stage-u)); overflow: hidden; background: var(--ou-bg); color: var(--ou-text); font-family: var(--ou-font-body); font-size: calc(40 * var(--ou-stage-u)); line-height: 1.3; } /* Sicherer Bereich: 5 % seitlich und oben, unten 8 % frei für die Player-Leiste */ .ou-stage__safe { position: absolute; inset: calc(54 * var(--ou-stage-u)) calc(96 * var(--ou-stage-u)) calc(86 * var(--ou-stage-u)); display: grid; gap: calc(32 * var(--ou-stage-u)); align-content: start; } .ou-stage-hero, .ou-stage-display, .ou-stage-number { font-family: var(--ou-font-display); font-weight: 400; letter-spacing: .01em; text-transform: uppercase; } .ou-stage-hero { font-size: calc(200 * var(--ou-stage-u)); line-height: .9; } .ou-stage-display { font-size: calc(120 * var(--ou-stage-u)); line-height: .95; } .ou-stage-number { font-size: calc(96 * var(--ou-stage-u)); line-height: 1; font-variant-numeric: tabular-nums; } .ou-stage-question { font: 600 calc(72 * var(--ou-stage-u))/1.2 var(--ou-font-body); text-wrap: balance; } .ou-stage-question--long { font-size: calc(64 * var(--ou-stage-u)); } .ou-stage-answer { font: 600 calc(60 * var(--ou-stage-u))/1.2 var(--ou-font-body); } .ou-stage-body { font: 500 calc(40 * var(--ou-stage-u))/1.35 var(--ou-font-body); } .ou-stage-label { font: 700 calc(34 * var(--ou-stage-u))/1.2 var(--ou-font-label); letter-spacing: .12em; text-transform: uppercase; color: var(--ou-muted); } /* Kopfleiste der Bühne */ .ou-stage-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--ou-stage-gap); } /* Antwortkachel */ .ou-stage-opt { position: relative; display: flex; align-items: center; gap: calc(28 * var(--ou-stage-u)); min-height: calc(132 * var(--ou-stage-u)); padding: calc(18 * var(--ou-stage-u)) calc(32 * var(--ou-stage-u)) calc(18 * var(--ou-stage-u)) calc(18 * var(--ou-stage-u)); border: var(--ou-stage-line) solid var(--ou-line-strong); border-radius: var(--ou-stage-radius); background: var(--ou-surface); } .ou-stage-opt__key { display: grid; place-items: center; width: calc(96 * var(--ou-stage-u)); height: calc(96 * var(--ou-stage-u)); flex: none; border-radius: calc(6 * var(--ou-stage-u)); background: var(--ou-surface-2); font: 400 calc(72 * var(--ou-stage-u))/1 var(--ou-font-display); } .ou-stage-opt[data-ou-state="correct"] { border-color: var(--ou-success); background: color-mix(in srgb, var(--ou-success) 16%, var(--ou-surface)); } .ou-stage-opt[data-ou-state="correct"] .ou-stage-opt__key { background: var(--ou-success); color: var(--ou-black); } .ou-stage-opt[data-ou-state="wrong"] { opacity: .55; } /* Fortschrittsbalken auf der Bühne: dick genug für Beamer und Stream */ .ou-stage-progress { height: calc(14 * var(--ou-stage-u)); border-radius: calc(7 * var(--ou-stage-u)); background: var(--ou-surface-2); overflow: hidden; } .ou-stage-progress > span { display: block; width: var(--value, 0%); height: 100%; background: var(--ou-primary); } /* 11. Bewegung reduzieren --------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .ou *, .ou *::before, .ou *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; animation-iteration-count: 1 !important; } }