/* ===== CSS Reset & Base Normalize ===== */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: none; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0 0 16px; padding-left: 20px; }

/* ===== Brand & Industrial Modern Theme ===== */
:root {
  /* Brand */
  --brand-primary: #1E3A5F; /* Navy */
  --brand-secondary: #2F855A; /* Deep green */
  --brand-accent: #F2F5F9; /* Light accent for cards */

  /* Industrial modern palette (dark, metallic, urban) */
  --bg: #0F1318;            /* Charcoal base */
  --surface: #151B22;       /* Dark surface */
  --surface-2: #1B232C;     /* Elevated surface */
  --steel: #8A93A0;         /* Metallic text accent */
  --steel-2: #6F7782;       /* Muted metallic */
  --line: #2A323C;          /* Divider/steel line */
  --text: #E6ECF3;          /* Primary text */
  --text-muted: #B8C2CF;    /* Muted text */

  --success: #2F855A;
  --danger: #C0392B;
  --warning: #B58900;

  --radius: 10px;
  --radius-sm: 8px;
  --shadow-1: 0 1px 2px rgba(0,0,0,0.35), 0 8px 24px rgba(0,0,0,0.25);
  --shadow-2: 0 2px 4px rgba(0,0,0,0.45), 0 10px 30px rgba(0,0,0,0.35);
  --focus: 0 0 0 3px rgba(47,133,90,0.45);
}

