/* Root variables for colours and spacing */
:root {
  /* Colour palette tuned for a modern, trustworthy appearance.  
     A slightly lighter background and panels improve readability on dark screens.  
     The primary red is softened for a more mature feel. */
  /* A slightly brighter palette to convey seriousness without feeling gloomy.
     The background is a deep charcoal instead of near‑black, panels are
     subtly lighter, and the reds are warmed for a more human touch. */
  /* Apple‑inspired light colour palette.  A soft off‑white background pairs with
     clean panels and a bright accent colour.  Dark text contrasts sharply for
     readability, while muted grey tones are used for secondary text. */
  --color-bg: #f9f9fb;
  --color-panel: #ffffff;
  --color-primary: #007aff;
  --color-primary-light: #5ac8fa;
  --color-text: #1d1d1f;
  --color-muted: #6e6e73;
  --max-width: 1200px;
}

body {
  margin: 0;
  /* Use Inter for a clean, neutral look.  
     If Inter is not available locally, the system will fall back to a sans-serif font. */
  font-family: 'Inter', sans-serif;
  color: var(--color-text);
  background-color: var(--color-bg);
  line-height: 1.6;

  /* Prevent horizontal scrolling on mobile caused by overflowing elements */
  overflow-x: hidden;
}

a {
  color: var(--color-text);
  text-decoration: none;
}
a:hover {
  color: var(--color-primary);
}

.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 16px;
}

/* Header */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  /* Light header on white background with subtle bottom border. */
  background-color: var(--color-panel);
  z-index: 100;
  border-bottom: 1px solid #e5e5ea;
}
.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 64px;
}
.logo {
  /* Increase logo size for stronger branding */
  font-size: 1.8rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
/* The logo displays ai·edu. Only the separator uses the primary colour. */
/* Removed former .logo-highlight styling. */
/* Separator (middle dot) between ai and edu */
.logo .logo-sep {
  margin: 0 0.1rem;
  color: var(--color-primary);
}
.nav a {
  margin-left: 24px;
  font-size: 0.95rem;
  font-weight: 500;
}

/* Hero */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 80vh;
  padding-top: 64px;
  /* Updated hero section for an Apple‑inspired look.  We replace the dark
     educational background with a light, airy abstract image.  The new
     image (hero‑apple.png) is a generated graphic with soft gradients and
     subtle geometric elements.  Using a relative path ensures it works both
     locally and on Netlify. */
  /* Use our new abstract hero background for a modern, techy look */
  /* Ersetze die generative Hero‑Grafik durch einen sanften Farbverlauf */
  background: linear-gradient(135deg, #F5F8FF 0%, #E1F2FF 100%);
  background-size: cover;
  background-position: center;

  /* Hide overflow from animated gradients on mobile to avoid horizontal scroll bars */
  overflow: hidden;
}

/* Add a subtle moving gradient overlay on top of the hero section.
   This creates a slow, almost imperceptible movement that makes the
   background feel alive without distracting the viewer. */
.hero::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 200%;
  height: 200%;
  /* Soft blue radial highlights to add a hint of colour without overwhelming the light theme. */
  background: radial-gradient(circle at 30% 30%, rgba(0, 122, 255, 0.15) 0%, transparent 60%),
              radial-gradient(circle at 70% 70%, rgba(90, 200, 250, 0.12) 0%, transparent 60%);
  animation: heroMove 40s linear infinite;
  z-index: 0;
  pointer-events: none;
}

@keyframes heroMove {
  from { transform: translate(0, 0); }
  to { transform: translate(-50%, -50%); }
}

/* Overlay to improve contrast over the hero background */
.hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* Light gradient overlay to soften the background instead of darkening it. */
  background: linear-gradient(180deg, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0.6) 100%);
  z-index: 0;
}

