/* =========================================================
   Fiery Arc Autoexperten – Industrial Modern UI
   Single source of truth CSS for all pages
   Aesthetic: dark, metallic, urban; strong contrast; flex-only layouts
   ========================================================= */

/* -----------------------------
   CSS Reset & Base Normalize
------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { line-height: 1.15; -webkit-text-size-adjust: 100%; }
body { margin: 0; }
h1, h2, h3, h4, h5, h6, p, ul, ol, figure { margin: 0 0 16px 0; }
ul, ol { padding-left: 20px; }
img { border-style: none; max-width: 100%; height: auto; display: block; }
a { background-color: transparent; text-decoration: none; }
button { font: inherit; background: transparent; border: 0; cursor: pointer; color: inherit; }
:focus { outline: none; }
:focus-visible { outline: 2px solid #E34F1C; outline-offset: 2px; }

/* -----------------------------
   Design Tokens (CSS Variables)
------------------------------ */
:root {
  --primary: #0F2741; /* Brand Navy */
  --secondary: #E34F1C; /* Brand Orange */
  --accent: #F5F7FA; /* Light surface */
  --bg: #0E141B; /* Urban coal */
  --surface: #141B23; /* Section surface */
  --surface-2: #1A232D; /* Alt surface */
  --ink: #E6ECF2; /* Primary text on dark */
  --ink-soft: #B8C3CF; /* Muted text */
  --ink-strong: #FFFFFF; /* Strong headings */
  --metal: #98A4AE; /* Metallic accent */
  --metal-deep: #6E7A84; /* Deeper metal */
  --border: #2A3540; /* Card borders */
  --shadow-1: 0 6px 20px rgba(0,0,0,0.35);
  --shadow-2: 0 10px 30px rgba(0,0,0,0.45);
  --radius-s: 6px;
  --radius-m: 10px;
  --radius-l: 14px;
  --gap-1: 8px;
  --gap-2: 12px;
  --gap-3: 16px;
  --gap-4: 20px;
  --gap-5: 24px;
  --gap-6: 32px;
  --gap-7: 40px;
}

/* Font Stacks */
:root { --display-font: "Trebuchet MS", "Segoe UI", Arial, sans-serif; --body-font: Verdana, Geneva, Arial, sans-serif; }

/* -----------------------------
   Global Base Styles
------------------------------ */
body {
  font-family: var(--body-font);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3 {
  font-family: var(--display-font);
  color: var(--ink-strong);
  letter-spacing: 0.2px;
}

h1 { font-size: 32px; line-height: 1.25; margin-bottom: 16px; }
h2 { font-size: 24px; line-height: 1.3; margin: 6px 0 16px; border-left: 4px solid var(--secondary); padding-left: 12px; }
h3 { font-size: 18px; line-height: 1.35; margin-top: 8px; color: #F2F5F8; }

p, li, address { color: var(--ink); }
.small, small { font-size: 12px; color: var(--ink-soft); }
strong { color: #FFFFFF; font-weight: 700; }

/* Links */
a { color: var(--secondary); border-bottom: 1px dotted rgba(227,79,28,0.6); transition: color .2s ease, background-color .2s ease, box-shadow .2s ease, transform .2s ease; }
a:hover { color: #FF6633; border-bottom-color: rgba(255,102,51,0.8); }
a:active { transform: translateY(1px); }

/* Lists styling – subtle industrial accent */
ul li, ol li { margin-bottom: 8px; }
ul { list-style: disc; }
ol { list-style: decimal; }

/* Containers & Layout – Flex only */
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 0 20px;
}
.content-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--gap-5);
  width: 100%;
  max-width: 1200px;
}

/* Sections */
section { background: var(--surface); border-top: 1px solid rgba(255,255,255,0.04); }
main > section:nth-of-type(even) { background: var(--surface-2); }

/* Mandatory spacing class (even if not used by HTML) */
.section { margin-bottom: 60px; padding: 40px 20px; }
.card-container { display: flex; flex-wrap: wrap; gap: 24px; }
.card { margin-bottom: 20px; position: relative; }
.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; }

/* Text blocks */
.text-section { max-width: 950px; display: flex; flex-direction: column; gap: var(--gap-3); }
.subheadline { color: var(--ink); opacity: 0.9; font-size: 16px; }

/* -----------------------------
   Header & Navigation
------------------------------ */
header { position: sticky; top: 0; z-index: 1000; background: var(--primary); border-bottom: 1px solid #162F4D; box-shadow: var(--shadow-1); }
header .container { padding-top: 12px; padding-bottom: 12px; }
header .content-wrapper { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--gap-4); }

.logo { display: flex; align-items: center; gap: 10px; color: #FFFFFF; }
.logo-text { font-family: var(--display-font); font-weight: 700; letter-spacing: 0.8px; color: #FFFFFF; text-transform: uppercase; font-size: 16px; text-shadow: 0 1px 0 rgba(0,0,0,0.3); }

/* Desktop main nav */
.main-nav { display: none; align-items: center; gap: 18px; }
.main-nav a { color: #EAF0F6; padding: 10px 6px; border-bottom: 2px solid transparent; }
.main-nav a:hover { color: #FFFFFF; border-bottom-color: var(--secondary); }

/* Header CTAs */
.header-cta { display: none; align-items: center; gap: 12px; }
.header-cta a { display: inline-flex; align-items: center; justify-content: center; padding: 10px 16px; border-radius: var(--radius-s); border: 1px solid rgba(255,255,255,0.18); color: #FFFFFF; background: rgba(255,255,255,0.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05); }
.header-cta a:hover { background: var(--secondary); border-color: var(--secondary); color: #111; box-shadow: 0 6px 14px rgba(227,79,28,0.35); }
.header-cta a:active { transform: translateY(1px); }

/* Mobile Menu Trigger */
.mobile-menu-toggle { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; color: #FFFFFF; border: 1px solid rgba(255,255,255,0.2); border-radius: var(--radius-s); transition: background .2s ease, border-color .2s ease; }
.mobile-menu-toggle:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.35); }

/* Mobile Menu Overlay */
.mobile-menu { position: fixed; top: 0; right: 0; bottom: 0; width: 86%; max-width: 360px; background: #0D1A28; box-shadow: var(--shadow-2); transform: translateX(100%); transition: transform .35s ease; z-index: 1100; display: flex; flex-direction: column; padding: 16px; border-left: 1px solid #173652; }
.mobile-menu.open { transform: translateX(0); }
.mobile-menu-close { align-self: flex-end; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; color: #FFFFFF; border: 1px solid rgba(255,255,255,0.2); border-radius: var(--radius-s); margin-bottom: 8px; }
.mobile-menu-close:hover { background: rgba(255,255,255,0.08); }
.mobile-nav { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.mobile-nav a { display: flex; align-items: center; padding: 12px; border-radius: var(--radius-s); color: #EAF0F6; background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.07); }
.mobile-nav a:hover { background: rgba(227,79,28,0.12); color: #FFFFFF; border-color: rgba(227,79,28,0.45); }

/* -----------------------------
   Sections & Content Styling
------------------------------ */
main section .container { padding-top: 28px; padding-bottom: 28px; }

/* Card-like groupings using industrial edges */
.content-wrapper > .text-section, .content-wrapper > ul.text-section, .content-wrapper > ol.text-section {
  padding: 16px 16px 16px 18px;
  border: 1px solid var(--border);
  border-left: 4px solid var(--metal);
  border-radius: var(--radius-m);
  background: rgba(255,255,255,0.02);
  box-shadow: 0 1px 0 rgba(255,255,255,0.03) inset, var(--shadow-1);
}

/* CTA groups inside content (generic) */
.content-wrapper > p > a, .content-wrapper > div > a { margin-right: 12px; }

/* Testimonial Cards – MUST be light with dark text */
.testimonial-card {
  background: var(--accent);
  color: #0B1622;
  border: 1px solid #D9E1EA;
  border-left: 4px solid var(--secondary);
  border-radius: var(--radius-m);
  box-shadow: 0 4px 14px rgba(0,0,0,0.12);
}
.testimonial-card p { color: #0F2741; }
.testimonial-card strong { color: #0F2741; }

/* Address */
address { font-style: normal; color: var(--ink); opacity: 0.95; }

/* -----------------------------
   Footer
------------------------------ */
footer { background: #0B1220; border-top: 1px solid #16253A; }
footer .container { padding-top: 28px; padding-bottom: 28px; }
footer .content-wrapper { gap: 18px; }
footer nav { display: flex; flex-wrap: wrap; gap: 12px 18px; }
footer nav a { color: #CFE0F2; }
footer nav a:hover { color: #FFFFFF; }
footer .text-section { background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.06); border-radius: var(--radius-s); padding: 12px; }

/* -----------------------------
   Buttons (utility classes – optional)
------------------------------ */
.btn { display: inline-flex; align-items: center; justify-content: center; padding: 12px 18px; border-radius: var(--radius-s); border: 1px solid var(--metal); color: #0F2741; background: var(--accent); font-weight: 700; }
.btn:hover { background: #FFFFFF; box-shadow: 0 10px 20px rgba(255,255,255,0.08), 0 6px 12px rgba(0,0,0,0.2); color: #000;}
.btn-primary { background: var(--secondary); border-color: var(--secondary); color: #111; }
.btn-primary:hover { background: #FF6633; border-color: #FF6633; }
.btn-outline { background: transparent; color: var(--ink); border-color: var(--metal); }
.btn-outline:hover { background: rgba(255,255,255,0.06); }

/* -----------------------------
   Forms (basic normalization if used later)
------------------------------ */
input, textarea, select { background: #0F1823; border: 1px solid #223143; color: var(--ink); border-radius: var(--radius-s); padding: 10px 12px; width: 100%; }
input::placeholder, textarea::placeholder { color: #8FA3B5; }
input:focus, textarea:focus, select:focus { border-color: var(--secondary); box-shadow: 0 0 0 3px rgba(227,79,28,0.25); }
label { display: flex; margin-bottom: 6px; color: var(--ink); }

/* -----------------------------
   Cookie Consent Banner & Modal
------------------------------ */
.cookie-banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1200; display: none; }
.cookie-banner.show { display: flex; }
.cookie-banner .cookie-inner { display: flex; flex-direction: column; gap: 12px; width: 100%; background: #0C1621; color: var(--ink); border-top: 1px solid #1D3045; box-shadow: 0 -8px 24px rgba(0,0,0,0.4); padding: 16px 20px; }
.cookie-banner .cookie-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.cookie-banner .cookie-actions .btn { padding: 10px 14px; border-radius: var(--radius-s); color: rgb(255, 255, 255); }
.cookie-accept { background: var(--secondary); border-color: var(--secondary); color: #111; }
.cookie-reject { background: transparent; color: var(--ink); border: 1px solid var(--metal); }
.cookie-settings { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.15); color: #FFF; }
.cookie-settings:hover { background: rgba(255,255,255,0.1); }

/* Cookie Preferences Modal */
.cookie-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.55); z-index: 1300; opacity: 0; pointer-events: none; transition: opacity .25s ease; }
.cookie-overlay.show { opacity: 1; pointer-events: auto; }
.cookie-modal { position: fixed; right: 20px; bottom: 20px; left: 20px; max-width: 640px; margin: auto; z-index: 1310; transform: translateY(20px); opacity: 0; pointer-events: none; transition: transform .25s ease, opacity .25s ease; background: #0E1B28; color: var(--ink); border: 1px solid #1F3A54; border-radius: var(--radius-m); box-shadow: var(--shadow-2); display: flex; flex-direction: column; gap: 14px; padding: 18px; }
.cookie-modal.show { transform: translateY(0); opacity: 1; pointer-events: auto; }
.cookie-modal .cookie-header { display: flex; align-items: center; justify-content: space-between; }
.cookie-modal .cookie-body { display: flex; flex-direction: column; gap: 10px; }
.cookie-modal .cookie-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px; border: 1px solid #233A52; border-radius: var(--radius-s); background: rgba(255,255,255,0.03); }
.cookie-badge { font-size: 12px; color: #C6D3E0; background: #122338; border: 1px solid #2A4766; padding: 4px 8px; border-radius: 999px; }
.cookie-modal .cookie-footer { display: flex; justify-content: flex-end; gap: 10px; margin-top: 6px; }

/* Toggle (if implemented with checkbox + label.switch) */
.switch { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.switch .track { width: 44px; height: 24px; border-radius: 999px; background: #223244; border: 1px solid #2E455D; position: relative; display: flex; align-items: center; }
.switch .thumb { width: 18px; height: 18px; border-radius: 50%; background: #C8D3DE; margin-left: 3px; transition: transform .2s ease; }
input[type="checkbox"].switch-input { display: none; }
input[type="checkbox"].switch-input:checked + .track { background: #2B3F55; border-color: #375876; }
input[type="checkbox"].switch-input:checked + .track .thumb { transform: translateX(20px); background: #FFFFFF; }

/* -----------------------------
   Micro-interactions & Utilities
------------------------------ */
.shadow-1 { box-shadow: var(--shadow-1); }
.shadow-2 { box-shadow: var(--shadow-2); }
.metal-border { border: 1px solid var(--metal); }
.badge { display: inline-flex; align-items: center; padding: 4px 8px; border-radius: 999px; background: #101923; color: #C9D4DF; border: 1px solid #24384D; font-size: 12px; }

/* -----------------------------
   Responsive Rules
------------------------------ */
@media (min-width: 600px) {
  h1 { font-size: 36px; }
  h2 { font-size: 26px; }
  h3 { font-size: 20px; }
}

@media (min-width: 768px) {
  body { font-size: 17px; }
  .text-image-section { flex-direction: row; }
}

@media (max-width: 768px) {
  .text-image-section { flex-direction: column; }
}

@media (min-width: 992px) {
  body { font-size: 18px; }
  h1 { font-size: 40px; }
  h2 { font-size: 28px; }
  .main-nav { display: flex; }
  .header-cta { display: flex; }
  .mobile-menu-toggle { display: none; }
}

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

/* -----------------------------
   Accessibility & Reduced Motion
------------------------------ */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

/* -----------------------------
   Industrial Accents & Dividers
------------------------------ */
.divider { height: 1px; width: 100%; background: linear-gradient(to right, rgba(255,255,255,0.06), rgba(255,255,255,0.18), rgba(255,255,255,0.06)); }

/* -----------------------------
   Ensure adequate spacing between all elements
------------------------------ */
.content-wrapper > * + * { margin-top: 0; }
main section + section { border-top: 1px solid rgba(255,255,255,0.04); }

/* -----------------------------
   Contrast Assurance for testimonials
------------------------------ */
.testimonial-card, .testimonial-card * { color: #0F2741; }

/* -----------------------------
   Print-friendly tweaks
------------------------------ */
@media print {
  header, .mobile-menu, .cookie-banner, .cookie-overlay, .cookie-modal { display: none !important; }
  body { background: #FFFFFF; color: #000; }
  section { background: #FFFFFF; }
}