/*
Theme Name: JF Security - final Sitemap V3 · neue Website
Theme URI: https://www.jf-security.de/
Author: JF Security
Description: Stabile WordPress-Hybridversion der JF-Security-Webseite. Die originale JF-Webseite bleibt optisch erhalten; normale WordPress-, Elementor- und Plugin-Seiten laufen über native WordPress-Templates. Theme-Dateien und Website-Assets liegen lokal.
Version: 10.13.1
Requires at least: 6.2
Requires PHP: 7.4
Text Domain: jf-security-stable-v6
*/

/* Native WordPress-/Plugin-Seiten. Die Original-JF-Routen nutzen weiterhin assets/site.css. */
.jf-native-wrap{width:min(1200px,calc(100% - 40px));margin:0 auto}.jf-native-header{padding:18px 0;border-bottom:1px solid #e6e6e6;background:#fff}.jf-native-brand{font:600 18px/1.2 system-ui;text-decoration:none;color:#111}.jf-native-nav{float:right}.jf-native-nav ul{display:flex;gap:20px;list-style:none;margin:0;padding:0}.jf-native-main{padding:60px 0;min-height:60vh}.jf-native-article{font:16px/1.7 system-ui;color:#222}.jf-native-article img{max-width:100%;height:auto}.jf-native-footer{padding:30px 0;border-top:1px solid #e6e6e6;font:14px system-ui;color:#666}.alignwide{max-width:1200px;margin-left:auto;margin-right:auto}.alignfull{width:100vw;margin-left:calc(50% - 50vw)}


/* V6: Schutzschicht für das originale JF-Frontend.
   WordPress-/Plugin-CSS soll die bestehende React/Tailwind-Seite nicht zerlegen. */
body.jf-original-route { margin: 0 !important; overflow-x: hidden !important; }
body.jf-original-route #root,
body.jf-original-route #root > * { width: 100%; max-width: 100%; }
body.jf-original-route #root *,
body.jf-original-route #root *::before,
body.jf-original-route #root *::after { box-sizing: border-box; min-width: 0; }
body.jf-original-route #root img,
body.jf-original-route #root video,
body.jf-original-route #root iframe,
body.jf-original-route #root svg { max-width: 100%; }
body.jf-original-route #root img:not([class*="h-"]),
body.jf-original-route #root video:not([class*="h-"]) { height: auto; }

@media (max-width: 782px) {
    body.jf-original-route { width: 100% !important; max-width: 100vw !important; }
  body.jf-original-route #root { overflow-x: clip; }
  body.jf-original-route #root table { max-width: 100%; overflow-x: auto; display: block; }
  body.jf-original-route #root input,
  body.jf-original-route #root select,
  body.jf-original-route #root textarea,
  body.jf-original-route #root button { max-width: 100%; }
}


/* V10.3: WordPress-Adminleiste wieder sichtbar.
   Der feste JF-Header wird unter die Adminleiste geschoben, damit nichts ueberlappt. */
body.admin-bar.jf-original-route #root header.fixed { top: 32px !important; }
@media (max-width: 782px) {
  body.admin-bar.jf-original-route #root header.fixed { top: 46px !important; }
}

/* V10.6: CTA-/Button-Kontrast passend zum Original-Look von jf-security.de.
   Das Original verwendet auf dunklen Flaechen weisse/halbweisse Konturen und
   auf hellen Flaechen dunkle Konturen. Keine goldenen Ersatzrahmen. */
body.jf-original-route #root a[class*="px-"][class*="py-"],
body.jf-original-route #root button[class*="px-"][class*="py-"] {
  text-decoration: none !important;
  cursor: pointer;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease, transform .25s ease !important;
}

/* Transparente CTAs auf dunklem Hintergrund – z.B. "Unsere Leistungen". */
body.jf-original-route #root a[class*="px-"][class*="py-"][class*="text-white"]:not([class*="bg-white"]):not([class*="bg-[#"]),
body.jf-original-route #root button[class*="px-"][class*="py-"][class*="text-white"]:not([class*="bg-white"]):not([class*="bg-[#"]) {
  border: 1px solid rgba(255,255,255,.58) !important;
  background: transparent !important;
  color: #fff !important;
}

/* Transparente CTAs auf hellem Hintergrund. */
body.jf-original-route #root a[class*="px-"][class*="py-"][class*="text-[#0a0a0a]"]:not([class*="bg-"]),
body.jf-original-route #root a[class*="px-"][class*="py-"][class*="text-[#1a1a1a]"]:not([class*="bg-"]),
body.jf-original-route #root button[class*="px-"][class*="py-"][class*="text-[#0a0a0a]"]:not([class*="bg-"]),
body.jf-original-route #root button[class*="px-"][class*="py-"][class*="text-[#1a1a1a]"]:not([class*="bg-"]) {
  border: 1px solid rgba(10,10,10,.55) !important;
  background: transparent !important;
  color: #0a0a0a !important;
}