.hero-content {
  position: relative;
  z-index: 1;
}
.hero-content h1 {
  font-size: 2.8rem;
  line-height: 1.2;
  margin-bottom: 16px;
}
.hero-content p {
  font-size: 1.2rem;
  margin-bottom: 32px;
  color: var(--color-muted);
}
.hero-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
}
.btn {
  padding: 12px 24px;
  border-radius: 6px;
  font-weight: 500;
  display: inline-block;
  transition: background-color 0.2s ease;
  cursor: pointer;
  text-align: center;
}
.btn-primary {
  background: var(--color-primary);
  color: #fff;
}
.btn-primary:hover {
  background: var(--color-primary-light);
}
.btn-secondary {
  border: 1px solid var(--color-primary);
  background-color: transparent;
  color: var(--color-primary);
}
.btn-secondary:hover {
  background-color: var(--color-primary-light);
  color: #ffffff;
}

/* Offers */
.offers-section {
  padding: 80px 0;
}
.offers-section h2 {
  text-align: center;
  margin-bottom: 32px;
  font-size: 2rem;
}
.offers {
  /* Use a CSS grid so all offer cards align uniformly and stretch to equal height */
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
  justify-content: center;
  align-items: stretch;
}
.offer-card {
  /* Light card styling: white panel with subtle shadow and rounded corners. */
  backdrop-filter: none;
  background: var(--color-panel);
  border: 1px solid #e5e5ea;
  border-radius: 12px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  padding: 24px;
  flex: 1 1 280px;
  max-width: 340px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.2s ease;
}

/* Mikro‑Animationen für Karten: leichtes Anheben und Schatten beim Hover */
.offer-card:hover,
.feature-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.offer-card:hover {
  transform: translateY(-4px);
}
.offer-card h3 {
  margin-top: 0;
  font-size: 1.4rem;
  margin-bottom: 8px;
}
.offer-card .price {
  font-size: 1.2rem;
  color: var(--color-primary);
  margin-bottom: 8px;
}
.offer-card ul {
  list-style: none;
  padding-left: 0;
  margin-bottom: 16px;
}
.offer-card li {
  margin-bottom: 8px;
  position: relative;
  padding-left: 24px;
}
.offer-card li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 7px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-primary);
}

/* Package icons inside offer cards */
.package-icon {
  width: 48px;
  height: 48px;
  margin-bottom: 16px;
  flex-shrink: 0;
}

/* Highlight the KI‑Check card with a soft accent background and bolder border */
.offer-card.ki-check {
  background-color: #eaf5ff;
  border: 2px solid var(--color-primary-light);
}
.offer-card.ki-check h3,
.offer-card.ki-check .price {
  color: var(--color-primary);
}
.offer-card.ki-check a.btn {
  margin-top: auto;
}

/* Facts */
.facts-section {
  padding: 60px 0;
}
.facts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}
.fact {
  flex: 1 1 200px;
  max-width: 280px;
  background-color: var(--color-panel);
  padding: 24px;
  border-radius: 8px;
  text-align: center;
}
.fact h3 {
  margin: 0 0 8px;
  font-size: 2.4rem;
  color: var(--color-primary);
}
.fact p {
  margin: 0;
  font-size: 1rem;
  color: var(--color-muted);
}

/* Features */
.features-section {
  padding: 80px 0;
}
.features-section h2 {
  text-align: center;
  margin-bottom: 40px;
  font-size: 2rem;
}
.features {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: center;
}
.feature-card {
  flex: 1 1 300px;
  max-width: 380px;
  /* Light card styling for feature cards to match the overall aesthetic. */
  background-color: var(--color-panel);
  border: 1px solid #e5e5ea;
  border-radius: 12px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  padding: 20px;
  display: flex;
  gap: 16px;
  align-items: flex-start;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
.feature-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
}
.feature-icon {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 4px;
  object-fit: contain;
  /* Icons are provided in brand colour.  No colour filter is needed. */
}
.feature-text h3 {
  margin: 0 0 4px;
  font-size: 1.2rem;
}
.feature-text p {
  margin: 0;
  font-size: 0.92rem;
  color: var(--color-muted);
}

/* FAQ */
.faq-section {
  padding: 80px 0;
}
.faq-section h2 {
  text-align: center;
  margin-bottom: 32px;
  font-size: 2rem;
}
.faq-item {
  max-width: 800px;
  margin: 0 auto 24px;
  background-color: var(--color-panel);
  padding: 20px;
  border-radius: 8px;
}
.faq-item h3 {
  margin: 0 0 8px;
  font-size: 1.2rem;
}
.faq-item p {
  margin: 0;
  color: var(--color-muted);
  font-size: 0.95rem;
}

