/* =====================================================
   CHUCKY1337
   LEGAL PAGES
   Impressum + Datenschutz
   ===================================================== */


/* =====================================================
   PAGE
   ===================================================== */

.legal-page {
  position: relative;

  padding:
    clamp(58px, 7vw, 96px)
    0
    clamp(80px, 9vw, 130px);

  overflow: clip;
}


.legal-page::before {
  content: "";

  position: absolute;

  top: -220px;
  left: 50%;

  width: 720px;
  height: 720px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(124,58,237,.12),
      rgba(124,58,237,.045) 35%,
      transparent 70%
    );

  transform:
    translateX(-50%);

  pointer-events: none;

  z-index: -1;
}


/* =====================================================
   HEADER
   ===================================================== */

.legal-heading {
  max-width: 820px;

  margin-bottom:
    48px;
}


.legal-heading .page-title {
  margin-top:
    11px;

  margin-bottom:
    17px;

  font-size:
    clamp(
      3rem,
      7vw,
      6rem
    );

  line-height:
    .92;
}


.legal-heading .page-intro {
  max-width:
    760px;

  margin:
    0;

  color:
    var(--text-soft);

  font-size:
    clamp(
      .95rem,
      1.5vw,
      1.08rem
    );

  line-height:
    1.75;
}


.legal-meta {
  display:
    flex;

  align-items:
    center;

  flex-wrap:
    wrap;

  gap:
    8px;

  margin-top:
    20px;

  color:
    var(--text-faint);

  font-size:
    .68rem;

  font-weight:
    650;

  letter-spacing:
    .05em;
}


/* =====================================================
   LAYOUT
   ===================================================== */

.legal-layout {
  display:
    grid;

  grid-template-columns:
    minmax(0, 1fr)
    310px;

  align-items:
    start;

  gap:
    38px;
}


.legal-main {
  min-width: 0;

  display:
    grid;

  gap:
    18px;
}


/* =====================================================
   CARD
   ===================================================== */

.legal-card {
  position:
    relative;

  overflow:
    hidden;

  padding:
    clamp(
      24px,
      4vw,
      36px
    );

  border:
    1px solid
    var(--line);

  border-radius:
    var(--radius-lg);

  background:
    linear-gradient(
      145deg,
      rgba(139,92,246,.035),
      transparent 34%
    ),
    var(--panel);

  box-shadow:
    0 16px 46px
    rgba(0,0,0,.09);

  scroll-margin-top:
    calc(
      var(--header-h) + 24px
    );

  transition:
    border-color .2s ease,
    background .2s ease,
    box-shadow .2s ease,
    transform .2s var(--ease);
}


.legal-card:hover {
  border-color:
    color-mix(
      in srgb,
      var(--accent) 22%,
      var(--line)
    );

  box-shadow:
    0 20px 54px
    rgba(0,0,0,.12);
}


.legal-card::before {
  content: "";

  position:
    absolute;

  top: 0;
  left: 0;

  width:
    100%;

  height:
    1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(139,92,246,.32),
      transparent
    );

  opacity:
    .65;

  pointer-events:
    none;
}


/* =====================================================
   CARD HEADER
   ===================================================== */

.legal-card-heading {
  display:
    flex;

  align-items:
    flex-start;

  gap:
    17px;

  margin-bottom:
    25px;
}


.legal-card-heading > div {
  min-width:
    0;
}


.legal-number {
  width:
    40px;

  height:
    40px;

  display:
    grid;

  flex:
    0 0 40px;

  place-items:
    center;

  border:
    1px solid
    color-mix(
      in srgb,
      var(--accent) 28%,
      var(--line)
    );

  border-radius:
    11px;

  background:
    var(--accent-soft);

  color:
    var(--accent);

  font-size:
    .65rem;

  font-weight:
    800;

  letter-spacing:
    .08em;
}


.legal-card-heading h2 {
  margin:
    5px
    0
    0;

  color:
    var(--text);

  font-size:
    clamp(
      1.25rem,
      2.2vw,
      1.6rem
    );

  line-height:
    1.18;

  font-weight:
    650;

  letter-spacing:
    -.035em;
}


