/* Clayzy – Webseite im Knet-Look. Bewusst ein heller Look (Knete auf Tisch), Werte aus den App-Mockups. */
:root {
  --table: #f7dcb0;
  --card: #fff1da;
  --ink: #3b2314;
  --ink-soft: #6b4228;
  --orange: #e2703a;
  --green: #5cb85c;
  --blue: #6a9cf5;
  --yellow: #ffd25a;
  --pink: #ff8fb1;
  --eye: #2b1a10;
  --lift: rgba(120, 60, 20, .22);
  --shade: rgba(140, 80, 30, .18);
  --display: "Baloo 2", "Arial Rounded MT Bold", ui-rounded, system-ui, sans-serif;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { background: var(--table); }
body {
  margin: 0; background: var(--table); color: var(--ink);
  font: 500 18px/1.55 var(--display);
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
a { color: #8a3b12; }
a:hover { color: #5e260a; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 8px; }
img { max-width: 100%; display: block; }
.wrap { max-width: 1040px; margin: 0 auto; }

/* Knet-Flächen */
.clay {
  background: var(--card); border-radius: 26px 22px 28px 20px;
  box-shadow: inset -5px -6px 0 var(--shade), 0 6px 0 var(--lift);
}
.btn {
  display: inline-flex; align-items: center; gap: 10px; text-decoration: none;
  font: 800 19px var(--display); color: #fff; background: var(--green);
  padding: 14px 24px; border-radius: 22px 26px 20px 24px;
  box-shadow: inset -6px -8px 0 rgba(30,90,30,.35), inset 5px 5px 0 rgba(255,255,255,.25), 0 7px 0 rgba(120,60,20,.3);
  text-shadow: 0 2px 0 #2f7a30; transition: transform .08s, box-shadow .08s;
}
.btn:hover { color: #fff; }
.btn:active { transform: translateY(5px); box-shadow: inset -6px -8px 0 rgba(30,90,30,.35); }
.btn.soon { background: var(--ink); text-shadow: none; box-shadow: inset -5px -6px 0 rgba(0,0,0,.35), 0 7px 0 rgba(120,60,20,.3); cursor: default; }
.btn.soon small { display: block; font-size: 12px; font-weight: 600; opacity: .8; line-height: 1; }
.btn.soon b { display: block; font-size: 20px; line-height: 1.1; }

/* Blobs (wie in den Mockups) */
.blob {
  --s: 60px; --c: var(--pink);
  width: var(--s); height: var(--s); flex: none; position: relative;
  border-radius: 48% 52% 46% 54% / 54% 46% 52% 48%; background: var(--c);
  box-shadow: inset calc(var(--s) * -.08) calc(var(--s) * -.1) 0 rgba(90,40,10,.22),
              inset calc(var(--s) * .07) calc(var(--s) * .07) 0 rgba(255,255,255,.35),
              0 calc(var(--s) * .05) 0 rgba(90,40,10,.18);
}
.blob::before, .blob::after {
  content: ""; position: absolute; top: 38%;
  width: max(4px, calc(var(--s) * .1)); height: max(5px, calc(var(--s) * .13));
  border-radius: 50%; background: var(--eye);
}
.blob::before { left: calc(50% - var(--s) * .08 - max(4px, calc(var(--s) * .1))); }
.blob::after { left: calc(50% + var(--s) * .08); }
.blob.blink::before, .blob.blink::after { animation: blink 4.2s infinite; }
@keyframes blink { 0%, 94%, 100% { transform: scaleY(1); } 97% { transform: scaleY(.1); } }

/* Kopf + Fuß */
.top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-block: 18px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); font-weight: 800; font-size: 22px; }
.brand img { width: 40px; height: 40px; }
.top nav { display: flex; gap: 6px; flex-wrap: wrap; }
.top nav a { text-decoration: none; color: var(--ink-soft); font-weight: 700; font-size: 15px; padding: 6px 10px; border-radius: 14px; }
.top nav a:hover { background: var(--card); color: var(--ink); }
footer { padding-block: 40px 48px; color: var(--ink-soft); font-size: 15px; }
footer .wrap { display: flex; flex-wrap: wrap; gap: 10px 22px; justify-content: space-between; align-items: center; }
footer nav { display: flex; gap: 18px; flex-wrap: wrap; }
footer a { color: var(--ink-soft); font-weight: 700; }

/* Unterseiten (Datenschutz, Support, Impressum) */
.doc { max-width: 760px; margin: 12px auto 0; padding: 28px clamp(18px, 4vw, 44px) 36px; }
.doc h1 { font-size: clamp(32px, 6vw, 44px); line-height: 1.05; margin: 0 0 6px; text-wrap: balance; }
.doc .stand { color: var(--ink-soft); font-size: 15px; margin: 0 0 24px; }
.doc h2 { font-size: 22px; margin: 30px 0 6px; line-height: 1.2; }
.doc p, .doc li { font-size: 17px; }
.doc ul { padding-left: 22px; }
.fill { background: #ffe7a6; border-radius: 6px; padding: 0 5px; font-weight: 700; }

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }