/**
 * ==============================================================================
 * PROTECT VISION — DEDICATED SECURITY TECHNOLOGY DESIGN SYSTEM
 * Architecture: NEXUS ARCHITECTUM V3.0 (Zero-JS & Protocol Supremacy)
 * Standards: ÖNORM EN 62676-4 (DORI), ÖNORM EN 50131, DSGVO Art. 5/6/13, GewO 1994
 * ==============================================================================
 *
 * COLOR PHILOSOPHY & PSYCHOLOGY FOR SECURITY TECHNOLOGY:
 * 1. Deep Obsidian Slate Navy (#070d19 / #0f172a / #1f2a3c):
 *    Unwavering stability, high discretion, institutional authority (LPD/Courts/Police).
 *    Calms the heart rate, prevents hysteria, and projects technical solidity.
 * 2. Precision Optical Cyan (#007acc / #0284c7 / #38bdf8):
 *    Optical resolution, 4K Starlight sensor precision, PoE/IP connectivity.
 *    Provides clear visual hierarchy without aggressive alarmism.
 * 3. Platinum Shield & Frost Whites (#ffffff / #f8fafc / #f1f5f9 / #e2e8f0):
 *    Radical transparency, legal hygiene, uncluttered readability.
 * 4. Norm-Compliant Semantic Spectrum:
 *    - Encrypted / Verified (#059669): Active hardware encryption, DSGVO compliance, GISA verification.
 *    - Norm Notice / Amber (#d97706): Art. 13 DSGVO hints, tolerance thresholds, calibration cycles.
 *    - Sensor Alert (#dc2626): Restricted solely to tamper switch & physical alarm indications.
 *
 * ZERO-JS & PROTOCOL COMPLIANCE:
 * - Golden Ratio Scale (phi = 1.618)
 * - visiON Brand Shift (+2.6px vertical lift on 'ON')
 * - Fluid Clamp Typography (360px mobile to 4K desktop)
 * - WCAG AAA Contrast Ratio (>= 7:1)
 * ==============================================================================
 */

/* ==============================================================================
   1. ROOT VARIABLES & SECURITY TOKENS
   ============================================================================== */

