@font-face{font-family:'Lilita One';src:url('fonts/lilita-latin.woff2') format('woff2');unicode-range:U+0000-00FF;font-display:swap}
@font-face{font-family:'Lilita One';src:url('fonts/lilita-latin-ext.woff2') format('woff2');unicode-range:U+0100-024F,U+1E00-1EFF;font-display:swap}
@font-face{font-family:'Nunito';src:url('fonts/nunito-var-latin.woff2') format('woff2');font-weight:200 1000;unicode-range:U+0000-00FF;font-display:swap}
@font-face{font-family:'Nunito';src:url('fonts/nunito-var-latin-ext.woff2') format('woff2');font-weight:200 1000;unicode-range:U+0100-024F,U+1E00-1EFF;font-display:swap}
:root{--green:#2e7d32;--green-dark:#1b5e20;--green-soft:#e6f2e7;--gold:#f5a623;
--bg:#f4f1e8;--card:#fff;--ink:#26302a;--muted:#6d7a70;--border:#e2e5dd;--radius:16px;
--display:'Lilita One',cursive;--body:'Nunito','Segoe UI',sans-serif}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:var(--body);background:var(--bg);color:var(--ink);line-height:1.65;font-weight:500}
/* feine Papierstruktur wie Albumseiten */
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.5;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0.2 0 0 0 0 0.2 0 0 0 0 0.15 0 0 0 .035 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")}
body>*{position:relative;z-index:1}
h1,h2,h3,.nav .brand,.btn{font-family:var(--display);font-weight:400;letter-spacing:.015em}
a{color:var(--green)}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
/* Header */
header.site{background:#fff;border-bottom:1px solid var(--border);position:sticky;top:0;z-index:50}
.nav{display:flex;align-items:center;gap:18px;padding:12px 0;flex-wrap:wrap}
.nav .brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--green-dark);font-weight:800;font-size:1.15rem;letter-spacing:.01em}
.nav .brand img{height:44px;width:auto}
.nav .links{display:flex;gap:4px;flex-wrap:wrap;margin-left:auto}
.nav .links a{text-decoration:none;color:var(--ink);padding:8px 13px;border-radius:999px;font-size:.95rem;font-weight:600}
.nav .links a:hover,.nav .links a.active{background:var(--green-soft);color:var(--green-dark)}
/* Hero — Rasen mit Kreide-Anstoßkreis wie ein Taktikboard */
.hero{background:linear-gradient(160deg,var(--green-dark) 0%,var(--green) 70%);color:#fff;padding:64px 0 72px;position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;inset:0;opacity:.6;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 460'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.09' stroke-width='3' stroke-dasharray='14 10' stroke-linecap='round'%3E%3Ccircle cx='1050' cy='230' r='150'/%3E%3Cline x1='1050' y1='40' x2='1050' y2='420'/%3E%3Cpath d='M40 420 Q 300 380 560 420'/%3E%3C/g%3E%3C/svg%3E");background-size:cover;background-position:right center}
.hero .wrap{position:relative;z-index:1}
.hero h1{font-size:clamp(2.1rem,5vw,3.4rem);max-width:640px;text-shadow:0 3px 0 rgba(0,0,0,.18);line-height:1.15}
.hero p.sub{font-size:1.15rem;margin-top:14px;max-width:560px;opacity:.94}
.hero .cta{margin-top:28px;display:flex;gap:12px;flex-wrap:wrap}
/* Buttons: satt, gestanzt, drückbar */
.btn{display:inline-block;padding:12px 26px 11px;border-radius:14px;text-decoration:none;font-size:1.05rem;border:none;cursor:pointer}
.btn.gold{background:var(--gold);color:#3d2b00;box-shadow:0 4px 0 #c97f0a}
.btn.gold:hover{filter:brightness(1.05)}
.btn.gold:active{transform:translateY(3px);box-shadow:0 1px 0 #c97f0a}
.btn.ghost{background:rgba(255,255,255,.12);color:#fff;border:2px dashed rgba(255,255,255,.55)}
.btn.green{background:var(--green);color:#fff;box-shadow:0 4px 0 var(--green-dark)}
.btn.green:hover{filter:brightness(1.07)}
.btn.green:active{transform:translateY(3px);box-shadow:0 1px 0 var(--green-dark)}
.btn.outline{background:#fff;color:var(--green-dark);border:2px solid var(--green);box-shadow:0 4px 0 var(--green-soft)}
/* Sections */
section.block{padding:52px 0}
section.block.alt{background:#fbfaf5;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
h2.sect{font-size:1.75rem;margin-bottom:6px;display:inline-block;position:relative;padding-bottom:8px}
h2.sect::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:8px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 10' preserveAspectRatio='none'%3E%3Cpath d='M3 7 Q 50 2 100 6 T 197 4' fill='none' stroke='%23f5a623' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E");background-size:100% 100%}
p.sect-sub{color:var(--muted);margin-bottom:26px}
/* Produktkarten = eingeklebte Sammelsticker */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:26px}
.card{background:#fff;border-radius:7px;padding:9px 9px 0;display:flex;flex-direction:column;transition:box-shadow .2s,transform .2s;
box-shadow:0 1px 2px rgba(38,48,42,.14),0 6px 16px rgba(38,48,42,.11);position:relative}
.grid .card:nth-child(4n+1){rotate:-1.1deg}.grid .card:nth-child(4n+2){rotate:.7deg}.grid .card:nth-child(4n+3){rotate:-.5deg}.grid .card:nth-child(4n+4){rotate:1deg}
.card:hover{rotate:0deg}
.card::before{content:"";position:absolute;top:-9px;left:50%;translate:-50% 0;width:74px;height:22px;background:rgba(245,235,200,.55);border:1px solid rgba(0,0,0,.05);rotate:-2deg;border-radius:2px;box-shadow:0 1px 2px rgba(0,0,0,.06)}
.card.gold{background:linear-gradient(135deg,#fff8e0,#ffe9a8 45%,#fff3c4)}
.card.gold::after{content:"★ Bestseller";position:absolute;top:10px;right:-8px;background:var(--gold);color:#3d2b00;font-family:var(--display);font-size:.75rem;padding:3px 10px;border-radius:4px 4px 4px 0;box-shadow:0 2px 4px rgba(0,0,0,.18);rotate:3deg}
.card img{width:100%;aspect-ratio:1;object-fit:cover;background:var(--green-soft);border-radius:4px}
.card .body{padding:14px 8px 16px;display:flex;flex-direction:column;gap:8px;flex:1}
.card h3{font-size:1.05rem;line-height:1.3;font-family:var(--display);font-weight:400}
.card h3 a{color:var(--ink);text-decoration:none}
.card h3 a:hover{color:var(--green-dark)}
.card .age{font-size:.78rem;color:var(--muted)}
.card .teaser{font-size:.88rem;color:var(--muted);flex:1}
.card .row{display:flex;align-items:center;justify-content:space-between;margin-top:6px}
.card .price{font-weight:800;font-size:1.15rem;color:var(--green-dark)}
.card button.add{background:var(--green);color:#fff;border:none;border-radius:999px;padding:9px 16px;font-weight:700;cursor:pointer;font-size:.88rem}
.card button.add:hover{background:var(--green-dark)}
.card button.add.added{background:var(--gold);color:#3d2b00}
/* Produktseite */
.pd{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:start}
.pd img.main{width:100%;border-radius:var(--radius);border:1px solid var(--border)}
.pd h1{font-size:1.7rem;font-weight:800;letter-spacing:-.01em}
.pd .age{color:var(--muted);margin-top:4px}
.pd .price{font-size:1.9rem;font-weight:900;color:var(--green-dark);margin:14px 0 4px}
.pd .vat{font-size:.8rem;color:var(--muted)}
.pd ul.inhalt{margin:18px 0 6px 0;list-style:none}
.pd ul.inhalt li{padding:7px 0 7px 30px;position:relative;border-bottom:1px dashed var(--border)}
.pd ul.inhalt li::before{content:"⚽";position:absolute;left:2px;font-size:.85rem}
.pd .buy{margin-top:20px;display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.badge-digital{display:inline-block;background:var(--green-soft);color:var(--green-dark);border-radius:8px;padding:4px 10px;font-size:.78rem;font-weight:700;margin-top:10px}
/* Blog */
.blog-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px}
.bcard{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:22px;display:flex;flex-direction:column;gap:10px}
.bcard h3 a{color:var(--ink);text-decoration:none;font-size:1.05rem;line-height:1.4}
.bcard h3 a:hover{color:var(--green-dark)}
.bcard .date{font-size:.78rem;color:var(--muted)}
.bcard .more{font-weight:700;font-size:.9rem;text-decoration:none;margin-top:auto}
article.post{max-width:760px;margin:0 auto;background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:clamp(22px,5vw,48px)}
article.post h1{font-size:1.75rem;line-height:1.3;letter-spacing:-.01em;margin-bottom:8px}
article.post .date{color:var(--muted);font-size:.85rem;margin-bottom:22px}
article.post h2{font-size:1.3rem;margin:30px 0 10px}
article.post h3{font-size:1.08rem;margin:22px 0 8px}
article.post p{margin:12px 0}
article.post ul,article.post ol{margin:12px 0 12px 24px}
article.post li{margin:5px 0}
article.post table{border-collapse:collapse;width:100%;margin:16px 0;font-size:.9rem;display:block;overflow-x:auto}
article.post th,article.post td{border:1px solid var(--border);padding:8px 10px;text-align:left}
article.post th{background:var(--green-soft)}
article.post blockquote{border-left:4px solid var(--green);padding:8px 16px;background:var(--green-soft);border-radius:0 10px 10px 0;margin:14px 0}
article.post hr{border:none;border-top:1px solid var(--border);margin:26px 0}
.disclaimer{font-size:.82rem;color:var(--muted);font-style:italic;border-top:1px solid var(--border);margin-top:28px;padding-top:14px}
/* Panini banner */
.panini{background:linear-gradient(135deg,#12467f,#2f5f8f);border-radius:var(--radius);color:#fff;padding:34px;display:flex;gap:22px;align-items:center;flex-wrap:wrap}
.panini .em{font-size:2.6rem}
.panini h3{font-size:1.3rem;margin-bottom:6px}
.panini p{opacity:.92;max-width:520px}
.panini a.btn{margin-left:auto}
/* FAQ */
details.faq{background:#fff;border:1px solid var(--border);border-radius:12px;margin-bottom:10px;padding:0 18px}
details.faq summary{cursor:pointer;font-weight:700;padding:15px 0;list-style:none}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::before{content:"⚽ ";font-size:.85rem}
details.faq p{padding:0 0 16px;color:#3d463f}
/* Prose (Über, Kontakt, Recht) */
.prose{max-width:720px;background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:clamp(22px,5vw,44px)}
.prose h1{font-size:1.6rem;margin-bottom:16px}
.prose h2{font-size:1.15rem;margin:22px 0 8px}
.prose p{margin:10px 0;white-space:pre-line}
/* Cart bar & modal */
#cartbar{position:fixed;bottom:0;left:0;right:0;background:var(--green-dark);color:#fff;padding:12px 20px;display:none;z-index:90;box-shadow:0 -6px 22px rgba(0,0,0,.18)}
#cartbar .inner{max-width:1080px;margin:0 auto;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
#cartbar .sum{font-weight:800;font-size:1.1rem}
#cartbar button{margin-left:auto}
#overlay{position:fixed;inset:0;background:rgba(15,25,18,.55);display:none;z-index:100;align-items:flex-end;justify-content:center;padding:16px}
#overlay.open{display:flex}
@media(min-width:640px){#overlay{align-items:center}}
#modal{background:#fff;border-radius:var(--radius);max-width:520px;width:100%;max-height:90vh;overflow-y:auto;padding:26px}
#modal h3{font-size:1.2rem;margin-bottom:14px}
#modal .item{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px dashed var(--border);font-size:.92rem}
#modal .item button{background:none;border:none;color:#b3423a;cursor:pointer;font-size:1rem}
#modal .total{display:flex;justify-content:space-between;font-weight:800;font-size:1.08rem;padding:12px 0}
#modal label.wgate{display:flex;gap:10px;align-items:flex-start;font-size:.83rem;color:#444;background:var(--green-soft);border-radius:10px;padding:12px;margin:12px 0}
#modal label.wgate input{margin-top:3px;transform:scale(1.2)}
#paypalContainer{display:none;margin-top:14px}
#paySuccess{display:none;text-align:center;padding:24px 6px}
#paySuccess .big{font-size:2.6rem}
#paySuccess h4{font-size:1.2rem;margin:10px 0}
#paySuccess p{font-size:.92rem;color:#444}
#paySuccess .tx{font-size:.78rem;color:var(--muted);margin-top:10px;word-break:break-all}
/* Footer */
footer.site{background:var(--green-dark);color:#dfe9df;margin-top:60px;padding:40px 0 90px}
footer.site .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:26px}
footer.site h4{color:#fff;font-size:.95rem;margin-bottom:10px}
footer.site a{color:#cfe0cf;text-decoration:none;display:block;padding:3px 0;font-size:.9rem}
footer.site a:hover{color:#fff}
footer.site .fine{margin-top:28px;font-size:.78rem;opacity:.75}
@media(max-width:760px){.pd{grid-template-columns:1fr}.panini a.btn{margin-left:0}}

/* ── Leben: Hero-Einlauf ── */
.hero .wrap{display:grid;grid-template-columns:1fr auto;align-items:center;gap:20px}
.hero-ball{width:110px;height:110px;flex-shrink:0;animation:ballRollIn 1.5s cubic-bezier(.22,.9,.3,1) both;filter:drop-shadow(0 10px 14px rgba(0,0,0,.28))}
.hero-ball svg{width:100%;height:100%;animation:ballSpinIn 1.5s cubic-bezier(.22,.9,.3,1) both}
@keyframes ballRollIn{0%{transform:translateX(-70vw)}55%{transform:translateX(4vw)}70%{transform:translateX(0) translateY(-26px)}85%{transform:translateY(0)}92%{transform:translateY(-8px)}100%{transform:translateY(0)}}
@keyframes ballSpinIn{from{rotate:-720deg}to{rotate:0deg}}
.hero h1,.hero p.sub,.hero .cta{opacity:0;animation:riseIn .7s ease-out forwards}
.hero p.sub{animation-delay:.25s}.hero .cta{animation-delay:.45s}
@keyframes riseIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
/* Scroll-Einlauf (Aufstellung) */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .55s ease-out,transform .55s ease-out}
.reveal.in{opacity:1;transform:none}
/* Hover-Kicks */
.card{will-change:transform}
.card:hover{box-shadow:0 14px 32px rgba(27,94,32,.16);transform:translateY(-5px) rotate(-.6deg)}
.card a img{transition:transform .35s ease}
.card:hover a img{transform:scale(1.045) rotate(.6deg)}
.btn,.card button.add{transition:transform .15s ease,filter .15s ease,background .15s ease}
.btn:hover{transform:translateY(-2px)}
.btn:active,.card button.add:active{transform:scale(.94)}
.nav .links a{transition:background .2s,color .2s,transform .15s}
.nav .links a:hover{transform:translateY(-1px)}
/* Fliegender Ball zum Warenkorb */
.fly-ball{position:fixed;z-index:200;font-size:22px;pointer-events:none;transition:transform .7s cubic-bezier(.3,-.2,.6,1),opacity .7s}
#cartbar{transform:translateY(110%);transition:transform .35s cubic-bezier(.2,.9,.3,1.15)}
#cartbar.show{transform:translateY(0)}
/* Panini-Banner: treibende Sticker */
.panini{position:relative;overflow:hidden}
.panini .stk{position:absolute;width:34px;height:44px;border-radius:3px;background:linear-gradient(160deg,#fff 30%,#dbe7f5);opacity:.16;animation:drift 9s ease-in-out infinite}
.panini .stk:nth-child(2){left:12%;top:60%;animation-delay:-3s;rotate:-12deg}
.panini .stk:nth-child(3){left:78%;top:12%;animation-delay:-6s;rotate:9deg;width:28px;height:36px}
.panini .stk:nth-child(4){left:60%;top:70%;animation-delay:-1.5s;rotate:-6deg;width:24px;height:32px}
@keyframes drift{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-14px) rotate(6deg)}}
/* Fußzeilen-Ball */
.foot-ball{display:inline-block;transition:transform .3s}
footer.site:hover .foot-ball{animation:footBounce .8s ease infinite}
@keyframes footBounce{0%,100%{transform:translateY(0)}40%{transform:translateY(-7px) rotate(20deg)}}
@media(max-width:640px){.hero .wrap{grid-template-columns:1fr}.hero-ball{width:74px;height:74px;justify-self:end;margin-top:-10px}}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  .hero h1,.hero p.sub,.hero .cta,.reveal{opacity:1;transform:none}
  #cartbar{transform:none}
}