/* Kaffeegeschenk-Ratgeber – ruhiges, reduziertes Erscheinungsbild */
:root{
  --paper:#ffffff;
  --mist:#f5f5f7;
  --ink:#1d1d1f;
  --graphite:#6e6e73;
  --hair:#d2d2d7;
  --link:#0066cc;
  --espresso:#2a1f19;
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Helvetica Neue",Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font);font-size:17px;line-height:1.47;letter-spacing:-.022em;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--link);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--link);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:-999px}
.skip:focus{left:12px;top:12px;background:var(--paper);padding:8px 12px;z-index:30}
.wrap{max-width:1040px;margin:0 auto;padding:0 22px}
main.wrap{max-width:980px}
.muted{color:var(--graphite);font-size:14px}
.nowrap{white-space:nowrap}
[id]{scroll-margin-top:72px}

/* ---------- Navigation ---------- */
header.site{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.8);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid transparent;transition:border-color .3s}
header.site.scrolled{border-bottom-color:rgba(0,0,0,.08)}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;height:48px}
.brand{display:flex;align-items:center;gap:8px;color:var(--ink);font-size:14px;font-weight:600;letter-spacing:-.01em}
.brand:hover{text-decoration:none}
.brand img{border-radius:6px}
.topnav{display:flex;gap:22px}
.topnav a{color:var(--ink);opacity:.8;font-size:12.5px;letter-spacing:-.01em}
.topnav a:hover,.topnav a[aria-current]{opacity:1;text-decoration:none}

/* ---------- Hero ---------- */
.hero{text-align:center;padding:64px 0 24px;overflow:hidden}
.hero h1{font-size:clamp(2.4rem,6vw,4rem);line-height:1.06;font-weight:700;letter-spacing:-.035em;margin:0 auto 12px;max-width:16ch}
.hero-sub{font-size:clamp(1.1rem,2.2vw,1.45rem);line-height:1.35;color:var(--graphite);margin:0 auto 18px;max-width:34ch;letter-spacing:-.02em}
.hero-links{display:flex;justify-content:center;flex-wrap:wrap;gap:8px 28px;margin:0 0 8px;font-size:1.05rem}
.updated{color:var(--graphite);font-size:12px;margin:18px 0 0}
.hero-art{max-width:300px;margin:30px auto 0;animation:arrive 1.1s cubic-bezier(.2,.7,.2,1) both}
.lineup{display:flex;justify-content:center;align-items:flex-end;gap:0;margin:36px auto 0;max-width:980px}
.lineup img{width:20%;max-width:200px;animation:arrive 1s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i) * 90ms + 150ms)}
.lineup img:nth-child(3){width:26%;max-width:250px}
@keyframes arrive{from{opacity:0;transform:translateY(28px) scale(.97)}to{opacity:1;transform:none}}

.steam path{stroke-dasharray:4 60;animation:steam 3.4s ease-in-out infinite}
.steam path:nth-child(2){animation-delay:.7s}
.steam path:nth-child(3){animation-delay:1.4s}
@keyframes steam{0%{opacity:0;transform:translateY(6px)}40%{opacity:1}100%{opacity:0;transform:translateY(-10px)}}

/* ---------- Text ---------- */
h1{font-size:2.5rem;line-height:1.1;letter-spacing:-.03em;margin:40px 0 12px}
h2{font-size:clamp(1.8rem,3.6vw,2.5rem);line-height:1.1;font-weight:700;letter-spacing:-.03em;margin:88px 0 24px}
h3{font-size:1.3rem;line-height:1.2;letter-spacing:-.02em;margin:0 0 6px}
main p,main li{max-width:68ch}
.lead{font-size:1.3rem;line-height:1.4;color:var(--ink);letter-spacing:-.02em;margin:40px 0}
.disclosure{font-size:12px;color:var(--graphite);text-align:center;margin:8px auto 0;max-width:none!important}
.aside,.callout{color:var(--graphite);font-size:15px;border-left:2px solid var(--hair);padding:2px 0 2px 16px;margin:28px 0;background:none}
.callout strong{color:var(--ink)}
.note{font-size:12px;color:var(--graphite);margin-top:48px}
.meta{color:var(--graphite);font-size:14px}
.toc{border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);padding:12px 0}
main ul{padding-left:20px}

