/* ========================================================================== MAIN.CSS -- Einziger Einstiegspunkt fuer alle Styles Einbindung im Template: Das @layer-System regelt die Prioritaet der projekteigenen Styles: Spaetere Layer gewinnen bei Konflikten IMMER -- unabhaengig von Spezifitaet oder Reihenfolge im CSS. UTILITIES WERDEN HIER NICHT IMPORTIERT. Hintergrund: Das Framework injiziert eigene unlayered Styles (defaults.css mit z.B. .cms-container-el { min-height: 30px }) NACH main.css ins . Unlayered Normal-Deklarationen schlagen alle @layer-Regeln -- und auch unlayered Utilities im selben Head verlieren dann per Source-Order. Loesung: Utilities sind als am Body-Ende eingebunden (siehe templates/de/main-template.volt) UND tragen alle !important. Damit gewinnen sie sicher gegen jedes Framework-Default-CSS. reset => Browser-Reset, Base-Styles tokens => Design Tokens (Framework-Defaults + Projekt-Theme) layout => 12-Spalten Grid typography => Typografische Grundstyles (Headings, Absaetze, Listen) helpers => Legacy-Aliase, CMS-Patterns components => UI-Bausteine (.box, .btn, Services, Formulare) navigation => Navigation cms => CMS-/Live-Editor-spezifisch (utilities) => extern, Body-Ende, !important -- siehe oben ========================================================================== */ @layer reset, tokens, layout, typography, helpers, components, navigation, cms; /* ---------------------------------------------------------------- RESET -- Browser-Defaults zuruecksetzen ---------------------------------------------------------------- */ @import url("reset.css") layer(reset); /* ---------------------------------------------------------------- TOKENS -- Design Tokens (Framework-Defaults) ---------------------------------------------------------------- */ @import url("tokens.css") layer(tokens); /* ---------------------------------------------------------------- THEME -- Projekt-spezifische Overrides Überschreibt Semantic Tokens (Farben, Fonts, Heading-Groessen), deklariert @font-face und Icon-Klassen. KEIN layer() im Import — die Datei deklariert ihre Layers selbst: @layer tokens {} fuer Token-Overrides @layer utilities {} fuer Icon-Klassen @font-face ausserhalb (registriert global, kein Layer noetig) ---------------------------------------------------------------- */ @import url("theme.css"); /* ---------------------------------------------------------------- LAYOUT -- 12-Spalten CSS Grid Natives Grid (kein Flexbox-Hack). Sitzt im layout-Layer damit Utilities spaeter gewinnen. ---------------------------------------------------------------- */ @import url("grid.css") layer(layout); /* ---------------------------------------------------------------- TYPOGRAPHY -- Headings, Absaetze, Listen, Tabellen ---------------------------------------------------------------- */ @import url("typography.css") layer(typography); /* ---------------------------------------------------------------- HELPERS -- Legacy-Aliase und CMS-spezifische Patterns ---------------------------------------------------------------- */ @import url("helpers.css") layer(helpers); @import url("lazy-animation.css") layer(helpers); /* ---------------------------------------------------------------- COMPONENTS -- UI-Bausteine, CMS-Services, Formulare Sitzt VOR utilities damit Utilities gewinnen koennen. ---------------------------------------------------------------- */ @import url("components.css") layer(components); @import url("services.css") layer(components); @import url("forms.css") layer(components); @import url("project-rest.css") layer(components); /* ---------------------------------------------------------------- NAVIGATION — Popover-API-basiert (Utility-First) Nur Verhalten + Pseudo-Elemente + Animationen. Visuelles Styling liegt als Utilities auf den HTML-Elementen. Begleit-Script (optional): ---------------------------------------------------------------- */ @import url("navigation.css") layer(navigation); /* ---------------------------------------------------------------- CMS -- CMS-spezifisch und Tool-Styles ---------------------------------------------------------------- */ @import url("cms.css") layer(cms); @import url("tools.css") layer(cms); /* ---------------------------------------------------------------- UTILITIES -- NICHT hier importiert! Werden im Template als AM ENDE des eingebunden: Grund: Das Framework injiziert eigene unlayered Styles (defaults.css mit z.B. .cms-container-el { min-height: 30px }) NACH main.css. Im Head wuerden Utilities daher per Source-Order verlieren -- selbst unlayered. Ein am Body-Ende liegt im Dokumentbaum nach allem im Head (auch dynamisch injiziertem) und gewinnt damit garantiert ueber Source-Order. ---------------------------------------------------------------- */ /* ========================================================================== BEWUSST NICHT IMPORTIERT — separat eingebunden oder pending ========================================================================== demo.css Nur fuer die Dokumentations-/Demo-Seite, dort separat per einbinden. le-styles.css CMS-Live-Editor-Overrides, vom Editor separat geladen. print.css Print-Stylesheet, per einbinden. _navigation-draft.css Reference-/Refactor-Kandidat (alternatives Selektor-Schema zu navigation.css). Underscore- Prefix als Build-Marker — nicht importieren, enthält überlappende Klassen-Definitionen mit navigation.css. Bleibt als Vergleichs-Material liegen, bis die Refactor-Frage entschieden ist. ========================================================================== */