:root{
  --paper:#fff8f4; --ink:#2b2331; --ink-soft:#6f6472; --line:#ead9d3;
  --petrol:#1e6b74; --petrol-deep:#154d54; --pink:#ea5f8c; --pink-soft:#fde3ea;
  --ok:#2d7d46; --warn:#b34a2a; --maxw:74rem; --read:44rem;
}
@media (prefers-color-scheme:dark){
  :root{ --paper:#1c171d; --ink:#f4ecef; --ink-soft:#b8aab2; --line:#3a2f37; --pink-soft:#3a2431; --petrol:#5fb7c1; --petrol-deep:#8fd3da; }
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font:400 1.0625rem/1.6 "Nunito Sans",system-ui,sans-serif}
h1,h2,h3{font-family:"Fraunces",Georgia,serif;font-variation-settings:"SOFT" 100;line-height:1.1;margin:0 0 .5em;font-weight:600;letter-spacing:-.01em}
h1{font-size:clamp(2rem,5vw,3.2rem)}
h2{font-size:clamp(1.5rem,3vw,2.1rem);margin-top:2.2em}
h3{font-size:1.25rem;margin-top:1.6em}
p{margin:0 0 1em}
img{max-width:100%;height:auto}
a{color:var(--petrol);text-decoration-thickness:1px;text-underline-offset:2px}
a:focus-visible,button:focus-visible{outline:3px solid var(--pink);outline-offset:2px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 1.25rem}
.read{max-width:var(--read)}
.lede{font-size:1.2rem;color:var(--ink-soft)}
.updated,.hint,small{font-size:.9rem;color:var(--ink-soft)}
.draftnote{background:var(--pink-soft);padding:.6rem 1rem;border-radius:.5rem;font-weight:600}
.hero-img{border-radius:1rem;margin:0 0 1.5rem}

header.top{border-bottom:1px solid var(--line)}
header.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-top:.9rem;padding-bottom:.9rem}
.logo{font-family:"Fraunces",serif;font-weight:700;font-size:1.35rem;color:var(--ink);text-decoration:none}
.logo b{color:var(--pink)}
nav.main a{margin-left:1.2rem;color:var(--ink-soft);text-decoration:none;font-weight:600;font-size:.95rem}
nav.main a:hover{color:var(--petrol)}
@media (max-width:640px){nav.main a{margin-left:.8rem;font-size:.85rem}}

.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:2rem;align-items:center;padding:3rem 0 1.5rem}
@media (max-width:820px){.hero{grid-template-columns:1fr;padding-top:2rem}}
.hero .lede{max-width:34rem}
.cta{display:inline-block;background:var(--petrol);color:#fff;text-decoration:none;font-weight:700;padding:.9rem 1.5rem;border-radius:.6rem}
.cta:hover{background:var(--petrol-deep)}
.stage{position:relative;height:clamp(220px,32vw,340px);border-radius:1.2rem;background:linear-gradient(180deg,var(--pink-soft),transparent 70%);overflow:hidden}
.stage svg{position:absolute;inset:0;width:100%;height:100%}
@media (prefers-reduced-motion:no-preference){
  .kugel{animation:roll 6s ease-in-out infinite;transform-origin:center;transform-box:fill-box}
  @keyframes roll{0%{transform:translateX(-26%) rotate(0)}50%{transform:translateX(26%) rotate(360deg)}100%{transform:translateX(-26%) rotate(0)}}
}
.section-title{margin-top:1.5em}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin:1rem 0 3rem}
@media (max-width:820px){.cards{grid-template-columns:1fr}}
.card{display:flex;flex-direction:column;gap:.4rem;padding:1.2rem;border:1px solid var(--line);border-radius:.9rem;text-decoration:none;color:var(--ink)}
.card:hover{border-color:var(--petrol)}
.card img{border-radius:.5rem;aspect-ratio:16/9;object-fit:cover}
.card strong{font-family:"Fraunces",serif;font-size:1.15rem;line-height:1.25}
.card span{color:var(--ink-soft);font-size:.95rem}

