/* =========================================================
   Kundenvorlage — Rechtsseiten (Datenschutz, Pflichtangaben)
   ========================================================= */

.legal-hero{
  padding-top:clamp(130px,15vw,190px);
  padding-bottom:clamp(40px,5vw,64px);
}
.legal-title{
  font-size:clamp(2.4rem,5.6vw,4.2rem);
  line-height:1.02;
  letter-spacing:-.042em;
  font-weight:400;
}
.legal-title .line{ display:block; }
.legal-lead{
  margin-top:26px;
  max-width:52ch;
  font-size:clamp(1.02rem,1.5vw,1.2rem);
  line-height:1.62;
  color:var(--ink-mid);
  text-wrap:pretty;
}
.legal-updated{
  margin-top:30px;
  font-size:12px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink-faint);
}

.legal-body{
  padding-bottom:clamp(72px,9vw,128px);
  border-top:1px solid var(--line);
  margin-top:clamp(24px,3vw,40px);
}

.legal-sec{
  position:relative;
  padding-block:clamp(34px,4vw,52px);
  border-bottom:1px solid var(--line-soft);
}
.legal-num{
  display:block;
  font-size:11.5px; letter-spacing:.16em;
  color:var(--brand-deep);
  margin-bottom:16px;
}
.legal-sec h2{
  font-size:clamp(1.25rem,2.2vw,1.6rem);
  font-weight:400; letter-spacing:-.028em;
  margin-bottom:20px;
}

.legal-text{
  color:var(--ink-mid);
  font-size:1rem;
  line-height:1.72;
  max-width:66ch;
  text-wrap:pretty;
}
.legal-text strong{ color:var(--ink); font-weight:500; }
.legal-text ul{
  list-style:none;
  margin:18px 0;
  padding:0;
  display:flex; flex-direction:column; gap:10px;
}
.legal-text li{
  position:relative;
  padding-left:22px;
}
.legal-text li::before{
  content:"";
  position:absolute; left:2px; top:.72em;
  width:6px; height:1px;
  background:var(--brand);
}
.legal-text a{
  color:var(--brand-deep);
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-thickness:1px;
  text-decoration-color:color-mix(in srgb, var(--brand-deep) 35%, transparent);
  transition:text-decoration-color .3s var(--ease);
}
.legal-text a:hover{ text-decoration-color:var(--brand-deep); }

.legal-back{ padding-top:clamp(40px,5vw,60px); }

/* Pflichtangaben als Liste — für Στοιχεία επιχείρησης */
.legal-facts{
  margin:18px 0 0; padding:0; list-style:none;
  display:grid; gap:2px;
}
.legal-facts li{
  display:grid; grid-template-columns:minmax(120px,190px) 1fr; gap:14px;
  padding:11px 0; border-bottom:1px solid var(--line-soft);
  padding-left:0;
}
.legal-facts li::before{ content:none; }
.legal-facts b{ color:var(--ink-soft); font-weight:400; font-size:14px; }
@media (max-width:560px){
  .legal-facts li{ grid-template-columns:1fr; gap:2px; }
}

.legal-back a{
  display:inline-flex; align-items:center; gap:9px;
  font-size:14px; color:var(--brand-deep);
}
.legal-back a:hover{ text-decoration:underline; text-underline-offset:3px; }

/* ---------- Leiste auf den Rechtsseiten ----------
   Hinter der Leiste liegt hier kein Foto, sondern Papierweiß. Die helle
   Schrift aus `.bar:not(.is-stuck)` wäre unsichtbar — und `is-stuck` hilft
   nicht, weil main.js die Klasse beim Laden entfernt, solange nicht
   gescrollt wurde. Deshalb hängt der Zustand hier am body, nicht am Scroll. */
body[data-page="legal"] .bar{
  padding-block:9px;
  background:color-mix(in srgb, var(--paper) 92%, transparent);
  -webkit-backdrop-filter:saturate(180%) blur(16px);
  backdrop-filter:saturate(180%) blur(16px);
  border-bottom-color:var(--line-soft);
}
body[data-page="legal"] .bar .logo-name{ color:var(--ink); }
body[data-page="legal"] .bar .logo-kind{ color:var(--ink-soft); }
body[data-page="legal"] .bar .lang{ border-color:var(--line); }
body[data-page="legal"] .bar .lang-btn{ color:var(--ink-soft); }
body[data-page="legal"] .bar .lang-btn.is-active{ background:var(--brand-deep); color:var(--white); }