/* =========================================================
   Santu Parvo Gastrotouren - style.css
   Professional Corporate aesthetic with brand integration
   Mobile-first, Flexbox-only (no CSS Grid/Columns)
   ========================================================= */

/* ----------------------------
   1) RESET & NORMALIZE
   ---------------------------- */
html { box-sizing: border-box; -webkit-text-size-adjust: 100%; }
*, *::before, *::after { box-sizing: inherit; }
body, h1, h2, h3, h4, h5, h6, p, ul, ol, li, figure, blockquote, dl, dd { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; }
button { border: 0; background: none; font: inherit; cursor: pointer; }
input, select, textarea { font: inherit; }

/* ----------------------------
   2) THEME TOKENS (with fallbacks)
   ---------------------------- */
:root {
  /* Corporate blue/gray foundation */
  --blue-900: #1A2B44;
  --blue-800: #233652;
  --blue-700: #2C4B6E;
  --blue-100: #E8F0FA;
  --gray-900: #1F2933;
  --gray-800: #323F4B;
  --gray-700: #3E4C59;
  --gray-600: #52606D;
  --gray-400: #9AA5B1;
  --gray-300: #CBD2D9;
  --gray-200: #E4E7EB;
  --gray-100: #F5F7FA;

  /* Brand */
  --brand-primary: #1F3D2B; /* deep green */
  --brand-secondary: #C4572A; /* warm accent */
  --brand-accent: #FFF6E5; /* light accent */

  /* Surface & feedback */
  --surface: #FFFFFF;
  --surface-alt: #F7FAFD;
  --focus: #1A2B44;
  --success: #127B56;
  --danger: #B00020;

  /* Typography scale */
  --fs-14: 14px;
  --fs-16: 16px;
  --fs-18: 18px;
  --fs-20: 20px;
  --fs-24: 24px;
  --fs-28: 28px;
  --fs-32: 32px;
  --fs-40: 40px;
  --fs-48: 48px;

  --radius-s: 6px;
  --radius-m: 10px;
  --radius-l: 14px;
  --shadow-s: 0 1px 2px rgba(16,24,40,0.06);
  --shadow-m: 0 4px 12px rgba(16,24,40,0.10);
  --shadow-l: 0 12px 28px rgba(16,24,40,0.18);

  --container-max: 1200px;
  --gutter: 20px;
}

/* ----------------------------
   3) BASE TYPOGRAPHY & BODY
   ---------------------------- */
