@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/dm-sans-400.woff2') format('woff2');
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/dm-sans-500.woff2') format('woff2');
}

:root {
  --graphite: #2E2938;
  --bg: #F7F4F1;
  --cyan: #D8E3E9;
  --sage: #A5C1B8;
}

html, body { margin: 0; padding: 0; }
*, *::before, *::after { box-sizing: border-box; }
body {
  min-height: 100vh;
  background: var(--bg);
  font-family: 'DM Sans', 'Inter', system-ui, -apple-system, sans-serif;
  color: var(--graphite);
  -webkit-font-smoothing: antialiased;
}

/* ---------- Platzhalter / Hero ---------- */
.stage { position: relative; min-height: 100vh; display: flex; flex-direction: column; overflow: hidden; }
.motif { position: absolute; border-radius: 50%; pointer-events: none; }
.motif-1 { top: -22vmax; right: -18vmax; width: 48vmax; height: 48vmax;
  background: radial-gradient(circle at center, rgba(165,193,184,0.20) 0%, rgba(165,193,184,0) 68%); }
.motif-2 { bottom: -26vmax; left: -20vmax; width: 54vmax; height: 54vmax;
  background: radial-gradient(circle at center, rgba(216,227,233,0.55) 0%, rgba(216,227,233,0) 66%); }
.motif-3 { bottom: 14%; left: 50%; width: 42vmax; height: 42vmax;
  transform: translateX(-50%); border: 1px solid rgba(165,193,184,0.16); }
.hero { position: relative; flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; padding: 48px 24px; }
.wordmark { margin: 0; font-weight: 500; letter-spacing: 0.12em; line-height: 1;
  font-size: clamp(64px, 17vw, 168px); color: var(--graphite);
  animation: innrRise 900ms cubic-bezier(0.22,0.61,0.36,1) both; }
.divider { display: block; width: 48px; height: 3px; border-radius: 8px; background: var(--sage);
  margin: clamp(28px,5vw,44px) 0 clamp(24px,4.5vw,38px);
  animation: innrRise 900ms cubic-bezier(0.22,0.61,0.36,1) 220ms both; }
.subline { margin: 0; max-width: 34ch; font-weight: 400; line-height: 1.5;
  font-size: clamp(16px, 2.4vw, 21px); color: rgba(46,41,56,0.78); text-wrap: balance;
  animation: innrRise 900ms cubic-bezier(0.22,0.61,0.36,1) 360ms both; }

/* ---------- Footer (Platzhalter) ---------- */
.foot { position: relative; padding: 28px 24px clamp(28px,5vw,44px);
  display: flex; flex-direction: column; align-items: center; gap: 14px; font-size: 14px; }
.foot nav { display: flex; align-items: center; gap: 10px; }
.foot a { color: var(--graphite); text-decoration: none; padding: 6px 4px;
  border-bottom: 1px solid transparent; transition: border-color 160ms ease; }
.foot a:hover { border-bottom-color: var(--sage); }
.foot .sep { width: 4px; height: 4px; border-radius: 50%; background: rgba(46,41,56,0.30); }
.copyright { margin: 0; font-size: 13px; letter-spacing: 0.01em; color: rgba(46,41,56,0.55); text-align: center; }

@keyframes innrRise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  .wordmark, .divider, .subline { animation: none !important; opacity: 1 !important; transform: none !important; }
}

/* ---------- Rechtstexte (Impressum / Datenschutz) ---------- */
.doc { max-width: 720px; margin: 0 auto; padding: clamp(48px,8vw,96px) 24px 64px; line-height: 1.6; }
.doc .home { display: inline-block; font-weight: 500; letter-spacing: 0.12em; color: var(--graphite);
  text-decoration: none; font-size: 20px; margin-bottom: 40px; }
.doc h1 { font-weight: 500; font-size: clamp(26px,4vw,34px); margin: 0 0 28px; }
.doc h2 { font-weight: 500; font-size: 19px; margin: 36px 0 10px; }
.doc p { margin: 0 0 14px; color: rgba(46,41,56,0.88); }
.doc a { color: var(--graphite); text-decoration: underline; text-underline-offset: 2px; }
.doc .muted { color: rgba(46,41,56,0.6); font-size: 14px; }
.doc hr { border: none; border-top: 1px solid rgba(46,41,56,0.12); margin: 40px 0; }
.doc .back { margin-top: 48px; font-size: 14px; }
.doc .back a { color: rgba(46,41,56,0.7); }