:root,
[data-theme="protect-vision-security"],
[data-theme="modern-security"] {
  /* --- Primary: Deep Obsidian Slate Navy (Stabilität, Diskretion, Schutz) --- */
  --pv-navy-950: #070d19;
  --pv-navy-900: #0f172a;
  --pv-navy-850: #141f36;
  --pv-navy-800: #1e293b;
  --pv-navy-700: #334155;
  --pv-navy-600: #475569;
  --pv-navy-500: #64748b;

  /* --- Secondary: Tactical Harbor & Armor Blue (Präzise Tiefe) --- */
  --pv-blue-950: #0b1325;
  --pv-blue-900: #101c36;
  --pv-blue-800: #182b52;
  --pv-blue-700: #253b5c;
  --pv-blue-600: #2c476f;
  --pv-blue-500: #3b5f94;

  /* --- Accent: Precision Emerald & Security Green (Sicherheit, Schutz, Freigabe) --- */
  --pv-cyan-950: #022c22;
  --pv-cyan-900: #064e3b;
  --pv-cyan-800: #065f46;
  --pv-cyan-700: #047857;
  --pv-cyan-600: #059669; /* Protect Vision Core Emerald Green */
  --pv-cyan-500: #10b981;
  --pv-cyan-400: #34d399;
  --pv-cyan-300: #6ee7b7;
  --pv-cyan-200: #a7f3d0;
  --pv-cyan-100: #d1fae5;
  --pv-cyan-50:  #ecfdf5;
  --pv-cyan-glow: rgba(16, 185, 129, 0.28);
  --pv-cyan-border: rgba(16, 185, 129, 0.35);

  /* --- Surfaces: Platinum Clean & Frost Slate (Transparenz, Neutralität) --- */
  --pv-surface-pure: #ffffff;
  --pv-surface-frost: #f8fafc;
  --pv-surface-elevated: #f1f5f9;
  --pv-surface-card: #ffffff;
  --pv-surface-border: #e2e8f0;
  --pv-surface-border-subtle: #cbd5e1;

  /* --- Text & Legibility (WCAG AAA) --- */
  --pv-text-headline: #070d19;
  --pv-text-body: #1e293b;
  --pv-text-muted: #475569;
  --pv-text-subtle: #64748b;
  --pv-text-on-dark-headline: #ffffff;
  --pv-text-on-dark-body: #f1f5f9;
  --pv-text-on-dark-muted: #cbd5e1;

  /* --- Semantic: DORI-Kriterien gem. ÖNORM EN 62676-4 --- */
  --pv-dori-ident-bg: #e0f2fe;
  --pv-dori-ident-text: #0369a1;
  --pv-dori-ident-border: #7dd3fc;
  --pv-dori-ident-px: ">= 250 px/m";

  --pv-dori-recog-bg: #eff6ff;
  --pv-dori-recog-text: #1d4ed8;
  --pv-dori-recog-border: #93c5fd;
  --pv-dori-recog-px: ">= 125 px/m";

  --pv-dori-obs-bg: #f5f3ff;
  --pv-dori-obs-text: #5b21b6;
  --pv-dori-obs-border: #c4b5fd;
  --pv-dori-obs-px: ">= 62.5 px/m";

  --pv-dori-det-bg: #f8fafc;
  --pv-dori-det-text: #334155;
  --pv-dori-det-border: #cbd5e1;
  --pv-dori-det-px: ">= 25 px/m";

  /* --- Semantic: Compliance & Status --- */
  --pv-status-verified-bg: #ecfdf5;
  --pv-status-verified-text: #065f46;
  --pv-status-verified-border: #6ee7b7;
  --pv-status-verified-dot: #10b981;

  --pv-status-notice-bg: #fffbeb;
  --pv-status-notice-text: #92400e;
  --pv-status-notice-border: #fcd34d;
  --pv-status-notice-dot: #f59e0b;

  --pv-status-tamper-bg: #fef2f2;
  --pv-status-tamper-text: #991b1b;
  --pv-status-tamper-border: #fca5a5;
  --pv-status-tamper-dot: #ef4444;

  /* --- Shadows & Depth: Precision Edge Shading (Keine Weichzeichner-Matschigkeit) --- */
  --pv-shadow-sm: 0 1px 2px 0 rgba(7, 13, 25, 0.05);
  --pv-shadow-md: 0 4px 6px -1px rgba(7, 13, 25, 0.08), 0 2px 4px -2px rgba(7, 13, 25, 0.06);
  --pv-shadow-lg: 0 10px 15px -3px rgba(7, 13, 25, 0.1), 0 4px 6px -4px rgba(7, 13, 25, 0.08);
  --pv-shadow-xl: 0 20px 25px -5px rgba(7, 13, 25, 0.12), 0 8px 10px -6px rgba(7, 13, 25, 0.08);
  --pv-shadow-cyber: 0 0 0 1px rgba(5, 150, 105, 0.35), 0 8px 24px -4px rgba(5, 150, 105, 0.2);

  /* --- Border Radius: Technische Präzision (8px bis 16px, keine Ballon-Rundungen) --- */
  --pv-radius-xs: 4px;
  --pv-radius-sm: 6px;
  --pv-radius-md: 10px;
  --pv-radius-lg: 14px;
  --pv-radius-pill: 9999px;

  /* --- Fluid Typography Scales (Clamp Math) --- */
  --pv-font-hero: clamp(2.25rem, 1.8rem + 2.25vw, 3.75rem);
  --pv-font-h1: clamp(1.85rem, 1.5rem + 1.75vw, 3rem);
  --pv-font-h2: clamp(1.5rem, 1.25rem + 1.25vw, 2.25rem);
  --pv-font-h3: clamp(1.25rem, 1.1rem + 0.75vw, 1.75rem);
  --pv-font-body: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --pv-font-small: clamp(0.85rem, 0.8rem + 0.2vw, 0.925rem);
}

/* ==============================================================================
   2. VISI-ON WORDPLAY & BRANDING ARCHITECTURE
   ============================================================================== */

/**
 * visiON-Wortspiel:
 * Die Silbe 'ON' ist visuell und mathematisch um exakt 2.6px angehoben.
 * Signalisiert permanentes Monitoring, aktive Sensorik und ständige Betriebsbereitschaft.
 */
.pv-brand-vision {
  display: inline-flex;
  align-items: baseline;
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--pv-navy-950);
}

.pv-brand-vision .pv-brand-on,
.brand-vision-on {
  display: inline-block;
  transform: translateY(-2.6px);
  color: var(--pv-cyan-600);
  text-shadow: 0 0 16px var(--pv-cyan-glow);
  font-weight: 900;
}

/* On Dark Backgrounds */
.bg-navy-900 .pv-brand-vision,
.bg-slate-900 .pv-brand-vision,
[class*="bg-[#070d19]"] .pv-brand-vision {
  color: #ffffff;
}

.bg-navy-900 .pv-brand-vision .pv-brand-on,
.bg-slate-900 .pv-brand-vision .pv-brand-on,
[class*="bg-[#070d19]"] .pv-brand-vision .pv-brand-on {
  color: var(--pv-cyan-400);
  text-shadow: 0 0 20px rgba(52, 211, 153, 0.45);
}

