/* ========================================
   AIDE Theme - Main Stylesheet
   Converted from Tailwind CSS / Next.js
   ======================================== */

/* --- Reset & Base --- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; font-size: 18px; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; background: #fff; color: #000; line-height: 1.6; }
a { text-decoration: none; color: inherit; }
ul, ol { list-style: none; }
img { max-width: 100%; height: auto; }
button, input, select, textarea { font-family: inherit; font-size: inherit; }

/* --- Color Variables --- */
:root {
  --blue-50: #EFF6FF; --blue-100: #DBEAFE; --blue-200: #BFDBFE; --blue-300: #93C5FD;
  --blue-400: #60A5FA; --blue-500: #3B82F6; --blue-600: #2563EB;
  --orange-50: #FFF7ED; --orange-100: #FFEDD5; --orange-200: #FED7AA; --orange-300: #FDBA74;
  --orange-500: #F97316; --orange-900: #7C2D12;
  --green-50: #F0FDF4; --green-200: #BBF7D0; --green-500: #22C55E;
  --gray-50: #F9FAFB; --gray-100: #F3F4F6; --gray-200: #E5E7EB; --gray-300: #D1D5DB;
  --gray-400: #9CA3AF; --gray-600: #4B5563; --gray-700: #374151; --gray-800: #1F2937;
  --gray-900: #111827;
  --purple-100: #F3E8FF; --purple-400: #C084FC; --purple-600: #9333EA;
  --red-50: #FEF2F2; --red-200: #FECACA; --red-800: #991B1B;
}

/* --- Layout Utilities --- */
.container { max-width: 1280px; margin: 0 auto; padding: 0 1rem; }
.container-sm { max-width: 672px; margin: 0 auto; padding: 0 1rem; }
.container-md { max-width: 896px; margin: 0 auto; padding: 0 1rem; }
.container-lg { max-width: 1152px; margin: 0 auto; padding: 0 1rem; }
.text-center { text-align: center; }

/* --- Typography --- */
h1 { font-size: 2.25rem; font-weight: 700; color: var(--gray-900); line-height: 1.2; }
h2 { font-size: 1.875rem; font-weight: 700; color: var(--gray-900); }
h3 { font-size: 1.25rem; font-weight: 700; color: var(--gray-900); }
h4 { font-size: 1.1rem; font-weight: 600; color: var(--gray-900); }
.text-xl { font-size: 1.25rem; }
.text-2xl { font-size: 1.5rem; }
.text-lg { font-size: 1.125rem; }
.text-sm { font-size: 0.875rem; }
.text-4xl { font-size: 2.25rem; }
.font-bold { font-weight: 700; }
.font-semibold { font-weight: 600; }

@media (min-width: 768px) {
  h1 { font-size: 3rem; }
  h2 { font-size: 2.25rem; }
}
@media (min-width: 1024px) {
  h1 { font-size: 3.75rem; }
}

/* --- Grid System --- */
.grid { display: grid; gap: 2rem; }
.grid-1 { grid-template-columns: 1fr; }
@media (min-width: 768px) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
}
.gap-3 { gap: 1.5rem; }

/* --- Flexbox Utilities --- */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-row { flex-direction: row; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: 0.5rem; }
.gap-4 { gap: 1rem; }
.gap-6 { gap: 1.5rem; }
.gap-8 { gap: 2rem; }
.flex-shrink-0 { flex-shrink: 0; }
.flex-grow { flex-grow: 1; }

/* ========================================
   HEADER
   ======================================== */
