/* =================================================
   responsive.css — Regionaldirektion Malte Leesemann
   Strategy: CSS classes for layouts, inline styles
   for brand colours/shadows.
   Breakpoints:
     desktop  ≥ 1024px  full nav, full layout
     tablet   < 1024px  hamburger, 2-col grids
     mobile   <  768px  1-col layouts, tight padding
     xs       <  480px  very small portrait phones
   ================================================= */

/* ── Section padding ─────────────────────────────── */
.section-py {
  padding-top: 80px;
  padding-bottom: 80px;
}

/* ── Hero ────────────────────────────────────────── */
.hero-section {
  min-height: 100vh;
  min-height: 100dvh;
}
/* Mobile: fixed height (100svh = small viewport, locks to initial screen size) */
@media (max-width: 767px) {
  .hero-section {
    height: 100svh;
    min-height: unset;
    max-height: unset;
    flex-shrink: 0;
  }
}
.hero-content {
  padding: var(--space-16) var(--space-6);
}

/* ── Insurance / Service grids (auto-reflow) ─────── */
.insurance-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-6);
}
.service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-6);
}

/* ── Team grid ───────────────────────────────────── */
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: var(--space-5);
  margin-top: var(--space-6);
}
.team-banner {
  width: 100%;
  height: 440px;
  object-fit: cover;
  object-position: center 30%;
  border-radius: var(--radius-lg);
  display: block;
  margin-top: var(--space-6);
  box-shadow: var(--shadow-lg);
}

/* ── Contact grid ────────────────────────────────── */
.grid-contact {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-10);
  margin-top: var(--space-10);
  align-items: stretch;
}
.form-name-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

/* ── Footer grid ─────────────────────────────────── */
.grid-footer {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: var(--space-10);
  margin-bottom: var(--space-12);
}
.footer-col-secondary { display: block; }

/* ── Hero brand logo ─────────────────────────────── */
.hero-brand-logo { height: 48px; }
.hero-regionaldirektion { display: block; }
.hero-email-btn { display: none; }

/* ── Header ──────────────────────────────────────── */
.header-nav-desktop {
  display: flex;
  flex: 1;
}
.header-cta-desktop {
  display: flex;
  flex-shrink: 0;
}
.header-hamburger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--fg);
  border-radius: var(--radius);
  flex-shrink: 0;
  padding: 0;
  margin-left: auto;
  transition: background var(--duration-fast), color var(--duration-fast);
}
.header-hamburger:hover {
  background: var(--accent-light);
  color: var(--accent);
}

/* =================================================
   TABLET  max-width: 1023px
   ================================================= */
@media (max-width: 1023px) {
  .header-nav-desktop { display: none; }
  .header-cta-desktop { display: none; }
  .header-hamburger   { display: flex; }

  /* Transparent nav bar on tablet/mobile */
  .header-bar {
    background: rgba(255, 255, 255, 0.25) !important;
  }

  .team-banner { height: 380px; }

  .section-py {
    padding-top: 64px;
    padding-bottom: 64px;
  }
}

/* =================================================
   MOBILE  max-width: 767px
   ================================================= */
