/* ==========================================================================
   UTILITY CLASSES - Extracted from Inline Styles
   suchyconsulting.de CSS-Optimierung 2025-10-30
   ========================================================================== */

/* ==========================================================================
   SPACING UTILITIES
   ========================================================================== */

/* Margin Bottom */
.mb-05 { margin-bottom: 0.5rem; }
.mb-1 { margin-bottom: 1rem; }
.mb-1-5 { margin-bottom: 1.5rem; }
.mb-2 { margin-bottom: 2rem; }
.mb-3 { margin-bottom: 3rem; }

/* Margin Top */
.mt-05 { margin-top: 0.5rem; }
.mt-1 { margin-top: 1rem; }
.mt-1-5 { margin-top: 1.5rem; }
.mt-2 { margin-top: 2rem; }
.mt-3 { margin-top: 3rem; }

/* Padding */
.p-05 { padding: 0.5rem; }
.p-1 { padding: 1rem; }
.p-1-5 { padding: 1.5rem; }
.p-2 { padding: 2rem; }
.p-3 { padding: 3rem; }

/* Padding Left */
.pl-05 { padding-left: 0.5rem; }
.pl-1 { padding-left: 1rem; }
.pl-1-5 { padding-left: 1.5rem; }
.pl-2 { padding-left: 2rem; }

/* Padding Right */
.pr-05 { padding-right: 0.5rem; }
.pr-1 { padding-right: 1rem; }
.pr-1-5 { padding-right: 1.5rem; }
.pr-2 { padding-right: 2rem; }

/* Padding Vertical */
.py-05 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py-1 { padding-top: 1rem; padding-bottom: 1rem; }
.py-2 { padding-top: 2rem; padding-bottom: 2rem; }
.py-3 { padding-top: 3rem; padding-bottom: 3rem; }

/* Padding Horizontal */
.px-1 { padding-left: 1rem; padding-right: 1rem; }
.px-2 { padding-left: 2rem; padding-right: 2rem; }
.px-3 { padding-left: 3rem; padding-right: 3rem; }

/* Margin Auto (Centering) */
.mx-auto { margin-left: auto; margin-right: auto; }

/* ==========================================================================
   LAYOUT UTILITIES
   ========================================================================== */

/* Flexbox */
.flex { display: flex; }
.flex-center { display: flex; align-items: center; }
.flex-between { display: flex; justify-content: space-between; align-items: center; }
.flex-around { display: flex; justify-content: space-around; align-items: center; }
.flex-column { display: flex; flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }

/* Flex Gaps */
.flex-gap-05 { gap: 0.5rem; }
.flex-gap-1 { gap: 1rem; }
.flex-gap-1-5 { gap: 1.5rem; }
.flex-gap-2 { gap: 2rem; }

/* Grid */
.grid { display: grid; }
.grid-gap-05 { gap: 0.5rem; }
.grid-gap-1 { gap: 1rem; }
.grid-gap-1-5 { gap: 1.5rem; }
.grid-gap-2 { gap: 2rem; }

/* Display */
.d-block { display: block; }
.d-inline { display: inline; }
.d-inline-block { display: inline-block; }
.d-none { display: none; }

/* Position */
.pos-relative { position: relative; }
.pos-absolute { position: absolute; }
.pos-left-0 { left: 0; }
.pos-right-0 { right: 0; }
.pos-top-0 { top: 0; }
.pos-bottom-0 { bottom: 0; }

/* Overflow */
.overflow-hidden { overflow: hidden; }
.overflow-auto { overflow: auto; }

/* ==========================================================================
   TYPOGRAPHY UTILITIES
   ========================================================================== */

/* Font Sizes */
.font-xs { font-size: 0.75rem; }
.font-sm { font-size: 0.875rem; }
.font-95 { font-size: 0.95rem; }
.font-base { font-size: 1rem; }
.font-11 { font-size: 1.1rem; }
.font-125 { font-size: 1.25rem; }
.font-15 { font-size: 1.5rem; }
.font-2 { font-size: 2rem; }
.font-3 { font-size: 3rem; }
.font-4 { font-size: 4rem; }

/* Font Weights */
.font-weight-400 { font-weight: 400; }
.font-weight-500 { font-weight: 500; }
.font-weight-600 { font-weight: 600; }
.font-weight-bold { font-weight: 700; }
.font-weight-800 { font-weight: 800; }

/* Text Alignment */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }

/* Line Heights */
.line-height-1 { line-height: 1; }
.line-height-15 { line-height: 1.5; }
.line-height-17 { line-height: 1.7; }
.line-height-18 { line-height: 1.8; }
.line-height-2 { line-height: 2; }

/* ==========================================================================
   COLOR UTILITIES
   ========================================================================== */

