/* ============================================================
   spicy concepts – High-Speed-HTML Landingpage
   Ausgelagertes Stylesheet (ersetzt das <style>-Inline-Tag)
   ============================================================ */

/* ===== Lokale Web-Fonts (ersetzt Google Fonts CDN) =====
   Dateien liegen bereits in /fonts/ (google-webfonts-helper-Namen). */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('fonts/poppins-v24-latin-300.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/poppins-v24-latin-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/poppins-v24-latin-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/poppins-v24-latin-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/open-sans-v44-latin-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/open-sans-v44-latin-600.woff2') format('woff2');
}

/* ===== BRANDING-VARIABLEN – pro Kunde anpassbar ===== */
:root {
  --color-primary: #990000;        /* Bordeaux – CTAs, Akzente */
  --color-primary-dark: #6e0000;   /* Hover-Zustand */
  --color-primary-glow: rgba(153,0,0,0.45);
  --color-secondary: #4c5c7c;      /* Blaugrau */
  --color-accent: #6e95b3;         /* Taubenblau – Icons, Rahmen */
  --color-success: #00994d;        /* Grün – Checks, Erfolg */
  --color-ink: #434343;            /* Fließtext */
}

html { scroll-padding-top: 5.5rem; }
body { font-family: 'Open Sans', sans-serif; color: var(--color-ink); }
h1, h2, h3, h4 { font-family: 'Poppins', sans-serif; }

/* Glow-Puls auf dem primären CTA */
@keyframes ctaGlow {
  0%, 100% { box-shadow: 0 0 18px -4px var(--color-primary-glow); }
  50%      { box-shadow: 0 0 32px 2px var(--color-primary-glow); }
}
.btn-glow { animation: ctaGlow 2.6s ease-in-out infinite; }

/* sanfte Übergänge für Alpine-Umschalter */
[x-cloak] { display: none !important; }
.fade-slide-enter { transition: opacity .35s ease, transform .35s ease; }

/* Motor-Animation im Hero */
@keyframes gearSpin { to { transform: rotate(360deg); } }
@keyframes gearSpinRev { to { transform: rotate(-360deg); } }
@keyframes pulseLine { 0%, 100% { opacity: .35 } 50% { opacity: 1 } }
.gear-slow { animation: gearSpin 9s linear infinite; transform-origin: center; }
.gear-slower { animation: gearSpinRev 14s linear infinite; transform-origin: center; }
.flow-line { animation: pulseLine 1.6s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .btn-glow, .gear-slow, .gear-slower, .flow-line { animation: none; }
  html { scroll-behavior: auto; }
}

/* ===== Kontaktformular: Honeypot-Feld =====
   Für Menschen unsichtbar, für Bots weiterhin im DOM vorhanden. */
.kf-honeypot { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Cloudflare Turnstile: eigene Zeile, etwas Abstand zum Rest des Formulars */
.cf-turnstile { margin-top: 0.25rem; }

/* ===== Rechtstexte (Impressum/Datenschutz von eRecht24) =====
   eRecht24 liefert reines, unklassiertes HTML (h2, p, ul, a ...) -
   hier nur die Basis-Lesbarkeit herstellen. */
.legal-text h1 { font-family: 'Poppins', sans-serif; font-size: 1.8rem; font-weight: 600; margin: 2rem 0 1rem; }
.legal-text h2 { font-family: 'Poppins', sans-serif; font-size: 1.4rem; font-weight: 600; margin: 2rem 0 0.75rem; }
.legal-text h3 { font-family: 'Poppins', sans-serif; font-size: 1.15rem; font-weight: 600; margin: 1.5rem 0 0.5rem; }
.legal-text p { margin: 0 0 1rem; line-height: 1.7; }
.legal-text ul, .legal-text ol { margin: 0 0 1rem; padding-left: 1.4rem; line-height: 1.7; }
.legal-text li { margin-bottom: 0.35rem; }
.legal-text a { color: var(--color-primary); text-decoration: underline; }
.legal-text a:hover { color: var(--color-primary-dark); }
.legal-text table { border-collapse: collapse; margin: 0 0 1rem; }
.legal-text table td, .legal-text table th { border: 1px solid #e5e7eb; padding: 0.5rem 0.75rem; text-align: left; }