/* =====================================================
   TEXT
   ===================================================== */

.legal-text {
  color:
    var(--text-soft);

  font-size:
    .9rem;

  line-height:
    1.78;
}


.legal-text > *:first-child {
  margin-top:
    0;
}


.legal-text > *:last-child {
  margin-bottom:
    0;
}


.legal-text p {
  margin:
    0
    0
    17px;
}


.legal-text strong {
  color:
    var(--text);

  font-weight:
    680;
}


.legal-text a {
  color:
    var(--accent);
}


.legal-text a:hover {
  color:
    color-mix(
      in srgb,
      var(--accent) 78%,
      white
    );
}


.legal-text code {
  padding:
    2px
    6px;

  border:
    1px solid
    var(--line);

  border-radius:
    6px;

  background:
    var(--bg-soft);

  color:
    var(--text);

  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Monaco,
    Consolas,
    "Liberation Mono",
    monospace;

  font-size:
    .82em;
}


/* =====================================================
   ADDRESS
   ===================================================== */

.legal-address,
.legal-person,
.legal-authority,
.legal-provider {
  display:
    flex;

  flex-direction:
    column;

  align-items:
    flex-start;

  gap:
    3px;

  color:
    var(--text-soft);

  font-size:
    .9rem;

  line-height:
    1.65;
}


.legal-address strong,
.legal-person strong,
.legal-authority strong,
.legal-provider strong {
  margin-bottom:
    2px;

  color:
    var(--text);

  font-size:
    1rem;

  font-weight:
    680;
}


.legal-address address,
.legal-authority address {
  margin-top:
    7px;

  color:
    var(--text-soft);

  font-style:
    normal;
}


.legal-person,
.legal-authority,
.legal-provider {
  margin:
    20px
    0;

  padding:
    18px
    20px;

  border:
    1px solid
    var(--line);

  border-radius:
    13px;

  background:
    var(--bg-soft);
}


/* =====================================================
   SIMPLE CONTACT
   ===================================================== */

.legal-contact-simple {
  display:
    grid;

  gap:
    6px;

  margin-top:
    22px;
}


.legal-contact-simple p {
  margin:
    0;
}


.legal-contact-simple a {
  overflow-wrap:
    anywhere;
}


/* =====================================================
   CONTACT CARDS
   ===================================================== */

.legal-contact-list {
  display:
    grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap:
    12px;
}


.legal-contact-item {
  min-width:
    0;

  display:
    flex;

  align-items:
    center;

  gap:
    13px;

  padding:
    16px;

  border:
    1px solid
    var(--line);

  border-radius:
    13px;

  background:
    var(--bg-soft);

  color:
    var(--text);

  transition:
    transform .2s var(--ease),
    border-color .2s ease,
    background .2s ease,
    box-shadow .2s ease;
}


.legal-contact-item:hover {
  transform:
    translateY(-2px);

  border-color:
    color-mix(
      in srgb,
      var(--accent) 40%,
      var(--line)
    );

  background:
    var(--accent-soft);

  box-shadow:
    0 12px 28px
    rgba(0,0,0,.10);
}


.legal-contact-icon {
  width:
    38px;

  height:
    38px;

  display:
    grid;

  flex:
    0 0 38px;

  place-items:
    center;

  border:
    1px solid
    color-mix(
      in srgb,
      var(--accent) 28%,
      var(--line)
    );

  border-radius:
    10px;

  background:
    var(--accent-soft);

  color:
    var(--accent);

  font-size:
    .82rem;
}


.legal-contact-copy {
  min-width:
    0;

  flex:
    1;

  display:
    flex;

  flex-direction:
    column;
}


.legal-contact-copy small {
  color:
    var(--text-faint);

  font-size:
    .61rem;

  font-weight:
    700;

  letter-spacing:
    .06em;

  text-transform:
    uppercase;
}


.legal-contact-copy strong {
  overflow:
    hidden;

  margin-top:
    1px;

  color:
    var(--text);

  font-size:
    .78rem;

  font-weight:
    650;

  text-overflow:
    ellipsis;
}