/* Contact */
.contact-section {
  padding: 80px 0;
  background-color: var(--color-panel);
}
.contact-section h2 {
  text-align: center;
  margin-bottom: 16px;
  font-size: 2rem;
}
.contact-section p {
  text-align: center;
  margin-bottom: 32px;
  color: var(--color-muted);
}
.form-row {
  display: flex;
  gap: 16px;
  /* Add vertical spacing between form rows to ensure inputs aren’t crowded. */
  /* Increased bottom margin to provide more breathing room between form rows. */
  margin-bottom: 32px;
}
.form-col {
  flex: 1;
}
.contact-section input,
  .contact-section select,
  .contact-section textarea {
  width: 100%;
  padding: 12px;
  margin-bottom: 16px;
  border-radius: 6px;
  /* Light input styling with subtle border and white background */
  border: 1px solid #d1d1d6;
  background-color: var(--color-panel);
  color: var(--color-text);
  resize: vertical;
}
.contact-section button {
  display: inline-block;
  padding: 12px 24px;
  border: none;
  border-radius: 6px;
  background-color: var(--color-primary);
  color: #fff;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.contact-section button:hover {
  background-color: var(--color-primary-light);
}
.newsletter-form {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: center;
}
.newsletter-form input {
  flex: 1;
  max-width: 300px;
}
.form-response {
  margin-top: 8px;
  font-size: 0.9rem;
  color: var(--color-primary);
}

/* Footer */
.site-footer {
  background-color: var(--color-bg);
  /* Subtle top border for footer */
  border-top: 1px solid #e5e5ea;
  padding: 24px 0;
  text-align: center;
  font-size: 0.85rem;
  color: var(--color-muted);
}

