/* kf-design.css — Gestaltungsebene für kontrollfahrten.com (27.09.2026)
 *
 * Manuel am 27.09.2026: „grafisch deutlich stärker machen … vom Design noch stärker … noch ansprechender".
 * Befund vorher (Bildschirmfotos Rechner + Handy): starkes dunkles Kopfbild, danach acht fast gleich helle Abschnitte
 * (#F8FAFC / Weiß im Wechsel, kaum zu unterscheiden), blasse Karten, flache orange Knöpfe, sehr viel Leerraum (lg:py-32).
 *
 * Diese Datei liegt ÜBER dem Tailwind-Stylesheet und ändert nur Gestaltung — kein Text, keine Struktur, kein Neubau
 * (ein vite-Neubau löscht die SEO-Nacharbeit, siehe fall_kontrollfahrten_seo). Zurücknehmen = <link> entfernen.
 * Farben aus der Seite übernommen: Nachtblau #0A1628, Orange #F97316 / #EA580C.
 */

:root {
  --kf-nacht: #0A1628;
  --kf-nacht-2: #13233d;
  --kf-orange: #F97316;
  --kf-orange-tief: #EA580C;
  --kf-glut: rgba(249, 115, 22, .35);
}

/* ---------- 0. Seitlicher Überlauf am Handy (schon VOR dieser Ebene vorhanden, gemessen iPhone 13: 416 statt 390 px) ----------
   Deko-Kreise (absolute, bg-orange-500/10, rounded-full) in den Karten und das Kopfbild (scale-105) ragten über den Rand -
   die Startseite liess sich seitlich verschieben. clip statt hidden: hält position:sticky/fixed intakt. */
html, body { overflow-x: clip; }

/* ---------- 1. Rhythmus: Abschnitte klar voneinander abheben, weniger Leerlauf ---------- */
@media (min-width: 1024px) {
  #root section.lg\:py-32 { padding-top: 6.5rem; padding-bottom: 6.5rem; }
}
/* helle Abschnitte bekommen eine feine Tönung + Punktraster, damit Weiß und Hellgrau unterscheidbar werden */
#leistungen, #warum-wir, #faq, #kontakt {
  background-color: #F3F6FA !important;
  background-image: radial-gradient(rgba(10, 22, 40, .045) 1px, transparent 1px) !important;
  background-size: 22px 22px !important;
  position: relative;
}
#leistungen::before, #faq::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 320px; pointer-events: none;
  background: radial-gradient(ellipse 60% 100% at 50% 0%, rgba(249, 115, 22, .08), transparent 70%);
}

/* ---------- 2. Zielgruppen als dunkler Block — der Bruch, der der Seite gefehlt hat ---------- */
#zielgruppen {
  background: radial-gradient(ellipse 70% 60% at 85% 0%, rgba(249, 115, 22, .16), transparent 60%),
              radial-gradient(ellipse 60% 60% at 0% 100%, rgba(59, 130, 246, .10), transparent 60%),
              linear-gradient(180deg, var(--kf-nacht) 0%, #0d1c33 100%) !important;
  position: relative; overflow: hidden;
}
#zielgruppen h2, #zielgruppen h3 { color: #fff !important; }
#zielgruppen h2 + p, #zielgruppen p.text-gray-600, #zielgruppen p.text-gray-500 { color: rgba(255, 255, 255, .72) !important; }
#zielgruppen [class*="rounded-2xl"] {
  box-shadow: 0 20px 45px -20px rgba(0, 0, 0, .6), inset 0 0 0 1px rgba(255, 255, 255, .08) !important;
  transition: transform .35s ease, box-shadow .35s ease !important;
}
#zielgruppen [class*="rounded-2xl"]:hover {
  transform: translateY(-6px);
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .7), inset 0 0 0 1px rgba(249, 115, 22, .45), 0 0 40px -10px var(--kf-glut) !important;
}

/* ---------- 3. Karten mit Tiefe und klarer Reaktion ---------- */
#root .premium-shadow {
  box-shadow: 0 1px 2px rgba(10, 22, 40, .06), 0 12px 32px -14px rgba(10, 22, 40, .22) !important;
  border-color: rgba(10, 22, 40, .07) !important;
  position: relative; overflow: hidden;
}
#root .premium-shadow::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, var(--kf-orange), #FDBA74);
  transform: scaleX(0); transform-origin: left; transition: transform .45s ease;
}
#root .premium-shadow:hover::after { transform: scaleX(1); }
#root .premium-shadow:hover {
  box-shadow: 0 2px 4px rgba(10, 22, 40, .06), 0 28px 50px -18px rgba(10, 22, 40, .32) !important;
}
/* orange Symbolfelder in den Karten: Verlauf + Glühen statt flacher Fläche */
#root .premium-shadow [class*="bg-orange-500"][class*="rounded"] {
  background: linear-gradient(135deg, #FB923C, var(--kf-orange-tief)) !important;
  box-shadow: 0 8px 18px -6px var(--kf-glut);
}