.legal-contact-arrow {
  flex:
    0 0 auto;

  color:
    var(--text-faint);

  font-size:
    .75rem;

  transition:
    color .2s ease,
    transform .2s var(--ease);
}


.legal-contact-item:hover
.legal-contact-arrow {
  color:
    var(--accent);

  transform:
    translate(
      2px,
      -2px
    );
}


/* =====================================================
   LISTS
   ===================================================== */

.legal-list {
  display:
    grid;

  gap:
    10px;

  margin:
    18px
    0
    22px;

  padding:
    0;

  list-style:
    none;
}


.legal-list li {
  position:
    relative;

  padding-left:
    22px;

  color:
    var(--text-soft);
}


.legal-list li::before {
  content: "";

  position:
    absolute;

  top:
    .72em;

  left:
    2px;

  width:
    6px;

  height:
    6px;

  border-radius:
    50%;

  background:
    var(--accent);

  box-shadow:
    0 0 0 4px
    var(--accent-soft);
}


/* =====================================================
   TABLE
   ===================================================== */

.legal-table-wrap {
  width:
    100%;

  margin:
    22px
    0;

  overflow-x:
    auto;

  border:
    1px solid
    var(--line);

  border-radius:
    14px;

  background:
    var(--bg-soft);
}


.legal-table {
  width:
    100%;

  min-width:
    680px;

  border-collapse:
    collapse;

  color:
    var(--text-soft);

  font-size:
    .76rem;

  line-height:
    1.55;
}


.legal-table th,
.legal-table td {
  padding:
    14px
    16px;

  border-bottom:
    1px solid
    var(--line);

  text-align:
    left;

  vertical-align:
    top;
}


.legal-table th {
  background:
    color-mix(
      in srgb,
      var(--accent-soft) 55%,
      var(--bg-soft)
    );

  color:
    var(--text);

  font-size:
    .65rem;

  font-weight:
    760;

  letter-spacing:
    .05em;

  text-transform:
    uppercase;
}


.legal-table tr:last-child td {
  border-bottom:
    0;
}


.legal-table tbody tr {
  transition:
    background .2s ease;
}


.legal-table tbody tr:hover {
  background:
    color-mix(
      in srgb,
      var(--accent-soft) 45%,
      transparent
    );
}


/* =====================================================
   LINKS / INLINE ACTIONS
   ===================================================== */

.legal-inline-link {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    7px;

  margin-top:
    7px;

  color:
    var(--accent);

  font-size:
    .78rem;

  font-weight:
    680;

  text-decoration:
    none;
}


.legal-inline-link span {
  font-size:
    .7rem;

  transition:
    transform .2s var(--ease);
}


.legal-inline-link:hover span {
  transform:
    translate(
      2px,
      -2px
    );
}


.legal-inline-button {
  border:
    0;

  padding:
    0;

  background:
    none;

  color:
    var(--accent);

  cursor:
    pointer;

  font:
    inherit;

  font-weight:
    680;

  text-decoration:
    underline;

  text-decoration-thickness:
    1px;

  text-underline-offset:
    3px;
}


.legal-inline-button:hover {
  color:
    color-mix(
      in srgb,
      var(--accent) 78%,
      white
    );
}


/* =====================================================
   SIDEBAR
   ===================================================== */

.legal-sidebar {
  position:
    sticky;

  top:
    calc(
      var(--header-h) + 22px
    );

  display:
    grid;

  gap:
    15px;
}


.legal-side-card {
  padding:
    22px;

  border:
    1px solid
    var(--line);

  border-radius:
    var(--radius-lg);

  background:
    var(--panel);

  box-shadow:
    0 14px 38px
    rgba(0,0,0,.08);
}


.legal-side-card h2 {
  margin:
    7px
    0
    10px;

  color:
    var(--text);

  font-size:
    1.12rem;

  line-height:
    1.2;

  letter-spacing:
    -.025em;

  font-weight:
    650;
}


.legal-side-card > p {
  margin:
    0
    0
    18px;

  color:
    var(--text-soft);

  font-size:
    .76rem;

  line-height:
    1.65;
}


/* =====================================================
   SIDEBAR LINKS
   ===================================================== */

