/* =========================================================================
   Shared site styles for legal / utility pages (impressum, datenschutz, agb,
   widerruf, danke, 404). Same design system as index.html (Baloo 2 + Nunito,
   self-hosted). The homepage keeps its own richer inline styles.
   ========================================================================= */
:root {
  --blue:#bfe4e8; --blue-2:#a6d8de; --blue-deep:#2b6f78; --blue-soft:#e7f4f5;
  --green:#3f9e3f; --green-d:#2f7a30; --pink:#ef8f8f; --orange:#f47b41; --yellow:#ffc833;
  --cream:#fbf7ef; --paper:#fffdf8; --muted:#f0ebe1;
  --ink:#2c3338; --ink-soft:#56636b; --line:#ece4d6;
  --maxw:980px; --r-lg:28px; --r-md:18px;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--cream); color:var(--ink);
  font-family:'Nunito',system-ui,sans-serif; font-weight:600; line-height:1.5;
  -webkit-font-smoothing:antialiased; }
h1,h2,h3,h4 { font-family:'Baloo 2',system-ui,sans-serif; font-weight:800; line-height:1.1; margin:0; }
p { margin:0; }
a { color:var(--blue-deep); }
img { display:block; max-width:100%; }
.wrap { max-width:var(--maxw); margin:0 auto; padding:0 28px; }

/* buttons */
.cta { font-family:'Baloo 2',sans-serif; font-weight:700; border:none; cursor:pointer;
  color:#fff; background:var(--green); border-radius:999px; display:inline-flex;
  align-items:center; gap:10px; line-height:1; text-decoration:none;
  box-shadow:0 5px 0 var(--green-d); transition:transform .12s ease, box-shadow .12s ease; }
.cta:hover { transform:translateY(-1px); }
.cta:active { transform:translateY(4px); box-shadow:0 1px 0 var(--green-d); }
.cta.md { font-size:16px; padding:13px 24px; }
.cta.ghost { background:#fff; color:var(--ink); border:2px solid var(--line); box-shadow:none; }

/* header */
.site-header { background:rgba(251,247,239,.92); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line); position:sticky; top:0; z-index:50; }
.site-header .wrap { max-width:1180px; display:flex; align-items:center; justify-content:space-between; height:66px; }
.brand { display:flex; align-items:center; gap:10px; font-family:'Baloo 2',sans-serif;
  font-weight:800; font-size:22px; color:var(--green); text-decoration:none; white-space:nowrap; }
.brand .mark { width:32px; height:32px; border-radius:10px; background:var(--blue);
  display:grid; place-items:center; flex:none; box-shadow:inset 0 0 0 2px rgba(43,111,120,.18); }

/* legal content */
main { min-height:55vh; }
.legal { max-width:820px; margin:0 auto; padding:54px 28px 84px; }
.legal h1 { font-size:clamp(30px,4vw,42px); color:var(--green-d); margin-bottom:8px; }
.legal .lede { color:var(--ink-soft); font-size:16px; margin-bottom:30px; }
.legal h2 { font-size:22px; color:var(--blue-deep); margin:34px 0 12px; }
.legal h3 { font-size:17px; color:var(--ink); margin:22px 0 8px; }
.legal p, .legal li { color:#3c474d; font-size:16px; line-height:1.7; margin-bottom:12px; }
.legal ul { padding-left:22px; margin-bottom:14px; }
.legal a { color:var(--blue-deep); }
.legal code { background:#f4f6f8; border:1px solid #e3e8ec; border-radius:8px; padding:2px 7px; font-size:14px; }
.legal .note { background:var(--blue-soft); border-left:5px solid var(--green); border-radius:12px;
  padding:16px 20px; font-weight:700; color:var(--ink); margin:18px 0; }

/* card (danke / 404) */
.center-wrap { min-height:70vh; display:flex; align-items:center; }
.card-box { background:#fff; border-radius:var(--r-lg); border:2px solid var(--line);
  box-shadow:0 24px 50px rgba(43,111,120,.16); padding:48px 44px; max-width:600px;
  margin:60px auto; text-align:center; }
.card-box .big { font-size:60px; line-height:1; }
.card-box h1 { color:var(--green-d); font-size:32px; margin:16px 0 10px; }
.card-box p { color:var(--ink-soft); font-size:16px; line-height:1.6; margin-bottom:14px; }

/* footer (matches homepage tone) */
.site-footer { background:var(--ink); color:#aeb8bc; padding:48px 0 34px; }
.site-footer .wrap { max-width:1180px; display:flex; flex-direction:column; gap:16px; align-items:center; text-align:center; }
.site-footer .fbrand { font-family:'Baloo 2',sans-serif; font-weight:800; font-size:22px; color:var(--blue); }
.site-footer nav { display:flex; flex-wrap:wrap; gap:10px 18px; justify-content:center; }
.site-footer a { color:#aeb8bc; font-size:15px; font-weight:700; text-decoration:none; }
.site-footer a:hover { color:#fff; }
.site-footer .copy { color:#7e898d; font-size:13px; }

@media (max-width:560px){
  .legal { padding:40px 22px 64px; }
  .card-box { padding:36px 24px; }
}