/* ============================================================
   MITTE BÜRO — LEGAL PAGES

   File:
   /legal.css

   Used by:
   /data-policy/
   /imprint/

   Loaded AFTER:
   /style.css

   NAVIGATION
   ------------------------------------------------------------
   [00] SETTINGS
   [01] PAGE
   [02] TOP INFORMATION
   [03] CONTENT
   [04] LEGAL SECTIONS
   [05] FOOTER
   [06] DESKTOP
   [07] COLLISION STATES
   [08] HOVER
   [09] REDUCED MOTION
   ============================================================ */


/* ============================================================
   [00] SETTINGS
   ============================================================ */

.legal-page {

  --legal-title-size-mobile:
    44px;

  --legal-title-size-desktop:
    46px;

  --legal-section-title-size:
    20px;

  --legal-mobile-content-width:
    100%;

  /*
    Desktop legal copy fills the complete
    350px editorial column.

    Right edge aligns with:
    - email above
    - address below
  */

  --legal-desktop-content-width:
    var(--desktop-left-width);

  --legal-title-content-gap:
    46px;

  --legal-section-gap:
    38px;

  --legal-heading-copy-gap:
    10px;

  --legal-footer-gap-mobile:
    80px;

  --legal-footer-gap-desktop:
    120px;
}


/* ============================================================
   [01] PAGE
   ============================================================ */

html {
  background:
    var(--paper);
}


body.legal-page {
  margin:
    0;

  background:
    var(--paper);

  color:
    var(--ink);
}


.legal-shell {
  position:
    relative;

  box-sizing:
    border-box;

  display:
    flex;

  flex-direction:
    column;

  width:
    100%;

  min-height:
    100dvh;

  padding:
    0;

  opacity:
    1;

  animation:
    page-enter
    0.4s
    ease
    both;
}


/* ============================================================
   [02] TOP INFORMATION
   ============================================================ */

.legal-top {
  position:
    relative;

  box-sizing:
    border-box;

  width:
    100%;

  height:
    72px;
}


/* ------------------------------------------------------------
   Shared micro typography
   ------------------------------------------------------------ */

.legal-return,
.legal-email,
.legal-year,
.legal-coordinates,
.legal-rights {
  font-family:
    "Barlow Semi Condensed",
    sans-serif;

  font-size:
    var(--micro-font-size);

  font-weight:
    800;

  line-height:
    var(--micro-line-height);

  letter-spacing:
    0.04em;

  text-transform:
    uppercase;

  -webkit-text-stroke:
    0;

  white-space:
    nowrap;
}


/* ------------------------------------------------------------
   Return
   ------------------------------------------------------------ */

.legal-return {
  position:
    absolute;

  top:
    28px;

  left:
    var(--side);

  color:
    var(--ink);

  text-decoration:
    none;

  -webkit-tap-highlight-color:
    transparent;

  transition:
    color
    0.16s
    ease;
}


/* ------------------------------------------------------------
   Email
   ------------------------------------------------------------ */

.legal-email {
  position:
    absolute;

  top:
    28px;

  right:
    var(--side);

  color:
    var(--ink);

  text-decoration:
    none;

  text-align:
    right;

  -webkit-tap-highlight-color:
    transparent;

  transition:
    color
    0.16s
    ease;
}


/* ------------------------------------------------------------
   Desktop-only top information
   ------------------------------------------------------------ */

.legal-year,
.legal-coordinates,
.legal-rights {
  display:
    none;
}


/* ============================================================
   [03] CONTENT
   ============================================================ */

.legal-content {
  position:
    relative;

  box-sizing:
    border-box;

  width:
    100%;

  padding:
    8px
    var(--side)
    0;
}


/* ------------------------------------------------------------
   Page title
   ------------------------------------------------------------ */

.legal-title {
  width:
    100%;

  margin:
    0;

  font-family:
    "Barlow Condensed",
    sans-serif;

  font-size:
    var(--legal-title-size-mobile);

  font-weight:
    800;

  line-height:
    0.92;

  letter-spacing:
    0.01em;

  text-transform:
    uppercase;

  -webkit-text-stroke:
    0;
}