/* ==============================================================================
   3. BASE THEME SURFACE STYLING & NAVIGATION
   ============================================================================== */

[data-theme="protect-vision-security"],
[data-theme="modern-security"] {
  background-color: var(--pv-surface-frost);
  color: var(--pv-text-body);
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
}

/* Sticky Precision Nav */
[data-theme="protect-vision-security"] nav,
[data-theme="modern-security"] nav {
  background: rgba(255, 255, 255, 0.96) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--pv-surface-border) !important;
  box-shadow: 0 2px 10px rgba(7, 13, 25, 0.04) !important;
}

/* High-Contrast Interactive Links */
[data-theme="protect-vision-security"] a:focus-visible,
[data-theme="modern-security"] a:focus-visible,
[data-theme="protect-vision-security"] button:focus-visible,
[data-theme="modern-security"] button:focus-visible {
  outline: 3px solid var(--pv-cyan-600) !important;
  outline-offset: 3px !important;
  border-radius: var(--pv-radius-xs) !important;
}

/* ==============================================================================
   4. TYPOGRAPHY & GOLDEN RATIO HEADING ENGINE
   ============================================================================== */

[data-theme="protect-vision-security"] h1,
[data-theme="modern-security"] h1 {
  font-size: var(--pv-font-h1);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.15;
  color: var(--pv-navy-950);
}

[data-theme="protect-vision-security"] h2,
[data-theme="modern-security"] h2 {
  font-size: var(--pv-font-h2);
  font-weight: 750;
  letter-spacing: -0.03em;
  line-height: 1.25;
  color: var(--pv-navy-900);
}

[data-theme="protect-vision-security"] h3,
[data-theme="modern-security"] h3 {
  font-size: var(--pv-font-h3);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.35;
  color: var(--pv-navy-850);
}

/* Dark Container Typography Safeguard (Guaranteed WCAG AAA) */
.bg-slate-900 h1, .bg-slate-900 h2, .bg-slate-900 h3,
.bg-slate-950 h1, .bg-slate-950 h2, .bg-slate-950 h3,
[class*="bg-[#070d19]"] h1, [class*="bg-[#070d19]"] h2, [class*="bg-[#070d19]"] h3,
[class*="from-slate-900"] h1, [class*="from-slate-900"] h2, [class*="from-slate-900"] h3 {
  color: #ffffff !important;
}

.bg-slate-900 p, .bg-slate-950 p,
[class*="bg-[#070d19]"] p,
[class*="from-slate-900"] p {
  color: var(--pv-text-on-dark-body) !important;
}

/* ==============================================================================
   5. DORI-CRITERIA STYLING (ÖNORM EN 62676-4)
   ============================================================================== */

.pv-dori-card {
  border-radius: var(--pv-radius-md);
  border: 1px solid var(--pv-surface-border);
  background: var(--pv-surface-pure);
  padding: 1.25rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.pv-dori-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--pv-shadow-md);
}

.pv-dori-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.25rem 0.625rem;
  border-radius: var(--pv-radius-pill);
  border-width: 1px;
  border-style: solid;
}

/* Identification (>= 250 px/m) */
.pv-dori-ident {
  background-color: var(--pv-dori-ident-bg);
  color: var(--pv-dori-ident-text);
  border-color: var(--pv-dori-ident-border);
}

/* Recognition (>= 125 px/m) */
.pv-dori-recog {
  background-color: var(--pv-dori-recog-bg);
  color: var(--pv-dori-recog-text);
  border-color: var(--pv-dori-recog-border);
}

/* Observation (>= 62.5 px/m) */
.pv-dori-obs {
  background-color: var(--pv-dori-obs-bg);
  color: var(--pv-dori-obs-text);
  border-color: var(--pv-dori-obs-border);
}

/* Detection (>= 25 px/m) */
.pv-dori-det {
  background-color: var(--pv-dori-det-bg);
  color: var(--pv-dori-det-text);
  border-color: var(--pv-dori-det-border);
}

/* ==============================================================================
   6. ZWEISTUFIGES KUNDENMODELL (SELBERMACHER VS. SCHLÜSSELFERTIG)
   ============================================================================== */