/* ---------- Bento ---------- */
.bento{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.tile{position:relative;background:var(--mist);border-radius:22px;padding:40px 32px 0;display:flex;flex-direction:column;align-items:center;text-align:center;overflow:hidden;min-height:440px}
.tile h3{font-size:1.75rem;letter-spacing:-.03em;margin-bottom:6px}
.tile p{margin:0 auto;color:var(--ink);max-width:30ch}
.tile .tile-links{display:flex;gap:22px;justify-content:center;margin-top:14px}
.tile img{width:min(78%,300px);margin:auto auto 12px;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.tile:hover img{transform:scale(1.03)}
.tile-dark,.tile-wide{grid-column:1 / -1}
.tile-dark{background:var(--espresso);color:#f5f5f7;flex-direction:row;text-align:left;padding:48px 56px;min-height:420px;gap:32px}
.tile-dark .tile-text{flex:1}
.tile-dark h3{font-size:2.4rem;color:#fff}
.tile-dark p{color:#d6cfc9;margin:0;max-width:26ch;font-size:1.15rem}
.tile-dark .tile-links{justify-content:flex-start}
.tile-dark a{color:#4ea2ff}
.tile-dark img{width:min(44%,360px);margin:0}
.tile-wide{flex-direction:row;text-align:left;padding:40px 56px;min-height:340px;gap:32px}
.tile-wide .tile-text{flex:1}
.tile-wide p{margin:0}
.tile-wide .tile-links{justify-content:flex-start}
.tile-wide img{width:min(38%,300px);margin:0}

/* ---------- Produktzeilen ---------- */
.prow{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:48px;align-items:center;padding:40px 0;border-top:1px solid var(--hair)}
h2+.prow,p+.prow{border-top:0}
.prow-media{background:var(--mist);border-radius:22px;padding:28px;display:flex;justify-content:center}
.prow-media img{width:100%;max-width:300px}
.kicker{color:var(--accent,#b64400);font-size:14px;font-weight:600;margin:0 0 4px}
.prow h3{font-size:2rem;letter-spacing:-.03em;margin:0}
.sub{color:var(--graphite);margin:4px 0 14px;font-size:15px}
.pfor{margin:0 0 18px}
.feats{list-style:none;padding:0;margin:0 0 18px;display:grid;grid-template-columns:1fr 1fr;gap:14px 20px}
.feats li{display:flex;gap:10px;align-items:flex-start;font-size:15px;line-height:1.35}
.ic{width:22px;height:22px;flex:none;color:var(--ink);opacity:.85}
.more{margin:0 0 20px;font-size:15px}
.more summary{cursor:pointer;color:var(--link);list-style:none;display:inline-block}
.more summary::-webkit-details-marker{display:none}
.more summary::after{content:" ›";display:inline-block;transition:transform .2s}
.more[open] summary::after{transform:rotate(90deg)}
.pc{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:12px}
.pc ul{list-style:none;padding:0;margin:0}
.pc li{position:relative;padding-left:20px;margin:4px 0;color:var(--ink)}
.pros li::before{content:"+";position:absolute;left:2px;color:#248a3d;font-weight:600}
.cons li::before{content:"−";position:absolute;left:2px;color:var(--graphite);font-weight:600}
.actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.price{color:var(--graphite);font-size:14px}

/* ---------- Buttons ---------- */
.pill{display:inline-block;background:var(--link);color:#fff;font-size:15px;padding:10px 20px;border-radius:980px;transition:background .2s}
.pill:hover{background:#0077ed;text-decoration:none}
.pill-sm{font-size:13px;padding:7px 15px}

/* ---------- Einfache Ideen ohne konkretes Produkt ---------- */
.product{padding:24px 0;border-top:1px solid var(--hair);background:none;border-radius:0;margin:0}
h2+.product{border-top:0;padding-top:0}
.product h3{font-size:1.2rem}
.product .for{color:var(--graphite);font-size:14px;margin:0 0 6px}
.product p{margin:0 0 8px}
.product .btn{color:var(--link);background:none;padding:0;font-weight:400;font-size:15px;box-shadow:none}
.product .btn::after{content:" ›"}
.btn{color:var(--link)}

/* ---------- Vergleich ---------- */
.ccols{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:24px;text-align:center}
.ccol img{width:70%;max-width:200px;margin:0 auto 12px}
.ccol h3{font-size:1.25rem}
.ccol .sub{margin:2px 0 14px}
.cspecs{list-style:none;padding:0;margin:24px 0 0;text-align:center}
.cspecs li{display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 4px;border-top:1px solid var(--hair);font-size:14px}
.tablewrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:15px}
th{font-size:12px;font-weight:600;color:var(--graphite);text-align:left;padding:10px 12px;border-bottom:1px solid var(--hair)}
td{padding:14px 12px;border-bottom:1px solid #e8e8ed;vertical-align:middle;text-align:left}
td a strong{color:var(--ink)}
.cimg{width:84px}
.cimg img{width:64px;max-width:none;background:var(--mist);border-radius:12px;padding:4px}

/* ---------- Weitere Ratgeber ---------- */
.more-guides{margin-top:96px}
.gcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px}
.gcard{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--mist);border-radius:18px;padding:18px 18px 18px 24px;color:var(--ink);min-height:132px}
.gcard:hover{text-decoration:none}
.gcard:hover .glink{text-decoration:underline}
.gtext{display:flex;flex-direction:column;gap:2px}
.gtext strong{font-size:1.05rem}
.gtext span{color:var(--graphite);font-size:14px}
.gtext .glink{color:var(--link);margin-top:6px}
.gcard img{width:104px;flex:none}

/* ---------- Fuß ---------- */
footer.site{margin-top:96px;background:var(--mist);color:var(--graphite);font-size:12px;padding:28px 0 36px}
footer.site a{color:#424245}
.footcols{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px;border-bottom:1px solid var(--hair);padding-bottom:20px}
.footcols strong{color:var(--ink);font-weight:600}
.footcols ul{list-style:none;padding:0;margin:10px 0 0}
.footcols li{margin:6px 0}
.small{margin:14px 0 0}

/* ---------- Mobil ---------- */
@media (max-width:820px){
  .topnav{gap:16px;overflow-x:auto;scrollbar-width:none;max-width:62vw}
  .topnav::-webkit-scrollbar{display:none}
  .topnav a{white-space:nowrap}
  .bento{grid-template-columns:1fr}
  .tile{min-height:380px}
  .tile-dark,.tile-wide{flex-direction:column;text-align:center;padding:40px 28px 0}
  .tile-dark .tile-links,.tile-wide .tile-links{justify-content:center}
  .tile-dark p,.tile-wide p{margin:0 auto}
  .tile-dark img,.tile-wide img{width:min(72%,280px);margin:auto auto 12px}
  .prow{grid-template-columns:1fr;gap:24px}
  .lineup img:nth-child(1),.lineup img:nth-child(5){display:none}
  .lineup img{width:30%}.lineup img:nth-child(3){width:38%}
}
@media (max-width:520px){
  .brand span{display:none}
  .topnav{max-width:80vw}
  .hero{padding-top:44px}
  .feats{grid-template-columns:1fr}
  .pc{grid-template-columns:1fr}
  h2{margin-top:64px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}
.hero:not(.hero-home) h1{font-size:clamp(2.1rem,5vw,3.25rem);max-width:20ch}
.hero:not(.hero-home) .hero-art{max-width:240px}