/* Gefuellte Originalbuttons behalten Schwarz/Weiss. */
body.jf-original-route #root a[class*="bg-[#0a0a0a]"][class*="px-"],
body.jf-original-route #root a[class*="bg-[#0b0b0d]"][class*="px-"],
body.jf-original-route #root button[class*="bg-[#0a0a0a]"][class*="px-"],
body.jf-original-route #root button[class*="bg-[#0b0b0d]"][class*="px-"] {
  border: 1px solid #0a0a0a !important;
  background-color: #0a0a0a !important;
  color: #fff !important;
}
body.jf-original-route #root a[class*="bg-white"][class*="px-"],
body.jf-original-route #root button[class*="bg-white"][class*="px-"] {
  border: 1px solid #fff !important;
}

@media (hover:hover) {
  /* Originaltypischer Hover auf dunklen Flaechen: weisser Rahmen wird voll sichtbar. */
  body.jf-original-route #root a[class*="px-"][class*="py-"][class*="text-white"]:not([class*="bg-white"]):not([class*="bg-[#"]):hover,
  body.jf-original-route #root button[class*="px-"][class*="py-"][class*="text-white"]:not([class*="bg-white"]):not([class*="bg-[#"]):hover {
    border-color: #fff !important;
    background: rgba(255,255,255,.08) !important;
    box-shadow: 0 6px 18px rgba(0,0,0,.18);
    transform: translateY(-1px);
  }

  /* Originaltypischer Hover auf hellen Flaechen: schwarze Kontur / dunkler Fill. */
  body.jf-original-route #root a[class*="px-"][class*="py-"][class*="text-[#0a0a0a]"]:not([class*="bg-"]):hover,
  body.jf-original-route #root a[class*="px-"][class*="py-"][class*="text-[#1a1a1a]"]:not([class*="bg-"]):hover,
  body.jf-original-route #root button[class*="px-"][class*="py-"][class*="text-[#0a0a0a]"]:not([class*="bg-"]):hover,
  body.jf-original-route #root button[class*="px-"][class*="py-"][class*="text-[#1a1a1a]"]:not([class*="bg-"]):hover {
    border-color: #0a0a0a !important;
    background: #0a0a0a !important;
    color: #fff !important;
    box-shadow: 0 6px 18px rgba(0,0,0,.14);
    transform: translateY(-1px);
  }

  body.jf-original-route #root a[class*="bg-[#0a0a0a]"][class*="px-"]:hover,
  body.jf-original-route #root button[class*="bg-[#0a0a0a]"][class*="px-"]:hover {
    background-color: #1a1a1a !important;
    border-color: #1a1a1a !important;
    transform: translateY(-1px);
  }
  body.jf-original-route #root a[class*="bg-white"][class*="px-"]:hover,
  body.jf-original-route #root button[class*="bg-white"][class*="px-"]:hover {
    background-color: rgba(255,255,255,.90) !important;
    transform: translateY(-1px);
  }
}

body.jf-original-route #root a[class*="px-"][class*="py-"]:focus-visible,
body.jf-original-route #root button[class*="px-"][class*="py-"]:focus-visible {
  outline: 2px solid currentColor !important;
  outline-offset: 3px !important;
}

/* Formulare: Submit bleibt im originalen Schwarz/Weiss-Look, nicht Gold. */
body.jf-original-route #root form button[type="submit"],
body.jf-original-route #root form input[type="submit"] {
  border: 1px solid #0a0a0a !important;
  cursor: pointer;
  transition: background-color .22s ease, color .22s ease, border-color .22s ease, box-shadow .22s ease, transform .22s ease !important;
}
@media (hover:hover) {
  body.jf-original-route #root form button[type="submit"]:hover,
  body.jf-original-route #root form input[type="submit"]:hover {
    box-shadow: 0 7px 22px rgba(0,0,0,.16);
    transform: translateY(-1px);
  }
}



/* V10.7: Hintergrundpalette an die originale JF-Security-Gestaltung angleichen.
   Die bestehende React/Tailwind-Struktur bleibt unveraendert; wir normalisieren
   nur die Farben, damit WordPress-/Plugin-CSS keine abweichenden Flaechen erzeugt. */
body.jf-original-route #root {
  background:#ffffff !important;
  color:#0a0a0a;
}

/* Dunkle Originalflaechen: Header, Footer, Hero-/Kontrastbereiche. */
body.jf-original-route #root .bg-\[\#0a0a0a\],
body.jf-original-route #root .bg-\[\#09090b\],
body.jf-original-route #root .bg-\[\#080808\],
body.jf-original-route #root .bg-\[\#090909\],
body.jf-original-route #root .bg-\[\#0b0b0d\],
body.jf-original-route #root .bg-\[\#0c0c0e\],
body.jf-original-route #root .bg-\[\#070709\] {
  background-color:#0a0a0a !important;
}