.legal-side-links {
  display:
    grid;

  gap:
    4px;

  margin-top:
    12px;
}


.legal-side-links a,
.legal-side-links button {
  width:
    100%;

  min-height:
    40px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    12px;

  padding:
    8px
    10px;

  border:
    0;

  border-radius:
    9px;

  background:
    transparent;

  color:
    var(--text-soft);

  cursor:
    pointer;

  font:
    inherit;

  font-size:
    .73rem;

  text-align:
    left;

  transition:
    background .2s ease,
    color .2s ease,
    transform .2s var(--ease);
}


.legal-side-links a:hover,
.legal-side-links button:hover {
  background:
    var(--accent-soft);

  color:
    var(--text);

  transform:
    translateX(2px);
}


.legal-side-links a.is-active {
  background:
    var(--accent-soft);

  color:
    var(--accent);
}


.legal-side-links a span:last-child,
.legal-side-links button span:last-child {
  flex:
    0 0 auto;

  color:
    var(--text-faint);

  font-size:
    .7rem;

  transition:
    transform .2s var(--ease),
    color .2s ease;
}


.legal-side-links a:hover span:last-child,
.legal-side-links button:hover span:last-child {
  color:
    var(--accent);

  transform:
    translateX(2px);
}


/* =====================================================
   SIDEBAR NOTE
   ===================================================== */

.legal-side-note {
  display:
    flex;

  align-items:
    flex-start;

  gap:
    13px;
}


.legal-side-note-icon {
  width:
    39px;

  height:
    39px;

  display:
    grid;

  flex:
    0 0 39px;

  place-items:
    center;

  border:
    1px solid
    color-mix(
      in srgb,
      var(--accent) 28%,
      var(--line)
    );

  border-radius:
    11px;

  background:
    var(--accent-soft);

  color:
    var(--accent);

  font-size:
    .82rem;
}


.legal-side-note > div {
  min-width:
    0;
}


.legal-side-note strong {
  display:
    block;

  color:
    var(--text);

  font-size:
    .78rem;

  font-weight:
    680;
}


.legal-side-note p {
  margin:
    5px
    0
    0;

  color:
    var(--text-faint);

  font-size:
    .68rem;

  line-height:
    1.55;
}


.legal-side-note
.legal-inline-link {
  overflow-wrap:
    anywhere;

  margin-top:
    8px;

  font-size:
    .68rem;
}


/* =====================================================
   BUTTON INSIDE LEGAL CONTENT
   ===================================================== */

.legal-card .button {
  margin-top:
    6px;
}


/* =====================================================
   TARGET HIGHLIGHT
   ===================================================== */

.legal-card:target {
  border-color:
    color-mix(
      in srgb,
      var(--accent) 55%,
      var(--line)
    );

  box-shadow:
    0 0 0 4px
    var(--accent-soft),
    0 20px 54px
    rgba(0,0,0,.12);
}


/* =====================================================
   LIGHT THEME
   ===================================================== */

html[data-theme="light"]
.legal-page::before {
  opacity:
    .7;
}


html[data-theme="light"]
.legal-card,
html[data-theme="light"]
.legal-side-card {
  box-shadow:
    0 14px 40px
    rgba(36,25,56,.055);
}


html[data-theme="light"]
.legal-contact-item:hover {
  box-shadow:
    0 12px 28px
    rgba(36,25,56,.07);
}


/* =====================================================
   TABLET
   ===================================================== */

@media (
  max-width:
  1040px
) {

  .legal-layout {
    grid-template-columns:
      minmax(0, 1fr)
      270px;

    gap:
      26px;
  }


  .legal-side-card {
    padding:
      19px;
  }

}


/* =====================================================
   TABLET / MOBILE LAYOUT
   ===================================================== */

@media (
  max-width:
  860px
) {

  .legal-heading {
    margin-bottom:
      34px;
  }


  .legal-layout {
    grid-template-columns:
      1fr;
  }


  .legal-sidebar {
    position:
      static;

    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );

    order:
      -1;
  }


  .legal-side-card:first-child {
    grid-column:
      1 / -1;
  }


  .legal-contact-list {
    grid-template-columns:
      1fr;
  }

}


