/* static/gemeinsam-landing.css - zusaetzliche Styles NUR fuer die vier
   Zielgruppen-Landingpages (fuer-eltern, fuer-lehrkraefte, fuer-schueler,
   fuer-studierende): Hero-CTA-Buttons, Warum-Corvi-Liste, Sticky-Mobile-CTA.
   Ergaenzt static/gemeinsam.css, wird NICHT auf den anderen sechs
   statischen Seiten (agb/datenschutz/impressum/kontakt/ueber-uns/index)
   eingebunden, da dort ungenutzt. */

  .hero-neu {
    --primaer: #1c2541;
    --sekundaer-bg: #faf5ec;
    --akzent: #f4a83c;
    --akzent-dunkel: #c9821f;
  }
  .btn-primaer-neu {
    background: var(--akzent); color: var(--primaer); border: none; border-radius: 999px;
    padding: 14px 28px; font-weight: 700; font-size: 1.05rem; cursor: pointer;
    box-shadow: 0 4px 14px rgba(244,168,60,0.35); transition: transform 0.15s, box-shadow 0.15s;
    font-family: inherit;
  }
  .btn-primaer-neu:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(244,168,60,0.45); }
  button { margin-top: 14px; padding: 10px 22px; background: transparent; color: #00838a; border: 1.5px solid #00838a; border-radius: 999px; cursor: pointer; font-weight: 600; transition: background 0.15s, color 0.15s; font-family: inherit; }
  button:hover { background: #00838a; color: white; }
  button.gold { background: transparent; color: #96690a; border-color: #96690a; }
  button.gold:hover { background: #96690a; color: white; }
  .warum-corvi-liste { list-style: none; max-width: 780px; margin: 0 auto; padding: 0; }
  .warum-corvi-liste li { font-size: 1.05rem; line-height: 1.7; color: #333; padding: 14px 0 14px 32px; border-bottom: 1px solid #e5e2db; position: relative; }
  .warum-corvi-liste li:last-child { border-bottom: none; }
  .warum-corvi-liste li::before { content: "✓"; position: absolute; left: 0; top: 14px; color: #96690a; font-weight: 700; font-size: 1.1rem; }
  .warum-corvi-liste li strong { color: #1c2541; }
  #sticky-mobile-cta {
    display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 500;
    background: #faf5ec; box-shadow: 0 -2px 14px rgba(0,0,0,0.14);
    padding: 14px 16px; align-items: center; gap: 8px;
  }
  @media (max-width: 600px) {
    body { padding-bottom: 90px; }
    #sticky-mobile-cta:not(.versteckt) { display: flex; }
  }

/* Conversion-Ausbau der 11 Feature-/Studium-/Lehrer-Landingpages
   (01.09.2026, Nutzer-Feedback "aus Landingpages echte Conversion-
   Maschinen machen"): Vorher-Nachher-Vergleich, FAQ-Accordion und
   Produkt-Vorschau-Karten. Die Vergleich-Grid-Klassen sind 1:1 aus dem
   bereits bestehenden, bewaehrten "Warum Corvi?"-Vergleich auf
   static/index.html uebernommen (dort inline definiert, hier fuer die
   Landingpages zentral verfuegbar gemacht), damit optisch identisch
   statt eine zweite, abweichende Vergleichs-Optik einzufuehren. */
.vergleich-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  max-width: 680px; margin: 20px auto 0 auto; background: #eee;
  border-radius: 12px; overflow: hidden; box-shadow: 0 2px 10px rgba(28,37,65,0.06);
}
.vergleich-kopf { background: white; padding: 14px 16px; font-size: 0.85rem; font-weight: 700; }
.vergleich-kopf-alt { color: #888; }
.vergleich-kopf-neu { color: #96690a; }
.vergleich-paar { display: contents; }
.vergleich-zelle { background: white; padding: 12px 16px; font-size: 0.9rem; word-wrap: break-word; }
.vergleich-zelle-alt { color: #888; }
@media (max-width: 600px) {
  .vergleich-grid { grid-template-columns: 1fr; background: transparent; box-shadow: none; gap: 12px; }
  .vergleich-kopf { display: none; }
  .vergleich-paar {
    display: block; background: white; border-radius: 12px; overflow: hidden;
    box-shadow: 0 2px 10px rgba(28,37,65,0.06);
  }
  .vergleich-zelle { position: relative; padding: 14px 16px 14px 16px; }
  .vergleich-zelle-alt { border-bottom: 1px dashed #eee; }
  .vergleich-zelle-alt::after {
    content: "↓ statt"; position: absolute; right: 16px; bottom: -11px; z-index: 1;
    background: white; padding: 0 8px; font-size: 0.7rem; color: #bbb; font-weight: 600;
  }
}

/* FAQ-Accordion: natives <details>/<summary> statt eigenem JS-Toggle -
   Inhalt bleibt fuer Google auch im eingeklappten Zustand crawlbar
   (Nutzer-Feedback: "aufgeklappte Fragen (Accordions)" statt starrer
   Aufzaehlung), gleiches robustes Muster wie die bereits bestehende
   .wizard-erweiterte-filter-Accordion im Uebungs-Generator, nur mit
   eigener, fuer FAQ passenderer Kartenoptik statt Formular-Look. */
.faq-accordion {
  border-radius: 12px; overflow: hidden; max-width: 780px; margin: 16px auto 0 auto;
  box-shadow: 0 2px 10px rgba(28,37,65,0.06);
}
.faq-item { background: white; border-bottom: 1px solid #eee; }
.faq-item:last-child { border-bottom: none; }
.faq-item summary {
  list-style: none; cursor: pointer; padding: 15px 18px; font-weight: 600;
  color: #1c2541; display: flex; justify-content: space-between; align-items: center;
  gap: 12px; font-size: 0.98rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+"; font-size: 1.3rem; line-height: 1; color: #96690a; flex-shrink: 0;
  transition: transform 0.15s ease;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-antwort { padding: 0 18px 16px 18px; color: #444; line-height: 1.6; font-size: 0.92rem; }

/* Produkt-Vorschau-Karte ("visueller Beweis"): zeigt beispielhaft, wie
   ein fertiger LocalAce-Lernplan-Tag bzw. eine generierte Klassenarbeit
   aussieht - ersetzt einen echten Screenshot, da die Landingpages
   bewusst screenshot-frei/schnell-ladend bleiben sollen (kein
   zusaetzliches Bild-Asset noetig, reines HTML/CSS wie der Rest der
   Seite). */
.produkt-vorschau-karte {
  background: white; border: 1px solid #eee; border-radius: 14px; padding: 20px 22px;
  max-width: 400px; margin: 18px auto 0 auto; box-shadow: 0 4px 16px rgba(28,37,65,0.08);
  text-align: left;
}
.vorschau-tag-badge {
  display: inline-block; background: #faf5ec; color: #96690a; font-size: 0.72rem;
  font-weight: 700; padding: 4px 12px; border-radius: 999px; margin-bottom: 10px;
}
.vorschau-fach { font-size: 1.05rem; font-weight: 700; color: #1c2541; margin-bottom: 2px; }
.vorschau-thema { font-size: 0.88rem; color: #555; margin-bottom: 14px; }
.vorschau-checkliste { list-style: none; padding: 0; margin: 0 0 12px 0; }
.vorschau-checkliste li { font-size: 0.87rem; color: #333; padding: 3px 0; }
.vorschau-ampel { font-size: 0.85rem; font-weight: 600; }
.vorschau-hinweis { font-size: 0.8rem; color: #888; text-align: center; margin: 10px auto 0 auto; max-width: 400px; }

/* Niveau-Vorschau (3 nebeneinander) fuer die Binnendifferenzierungs-
   Landingpage - zeigt dieselbe Beispielaufgabe auf 3 Niveaustufen. */
.niveau-vorschau-grid { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 18px; }
.niveau-vorschau-karte {
  background: white; border: 1px solid #eee; border-radius: 12px; padding: 14px 16px;
  box-shadow: 0 2px 10px rgba(28,37,65,0.06); flex: 1 1 170px; max-width: 210px; text-align: left;
}
.niveau-vorschau-badge {
  display: inline-block; font-size: 0.68rem; font-weight: 700; padding: 2px 9px;
  border-radius: 999px; margin-bottom: 8px;
}
.niveau-vorschau-badge.a { background: #e8f3ec; color: #2f7a4a; }
.niveau-vorschau-badge.b { background: #faf5ec; color: #96690a; }
.niveau-vorschau-badge.c { background: #fdeceb; color: #c0392b; }
.niveau-vorschau-karte p { font-size: 0.85rem; color: #444; margin: 0; line-height: 1.5; }