/* ═══ Für Dich — Rechtliche Unterseiten (Impressum / Datenschutz) ═══
   Gleiche Holz-Kawaii-Handschrift wie index.html und menu.html. */

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

:root {
  --oak:        oklch(88% 0.032 72);
  --oak-deep:   oklch(82% 0.042 66);
  --oak-dark:   oklch(63% 0.055 58);
  --birch:      oklch(94.5% 0.024 80);

  --ink:        oklch(31% 0.045 50);
  --ink-soft:   oklch(46% 0.04 52);
  --ink-faint:  oklch(60% 0.035 55);

  --clay:       oklch(56% 0.125 42);
  --clay-deep:  oklch(42% 0.1 40);
  --clay-pale:  oklch(85% 0.046 74);

  --amber:      oklch(78% 0.1 68);
  --amber-deep: oklch(63% 0.115 62);
  --honey:      oklch(84% 0.095 88);
  --honey-deep: oklch(69% 0.115 84);
  --moss:       oklch(72% 0.075 140);
  --moss-deep:  oklch(56% 0.08 142);
  --sage:       oklch(76% 0.04 125);
  --sage-deep:  oklch(60% 0.05 128);

  --r-sm:   14px;
  --r-md:   24px;
  --r-lg:   34px;
  --r-xl:   48px;
  --r-pill: 999px;

  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 96px;

  --bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease:   cubic-bezier(0.16, 1, 0.3, 1);
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Gowun Dodum', sans-serif;
  background: var(--oak);
  color: var(--ink);
  line-height: 1.8;
  overflow-x: hidden;
  background-image:
    repeating-linear-gradient(91deg,
      oklch(66% 0.055 62 / 0.11) 0px, oklch(66% 0.055 62 / 0.11) 1px,
      transparent 1px, transparent 9px),
    repeating-linear-gradient(89.4deg,
      oklch(58% 0.06 56 / 0.07) 0px, oklch(58% 0.06 56 / 0.07) 2px,
      transparent 2px, transparent 27px),
    repeating-linear-gradient(90.6deg,
      oklch(52% 0.06 52 / 0.05) 0px, oklch(52% 0.06 52 / 0.05) 1px,
      transparent 1px, transparent 61px);
  background-attachment: fixed;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 300;
  pointer-events: none;
  opacity: 0.055;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ═══ NAVIGATION ═══ */
#nav {
  position: sticky;
  top: var(--space-md);
  z-index: 100;
  width: min(1420px, calc(100% - var(--space-xl)));
  margin: var(--space-md) auto 0;
  padding: 10px 10px 10px var(--space-lg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  background: oklch(94.5% 0.024 80 / 0.9);
  backdrop-filter: blur(14px);
  border: 2.5px solid var(--ink);
  border-radius: var(--r-pill);
  box-shadow: 0 5px 0 var(--clay-deep);
}

.nav-back {
  font-family: 'Jua', sans-serif;
  font-size: 0.95rem;
  color: var(--ink-soft);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  transition: background 0.25s var(--ease), color 0.25s var(--ease), gap 0.3s var(--bounce);
}

.nav-back::before { content: '←'; }
.nav-back:hover { background: var(--clay-pale); color: var(--clay); gap: 11px; }

.nav-logo {
  font-family: 'Jua', sans-serif;
  font-size: 1.3rem;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  padding-block: 10px;
}

.nav-logo span { color: var(--clay); }

.nav-maps {
  font-family: 'Jua', sans-serif;
  font-size: 0.95rem;
  color: var(--birch);
  background: var(--clay);
  padding: 13px var(--space-lg);
  border: 2.5px solid var(--ink);
  border-radius: var(--r-pill);
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 4px 0 var(--clay-deep);
  transition: transform 0.22s var(--bounce), box-shadow 0.22s var(--bounce);
}

.nav-maps:hover { transform: translateY(-2px); box-shadow: 0 6px 0 var(--clay-deep); }
.nav-maps:active { transform: translateY(4px); box-shadow: 0 0 0 var(--clay-deep); }

/* ═══ SEITENKOPF ═══ */
.legal-hero {
  position: relative;
  padding: clamp(var(--space-2xl), 7vw, 100px) clamp(var(--space-lg), 6vw, 100px) clamp(var(--space-lg), 3vw, var(--space-2xl));
  overflow: hidden;
}

.legal-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 120% at 86% 14%,
    oklch(78% 0.1 68 / 0.5) 0%,
    oklch(78% 0.1 68 / 0.2) 42%,
    transparent 72%);
  pointer-events: none;
}