/* ------------------------------------------------------------
   Sections wrapper
   ------------------------------------------------------------ */

.legal-sections {
  width:
    var(--legal-mobile-content-width);

  max-width:
    100%;

  margin-top:
    var(--legal-title-content-gap);
}


/* ============================================================
   [04] LEGAL SECTIONS
   ============================================================ */

.legal-section {
  width:
    100%;

  margin:
    0 0
    var(--legal-section-gap);
}


.legal-section:last-child {
  margin-bottom:
    0;
}


/* ------------------------------------------------------------
   Section heading
   ------------------------------------------------------------ */

.legal-section__title {
  margin:
    0;

  font-family:
    "Barlow Condensed",
    sans-serif;

  font-size:
    var(--legal-section-title-size);

  font-weight:
    800;

  line-height:
    1;

  letter-spacing:
    0.04em;

  text-transform:
    uppercase;

  -webkit-text-stroke:
    0;
}


/* ------------------------------------------------------------
   Body copy

   Barlow Semi Condensed Semibold
   3% letter spacing
   ------------------------------------------------------------ */

.legal-section__body {
  width:
    min(
      330px,
      100%
    );

  margin-top:
    var(--legal-heading-copy-gap);

  font-family:
    "Barlow Semi Condensed",
    sans-serif;

  font-size:
    var(--body-font-size);

  font-weight:
    600;

  line-height:
    var(--body-line-height);

  letter-spacing:
    0.03em;

  -webkit-text-stroke:
    0;

  text-align:
    justify;

  text-align-last:
    left;

  text-justify:
    inter-word;

  text-wrap:
    pretty;
}


.legal-section__body p {
  margin:
    0 0 12px;
}


.legal-section__body p:last-child {
  margin-bottom:
    0;
}


/* ------------------------------------------------------------
   Body links

   No underline.

   Where useful, the HTML itself supplies:
   >
   ------------------------------------------------------------ */

.legal-section__body a,
.legal-section__body a:visited {
  color:
    var(--ink);

  text-decoration:
    none;

  transition:
    color
    0.16s
    ease;
}


/* ============================================================
   [05] FOOTER
   ============================================================ */

.legal-footer {
  box-sizing:
    border-box;

  width:
    100%;

  margin-top:
    auto;

  padding-top:
    var(--legal-footer-gap-mobile);
}


/* ------------------------------------------------------------
   Mobile footer
   ------------------------------------------------------------ */

.legal-footer__mobile {
  box-sizing:
    border-box;

  display:
    grid;

  grid-template-columns:
    auto
    1fr;

  align-items:
    end;

  gap:
    20px;

  width:
    100%;

  padding:
    0
    var(--side)
    max(
      28px,
      env(safe-area-inset-bottom)
    );
}


.legal-footer__mobile-left,
.legal-footer__mobile-right {
  gap:
    5px;

  font-family:
    "Barlow Semi Condensed",
    sans-serif;

  font-size:
    var(--micro-font-size);

  font-weight:
    800;

  line-height:
    var(--micro-line-height);

  letter-spacing:
    0.04em;

  text-transform:
    uppercase;

  -webkit-text-stroke:
    0;
}


.legal-footer__mobile-left {
  display:
    flex;

  flex-direction:
    column;

  align-items:
    flex-start;
}


.legal-footer__mobile-right {
  display:
    flex;

  flex-direction:
    column;

  align-items:
    flex-end;

  justify-self:
    end;

  text-align:
    right;
}


/* ------------------------------------------------------------
   Footer links / colour safety
   ------------------------------------------------------------ */

.legal-footer a,
.legal-footer a:visited,
.legal-footer__address,
.legal-footer__address a,
.legal-footer__address a:visited {
  color:
    var(--ink);

  text-decoration:
    none;
}


/* ------------------------------------------------------------
   Address link

   Only the visible address receives pointer events.
   ------------------------------------------------------------ */

.legal-footer__address-link,
.legal-footer__address-link:visited {
  display:
    inline-block;

  width:
    max-content;

  color:
    var(--ink);

  text-decoration:
    none;

  pointer-events:
    auto;

  -webkit-tap-highlight-color:
    transparent;

  transition:
    color
    0.16s
    ease;
}