@media (max-width: 767px) {
  /* No background on navbar in mobile */
  .header-bar { background: transparent !important; }

  .section-py {
    padding-top: 48px;
    padding-bottom: 48px;
  }

  /* Hero — content centered vertically on mobile */
  .hero-section  {
    height: 100svh;
    min-height: unset;
    max-height: 100svh;
    align-items: center !important;
    flex-shrink: 0;
  }
  .hero-content  { padding: var(--space-12) var(--space-5) !important; }
  .hero-photo-bg { background-image: url('assets/img/bg-mobile.png') !important; }
  /* Uniform overlay for centered content */
  .hero-overlay  { background: rgba(0, 0, 0, 0.52) !important; }

  .hero-brand-logo { height: 40px; }

  /* "Regionaldirektion" breaks to its own line on mobile */
  .hero-regionaldirektion { display: block; }

  /* CTA buttons removed on mobile — phone/email live in HeroContactBar instead */
  .hero-cta-row   { display: none !important; }
  .hero-email-btn { display: none !important; }

  /* Agency name: smaller font, tighter margins on mobile */
  .hero-agency-name {
    font-size: clamp(1.4rem, 7vw, 1.75rem) !important;
    margin-top: var(--space-3) !important;
    margin-bottom: var(--space-5) !important;
  }
  .hero-tagline { margin-bottom: 12px !important; }
  .hero-lead    { margin-bottom: 0 !important; }

  /* Team — hide banner, 2-col cards on ALL mobile sizes */
  .team-banner { display: none; }
  .team-grid {
    grid-template-columns: repeat(2, 1fr);
    margin-top: var(--space-6);
  }
  /* First member spans full width */
  .team-card-featured { grid-column: span 2; grid-row: unset; }
  /* Featured card photo: landscape ratio to suit full-width card */
  .team-card-featured .team-photo-wrap { aspect-ratio: 16 / 7 !important; }

  /* Grids → single column */
  .grid-contact   { grid-template-columns: 1fr; }
  .grid-footer    { grid-template-columns: 1fr; gap: var(--space-6); margin-bottom: var(--space-8); }
  .form-name-row  { grid-template-columns: 1fr; }

  /* Footer mobile: hide secondary columns */
  .footer-col-secondary { display: none; }

  /* Insurance & service already auto-reflow to 1 col at this width */

  /* Hide CTA buttons in service and insurance sections on mobile */
  .service-tile-btn  { display: none !important; }
  .domain-card-cta   { display: none !important; }

  /* Service tiles: compact row layout on mobile — icon + title like a site button */
  .service-tile {
    cursor: pointer !important;
    flex-direction: row !important;
    align-items: center !important;
    padding: 11px var(--space-5) !important;
    gap: var(--space-3) !important;
  }
  .service-tile-icon {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    border-radius: var(--radius) !important;
  }
  .service-tile-icon svg {
    width: 16px !important;
    height: 16px !important;
  }
  .service-tile h3 {
    font-size: 0.9375rem !important;
    font-weight: 600 !important;
    margin: 0 !important;
  }
  .service-tile-desc { display: none !important; }

  /* Logo: hide "Regionaldirektion" sub-label */
  .header-label-sub { display: none; }
  /* Shrink parent logo slightly */
  .header-meck-logo { height: 24px !important; }
  /* Shrink divider */
  .header-divider   { height: 22px !important; }
}

/* ── Mobile nav: visible state (shown after scroll threshold) ── */
/* Tablet only (768–1023px): add frosted white bg when nav slides in */
@media (min-width: 768px) and (max-width: 1023px) {
  .header-bar--visible {
    background: rgba(255, 255, 255, 0.96) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.07) !important;
  }
}
/* Mobile (≤767px): subtle frosted tint when visible */
@media (max-width: 767px) {
  .header-bar--visible {
    background: rgba(255, 255, 255, 0.18) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border-bottom: none !important;
  }
}

/* ── Hero contact bar (mobile only, between hero and service section) ── */
.hero-contact-bar {
  display: none; /* hidden on desktop */
}
@media (max-width: 767px) {
  .hero-contact-bar {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-5) var(--space-5);
    background: var(--surface-alt);
    border-bottom: 1px solid var(--border);
  }
  .hero-contact-bar a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    text-decoration: none;
    font-size: 1rem;
    font-weight: 600;
    padding: 14px var(--space-5);
    border-radius: var(--radius);
    width: 100%;
    box-sizing: border-box;
  }
}

/* ── Static page content (Impressum, Datenschutz) ── */
.static-page-content p {
  margin: 0 0 var(--space-4);
}
.static-page-content p:last-child {
  margin-bottom: 0;
}
.static-page-content a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.static-page-content a:hover {
  color: var(--accent-hover);
}

