.trustline{display:flex;align-items:center;gap:12px;font-size:16px}
@media (max-width:430px){
.trustline{gap:8px;font-size:15px;flex-wrap:nowrap}
}
/* Touch the size only. If the background were also set here it would overwrite the
   gradient of the half star from base.css - and that would then have to be
   restored separately. */
.star{width:24px;height:24px;border:var(--bd);border-radius:2px;display:grid;place-content:center}
.trustline .meta{color:var(--muted);font-size:16px;font-weight:600}
@media (max-width:430px){
.trustline .meta{font-size:13px}
}
.pcard .price .amount{font-family:'Sora','Sora Fallback',sans-serif;font-size:64px;line-height:.9;font-weight:800;letter-spacing:-3.6px}
@media (max-width:720px){
.pcard .price .amount{font-size:58px}
}
@media (max-width:430px){
.pcard .price .amount{font-size:52px;letter-spacing:-2.4px}
}
.hero .pcard{width:100%;max-width:358px;justify-self:end;padding:22px 26px 24px;margin-top:64px}
.hero .pcard .kicker{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-right:0}
.hero .pcard .kicker .lbl{font-size:14px;font-weight:800;color:var(--muted)}
.hero .pcard .price{margin-top:14px}
.hero .pcard .rule{margin:20px 0 12px}
.hero .pcard .feat{padding:5px 0}
.hero .pcard .btn{margin-top:20px}

/* When the card shares the line with the heading it becomes narrow - stacked on a
   phone it is wide again. The sizes inside it must therefore NOT follow the
   window but the card itself. Without that the button label wraps first (at 17px
   it alone needs 266px), then the card header. */
.hero .pcard{container-type:inline-size}
/* Note: the query measures the content box of the card, not its outer width. 268px
   of content corresponds to roughly a 320px card - exactly where the button label
   at 17px no longer fits on one line. */
@container (max-width:268px){
.hero .pcard .kicker{gap:8px}
.hero .pcard .kicker .lbl{font-size:12px}
.hero .pcard .tag{padding:5px 8px;letter-spacing:.2px}
.hero .pcard .price .amount{font-size:54px;letter-spacing:-3px}
.hero .pcard .btn{font-size:14px;padding:15px 14px}
}
.plans{display:grid;grid-template-columns:repeat(2,1fr);gap:44px;max-width:804px;margin:0 auto}
@media (max-width:720px){
.plans{grid-template-columns:minmax(0,1fr)}
.plans{gap:26px}
}
.scrib-life{position:absolute;left:100%;top:-34px;width:152px;margin-left:14px;pointer-events:none}
.scrib-life span{display:block;font-family:'Caveat','Caveat Fallback',cursive;font-weight:700;font-size:29px;line-height:1.05;text-align:center;transform:rotate(-3deg)}
.scrib-life svg{display:block;margin-top:2px}
@media (max-width:1240px){
.scrib-life{display:none}
}
/* --- Polka-Dots im Hero --- */
.hero{position:relative;overflow:hidden}
.hero>*{position:relative;z-index:1}
.hero::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background-image:radial-gradient(var(--dotc,#7FB539) var(--dotr,7%),transparent calc(var(--dotr,7%) + 1%));background-size:var(--dots,26px) var(--dots,26px);background-position:calc(var(--dots,26px) / 2) calc(var(--dots,26px) / 2);opacity:var(--doto,0)}
.duo{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-bottom:20px}
@media (max-width:720px){
.duo{grid-template-columns:1fr}
}
.sec--promise{background:var(--green-soft);border-bottom:none}
.reviews-head{text-align:center;margin-bottom:48px}
.reviews-head h2{font-size:42px;font-weight:800;letter-spacing:-1.2px;margin-bottom:16px}
@media (max-width:720px){
.reviews-head h2{font-size:30px}
}
@media (max-width:430px){
.reviews-head h2{font-size:27px;letter-spacing:-.8px}
}
.reviews-head p{font-size:17px;color:var(--muted);max-width:600px;margin:0 auto 24px;line-height:1.6}
@media (max-width:430px){
.reviews-head p{font-size:16px}
}
.reviews-head{position:relative}
.reviews-head{margin-bottom:26px}
@media (max-width:1000px){
.hero .pcard{max-width:358px;margin-top:0}
}
@media (max-width:430px){
.hero .pcard{padding:18px 18px 20px}
.hero .pcard{box-shadow:5px 5px 0 0 var(--black)}
.hero .pcard:hover{transform:none;box-shadow:5px 5px 0 0 var(--black)}
}
/* Extra space on the right makes room for the handwritten note - which only exists
   above 1000px. Below that deliberately NO value of its own, otherwise it would
   override the side margin of .wrap (20px from 720, 16px from 430) and the price
   card would sit off-centre when stacked. */
@media (min-width:1001px){
.hero .hero-grid{padding-right:56px}
}

/* repeats the exception from base.css, because index.css loads later */
@media (max-width:360px){
.trustline{flex-wrap:wrap}
}

:root{--dotc:#7FB539;--dots:26px;--dotr:7%;--doto:0}