/* =====================================================
   MOBILE
   ===================================================== */

@media (
  max-width:
  640px
) {

  .legal-page {
    padding:
      48px
      0
      78px;
  }


  .legal-page::before {
    top:
      -160px;

    width:
      480px;

    height:
      480px;
  }


  .legal-heading {
    margin-bottom:
      28px;
  }


  .legal-heading .page-title {
    margin-bottom:
      14px;

    font-size:
      clamp(
        2.8rem,
        15vw,
        4.3rem
      );
  }


  .legal-heading .page-intro {
    font-size:
      .9rem;

    line-height:
      1.7;
  }


  .legal-meta {
    margin-top:
      16px;

    font-size:
      .62rem;
  }


  .legal-main {
    gap:
      14px;
  }


  .legal-card {
    padding:
      21px;

    border-radius:
      17px;
  }


  .legal-card-heading {
    gap:
      13px;

    margin-bottom:
      21px;
  }


  .legal-number {
    width:
      36px;

    height:
      36px;

    flex-basis:
      36px;

    border-radius:
      10px;

    font-size:
      .6rem;
  }


  .legal-card-heading h2 {
    font-size:
      1.2rem;
  }


  .legal-text {
    font-size:
      .84rem;

    line-height:
      1.72;
  }


  .legal-address,
  .legal-person,
  .legal-authority,
  .legal-provider {
    font-size:
      .84rem;
  }


  .legal-person,
  .legal-authority,
  .legal-provider {
    padding:
      16px;
  }


  .legal-sidebar {
    grid-template-columns:
      1fr;
  }


  .legal-side-card:first-child {
    grid-column:
      auto;
  }


  .legal-side-card {
    padding:
      20px;

    border-radius:
      17px;
  }


  .legal-contact-item {
    padding:
      14px;
  }


  .legal-contact-copy strong {
    font-size:
      .72rem;
  }


  .legal-list {
    gap:
      9px;

    margin:
      16px
      0
      20px;
  }


  .legal-table {
    font-size:
      .72rem;
  }


  .legal-table th,
  .legal-table td {
    padding:
      12px
      13px;
  }

}


/* =====================================================
   VERY SMALL MOBILE
   ===================================================== */

@media (
  max-width:
  420px
) {

  .legal-card {
    padding:
      18px;
  }


  .legal-card-heading {
    gap:
      11px;
  }


  .legal-number {
    width:
      34px;

    height:
      34px;

    flex-basis:
      34px;
  }


  .legal-contact-icon {
    width:
      35px;

    height:
      35px;

    flex-basis:
      35px;
  }


  .legal-contact-item {
    gap:
      10px;
  }


  .legal-contact-arrow {
    display:
      none;
  }


  .legal-side-card {
    padding:
      18px;
  }

}


/* =====================================================
   PRINT
   ===================================================== */

@media print {

  .site-header,
  .site-footer,
  .legal-sidebar,
  .button,
  .legal-inline-button {
    display:
      none !important;
  }


  .legal-page {
    padding:
      0;
  }


  .legal-page::before {
    display:
      none;
  }


  .legal-layout {
    display:
      block;
  }


  .legal-main {
    display:
      block;
  }


  .legal-card {
    break-inside:
      avoid;

    margin-bottom:
      18px;

    padding:
      20px;

    border:
      1px solid #ccc;

    background:
      #fff;

    color:
      #000;

    box-shadow:
      none;
  }


  .legal-text,
  .legal-address,
  .legal-person,
  .legal-authority,
  .legal-provider {
    color:
      #222;
  }


  .legal-card-heading h2,
  .legal-text strong,
  .legal-address strong,
  .legal-person strong,
  .legal-authority strong,
  .legal-provider strong {
    color:
      #000;
  }

}


/* =====================================================
   REDUCED MOTION
   ===================================================== */

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

  .legal-card,
  .legal-contact-item,
  .legal-inline-link span,
  .legal-contact-arrow,
  .legal-side-links a,
  .legal-side-links button,
  .legal-side-links a span:last-child,
  .legal-side-links button span:last-child {
    transition:
      none;
  }

}