html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: Verdana, Geneva, Tahoma, sans-serif; /* Body: brand */
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ===== Typography ===== */
h1, h2, h3, h4 { font-family: Georgia, 'Times New Roman', Times, serif; /* Display: brand */ color: #F0F4FA; margin: 0 0 12px; letter-spacing: 0.2px; }
h1 { font-size: 32px; line-height: 1.2; }
h2 { font-size: 24px; line-height: 1.3; color: #E8EEF6; margin-top: 8px; }
h3 { font-size: 18px; line-height: 1.4; color: #D9E2EC; }
p { margin: 0 0 14px; color: var(--text); }
strong { color: #FFFFFF; font-weight: 700; }
small, .muted { color: var(--text-muted); font-size: 14px; }

@media (min-width: 768px) {
  h1 { font-size: 40px; }
  h2 { font-size: 28px; }
  h3 { font-size: 20px; }
}

/* ===== Links ===== */
a { color: #D1E2FF; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: #FFFFFF; text-decoration: underline; }

/* ===== Containers & Layout (Flex-only) ===== */
.container {
  display: flex; /* flexbox only */
  width: 100%;
  justify-content: center;
  padding: 0 16px;
}
.content-wrapper {
  display: flex; /* flexbox only */
  flex-direction: column;
  gap: 16px;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}

/* Mandatory spacing pattern on semantic sections and .section class */
section, .section { margin-bottom: 60px; padding: 40px 20px; }

/* Subtle alternating surfaces for long pages */
main section:nth-child(odd) { background: var(--surface); }
main section:nth-child(even) { background: var(--surface-2); }

/* Text blocks */
.text-section { display: flex; flex-direction: column; gap: 12px; }
.text-section ul, .text-section ol { margin: 0; padding-left: 20px; }
.text-section li { margin-bottom: 10px; }

/* Breadcrumbs */
nav[aria-label="Brotkrumen"] { color: var(--steel); font-size: 14px; }
nav[aria-label="Brotkrumen"] a { color: #C5D4E8; }
nav[aria-label="Brotkrumen"] a:hover { color: #FFFFFF; }

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

.brand { display: inline-flex; align-items: center; gap: 10px; }
.logo-text { color: #F4F7FB; font-weight: 700; letter-spacing: 0.4px; font-family: Georgia, 'Times New Roman', Times, serif; }

.main-nav { display: none; /* mobile-first hidden */ align-items: center; gap: 16px; }
.main-nav a { color: #D6DEEA; padding: 10px 8px; border-radius: 6px; transition: background-color .2s ease, color .2s ease; font-size: 14px; letter-spacing: 0.3px; }
.main-nav a:hover { background: #1E2833; color: #FFFFFF; }
.main-nav a[aria-current="page"], .main-nav a.cta { background: var(--brand-primary); color: #fff; border: 1px solid #2A476E; }
.main-nav a.cta:hover { background: #25476E; }

/* Mobile menu toggle */
.mobile-menu-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; color: #E8EEF6; background: #1A212A; border: 1px solid var(--line); border-radius: 8px; transition: transform .15s ease, background-color .2s ease; }
.mobile-menu-toggle:hover { background: #202834; }
.mobile-menu-toggle:active { transform: scale(0.96); }
.mobile-menu-toggle:focus-visible { outline: none; box-shadow: var(--focus); }

/* Mobile slide-in menu */
.mobile-menu { position: fixed; top: 0; right: 0; bottom: 0; width: 85vw; max-width: 420px; background: #10161D; border-left: 1px solid var(--line); box-shadow: var(--shadow-2); transform: translateX(100%); transition: transform .35s ease; z-index: 1400; display: flex; flex-direction: column; }
.mobile-menu[aria-hidden="false"] { transform: translateX(0); }
.mobile-menu-close { position: absolute; top: 12px; right: 12px; color: #E8EEF6; background: #18202A; border: 1px solid var(--line); width: 38px; height: 38px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; }
.mobile-menu-close:hover { background: #202A36; }
.mobile-menu-close:focus-visible { outline: none; box-shadow: var(--focus); }
.mobile-nav { display: flex; flex-direction: column; gap: 8px; padding: 60px 20px 20px; }
.mobile-nav a { padding: 12px 10px; border-radius: 8px; background: #141A22; color: #D7DFEB; border: 1px solid #1F2833; font-size: 16px; }
.mobile-nav a:hover { background: #19212B; color: #FFFFFF; }

@media (min-width: 992px) {
  .main-nav { display: flex; }
  .mobile-menu-toggle { display: none; }
}

/* ===== Buttons & CTAs ===== */
.cta, a.cta, button.cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--brand-primary); color: #FFFFFF; border: 1px solid #2A476E;
  padding: 12px 16px; border-radius: var(--radius-sm);
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; font-size: 14px;
  box-shadow: 0 1px 0 rgba(255,255,255,0.05) inset, 0 8px 18px rgba(7, 14, 22, 0.35);
  transition: background-color .2s ease, transform .08s ease, box-shadow .2s ease;
}
.cta:hover { background: #25476E; box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset, 0 10px 22px rgba(7, 14, 22, 0.45); }
.cta:active { transform: translateY(1px); }
.cta:focus-visible { outline: none; box-shadow: var(--focus); }

/* Secondary button style */
.btn-secondary { background: #223140; border: 1px solid var(--line); color: #E6ECF3; border-radius: var(--radius-sm); padding: 10px 14px; }
.btn-secondary:hover { background: #263847; }

/* ===== Cards & Content Patterns ===== */
.card-container { display: flex; flex-wrap: wrap; gap: 24px; }
.card { background: #141A22; border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; margin-bottom: 20px; position: relative; box-shadow: var(--shadow-1); display: flex; flex-direction: column; gap: 10px; }
.card:hover { border-color: #354150; }

.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; background: var(--brand-accent); color: #0F1318; border: 1px solid #D8E1EC; border-radius: var(--radius); box-shadow: 0 1px 2px rgba(0,0,0,0.08), 0 6px 16px rgba(0,0,0,0.08); }
.testimonial-card h3 { color: #0E1722; }
.testimonial-card p { color: #0F1318; }
.feature-item { display: flex; flex-direction: column; align-items: flex-start; gap: 15px; }

/* Utility spacing to ensure no overlap */
.content-wrapper > * + * { margin-top: 8px; }
section > .container + .container { margin-top: 20px; }

/* ===== Lists ===== */
ul { list-style: disc; }
ol { list-style: decimal; }
li { padding-left: 2px; }

/* ===== Footer ===== */
footer { background: #10161C; border-top: 1px solid var(--line); }
footer .content-wrapper { flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: 24px; padding: 28px 20px; }
footer h3 { color: #E3EAF2; font-size: 16px; margin-bottom: 8px; }
footer p, footer a, footer li { color: #C3CFDB; font-size: 14px; }
footer a:hover { color: #FFFFFF; text-decoration: underline; }

/* ===== Forms (generic styling if used later) ===== */
input[type="text"], input[type="email"], input[type="tel"], textarea {
  width: 100%; background: #0F151C; color: #E6ECF3; border: 1px solid #2A323C; border-radius: 8px; padding: 12px 14px; }
input:focus, textarea:focus { outline: none; box-shadow: var(--focus); border-color: #34577A; }

/* ===== Accessibility focus for links ===== */
a:focus-visible { outline: none; box-shadow: var(--focus); border-radius: 6px; }

/* ===== HR & Dividers ===== */
hr { border: none; border-top: 1px solid var(--line); margin: 24px 0; }

/* ===== Responsive Layout ===== */
@media (max-width: 768px) {
  .text-image-section { flex-direction: column; align-items: center; }
}
@media (min-width: 768px) {
  .content-grid > * { flex: 1 1 calc(50% - 20px); }
}
@media (min-width: 1024px) {
  .content-grid > * { flex: 1 1 calc(33% - 20px); }
}

/* ===== Page-specific flourishes (still generic) ===== */
main a[aria-current="page"], .mobile-nav a[aria-current="page"] { font-weight: 700; }

/* ===== Cookie Consent Banner ===== */
.cookie-banner { position: fixed; left: 0; right: 0; bottom: 0; background: #0E141B; color: #E6ECF3; border-top: 1px solid var(--line); z-index: 2000; transform: translateY(100%); opacity: 0; transition: transform .3s ease, opacity .3s ease; display: flex; justify-content: center; padding: 0 14px; }
.cookie-banner.show { transform: translateY(0); opacity: 1; }
.cookie-banner .banner-content { display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 1100px; padding: 16px 0; }
.cookie-banner .cookie-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.cookie-btn { border-radius: 8px; padding: 10px 14px; border: 1px solid var(--line); background: #17202A; color: #E6ECF3; }
.cookie-btn:hover { background: #1C2632; }
.cookie-btn.accept { background: var(--success); border-color: #2C7A58; color: #fff; }
.cookie-btn.accept:hover { background: #2A7A56; }
.cookie-btn.reject { background: #222A33; color: #E6ECF3; }
.cookie-btn.reject:hover { background: #27303A; }

/* Cookie Preferences Modal */
.cookie-modal-backdrop { position: fixed; inset: 0; background: rgba(5,8,12,0.6); z-index: 2100; opacity: 0; pointer-events: none; transition: opacity .25s ease; display: flex; align-items: center; justify-content: center; padding: 16px; }
.cookie-modal-backdrop.open { opacity: 1; pointer-events: all; }
.cookie-modal { background: #0F151C; border: 1px solid var(--line); border-radius: var(--radius); width: 100%; max-width: 720px; box-shadow: var(--shadow-2); display: flex; flex-direction: column; gap: 16px; padding: 18px; color: #E6ECF3; }
.cookie-modal .modal-header { display: flex; align-items: center; justify-content: space-between; }
.cookie-modal .modal-body { display: flex; flex-direction: column; gap: 12px; }
.cookie-modal .modal-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }

/* Simple switches for cookie categories */
.cookie-switch { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px; border: 1px solid #202832; border-radius: 10px; background: #121923; }
.cookie-switch .label { font-weight: 600; }
.cookie-switch input[type="checkbox"] { appearance: none; width: 46px; height: 26px; border-radius: 999px; background: #2A333E; position: relative; outline: none; transition: background-color .2s ease; border: 1px solid #394656; }
.cookie-switch input[type="checkbox"]::after { content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: #C8D2DE; transition: transform .2s ease; }
.cookie-switch input[type="checkbox"]:checked { background: var(--success); border-color: #2A7A56; }
.cookie-switch input[type="checkbox"]:checked::after { transform: translateX(20px); background: #fff; }

/* ===== Industrial Micro-details ===== */
/* Steel underline on section headings */
.content-wrapper > h2 { position: relative; padding-bottom: 6px; }
.content-wrapper > h2::after { content: ""; display: block; width: 64px; height: 2px; background: #4B5A6B; margin-top: 8px; }

/* Subtle card hover lift */
.card, .testimonial-card { transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease; }
.card:hover, .testimonial-card:hover { transform: translateY(-2px); box-shadow: 0 2px 6px rgba(0,0,0,0.4), 0 12px 28px rgba(0,0,0,0.3); }

/* ===== Ensure contrast for testimonials/reviews ===== */
/* Already using light backgrounds with dark text for .testimonial-card */

/* ===== Tables (if any appear in content) ===== */
table { width: 100%; border-collapse: collapse; background: #121820; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; display: block; }
thead { background: #17202A; color: #E8EEF6; display: block; }
tbody { display: block; }
tr { display: flex; flex-wrap: nowrap; border-bottom: 1px solid #202833; }
th, td { flex: 1 1 0; padding: 12px; font-size: 14px; color: #DCE5F0; }
th { text-align: left; color: #F0F5FB; }

/* ===== Images in text-image sections ===== */
.text-image-section img { border-radius: var(--radius); border: 1px solid var(--line); box-shadow: var(--shadow-1); }

/* ===== Accessibility helpers ===== */
.visually-hidden { position: absolute !important; height: 1px; width: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); white-space: nowrap; }

/* ===== Ensure minimum spacing between content blocks ===== */
.text-section > * + * { margin-top: 8px; }
.testimonial-card + .testimonial-card { margin-top: 20px; }

/* ===== Page Footer spacing from main content ===== */
main { padding-bottom: 40px; }

/* ===== Print basics ===== */
@media print {
  header, footer, .mobile-menu, .cookie-banner, .cookie-modal-backdrop { display: none !important; }
  body { background: #fff; color: #000; }
}

/* ========= MANDATORY SPACING/ALIGNMENT CLASSES (as provided) ========= */
.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; }

/* ========= Desktop layout refinements ========= */
@media (min-width: 992px) {
  header .content-wrapper { padding: 16px 24px; }
  section, .section { padding: 56px 24px; }
  footer .content-wrapper > .text-section { flex: 1 1 260px; min-width: 240px; }
}