/* Inselbewohner — die Website spricht die Palette der App:
   Tag-Himmelblau oben, Nachtblau im Text, Moosgrün als Akzent. */
:root {
  --sky-top: #3D7DD6;
  --sky-mid: #6FB1E8;
  --sky-low: #A8DCF0;
  --ink: #1B2350;
  --paper: #F6F9FC;
  --accent: #5A9E4B;
  --grass: #6FAE52;
  --grass-hi: #93C878;
  --dirt: #8A6242;
  --pet: #7BB661;
  --pet-dark: #2F4A26;
}

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

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--ink);
  background: var(--paper);
  line-height: 1.6;
}

header {
  background: linear-gradient(var(--sky-top), var(--sky-mid) 60%, var(--sky-low));
  color: #fff;
  text-align: center;
  padding: 64px 24px 72px;
  image-rendering: pixelated;
}

/* Kleine CSS-Insel: Pixel-Anmutung ohne ein einziges Bild. */
.island-art { width: 160px; margin: 0 auto 24px; }
.pet {
  width: 48px; height: 48px; margin: 0 auto -6px;
  background: var(--pet);
  border: 4px solid var(--pet-dark);
  border-radius: 14px 14px 16px 16px;
  position: relative;
}
.pet::before, .pet::after {
  content: ""; position: absolute; top: 16px;
  width: 7px; height: 7px; background: #1B1B22;
}
.pet::before { left: 10px; }
.pet::after { right: 10px; }
.grass {
  height: 22px; background: var(--grass);
  border: 4px solid var(--pet-dark); border-bottom: none;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  box-shadow: inset 0 6px 0 var(--grass-hi);
}
.dirt {
  height: 44px; background: var(--dirt);
  border: 4px solid #3A2E1E; border-top: none;
  clip-path: polygon(0 0, 100% 0, 78% 55%, 60% 80%, 50% 100%, 40% 80%, 22% 55%);
}

h1 {
  font-size: 2.4rem;
  letter-spacing: 0.02em;
  text-shadow: 0 3px 0 rgba(0, 0, 0, 0.25);
}

.tagline { margin-top: 10px; font-size: 1.05rem; opacity: 0.95; }

main {
  max-width: 680px;
  margin: 0 auto;
  padding: 40px 24px 24px;
}

section { margin-bottom: 44px; }

h2 {
  color: var(--accent);
  font-size: 1.35rem;
  margin-bottom: 12px;
  padding-bottom: 6px;
  border-bottom: 3px solid var(--sky-low);
}

ul { padding-left: 22px; }
li { margin-bottom: 8px; }
p { margin-bottom: 12px; }

.tldr {
  font-weight: 700;
  background: var(--sky-low);
  display: inline-block;
  padding: 4px 12px;
  border-radius: 6px;
}

a { color: var(--sky-top); }

footer {
  text-align: center;
  padding: 28px 24px 40px;
  color: #5A6B8C;
  font-size: 0.9rem;
}
footer a { color: inherit; }