/* Text Colors */
.color-primary { color: var(--color-primary, #667eea); }
.color-success { color: var(--color-success, #10b981); }
.color-warning { color: var(--color-warning, #f59e0b); }
.color-danger { color: var(--color-danger, #ef4444); }
.color-white { color: white; }

/* Gray Scale */
.color-gray-500 { color: var(--color-gray-500, #6b7280); }
.color-gray-600 { color: var(--color-gray-600, #4b5563); }
.color-gray-700 { color: var(--color-gray-700, #374151); }
.color-text-secondary { color: var(--color-text-secondary, #6b7280); }
.color-text-tertiary { color: var(--color-text-tertiary, #9ca3af); }

/* Background Colors */
.bg-primary { background-color: var(--color-primary, #667eea); }
.bg-primary-05 { background: rgba(102, 126, 234, 0.05); }
.bg-primary-10 { background: rgba(102, 126, 234, 0.1); }
.bg-white { background: white; }
.bg-transparent { background: transparent; }

/* ==========================================================================
   VISUAL UTILITIES
   ========================================================================== */

/* Border Radius */
.border-radius-8 { border-radius: 8px; }
.border-radius-12 { border-radius: 12px; }
.border-radius-16 { border-radius: 16px; }
.border-radius-full { border-radius: 50%; }

/* Borders */
.border { border: 1px solid var(--color-border-light, #e5e7eb); }
.border-top { border-top: 1px solid var(--color-border-light, #e5e7eb); }
.border-bottom { border-bottom: 1px solid var(--color-border-light, #e5e7eb); }
.border-left { border-left: 1px solid var(--color-border-light, #e5e7eb); }
.border-right { border-right: 1px solid var(--color-border-light, #e5e7eb); }
.border-left-primary { border-left: 4px solid var(--primary, #667eea); }
.border-none { border: none; }

/* Box Shadow */
.shadow-sm { box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); }
.shadow { box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); }
.shadow-md { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); }
.shadow-lg { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); }
.shadow-xl { box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); }

/* ==========================================================================
   WIDTH & HEIGHT UTILITIES
   ========================================================================== */

/* Width */
.w-full { width: 100%; }
.w-auto { width: auto; }
.w-50 { width: 50px; }
.w-100 { width: 100px; }

/* Max Width */
.max-w-700 { max-width: 700px; }
.max-w-800 { max-width: 800px; }
.max-w-900 { max-width: 900px; }
.max-w-1000 { max-width: 1000px; }
.max-w-1200 { max-width: 1200px; }

/* Height */
.h-full { height: 100%; }
.h-auto { height: auto; }
.h-50 { height: 50px; }
.h-100 { height: 100px; }

/* ==========================================================================
   LIST UTILITIES
   ========================================================================== */

.list-none { list-style: none; }
.list-disc { list-style: disc; }
.list-decimal { list-style: decimal; }

/* ==========================================================================
   COMPONENT UTILITIES (häufig genutzte Kombinationen)
   ========================================================================== */

/* Info Box */
.info-box {
  padding: 1.5rem;
  background: rgba(102, 126, 234, 0.05);
  border-radius: 12px;
  border-left: 4px solid var(--primary, #667eea);
}

/* Checkmark Item */
.checkmark-item {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--color-border-light, #e5e7eb);
  display: flex;
  align-items: center;
}

.checkmark-item:last-child {
  border-bottom: none;
}

/* Checkmark Icon */
.checkmark-icon {
  color: var(--color-success, #10b981);
  margin-right: 0.5rem;
  font-weight: bold;
  font-size: 1.25rem;
}

/* Badge Icon (große Emoji/Icons) */
.badge-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
  display: inline-block;
}

.badge-icon-xl {
  font-size: 4rem;
  margin-bottom: 1rem;
  display: inline-block;
}

/* Author Avatar (runde Avatare) */
.author-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.25rem;
  color: white;
  background: var(--color-primary, #667eea);
}

/* Section Padding */
.section-padding {
  padding: 4rem 2rem;
}

.section-padding-sm {
  padding: 2rem 1rem;
}

.section-padding-lg {
  padding: 6rem 2rem;
}

/* Container */
.container-narrow {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 2rem;
}

/* Card Base */
.card {
  background: white;
  border-radius: 16px;
  padding: 2rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.card:hover {
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
  transform: translateY(-4px);
}

/* ==========================================================================
   TRANSITION UTILITIES
   ========================================================================== */

.transition-all { transition: all 0.3s ease; }
.transition-fast { transition: all 0.15s ease; }
.transition-slow { transition: all 0.5s ease; }

/* ==========================================================================
   RESPONSIVE UTILITIES (Mobile-First)
   ========================================================================== */

/* Nur auf Mobile verstecken */
@media (max-width: 768px) {
  .hide-mobile { display: none; }
}

/* Nur auf Desktop verstecken */
@media (min-width: 769px) {
  .hide-desktop { display: none; }
}

/* Mobile-spezifische Utilities */
@media (max-width: 640px) {
  .mobile-text-center { text-align: center; }
  .mobile-flex-column { flex-direction: column; }
  .mobile-w-full { width: 100%; }
}

/* ==========================================================================
   PRINT UTILITIES
   ========================================================================== */

@media print {
  .no-print { display: none; }
}

/* ==========================================================================
   ACCESSIBILITY UTILITIES
   ========================================================================== */

/* Screen Reader Only */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* ==========================================================================
   END OF UTILITIES
   ========================================================================== */