/* sier.ing Corporate Design — globales CSS Quelle: design-tokens.json. Theme wird über data-theme auf oder einem Container gesetzt: Optionen: pastel (Default) | pastelDark | neon | earthy | highcontrast Alle drei Schriften (Berlin Type, Inter, Space Mono) liegen lokal unter ../fonts/ — keine Google-Fonts-Verbindung mehr nötig. @font-face unten anpassen falls Pfad abweicht. */ @font-face { font-family: 'Berlin Type'; src: url('../fonts/BerlinType-Regular.otf') format('opentype'); font-weight: 400; font-style: normal; } @font-face { font-family: 'Berlin Type'; src: url('../fonts/BerlinType-Bold.otf') format('opentype'); font-weight: 700; font-style: normal; } @font-face { font-family: 'Inter'; src: url('../fonts/Inter-Regular.otf') format('opentype'); font-weight: 400; font-style: normal; } @font-face { font-family: 'Inter'; src: url('../fonts/Inter-Italic.otf') format('opentype'); font-weight: 400; font-style: italic; } @font-face { font-family: 'Inter'; src: url('../fonts/Inter-SemiBold.otf') format('opentype'); font-weight: 600; font-style: normal; } @font-face { font-family: 'Inter'; src: url('../fonts/Inter-SemiBoldItalic.otf') format('opentype'); font-weight: 600; font-style: italic; } @font-face { font-family: 'Inter'; src: url('../fonts/Inter-Bold.otf') format('opentype'); font-weight: 700; font-style: normal; } @font-face { font-family: 'Inter'; src: url('../fonts/Inter-BoldItalic.otf') format('opentype'); font-weight: 700; font-style: italic; } @font-face { font-family: 'Space Mono'; src: url('../fonts/SpaceMono-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; } @font-face { font-family: 'Space Mono'; src: url('../fonts/SpaceMono-Italic.ttf') format('truetype'); font-weight: 400; font-style: italic; } @font-face { font-family: 'Space Mono'; src: url('../fonts/SpaceMono-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; } @font-face { font-family: 'Space Mono'; src: url('../fonts/SpaceMono-BoldItalic.ttf') format('truetype'); font-weight: 700; font-style: italic; } /* ---- Theme-unabhängige Tokens: Form, Abstand, Motion, Type ---- */ :root { --cd-radius-karte: 16px; --cd-radius-chip: 100px; --cd-radius-icon: 10px; --cd-shadow-objekt: 0 14px 24px -8px rgba(0,0,0,0.32); --cd-shadow-objekt-klein: 0 10px 18px -6px rgba(0,0,0,0.28); --cd-border-width: 1px; --cd-space-1: 4px; --cd-space-2: 8px; --cd-space-3: 12px; --cd-space-4: 16px; --cd-space-5: 24px; --cd-space-6: 32px; --cd-space-7: 48px; --cd-space-8: 64px; --cd-icon-sm: 16px; --cd-icon-md: 20px; --cd-icon-lg: 24px; --cd-icon-xl: 32px; --cd-icon-kachel: 30px; --cd-motion-fast: 150ms ease-out; --cd-motion-normal: 250ms ease-out; --cd-hover-rotate: -7deg; --cd-hover-rotate-icon: -6deg; --cd-font-heading: 'Berlin Type', 'Helvetica Neue', Helvetica, Arial, sans-serif; --cd-font-body: 'Inter', sans-serif; --cd-font-mono: 'Space Mono', monospace; } /* ---- Themes: Farb-Tokens ---- */ :root, [data-theme="pastel"] { --cd-bg: #EDE6D8; --cd-surface: #F7F2E9; --cd-border: #DCD3BF; --cd-text-primary: #000000; --cd-text-muted: #686255; --cd-rot: #E28B7D; --cd-rot-kante: #C97466; --cd-rot-dunkel: #6B2E27; --cd-orange: #E8A667; --cd-orange-kante: #CE8B4E; --cd-orange-dunkel: #6E3D14; --cd-gelb: #F2D477; --cd-gelb-kante: #D9B85C; --cd-gelb-dunkel: #6B5518; --cd-gruen: #9CAE6E; --cd-gruen-kante: #839457; --cd-gruen-dunkel: #43501F; --cd-tuerkis: #7FB8AE; --cd-tuerkis-kante: #679F95; --cd-tuerkis-dunkel: #244D46; --cd-blau: #86AFC7; --cd-blau-kante: #6C93AC; --cd-blau-dunkel: #234158; --cd-violett: #A48FC0; --cd-violett-kante: #8A75A7; --cd-violett-dunkel: #3E2B5C; --cd-neutral: #C9C2B4; --cd-neutral-kante: #B0A897; --cd-neutral-dunkel: #3A3226; } [data-theme="pastelDark"] { --cd-bg: #1C1A16; --cd-surface: #26231C; --cd-border: #3A362B; --cd-text-primary: #FFFFFF; --cd-text-muted: #B7AF9F; --cd-rot: #E28B7D; --cd-rot-kante: #C97466; --cd-rot-dunkel: #6B2E27; --cd-orange: #E8A667; --cd-orange-kante: #CE8B4E; --cd-orange-dunkel: #6E3D14; --cd-gelb: #F2D477; --cd-gelb-kante: #D9B85C; --cd-gelb-dunkel: #6B5518; --cd-gruen: #9CAE6E; --cd-gruen-kante: #839457; --cd-gruen-dunkel: #43501F; --cd-tuerkis: #7FB8AE; --cd-tuerkis-kante: #679F95; --cd-tuerkis-dunkel: #244D46; --cd-blau: #86AFC7; --cd-blau-kante: #6C93AC; --cd-blau-dunkel: #234158; --cd-violett: #A48FC0; --cd-violett-kante: #8A75A7; --cd-violett-dunkel: #3E2B5C; --cd-neutral: #C9C2B4; --cd-neutral-kante: #B0A897; --cd-neutral-dunkel: #3A3226; } [data-theme="neon"] { --cd-bg: #0E0D0C; --cd-surface: #1B1917; --cd-border: #332F2A; --cd-text-primary: #FFFFFF; --cd-text-muted: #9A948A; --cd-rot: #FF5C6C; --cd-rot-kante: #FF2E44; --cd-rot-dunkel: #7A0F1C; --cd-orange: #FF9A3C; --cd-orange-kante: #FF7A00; --cd-orange-dunkel: #7A3900; --cd-gelb: #FFE347; --cd-gelb-kante: #FFD400; --cd-gelb-dunkel: #6B5B00; --cd-gruen: #5CFF8F; --cd-gruen-kante: #17FF6A; --cd-gruen-dunkel: #0C7A35; --cd-tuerkis: #45F0E0; --cd-tuerkis-kante: #12E5D2; --cd-tuerkis-dunkel: #0A6E66; --cd-blau: #4FA0FF; --cd-blau-kante: #1C7CFF; --cd-blau-dunkel: #0B3E80; --cd-violett: #C378FF; --cd-violett-kante: #A83CFF; --cd-violett-dunkel: #4E1B7A; --cd-neutral: #B9B4AC; --cd-neutral-kante: #8F8A82; --cd-neutral-dunkel: #57534C; } [data-theme="earthy"] { --cd-bg: #E3D5BB; --cd-surface: #F1E6D2; --cd-border: #D2C1A0; --cd-text-primary: #000000; --cd-text-muted: #685A48; --cd-rot: #B5533E; --cd-rot-kante: #954432; --cd-rot-dunkel: #4A2015; --cd-orange: #C97A3C; --cd-orange-kante: #A8632E; --cd-orange-dunkel: #542F12; --cd-gelb: #C9A227; --cd-gelb-kante: #A8871E; --cd-gelb-dunkel: #4F3F0C; --cd-gruen: #6B7F3E; --cd-gruen-kante: #566530; --cd-gruen-dunkel: #2A3318; --cd-tuerkis: #3F7D72; --cd-tuerkis-kante: #33645B; --cd-tuerkis-dunkel: #1A332E; --cd-blau: #3E6E8E; --cd-blau-kante: #325873; --cd-blau-dunkel: #1A2E3B; --cd-violett: #6E5480; --cd-violett-kante: #594268; --cd-violett-dunkel: #2C2034; --cd-neutral: #A99B82; --cd-neutral-kante: #8D8069; --cd-neutral-dunkel: #4A4335; } [data-theme="highcontrast"] { --cd-bg: #FFFFFF; --cd-surface: #F5F5F5; --cd-border: #DDDDDD; --cd-text-primary: #000000; --cd-text-muted: #555555; --cd-rot: #C1272D; --cd-rot-kante: #9E1F24; --cd-rot-dunkel: #5C1215; --cd-orange: #D9631E; --cd-orange-kante: #B34F17; --cd-orange-dunkel: #6B3009; --cd-gelb: #E8B400; --cd-gelb-kante: #BF9400; --cd-gelb-dunkel: #5C4800; --cd-gruen: #2E7D32; --cd-gruen-kante: #245F27; --cd-gruen-dunkel: #143316; --cd-tuerkis: #00838F; --cd-tuerkis-kante: #006670; --cd-tuerkis-dunkel: #003A40; --cd-blau: #1565C0; --cd-blau-kante: #0D47A1; --cd-blau-dunkel: #082B61; --cd-violett: #6A1B9A; --cd-violett-kante: #4A148C; --cd-violett-dunkel: #2A0850; --cd-neutral: #616161; --cd-neutral-kante: #424242; --cd-neutral-dunkel: #1F1F1F; } /* ---- Basis-Reset ---- */ * { box-sizing: border-box; } html, body { margin: 0; } body { background: var(--cd-bg); color: var(--cd-text-primary); font-family: var(--cd-font-body); font-size: 16px; line-height: 1.6; transition: background var(--cd-motion-normal), color var(--cd-motion-normal); } h1, h2, h3, h4, h5, h6 { font-family: var(--cd-font-heading); font-weight: 700; margin: 0 0 0.4em; } p { margin: 0 0 1em; text-wrap: pretty; } a { color: var(--cd-blau-dunkel); text-decoration: none; } a:hover { color: var(--cd-blau-kante); text-decoration: underline; } code, pre, .cd-mono { font-family: var(--cd-font-mono); } /* ---- Formen / Komponenten ---- */ /* Inhaltskarte: Rahmen, ruhig, Teil der Seite */ .cd-card { background: var(--cd-surface); border: var(--cd-border-width) solid var(--cd-border); border-radius: var(--cd-radius-karte); padding: var(--cd-space-5); } /* Post-it: Schatten, klickbar/draggable, Hover-Rotation */ .cd-postit { border-radius: var(--cd-radius-karte); box-shadow: var(--cd-shadow-objekt); cursor: pointer; transition: transform var(--cd-motion-fast); } .cd-postit:hover { transform: rotate(var(--cd-hover-rotate)); } /* Icon-Kachel: kleines Objekt, Schatten optional, Hover-Rotation */ .cd-icon-tile { aspect-ratio: 1; border-radius: var(--cd-radius-icon); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: transform var(--cd-motion-fast); } .cd-icon-tile:hover { transform: rotate(var(--cd-hover-rotate-icon)); } .cd-icon-tile.cd-elevated { box-shadow: var(--cd-shadow-objekt-klein); } /* Pill-Button / Chip: vollrund, "Nichts" (Eigenkontrast der Volltonfarbe trägt) */ .cd-pill-button { display: inline-flex; align-items: center; gap: var(--cd-space-2); border-radius: var(--cd-radius-chip); padding: 9px 18px; font-family: var(--cd-font-heading); font-size: 13px; font-weight: 600; border: var(--cd-border-width) solid var(--cd-border); background: var(--cd-surface); color: var(--cd-text-muted); cursor: pointer; transition: background var(--cd-motion-fast), color var(--cd-motion-fast), opacity var(--cd-motion-fast); } .cd-pill-button:hover { opacity: 0.85; } .cd-pill-button.cd-active { background: var(--cd-text-primary); color: var(--cd-bg); border-color: var(--cd-text-primary); } /* Zustände */ .cd-disabled, [disabled] { opacity: 0.4; box-shadow: none; cursor: not-allowed; } .cd-focusable:focus-visible { outline: 2px solid var(--cd-blau); outline-offset: 2px; } .cd-error { border-color: var(--cd-rot) !important; color: var(--cd-rot-dunkel); }