.legal-hero > * { position: relative; z-index: 1; }

.legal-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Gaegu', cursive;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--clay-deep);
  background: var(--honey);
  padding: 3px var(--space-md);
  border-radius: var(--r-pill);
  margin-bottom: var(--space-sm);
  transform: rotate(-1.2deg);
}

.legal-title {
  font-family: 'Jua', sans-serif;
  font-size: clamp(2.3rem, 6.5vw, 4.4rem);
  line-height: 1.08;
  color: var(--ink);
  overflow-wrap: break-word;
  hyphens: auto;
}

.legal-title em { font-style: normal; color: var(--clay); }

/* ═══ INHALT ═══ */
.legal-body {
  padding: 0 clamp(var(--space-lg), 6vw, 100px) clamp(var(--space-4xl), 9vw, 130px);
  max-width: 1180px;
  margin-inline: auto;
}

.legal-hero {
  max-width: 1180px;
  margin-inline: auto;
}

.legal-content { font-size: 1rem; color: var(--ink-soft); }
/* Zeilenlaenge begrenzen — 110 Zeichen liest niemand gern */
.legal-content p { margin-bottom: var(--space-md); max-width: 74ch; }
.legal-content ul li { max-width: 74ch; }

.legal-content a {
  color: var(--clay-deep);
  text-decoration: none;
  border-bottom: 2px solid var(--honey);
  overflow-wrap: anywhere;
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
}

.legal-content a:hover { color: var(--clay); border-color: var(--clay); }

.legal-content ul {
  list-style: none;
  margin: var(--space-md) 0;
  display: grid;
  gap: var(--space-sm);
}

.legal-content ul li {
  position: relative;
  padding-left: var(--space-lg);
}

.legal-content ul li::before {
  content: "";
  position: absolute;
  left: 2px; top: 0.72em;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--honey);
  border: 2px solid var(--ink);
}

/* Inhaltsverzeichnis */
.legal-toc {
  background: var(--birch);
  border: 2.5px solid var(--ink);
  border-radius: var(--r-lg);
  box-shadow: 0 7px 0 var(--honey-deep);
  padding: clamp(var(--space-lg), 3vw, var(--space-xl));
  margin-bottom: clamp(var(--space-2xl), 5vw, var(--space-4xl));
}

.legal-toc-label {
  font-family: 'Gaegu', cursive;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--clay-deep);
  margin-bottom: var(--space-sm);
}

.legal-toc ol {
  list-style: none;
  counter-reset: toc;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 4px var(--space-xl);
}

.legal-toc li { counter-increment: toc; min-width: 0; }

.legal-toc a {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  min-height: 44px;
  padding: 6px 0;
  font-family: 'Jua', sans-serif;
  font-size: 1.05rem;
  color: var(--ink);
  text-decoration: none;
  border: 0;
  transition: color 0.25s var(--ease), transform 0.3s var(--bounce);
}

.legal-toc a::before {
  content: "0" counter(toc);
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  font-size: 0.74rem;
  color: var(--ink);
  background: var(--honey);
  border: 2px solid var(--ink);
  border-radius: 50%;
}

.legal-toc a:hover { color: var(--clay); transform: translateX(5px); }

/* Abschnitte als Sticker-Karten */
.legal-section {
  background: var(--birch);
  border: 2.5px solid var(--ink);
  border-radius: var(--r-lg);
  padding: clamp(var(--space-lg), 3vw, var(--space-2xl));
  margin-bottom: clamp(var(--space-lg), 3vw, var(--space-xl));
  scroll-margin-top: 124px;
}

.legal-section:nth-of-type(5n+1) { box-shadow: 0 7px 0 var(--clay-deep); }
.legal-section:nth-of-type(5n+2) { box-shadow: 0 7px 0 var(--moss-deep); }
.legal-section:nth-of-type(5n+3) { box-shadow: 0 7px 0 var(--honey-deep); }
.legal-section:nth-of-type(5n+4) { box-shadow: 0 7px 0 var(--sage-deep); }
.legal-section:nth-of-type(5n+5) { box-shadow: 0 7px 0 var(--amber-deep); }

.legal-section-num {
  display: inline-block;
  font-family: 'Jua', sans-serif;
  font-size: 0.8rem;
  color: var(--ink);
  background: var(--honey);
  border: 2.5px solid var(--ink);
  border-radius: var(--r-pill);
  padding: 1px 14px;
  margin-bottom: var(--space-sm);
}

