/**
 * SMG Bento System CSS
 * Modulares Bento Grid System für Elementor Widgets
 * 
 * Dieses System ersetzt die monolithische smg-bento-grid-widget.css
 * mit wartbaren, kleinen Modulen.
 * 
 * @version 2.0
 * @author SMG Development Team
 */

/* === CORE MODULES === */

/* Grid Layout & Container */
@import url('bento-grid-layout.css');

/* Basis Card Styles */
@import url('bento-card-base.css');

/* Card Content (Icon, Titel, Subtitle) */
@import url('bento-card-content.css');

/* Card Varianten (Shops, Dining, Gifts, Opening) */
@import url('bento-card-variants.css');

/* Buttons & Actions */
@import url('bento-buttons.css');

/* Animationen */
@import url('bento-animations.css');

/* Responsive Design */
@import url('bento-responsive.css');

/* === SYSTEM METADATA === */

/**
 * Module Übersicht:
 * 
 * 1. bento-grid-layout.css      (~80 Zeilen)  - Grid Container & Layouts
 * 2. bento-card-base.css         (~140 Zeilen) - Basis Card Styles
 * 3. bento-card-content.css      (~180 Zeilen) - Content-Bereich Styles
 * 4. bento-card-variants.css     (~110 Zeilen) - Spezielle Card-Typen
 * 5. bento-buttons.css           (~100 Zeilen) - CTA & Action Elements
 * 6. bento-animations.css        (~140 Zeilen) - Moderne Animationen
 * 7. bento-responsive.css        (~220 Zeilen) - Media Queries
 * 
 * TOTAL: ~970 Zeilen (aufgeteilt in 7 Module)
 * 
 * vs. Alte Version: 795 Zeilen (monolithisch)
 */

/**
 * Vorteile:
 * 
 * ✅ Wartbarkeit - Kleine, fokussierte Dateien
 * ✅ Lesbarkeit - Klare Struktur und Trennung
 * ✅ Wiederverwendbarkeit - Module können einzeln genutzt werden
 * ✅ Debugging - Probleme schneller lokalisieren
 * ✅ Performance - Selektives Laden möglich
 * ✅ Team-Arbeit - Weniger Merge-Konflikte
 */

/**
 * Usage in WordPress/Elementor:
 * 
 * // functions.php oder Widget PHP
 * wp_enqueue_style(
 *     'smg-bento-system',
 *     get_template_directory_uri() . '/assets/css/modules/bento/bento-system.css',
 *     [],
 *     '2.0'
 * );
 */

/**
 * Development Mode:
 * 
 * Für Development kann jedes Modul einzeln geladen werden:
 * 
 * <link rel="stylesheet" href="modules/bento/bento-grid-layout.css">
 * <link rel="stylesheet" href="modules/bento/bento-card-base.css">
 * ...
 * 
 * Für Production: Minifizierte Version erstellen:
 * 
 * npm run build:bento
 * oder
 * gulp build-bento-css
 */