/* =============================================================
   ObbliunPro – style.css (Vintage Retro x Brand)
   Mobile-first, Flexbox-only, accessible, high-contrast
   ============================================================= */

/* -----------------------------
   1) RESET & NORMALIZE
------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; line-height: 1.6; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; }
button { border: 0; background: none; padding: 0; cursor: pointer; }
a { background-color: transparent; color: inherit; text-decoration: none; }
ul, ol { padding-left: 1.4rem; }

/* -----------------------------
   2) THEME VARIABLES
------------------------------ */
:root {
  /* Brand */
  --brand-primary: #0B2E59; /* deep ink navy */
  --brand-secondary: #1C7C54; /* heritage green */
  --brand-accent: #F5F7FA; /* light accent */
  
  /* Vintage palette */
  --paper: #F7F1E1;        /* warm paper */
  --paper-2: #EFE6D9;      /* parchment */
  --ink: #2B2118;          /* dark ink */
  --mustard: #C59A2D;      /* vintage mustard */
  --terracotta: #B86444;   /* terracotta */
  --teal: #3A6F6E;         /* muted teal */
  --brown: #6B4F3A;        /* brown */
  --stone: #B9A68B;        /* aged stone */
  --line: #D9CBB6;         /* divider */
  
  /* Shadows & effects */
  --shadow-1: 0 2px 0 rgba(0,0,0,0.06), 0 6px 18px rgba(0,0,0,0.06);
  --shadow-2: 0 2px 0 rgba(0,0,0,0.08), 0 8px 22px rgba(0,0,0,0.10);
  --ring: 0 0 0 3px rgba(197,154,45,0.25);
}

/* -----------------------------
   3) BASE TYPOGRAPHY
------------------------------ */
body {
  font-family: Verdana, "Segoe UI", Tahoma, sans-serif; /* brand body */
  color: var(--ink);
  background-color: var(--paper);
  background-image:
    repeating-linear-gradient(0deg, rgba(0,0,0,0.015), rgba(0,0,0,0.015) 1px, transparent 1px, transparent 8px),
    repeating-linear-gradient(90deg, rgba(0,0,0,0.01), rgba(0,0,0,0.01) 1px, transparent 1px, transparent 10px);
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Trebuchet MS", Verdana, Geneva, sans-serif; /* brand display */
  color: var(--brand-primary);
  line-height: 1.25;
  margin: 0 0 14px 0;
  letter-spacing: 0.5px;
}

h1 { font-size: 32px; }
h2 { font-size: 24px; }
h3 { font-size: 18px; }

p { margin: 0 0 14px 0; font-size: 16px; }
small { font-size: 14px; }
strong { font-weight: 700; }

.subheadline { color: var(--teal); font-size: 16px; }

/* Links */
a { color: var(--brand-secondary); text-decoration-color: var(--mustard); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--brand-primary); text-decoration: underline; }
a:focus-visible, button:focus-visible { outline: 2px dashed var(--mustard); outline-offset: 3px; }

/* -----------------------------
   4) LAYOUT: CONTAINER & SECTION
   Flexbox only, responsive
------------------------------ */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
  display: flex;           /* flex-only */
  flex-direction: column;  /* mobile-first */
  gap: 20px;
}

/* Global section rhythm (also include mandatory .section class) */
section { margin-bottom: 60px; padding: 40px 16px; background: transparent; }
.section { margin-bottom: 60px; padding: 40px 20px; }

/* Content wrapper is flex column for stacking */
.content-wrapper { display: flex; flex-direction: column; gap: 20px; }

/* Alternate subtle paper bands for nostalgia */
section:nth-of-type(even) { background-color: var(--paper-2); box-shadow: inset 0 1px 0 var(--line), inset 0 -1px 0 var(--line); }

/* -----------------------------
   5) HEADER & NAVIGATION
------------------------------ */
header { position: relative; background: var(--paper); box-shadow: 0 1px 0 var(--line); }
header .container { flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; padding-top: 12px; padding-bottom: 12px; }

.logo img { width: 140px; height: auto; filter: saturate(0.9) contrast(1.05); }

.main-nav { display: none; align-items: center; gap: 16px; }
.main-nav a {
  font-size: 14px; color: var(--ink); padding: 8px 10px; border-radius: 6px; position: relative;
}
.main-nav a:hover { background: var(--brand-accent); box-shadow: var(--shadow-1); }

