/* BFPDF WordPress - Unified with App Design */
/* Version 1.1.0 - Inkl. Preise-Seite Fixes */

:root {
  --primary: #3b82f6;
  --primary-dark: #2563eb;
  --primary-light: #60a5fa;
  --secondary: #8b5cf6;
  --accent: #06b6d4;
  --glass-bg: rgba(255, 255, 255, 0.7);
  --glass-border: rgba(255, 255, 255, 0.3);
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  --gradient-blue: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background: linear-gradient(135deg, #f0f4ff 0%, #faf5ff 50%, #f0fdff 100%);
}

/* Reduced header padding */
body.bfpdf-custom-header {
  padding-top: 0 !important;
}

/* Header styling */
.bfpdf-header, .nav-glass {
  background: rgba(255, 255, 255, 0.9) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  position: sticky;
  top: 0;
  z-index: 9999;
}

/* Glass components */
.glass, .glass-premium {
  background: var(--glass-bg) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
}

/* Buttons */
.btn-primary, .bfpdf-cta {
  background: var(--gradient-blue) !important;
  color: white !important;
  padding: 12px 24px;
  border-radius: 12px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4);
}

/* Tables responsive */
table {
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Page wrapper */
.bfpdf-page-wrapper h1 {
  word-wrap: break-word;
  font-size: clamp(1.75rem, 5vw, 2.5rem);
}

@media (max-width: 480px) {
  .bfpdf-page-wrapper h1 {
    font-size: 1.5rem;
    line-height: 1.3;
  }
}

/* ============================================
   PREISE-SEITE: Feature-Vergleichstabelle
   ============================================ */

/* Wrapper für horizontales Scrollen */
.bfpdf-feature-table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 -16px;
  padding: 0 16px;
}

/* Mobile Feature Cards (versteckt auf Desktop) */
.bfpdf-feature-mobile {
  display: none;
}

.bfpdf-feature-card {
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.bfpdf-feature-card.featured {
  border: 2px solid #0066CC;
  background: linear-gradient(180deg, #f0f7ff 0%, #fff 100%);
}

.bfpdf-feature-card h4 {
  font-size: 1.25rem;
  font-weight: 700;
  color: #1A2B49;
  margin: 0 0 16px;
  padding-bottom: 12px;
  border-bottom: 2px solid #0066CC;
}

.bfpdf-feature-card.featured h4 {
  color: #0066CC;
}

.bfpdf-feature-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #eee;
}

.bfpdf-feature-row:last-child {
  border-bottom: none;
}

.bfpdf-feature-name {
  color: #555;
  font-size: 0.95rem;
}

.bfpdf-feature-value {
  font-weight: 600;
  color: #1A2B49;
}

/* ============================================
   PREISE-SEITE: Pricing Cards
   ============================================ */

.pricing-card {
  position: relative;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

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

/* ============================================
   MOBILE BREAKPOINTS (max-width: 768px)
   ============================================ */
@media (max-width: 768px) {
  /* Feature-Tabelle verstecken, Cards zeigen */
  .bfpdf-feature-table-wrapper table {
    display: none !important;
  }
  
  .bfpdf-feature-mobile {
    display: block !important;
  }
  
  /* Pricing Cards: Kein Transform, mehr Abstand */
  .pricing-card {
    margin-bottom: 20px !important;
    transform: none !important;
  }
  
  .pricing-card.featured {
    transform: none !important;
    order: -1;
  }
  
  /* Seiten-Padding reduzieren */
  div[style*="padding: 80px"] {
    padding: 50px 16px !important;
  }
  
  /* Überschriften kleiner */
  h2[style*="font-size: 2.2rem"],
  div[style*="font-size: 2.2rem"] {
    font-size: 1.6rem !important;
  }
  
  /* Allgemeine Tabellen scrollbar */
  .elementor-widget-container table,
  .entry-content table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
  
  /* Feature-Vergleich Tabelle kleiner (Fallback) */
  div[style*="max-width: 1000px"] > div > table {
    font-size: 0.8rem;
  }
  
  div[style*="max-width: 1000px"] > div > table th,
  div[style*="max-width: 1000px"] > div > table td {
    padding: 8px 6px !important;
    white-space: nowrap;
  }
  
  /* FAQ Boxes auf Mobile */
  div[style*="max-width: 800px"] > div[style*="background: white"] {
    border-radius: 8px !important;
  }
  
  div[style*="max-width: 800px"] > div[style*="background: white"] > div {
    padding: 14px 16px !important;
  }
}

/* ============================================
   TABLET BREAKPOINT (769px - 1023px)
   ============================================ */
@media (min-width: 769px) and (max-width: 1023px) {
  .pricing-card.featured {
    transform: scale(1.02);
  }
  
  /* Tabelle etwas kleiner */
  div[style*="max-width: 1000px"] > div > table {
    font-size: 0.9rem;
  }
}

/* ============================================
   ACCESSIBILITY
   ============================================ */
.pricing-card:focus-within,
a:focus {
  outline: 2px solid #0066CC;
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .pricing-card,
  .wp-block-column {
    animation: none !important;
    transition: none !important;
  }
}

@media (prefers-contrast: high) {
  .pricing-card {
    border: 2px solid #000;
  }
  
  .pricing-card.featured {
    border: 3px solid #0066CC;
  }
}

/* ============================================
   MOBILE FIXES - Global (v1.2.0)
   ============================================ */

/* Bento-Grid auf Mobile stacken */
@media (max-width: 768px) {
  [style*="grid-column: span"] {
    grid-column: span 12 !important;
    grid-column: 1 / -1 !important;
  }
  
  .elementor-container {
    flex-wrap: wrap !important;
  }
  
  .elementor-column {
    width: 100% !important;
  }
}

/* Tabellen auf Mobile */
@media (max-width: 768px) {
  table {
    font-size: 14px;
  }
  
  th, td {
    padding: 8px !important;
    white-space: normal !important;
  }
}

/* Touch-Targets */
button, a, input, select, textarea {
  min-height: 44px;
}

/* Pricing Cards keine Überlappung */
@media (max-width: 900px) {
  [style*="scale(1.05)"] {
    transform: none !important;
  }
}

/* Footer auf Mobile */
@media (max-width: 640px) {
  #bfpdf-footer {
    padding: 40px 16px 24px;
  }
}