.pv-model-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .pv-model-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.pv-model-card {
  position: relative;
  background: var(--pv-surface-pure);
  border: 1px solid var(--pv-surface-border);
  border-radius: var(--pv-radius-lg);
  padding: 2rem;
  box-shadow: var(--pv-shadow-sm);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.pv-model-card.pv-model-diy {
  border-top: 4px solid var(--pv-cyan-600);
}

.pv-model-card.pv-model-fullservice {
  border-top: 4px solid var(--pv-navy-900);
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

.pv-model-badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.8125rem;
  font-weight: 700;
  padding: 0.35rem 0.75rem;
  border-radius: var(--pv-radius-sm);
  margin-bottom: 1rem;
  width: fit-content;
}

.pv-model-diy .pv-model-badge {
  background: var(--pv-cyan-50);
  color: var(--pv-cyan-700);
  border: 1px solid var(--pv-cyan-200);
}

.pv-model-fullservice .pv-model-badge {
  background: var(--pv-navy-950);
  color: #ffffff;
}

/* ==============================================================================
   7. TRUST ANCHORS & POLIZEIINSPEKTIONEN (POIS GEM. PROTOKOLL)
   ============================================================================== */

/**
 * Strikt gem. Richtlinie:
 * Keine Recyclinghöfe, keine Mistplätze.
 * Ausschließlich Polizeiinspektionen (LPD Wien / LKA NÖ), Notruf 133 / 112.
 */
.pv-trust-police-card {
  background: var(--pv-surface-pure);
  border: 1px solid var(--pv-surface-border);
  border-left: 4px solid var(--pv-cyan-600);
  border-radius: var(--pv-radius-md);
  padding: 1.25rem 1.5rem;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.pv-trust-police-icon {
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--pv-radius-sm);
  background: var(--pv-cyan-50);
  border: 1px solid var(--pv-cyan-100);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--pv-cyan-700);
}

/* ==============================================================================
   8. ZERO-JS INTERACTION PATTERNS (ARCHITECTUM MANDAT)
   ============================================================================== */

/* Zero-JS FAQ Accordion with Pure CSS Details/Summary */
details.pv-accordion {
  border: 1px solid var(--pv-surface-border);
  border-radius: var(--pv-radius-md);
  background: var(--pv-surface-pure);
  margin-bottom: 0.75rem;
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

details.pv-accordion[open] {
  border-color: var(--pv-cyan-500);
  box-shadow: var(--pv-shadow-sm);
}

details.pv-accordion summary {
  list-style: none;
  cursor: pointer;
  padding: 1.25rem 1.5rem;
  font-weight: 700;
  font-size: 1.0625rem;
  color: var(--pv-navy-950);
  display: flex;
  align-items: center;
  justify-content: space-between;
  user-select: none;
}

details.pv-accordion summary::-webkit-details-marker {
  display: none;
}

details.pv-accordion summary .pv-chevron {
  width: 1.25rem;
  height: 1.25rem;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  color: var(--pv-cyan-600);
}

details.pv-accordion[open] summary .pv-chevron {
  transform: rotate(180deg);
}

details.pv-accordion .pv-accordion-content {
  padding: 0 1.5rem 1.5rem 1.5rem;
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--pv-navy-700);
  border-top: 1px solid var(--pv-surface-elevated);
  margin-top: 0.25rem;
}

/* Zero-JS Form Affordance & Validation */
.pv-form input:not(:placeholder-shown):user-invalid,
.pv-form textarea:not(:placeholder-shown):user-invalid,
.pv-form select:user-invalid {
  border-color: var(--pv-status-tamper-dot) !important;
  background-color: var(--pv-status-tamper-bg) !important;
}

.pv-form input:not(:placeholder-shown):valid,
.pv-form textarea:not(:placeholder-shown):valid,
.pv-form select:valid {
  border-color: var(--pv-status-verified-dot) !important;
  background-color: var(--pv-status-verified-bg) !important;
}

/* ==============================================================================
   9. CALL-TO-ACTION BUTTONS & TOUCH-TARGET PROTECTION
   ============================================================================== */

.pv-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 48px;
  padding: 0.75rem 1.75rem;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #ffffff !important;
  background-color: var(--pv-cyan-600);
  border: 1px solid var(--pv-cyan-700);
  border-radius: var(--pv-radius-sm);
  box-shadow: 0 1px 3px rgba(5, 150, 105, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.pv-btn-primary:hover {
  background-color: var(--pv-cyan-700);
  box-shadow: 0 4px 12px rgba(5, 150, 105, 0.4);
  transform: translateY(-1px);
}

.pv-btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 48px;
  padding: 0.75rem 1.75rem;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--pv-navy-950) !important;
  background-color: var(--pv-surface-pure);
  border: 1px solid var(--pv-surface-border-subtle);
  border-radius: var(--pv-radius-sm);
  box-shadow: var(--pv-shadow-sm);
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.pv-btn-secondary:hover {
  background-color: var(--pv-surface-elevated);
  border-color: var(--pv-navy-700);
  transform: translateY(-1px);
}

/* ==============================================================================
   10. MOBILE SAFARI ZOOM & RESPONSIVE COMPLIANCE
   ============================================================================== */

@media (max-width: 768px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]):not([type="hidden"]),
  select,
  textarea {
    font-size: 16px !important; /* Prevents auto-zoom in iOS Safari */
  }
}