/* Helle warmgraue Flaechen wie auf der Originalseite. */
body.jf-original-route #root .bg-\[\#f8f7f5\] {
  background-color:#f8f7f5 !important;
}
body.jf-original-route #root .bg-\[\#f5f4f2\] {
  background-color:#f5f4f2 !important;
}
body.jf-original-route #root .bg-\[\#f0efed\],
body.jf-original-route #root .bg-\[\#f0eeeb\] {
  background-color:#f0efed !important;
}
body.jf-original-route #root .bg-white {
  background-color:#ffffff !important;
}

/* Originale dunkle Typografie auf hellen Bereichen. */
body.jf-original-route #root .text-\[\#0a0a0a\] { color:#0a0a0a !important; }
body.jf-original-route #root .text-\[\#1a1a1a\] { color:#1a1a1a !important; }

/* Header und Footer explizit absichern. */
body.jf-original-route #root header,
body.jf-original-route #root footer {
  background-color:#0a0a0a;
}

/* Karten/Trenner im warmen Originalton. */
body.jf-original-route #root .border-\[\#e8e4de\] {
  border-color:#e8e4de !important;
}

/* Gold nur als dezenter Akzent, nicht als Flaechenersatz. */
body.jf-original-route #root .text-\[\#c9a96e\] { color:#c9a96e !important; }
body.jf-original-route #root .bg-\[\#c9a96e\] { background-color:#c9a96e !important; }

/* Verhindert, dass Plugins globale section/main-Hintergruende ueberschreiben. */
body.jf-original-route #root main,
body.jf-original-route #root section,
body.jf-original-route #root footer,
body.jf-original-route #root header {
  background-image: var(--jf-keep-bg-image, initial);
}

/* --------------------------------------------------------------------------
   V10.4 – Formular-/Button-Fallback
   WordPress/Browser-Resets dürfen die sichtbaren Linien der JF-Formulare
   nicht entfernen. Nur das Original-Frontend wird betroffen.
   -------------------------------------------------------------------------- */
body.jf-original-route #root form input:not([type="radio"]):not([type="checkbox"]):not([type="hidden"]):not([type="submit"]):not([type="button"]),
body.jf-original-route #root form textarea,
body.jf-original-route #root form select {
  border: 1px solid rgba(10,10,10,.18) !important;
  background-color: #fff !important;
  color: #0a0a0a;
  box-shadow: none;
}
body.jf-original-route #root form input:not([type="radio"]):not([type="checkbox"]):not([type="hidden"]):focus,
body.jf-original-route #root form textarea:focus,
body.jf-original-route #root form select:focus {
  border-color: rgba(10,10,10,.55) !important;
  outline: none !important;
  box-shadow: 0 0 0 1px rgba(10,10,10,.08);
}
body.jf-original-route #root form button[type="submit"],
body.jf-original-route #root form input[type="submit"] {
  border: 1px solid #0a0a0a !important;
  background: #0a0a0a !important;
  color: #fff !important;
  appearance: none;
  -webkit-appearance: none;
}
body.jf-original-route #root form button[type="submit"]:hover,
body.jf-original-route #root form input[type="submit"]:hover {
  background: #1a1a1a !important;
  border-color: #1a1a1a !important;
}
/* Auswahl-Kacheln in Formularen (z. B. Kurs- und Zugangsauswahl) */
body.jf-original-route #root form label.cursor-pointer.border {
  border-width: 1px !important;
  border-style: solid !important;
}


/* Local form guard, maintained by React. */

      .jf-spam-guard{margin:0 0 1.5rem;padding:1rem 1.1rem;border:1px solid rgba(10,10,10,.22);background:#f8f7f5}
      .jf-spam-guard__label{display:block;margin:0 0 .45rem;font:600 11px/1.3 system-ui,sans-serif;letter-spacing:.10em;text-transform:uppercase;color:rgba(26,26,26,.65)}
      .jf-spam-guard__row{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap}
      .jf-spam-guard__question{font:600 15px/1.3 system-ui,sans-serif;color:#0a0a0a}
      .jf-spam-guard__input{width:110px!important;max-width:110px!important;padding:.7rem .8rem!important;border:1px solid rgba(10,10,10,.35)!important;background:#fff!important;color:#0a0a0a!important;font:15px/1.2 system-ui,sans-serif!important}
      .jf-spam-guard__input:focus{outline:2px solid #0a0a0a!important;outline-offset:1px!important;border-color:#0a0a0a!important}
      .jf-spam-guard__hint{margin:.55rem 0 0;font:12px/1.45 system-ui,sans-serif;color:rgba(26,26,26,.52)}
      .jf-spam-guard__error{margin:.55rem 0 0;color:#b42318;font:600 12px/1.4 system-ui,sans-serif}
      .jf-spam-hp{position:absolute!important;left:-10000px!important;top:auto!important;width:1px!important;height:1px!important;overflow:hidden!important;opacity:0!important;pointer-events:none!important}