/**
 * Seite Zauberspäne (Vikunja #3). Wird nur auf /zauberspaene/ geladen.
 * Aufbau angelehnt an /booknooks/: begrenzte Breite, abgerundete Flächen, weiße Karten.
 * Farben nach Brand Identity v1.0, Klassen mit Präfix hzzs-.
 */
.hzzs{
  --green:#23322a; --olive:#9fa671; --amber:#ffd15f; --white:#fff;
  --tint:rgba(159,166,113,.16); --tint-strong:rgba(159,166,113,.28); --line:rgba(159,166,113,.45);
  --muted:rgba(35,50,42,.72); --shadow:0 10px 30px rgba(35,50,42,.08);
  --head:"Surgena","Outfit",system-ui,sans-serif; --body:"Outfit",system-ui,sans-serif;
  font-family:var(--body); color:var(--green); font-size:16px; line-height:1.65;
  max-width:1140px; margin:0 auto; padding:0 20px 16px;
}
.hzzs *{box-sizing:border-box;}
.hzzs img{max-width:100%; height:auto; display:block;}
.hzzs h1,.hzzs h2,.hzzs h3{font-family:var(--head); font-weight:600; line-height:1.2; color:inherit; margin:0 0 .5em;}
.hzzs h1{font-size:clamp(32px,4.6vw,50px);}
.hzzs h2{font-size:clamp(24px,2.8vw,32px);}
.hzzs h3{font-size:18px;}
.hzzs p{margin:0 0 1em;}
.hzzs a{color:inherit;}
.hzzs a:focus-visible,.hzzs summary:focus-visible{outline:3px solid var(--amber); outline-offset:3px; border-radius:6px;}
.hzzs-sub{color:var(--muted); max-width:62ch;}
.hzzs-block{margin-top:64px;}
.hzzs-panel{background:var(--tint); border-radius:22px; padding:48px;}

/* Elementor/Botiga: Inhalt auf volle Spaltenbreite, keine Widget-Abstände */
.main-row>.elementor{width:100%;}
.elementor-widget-html:has(.hzzs){margin-bottom:0;}

