/* ==========================================================================
   MAIN.CSS -- Einziger Einstiegspunkt fuer alle Styles
   
   Einbindung im Template:
   <link rel="stylesheet" href="/css/main.css">
   
   Das @layer-System regelt die Prioritaet:
   Spaetere Layer gewinnen bei Konflikten IMMER --
   unabhaengig von Spezifitaet oder Reihenfolge im CSS.
   
   WICHTIG: Kein CSS ausserhalb dieses Layer-Systems laden!
   Unlayered CSS schlaegt ALLE Layer -- das fuehrt zu
   unvorhersehbarem Verhalten.
   
   reset      => Browser-Reset, Base-Styles
   tokens     => CMS Design Tokens (Farben, Fonts, Groessen)
   layout     => 12-Spalten Grid
   fonts      => @font-face Deklarationen
   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  => Utility-Klassen -- gewinnt gegen alles oben
   ========================================================================== */

@layer reset, tokens, layout, fonts, typography, helpers, components, navigation, cms, utilities;


/* ----------------------------------------------------------------
   RESET -- Browser-Defaults zuruecksetzen
   ---------------------------------------------------------------- */
@import url("reset.css") layer(reset);


/* ----------------------------------------------------------------
   TOKENS -- CMS Design Tokens (Farben, Fonts, Groessen)
   ---------------------------------------------------------------- */
@import url("tokens.css") layer(tokens);


/* ----------------------------------------------------------------
   LAYOUT -- 12-Spalten Flexbox Grid
   Migriert aus modules/_flexgrid.scss.
   Sitzt im layout-Layer damit Utilities spaeter gewinnen.
   ---------------------------------------------------------------- */
@import url("grid.css") layer(layout);


/* ----------------------------------------------------------------
   FONTS -- Schriften
   ---------------------------------------------------------------- */
@import url("fonts.css") layer(fonts);


/* ----------------------------------------------------------------
   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("demo.css") layer(components);
@import url("project-rest.css") layer(components);


/* ----------------------------------------------------------------
   NAVIGATION
   ---------------------------------------------------------------- */
@import url("navigation.css") layer(navigation);
/* @import url("nav-presets.css") layer(navigation); */


/* ----------------------------------------------------------------
   CMS -- CMS-spezifisch und Tool-Styles
   ---------------------------------------------------------------- */
@import url("cms.css") layer(cms);
@import url("tools.css") layer(cms);


/* ----------------------------------------------------------------
   UTILITIES -- Gewinnt gegen alles oben automatisch
   Beide Utility-Dateien gehen in denselben utilities-Layer.
   ---------------------------------------------------------------- */
@import url("baseVariables.css") layer(utilities);
@import url("utilitiesResponsive.css") layer(utilities);