/* =====================================================================
   Legal modal — full-screen orange overlay for Impressum / Datenschutz / AGB.
   Styled to match the rest of the site (Bebas Neue display, Space Grotesk
   body, brand orange). Fully responsive: stacked on phones, two-column on
   tablet+, generous margins on desktop.
   ===================================================================== */

.gp-legal-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: var(--gp-brand-color-1);
  color: var(--gp-color-white);
  font-family: var(--gp-font-family-space-grotesk);
  flex-direction: column;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  /* MobileSnap sets touch-action: none on <body> to take over scrolling.
     Re-enable vertical pan inside the modal so the user can scroll it
     with a finger on iOS. */
  touch-action: pan-y;
  /* Independent overscroll so flicks inside the modal don't bubble up
     to the underlying page transform. */
  overscroll-behavior: contain;

  /* Hidden by default; legal-modal.js toggles -is-open + a panel modifier. */
  display: none;
}
.gp-legal-modal.-is-open {
  display: flex;
}

/* Close button — fixed top-right, always reachable */
.gp-legal-modal__close {
  position: fixed;
  top: 18px;
  right: 18px;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  color: var(--gp-color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 1010;
  transition: background-color 0.2s ease, transform 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}
.gp-legal-modal__close:hover,
.gp-legal-modal__close:focus-visible {
  background: rgba(255, 255, 255, 0.32);
  outline: none;
}
.gp-legal-modal__close:active {
  transform: scale(0.94);
}

/* Vertical "ALLES GUTE KOMMT NACH OBEN" on left edge — design touch.
   Hidden on very narrow phones to save room. */
.gp-legal-modal__edge-text {
  position: fixed;
  left: 14px;
  top: 50%;
  transform: translateY(-50%) rotate(-90deg);
  transform-origin: left center;
  font-family: var(--gp-font-family-neue);
  font-size: 11px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  white-space: nowrap;
  pointer-events: none;
  z-index: 1005;
}
@media (max-width: 440px) {
  .gp-legal-modal__edge-text { display: none; }
}

/* Big top-left G. PIRKER brand mark (display only, decorative) */
.gp-legal-modal__brand {
  position: relative;
  padding: 56px 28px 0 56px;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 22px;
  align-items: end;
  pointer-events: none;
}
.gp-legal-modal__brand-fn,
.gp-legal-modal__brand-ln {
  font-family: var(--gp-font-family-neue);
  color: rgba(255, 255, 255, 0.4);
  line-height: 0.85;
  text-transform: uppercase;
  letter-spacing: 0;
  font-size: clamp(54px, 16vw, 160px);
}
.gp-legal-modal__brand-fn {
  grid-row: 1;
}
.gp-legal-modal__brand-ln {
  grid-row: 2;
  grid-column: 1 / -1;
}
.gp-legal-modal__brand-sub {
  grid-row: 1;
  grid-column: 2;
  align-self: end;
  margin-bottom: clamp(6px, 1vw, 14px);
  font-family: var(--gp-font-family-space-grotesk);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-weight: 400;
  font-size: clamp(12px, 1.6vw, 16px);
  color: var(--gp-color-white);
}

@media (max-width: 767px) {
  .gp-legal-modal__brand {
    padding: 28px 24px 0 36px;
    column-gap: 14px;
  }
  .gp-legal-modal__brand-sub {
    margin-bottom: 6px;
    font-size: 11px;
    letter-spacing: 1.2px;
  }
}

/* Viewport holds the panel content + the modal footer. Modal itself owns
   the scroll, so this is just a flex item that grows to fill remaining
   space below the brand block. */
.gp-legal-modal__viewport {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  padding-bottom: 24px;
}
.gp-legal-modal__inner {
  padding: 24px 28px 8px 56px;
  max-width: 880px;
  width: 100%;
  flex: 1 0 auto;
}
@media (max-width: 767px) {
  .gp-legal-modal__inner {
    padding: 16px 24px 8px 36px;
  }
}

/* Panels — only one shown based on .-is-{name} on the root */
.gp-legal-modal__panel { display: none; }
.gp-legal-modal.-is-impressum   .-panel-impressum   { display: block; }
.gp-legal-modal.-is-datenschutz .-panel-datenschutz { display: block; }
.gp-legal-modal.-is-agb         .-panel-agb         { display: block; }

/* Typography inside panels */
.gp-legal-modal__title {
  font-family: var(--gp-font-family-space-grotesk);
  font-weight: 500;
  font-size: clamp(18px, 2.4vw, 22px);
  color: var(--gp-color-white);
  margin: 0 0 6px;
}
.gp-legal-modal__lede {
  font-family: var(--gp-font-family-space-grotesk);
  font-weight: 500;
  font-size: clamp(15px, 1.8vw, 18px);
  color: var(--gp-color-white);
  line-height: 1.35;
  margin: 0 0 22px;
}
.gp-legal-modal__lede.-uppercase {
  text-transform: uppercase;
  font-size: clamp(13px, 1.5vw, 15px);
  letter-spacing: 1.2px;
}

.gp-legal-modal__block {
  margin: 0 0 16px;
  font-size: 13px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.9);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.gp-legal-modal__block.-section {
  text-transform: none;
  letter-spacing: 0;
  margin-bottom: 18px;
}
.gp-legal-modal__block.-address { font-style: normal; }
.gp-legal-modal__block.-meta {
  font-size: 12px;
  letter-spacing: 0.6px;
}

.gp-legal-modal__owner {
  font-weight: 500;
  color: var(--gp-color-white);
  margin: 0 0 2px;
}
.gp-legal-modal__owner-sub {
  margin: 0;
  color: rgba(255, 255, 255, 0.7);
}

.gp-legal-modal__subheading {
  font-family: var(--gp-font-family-neue);
  font-size: 18px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--gp-color-white);
  margin: 0 0 6px;
  font-weight: 400;
}
.gp-legal-modal__body {
  font-size: 13.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.88);
  margin: 0;
}
.gp-legal-modal__body.-agb-body {
  color: rgba(255, 255, 255, 0.72);
  font-size: 13px;
  line-height: 1.7;
}

