:root{
  --bg:#21150d;
  --paper:#fbf2e6;
  --ink:#2b211a;
  --gold:#c57a17;
  --wine:#8b2b21;
  --olive:#68723b;
  --brown:#673512;
  --line:rgba(255,255,255,.18);
}
*{box-sizing:border-box}
html{background:var(--bg);scroll-behavior:smooth}
body{
  margin:0;
  min-height:100vh;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:white;
  background:
    radial-gradient(circle at 50% 0%,#57351f 0%,#21150d 72%);
}
a{-webkit-tap-highlight-color:transparent}
.page{min-height:100vh}
.hero{
  position:relative;
  width:100%;
  background:#1d120b;
  overflow:hidden;
}
.hero picture{display:block}
.hero-image{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:1672 / 941;
  object-fit:contain;
  user-select:none;
  -webkit-user-drag:none;
}
.desktop-hotspots{
  position:absolute;
  inset:0;
  pointer-events:none;
}
.hotspot{
  position:absolute;
  display:block;
  pointer-events:auto;
  border-radius:22px;
  outline:none;
}
.hotspot span{
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
}
.hotspot:hover,
.hotspot:focus-visible{
  background:rgba(255,255,255,.08);
  box-shadow:inset 0 0 0 3px rgba(255,255,255,.72),0 10px 35px rgba(0,0,0,.15);
}
/* Prozentwerte bezogen auf den finalen 1672x941-Entwurf */
.hs-home    {left:24.45%;top:58.55%;width:12.33%;height:25.00%}
.hs-family  {left:37.55%;top:58.55%;width:12.33%;height:25.00%}
.hs-calendar{left:50.55%;top:58.55%;width:12.33%;height:25.00%}
.hs-weather {left:63.55%;top:58.55%;width:12.33%;height:25.00%}

.mobile-nav{
  display:none;
  padding:20px;
  gap:14px;
  grid-template-columns:1fr 1fr;
  background:linear-gradient(180deg,#f7ead9,#ead4b8);
}
.mobile-card{
  min-height:150px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  text-decoration:none;
  color:var(--ink);
  background:rgba(255,250,244,.94);
  border:1px solid rgba(90,55,24,.10);
  border-radius:22px;
  padding:18px;
  box-shadow:0 12px 28px rgba(61,38,19,.13);
  transition:transform .18s ease, box-shadow .18s ease;
}
.mobile-card:hover,.mobile-card:focus-visible{
  transform:translateY(-3px);
  box-shadow:0 18px 34px rgba(61,38,19,.18);
}
.mobile-card .icon{font-size:2rem;color:var(--brown);margin-bottom:8px}
.mobile-card:nth-child(2) .icon{color:var(--olive)}
.mobile-card:nth-child(3) .icon{color:var(--wine)}
.mobile-card:nth-child(4) .icon{color:var(--gold)}
.mobile-card strong{font-size:1.08rem}
.mobile-card small{margin-top:6px;line-height:1.35;opacity:.72}

footer{
  display:none;
  gap:12px;
  justify-content:center;
  flex-wrap:wrap;
  padding:22px 20px calc(22px + env(safe-area-inset-bottom));
  background:#25170f;
  color:#f7eadf;
  font-size:.82rem;
}
footer span+span:before{content:"·";margin-right:12px;opacity:.6}

@media (max-width:760px){
  body{background:#f1dfc7}
  .desktop-hotspots{display:none}
  .hero-image{
    width:100%;
    aspect-ratio:auto;
  }
  .mobile-nav{display:grid}
  footer{display:flex}
}
@media (max-width:430px){
  .mobile-nav{grid-template-columns:1fr}
  .mobile-card{min-height:126px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .mobile-card{transition:none}
}