body {
  font-family: Verdana, Geneva, Tahoma, sans-serif; /* business body font */
  color: var(--gray-900, #1F2933);
  background: #ffffff;
  line-height: 1.6;
}
h1, h2, h3, h4 {
  font-family: Georgia, 'Times New Roman', serif; /* display font */
  color: var(--brand-primary, #1F3D2B);
  line-height: 1.25;
}
h1 { font-size: var(--fs-40); margin-bottom: 16px; }
h2 { font-size: var(--fs-32); margin-bottom: 16px; }
h3 { font-size: var(--fs-24); margin-bottom: 10px; }
h4 { font-size: var(--fs-20); margin-bottom: 8px; }
p { font-size: var(--fs-16); color: var(--gray-800); }
.subheadline { font-size: var(--fs-18); color: var(--gray-700); margin-bottom: 14px; }
.text-section { margin-top: 10px; color: var(--gray-800); }
.microcopy { font-size: var(--fs-14); color: var(--gray-600); margin-top: 8px; }
strong { color: var(--gray-900); font-weight: 700; }
.link, .btn-link { color: var(--blue-700); text-decoration: underline; }
.link:hover, .btn-link:hover { color: var(--blue-900); }

/* Focus accessibility */
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

/* ----------------------------
   4) LAYOUT PRIMITIVES (Flexbox-only)
   ---------------------------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;              /* Flex container */
  flex-direction: column;     /* Mobile-first */
  gap: 20px;
}
.content-wrapper {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
section {
  margin-bottom: 60px;
  padding: 40px 0;
}
/* Mandatory spacing class */
.section { margin-bottom: 60px; padding: 40px 20px; }

/* Additional reusable flex patterns (required) */
.card-container { display: flex; flex-wrap: wrap; gap: 24px; }
.card { margin-bottom: 20px; position: relative; background: var(--surface); border: 1px solid var(--gray-200); border-radius: var(--radius-m); padding: 18px; box-shadow: var(--shadow-s); 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; background: #ffffff; border: 1px solid var(--gray-200); border-left: 4px solid var(--blue-700); border-radius: var(--radius-m); color: var(--gray-900); box-shadow: var(--shadow-s); }
.feature-item { display: flex; flex-direction: column; align-items: flex-start; gap: 15px; }

/* ----------------------------
   5) HEADER & NAVIGATION
   ---------------------------- */
header {
  background: #ffffff;
  border-bottom: 1px solid var(--gray-200);
  position: sticky; top: 0; z-index: 1000;
}
header .container { flex-direction: row; align-items: center; justify-content: space-between; gap: 16px; }
.logo { display: flex; align-items: center; }
.logo img { height: 38px; width: auto; }

.main-nav { display: none; align-items: center; gap: 18px; }
.main-nav a { color: var(--gray-800); font-size: var(--fs-16); padding: 10px 8px; border-radius: var(--radius-s); transition: background 0.2s, color 0.2s; }
.main-nav a:hover { color: var(--blue-900); background: var(--gray-100); }

.header-ctas { display: none; align-items: center; gap: 10px; }

/* Mobile burger */
.mobile-menu-toggle {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border-radius: 8px;
  color: #ffffff; background: var(--blue-700);
  box-shadow: var(--shadow-s);
  transition: background 0.2s, transform 0.2s;
}
.mobile-menu-toggle:hover { background: var(--blue-900); transform: translateY(-1px); }

/* Mobile menu overlay */
.mobile-menu {
  position: fixed; inset: 0; right: 0; left: auto; width: 100%; max-width: 320px;
  background: #ffffff; border-left: 1px solid var(--gray-200);
  display: flex; flex-direction: column; gap: 14px;
  padding: 16px;
  transform: translateX(100%);
  transition: transform 0.3s ease; z-index: 1100;
  box-shadow: var(--shadow-l);
}
body.menu-open .mobile-menu { transform: translateX(0%); }

.mobile-menu-close {
  align-self: flex-end; width: 40px; height: 40px; border-radius: 8px;
  color: var(--blue-900); background: var(--gray-100);
}
.mobile-menu-close:hover { background: var(--gray-200); }
.mobile-nav { display: flex; flex-direction: column; gap: 8px; }
.mobile-nav a {
  padding: 12px; border-radius: 8px; color: var(--gray-900);
  background: var(--gray-100);
}
.mobile-nav a:hover { background: var(--gray-200); }

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

/* ----------------------------
   6) HERO SECTIONS
   ---------------------------- */
.hero {
  background: var(--brand-accent); /* brand light accent as welcoming but corporate */
  border-bottom: 1px solid var(--gray-200);
}
.hero .content-wrapper { padding: 10px 0; gap: 14px; }
.breadcrumb { display: flex; align-items: center; gap: 8px; font-size: var(--fs-14); color: var(--gray-600); }
.breadcrumb a { color: var(--blue-700); text-decoration: underline; }

/* ----------------------------
   7) BUTTONS
   ---------------------------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 16px; border-radius: 8px; font-weight: 600; line-height: 1; transition: background 0.2s, color 0.2s, box-shadow 0.2s, transform 0.2s; }
.btn-primary { background: var(--blue-700); color: #ffffff; box-shadow: var(--shadow-s); }
.btn-primary:hover { background: var(--blue-900); transform: translateY(-1px); }
.btn-secondary { background: #ffffff; color: var(--blue-700); border: 1px solid var(--blue-700); }
.btn-secondary:hover { background: var(--blue-100); }
.btn-link { background: transparent; color: var(--blue-700); padding: 0; border-radius: 0; text-decoration: underline; }
.btn:active { transform: translateY(0); }

.cta-group { display: flex; flex-wrap: wrap; gap: 10px; }

/* ----------------------------
   8) CARDS, LISTS & GRIDS (Flex)
   ---------------------------- */
/* Feature grid */
.feature-grid, .category-cards, .tour-grid, .region-grid, .usp-cards, .team-profiles {
  display: flex; flex-wrap: wrap; gap: 20px;
}
.feature, .category, .usp-cards .card, .team-profiles .profile, .region-grid .card, .tour-grid .card {
  flex: 1 1 260px; min-width: 260px; background: #fff; border: 1px solid var(--gray-200); border-radius: var(--radius-m); padding: 18px; box-shadow: var(--shadow-s); transition: transform 0.2s, box-shadow 0.2s; }
.feature:hover, .category:hover, .usp-cards .card:hover, .team-profiles .profile:hover, .region-grid .card:hover, .tour-grid .card:hover {
  transform: translateY(-2px); box-shadow: var(--shadow-m);
}

/* Card CTAs */
.card-ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }

/* Active filters */
.active-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.tag { display: inline-flex; align-items: center; padding: 6px 10px; background: var(--gray-100); border: 1px solid var(--gray-200); border-radius: 999px; color: var(--gray-800); font-size: var(--fs-14); }

/* Values as chips */
.values { display: flex; flex-wrap: wrap; gap: 10px; }
.values li { padding: 8px 12px; background: var(--gray-100); border: 1px solid var(--gray-200); border-radius: 999px; color: var(--gray-800); }

/* Benefits list with icons */
.benefits { display: flex; flex-wrap: wrap; gap: 12px; }
.benefits li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--gray-200); border-radius: var(--radius-m); background: #fff; }
.benefits img { width: 18px; height: 18px; }

/* Stepper */
.stepper { display: flex; flex-direction: column; gap: 10px; counter-reset: step; padding-left: 0; }
.stepper li { display: flex; gap: 8px; align-items: flex-start; }
.highlights, .inline-faq { display: flex; flex-direction: column; gap: 8px; padding: 12px; background: var(--surface-alt); border: 1px solid var(--gray-200); border-radius: var(--radius-m); }

/* Timeline / Info blocks / Events */
.timeline, .info-blocks, .events { display: flex; flex-direction: column; gap: 12px; padding: 14px; border: 1px solid var(--gray-200); border-radius: var(--radius-m); background: #fff; }
.events { align-items: flex-start; }

/* Date list */
.date-list { display: flex; flex-direction: column; gap: 10px; }
.date-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px; border: 1px solid var(--gray-200); border-radius: var(--radius-m); background: #fff; }

/* Pagination */
.pagination { display: flex; align-items: center; gap: 8px; color: var(--gray-700); }

/* Rating / Testimonials */
.testimonial-list { display: flex; flex-direction: column; gap: 16px; }
.rating-summary, .rating-badge { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--gray-100); border: 1px solid var(--gray-200); border-radius: var(--radius-m); color: var(--gray-900); }

/* Contact details */
.contact-details { display: flex; flex-direction: column; gap: 6px; padding: 12px; border: 1px solid var(--gray-200); border-radius: var(--radius-m); background: #fff; }

/* Breadcrumb already above */

/* ----------------------------
   9) LINKS
   ---------------------------- */
a { color: var(--blue-700); }
a:hover { color: var(--blue-900); }

/* ----------------------------
   10) FOOTER
   ---------------------------- */
footer {
  background: var(--blue-900);
  color: #EAF0F7;
  padding: 30px 0;
}
footer .content-wrapper { display: flex; flex-direction: column; gap: 16px; }
.footer-nav, .legal-nav { display: flex; flex-wrap: wrap; gap: 12px; }
.footer-nav a, .legal-nav a { color: #EAF0F7; opacity: 0.9; }
.footer-nav a:hover, .legal-nav a:hover { opacity: 1; text-decoration: underline; }
.footer-contact { display: flex; flex-direction: column; gap: 6px; }
.brand-signature { display: flex; align-items: center; gap: 12px; }
.brand-signature img { width: 34px; height: auto; }
.footer-ctas { display: flex; flex-wrap: wrap; gap: 10px; }
.newsletter { display: flex; flex-direction: column; gap: 8px; }

/* ----------------------------
   11) UTILITIES
   ---------------------------- */
.trust-badges { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.badge { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid var(--gray-200); border-radius: 999px; background: #fff; color: var(--gray-800); }
.badge img { width: 18px; height: 18px; }

.inline-muted { color: var(--gray-600); }

/* ----------------------------
   12) RESPONSIVE (Flex alignment rules)
   ---------------------------- */
@media (max-width: 768px) {
  .text-image-section { flex-direction: column; }
}

@media (min-width: 768px) {
  .content-wrapper { gap: 18px; }
}

@media (min-width: 992px) {
  .container { gap: 24px; }
  .content-wrapper { gap: 20px; }
  .cta-group { gap: 12px; }
}

/* ----------------------------
   13) PAGE-SPECIFIC POLISH
   ---------------------------- */
/* Index categories and features already handled by generic grids */
.category .link { font-weight: 600; }

/* Tour list small typography balances */
.tour-grid .card p { font-size: var(--fs-16); color: var(--gray-800); }

/* Regionen map list */
.region-grid .card a.link { margin-top: 6px; display: inline-flex; }

/* Über uns - team cards */
.team-profiles .profile h3 { margin-bottom: 4px; }

/* Termine - legend style example (text only in HTML) */
.info-blocks p strong { color: var(--gray-900); }

/* Legal pages hero minimal */
.hero p, .hero ul { color: var(--gray-800); }
.hero ul { display: flex; flex-direction: column; gap: 6px; padding-left: 0; }

/* ----------------------------
   14) HOVER & MICRO-INTERACTIONS
   ---------------------------- */
.card:hover .link { color: var(--blue-900); }
.card:hover { box-shadow: var(--shadow-m); }

/* ----------------------------
   15) COOKIE CONSENT BANNER & MODAL
   ---------------------------- */
.cookie-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1500;
  background: #FFFFFF; color: var(--gray-900);
  border-top: 1px solid var(--gray-200);
  box-shadow: 0 -6px 18px rgba(16,24,40,0.12);
  padding: 16px;
  display: flex; flex-direction: column; gap: 12px;
}
.cookie-banner .content { display: flex; flex-direction: column; gap: 8px; }
.cookie-banner .actions { display: flex; flex-wrap: wrap; gap: 10px; }
.cookie-banner .btn-accept { background: var(--blue-700); color: #fff; }
.cookie-banner .btn-accept:hover { background: var(--blue-900); }
.cookie-banner .btn-reject { background: #fff; color: var(--blue-700); border: 1px solid var(--blue-700); }
.cookie-banner .btn-settings { background: var(--brand-accent); color: var(--gray-900); border: 1px solid var(--gray-200); }

/* Modal overlay */
.cookie-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 1600;
  opacity: 0; pointer-events: none; transition: opacity 0.25s ease;
  display: flex; align-items: center; justify-content: center;
}
.cookie-modal {
  background: #fff; border-radius: var(--radius-l); width: min(680px, 92vw);
  display: flex; flex-direction: column; gap: 16px; padding: 18px; border: 1px solid var(--gray-200); box-shadow: var(--shadow-l);
  transform: translateY(10px); transition: transform 0.25s ease;
}
.cookie-modal .header { display: flex; align-items: center; justify-content: space-between; }
.cookie-modal .body { display: flex; flex-direction: column; gap: 12px; }
.cookie-modal .row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px; border: 1px solid var(--gray-200); border-radius: var(--radius-m); background: var(--surface-alt); }
.cookie-modal .footer { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
.cookie-modal .close { width: 36px; height: 36px; border-radius: 8px; background: var(--gray-100); }

/* Toggle mimic */
.toggle { position: relative; width: 46px; height: 26px; background: var(--gray-300); border-radius: 999px; transition: background 0.2s; display: flex; align-items: center; padding: 2px; }
.toggle::after { content: ""; width: 22px; height: 22px; background: #fff; border-radius: 50%; box-shadow: var(--shadow-s); transform: translateX(0); transition: transform 0.2s; }
.toggle.on { background: var(--blue-700); }
.toggle.on::after { transform: translateX(20px); }

/* Open state controls (JS should toggle body.cookie-open) */
body.cookie-open .cookie-overlay { opacity: 1; pointer-events: auto; }
body.cookie-open .cookie-modal { transform: translateY(0); }

/* ----------------------------
   16) ACCESSIBILITY STATES
   ---------------------------- */
.btn:focus-visible, .mobile-menu-toggle:focus-visible, .mobile-menu-close:focus-visible, .mobile-nav a:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* ----------------------------
   17) PRINT BASICS
   ---------------------------- */
@media print {
  .mobile-menu-toggle, .mobile-menu, .header-ctas, .cta-group, .btn, .cookie-banner, .cookie-overlay { display: none !important; }
  header { position: static; }
  a { text-decoration: underline; }
}

/* ----------------------------
   18) DESKTOP ENHANCEMENTS
   ---------------------------- */
@media (min-width: 1200px) {
  h1 { font-size: var(--fs-48); }
  h2 { font-size: var(--fs-40); }
  .hero .content-wrapper { padding: 16px 0; }
}

/* ----------------------------
   19) ALIGNMENT SAFEGUARDS
   ---------------------------- */
/* Ensure no content overlaps and maintain minimum gaps */
section .card, section .feature, section .category, section .profile { margin-bottom: 20px; }

/* ----------------------------
   20) HEADER BREADTH ON WIDE SCREENS
   ---------------------------- */
@media (min-width: 992px) {
  header .container { gap: 24px; }
  .main-nav a { padding: 12px 10px; }
}

/* ----------------------------
   21) SPECIFIC SMALL ELEMENTS
   ---------------------------- */
.breadcrumb a { color: var(--gray-700); }
.breadcrumb a:hover { color: var(--blue-700); }

/* ----------------------------
   22) OPTIONAL BRAND ACCENTS
   ---------------------------- */
/* Use warm brand accent subtly on chips/lines when desired */
.card.brand-accent { border-left: 4px solid var(--brand-secondary); }

/* ----------------------------
   23) HEADER SUPPORT ELEMENTS
   ---------------------------- */
.header-ctas .btn-primary { background: var(--brand-primary); }
.header-ctas .btn-primary:hover { background: #163223; }

/* ----------------------------
   24) NEWSLETTER NOTE
   ---------------------------- */
.newsletter a { color: #fff; text-decoration: underline; }

/* ----------------------------
   25) HERO CTAs
   ---------------------------- */
.hero .btn-primary { background: var(--blue-700); }
.hero .btn-secondary { border-color: var(--blue-700); color: var(--blue-700); }

/* ----------------------------
   26) PAGINATION LINKS
   ---------------------------- */
.pagination .link { color: var(--blue-700); }
.pagination .link:hover { color: var(--blue-900); }

/* ----------------------------
   27) COPYRIGHT
   ---------------------------- */
copyright, .copyright { display: flex; align-items: center; justify-content: center; color: #EAF0F7; opacity: 0.9; font-size: var(--fs-14); }

/* ----------------------------
   28) MISC BLOCKS
   ---------------------------- */
.evidence { display: flex; flex-direction: column; gap: 10px; padding: 12px; background: var(--gray-100); border: 1px solid var(--gray-200); border-radius: var(--radius-m); }

/* ----------------------------
   29) ENSURE FLEXBOX USAGE ONLY
   ---------------------------- */
/* No grid or columns are used anywhere in this stylesheet */