/* ============================================================================
   Kinderwelten Wendland — legal.css
   Einheitliches Design für die Rechtsseiten (Impressum, AGB, Widerruf,
   Datenschutz). Tokens aus dem Kinderwelten Wendland Design System
   (colors_and_type.css). Schriften lokal gehostet (DSGVO-konform).
   ============================================================================ */

/* ── Schriften (lokal, kein Google-Fonts-CDN) ─────────────────────────────── */
@font-face {
  font-family: "Fredoka";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/fredoka-latin-600-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2013-2014, U+2018-201A, U+201C-201E, U+2026, U+20AC;
}
@font-face {
  font-family: "Fredoka";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/fredoka-latin-700-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2013-2014, U+2018-201A, U+201C-201E, U+2026, U+20AC;
}
@font-face {
  font-family: "Fredoka";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/fredoka-latin-ext-600-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0;
}
@font-face {
  font-family: "Fredoka";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/fredoka-latin-ext-700-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0;
}
@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/nunito-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2013-2014, U+2018-201A, U+201C-201E, U+2026, U+20AC;
}
@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/nunito-latin-700-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2013-2014, U+2018-201A, U+201C-201E, U+2026, U+20AC;
}
@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/nunito-latin-ext-400-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0;
}
@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/nunito-latin-ext-700-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0;
}

/* ── Design-Tokens (Kinderwelten Wendland Design System) ─────────────────── */
:root {
  --kw-violet:      #414997;
  --kw-violet-700:  #2F356E;
  --kw-violet-100:  #E3E5F2;
  --kw-ink:         #282828;
  --kw-paper:       #FFFFFF;
  --kw-cream:       #FBF8F1;
  --kw-n-200:       #E5E3DB;
  --kw-n-500:       #767369;
  --kw-n-600:       #54514A;

  --font-headline:  "Fredoka", "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:      "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --fs-h1:          44px;
  --fs-h2:          32px;
  --fs-h3:          24px;
  --fs-body:        17px;
  --fs-small:       15px;

  --radius-sm:      10px;
  --radius-md:      16px;
  --radius-pill:    999px;

  --shadow-2:       0 4px 12px rgba(40,40,40,.08), 0 2px 4px rgba(40,40,40,.05);

  --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px;
  --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 140ms;
}

/* ── Grundgerüst ──────────────────────────────────────────────────────────── */
* { box-sizing: border-box; }

html { color: var(--kw-ink); background: var(--kw-cream); }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--kw-ink);
  background: var(--kw-cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ── Kopfbereich ──────────────────────────────────────────────────────────── */
.legal-header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-5);
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--kw-n-200);
}

.legal-header .brand {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  text-decoration: none;
}

.legal-header .brand img { height: 44px; width: auto; display: block; }

.legal-header .brand span {
  font-family: var(--font-headline);
  font-weight: 600;
  font-size: 18px;
  color: var(--kw-ink);
}

.btn-back {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-small);
  color: #FFFFFF;
  background: var(--kw-violet);
  text-decoration: none;
  padding: 10px 20px;
  border-radius: var(--radius-pill);
  transition: background var(--dur-fast) var(--ease-out);
  white-space: nowrap;
}
.btn-back:hover { background: var(--kw-violet-700); color: #FFFFFF; }
.btn-back:focus-visible { outline: 2px solid var(--kw-violet); outline-offset: 2px; }

/* ── Inhaltskarte ─────────────────────────────────────────────────────────── */
.legal-main {
  max-width: 860px;
  margin: 0 auto;
  padding: var(--sp-7) var(--sp-5) var(--sp-8);
}

.legal-card {
  position: relative;
  overflow: hidden;
  background: var(--kw-paper);
  border: 1px solid var(--kw-n-200);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-2);
  padding: var(--sp-7) var(--sp-7) var(--sp-6);
}

.legal-card .arch {
  position: absolute;
  top: -36px;
  right: -48px;
  width: 190px;
  opacity: .16;
  transform: rotate(14deg);
  pointer-events: none;
}

/* ── Typografie ───────────────────────────────────────────────────────────── */
h1 {
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: clamp(30px, 5vw, var(--fs-h1));
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--kw-ink);
  text-wrap: balance;
  margin: 0 0 var(--sp-4);
}

h2 {
  font-family: var(--font-headline);
  font-weight: 600;
  font-size: clamp(22px, 3.5vw, var(--fs-h2));
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--kw-violet);
  text-wrap: balance;
  margin: var(--sp-6) 0 var(--sp-3);
}

h3 {
  font-family: var(--font-headline);
  font-weight: 600;
  font-size: var(--fs-h3);
  line-height: 1.2;
  color: var(--kw-ink);
  margin: var(--sp-5) 0 var(--sp-2);
}

p {
  line-height: 1.6;
  text-wrap: pretty;
  margin: 0 0 var(--sp-4);
}

ul, ol { margin: 0 0 var(--sp-4); padding-left: 24px; }
li { margin-bottom: var(--sp-2); }
li::marker { color: var(--kw-violet); }

a {
  color: var(--kw-violet);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  transition: color var(--dur-fast) var(--ease-out);
  overflow-wrap: anywhere;
}
a:hover { color: var(--kw-violet-700); }
a:focus-visible { outline: 2px solid var(--kw-violet); outline-offset: 2px; }

.legal-stand {
  font-size: var(--fs-small);
  color: var(--kw-n-500);
  margin-top: calc(-1 * var(--sp-3));
}

/* ── Fußbereich ───────────────────────────────────────────────────────────── */
.legal-footer {
  background: var(--kw-violet);
  color: #FFFFFF;
  padding: var(--sp-6) var(--sp-5);
  text-align: center;
}

.legal-footer nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-3) var(--sp-5);
  margin-bottom: var(--sp-4);
}

.legal-footer a {
  color: #FFFFFF;
  text-decoration: none;
  font-weight: 700;
  font-size: var(--fs-small);
}
.legal-footer a:hover { text-decoration: underline; text-underline-offset: 3px; color: #FFFFFF; }
.legal-footer a[aria-current="page"] { text-decoration: underline; text-underline-offset: 3px; }

.legal-footer .copyright { font-size: 13px; color: var(--kw-violet-100); margin: 0; }

/* ── Mobil ────────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .legal-header { padding: var(--sp-3) var(--sp-4); }
  .legal-header .brand span { display: none; }
  .legal-main { padding: var(--sp-5) var(--sp-3) var(--sp-6); }
  .legal-card { padding: var(--sp-5) var(--sp-4); }
  .legal-card .arch { width: 130px; top: -28px; right: -36px; }
}

@media print {
  .legal-header, .legal-footer, .legal-card .arch { display: none; }
  html, body { background: #FFFFFF; }
  .legal-card { border: none; box-shadow: none; padding: 0; }
}