.site-header { background: #fff; border-bottom: 1px solid var(--gray-200); position: sticky; top: 0; z-index: 50; }
.site-header nav { max-width: 1280px; margin: 0 auto; padding: 1rem; display: flex; justify-content: space-between; align-items: center; }
.site-logo { display: flex; align-items: center; gap: 0.5rem; }
.site-logo .logo-box { width: 2.5rem; height: 2.5rem; background: var(--blue-500); border-radius: 0.5rem; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 1.125rem; }
.site-logo span.logo-text { font-weight: 700; font-size: 1.25rem; color: var(--gray-900); transition: color 0.2s; }
.site-logo:hover span.logo-text { color: var(--blue-500); }

.nav-desktop { display: none; align-items: center; gap: 2rem; }
.nav-desktop a { color: var(--gray-600); font-weight: 500; font-size: 0.875rem; transition: color 0.2s; }
.nav-desktop a:hover, .nav-desktop a.current { color: var(--blue-500); }

.nav-cta-desktop { display: none; }
.btn-cta { display: inline-block; padding: 0.5rem 1.5rem; background: var(--blue-500); color: #fff; border-radius: 0.5rem; font-weight: 500; font-size: 0.875rem; transition: background 0.2s; border: none; cursor: pointer; }
.btn-cta:hover { background: var(--blue-600); color: #fff; }

.mobile-menu-btn { display: flex; flex-direction: column; gap: 0.25rem; padding: 0.5rem; background: none; border: none; cursor: pointer; }
.mobile-menu-btn span { display: block; width: 1.5rem; height: 2px; background: var(--gray-900); transition: all 0.3s; }

.mobile-menu { display: none; border-top: 1px solid var(--gray-200); background: var(--gray-50); padding: 0.75rem 1rem; }
.mobile-menu.active { display: block; }
.mobile-menu a { display: block; padding: 0.5rem 0.75rem; color: var(--gray-600); font-weight: 500; font-size: 0.875rem; border-radius: 0.5rem; transition: all 0.2s; }
.mobile-menu a:hover { color: var(--blue-500); background: var(--blue-50); }
.mobile-menu .btn-cta { display: block; text-align: center; margin-top: 1rem; }

@media (min-width: 768px) {
  .nav-desktop { display: flex; }
  .nav-cta-desktop { display: flex; }
  .mobile-menu-btn { display: none; }
  .site-header nav { padding: 1rem 1.5rem; }
}
@media (min-width: 1024px) {
  .site-header nav { padding: 1rem 2rem; }
}

/* ========================================
   FOOTER
   ======================================== */
.site-footer { background: var(--gray-900); color: var(--gray-100); }
.footer-inner { max-width: 1280px; margin: 0 auto; padding: 3rem 1rem; }
.footer-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; margin-bottom: 2rem; }
@media (min-width: 768px) { .footer-grid { grid-template-columns: repeat(4, 1fr); } }
.footer-grid h3 { font-weight: 600; margin-bottom: 1rem; color: #fff; font-size: 1rem; }
.footer-grid ul { display: flex; flex-direction: column; gap: 0.5rem; }
.footer-grid a { color: var(--gray-400); font-size: 0.875rem; transition: color 0.2s; }
.footer-grid a:hover { color: #fff; }
.footer-tagline { color: var(--gray-400); font-size: 0.875rem; }
.footer-bottom { border-top: 1px solid var(--gray-800); padding-top: 2rem; display: flex; flex-direction: column; align-items: center; gap: 1rem; font-size: 0.875rem; color: var(--gray-400); }
@media (min-width: 768px) { .footer-bottom { flex-direction: row; justify-content: space-between; } }
.footer-social { display: flex; gap: 1.5rem; }
.footer-social a:hover { color: #fff; }

/* ========================================
   SECTIONS
   ======================================== */
.section { padding: 4rem 1rem; }
@media (min-width: 768px) { .section { padding: 6rem 1rem; } }
.section-white { background: #fff; }
.section-gray { background: var(--gray-50); }
.section-blue-light { background: var(--blue-50); }
.section-blue { background: var(--blue-500); color: #fff; }
.section-blue p { color: var(--blue-100); }
.section-blue h2 { color: #fff; }

/* Hero Sections */
.hero { background: linear-gradient(to bottom, var(--blue-50), #fff); padding: 4rem 1rem; }
@media (min-width: 768px) { .hero { padding: 6rem 1rem; } }
.hero h1 { margin-bottom: 1.5rem; line-height: 1.2; }
.hero p { font-size: 1.25rem; color: var(--gray-600); margin-bottom: 2rem; line-height: 1.6; }
@media (min-width: 768px) { .hero p { font-size: 1.5rem; } }

.section h2 { margin-bottom: 3rem; }

/* ========================================
   BUTTONS
   ======================================== */
.btn { display: inline-block; padding: 1rem 2rem; border-radius: 0.5rem; font-weight: 600; font-size: 1.125rem; transition: all 0.2s; text-align: center; cursor: pointer; border: none; }
.btn-primary { background: var(--blue-500); color: #fff; }
.btn-primary:hover { background: var(--blue-600); color: #fff; }
.btn-secondary { background: var(--gray-200); color: var(--gray-900); }
.btn-secondary:hover { background: var(--gray-300); }
.btn-white { background: #fff; color: var(--blue-500); }
.btn-white:hover { background: var(--gray-100); color: var(--blue-500); }
.btn-outline-white { background: transparent; color: #fff; border: 2px solid #fff; }
.btn-outline-white:hover { background: var(--blue-600); }
.btn-orange { background: var(--orange-200); color: var(--gray-900); }
.btn-orange:hover { background: var(--orange-300); }
.btn-block { display: block; width: 100%; }

.btn-group { display: flex; flex-direction: column; gap: 1rem; justify-content: center; }
@media (min-width: 640px) { .btn-group { flex-direction: row; } }

/* ========================================
   CARDS
   ======================================== */
.card { border-radius: 0.75rem; padding: 2rem; border: 1px solid var(--gray-200); transition: border-color 0.2s; }
.card:hover { border-color: var(--blue-300); }
.card-blue { background: var(--blue-50); border-color: var(--blue-200); }
.card-orange { background: var(--orange-50); border-color: var(--orange-200); }
.card-green { background: var(--green-50); border-color: var(--green-200); }
.card-white { background: #fff; }

.card-icon { width: 3rem; height: 3rem; border-radius: 0.5rem; display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; font-size: 1.5rem; }
.card-icon-blue { background: var(--blue-500); }
.card-icon-orange { background: var(--orange-500); }
.card-icon-green { background: var(--green-500); }
.card-icon-blue-light { background: var(--blue-100); }

.card h3 { margin-bottom: 0.75rem; }
.card p { color: var(--gray-700); font-size: 1.125rem; line-height: 1.6; }

/* ========================================
   PRICING CARDS
   ======================================== */
.pricing-card { border: 2px solid var(--gray-200); border-radius: 0.75rem; padding: 2rem; transition: border-color 0.2s; position: relative; }
.pricing-card h3 { font-size: 1.5rem; margin-bottom: 0.5rem; }
.pricing-card .price { font-size: 2.25rem; font-weight: 700; color: var(--gray-900); }
.pricing-card .price-period { color: var(--gray-600); font-size: 1rem; }
.pricing-card .price-box { margin-bottom: 1.5rem; }
.pricing-card .price-highlight { padding: 1rem; border-radius: 0.5rem; margin-bottom: 2rem; }
.pricing-card .subtitle { color: var(--gray-600); font-size: 0.875rem; margin-bottom: 1.5rem; }

.pricing-card-featured { border-color: var(--blue-500); box-shadow: 0 0 0 2px var(--blue-100); }
.pricing-card-featured .badge { position: absolute; top: -1rem; left: 50%; transform: translateX(-50%); background: linear-gradient(to right, var(--blue-500), var(--purple-600)); color: #fff; padding: 0.25rem 1.5rem; border-radius: 9999px; font-size: 0.875rem; font-weight: 700; white-space: nowrap; }

.pricing-premium-home { background: var(--blue-500); border-color: var(--blue-500); color: #fff; }
.pricing-premium-home h3, .pricing-premium-home .price { color: #fff; }
.pricing-premium-home .subtitle, .pricing-premium-home .price-period { color: var(--blue-100); }
.pricing-premium-home .badge { background: var(--orange-500); position: absolute; top: -1rem; left: 50%; transform: translateX(-50%); color: #fff; padding: 0.25rem 1.5rem; border-radius: 9999px; font-size: 0.875rem; font-weight: 700; white-space: nowrap; }

/* Feature list in pricing */
.feature-list { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 2rem; }
.feature-list li { display: flex; align-items: center; gap: 0.5rem; color: var(--gray-700); }
.feature-list .check-blue { color: var(--blue-500); font-weight: 700; }
.feature-list .check-orange { color: var(--orange-500); font-weight: 700; }
.feature-list .check-disabled { color: var(--gray-300); }
.feature-list .text-disabled { color: var(--gray-400); }

/* ========================================
   COMPARISON TABLE
   ======================================== */
.comparison-table { width: 100%; background: #fff; border-radius: 0.5rem; overflow: hidden; border-collapse: collapse; }
.comparison-table thead tr { background: var(--gray-100); }
.comparison-table th, .comparison-table td { padding: 1rem 1.5rem; border-bottom: 1px solid var(--gray-200); }
.comparison-table th { font-weight: 700; color: var(--gray-900); }
.comparison-table td:first-child { text-align: left; font-weight: 600; color: var(--gray-900); }
.comparison-table td { text-align: center; }
.comparison-table tr:nth-child(even) { background: var(--gray-50); }
.table-check { color: var(--blue-500); font-weight: 700; }
.table-cross { color: var(--gray-400); }
.overflow-x { overflow-x: auto; }

/* ========================================
   FAQ ACCORDION
   ======================================== */
.faq-item { border: 1px solid var(--gray-200); border-radius: 0.5rem; overflow: hidden; margin-bottom: 1rem; transition: border-color 0.2s; }
.faq-item:hover { border-color: var(--blue-300); }
.faq-item summary { padding: 1rem 1.5rem; background: var(--gray-50); font-weight: 600; color: var(--gray-900); cursor: pointer; font-size: 1.125rem; display: flex; justify-content: space-between; align-items: center; transition: background 0.2s; list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '\25BC'; color: var(--blue-500); transition: transform 0.3s; flex-shrink: 0; margin-left: 1rem; }
.faq-item[open] summary::after { transform: rotate(180deg); }
.faq-item summary:hover { background: var(--blue-50); }
.faq-item .faq-answer { padding: 1rem 1.5rem; border-top: 1px solid var(--gray-200); color: var(--gray-700); font-size: 1.125rem; line-height: 1.6; }

.faq-category { margin-bottom: 4rem; }
.faq-category h2 { padding-bottom: 1rem; border-bottom: 2px solid var(--blue-500); margin-bottom: 2rem; }

/* ========================================
   FORMS
   ======================================== */
.form-group { margin-bottom: 1.5rem; }
.form-group label { display: block; font-size: 1.125rem; font-weight: 600; color: var(--gray-900); margin-bottom: 0.5rem; }
.form-control { width: 100%; padding: 0.75rem 1rem; border: 1px solid var(--gray-300); border-radius: 0.5rem; font-size: 1.125rem; transition: all 0.2s; }
.form-control:focus { outline: none; border-color: transparent; box-shadow: 0 0 0 2px var(--blue-500); }
textarea.form-control { resize: none; }
.form-card { background: #fff; border-radius: 0.5rem; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1); padding: 2rem; border: 1px solid var(--gray-200); }
.form-note { font-size: 0.875rem; color: var(--gray-600); text-align: center; margin-top: 1rem; }

/* Status messages */
.alert { padding: 1.5rem; border-radius: 0.5rem; margin-bottom: 2rem; font-weight: 600; font-size: 1.125rem; }
.alert-success { background: var(--green-50); border: 1px solid var(--green-200); color: #166534; }
.alert-error { background: var(--red-50); border: 1px solid var(--red-200); color: var(--red-800); }

/* ========================================
   STEP INDICATORS
   ======================================== */
.step-number { width: 3rem; height: 3rem; border-radius: 0.5rem; background: var(--blue-500); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.125rem; flex-shrink: 0; }
.step-number-lg { width: 5rem; height: 5rem; border-radius: 50%; background: linear-gradient(135deg, var(--blue-500), var(--blue-600)); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 2.25rem; flex-shrink: 0; }
.step-line { width: 4px; height: 8rem; background: var(--blue-200); margin: 1rem auto; }
.step-content h2 { font-size: 2.25rem; margin-bottom: 0.5rem; }
.step-content .subtitle { color: var(--blue-500); font-weight: 600; font-size: 1.25rem; margin-bottom: 1rem; }
.step-content p { font-size: 1.25rem; color: var(--gray-700); line-height: 1.6; margin-bottom: 1.5rem; }
.step-details { background: var(--gray-50); border-radius: 0.5rem; padding: 1.5rem; border: 1px solid var(--gray-200); }
.step-details h4 { margin-bottom: 0.75rem; }
.step-details li { display: flex; gap: 0.75rem; color: var(--gray-700); margin-bottom: 0.5rem; }
.step-placeholder { background: linear-gradient(135deg, var(--blue-100), var(--purple-100)); border-radius: 0.5rem; height: 16rem; display: flex; align-items: center; justify-content: center; border: 2px dashed var(--gray-300); margin-top: 2rem; }
.step-placeholder .emoji { font-size: 3.75rem; margin-bottom: 1rem; }
.step-placeholder p { color: var(--gray-600); }

/* ========================================
   CONTACT INFO CARDS
   ======================================== */
.contact-card { background: var(--blue-50); border-radius: 0.5rem; padding: 2rem; border: 1px solid var(--blue-200); text-align: center; }
.contact-card .icon { font-size: 2.25rem; margin-bottom: 1rem; }
.contact-card h3 { margin-bottom: 0.75rem; }
.contact-card a { color: var(--blue-500); font-weight: 600; font-size: 1.125rem; }
.contact-card a:hover { color: var(--blue-600); }
.contact-card .note { color: var(--gray-600); margin-top: 0.5rem; font-size: 1rem; }

/* ========================================
   TEAM MEMBERS
   ======================================== */
.team-member { text-align: center; }
.team-avatar { width: 8rem; height: 8rem; border-radius: 50%; background: linear-gradient(135deg, var(--blue-400), var(--purple-400)); margin: 0 auto 1rem; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 2.25rem; }
.team-member h3 { margin-bottom: 0.25rem; }
.team-member .role { color: var(--blue-500); font-weight: 600; margin-bottom: 0.75rem; }
.team-member p { color: var(--gray-700); }

/* ========================================
   IMPACT STATS
   ======================================== */
.stat-card { background: #fff; border-radius: 0.5rem; padding: 2rem; text-align: center; border: 1px solid var(--blue-200); }
.stat-card .number { font-size: 2.25rem; font-weight: 700; color: var(--blue-500); margin-bottom: 0.5rem; }
.stat-card .label { font-size: 1.125rem; font-weight: 600; color: var(--gray-900); }
.stat-card .note { color: var(--gray-600); margin-top: 0.5rem; }

/* ========================================
   PROSE (Legal pages)
   ======================================== */
.prose { max-width: 896px; margin: 0 auto; }
.prose h1 { margin-bottom: 2rem; }
.prose h2 { margin-top: 3rem; margin-bottom: 1.5rem; }
.prose h3 { font-size: 1.25rem; margin-bottom: 0.75rem; }
.prose p { color: var(--gray-700); margin-bottom: 1.5rem; line-height: 1.6; font-size: 1rem; }
.prose ul { margin-bottom: 1.5rem; }
.prose ul li { display: flex; gap: 0.5rem; color: var(--gray-700); margin-bottom: 0.5rem; padding-left: 1.5rem; position: relative; }
.prose ul li::before { content: '\2022'; position: absolute; left: 0; color: var(--gray-400); }
.prose a { color: var(--blue-500); }
.prose a:hover { color: var(--blue-600); }
.prose strong { color: var(--gray-900); }
.prose .last-update { font-size: 0.875rem; color: var(--gray-600); margin-top: 3rem; }

/* Check list used in privacy/features */
.check-list { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 1.5rem; }
.check-list li { display: flex; gap: 0.75rem; color: var(--gray-700); font-size: 1.125rem; }
.check-list .icon { font-weight: 700; flex-shrink: 0; }
.check-list .icon-green { color: var(--green-500); }
.check-list .icon-blue { color: var(--blue-500); }

/* ========================================
   LINK ARROW
   ======================================== */
.link-arrow { color: var(--blue-500); font-weight: 600; font-size: 1.125rem; }
.link-arrow:hover { color: var(--blue-600); }

/* ========================================
   EXAMPLE TASKS
   ======================================== */
.task-card { background: #fff; border-radius: 0.5rem; padding: 2rem; border: 1px solid var(--gray-200); }
.task-card h3 { margin-bottom: 1rem; }
.task-card ol { display: flex; flex-direction: column; gap: 0.75rem; }
.task-card ol li { display: flex; gap: 0.75rem; }
.task-card ol .num { color: var(--blue-500); font-weight: 700; flex-shrink: 0; }
.task-card ol span { color: var(--gray-700); }

/* ========================================
   TIP CARDS
   ======================================== */
.tip-card { background: var(--blue-50); border-radius: 0.5rem; padding: 1.5rem; border: 1px solid var(--blue-200); }
.tip-card h3 { font-size: 1.125rem; margin-bottom: 0.5rem; }
.tip-card p { color: var(--gray-700); }

/* Info Box */
.info-box { border-radius: 0.5rem; padding: 2rem; }
.info-box-blue { background: var(--blue-50); border: 1px solid var(--blue-200); }
.info-box-green { background: var(--green-50); border: 1px solid var(--green-200); }

/* ========================================
   WORDPRESS OVERRIDES
   ======================================== */

/* Entferne leere <p> und <br> die wpautop innerhalb von Grids erzeugt */
.grid > p:empty,
.grid > br {
    display: none;
}
/* Falls p-Tags um Shortcode-Output gewrappt werden, Grid durchreichen */
.grid > p {
    display: contents;
}

/* Pricing-Cards im Grid: overflow sichtbar für Badge */
.grid > .pricing-card,
.grid > p > .pricing-card {
    overflow: visible;
}

.wp-block-image { margin: 1.5rem 0; }
.aligncenter { text-align: center; }
.alignleft { float: left; margin-right: 1.5rem; }
.alignright { float: right; margin-left: 1.5rem; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

/* Disabled button state */
.btn:disabled, .btn.disabled { background: var(--gray-400); cursor: not-allowed; }