/* ==========================================================================
   SUPERLOOM – Layout
   Grid, breakpoints, page margins, section spacing, footer structure.
   Breakpoints: mobile 360–599 | tablet 600–1499 | desktop 1500+
   ========================================================================== */


/* --------------------------------------------------------------------------
   Page wrapper – max-width container with horizontal margins
-------------------------------------------------------------------------- */

.page {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--margin-page);  /* 2.369rem both sides, all breakpoints */
}


/* --------------------------------------------------------------------------
   Grid
   Mobile:  2 columns
   Tablet:  6 columns
   Desktop: 12 columns
   Gutter:  --grid-gap (1.333rem) – consistent across all breakpoints
-------------------------------------------------------------------------- */

.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--grid-gap);
  width: 100%;
}

@media (min-width: 600px) {
  .grid {
    grid-template-columns: repeat(6, 1fr);
  }
}

@media (min-width: 1230px) {
  .grid {
    grid-template-columns: repeat(12, 1fr);
  }
}


/* --------------------------------------------------------------------------
   Column span helpers
   Mobile: always full width (grid not used for content positioning)
   Tablet: headline 1–5/6, intro 2–6/6
   Desktop: headline 1–7/12, intro 4–12/12
-------------------------------------------------------------------------- */

/* Full width at all breakpoints */
.col-full {
  grid-column: 1 / -1;
}

/* Tablet column spans */
@media (min-width: 600px) {
  /* Headline: cols 1–5 of 6 */
  .col-hl {
    grid-column: 1 / 5;
  }

  /* Intro copy: cols 2–6 of 6, text right-aligned */
  .col-intro {
    grid-column: 2 / 7;
    text-align: right;
  }

  /* Currently card: full width on tablet */
  .col-currently {
    grid-column: 1 / -1;
  }

  /* Contact label: full width, right-aligned */
  .col-contact-label {
    grid-column: 2 / 7;
    text-align: right;
  }

  /* Contact email: full width, left-aligned */
  .col-contact-email {
    grid-column: 1 / -1;
  }
}

/* Desktop column spans */
@media (min-width: 1230px) {
  /* Headline: cols 1–7 of 12 */
  .col-hl {
    grid-column: 1 / 8;
  }

  /* Intro copy: cols 4–12 of 12, text right-aligned */
  .col-intro {
    grid-column: 5 / 13;
    text-align: right;
  }

  /* Currently card: cols 3–11 */
  .col-currently {
    grid-column: 1 / 10;
  }

  /* Contact label: cols 4–12, right-aligned */
  .col-contact-label {
    grid-column: 4 / 13;
    text-align: right;
  }

  /* Contact email: cols 1–6 */
  .col-contact-email {
    grid-column: 1 / 7;
  }
}


/* --------------------------------------------------------------------------
   Header
-------------------------------------------------------------------------- */

.site-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding-top: var(--size-5xl);     /* 5.61rem above logo */
  padding-bottom: 0;                /* space-0 between logo and headline */
}


/* --------------------------------------------------------------------------
   Section spacing
   Vertical gaps between content blocks – matches spec exactly.
-------------------------------------------------------------------------- */

/* Space between header and headline: 7.48rem */
.section--hero {
  padding-top: var(--size-6xl);
}

/* Space after headline before copy: 5.61rem */
.gap-after-hl {
  margin-top: var(--size-5xl);
}

/* Space after copy before card: 7.48rem */
.gap-after-copy {
  margin-top: var(--size-6xl);
}

/* Space after card before contact: 5.61rem */
.gap-after-card {
  margin-top: var(--size-5xl);
}

/* Space between contact label and email: 1rem */
.gap-contact-inner {
  margin-top: var(--size-sm);
}

/* Space after contact before footer: 7.48rem */
.gap-before-footer {
  margin-top: var(--size-6xl);
}


/* --------------------------------------------------------------------------
   Footer
   No top border – separated by spacing only.
   Row order: 1. Impressum/Colophon  2. Datenschutz
              3. External links       4. Copyright

   Mobile/Tablet: each item on its own line, legal right-aligned.
   Desktop: rows 1+2 combined (site left, legal right),
            rows 3+4 combined (external left, copyright right).
-------------------------------------------------------------------------- */

.site-footer {
  padding-bottom: var(--size-5xl);  /* 5.61rem below copyright */
}

.footer-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--size-sm);
}

.footer-row + .footer-row {
  margin-top: var(--size-sm);  /* 1rem between rows */
}

.footer-left {
  display: flex;
  gap: var(--size-sm);
  align-items: baseline;
}

.footer-right {
  display: flex;
  gap: var(--size-sm);
  align-items: baseline;
}

.footer-copy {
  text-align: left;
}

/* Mobile + Tablet: legal nav right-aligned, each row stacks */
@media (max-width: 1229px) {
  .footer-row {
    flex-direction: column;
    align-items: flex-start;
  }

  /* right-aligned on all small breakpoints */
  .footer-right--legal {
    align-self: flex-end;
  }

  /* Copyright right-aligned */
  .footer-copy {
    align-self: flex-start;
  }
}

/* Desktop: combine into two rows of two */
@media (min-width: 1230px) {
  .footer-row {
    flex-direction: row;
  }
}


/* --------------------------------------------------------------------------
   Subpages – Impressum, Datenschutz, Colophon
   Simple left-aligned layout, full width on mobile.
-------------------------------------------------------------------------- */

.subpage-content {
  padding-top: var(--size-6xl);
  padding-bottom: var(--size-6xl);
  max-width: 65ch;
  /* Prevents long German compound words from overflowing the container */
  overflow-wrap: break-word;
}

.subpage-content h1 {
  margin-bottom: var(--size-6xl);
}

.subpage-content h2 {
  margin-top: var(--size-lg);   /* 1.777rem – reduced from 7.48rem */
  margin-bottom: var(--size-md);
}

.subpage-content h3 {
  margin-top: var(--size-lg);
  margin-bottom: var(--size-xs);
}

.subpage-content h4 {
  margin-top: var(--size-sm);
  margin-bottom: var(--size-xs);
}

.subpage-content p + p {
  margin-top: var(--size-md);
}