/* Buttons und Pillen */
.hzzs-btns{display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:28px;}
.hzzs-btn{display:inline-block; padding:13px 26px; border-radius:999px; font-family:var(--head); font-weight:600; font-size:15px; text-decoration:none; border:2px solid var(--green); transition:background .2s,color .2s;}
.hzzs .hzzs-btn--main{background:var(--green); color:var(--white);}
.hzzs .hzzs-btn--main:hover{background:#000; border-color:#000;}
.hzzs .hzzs-btn--line{color:var(--green);}
.hzzs .hzzs-btn--line:hover{background:var(--green); color:var(--white);}
.hzzs-pills{list-style:none; padding:0; margin:28px 0 0; display:flex; flex-wrap:wrap; gap:10px; justify-content:center;}
.hzzs-pills a{display:inline-block; background:var(--olive); color:var(--white); text-decoration:none; padding:9px 18px; border-radius:999px; font-size:14px; font-weight:500; transition:background .2s;}
.hzzs-pills a:hover{background:var(--green);}

/* 1 Hero */
.hzzs-hero{text-align:center; padding:56px 0 8px;}
.hzzs-eyebrow{display:inline-block; font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:var(--olive); font-weight:600; margin-bottom:14px;}
.hzzs-hero .hzzs-sub{margin:0 auto; font-size:18px;}
.hzzs-checks{list-style:none; padding:0; margin:22px 0 0; display:flex; flex-wrap:wrap; gap:8px 26px; justify-content:center; font-size:14px; font-weight:500;}
.hzzs-checks li::before{content:"✔"; color:var(--olive); margin-right:7px;}

/* 2 Sammeln: Astor + Karten */
.hzzs-earn{display:grid; grid-template-columns:260px 1fr; gap:40px; align-items:center;}
.hzzs-astor{display:flex; flex-direction:column; align-items:center; gap:14px;}
.hzzs-astor img{width:190px; animation:hzzs-float 5s ease-in-out infinite;}
@keyframes hzzs-float{0%,100%{transform:translateY(0);}50%{transform:translateY(-8px);}}
.hzzs-bubble{background:var(--white); border:2px dashed var(--olive); border-radius:18px; padding:14px 18px; font-weight:200; font-size:16px; line-height:1.55; position:relative; box-shadow:var(--shadow);}
.hzzs-bubble::after{content:""; position:absolute; left:50%; bottom:-10px; width:16px; height:16px; background:var(--white); border-right:2px dashed var(--olive); border-bottom:2px dashed var(--olive); transform:translateX(-50%) rotate(45deg);}
.hzzs-bubble b{font-weight:500;}
.hzzs-cards{display:grid; grid-template-columns:repeat(2,1fr); gap:18px; margin-top:24px;}
.hzzs-card{background:var(--white); border-radius:18px; padding:24px 22px; box-shadow:var(--shadow); transition:transform .2s;}
.hzzs-card:hover{transform:translateY(-3px);}
.hzzs-icon{width:46px; height:46px; border-radius:50%; background:var(--amber); display:grid; place-items:center; font-size:22px; margin-bottom:14px;}
.hzzs .hzzs-card .hzzs-num{font-family:var(--head); font-weight:600; font-size:30px; line-height:1.1; color:var(--green); margin:0 0 6px;}
.hzzs-num small{font-size:15px; font-weight:500; color:var(--muted);}
.hzzs-card p{font-size:15px; color:var(--muted); margin:8px 0 0;}

/* 3 Wert-Tabelle */
.hzzs-table{width:100%; border-collapse:separate; border-spacing:0; margin-top:24px; background:var(--white); border-radius:16px; overflow:hidden; box-shadow:var(--shadow); font-size:15px;}
.hzzs-table th{background:var(--olive); color:var(--white); text-align:left; font-weight:600; padding:14px 20px;}
.hzzs-table th,.hzzs-table td{border:0;}
.hzzs-table td{padding:13px 20px; border-top:1px solid var(--tint-strong);}
.hzzs-table tr:nth-child(even) td{background:rgba(159,166,113,.07);}
.hzzs-table td:nth-child(2),.hzzs-table td:nth-child(3),.hzzs-table th:nth-child(2),.hzzs-table th:nth-child(3){text-align:right; white-space:nowrap;}
.hzzs-table td:nth-child(3){font-family:var(--head); font-weight:600;}
.hzzs-note{font-size:13px; color:var(--muted); margin:12px 0 0;}

/* 4 Zwei Spalten: Extra-Späne / Einlösen */
.hzzs-two{display:grid; grid-template-columns:1fr 1fr; gap:48px;}
.hzzs-list{list-style:none; padding:0; margin:16px 0 0; display:grid; gap:12px;}
.hzzs-list li{background:var(--tint); border-radius:14px; padding:14px 18px 14px 50px; position:relative; font-size:15px;}
.hzzs-li-icon{position:absolute; left:16px; top:13px; font-size:19px; line-height:1.3;}
.hzzs-list strong{display:block; font-family:var(--head); font-weight:600;}
.hzzs-steps{list-style:none; counter-reset:s; padding:0; margin:16px 0 0; display:grid; gap:12px;}
.hzzs-steps li{counter-increment:s; padding:4px 0 4px 52px; position:relative; font-size:15px;}
.hzzs-steps li::before{content:counter(s); position:absolute; left:0; top:2px; width:36px; height:36px; border-radius:50%; background:var(--green); color:var(--amber); font-family:var(--head); font-weight:600; display:grid; place-items:center;}
.hzzs-steps strong{display:block; font-family:var(--head); font-weight:600;}
.hzzs-key{width:170px; margin-top:20px; opacity:.95;}

/* 5 Vorteilsleiste */
.hzzs-strip{background:var(--green); color:var(--white); border-radius:22px; padding:30px 24px; display:grid; grid-template-columns:repeat(4,1fr); gap:20px; text-align:center;}
.hzzs-strip strong{display:block; font-family:var(--head); font-weight:600; font-size:17px; color:var(--amber);}
.hzzs-strip span{font-size:14px; opacity:.85;}

/* 6 FAQ */
.hzzs-faq{max-width:860px; margin:0 auto;}
.hzzs-faq details{background:var(--white); border-radius:14px; padding:16px 20px; margin-top:10px; box-shadow:0 2px 10px rgba(35,50,42,.05);}
.hzzs-faq summary{cursor:pointer; list-style:none; font-family:var(--head); font-weight:600; font-size:16px; display:flex; justify-content:space-between; gap:16px;}
.hzzs-faq summary::-webkit-details-marker{display:none;}
.hzzs-faq summary::after{content:"+"; color:var(--olive); font-size:22px; line-height:1;}
.hzzs-faq details[open] summary::after{content:"–";}
.hzzs-faq details p{margin:10px 0 0; font-size:15px; color:var(--muted);}

/* 7 Abschluss */
.hzzs-end{text-align:center;}
.hzzs-end img{width:150px; margin:0 auto 18px;}
.hzzs-slogan{font-family:var(--head); font-weight:600; font-size:20px; color:var(--olive); margin:26px 0 0;}

/* Responsive */
@media (max-width:980px){
  .hzzs-earn{grid-template-columns:1fr;}
  .hzzs-astor{flex-direction:row; justify-content:center;}
  .hzzs-astor img{width:130px;}
  .hzzs-cards{grid-template-columns:1fr;}
  .hzzs-two{grid-template-columns:1fr; gap:40px;}
  .hzzs-strip{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:600px){
  .hzzs{padding:0 16px 52px; font-size:15px;}
  .hzzs-panel{padding:28px 18px; border-radius:18px;}
  .hzzs-block{margin-top:44px;}
  .hzzs-astor{flex-direction:column;}
  .hzzs-table th,.hzzs-table td{padding:11px 12px;}
  .hzzs-strip{grid-template-columns:1fr 1fr; padding:22px 14px;}
}
@media (prefers-reduced-motion:reduce){
  .hzzs-astor img{animation:none;}
  .hzzs-card{transition:none;}
}

/* Stufen */
.hzzs-tiers{list-style:none; padding:0; margin:28px 0 0; display:grid; grid-template-columns:repeat(5,1fr); gap:14px; position:relative;}
.hzzs-tiers::before{content:""; position:absolute; left:8%; right:8%; top:27px; border-top:3px dashed var(--line); z-index:0;}
.hzzs-tiers li{position:relative; z-index:1; background:var(--white); border-radius:18px; padding:16px 14px 20px; text-align:center; box-shadow:var(--shadow); display:flex; flex-direction:column; align-items:center; gap:4px;}
.hzzs-tier-n{width:38px; height:38px; border-radius:50%; background:var(--olive); color:var(--white); font-family:var(--head); font-weight:600; display:grid; place-items:center; margin-bottom:8px;}
.hzzs-tiers strong{font-family:var(--head); font-weight:600; font-size:16px;}
.hzzs-tier-from{font-size:13px; color:var(--muted);}
.hzzs-tier-rate{margin-top:8px; background:var(--tint); border-radius:999px; padding:4px 12px; font-size:14px; font-weight:600;}
.hzzs-tiers li.is-top{background:var(--green); color:var(--white);}
.hzzs-tiers li.is-top .hzzs-tier-n{background:var(--amber); color:var(--green);}
.hzzs-tiers li.is-top .hzzs-tier-from{color:rgba(255,255,255,.75);}
.hzzs-tiers li.is-top .hzzs-tier-rate{background:var(--amber); color:var(--green);}
@media (max-width:980px){
  .hzzs-tiers{grid-template-columns:1fr; gap:10px;}
  .hzzs-tiers::before{left:46px; right:auto; top:20px; bottom:20px; border-top:0; border-left:3px dashed var(--line);}
  .hzzs-tiers li{flex-direction:row; flex-wrap:wrap; text-align:left; padding:14px 16px; gap:4px 12px;}
  .hzzs-tier-n{margin:0;}
  .hzzs-tier-rate{margin:0 0 0 auto;}
  .hzzs-tier-from{flex-basis:100%; padding-left:50px; order:3;}
}