.legal-footer__desktop {
  display:
    none;
}


/* ============================================================
   [06] DESKTOP

   Shared wide-screen scale:
   - unchanged through 1440px
   - gradual growth to 125% at 1800px
   - centered composition beyond 1800px

   Used by both Data Policy and Imprint.
   Mobile remains unchanged.
   ============================================================ */

@media (min-width: 800px) {


  /* ----------------------------------------------------------
     SHARED LEGAL-PAGE SCALE
     ---------------------------------------------------------- */

  body.legal-page {
    --desktop-layout-unit:
      var(--wide-unit, 1px);

    --desktop-edge:
      calc(28 * var(--desktop-layout-unit));

    --desktop-left-width:
      calc(350 * var(--desktop-layout-unit));

    --desktop-intro-width:
      calc(285 * var(--desktop-layout-unit));

    --desktop-secondary-meta-left:
      calc(440 * var(--desktop-layout-unit));

    --body-font-size:
      calc(15 * var(--desktop-layout-unit));

    --body-stroke:
      var(--desktop-layout-unit);

    --micro-font-size:
      calc(10 * var(--desktop-layout-unit));

    --legal-title-size-desktop:
      calc(46 * var(--desktop-layout-unit));

    --legal-section-title-size:
      calc(20 * var(--desktop-layout-unit));

    --legal-heading-copy-gap:
      calc(10 * var(--desktop-layout-unit));

    --legal-footer-gap-desktop:
      calc(120 * var(--desktop-layout-unit));
  }


  /* ----------------------------------------------------------
     PAGE FRAME

     Background remains full-window.
     Legal content is centered inside the shared frame.
     ---------------------------------------------------------- */

  .legal-shell {
    width:
      100%;

    max-width:
      var(--wide-max-width, 1800px);

    min-height:
      100vh;

    min-height:
      100dvh;

    margin-left:
      auto;

    margin-right:
      auto;

    padding-bottom:
      calc(78 * var(--desktop-layout-unit));
  }


  /* ----------------------------------------------------------
     TOP AREA

     Remains in normal document flow.
     Opening metadata scrolls away with the page.
     ---------------------------------------------------------- */

  .legal-top {
    position:
      relative;

    width:
      100%;

    height:
      calc(72 * var(--desktop-layout-unit));
  }


  /* ----------------------------------------------------------
     RETURN TO HOME
     ---------------------------------------------------------- */

  .legal-return {
    position:
      absolute;

    top:
      var(--desktop-edge);

    left:
      var(--desktop-edge);

    z-index:
      100;

    width:
      max-content;
  }


  /* ----------------------------------------------------------
     EMAIL

     Right edge aligns with the 350px editorial column.
     ---------------------------------------------------------- */

  .legal-email {
    position:
      absolute;

    top:
      var(--desktop-edge);

    left:
      calc(
        var(--desktop-edge) +
        var(--desktop-left-width)
      );

    right:
      auto;

    z-index:
      100;

    width:
      max-content;

    transform:
      translateX(-100%);

    text-align:
      right;
  }


  /* ----------------------------------------------------------
     YEAR
     ---------------------------------------------------------- */

  .legal-year {
    position:
      absolute;

    top:
      var(--desktop-edge);

    left:
      var(--desktop-secondary-meta-left);

    z-index:
      100;

    display:
      block;

    opacity:
      1;

    pointer-events:
      auto;
  }


  /* ----------------------------------------------------------
     COORDINATES
     ---------------------------------------------------------- */

  .legal-coordinates {
    position:
      absolute;

    top:
      var(--desktop-edge);

    left:
      calc(
        100% -
        var(--desktop-edge) -
        var(--desktop-left-width)
      );

    right:
      auto;

    z-index:
      100;

    display:
      flex;

    flex-direction:
      column;

    align-items:
      flex-start;

    gap:
      calc(5 * var(--desktop-layout-unit));

    line-height:
      var(--micro-line-height);

    text-align:
      left;
  }


  /* ----------------------------------------------------------
     RIGHTS
     ---------------------------------------------------------- */

  .legal-rights {
    position:
      absolute;

    top:
      var(--desktop-edge);

    right:
      var(--desktop-edge);

    z-index:
      100;

    display:
      block;

    text-align:
      right;
  }


  /* ----------------------------------------------------------
     CONTENT
     ---------------------------------------------------------- */

  .legal-content {
    width:
      auto;

    padding:
      calc(8 * var(--desktop-layout-unit))
      0
      0
      var(--desktop-edge);
  }


  /* ----------------------------------------------------------
     LEGAL TITLE
     ---------------------------------------------------------- */

  .legal-title {
    position:
      relative;

    z-index:
      1;

    width:
      max-content;

    max-width:
      var(--desktop-left-width);

    font-size:
      var(--legal-title-size-desktop);
  }


  /* ----------------------------------------------------------
     LEGAL COPY

     Full 350px editorial column.
     ---------------------------------------------------------- */

  .legal-sections {
    width:
      var(--legal-desktop-content-width);

    max-width:
      var(--legal-desktop-content-width);

    margin-top:
      calc(50 * var(--desktop-layout-unit));
  }


  .legal-section {
    margin-bottom:
      calc(42 * var(--desktop-layout-unit));
  }


  .legal-section__body {
    width:
      var(--legal-desktop-content-width);

    max-width:
      var(--legal-desktop-content-width);
  }


  .legal-section__body p {
    margin-bottom:
      calc(12 * var(--desktop-layout-unit));
  }


  .legal-section__body p:last-child {
    margin-bottom:
      0;
  }


  /* ----------------------------------------------------------
     DESKTOP FOOTER
     ---------------------------------------------------------- */

  .legal-footer {
    position:
      static;

    width:
      100%;

    min-height:
      calc(70 * var(--desktop-layout-unit));

    margin-top:
      auto;

    padding:
      var(--legal-footer-gap-desktop)
      0
      0;
  }


  .legal-footer__mobile {
    display:
      none;
  }


  .legal-footer__desktop {
    position:
      static;

    display:
      block;

    font-family:
      "Barlow Semi Condensed",
      sans-serif;

    font-size:
      var(--micro-font-size);

    font-weight:
      800;

    line-height:
      var(--micro-line-height);

    letter-spacing:
      0.04em;

    text-transform:
      uppercase;

    -webkit-text-stroke:
      0;
  }


  /* ----------------------------------------------------------
     OTHER LEGAL PAGE LINK

     A single legal link aligns with the lower address line.
     ---------------------------------------------------------- */

  .legal-footer__legal {
    position:
      absolute;

    left:
      var(--desktop-edge);

    bottom:
      var(--desktop-edge);

    z-index:
      110;

    display:
      flex;

    flex-direction:
      column;

    align-items:
      flex-start;

    line-height:
      var(--micro-line-height);

    text-align:
      left;

    pointer-events:
      auto;
  }


  /* ----------------------------------------------------------
     ADDRESS
     ---------------------------------------------------------- */

  .legal-footer__address {
    position:
      absolute;

    left:
      var(--desktop-edge);

    bottom:
      var(--desktop-edge);

    z-index:
      100;

    width:
      var(--desktop-left-width);

    color:
      var(--ink);

    text-align:
      right;

    pointer-events:
      none;
  }


  .legal-footer__address-link {
    display:
      flex;

    flex-direction:
      column;

    align-items:
      flex-end;

    gap:
      calc(5 * var(--desktop-layout-unit));

    width:
      max-content;

    margin-left:
      auto;

    padding:
      0;

    color:
      var(--ink);

    text-align:
      right;

    text-decoration:
      none;

    pointer-events:
      auto;
  }


  .legal-footer__address-link span {
    display:
      block;

    margin:
      0;

    padding:
      0;

    font-family:
      "Barlow Semi Condensed",
      sans-serif;

    font-size:
      var(--micro-font-size);

    font-weight:
      800;

    line-height:
      var(--micro-line-height);

    letter-spacing:
      0.04em;

    white-space:
      nowrap;
  }


  /* ----------------------------------------------------------
     C/O

     Uses the same second metadata axis as the year.
     ---------------------------------------------------------- */

  .legal-footer__careof {
    position:
      absolute;

    left:
      var(--desktop-secondary-meta-left);

    bottom:
      var(--desktop-edge);

    z-index:
      100;

    color:
      var(--ink);

    white-space:
      nowrap;

    opacity:
      1;

    pointer-events:
      none;

    transition:
      opacity
      0.2s
      linear;
  }


  .legal-footer__careof-link,
  .legal-footer__careof-link:visited {
    color:
      var(--ink);

    text-decoration:
      none;

    pointer-events:
      auto;

    -webkit-tap-highlight-color:
      transparent;

    transition:
      color
      0.16s
      ease;
  }


  /* ----------------------------------------------------------
     POWERED BY MITTE DAILY®
     ---------------------------------------------------------- */

  .legal-footer__powered {
    position:
      absolute;

    left:
      calc(
        100% -
        var(--desktop-edge) -
        var(--desktop-left-width)
      );

    bottom:
      var(--desktop-edge);

    z-index:
      100;

    white-space:
      nowrap;
  }


  /* ----------------------------------------------------------
     MITTE BÜRO
     ---------------------------------------------------------- */

  .legal-footer__mark {
    position:
      absolute;

    right:
      var(--desktop-edge);

    bottom:
      var(--desktop-edge);

    z-index:
      100;

    color:
      var(--ink);

    text-decoration:
      none;

    white-space:
      nowrap;

    text-align:
      right;
  }


  /* ----------------------------------------------------------
     IMPRINT

     Imprint remains a single-screen page with footer metadata
     fixed to the viewport.

     Fixed elements need the centered frame inset included
     explicitly because they are no longer positioned relative
     to .legal-shell.
     ---------------------------------------------------------- */

  .legal-page--imprint
  .legal-footer {
    min-height:
      0;

    margin-top:
      0;

    padding:
      0;
  }


  .legal-page--imprint
  .legal-footer__legal,

  .legal-page--imprint
  .legal-footer__address,

  .legal-page--imprint
  .legal-footer__careof,

  .legal-page--imprint
  .legal-footer__powered,

  .legal-page--imprint
  .legal-footer__mark {
    position:
      fixed;
  }


  .legal-page--imprint
  .legal-footer__legal,

  .legal-page--imprint
  .legal-footer__address {
    left:
      calc(
        var(--wide-frame-inset, 0px) +
        var(--desktop-edge)
      );
  }


  .legal-page--imprint
  .legal-footer__careof {
    left:
      calc(
        var(--wide-frame-inset, 0px) +
        var(--desktop-secondary-meta-left)
      );
  }


  .legal-page--imprint
  .legal-footer__powered {
    left:
      calc(
        var(--wide-frame-inset, 0px) +
        var(--wide-frame-width, 100vw) -
        var(--desktop-edge) -
        var(--desktop-left-width)
      );
  }


  .legal-page--imprint
  .legal-footer__mark {
    right:
      calc(
        var(--wide-frame-inset, 0px) +
        var(--desktop-edge)
      );
  }

}

/* ============================================================
   [07] COLLISION STATES

   JS adds these classes only when the elements genuinely
   approach one another.

   YEAR:
   fades before touching coordinates.

   C/O:
   fades before touching POWERED BY.
   ============================================================ */

@media (min-width: 800px) {


  .legal-year.is-colliding {
    opacity:
      0;

    pointer-events:
      none;
  }


  .legal-footer__careof.is-colliding {
    opacity:
      0;

    pointer-events:
      none;
  }

}


/* ============================================================
   [08] HOVER
   ============================================================ */

@media
  (hover: hover)
  and (pointer: fine) {


  .legal-return:hover,
  .legal-email:hover,
  .legal-footer a:hover,
  .legal-section__body a:hover {
    color:
      var(--muted-hover);
  }

}


/* ============================================================
   [09] REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {


  .legal-shell,
  .legal-return,
  .legal-email,
  .legal-year,
  .legal-footer__careof,
  .legal-footer a,
  .legal-section__body a {
    animation:
      none !important;

    transition:
      none !important;
  }

}