/* ── Contact bottom sheet animation ──────────────── */
@keyframes slideUpSheet {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

/* =================================================
   XS PHONES  max-width: 479px
   ================================================= */
@media (max-width: 479px) {
  .hero-section {
    height: 100svh;
    min-height: unset;
    max-height: 100svh;
    flex-shrink: 0;
  }
  .hero-content { padding: var(--space-10) var(--space-4); }

  /* Keep 2-col team layout on XS phones too */
  /* (no reset here — inherits from mobile breakpoint) */

  /* Compress logo further: hide divider line */
  .header-meck-logo { height: 20px !important; }
  .header-divider   { display: none; }
}

/* =================================================
   DOMAIN DETAIL OVERLAY (full-screen slide-in panel)
   Opened by "Mehr erfahren" on insurance cards.
   ================================================= */

@keyframes domainSlideIn {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}
@keyframes domainSlideOut {
  from { transform: translateX(0); }
  to   { transform: translateX(100%); }
}

.domain-page {
  position: fixed;
  inset: 0;
  z-index: 500;
  background: var(--bg);
  overflow-y: auto;
  overscroll-behavior: contain;
  animation: domainSlideIn 400ms cubic-bezier(0.4, 0, 0.2, 1) both;
}
.domain-page--exiting {
  animation: domainSlideOut 340ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

/* Top bar */
.domain-topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  height: 60px;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
  display: flex;
  align-items: center;
}
.domain-topbar-inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--space-6);
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.domain-back-btn {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--fg);
  font-family: var(--font-body);
  padding: var(--space-2) 0;
  transition: color var(--duration-fast);
}

/* Hero */
.domain-hero {
  position: relative;
  min-height: 400px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.domain-hero-content {
  position: relative;
  z-index: 2;
  max-width: var(--content-max);
  margin: 0 auto;
  width: 100%;
  padding: var(--space-12) var(--space-6) var(--space-10);
}

/* Content */
.domain-content {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--space-12) var(--space-6);
}
.domain-sections {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}
.domain-section-header {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding-bottom: var(--space-4);
  margin-bottom: var(--space-5);
}
.domain-section-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.domain-product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-4);
}
.domain-product-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  border-left: 3px solid transparent;
  transition: box-shadow var(--duration-base) var(--ease-out),
              transform var(--duration-base) var(--ease-out);
}
.domain-product-card:hover {
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}

/* USP band */
.domain-usp-band {
  border-top: 1px solid transparent;
  border-bottom: 1px solid transparent;
}
.domain-usp-inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--space-10) var(--space-6);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-6);
}

/* CTA */
.domain-cta {
  padding: var(--space-16) var(--space-6);
  text-align: center;
  max-width: var(--content-max);
  margin: 0 auto;
}

/* Footer */
.domain-footer {
  background: var(--surface-dark);
  color: rgba(255, 255, 255, 0.4);
  font-size: var(--text-xs);
  padding: var(--space-6);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-6);
  flex-wrap: wrap;
}
.domain-footer a {
  color: rgba(255, 255, 255, 0.4);
  text-decoration: none;
  transition: color var(--duration-fast);
}
.domain-footer a:hover { color: var(--accent); }

@media (max-width: 767px) {
  .domain-hero         { min-height: 280px; }
  .domain-hero-content { padding: var(--space-10) var(--space-5) var(--space-8); }
  .domain-content      { padding: var(--space-8) var(--space-5); }
  .domain-sections     { gap: 0; }
  .domain-cta          { padding: var(--space-10) var(--space-5); }
  .domain-topbar-inner { padding: 0 var(--space-5); }
  .domain-topbar-brand { display: none; }
  .domain-footer       { flex-direction: column; gap: var(--space-4); }
}
@media (max-width: 479px) {
  .domain-hero         { min-height: 220px; }
  .domain-product-grid { grid-template-columns: 1fr; }
  .domain-usp-inner    { grid-template-columns: 1fr; padding: var(--space-8) var(--space-5); }
}