/* =============================
   Phantasm Shield — style.css
   Design: geometric_structured
   Author: Senior CSS Dev & UI Designer
   Requirements: Mobile-first, flexbox-only, strong contrast, precise spacing
   ============================= */

/* -----------------------------
   0) RESET & BASE NORMALIZE
   ----------------------------- */
* { box-sizing: border-box; }
*::before, *::after { box-sizing: inherit; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: Verdana, Geneva, Tahoma, sans-serif; color: #2E3A44; background: #FFFFFF; line-height: 1.6; }
img { max-width: 100%; height: auto; display: block; }
a { color: #C8743C; text-decoration: none; }
a:hover, a:focus { color: #A65F31; }
:focus-visible { outline: 3px solid #C8743C; outline-offset: 2px; }

/* Selection */
::selection { background: #C8743C; color: #FFFFFF; }

/* -----------------------------
   1) CSS VARIABLES (with fallbacks)
   ----------------------------- */
:root {
  --clr-primary: #2E3A44; /* Slate */
  --clr-secondary: #C8743C; /* Copper */
  --clr-accent: #F2F5F7; /* Mist */
  --clr-border: #D7DEE3; /* Light slate */
  --clr-body: #2E3A44; /* Fallback */
  --shadow-100: 0 1px 0 rgba(0,0,0,0.04);
  --shadow-200: 0 2px 6px rgba(0,0,0,0.06);
  --shadow-300: 0 6px 18px rgba(0,0,0,0.10);
}

/* -----------------------------
   2) TYPOGRAPHY — geometric, angular
   ----------------------------- */
h1, h2, h3, h4 { font-family: "Trebuchet MS", "Segoe UI", Arial, sans-serif; line-height: 1.2; color: var(--clr-primary); text-transform: uppercase; letter-spacing: 0.5px; }
h1 { font-size: 30px; margin: 0 0 16px; }
h2 { font-size: 24px; margin: 0 0 14px; }
h3 { font-size: 18px; margin: 12px 0 8px; }
p { font-size: 16px; margin: 0 0 12px; }
small { font-size: 14px; }
strong { font-weight: 700; }

/* Lists — geometric markers */
ul, ol { margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
ul { list-style: none; }
ul li { position: relative; padding-left: 20px; display: flex; align-items: flex-start; gap: 10px; }
ul li::before { content: ""; position: relative; top: 8px; width: 10px; height: 10px; min-width: 10px; border: 2px solid var(--clr-primary); transform: rotate(45deg); margin-right: 4px; }
ul li img { width: 18px; height: 18px; object-fit: contain; margin-right: 4px; }
ol { padding-left: 20px; }

/* -----------------------------
   3) LAYOUT BASICS (FLEXBOX ONLY)
   ----------------------------- */
.container { width: 100%; display: flex; justify-content: center; padding: 0 16px; }
.content-wrapper { width: 100%; max-width: 1200px; display: flex; flex-direction: column; gap: 20px; }

main { display: flex; flex-direction: column; gap: 40px; }
section { display: flex; flex-direction: column; padding: 40px 0; border-top: 1px solid var(--clr-accent); }

/* MANDATORY SPACING & ALIGNMENT CLASSES */
.section { margin-bottom: 60px; padding: 40px 20px; display: flex; flex-direction: column; }
.card-container { display: flex; flex-wrap: wrap; gap: 24px; }
.card { margin-bottom: 20px; position: relative; display: flex; flex-direction: column; }
.content-grid { display: flex; flex-wrap: wrap; gap: 20px; justify-content: space-between; }
.text-image-section { display: flex; align-items: center; gap: 30px; flex-wrap: wrap; }
.testimonial-card { display: flex; align-items: center; gap: 20px; padding: 20px; }
.feature-item { display: flex; flex-direction: column; align-items: flex-start; gap: 15px; }

/* Ensure min spacing between content blocks */
.text-section > * + * { margin-top: 10px; }

/* -----------------------------
   4) HEADER & NAVIGATION
   ----------------------------- */
header { position: sticky; top: 0; z-index: 1000; background: #FFFFFF; border-bottom: 1px solid var(--clr-accent); box-shadow: var(--shadow-100); }
header .content-wrapper { flex-direction: row; align-items: center; justify-content: space-between; padding: 14px 0; }
.logo { display: inline-flex; align-items: center; }
.logo img { height: 38px; width: auto; }

/* Desktop nav hidden by default (mobile-first) */
.main-nav { display: none; align-items: center; gap: 14px; }
.main-nav a { color: var(--clr-primary); padding: 8px 10px; border: 2px solid transparent; display: inline-flex; align-items: center; height: 36px; border-radius: 2px; text-transform: uppercase; font-size: 14px; letter-spacing: 0.4px; }
.main-nav a:hover { border-color: var(--clr-accent); }
.main-nav a[aria-current="page"] { border-color: var(--clr-secondary); color: var(--clr-secondary); }

/* Mobile hamburger */
.mobile-menu-toggle { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border: 2px solid var(--clr-primary); background: transparent; color: var(--clr-primary); border-radius: 2px; font-size: 20px; cursor: pointer; transition: transform 160ms ease, background 160ms ease; }
.mobile-menu-toggle:hover { background: var(--clr-accent); transform: translateY(-1px); }

/* Mobile menu overlay */
.mobile-menu { position: fixed; inset: 0 0 0 auto; right: 0; width: 100%; max-width: 92%; height: 100%; background: #FFFFFF; transform: translateX(100%); transition: transform 280ms ease; box-shadow: var(--shadow-300); z-index: 1200; display: flex; flex-direction: column; }
.mobile-menu.active, .mobile-menu[aria-hidden="false"] { transform: translateX(0); }
.mobile-menu-close { position: absolute; top: 10px; right: 12px; width: 40px; height: 40px; border: 2px solid var(--clr-primary); background: #FFFFFF; color: var(--clr-primary); border-radius: 2px; font-size: 18px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.mobile-nav { margin-top: 60px; display: flex; flex-direction: column; }
.mobile-nav a { padding: 16px 20px; border-bottom: 1px solid var(--clr-accent); color: var(--clr-primary); font-size: 16px; text-transform: uppercase; letter-spacing: 0.4px; }
.mobile-nav a:hover { background: var(--clr-accent); }

/* Show desktop nav on larger screens */
@media (min-width: 992px) {
  .mobile-menu-toggle { display: none; }
  .main-nav { display: flex; }
}

/* -----------------------------
   5) HERO SECTION — geometric + precise
   ----------------------------- */
.hero { background: var(--clr-accent); position: relative; overflow: hidden; }
.hero .content-wrapper { padding: 24px 0; }
.hero h1 { font-size: 28px; }
.hero p { max-width: 820px; }

/* Angular decorative accents */
.hero::before, .hero::after { content: ""; position: absolute; pointer-events: none; }
.hero::before { top: -40px; right: -60px; width: 220px; height: 220px; border: 3px solid var(--clr-secondary); transform: rotate(45deg); opacity: 0.12; }
.hero::after { bottom: -50px; left: -70px; width: 260px; height: 260px; border: 3px solid var(--clr-primary); transform: rotate(45deg); opacity: 0.08; }

/* CTA group */
.cta-group { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* Trust badges */
.trust-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; color: var(--clr-primary); }
.trust-badges img { width: 22px; height: 22px; }
.trust-badges span { font-size: 14px; text-transform: uppercase; letter-spacing: 0.4px; }

/* -----------------------------
   6) BUTTONS — angular, high-contrast
   ----------------------------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 42px; padding: 0 16px; border: 2px solid var(--clr-primary); background: transparent; color: var(--clr-primary); text-transform: uppercase; letter-spacing: 0.6px; font-weight: 700; border-radius: 2px; transition: background 180ms ease, color 180ms ease, transform 160ms ease, box-shadow 180ms ease; box-shadow: var(--shadow-100); }
.btn:hover { background: var(--clr-accent); transform: translateY(-1px); }

.btn-primary { background: var(--clr-secondary); border-color: var(--clr-secondary); color: #FFFFFF; }
.btn-primary:hover { background: #A65F31; border-color: #A65F31; box-shadow: var(--shadow-200); }

.btn-secondary { border-color: var(--clr-secondary); color: var(--clr-secondary); }
.btn-secondary:hover { background: rgba(200,116,60,0.08); }

/* -----------------------------
   7) TEXT BLOCKS & CARDS
   ----------------------------- */
.text-section { display: flex; flex-direction: column; gap: 10px; }

.card { background: #FFFFFF; border: 1px solid var(--clr-border); border-radius: 4px; box-shadow: var(--shadow-200); padding: 18px; }
.card .card-content { display: flex; flex-direction: column; justify-content: center; gap: 10px; }

/* Testimonial cards — light bg, dark text for contrast */
.testimonial-card { background: var(--clr-accent); border: 1px solid var(--clr-border); border-radius: 4px; box-shadow: var(--shadow-200); color: var(--clr-primary); }
.testimonial-card p { margin: 0; }

/* Content grids (flex only) */
.content-grid > * { flex: 1 1 280px; min-width: 260px; }

/* -----------------------------
   8) FOOTER
   ----------------------------- */
footer { background: var(--clr-primary); color: #FFFFFF; }
footer .content-wrapper { padding: 26px 0; }
footer h3 { color: #FFFFFF; }
footer p { color: #EAF0F3; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 12px 16px; }
.footer-nav a { color: #EAF0F3; padding: 6px 8px; border: 2px solid transparent; border-radius: 2px; text-transform: uppercase; letter-spacing: 0.4px; font-size: 14px; }
.footer-nav a:hover { border-color: rgba(255,255,255,0.25); }
.footer-nav a[aria-current="page"] { border-color: var(--clr-secondary); color: var(--clr-secondary); }

/* -----------------------------
   9) RESPONSIVE BEHAVIOR
   ----------------------------- */
@media (max-width: 768px) {
  .text-image-section { flex-direction: column; align-items: center; }
}

@media (min-width: 768px) {
  h1 { font-size: 36px; }
  h2 { font-size: 28px; }
  h3 { font-size: 20px; }
  .hero h1 { font-size: 42px; }
  .content-wrapper { gap: 24px; }
}

@media (min-width: 1200px) {
  .hero h1 { font-size: 48px; }
}

/* -----------------------------
   10) UTILITIES & MICRO INTERACTIONS
   ----------------------------- */
.shadow-100 { box-shadow: var(--shadow-100); }
.shadow-200 { box-shadow: var(--shadow-200); }
.shadow-300 { box-shadow: var(--shadow-300); }

.muted { color: #667684; }
.text-center { text-align: center; }

/* Links in text blocks */
.text-section a { border-bottom: 2px solid transparent; }
.text-section a:hover { border-color: var(--clr-secondary); }

/* Ensure adequate spacing between cards/sections */
section .testimonial-card + .testimonial-card { margin-top: 20px; }

/* -----------------------------
   11) ACCESSIBILITY & STATES
   ----------------------------- */
[aria-current="page"], .is-active { font-weight: 700; }

/* -----------------------------
   12) COOKIE CONSENT BANNER & MODAL
   ----------------------------- */
.cookie-banner { position: fixed; left: 16px; right: 16px; bottom: 16px; background: #FFFFFF; color: var(--clr-primary); border: 1px solid var(--clr-border); box-shadow: var(--shadow-300); border-radius: 6px; padding: 16px; display: flex; flex-direction: column; gap: 12px; transform: translateY(140%); transition: transform 260ms ease; z-index: 1500; }
.cookie-banner.show { transform: translateY(0); }
.cookie-banner .cookie-title { font-family: "Trebuchet MS", Arial, sans-serif; text-transform: uppercase; font-size: 16px; letter-spacing: 0.4px; }
.cookie-banner .cookie-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.cookie-btn { display: inline-flex; align-items: center; justify-content: center; height: 38px; padding: 0 14px; border: 2px solid var(--clr-primary); background: transparent; color: var(--clr-primary); text-transform: uppercase; letter-spacing: 0.5px; font-weight: 700; border-radius: 2px; cursor: pointer; }
.cookie-btn.primary { background: var(--clr-secondary); border-color: var(--clr-secondary); color: #FFFFFF; }
.cookie-btn.secondary { border-color: var(--clr-secondary); color: var(--clr-secondary); }
.cookie-btn.neutral { background: var(--clr-accent); }
.cookie-btn:hover { filter: brightness(0.98); transform: translateY(-1px); }

/* Cookie modal overlay */
.cookie-modal { position: fixed; inset: 0; background: rgba(46,58,68,0.62); display: none; align-items: center; justify-content: center; z-index: 1600; padding: 20px; }
.cookie-modal.open { display: flex; }
.cookie-modal .cookie-modal-content { background: #FFFFFF; border: 1px solid var(--clr-border); border-radius: 6px; box-shadow: var(--shadow-300); width: 100%; max-width: 720px; display: flex; flex-direction: column; gap: 16px; padding: 18px; }
.cookie-modal .cookie-modal-header { display: flex; align-items: center; justify-content: space-between; }
.cookie-modal .cookie-options { display: flex; flex-direction: column; gap: 12px; }
.cookie-option { display: flex; align-items: center; justify-content: space-between; padding: 12px; border: 1px solid var(--clr-accent); border-radius: 4px; }
.cookie-option .label { display: flex; flex-direction: column; }
.cookie-option .toggle { display: inline-flex; align-items: center; gap: 8px; }
.cookie-option .toggle input { width: 42px; height: 22px; appearance: none; border: 2px solid var(--clr-primary); border-radius: 22px; position: relative; background: #fff; }
.cookie-option .toggle input::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--clr-primary); transition: transform 180ms ease; }
.cookie-option .toggle input:checked { background: var(--clr-secondary); border-color: var(--clr-secondary); }
.cookie-option .toggle input:checked::after { transform: translateX(20px); background: #fff; }
.cookie-modal .cookie-modal-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }

/* -----------------------------
   13) PAGE-SPECIFIC TWEAKS
   ----------------------------- */
/* Contact lists with icons */
.text-section li img + span, .text-section li img + a { margin-left: 4px; }

/* Hero spacing for dense content */
.hero .cta-group .btn { min-width: 180px; }

/* Improve readability in long-legal pages */
[data-legal="true"], body:has(main .hero h1:contains("Datenschutz")) {} /* placeholder for potential JS hook; harmless */

/* -----------------------------
   14) FLEXBOX ONLY ENFORCEMENT NOTES
   (All layout containers above use display:flex; No CSS Grid/Columns used.)
   ----------------------------- */

/* -----------------------------
   15) PRINT BASICS
   ----------------------------- */
@media print {
  .mobile-menu, .mobile-menu-toggle, .cookie-banner, .cookie-modal { display: none !important; }
  a { color: #000; text-decoration: underline; }
}