.legal-content h2 {
  font-family: 'Jua', sans-serif;
  font-size: clamp(1.5rem, 3.4vw, 2.2rem);
  line-height: 1.18;
  color: var(--ink);
  margin-bottom: var(--space-md);
  overflow-wrap: break-word;
  hyphens: auto;
}

.legal-content h3 {
  font-family: 'Jua', sans-serif;
  font-size: 1.12rem;
  color: var(--clay-deep);
  margin: var(--space-lg) 0 var(--space-xs);
  overflow-wrap: break-word;
  hyphens: auto;
}

.legal-content h3:first-child { margin-top: 0; }

/* Impressum-Blöcke */
.legal-block {
  background: var(--birch);
  border: 2.5px solid var(--ink);
  border-radius: var(--r-lg);
  box-shadow: 0 7px 0 var(--oak-dark);
  padding: clamp(var(--space-lg), 3vw, var(--space-xl));
  margin-bottom: var(--space-lg);
}

.legal-block:nth-child(1) { box-shadow: 0 7px 0 var(--clay-deep); }
.legal-block:nth-child(2) { box-shadow: 0 7px 0 var(--moss-deep); }
.legal-block:nth-child(3) { box-shadow: 0 7px 0 var(--honey-deep); }
.legal-block:nth-child(4) { box-shadow: 0 7px 0 var(--sage-deep); }
.legal-block h2 { font-size: clamp(1.3rem, 2.6vw, 1.7rem); }
.legal-block p:last-child { margin-bottom: 0; }

.address-block {
  margin: var(--space-md) 0;
  padding: var(--space-md) var(--space-lg);
  background: var(--oak);
  border: 2.5px dashed oklch(70% 0.05 62);
  border-radius: var(--r-md);
  font-size: 0.98rem;
  line-height: 1.75;
  color: var(--ink);
}

/* Hervorgehobene Passagen (Widerspruchsrecht u. ä.).
   Das Original nutzt dafuer einen Seitenstreifen — hier eine
   getoente Karte, passend zur uebrigen Sticker-Sprache. */
.caps-block {
  margin: var(--space-md) 0;
  padding: var(--space-md) var(--space-lg);
  background: var(--clay-pale);
  border: 2.5px dashed var(--clay);
  border-radius: var(--r-md);
  font-size: 0.94rem;
  line-height: 1.8;
  color: var(--ink);
}

.caps-block + .caps-block { margin-top: var(--space-sm); }
.caps-block p:last-child { margin-bottom: 0; }

.legal-source {
  margin-top: var(--space-xl);
  font-family: 'Gaegu', cursive;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--ink-faint);
}

.legal-source a { border-bottom-color: var(--oak-dark); }

/* ═══ FUSSZEILE ═══ */
footer {
  background: var(--clay);
  color: var(--birch);
  text-align: center;
  padding: clamp(var(--space-2xl), 5vw, var(--space-3xl)) var(--space-lg);
}

.footer-logo { font-family: 'Jua', sans-serif; font-size: 2rem; margin-bottom: var(--space-xs); }
.footer-note { font-size: 0.98rem; opacity: 0.92; }

.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-md);
  margin-top: var(--space-lg);
}

.footer-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-family: 'Jua', sans-serif;
  font-size: 0.95rem;
  color: var(--ink);
  background: var(--honey);
  border: 2.5px solid var(--ink);
  border-radius: var(--r-pill);
  padding: 11px var(--space-lg);
  text-decoration: none;
  box-shadow: 0 5px 0 var(--honey-deep);
  transition: transform 0.22s var(--bounce), box-shadow 0.22s var(--bounce);
}

.footer-back:hover { transform: translateY(-3px); box-shadow: 0 8px 0 var(--honey-deep); }
.footer-back:active { transform: translateY(5px); box-shadow: 0 0 0 var(--honey-deep); }

/* ═══ EINBLENDEN ═══ */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.65s var(--ease), transform 0.65s var(--bounce);
}

.reveal.visible { opacity: 1; transform: translateY(0); }

/* ═══ BARRIEREFREIHEIT ═══ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .nav-maps:hover, .footer-back:hover, .legal-toc a:hover { transform: none; }
}

@media (pointer: coarse) {
  .nav-logo { padding-block: 10px; }
  /* Inline-Links im Fliesstext leichter treffbar, ohne den Zeilenfluss zu stoeren */
  .legal-content a { padding-block: 7px; }
  .legal-source a { padding-block: 7px; }
}

/* ═══ RESPONSIVE ═══ */
@media (max-width: 720px) {
  #nav { padding-left: var(--space-md); }
  .nav-logo { display: none; }
  .legal-toc ol { grid-template-columns: 1fr; }
}