/* =============================
   ArrotCerne BauKurier – Industrial Modern UI
   Mobile-first, flexbox-only, accessible, high-contrast
   ============================= */

/* CSS RESET & BASELINE */
* { box-sizing: border-box; }
html, body { height: 100%; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; font-family: Verdana, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Trebuchet MS", sans-serif; background: #0f1419; color: #E5E7EB; line-height: 1.6; }
img, svg { display: block; max-width: 100%; height: auto; }
a { color: #D97706; text-decoration: none; }
a:hover { text-decoration: underline; }
:focus { outline: 2px solid #D97706; outline-offset: 2px; }

/* COLOR VARIABLES (with fallbacks on properties) */
:root { --primary:#1F2A37; --secondary:#D97706; --accent:#F4F6F8; --ink:#0f1419; --ink-2:#111827; --muted:#9CA3AF; --line:#2C3642; --metal:#6B7280; --success:#16A34A; --danger:#DC2626; }

/* TYPOGRAPHY SCALE */
h1, h2, h3 { font-family: "Trebuchet MS", Verdana, Arial, sans-serif; letter-spacing: 0.3px; color: #F9FAFB; margin: 0 0 10px 0; }
h1 { font-size: 32px; line-height: 1.2; }
h2 { font-size: 24px; line-height: 1.3; }
h3 { font-size: 18px; line-height: 1.4; }
p { margin: 0 0 12px 0; color: #E5E7EB; }
small, .muted { color: #9CA3AF; font-size: 12px; }
strong { color: #F3F4F6; font-weight: 700; }

/* LISTS */
ul, ol { margin: 0 0 12px 0; padding-left: 18px; }
ul li, ol li { margin: 6px 0; }

/* CONTAINERS & LAYOUT (FLEX ONLY) */
.container { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 16px; display: flex; flex-direction: column; gap: 20px; }
.content-wrapper { display: flex; flex-direction: column; gap: 20px; }
section { display: flex; width: 100%; }
section > .container { padding-top: 32px; padding-bottom: 32px; border-top: 1px solid #2C3642; }

/* MANDATORY SPACING & ALIGNMENT PATTERNS */
.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; gap: 12px; }
.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; }

/* HEADER */
header { position: sticky; top: 0; z-index: 1000; background: #121821; border-bottom: 1px solid #2C3642; backdrop-filter: saturate(120%) blur(6px); }
header .container { flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; }
.logo { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
.logo img { height: 30px; width: auto; filter: drop-shadow(0 1px 0 rgba(0,0,0,0.2)); }

.main-nav { display: none; align-items: center; gap: 18px; }
.main-nav a { color: #E5E7EB; font-size: 14px; text-transform: uppercase; letter-spacing: 0.6px; padding: 8px 10px; border-radius: 6px; transition: color .2s ease, background-color .2s ease; }
.main-nav a:hover { background: #1F2A37; color: #fff; text-decoration: none; }

.header-cta { display: none; align-items: center; }

/* BUTTONS */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 18px; border-radius: 8px; border: 1px solid #374151; background: #1F2A37; color: #F9FAFB; font-weight: 700; font-size: 14px; letter-spacing: 0.3px; text-transform: none; cursor: pointer; transition: transform .08s ease, background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease; box-shadow: 0 1px 0 rgba(0,0,0,.4), inset 0 0 0 1px rgba(255,255,255,0.04); }
.btn:hover { transform: translateY(-1px); background: #253243; border-color: #465466; text-decoration: none; }
.btn:active { transform: translateY(0); }
.btn.primary { background: #D97706; border-color: #bb6806; color: #0f1419; box-shadow: 0 2px 0 rgba(0,0,0,.35); }
.btn.primary:hover { background: #c36a05; border-color: #9f5905; color: #0b0f14; }
.btn.secondary { background: transparent; border-color: #D97706; color: #D97706; }
.btn.secondary:hover { background: rgba(217,119,6,0.1); }
.btn.tertiary { background: #F4F6F8; color: #111827; border-color: #cfd6dd; }
.btn.tertiary:hover { background: #e9edf1; }

/* HERO */
.hero { background: #0f1419; border-bottom: 1px solid #2C3642; }
.hero .container { padding-top: 48px; padding-bottom: 48px; }
.hero .content-wrapper { gap: 16px; }
.hero h1 { font-size: 28px; color: #F9FAFB; }
.hero .subheadline { color: #D1D5DB; font-size: 16px; }
.hero .tagline, .trust { color: #9CA3AF; font-size: 14px; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* FEATURES & TEXT SECTIONS */
.feature-grid { display: flex; flex-wrap: wrap; gap: 24px; }
.text-section { display: flex; flex-direction: column; gap: 10px; background: #121821; border: 1px solid #2C3642; border-radius: 10px; padding: 16px; box-shadow: 0 1px 0 rgba(0,0,0,.4); flex: 1 1 260px; min-width: 240px; }
.text-section h3 { color: #F3F4F6; }
.text-section p { color: #D1D5DB; }

/* LIST STYLES */
.usp-list, .service-list { display: flex; flex-direction: column; gap: 8px; background: #0f1419; padding: 0; list-style: none; }
.usp-list li, .service-list li { position: relative; padding-left: 26px; color: #E5E7EB; }
.usp-list li::before, .service-list li::before { content: ""; display: inline-flex; width: 10px; height: 10px; border-radius: 2px; background: #D97706; border: 1px solid #bb6806; position: absolute; left: 0; top: 7px; }

/* TAG VALUES (chips) */
.tag-values { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; padding: 0; }
.tag-values li { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 999px; background: #121821; color: #E5E7EB; border: 1px solid #2C3642; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.03); font-size: 13px; }

/* TESTIMONIALS – light cards for contrast */
.testimonial-card { background: #F4F6F8; color: #111827; border: 1px solid #d5dbe1; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.testimonial-card p { color: #111827; }
.testimonial-card strong { color: #1F2A37; }

/* FOOTER */
footer { background: #0e1318; border-top: 1px solid #2C3642; }
footer .container { padding-top: 32px; padding-bottom: 32px; }
footer .content-wrapper { display: flex; flex-wrap: wrap; gap: 20px; }
.footer-brand { display: flex; flex-direction: column; gap: 8px; flex: 1 1 240px; }
.footer-nav, .legal-nav, .contact-block { display: flex; flex-direction: column; gap: 8px; flex: 1 1 200px; }
.footer-nav a, .legal-nav a { color: #D1D5DB; font-size: 14px; padding: 6px 0; border-bottom: 1px dashed transparent; transition: color .2s ease, border-color .2s ease; }
.footer-nav a:hover, .legal-nav a:hover { color: #fff; border-color: #2C3642; text-decoration: none; }

/* NAV – MOBILE MENU */
.mobile-menu-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 8px; background: #1F2A37; color: #F9FAFB; border: 1px solid #374151; font-size: 20px; cursor: pointer; transition: background .2s ease, transform .1s ease; }
.mobile-menu-toggle:hover { background: #253243; }
.mobile-menu-toggle:active { transform: scale(0.98); }

.mobile-menu { position: fixed; inset: 0; display: flex; flex-direction: column; background: rgba(17,24,39,0.98); border-left: 1px solid #2C3642; transform: translateX(100%); transition: transform .32s ease; z-index: 2000; padding: 16px; gap: 16px; }
.mobile-menu.open, .mobile-menu.active, body.menu-open .mobile-menu { transform: translateX(0); }
.mobile-menu-close { align-self: flex-end; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; background: #1F2A37; color: #F9FAFB; border: 1px solid #374151; border-radius: 8px; font-size: 18px; cursor: pointer; }
.mobile-nav { display: flex; flex-direction: column; gap: 10px; }
.mobile-nav a { display: flex; align-items: center; padding: 14px 12px; border-radius: 8px; background: #121821; color: #F3F4F6; border: 1px solid #2C3642; font-size: 16px; text-transform: uppercase; letter-spacing: 0.6px; }
.mobile-nav a:hover { background: #182231; text-decoration: none; }
body.menu-open { overflow: hidden; }

/* COOKIES – BANNER & MODAL */
.cookie-banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 3000; display: flex; flex-direction: column; gap: 12px; background: #1F2A37; color: #F9FAFB; border-top: 1px solid #2C3642; padding: 16px; transform: translateY(100%); transition: transform .32s ease; }
.cookie-banner.show, .cookie-banner.visible { transform: translateY(0); }
.cookie-inner { display: flex; flex-direction: column; gap: 12px; }
.cookie-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.cookie-actions .btn { flex: 1 1 120px;}
.cookie-actions .btn:hover { flex: 1 1 120px; color: white;}
.btn-cookie-accept { background: #16A34A; border-color: #138a3f; color: #04120a; }
.btn-cookie-accept:hover { background: #138a3f; }
.btn-cookie-reject { background: transparent; border-color: #DC2626; color: #FCA5A5; }
.btn-cookie-reject:hover { background: rgba(220,38,38,0.12); }
.btn-cookie-settings { background: #F4F6F8; color: #111827; border-color: #cfd6dd; }

.cookie-modal { position: fixed; inset: 0; z-index: 4000; background: rgba(15,20,25,0.75); display: none; align-items: center; justify-content: center; padding: 16px; }
.cookie-modal.open, .cookie-modal.active { display: flex; }
.cookie-modal .modal-content { display: flex; flex-direction: column; gap: 16px; width: 100%; max-width: 640px; background: #F4F6F8; color: #111827; border: 1px solid #d5dbe1; border-radius: 12px; padding: 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.25); }
p#cookieModalDesc, h2#cookieModalTitle, strong#label-essential, strong#label-analytics, strong#label-marketing {
    color: black;
}
button.btn.secondary.modal-close {
    color: black;
}
.cookie-categories { display: flex; flex-direction: column; gap: 12px; }
.cookie-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 8px; background: #ffffff; border: 1px solid #e6ebf0; }
.cookie-row .label { display: flex; flex-direction: column; gap: 2px; }
.cookie-row .hint { color: #6B7280; font-size: 12px; }

/* Toggle Switch */
.switch { position: relative; display: inline-flex; align-items: center; width: 46px; height: 26px; border-radius: 26px; background: #d1d5db; border: 1px solid #c7cdd4; transition: background .2s ease; cursor: pointer; }
.switch::after { content: ""; width: 22px; height: 22px; border-radius: 50%; background: #fff; transform: translateX(1px); box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: transform .2s ease; }
input[type="checkbox"].switch-input { position: absolute; opacity: 0; pointer-events: none; }
input[type="checkbox"].switch-input:checked + .switch { background: #16A34A; border-color: #138a3f; }
input[type="checkbox"].switch-input:checked + .switch::after { transform: translateX(21px); }
.switch[aria-disabled="true"], .switch.disabled { opacity: .6; cursor: not-allowed; }

/* FORMS (basic for cookie modal or future forms) */
input, select, textarea { background: #121821; color: #F3F4F6; border: 1px solid #2C3642; border-radius: 8px; padding: 10px 12px; }
label { color: #D1D5DB; }

/* CARDS (generic) */
.card { background: #121821; border: 1px solid #2C3642; border-radius: 12px; padding: 16px; box-shadow: 0 1px 0 rgba(0,0,0,.35); }
.card:hover { border-color: #3a4654; }

/* UTILITIES */
.hr { height: 1px; background: #2C3642; border: 0; }
.muted { color: #9CA3AF; }
.center { text-align: center; }

/* RESPONSIVE */
@media (min-width: 480px) {
  .hero h1 { font-size: 32px; }
}
@media (min-width: 768px) {
  /* Header */
  .main-nav { display: flex; }
  .header-cta { display: flex; }
  .mobile-menu-toggle { display: none; }

  /* Layout spacing */
  .container { gap: 24px; }
  .hero .container { padding-top: 64px; padding-bottom: 64px; }

  /* Headings */
  h1 { font-size: 40px; }
  h2 { font-size: 28px; }
  h3 { font-size: 20px; }

  /* Text-image sections align row */
  .text-image-section { flex-direction: row; }

  /* Feature grid tiles */
  .text-section { flex: 1 1 calc(50% - 12px); }

  footer .content-wrapper { flex-direction: row; }
}
@media (min-width: 1024px) {
  h1 { font-size: 48px; }
  .text-section { flex: 1 1 calc(33.333% - 16px); }
  .hero .content-wrapper { max-width: 900px; }
}

/* PAGE-SPECIFIC TWEAKS BASED ON PROVIDED HTML CLASSES */
/* Service and process lists tight visual rhythm */
.service-list + p, .usp-list + p { color: #9CA3AF; }

/* Compliance line */
.compliance { color: #9CA3AF; font-size: 14px; border-left: 3px solid #D97706; padding-left: 10px; }

/* Ordered lists styled lightly */
ol { counter-reset: li; list-style: none; padding-left: 0; }
ol li { counter-increment: li; padding-left: 30px; position: relative; }
ol li::before { content: counter(li) "."; position: absolute; left: 0; top: 0; color: #D97706; font-weight: 700; }

/* FOOTER contact text subtle */
.contact-block p { color: #D1D5DB; margin: 0; }

/* ACCESSIBILITY & STATES */
.btn:focus, a:focus { box-shadow: 0 0 0 3px rgba(217,119,6,0.35); }

/* PREVENT OVERLAP: ensure adequate spacing */
section + section { margin-top: 8px; }

/* ALIGNMENT RULES ENFORCEMENT */
/* Using align-items center where needed */
header .container, .testimonial-card, .text-image-section { align-items: center; }

/* DARK/LIGHT CONTRAST FOR TESTIMONIALS */
/* Already set to light background with dark text */

/* INDUSTRIAL ACCENTS: subtle metallic borders on major blocks */
.hero, .text-section, footer, header { box-shadow: inset 0 1px 0 rgba(255,255,255,0.02); }

/* LINKS in dark areas */
main a { text-underline-offset: 3px; }
main a:hover { text-decoration-color: #c36a05; }

/* TABLE-LIKE FLEX GRIDS (if any future .content-grid usage) */
.content-grid > * { flex: 1 1 280px; min-width: 240px; }

/* EXTRA: Smooth show/hide helpers (optional classes for JS) */
.is-hidden { display: none !important; }
.is-flex { display: flex !important; }

/* Ensure all major wrappers use flex */
main { display: flex; flex-direction: column; gap: 20px; }
footer .content-wrapper, header .container, .cta-row, .feature-grid, .service-list, .usp-list, .tag-values { gap: 20px; }

/* PRINT (basic) */
@media print {
  header, .mobile-menu, .cookie-banner, .cookie-modal { display: none !important; }
  body { background: #fff; color: #000; }
  a { color: #000; text-decoration: underline; }
}