/* Cookie banner styles */
.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: var(--color-panel);
  border-top: 1px solid #e5e5ea;
  box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.05);
  padding: 16px;
  text-align: center;
  font-size: 0.85rem;
  z-index: 200;
}
.cookie-banner p {
  margin: 0 0 8px;
  color: var(--color-text);
}
.cookie-banner button {
  margin: 0 8px;
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  background-color: var(--color-primary);
  color: #fff;
  font-size: 0.85rem;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.cookie-banner button:hover {
  background-color: var(--color-primary-light);
}

/*
 * Global enhancements
 *
 * - Smooth scrolling for internal links
 * - Utility classes for fade‑in animations
 * - Accordion styles for the FAQ section
 */
html {
  scroll-behavior: smooth;
}

/* Animation utility classes */
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* FAQ accordion styles */
.faq-item h3 {
  cursor: pointer;
  position: relative;
  padding-right: 24px;
  user-select: none;
}
.faq-item h3::after {
  content: '+';
  position: absolute;
  right: 0;
  top: 0;
  font-weight: 700;
  transition: transform 0.3s ease;
}
.faq-item.active h3::after {
  transform: rotate(45deg);
}
.faq-item p {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
  margin: 0;
}
.faq-item.active p {
  max-height: 600px; /* large enough to fit the answer */
  margin-top: 8px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .feature-card {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .feature-icon {
    margin-bottom: 8px;
    /* No additional colour filter needed; icons are already tinted. */
  }
  .form-row {
    flex-direction: column;
  }
  .nav a {
    margin-left: 16px;
    font-size: 0.9rem;
  }
  .hero-content h1 {
    font-size: 2.2rem;
  }
  .hero-content p {
    font-size: 1rem;
  }

  /* On small screens, ensure the content container stretches across the viewport with minimal side padding.
     This prevents the entire site from appearing left‑aligned with excessive whitespace on the right. */
  .container {
    max-width: 100%;
    padding: 0 12px;
  }
}

/* Visual section styles: engaging illustrations for the homepage */
.visual-section {
  padding: 60px 0;
}
.visual-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: center;
  align-items: center;
}
.visual-image {
  width: 100%;
  max-width: 480px;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.visual-image:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

/* Animated background replaces static visuals with a subtle moving gradient.
   The container has a fixed height and rounded corners, and the gradient
   slowly shifts hues to evoke innovation and flow. */
.animated-background {
  position: relative;
  width: 100%;
  height: 320px;
  border-radius: 16px;
  overflow: hidden;
  /* Base gradient colours: soft blues and turquoise tones */
  background: linear-gradient(-45deg, #EAF6FF 0%, #DDF3FF 33%, #D3EFFF 66%, #EAF6FF 100%);
  background-size: 400% 400%;
  animation: gradientAnimation 20s ease infinite;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.07);
}

/* --- Patch: Form field width & spacing --- */
.contact-section input,
.contact-section select,
.contact-section textarea {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
}
.form-row { display:flex; gap:20px; margin-bottom:24px; }
.form-col { flex:1 1 0; }
@media (max-width: 768px){ .form-row{ flex-direction: column; } }

/* --- Patch: Offer cards uniform layout --- */
.offers { align-items: stretch; }
.offer-card { display:flex; flex-direction:column; justify-content:flex-start; height:100%; }
.offer-card h3 { margin-top:0; }
.offer-card .price { margin:6px 0 8px; }
.offer-card p { margin:0 0 12px; }
.offer-card ul { margin:0; padding-left:20px; }
@media (min-width: 992px){ .offer-card{ min-height:520px; } }


/* --- Patch: Newsletter alignment & sizing --- */
.newsletter-form { 
  display: flex; 
  align-items: center; 
  gap: 12px; 
  max-width: 720px; 
  margin: 0 auto; 
}
.newsletter-form input[type="email"] { 
  flex: 1 1 auto; 
  height: 44px; 
}
.newsletter-form button { 
  height: 44px; 
  padding: 0 18px; 
}
@media (max-width: 600px){
  .newsletter-form { flex-direction: column; align-items: stretch; }
  .newsletter-form button { width: 100%; }
}

/* ----------------------------------------------------------------
   Why Section Styles
   The "Warum generative KI" section pairs explanatory text with an
   illustration.  Flexbox allows the text and image to sit side by
   side on large screens and stack on mobile.  Soft shadows and
   rounded corners keep the look consistent with the rest of the site.
---------------------------------------------------------------- */
.why-section {
  padding: 80px 0;
  background-color: var(--color-panel);
}

.why-container {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  align-items: center;
}

.why-text {
  flex: 1 1 50%;
}

.why-text h2 {
  font-size: 2rem;
  margin-bottom: 16px;
}

.why-text p {
  margin-bottom: 16px;
  color: var(--color-muted);
  line-height: 1.6;
}

.why-image {
  flex: 1 1 50%;
  text-align: center;
}

.why-image img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

@media (max-width: 768px) {
  .why-container {
    flex-direction: column;
  }
  .why-text,
  .why-image {
    flex: 1 1 100%;
  }
}


/* --- Patch: checkbox group styling --- */
.checkbox-group { display:flex; gap:16px; flex-wrap:wrap; margin-top:8px; }
.checkbox-group .checkbox { display:flex; align-items:center; gap:8px; }


/* --- Digital-First offers subtitle & PDF link --- */
.offers-subtitle { grid-column: 1 / -1; margin: 12px 0 4px; font-weight: 600; opacity: .85; }
.offer-card .pdf-link { display:inline-block; margin-top: 10px; text-decoration: underline; }


/* --- Equal-height offer cards & aligned PDF link --- */
#angebote .offers { align-items: stretch; }
#angebote .offer-card { display:flex; flex-direction:column; height:100%; }
#angebote .offer-card h3 { margin-top: 4px; }
#angebote .offer-card ul { margin-bottom: 12px; }
#angebote .offer-card .pdf-link { margin-top:auto; align-self:flex-start; text-decoration: underline; }

/* Additional spacing for 'Mehr erfahren' links inside offer cards */
#angebote .offer-card .btn.btn-secondary {
  margin-top: 8px;
  align-self: flex-start;
}

/* Align PDF links at the bottom and ensure lists grow to fill space for equal alignment across cards */
#angebote .offer-card ul {
  flex-grow: 1;
}

@keyframes gradientAnimation {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}