.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:.8rem;overflow:hidden;margin:1.5rem 0 2rem}
.facts div{background:var(--paper);padding:1rem 1.1rem}
.facts dt{font-size:.85rem;color:var(--ink-soft)}
.facts dd{margin:0;font-family:"Fraunces",serif;font-size:1.3rem;font-weight:600}
@media (max-width:700px){.facts{grid-template-columns:1fr 1fr}}

.tablewrap{overflow-x:auto}
table.price{width:100%;border-collapse:collapse;margin:1rem 0 .5rem;font-size:1rem}
.price th,.price td{text-align:left;padding:.8rem .6rem;border-bottom:1px solid var(--line);vertical-align:top}
.price th{font-size:.85rem;color:var(--ink-soft);font-weight:600}
.price tr.best td{background:var(--pink-soft)}

.procon{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin:1rem 0}
@media (max-width:640px){.procon{grid-template-columns:1fr}}
.procon h3{margin-top:0}
.procon ul{list-style:none;padding:0;margin:.4rem 0 0}
.procon li{padding:.45rem 0 .45rem 1.7rem;position:relative;border-bottom:1px solid var(--line)}
.procon li::before{position:absolute;left:0;top:.45rem;font-weight:700}
.pro li::before{content:"+";color:var(--ok)}
.con li::before{content:"–";color:var(--warn)}

ol.steps{counter-reset:s;list-style:none;padding:0;margin:1rem 0}
ol.steps li{counter-increment:s;position:relative;padding:.6rem 0 .6rem 3rem}
ol.steps li::before{content:counter(s);position:absolute;left:0;top:.5rem;width:2.1rem;height:2.1rem;border-radius:50%;background:var(--petrol);color:#fff;display:grid;place-items:center;font-family:"Fraunces",serif;font-weight:700}

details{border-bottom:1px solid var(--line);padding:.4rem 0}
summary{cursor:pointer;font-weight:700;padding:.6rem 0;list-style:none;display:flex;justify-content:space-between;gap:1rem}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";color:var(--pink);font-family:"Fraunces",serif;font-size:1.4rem;line-height:1}
details[open] summary::after{content:"–"}
details p{color:var(--ink-soft)}

.guides{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin:1rem 0}
@media (max-width:760px){.guides{grid-template-columns:1fr}}
.guides a{display:block;padding:1.2rem;border:1px solid var(--line);border-radius:.8rem;text-decoration:none;color:var(--ink)}
.guides a:hover{border-color:var(--petrol)}
.guides strong{display:block;font-family:"Fraunces",serif;font-size:1.1rem;margin-bottom:.3rem}
.guides span{color:var(--ink-soft);font-size:.95rem}

.amzbox{display:grid;grid-template-columns:auto 1fr auto;gap:1.2rem;align-items:center;border:2px solid var(--pink);border-radius:1rem;padding:1.2rem;margin:1.5rem 0}
.amzbox .ball{width:64px;height:64px}
.amzbox .txt strong{display:block;font-family:"Fraunces",serif;font-size:1.15rem}
.amzbox .txt span{color:var(--ink-soft);font-size:.9rem}
.amzbox .buy{text-align:right}
.amzbox .price{font-family:"Fraunces",serif;font-size:1.5rem;margin-bottom:.3rem}
.amzbox .buy a{display:inline-block;background:var(--petrol);color:#fff;text-decoration:none;font-weight:700;padding:.6rem 1.1rem;border-radius:.5rem}
.amzbox .buy a:hover{background:var(--petrol-deep)}
@media (max-width:600px){.amzbox{grid-template-columns:1fr}.amzbox .buy{text-align:left}}

footer{border-top:1px solid var(--line);margin-top:4rem;padding:2rem 0 3rem;color:var(--ink-soft);font-size:.9rem}
footer a{color:var(--ink-soft);margin-right:1rem}