/* ============================================================ Azerus _shared — Core Reset · Design-Tokens · Base ------------------------------------------------------------ Quelle der Wahrheit für ALLE Web-Projekte der Azerus-Gruppe (WordPress · PHP-Tools · Astro). Wird über link.azerus.de ausgeliefert und IMMER als erstes geladen — danach folgt die brand-spezifische theme.css, die NUR Token-Variablen überschreibt (nie Komponenten-Regeln). Ladereihenfolge im : 1. _shared/css/core.css (diese Datei) 2. _shared/brands//theme.css (Farben-Overrides) 3. _shared/brands//fonts.css (@font-face + --font-*) Komponenten kommen in eigenen Dateien (css/components/*), nicht hier — diese Datei ist Fundament: Reset + Tokens + Base. ============================================================ */ /* ============================================================ 0. DEFAULT-WEBFONT — Inter (self-hosted, Variable Font) ------------------------------------------------------------ Haus-Fließtextschrift für ALLE Brands & Tools. Self-hosted (DSGVO-clean), eine Variable-Datei deckt alle Gewichte ab. Headline-/Highlight-Fonts kommen pro Brand aus Adobe Fonts (--font-display in brands//css/fonts.css). ============================================================ */ @font-face { font-family: "Inter"; src: url("../fonts/inter-latin-variable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: "Inter"; src: url("../fonts/inter-latin-variable-italic.woff2") format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; } /* ============================================================ 1. DESIGN-TOKENS (der „Vertrag") ------------------------------------------------------------ Legende: [BRAND] → wird je Brand in theme.css überschrieben [CORE] → bleibt brandübergreifend gleich (NICHT überschreiben) ============================================================ */ :root { /* ---------- Farben · Marke [BRAND] ---------- Werden in brands//theme.css gesetzt. Hier stehen nur neutrale Fallbacks (Azerus-Default), damit core.css auch ohne Brand-Datei funktioniert. */ --color-primary: #4c6071; --color-primary-hover: #3d4e5d; --color-primary-rgb: 76, 96, 113; /* für rgba(var(--color-primary-rgb), .x) */ --color-secondary: #7d9ab2; /* ---------- Farben · Semantik [CORE, Brand darf überschreiben] ---------- Status- und Flächenfarben. Default gilt für alle Brands; ein Brand KANN einzelne überschreiben, muss aber nicht. */ --color-text: #1a1a1a; --color-muted: #777; --color-danger: #b00020; --color-warning: #b88500; --color-success: #1a7f37; --color-info: #0969da; --color-surface: #fff; /* Karten, Felder, Vordergrundflächen */ --color-bg: #f6f7f9; /* Seitenhintergrund */ --color-black: #111111; /* Marken-Schwarz (aus API, je Brand) */ /* ---------- Linien [CORE] ---------- */ --border-subtle: #e3e6ea; /* dezente Trennlinien */ --border-field: #ccd; /* Formularfeld-Rahmen */ /* ---------- Typografie [Font-Family = BRAND, Rest = CORE] ---------- --font-sans/--font-serif setzt brands//fonts.css. Hier System-Font-Stack als Fallback. */ --font-sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-display: var(--font-sans); /* Headline/Highlight — Brand setzt eigene Schrift */ --font-serif: Georgia, "Times New Roman", serif; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; /* Schriftgrößen-Skala (rem, Basis 16px = 1rem) */ --text-xs: 0.75rem; /* 12px */ --text-sm: 0.875rem; /* 14px */ --text-base: 1rem; /* 16px — Default-Body */ --text-lg: 1.125rem; /* 18px */ --text-xl: 1.375rem; /* 22px */ --text-2xl: 1.75rem; /* 28px */ --text-3xl: 2.25rem; /* 36px */ /* Zeilenhöhe & Gewichte */ --leading-tight: 1.25; --leading-normal: 1.5; --weight-normal: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-display: var(--weight-bold); /* Headline-Gewicht — Brand setzt eigenes (muss im Adobe-Kit geladen sein) */ /* ---------- Spacing-Skala [CORE] ---------- 4px-Basis. In Komponenten/Layouts statt magischer px-Werte nutzen. */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.5rem; /* 24px */ --space-6: 2rem; /* 32px */ --space-7: 3rem; /* 48px */ --space-8: 4rem; /* 64px */ /* ---------- Radien [CORE] ---------- */ --radius-sm: 6px; --radius-md: 8px; --radius-lg: 10px; --radius-full: 999px; /* Pills, runde Icon-Buttons */ /* ---------- Schatten [CORE] ---------- */ --shadow-soft: 0 4px 24px rgba(0, 0, 0, .08); --shadow-card: 0 1px 2px rgba(0, 0, 0, .03); /* ---------- Transitions [CORE] ---------- */ --transition-fast: .12s ease; --transition-base: .2s ease; /* ---------- z-index-Stufen [CORE] ---------- Verbindliche Reihenfolge, damit Overlays projektübergreifend konsistent stapeln. */ --z-base: 1; --z-dropdown: 100; --z-sticky: 200; --z-overlay: 300; --z-modal: 400; --z-toast: 500; } /* ============================================================ 2. RESET / NORMALIZE ------------------------------------------------------------ Bewusst schlank. Glättet Browser-Defaults ohne Meinung über das Aussehen von Komponenten. ============================================================ */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } /* Natives zentriert sich via margin:auto — das `* { margin: 0 }` oben würde das brechen → hier wiederherstellen (gilt für .modal UND fremde Dialoge wie die Redactor-Engine). */ dialog { margin: auto; } html { -webkit-text-size-adjust: 100%; } body { min-height: 100vh; font-family: var(--font-sans); font-size: var(--text-base); line-height: var(--leading-normal); color: var(--color-text); background: var(--color-bg); -webkit-font-smoothing: antialiased; } /* Medien blockweise & responsiv */ img, picture, video, canvas, svg { display: block; max-width: 100%; } /* Formularelemente erben die Schrift statt UA-Defaults */ input, button, textarea, select { font: inherit; } /* Lange Wörter umbrechen statt überlaufen */ p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; } /* Überschriften nutzen brandübergreifend die Highlight-Schrift. Default = --font-sans; Brand setzt --font-display per fonts.css. */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: var(--weight-display); } button { cursor: pointer; } a { color: var(--color-primary); text-decoration: none; } a:hover { text-decoration: underline; } /* ============================================================ 3. KOMPONENTEN-VERTRAG (Funktions-Base) ------------------------------------------------------------ Pro Komponente NUR funktionales / Accessibility-Verhalten — KEIN Aussehen (kein Hintergrund, Padding, Radius, Layout). Das visuelle Skin liefert ausschließlich brands//css/theme.css. Verbindlicher Markup-Vertrag (brandübergreifend IDENTISCH): Button : Varianten: btn--primary · btn--secondary · btn--danger · btn--icon Modifier: btn--sm Feld : ·