/**
 * Template Plugin - Stylesheet
 * 
 * @package template
 * @version 1.0.0
 * @description Styles für das Template Plugin
 * 
 * WICHTIG: Alle Farben müssen CSS-Variablen aus /assets/css/colors.css verwenden!
 * KEINE hardcodierten Hex/RGB-Werte verwenden!
 */

/* ============================================================================
   CONTAINER STYLES
   ============================================================================ */

.template-container {
      padding: var(--spacing-md, 20px);
}

/* ============================================================================
   CARD STYLES
   ============================================================================ */

.template-card {
      background-color: var(--card-bg);
      border: 1px solid var(--border-color);
      border-radius: var(--border-radius, 8px);
      box-shadow: var(--shadow-sm);
}

.template-card-header {
      background-color: var(--primary-color);
      color: var(--text-inverse);
      padding: var(--spacing-sm, 15px);
      border-bottom: 1px solid var(--border-color);
}

.template-card-body {
      padding: var(--spacing-md, 20px);
}

/* ============================================================================
   BUTTON STYLES (optional - Bootstrap bevorzugen)
   ============================================================================ */

.template-btn {
      padding: var(--spacing-xs, 10px) var(--spacing-sm, 15px);
      background-color: var(--primary-color);
      color: var(--text-inverse);
      border: none;
      border-radius: var(--border-radius, 4px);
      cursor: pointer;
      transition: all 0.3s ease;
}

.template-btn:hover {
      background-color: var(--primary-hover);
}

/* ============================================================================
   RESPONSIVE DESIGN
   ============================================================================ */

@media (max-width: 768px) {
      .template-container {
            padding: var(--spacing-sm, 15px);
      }
}

/* ============================================================================
   DARKMODE SUPPORT
   ============================================================================ */

/* Alle Farben werden automatisch über CSS-Variablen gehandhabt */
/* Keine zusätzlichen Darkmode-Regeln nötig, wenn Variablen korrekt verwendet werden */