/* ==========================================================================
   Page structure & layout
   Macro positioning/grid for the recurring page chrome (header, main
   content area, footer). Discrete reusable UI pieces live in components.css.
   ========================================================================== */

/* ---- Site header ---------------------------------------------------------- */
/* The frosted-glass background lives on ::before instead of directly on
   .site-header: `backdrop-filter` (like `filter`/`transform`) makes an
   element the containing block for its `position: fixed` descendants. That
   silently confined the fixed-position nav drawer (a descendant of
   .site-header) to the header's own 80px-tall box. A pseudo-element has no
   real children, so it can't cause that problem while looking identical. */
.site-header {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 50;
  border-bottom: 1px solid var(--color-outline-variant);
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  transition: border-color var(--duration-base) var(--ease-standard);
}

.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: var(--color-surface-90);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.site-header__nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 80px;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--margin-mobile);
}

.site-header__brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Mobile/tablet: off-canvas drawer covering the full viewport height on the
   left, exactly half the viewport width. Above --breakpoint-header-nav it
   resets back to an inline nav row. */
.site-header__nav-links {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
  width: 50vw;
  min-width: 220px;
  overflow-y: auto;
  padding: 24px 24px 32px;
  background-color: var(--color-surface);
  border-right: 1px solid var(--color-outline-variant);
  box-shadow: 4px 0 20px var(--color-cocoa-dark-10);
  transform: translateX(-100%);
  transition: transform var(--duration-base) var(--ease-standard);
}

.site-header__nav-links.is-open {
  transform: translateX(0);
}

.site-header__nav-logo-link {
  display: flex;
  justify-content: center;
  width: 100%;
}

.site-header__nav-logo {
  height: 64px;
  width: auto;
}

.site-header__nav-primary {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
}

.site-header__nav-primary .nav-link {
  font-family: var(--font-body-md);
  font-size: 18px;
  line-height: 26px;
  font-weight: 600;
  letter-spacing: normal;
  text-transform: none;
}

/* Footer: two rows, each pairing one legal link with its matching icon on
   the same line (Impressum + phone, Datenschutz + Instagram), so both
   sides line up evenly instead of a lopsided text-stack vs. icon-stack. */
.site-header__nav-footer {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  margin-top: auto;
  padding-top: 24px;
  border-top: 1px solid var(--color-outline-variant);
}

.site-header__nav-footer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
}

.nav-link--legal {
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  letter-spacing: 0.05em;
  color: var(--color-outline);
}

/* Round, filled phone button - small gold accent CTA next to Impressum. */
.site-header__nav-phone-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-color: var(--color-metallic-gold);
  color: var(--color-primary);
  transition: background-color var(--duration-fast) var(--ease-standard);
}

.site-header__nav-phone-btn:hover {
  background-color: var(--color-secondary-fixed-dim);
}

.site-header__nav-phone-btn .material-symbols-outlined {
  font-size: 14px;
  font-variation-settings: "FILL" 1;
}

/* Plain icon link, no button box. */
.site-header__nav-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 4px;
  color: var(--color-on-surface-variant);
  transition: color var(--duration-fast) var(--ease-standard);
}

.site-header__nav-social:hover {
  color: var(--color-caramel-accent);
}

.site-header__nav-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 9998;
  background-color: rgba(38, 23, 12, 0.4);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-base) var(--ease-standard);
}

.site-header__nav-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}

.site-header__menu-button {
  display: inline-flex;
  padding: 8px;
  color: var(--color-primary);
}

@media (min-width: 768px) {
  .site-header__nav {
    padding-inline: var(--margin-desktop);
  }
}

/* The nav row (logo + 6 links) needs more room than the 768px content
   breakpoint offers - it wraps and collides below this. Keep the
   hamburger drawer active until there's genuinely enough width for
   everything to sit on one line. */
@media (min-width: 1150px) {
  .site-header__nav-links {
    position: static;
    z-index: auto;
    flex-direction: row;
    align-items: center;
    gap: 32px;
    width: auto;
    margin-left: auto;
    overflow: visible;
    padding: 0;
    background-color: transparent;
    border-right: none;
    box-shadow: none;
    transform: none;
    transition: none;
  }

  .site-header__nav-logo-link {
    display: none;
  }

  .site-header__nav-primary {
    flex-direction: row;
    align-items: center;
    gap: 32px;
    width: auto;
  }

  .site-header__nav-primary .nav-link {
    font-family: var(--font-label-sm);
    font-size: 13px;
    line-height: 18px;
    font-weight: var(--text-label-sm-fw);
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  .site-header__nav-footer {
    display: none;
  }

  .site-header__menu-button,
  .site-header__nav-backdrop {
    display: none;
  }
}

/* ---- Main content area ---------------------------------------------------- */
.main-content {
  flex-grow: 1;
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding: 128px var(--margin-mobile) 96px;
}

@media (min-width: 768px) {
  .main-content {
    padding-inline: var(--margin-desktop);
  }
}

.main-content--wide {
  max-width: 1440px;
}

/* ---- Tile grid ----------------------------------------------------------------
   Mobile & tablet: horizontally scrollable, scroll-snapped card row. Every
   card centers itself when snapped; ::before/::after spacers give the first
   and last card room to actually scroll into a centered position (without
   them there'd be nowhere left to scroll once an edge card is centered).
   Desktop: unchanged 3-column grid. -------------------------------------- */
.tile-grid {
  /* Fluid card width: scales continuously with the viewport across the
     whole mobile + tablet carousel range (no breakpoint jump), while
     matching the size mobile always had at the small end and the size
     tablets always had at the point they hand off to the desktop grid
     (see the 1000px grid breakpoint below and in components.css). */
  --tile-width: clamp(220px, 68vw, 680px);
  display: flex;
  align-items: flex-start;
  gap: 16px;
  width: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  cursor: grab;
  user-select: none;
}

.tile-grid.is-dragging {
  scroll-snap-type: none;
  cursor: grabbing;
}

.tile-grid::-webkit-scrollbar {
  display: none;
}

.tile-grid::before,
.tile-grid::after {
  content: "";
  flex: 0 0 calc((100% - var(--tile-width)) / 2);
}

@media (min-width: 1000px) {
  .tile-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--gutter);
    overflow-x: visible;
    scroll-snap-type: none;
    cursor: auto;
  }

  .tile-grid::before,
  .tile-grid::after {
    content: none;
  }
}

/* ---- Site footer ------------------------------------------------------------ */
.site-footer {
  position: relative;
  z-index: 10;
  margin-top: auto;
  width: 100%;
  padding-block: 48px;
  background-color: var(--color-surface-dim);
  border-top: 1px solid var(--color-outline-variant);
}

.site-footer__inner {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--margin-mobile);
}

@media (min-width: 1150px) {
  .site-footer__inner {
    padding-inline: var(--margin-desktop);
  }
}

.site-footer__top {
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  gap: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--color-outline-variant);
}

/* Tablet: 2-up grid with the brand block spanning the full width on its
   own row, Kontakt/Erreichbarkeit side by side below — avoids jumping
   straight from single-column mobile to the fully left-aligned desktop
   3-column layout. */
@media (min-width: 768px) and (max-width: 1149px) {
  .site-footer__top {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px 40px;
  }

  .site-footer__col:first-child {
    grid-column: 1 / -1;
  }
}

@media (min-width: 1150px) {
  .site-footer__top {
    grid-template-columns: repeat(3, 1fr);
  }
}

.site-footer__col {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.site-footer__row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.site-footer__bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 24px;
}

@media (min-width: 768px) {
  .site-footer__bottom {
    flex-direction: row;
  }
}