.header-cta { display: none; align-items: center; gap: 12px; }
.header-cta a { padding: 10px 14px; border-radius: 8px; border: 2px solid var(--brand-primary); color: var(--paper); background: var(--brand-primary); transition: transform .15s ease, box-shadow .2s ease; }
.header-cta a:hover { transform: translateY(-1px); box-shadow: var(--shadow-2); }
.header-cta a:last-child { background: var(--mustard); border-color: var(--mustard); color: #1d1d1d; }
.header-cta a:last-child:hover { background: #b48922; }

.mobile-menu-toggle { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; font-size: 22px; color: var(--brand-primary); background: var(--brand-accent); border-radius: 8px; box-shadow: var(--shadow-1); }
.mobile-menu-toggle:hover { background: #e8eef6; }

/* Mobile menu overlay */
.mobile-menu {
  position: fixed; inset: 0; z-index: 1000; background: rgba(11,46,89,0.9);
  transform: translateX(100%); transition: transform .35s ease; display: flex; flex-direction: column; padding: 20px; gap: 20px;
}
.mobile-menu.is-open, body.menu-open .mobile-menu, .mobile-menu.open, .mobile-menu[aria-hidden="false"] { transform: translateX(0); }

.mobile-menu-close { align-self: flex-end; width: 42px; height: 42px; color: #fff; font-size: 22px; background: transparent; border: 2px solid rgba(255,255,255,0.6); border-radius: 8px; }

.mobile-nav { display: flex; flex-direction: column; gap: 14px; }
.mobile-nav a { color: #fff; font-size: 18px; padding: 12px 10px; border-radius: 6px; background: rgba(255,255,255,0.06); }
.mobile-nav a:hover { background: rgba(255,255,255,0.12); }

/* Breadcrumbs */
nav[aria-label="Brotkrumen"] { display: flex; flex-wrap: wrap; gap: 8px; font-size: 14px; color: var(--brown); }
nav[aria-label="Brotkrumen"] a { color: var(--teal); }

/* Desktop nav */
@media (min-width: 992px) {
  .main-nav { display: flex; }
  .header-cta { display: flex; }
  .mobile-menu-toggle { display: none; }
  .logo img { width: 160px; }
}

/* -----------------------------
   6) BUTTONS & CTAs
------------------------------ */
.cta-group, .cta-links { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.cta-group a, .cta-links a {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 16px; border-radius: 10px; border: 2px solid var(--brand-primary);
  color: var(--paper); background: var(--brand-primary);
  transition: background .2s ease, transform .15s ease, box-shadow .2s ease;
}
.cta-group a:hover, .cta-links a:hover { transform: translateY(-1px); box-shadow: var(--shadow-2); }
.cta-group a:nth-child(2), .cta-links a:nth-child(2) { background: var(--mustard); border-color: var(--mustard); color: #1e1a13; }
.cta-group a:nth-child(2):hover, .cta-links a:nth-child(2):hover { background: #b48922; }

/* Text links inside paragraphs */
.text-section a:not(.btn), p a:not(.btn) { text-decoration: underline; color: var(--brand-secondary); }
.text-section a:not(.btn):hover, p a:not(.btn):hover { color: var(--brand-primary); }

/* -----------------------------
   7) CARDS, LISTS & FLEX GRIDS
   Flexbox only, with mandatory spacing utilities
------------------------------ */
/* Mandatory patterns */
.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; }

/* Generic text-section as vintage card */
.text-section {
  display: flex; flex-direction: column; gap: 10px;
  background: var(--paper);
  border: 2px solid var(--line);
  border-radius: 12px;
  padding: 18px;
  box-shadow: var(--shadow-1);
}
.text-section h3 { color: var(--brand-primary); display: flex; align-items: center; gap: 10px; }
.text-section img[aria-hidden="true"] { width: 22px; height: 22px; opacity: 0.9; }

/* Feature grids and service lists */
.feature-grid, .service-cards, .service-list { display: flex; flex-wrap: wrap; gap: 24px; }
.feature-grid > .text-section, .service-cards > .text-section, .service-list > .text-section { flex: 1 1 100%; }

@media (min-width: 600px) {
  .feature-grid > .text-section, .service-cards > .text-section, .service-list > .text-section { flex: 1 1 calc(50% - 12px); }
}
@media (min-width: 1024px) {
  .feature-grid > .text-section, .service-cards > .text-section, .service-list > .text-section { flex: 1 1 calc(33.333% - 16px); }
}

/* Lists with vintage bullets */
ul.benefit-list, ul.supporting-points, ul.kpi-list, ul.brand-values, ul.data-subject-rights, ul.what-happens-next {
  list-style: none; padding-left: 0; margin: 0; display: flex; flex-direction: column; gap: 10px;
}
ul.benefit-list li, ul.supporting-points li, ul.kpi-list li, ul.brand-values li, ul.data-subject-rights li, ul.what-happens-next li {
  position: relative; padding-left: 26px;
}
ul.benefit-list li::before, ul.supporting-points li::before, ul.kpi-list li::before, ul.brand-values li::before, ul.data-subject-rights li::before, ul.what-happens-next li::before {
  content: "•"; position: absolute; left: 0; top: 0; color: var(--mustard); font-weight: 700; }

ol.process-steps { margin: 0; padding-left: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
ol.process-steps li { display: flex; align-items: flex-start; gap: 12px; background: var(--paper); border: 2px solid var(--line); padding: 12px 14px; border-radius: 12px; box-shadow: var(--shadow-1); }
ol.process-steps li::before { content: counter(step); counter-increment: step; display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 28px; border-radius: 50%; background: var(--mustard); color: #1d1d1d; font-weight: 700; }
ol.process-steps { counter-reset: step; }

/* Stats as badges */
.stats { display: flex; flex-wrap: wrap; gap: 12px; }
.stats p { background: var(--brand-accent); color: var(--brand-primary); border: 2px solid #dbe3ef; padding: 10px 12px; border-radius: 12px; box-shadow: var(--shadow-1); margin: 0; }
.stats p strong { color: var(--brand-primary); }

.metric-highlights { display: flex; flex-wrap: wrap; gap: 12px; background: var(--paper); border: 2px dashed var(--stone); border-radius: 12px; padding: 14px; }

.rating-summary { display: flex; align-items: center; gap: 10px; background: var(--paper); border: 2px solid var(--line); padding: 12px 14px; border-radius: 12px; box-shadow: var(--shadow-1); }

/* Testimonials – dark text on light bg (accessibility) */
.testimonial-card {
  background: #FFFDF7; color: #1a1a1a; border: 2px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-1);
}
.testimonial-card p { margin: 0; }
.testimonial-card p + p { color: var(--brown); }
.testimonial-card::before {
  content: "\201C"; position: absolute; left: 16px; top: -8px; font-size: 48px; color: rgba(0,0,0,0.08); pointer-events: none; /* decorative only */
}

/* Contact details blocks */
.contact-details { display: flex; flex-direction: column; gap: 8px; }
.contact-details p { display: flex; align-items: center; gap: 8px; margin: 0; }
.contact-details img[aria-hidden="true"] { width: 18px; height: 18px; opacity: 0.9; }

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

/* -----------------------------
   8) HERO STYLES
------------------------------ */
[aria-labelledby$="hero"] .container { gap: 12px; }
[aria-labelledby$="hero"] h1 { font-size: 28px; }
@media (min-width: 768px) { [aria-labelledby$="hero"] h1 { font-size: 36px; } }

/* -----------------------------
   9) FOOTER
------------------------------ */
footer { background: linear-gradient(0deg, var(--paper-2), var(--paper)); border-top: 4px double var(--line); }
footer .container { padding-top: 24px; padding-bottom: 32px; }
footer .content-wrapper { display: flex; flex-wrap: wrap; gap: 24px; justify-content: space-between; }
.footer-brand { display: flex; flex-direction: column; gap: 10px; max-width: 360px; }
.footer-brand img { width: 60px; filter: sepia(0.1) saturate(1); }
.footer-nav { display: flex; flex-direction: column; gap: 8px; min-width: 200px; }
.footer-nav a { color: var(--brand-primary); }
.footer-nav a:hover { text-decoration: underline; }
.newsletter-signup, .contact-snippet { display: flex; flex-direction: column; gap: 8px; }

/* -----------------------------
   10) PAGE-SPECIFIC HELPERS
------------------------------ */
.use-cases, .before-after, .deliverables-list, .timeline-overview, .tool-stack, .integration-options, .security-notes,
.evaluation-methods, .support-mechanisms, .what-to-prepare, .expectations, .policy-links, .how-to, .complaint,
.safeguards, .data-sources, .decision-frameworks, .implementation-support, .dsgvo-principles, .data-governance,
.quality-standards, .sustainability-notes, .credibility-signals, .record-of-processing, .processor-management,
.data-minimization, .security-measures, .access-controls, .incident-response, .retention-periods, .third-party-cookies,
.change-preferences, .consent-management {
  display: flex; flex-direction: column; gap: 10px; background: var(--paper); border: 2px solid var(--line);
  border-radius: 12px; padding: 16px; box-shadow: var(--shadow-1);
}

.policy-links { flex-direction: row; flex-wrap: wrap; gap: 10px; background: transparent; border: 0; box-shadow: none; padding: 0; }

/* -----------------------------
   11) ACCESSIBILITY & STATES
------------------------------ */
[role="alert"], .is-error { color: #7a1c1c; background: #fff4f4; border: 2px solid #f1c4c4; padding: 10px 12px; border-radius: 8px; }

/* -----------------------------
   12) MOBILE MENU ANIMATIONS
------------------------------ */
@keyframes slideInRight { from { transform: translateX(100%);} to { transform: translateX(0);} }
@keyframes slideOutRight { from { transform: translateX(0);} to { transform: translateX(100%);} }

/* -----------------------------
   13) COOKIE CONSENT BANNER & MODAL
------------------------------ */
.cookie-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1100;
  display: flex; flex-direction: column; gap: 12px; align-items: flex-start;
  background: #FFF9EA; color: #1d1d1d; border-top: 4px double var(--stone);
  box-shadow: 0 -8px 24px rgba(0,0,0,0.08);
  padding: 16px; transform: translateY(100%); transition: transform .3s ease;
}
.cookie-banner.show, body.cookie-open .cookie-banner { transform: translateY(0); }
.cookie-banner .cookie-text { font-size: 14px; }
.cookie-buttons { display: flex; flex-wrap: wrap; gap: 10px; }
.cookie-buttons .btn { padding: 10px 14px; border-radius: 8px; border: 2px solid var(--brand-primary); background: var(--brand-primary); color: var(--paper); }
.cookie-buttons .btn:hover { box-shadow: var(--shadow-2); transform: translateY(-1px); }
.cookie-buttons .btn.reject { background: transparent; color: var(--brand-primary); }
.cookie-buttons .btn.settings { background: var(--mustard); border-color: var(--mustard); color: #1d1d1d; }

/* Cookie modal overlay */
.cookie-modal { position: fixed; inset: 0; z-index: 1200; background: rgba(0,0,0,0.45); display: none; align-items: center; justify-content: center; padding: 16px; }
.cookie-modal.show, body.cookie-modal-open .cookie-modal { display: flex; }
.cookie-modal .modal-content {
  background: var(--paper); color: var(--ink); border: 2px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-2);
  width: 100%; max-width: 640px; display: flex; flex-direction: column; gap: 14px; padding: 18px;
}
.cookie-category { display: flex; align-items: center; justify-content: space-between; gap: 14px; background: var(--brand-accent); border: 2px solid #dbe3ef; border-radius: 10px; padding: 10px 12px; }
.cookie-category .always-on { color: var(--brown); font-size: 14px; }

/* Simple toggle */
.toggle { position: relative; width: 48px; height: 28px; border-radius: 999px; background: #ddd; transition: background .2s ease; }
.toggle::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; background: #fff; border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,0.18); transition: transform .2s ease; }
.toggle.on { background: var(--brand-secondary); }
.toggle.on::after { transform: translateX(20px); }

.modal-actions { display: flex; gap: 10px; justify-content: flex-end; }
.modal-actions .btn { padding: 10px 14px; border-radius: 8px; border: 2px solid var(--brand-primary); background: var(--brand-primary); color: var(--paper); }
.modal-actions .btn.secondary { background: transparent; color: var(--brand-primary); }

/* -----------------------------
   14) FORMS (basic future-proof)
------------------------------ */
input[type="text"], input[type="email"], input[type="tel"], textarea, select {
  width: 100%; padding: 10px 12px; border-radius: 8px; border: 2px solid var(--line); background: #fff;
}
input:focus, textarea:focus, select:focus { outline: none; box-shadow: var(--ring); border-color: var(--mustard); }
label { font-weight: 700; color: var(--brand-primary); margin-bottom: 6px; display: inline-block; }

/* -----------------------------
   15) RESPONSIVE TWEAKS
------------------------------ */
@media (min-width: 600px) {
  h1 { font-size: 36px; }
  h2 { font-size: 28px; }
  h3 { font-size: 20px; }
}
@media (min-width: 1024px) {
  h1 { font-size: 44px; }
  h2 { font-size: 32px; }
  h3 { font-size: 22px; }
}

/* -----------------------------
   16) UTILITIES & HELPERS
------------------------------ */
.hidden { display: none !important; }
.center { display: flex; align-items: center; justify-content: center; }
.row { display: flex; flex-wrap: wrap; gap: 20px; }
.col { display: flex; flex-direction: column; gap: 12px; }
.mt-20 { margin-top: 20px; } .mb-20 { margin-bottom: 20px; } .pt-20 { padding-top: 20px; } .pb-20 { padding-bottom: 20px; }

/* Ensure no overlapping and adequate spacing */
.text-section, .testimonial-card, .rating-summary, .stats p, .metric-highlights, .contact-details, .newsletter-signup, .quality-standards, .sustainability-notes {
  margin-bottom: 20px;
}

/* -----------------------------
   17) STRICT FLEX ENFORCEMENT REMINDERS
   All layouts above use display:flex. No CSS Grid used intentionally.
------------------------------ */
/* End of file */