/* AGB: 20 numbered sections of numbered clauses. The clause number hangs in
   the left margin so the clause text forms one clean column. Set in sentence
   case like the Datenschutz panel — .gp-legal-modal__block defaults to
   uppercase, which is unreadable over 100 clauses of binding terms. */
.gp-legal-modal__block.-agb-section {
  margin-bottom: 26px;
  text-transform: none;
  letter-spacing: 0;
}

.gp-legal-modal__subheading.-agb-heading {
  display: flex;
  gap: 10px;
  margin-bottom: 12px;
}

.gp-legal-modal__body.-agb-clause {
  position: relative;
  color: rgba(255, 255, 255, 0.72);
  font-size: 13px;
  line-height: 1.7;
  padding-left: 46px;
  margin-bottom: 10px;
}

.gp-legal-modal__body.-agb-clause .gp-legal-modal__clause-no {
  position: absolute;
  left: 0;
  top: 0;
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, 0.5);
}

@media (max-width: 600px) {
  .gp-legal-modal__body.-agb-clause {
    padding-left: 40px;
  }
}

.gp-legal-modal a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.4);
  text-underline-offset: 2px;
  transition: text-decoration-color 0.2s ease;
}
.gp-legal-modal a:hover,
.gp-legal-modal a:focus-visible {
  text-decoration-color: var(--gp-color-white);
}

/* ====== Footer block inside modal — brand + 3-col contact + nav ====== */

.gp-legal-modal__footer {
  margin-top: 64px;
  padding: 28px 28px 24px 56px;
  display: grid;
  gap: 24px;
}
@media (max-width: 767px) {
  .gp-legal-modal__footer {
    margin-top: 40px;
    padding: 24px 24px 18px 36px;
  }
}

.gp-legal-modal__footer-brand {
  font-family: var(--gp-font-family-neue);
  color: var(--gp-color-white);
  line-height: 0.85;
  text-transform: uppercase;
}
.gp-legal-modal__footer-brand-fn,
.gp-legal-modal__footer-brand-ln {
  display: block;
  font-size: 40px;
  letter-spacing: 0;
}
@media (max-width: 767px) {
  .gp-legal-modal__footer-brand-fn,
  .gp-legal-modal__footer-brand-ln {
    font-size: 32px;
  }
}

.gp-legal-modal__footer-contact {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  font-size: 12px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.92);
}
.gp-legal-modal__footer-item {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.gp-legal-modal__footer-item strong {
  font-weight: 600;
  letter-spacing: 0.4px;
}

@media (min-width: 600px) {
  .gp-legal-modal__footer-contact {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
  }
}

.gp-legal-modal__footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 20px;
  margin: 4px 0 0;
  padding: 0;
}
.gp-legal-modal__footer-links button {
  font-family: inherit;
  font-size: 11px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  background: none;
  border: 0;
  padding: 0;
  color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  transition: color 0.2s ease;
}
.gp-legal-modal__footer-links button:hover,
.gp-legal-modal__footer-links button:focus-visible {
  color: var(--gp-color-white);
  outline: none;
}

/* ====== The IMPRESSUM/DATENSCHUTZ/AGB buttons that open the modal ====== */
.gp-legal-link {
  font-family: var(--gp-font-family-space-grotesk);
  font-size: 11px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  background: none;
  border: 0;
  padding: 0;
  color: inherit;
  cursor: pointer;
  text-decoration: none;
  transition: opacity 0.2s ease;
}
.gp-legal-link:hover,
.gp-legal-link:focus-visible {
  opacity: 0.75;
  outline: none;
}

/* Lock background scroll while modal is open (works alongside MobileSnap's
   own body lock — this is idempotent). */
html.gp-legal-modal-open,
html.gp-legal-modal-open body {
  overflow: hidden !important;
}

/* ====== Desktop: comfortable side margins + larger reading area ====== */
@media (min-width: 1024px) {
  .gp-legal-modal__inner {
    padding-left: 80px;
    padding-right: 80px;
    padding-top: 32px;
  }
  .gp-legal-modal__brand {
    padding-left: 80px;
    padding-top: 72px;
  }
  .gp-legal-modal__footer {
    padding-left: 80px;
    padding-right: 80px;
  }
}