/* ============ HAAR.trend — Stylesheet für Rechtsseiten ============ */
:root {
  --pink: #E36AD9;
  --pink-glam: #FF4FCB;
  --pink-hair: #F2C8EC;
  --rose: #FDEBFA;
  --beige: #FAF1E8;
  --cream: #FFF6EE;
  --white: #FFFFFF;
  --ink: #2A2230;
  --ink-mute: #8A7E92;
  --display: 'Outfit', sans-serif;
  --body: 'Inter Tight', sans-serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --container: 1240px;
  --pad: clamp(20px, 5vw, 64px);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--body);
  background: var(--cream);
  color: var(--ink);
  line-height: 1.7;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

/* ============ NAV ============ */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 24px var(--pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255, 246, 238, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(242, 200, 236, 0.5);
}
.logo {
  font-family: var(--display);
  font-weight: 300;
  font-size: 22px;
  letter-spacing: -0.01em;
  display: inline-flex;
  flex-direction: column;
  line-height: 1;
}
.logo-main { display: inline-flex; align-items: baseline; }
.logo-main .dot { color: var(--pink); margin: 0 1px; }
.logo-line { width: 100%; height: 1px; background: var(--ink); margin: 4px 0 3px; }
.logo-sub {
  font-size: 10px; font-weight: 300; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ink-mute); text-align: center;
}
.nav-back {
  font-family: var(--body);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: color 300ms var(--ease);
}
.nav-back:hover { color: var(--pink); }
.nav-back svg { width: 16px; height: 16px; }

/* ============ LEGAL CONTENT ============ */
.legal-hero {
  padding: 160px var(--pad) 60px;
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}
.legal-hero .eyebrow {
  display: inline-block;
  font-family: var(--body);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--pink);
  margin-bottom: 20px;
}
.legal-hero h1 {
  font-family: var(--display);
  font-weight: 200;
  font-size: clamp(36px, 6vw, 62px);
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.legal-hero .dot { color: var(--pink); }

.legal-body {
  max-width: 820px;
  margin: 0 auto;
  padding: 20px var(--pad) 100px;
}
.legal-body section { margin-bottom: 48px; }
.legal-body h2 {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(22px, 3vw, 30px);
  letter-spacing: -0.01em;
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--pink-hair);
}
.legal-body h3 {
  font-family: var(--display);
  font-weight: 400;
  font-size: 18px;
  margin: 28px 0 10px;
  color: var(--ink);
}
.legal-body p { margin-bottom: 14px; color: #4a4150; }
.legal-body ul { margin: 0 0 14px 22px; color: #4a4150; }
.legal-body li { margin-bottom: 8px; }
.legal-body a { color: var(--pink); text-decoration: underline; text-underline-offset: 3px; }
.legal-body a:hover { color: var(--pink-glam); }
.legal-body strong { font-weight: 600; color: var(--ink); }
.legal-body .muted { color: var(--ink-mute); font-size: 14px; }
.legal-body .lead {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(18px, 2.4vw, 22px);
  line-height: 1.6;
  color: var(--ink);
  margin-bottom: 36px;
}

/* ============ FOOTER ============ */
footer {
  background: var(--ink);
  color: var(--cream);
  text-align: center;
  padding: 72px var(--pad) 48px;
}
footer .logo { color: var(--cream); }
footer .logo-line { background: var(--cream); }
footer .logo-sub { color: rgba(255, 246, 238, 0.6); }
.footer-logo { display: inline-block; margin-bottom: 20px; }
.footer-line { width: 40px; height: 1px; background: var(--pink); margin: 0 auto 24px; }
.footer-brand {
  font-family: var(--display);
  font-style: italic;
  font-weight: 200;
  font-size: 20px;
  margin-bottom: 32px;
  color: rgba(255, 246, 238, 0.85);
}
.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  justify-content: center;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 36px;
  color: rgba(255, 246, 238, 0.7);
}
.footer-nav a { transition: color 300ms var(--ease); }
.footer-nav a:hover { color: var(--pink); }
.footer-copy {
  font-size: 12px;
  letter-spacing: 0.04em;
  color: rgba(255, 246, 238, 0.4);
}

@media (max-width: 768px) {
  .nav { padding: 18px var(--pad); }
  .logo { font-size: 19px; }
  .legal-hero { padding-top: 130px; }
  .footer-nav { gap: 18px; font-size: 12px; }
}