/* ---------- 4. Knöpfe: Verlauf, Glühen, spürbare Reaktion ---------- */
#root a.bg-orange-500, #root button.bg-orange-500 {
  background: linear-gradient(135deg, #FB923C 0%, var(--kf-orange) 45%, var(--kf-orange-tief) 100%) !important;
  box-shadow: 0 10px 28px -8px rgba(249, 115, 22, .55), inset 0 1px 0 rgba(255, 255, 255, .25) !important;
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease !important;
}
#root a.bg-orange-500:hover, #root button.bg-orange-500:hover {
  transform: translateY(-2px);
  filter: brightness(1.05);
  box-shadow: 0 16px 36px -10px rgba(249, 115, 22, .7), inset 0 1px 0 rgba(255, 255, 255, .3) !important;
}

/* ---------- 5. Abschnitts-Abzeichen („Unsere Leistungen" …) kräftiger ---------- */
#root section .bg-orange-50.border-orange-200.rounded-full {
  background: linear-gradient(135deg, #FFF7ED, #FFEDD5) !important;
  border-color: #FDBA74 !important;
  box-shadow: 0 6px 16px -8px var(--kf-glut);
}
#root section .bg-orange-50.border-orange-200.rounded-full * { color: var(--kf-orange-tief) !important; font-weight: 700; letter-spacing: .02em; }
/* orange hervorgehobene Wörter in Überschriften: Verlauf */
#root section h2 .text-orange-500 {
  background: linear-gradient(90deg, var(--kf-orange-tief), #FB923C);
  -webkit-background-clip: text; background-clip: text; color: transparent !important;
}

/* ---------- 6. Kopfleiste beim Scrollen: klare Kante statt weißer Fläche ---------- */
#root nav.fixed[class*="bg-white"] {
  /* deckend: die Vorlage ist halbdurchsichtig - über dem dunklen Zielgruppen-Block verschwanden sonst die Menüpunkte */
  background-color: rgba(255, 255, 255, .97) !important;
  box-shadow: 0 8px 30px -12px rgba(10, 22, 40, .25) !important;
  border-bottom: 2px solid transparent;
  border-image: linear-gradient(90deg, transparent, var(--kf-orange), transparent) 1;
}

/* ---------- 7. Bilder: gerundet mit Tiefe, leichte Bewegung beim Überfahren ---------- */
#root section img.object-cover { transition: transform .8s cubic-bezier(.2, .7, .2, 1); }
#root section .overflow-hidden:hover > img.object-cover { transform: scale(1.04); }

/* ---------- 8. FAQ: offene Frage klar markiert ---------- */
#faq [data-state="open"] { box-shadow: inset 3px 0 0 var(--kf-orange), 0 18px 40px -22px rgba(10, 22, 40, .35) !important; }

/* ---------- 9. Übergang in den Fuß: orange Lichtkante ---------- */
#root footer { position: relative; }
#root footer::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, transparent, var(--kf-orange), transparent);
}

/* Wer Bewegung reduziert hat, bekommt keine Hebe- und Zoomeffekte */
@media (prefers-reduced-motion: reduce) {
  #root .premium-shadow::after, #root section img.object-cover, #zielgruppen [class*="rounded-2xl"] { transition: none !important; }
  #root a.bg-orange-500:hover, #root button.bg-orange-500:hover, #zielgruppen [class*="rounded-2xl"]:hover { transform: none; }
}

/* ---------- Kein Umspringen beim Laden (Manuel 04.10.2026: „erst die alte Seite, dann die neue") ----------
   Die Bewegungsebene (kf-erleben) baut die Seite nach dem Laden um. Bis sie fertig ist (Klasse kfx-bereit am <html>), bleibt
   #root unsichtbar und blendet dann weich ein. Sicherung: Läuft die Ebene nicht, zeigt die Animation die Seite nach 1,8 s trotzdem. */
html:not(.kfx-bereit) #root { opacity: 0; animation: kfx-zeigen .35s ease 1.8s forwards; }
html.kfx-bereit #root { opacity: 1; transition: opacity .35s ease; }
@keyframes kfx-zeigen { to { opacity: 1; } }

/* ---------- Zertifikat-Logos nie weiß einfärben (Manuel 04.10.2026: „bei Zertifizierung fehlt die vierte, nur ein dicker beiger Balken") ----------
   Die App färbt Logos auf dunklem/orangem Grund mit brightness-0 invert weiß. Das DMB-Logo hat eine Fläche und wird dadurch ein
   heller Block. Hier statisch, damit es ohne Bewegungsebene und auf jedem Seitenweg greift. */
#root img[class*="invert"][src*="/certs/"], #root img[class*="invert"][src*="dmb-logo"] {
  filter: none !important; opacity: 1 !important; background: #fff; border-radius: 9px; padding: 5px 9px; box-sizing: content-box;
}