/* Cuddleya — gemeinsame Gestaltung aller Seiten. Palette wie in der App (BabyUI/Tokens/Palette.swift). */
:root{
  color-scheme: light dark;
  --paper:#faf7f2; --tile:#ffffff; --sunk:#f2eee7;
  --hair:#e6e0d5; --hair2:#d6cfc2;
  --ink:#141833; --ink-2:#565b73; --ink-3:#8b8fa3;
  --navy:#5f6fa8; --navy-soft:#e8eaf3; --sun:#f2cdd9;
}
@media (prefers-color-scheme: dark){
  :root{
    --paper:#0f1016; --tile:#191b24; --sunk:#20222c;
    --hair:#282a35; --hair2:#383b48;
    --ink:#f2f2f7; --ink-2:#a9adbd; --ink-3:#767a8c;
    --navy:#b9c4e6; --navy-soft:#23273a; --sun:#b98a9a;
  }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",sans-serif;
  font-size:17px; line-height:1.6;
}
a{color:var(--navy); text-underline-offset:2px}
.wrap{max-width:760px; margin:0 auto; padding:0 16px}

header.site{border-bottom:1px solid var(--hair)}
header.site .wrap{display:flex; align-items:center; gap:16px; flex-wrap:wrap; padding-top:14px; padding-bottom:14px}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink); font-weight:700; font-size:1.15rem; margin-right:auto}
.brand img{width:36px; height:36px; border-radius:9px}
nav.tabs{display:flex; gap:4px 14px; flex-wrap:wrap; font-size:.95rem}
nav.tabs a{color:var(--ink-2); text-decoration:none}
nav.tabs a:hover, nav.tabs a[aria-current="page"]{color:var(--ink)}
nav.tabs a[aria-current="page"]{font-weight:600}

main{padding:40px 0 56px}
h1{font-size:2rem; line-height:1.2; margin:0 0 8px; letter-spacing:-.01em}
h2{font-size:1.3rem; line-height:1.3; margin:40px 0 8px}
h3{font-size:1.05rem; margin:24px 0 4px}
p, ul{margin:0 0 14px}
ul{padding-left:1.2em}
li{margin-bottom:6px}
.meta{color:var(--ink-3); font-size:.92rem; margin-bottom:28px}
.lead{font-size:1.15rem; color:var(--ink-2)}

.card{background:var(--tile); border:1px solid var(--hair); border-radius:18px; padding:20px 22px; margin:18px 0}
.card h3{margin-top:0}
.note{background:var(--navy-soft); border-radius:14px; padding:14px 18px; font-size:.95rem}

.hero{display:flex; gap:28px; align-items:center; flex-wrap:wrap; margin-bottom:12px}
.hero img{width:128px; height:128px; border-radius:28px; box-shadow:0 8px 28px rgba(20,24,51,.12)}
.hero div{flex:1; min-width:240px}
.grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:14px; margin:28px 0}
.grid .card{margin:0}
.soon{display:inline-block; background:var(--sunk); color:var(--ink-2); border-radius:999px; padding:6px 14px; font-size:.9rem}

dl{margin:0 0 14px}
dt{font-weight:600; margin-top:12px}
dd{margin:2px 0 0}

footer.site{border-top:1px solid var(--hair); color:var(--ink-3); font-size:.9rem}
footer.site .wrap{display:flex; gap:8px 18px; flex-wrap:wrap; padding-top:20px; padding-bottom:28px}
footer.site a{color:var(--ink-2)}
footer.site span{margin-right:auto}