:root{--gelb:#FFD400;--schwarz:#111;--rot:#E63B2E;--rot-text:#C62A1F;--papier:#F4F1EA;--grau:#5b5850;--tape:#CFC9BC;--f-display:"Rubik","Arial Black",Impact,sans-serif}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-padding-top:100px}
body{font-family:"Rubik",Arial,Helvetica,sans-serif;color:var(--schwarz);background:var(--papier);line-height:1.6}
.wrap{max-width:1180px;margin:0 auto;padding:0 20px}
.heavy{font-family:var(--f-display);font-weight:900;text-transform:uppercase;letter-spacing:.5px}
a{color:inherit;text-decoration:none}
svg.i{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;flex:none}
.skip{position:absolute;left:-9999px}
.skip:focus{left:10px;top:10px;z-index:100;background:#fff;padding:8px 12px;border:3px solid var(--schwarz)}
a:focus-visible,.btn:focus-visible{outline:3px solid var(--schwarz);outline-offset:3px;box-shadow:0 0 0 6px #fff}
.t-schwarz a:focus-visible,footer a:focus-visible,.usp a:focus-visible{outline-color:var(--gelb)}

.btn{display:inline-block;padding:14px 26px;border:3px solid var(--schwarz);font-family:var(--f-display);font-weight:900;text-transform:uppercase;font-size:15px;box-shadow:5px 5px 0 var(--schwarz);transition:transform .12s,box-shadow .12s}
.btn:hover{transform:translate(2px,2px);box-shadow:3px 3px 0 var(--schwarz)}
.btn-gelb{background:var(--gelb);color:var(--schwarz)!important}.btn-weiss{background:#fff}.btn-schwarz{background:var(--schwarz);color:var(--gelb)}

.topbar{background:var(--schwarz);color:var(--gelb);font-size:14px;text-align:center;padding:7px 10px;letter-spacing:1px;text-transform:uppercase}
header{background:#fff;border-bottom:4px solid var(--schwarz);position:sticky;top:0;z-index:10}
header .wrap{display:flex;align-items:center;gap:28px;height:100px}
header .logo svg{height:90px;width:auto;display:block}
nav{display:flex;gap:22px;flex:1}
nav a{font-weight:700;font-size:15px;padding:4px 0;border-bottom:3px solid transparent;white-space:nowrap}
nav a:hover,nav a:focus-visible{border-color:var(--rot)}
.head-icons{display:flex;gap:10px;order:3}
.head-icons a{width:42px;height:42px;border:2px solid var(--schwarz);display:grid;place-items:center;background:var(--gelb)}

.hero{background:var(--gelb);border-bottom:4px solid var(--schwarz);overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:30px;align-items:center;padding-top:64px;padding-bottom:76px}
.hero h1{font-size:clamp(40px,6vw,76px);line-height:.95}
.hero h1 .kicker{display:block;font-family:"Rubik",Arial,Helvetica,sans-serif;font-size:clamp(15px,1.6vw,19px);font-weight:700;letter-spacing:2px;margin-bottom:14px}
.hero h1 span{display:inline-block;background:var(--schwarz);color:var(--gelb);padding:4px 14px;transform:rotate(-2deg);margin-top:10px}
.hero p{font-size:19px;max-width:540px;margin:24px 0 30px}
.ctas{display:flex;gap:16px;flex-wrap:wrap}
.jump{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
.jump a{font-size:14px;font-weight:700;border:2px solid var(--schwarz);background:#fff;padding:6px 12px}
.jump a:hover{background:var(--schwarz);color:var(--gelb)}
.buehne{position:relative;touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none}
.buehne.zieht{cursor:grabbing}
.szene{position:relative;perspective:1500px;perspective-origin:50% 78%;animation:auftritt 1.2s cubic-bezier(.2,.8,.2,1) both}
@keyframes auftritt{from{transform:translateY(40px) scale(.94)}to{transform:none}}
.saeule{position:absolute;left:50%;transform-style:preserve-3d;will-change:transform}
.saeule > div{position:absolute;left:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.flaeche{overflow:hidden;background:#ddd6c6}
.ring{background:linear-gradient(180deg,#2b2a27,#0d0d0c)}
.ring.kante{background:var(--rot-text)}
.scheibe{border-radius:50%;background:#151413;backface-visibility:visible!important;-webkit-backface-visibility:visible!important}
.schatten{position:absolute;pointer-events:none;background:linear-gradient(90deg,rgba(0,0,0,.45) 0%,rgba(0,0,0,.1) 22%,rgba(255,255,255,.18) 42%,rgba(0,0,0,0) 55%,rgba(0,0,0,.15) 78%,rgba(0,0,0,.5) 100%)}
.boden{position:absolute;pointer-events:none;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.35),transparent)}
.pm-hero{position:absolute;width:clamp(70px,16%,120px);pointer-events:none}
.pm-hero .pinsel,.cta-band .pinsel{transform-origin:60px 150px;animation:kleistern 1.6s ease-in-out infinite}
@keyframes kleistern{0%,100%{transform:rotate(0)}50%{transform:rotate(14deg)}}
.steuer{display:flex;align-items:center;justify-content:center;gap:.6rem;flex-wrap:wrap;margin-top:.8rem}
.steuer button{font:inherit;font-weight:800;background:#fff;color:var(--schwarz);border:3px solid var(--schwarz);min-width:44px;min-height:44px;padding:.2rem .7rem;cursor:pointer;box-shadow:3px 3px 0 var(--schwarz)}
.steuer button:hover{background:var(--schwarz);color:var(--gelb)}
.vorne{width:100%;text-align:center;font-size:15px;margin:.2rem 0 0}
.vorne a{font-weight:800;text-decoration:underline}
.plakat{position:absolute;top:0;height:100%;width:calc(var(--pw) * 1px);font-size:calc(var(--pw) * .062px);padding:1.1em 1em;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;line-height:1.1}
.plakat::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,.025) 0 1px,transparent 1px 4px),linear-gradient(90deg,transparent 48%,rgba(255,255,255,.12) 50%,transparent 52%)}
.plakat b{font-family:var(--f-display);font-weight:900;display:block}
.p-gelb{background:var(--gelb);color:var(--schwarz)}
.p-rot{background:var(--rot-text);color:#fff}
.p-papier{background:var(--papier);color:var(--schwarz)}
.p-streifen{background:repeating-linear-gradient(-45deg,var(--gelb) 0 1.4em,var(--schwarz) 1.4em 2.8em);color:var(--schwarz)}
.p-regen{background:repeating-linear-gradient(105deg,transparent 0 .9em,rgba(255,212,0,.25) .9em 1em),var(--schwarz)}
.riesig{font-size:3.4em;letter-spacing:-.04em}
.gross{font-size:2.1em}
.klein{font-size:.85em;font-weight:700}
.kasten{background:var(--schwarz);color:var(--gelb);padding:.35em .5em;display:inline-block;transform:rotate(-3deg)}
.p-streifen .kasten{background:var(--papier);color:var(--schwarz);font-size:1.6em;text-align:center;transform:rotate(-4deg)}
.umriss{border:.35em solid var(--schwarz);aspect-ratio:841/1189;width:70%;display:flex;align-items:flex-end;padding:.3em;font-family:var(--f-display);font-weight:900;font-size:1.9em}

.usp{background:var(--schwarz);color:#fff}
.usp .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding-top:18px;padding-bottom:18px}
.usp div{display:flex;align-items:center;justify-content:center;text-align:center;gap:10px;font-weight:700;font-size:15px}
.usp svg.i{color:var(--gelb)}

section{padding:80px 0}
.sec-head{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:36px;flex-wrap:wrap}
.sec-head h2{font-size:clamp(30px,4vw,46px);line-height:1}
.sec-head h2 em{font-style:normal;color:var(--rot-text)}
.sec-head p{max-width:440px;color:var(--grau)}

.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.card{background:#fff;border:3px solid var(--schwarz);box-shadow:6px 6px 0 var(--schwarz);display:flex;flex-direction:column;transition:transform .15s,box-shadow .15s}
.card:hover,.card:focus-visible{transform:translateY(-4px);box-shadow:8px 10px 0 var(--schwarz)}
.card .img{height:170px;border-bottom:3px solid var(--schwarz);display:grid;place-items:center;font-family:var(--f-display);font-weight:900;font-size:40px}
.card:nth-child(1) .img{background:var(--gelb)}
.card:nth-child(2) .img{background:var(--rot-text);color:#fff}
.card:nth-child(3) .img{background-color:var(--papier);background-image:radial-gradient(var(--schwarz) 1.2px,transparent 1.3px);background-size:9px 9px}
.card:nth-child(3) .img span{background:var(--papier);padding:0 10px;font-size:clamp(22px,2.5vw,32px);letter-spacing:.02em}
.card:nth-child(4) .img{background:var(--schwarz);color:var(--gelb)}
.card .body{padding:18px;flex:1;display:flex;flex-direction:column;gap:6px}
.card h3{font-size:19px}
.card p{font-size:14px;color:var(--grau);flex:1}
.card .price{font-weight:700;font-size:15px}
.card .price small{display:block;font-weight:400;font-size:12px;color:#3a3936;margin-top:2px}

.formats{width:100%;border-collapse:collapse;background:#fff;border:3px solid var(--schwarz);font-size:15px}
.formats th,.formats td{padding:12px 16px;border-bottom:2px solid var(--schwarz);text-align:left}
.formats th{background:var(--schwarz);color:var(--gelb);font-family:var(--f-display);font-weight:900;text-transform:uppercase;font-size:14px;font-weight:900}
.formats tr:last-child td{border-bottom:none}
.formats td:first-child{font-family:var(--f-display);font-weight:900}

.steps{background:#fff;border-top:4px solid var(--schwarz);border-bottom:4px solid var(--schwarz)}
.step-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;counter-reset:s}
.step{position:relative;padding:26px 20px 22px;border:3px dashed var(--schwarz)}
.step::before{counter-increment:s;content:counter(s);position:absolute;top:-22px;left:16px;width:44px;height:44px;background:var(--gelb);border:3px solid var(--schwarz);display:grid;place-items:center;font-family:var(--f-display);font-weight:900;font-size:20px}
.step h3{margin:8px 0 6px;font-size:18px}
.step p{font-size:14px;color:var(--grau)}

.split{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.torn{padding:44px 38px 60px;clip-path:polygon(0 0,100% 0,100% 92%,95% 97%,90% 92%,84% 98%,78% 93%,71% 99%,64% 93%,57% 98%,50% 92%,43% 99%,36% 93%,29% 98%,22% 92%,15% 98%,8% 93%,0 98%)}
.torn h3{font-family:var(--f-display);font-weight:900;text-transform:uppercase;font-size:30px;line-height:1.05;margin-bottom:12px}
.torn p{margin-bottom:22px}
.t-gelb{background:var(--gelb)}.t-schwarz{background:var(--schwarz);color:#fff}
.t-schwarz h3{color:var(--gelb)}

.seo-text{columns:2;column-gap:40px;color:var(--grau)}
.seo-text p{margin-bottom:14px;break-inside:avoid}

.cta-band{background:var(--rot-text);color:#fff;border-top:4px solid var(--schwarz);border-bottom:4px solid var(--schwarz);text-align:center}
.cta-band .wrap{display:flex;flex-direction:column;align-items:center}
.cta-band .claim{font-size:clamp(32px,5vw,58px);line-height:1;margin-bottom:16px}
.cta-band p{font-size:19px;font-weight:700;margin-bottom:28px}
.cta-band .mini{width:110px;margin-bottom:10px}

footer{background:var(--schwarz);color:#ddd;padding:60px 0 26px;font-size:14px}
.f-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:30px;margin-bottom:40px}
footer h2{color:var(--gelb);font-family:var(--f-display);font-weight:900;text-transform:uppercase;font-size:14px;margin-bottom:12px}
footer li{list-style:none;margin-bottom:6px}
footer a:hover{color:var(--gelb)}
.f-bottom{border-top:1px solid #333;padding-top:20px;text-align:center;color:#aaa;font-size:14px}
.f-kontakt{margin-top:14px}.f-kontakt a{color:#FFD400}.f-zahlung{font-size:13px;color:#bbb}

.sortiment{background:var(--papier);border-top:4px solid var(--schwarz);border-bottom:4px solid var(--schwarz)}
.picto-grid{list-style:none;display:grid;grid-template-columns:repeat(5,1fr);gap:18px}
.picto-grid a{display:flex;flex-direction:column;gap:6px;height:100%;background:#fff;border:3px solid var(--schwarz);box-shadow:5px 5px 0 var(--schwarz);padding:18px 16px;transition:transform .15s,box-shadow .15s}
.picto-grid a:hover,.picto-grid a:focus-visible{transform:translate(-2px,-3px);box-shadow:8px 8px 0 var(--schwarz)}
.picto-grid svg{width:84px;height:84px;fill:none;stroke:var(--schwarz);stroke-width:3;stroke-linejoin:round;stroke-linecap:round;margin-bottom:6px;transition:transform .2s}
.picto-grid a:hover svg{transform:rotate(-6deg) scale(1.08)}
.picto-grid b{font-family:var(--f-display);font-weight:900;text-transform:uppercase;font-size:15px;line-height:1.15}
.picto-grid span{font-size:14px;color:var(--grau)}
.formats-scroll{overflow-x:auto;position:relative}   /* hält die versteckten .sr-Texte im Scrollbereich – sonst wird die Seite mobil 913 px breit */
.formats td:nth-child(n+3),.formats th:nth-child(n+3){text-align:center}
/* Hauptmenü: ein Aufklappmenü „Plakate drucken“ mit allen Materialien nach Kategorie */
header{position:sticky}
.menue-knopf{font:inherit;font-weight:700;font-size:15px;background:none;border:0;border-bottom:3px solid transparent;padding:4px 0;cursor:pointer;color:inherit;white-space:nowrap}
.menue-knopf span{display:inline-block;transition:transform .2s}
.menue-knopf[aria-expanded="true"] span{transform:rotate(180deg)}
.menue-knopf:hover,.menue-knopf:focus-visible,.menue-knopf[aria-expanded="true"]{border-color:var(--rot)}
.menue-panel{display:grid;visibility:hidden;opacity:0;transform:translateY(-6px);transition:opacity .15s .35s,transform .15s .35s,visibility 0s .5s;position:absolute;left:0;right:0;top:100%;z-index:20;background:#fff;border-top:4px solid var(--schwarz);border-bottom:4px solid var(--schwarz);box-shadow:0 10px 0 var(--gelb);padding:22px max(20px,calc((100% - 1140px)/2)) 18px;grid-template-columns:repeat(4,1fr);gap:18px 28px}
.menue.offen .menue-panel{visibility:visible;opacity:1;transform:none;transition:opacity .15s,transform .15s,visibility 0s}
@media (hover:hover) and (min-width:901px){.menue:hover .menue-panel{visibility:visible;opacity:1;transform:none;transition:opacity .15s .15s,transform .15s .15s,visibility 0s .15s}}
.menue-kat{display:inline-block;font-family:var(--f-display);font-weight:900;text-transform:uppercase;font-size:15px;background:var(--gelb);border:3px solid var(--schwarz);padding:3px 9px;margin-bottom:8px;box-shadow:3px 3px 0 var(--schwarz)}
.menue-spalte ul{list-style:none;margin:0;padding:0}
.menue-spalte li a{display:block;padding:5px 0;font-weight:600;font-size:15px;border-bottom:2px solid transparent}
.menue-spalte li a:hover,.menue-spalte li a:focus-visible{border-color:var(--rot)}
.menue-alle{grid-column:1/-1;justify-self:end;font-weight:800}
@media (max-width:900px){.menue-panel{grid-template-columns:1fr 1fr;padding:16px 20px}}
@media (max-width:560px){.menue-panel{grid-template-columns:1fr}}
.bma-mp { margin: 40px 0; padding: 32px 30px 30px; border-radius: 18px; background: linear-gradient(180deg, #fbfaf7 0%, var(--bma-paper) 100%); border: 1px solid var(--bma-line); }
.bma-mp__maschinen { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.bma-mp__maschine { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--bma-line); border-radius: 16px; overflow: hidden; box-shadow: 0 18px 34px -26px rgba(0,0,0,.35); transition: transform .2s, border-color .2s; }
.bma-mp__foto { position: relative; margin: 10px 10px 0; height: 270px; display: grid; place-items: center; padding: 18px 14px 12px; border-radius: 12px; overflow: hidden; background: radial-gradient(70% 80% at 50% 55%, #fff 0%, #f6f5f1 65%, #ece9e3 100%); }
.bma-mp__rahmen { position: relative; display: inline-block; height: 234px; }
.bma-mp__rahmen img { display: block; height: 234px !important; width: auto !important; max-width: none; }
.bma-mp__foto figcaption {left:50%;right:auto;transform:translateX(-50%); position: absolute; right: 12px; bottom: 6px; font-size: 10px; color: #9b978f; }
.bma-mp__papier { position: absolute; left: 15.2%; top: 27.6%; width: 63.6%; height: 59.2%; overflow: hidden; background: #f3f2ee; }
.bma-mp__bahn { position: absolute; left: 0; top: 0; width: 100%; height: 200%; animation: bma-mp-bahn 16s steps(80, end) infinite; }
.bma-mp__druck { display: block; height: 50%; box-sizing: border-box; border-bottom: 5px solid #f3f2ee; background-repeat: no-repeat; background-size: 157.2% 168.4%; background-position: 41.8% 67.9%; background-origin: border-box; }
@keyframes bma-mp-bahn { from { transform: translateY(-50%); } to { transform: translateY(0); } }
.bma-mp__rolle { position: absolute; left: 14.2%; width: 65.6%; top: 83.6%; height: 6.4%; border-radius: 999px; background: linear-gradient(180deg, #6b5200 0%, #c99a00 22%, #ffcc00 40%, #fff1b8 50%, #e0b000 62%, #7a5d00 85%, #3d2e00 100%); box-shadow: inset 0 0 0 1px rgba(0,0,0,.15), 0 3px 6px -2px rgba(0,0,0,.45); }
.bma-mp__rolle::before, .bma-mp__rolle::after { content: ""; position: absolute; top: -12%; width: 3.5%; height: 124%; border-radius: 3px; background: linear-gradient(90deg, #2b2a29, #55534f, #2b2a29); }
.bma-mp__rolle::before { left: -2%; }
.bma-mp__rolle::after { right: -2%; }
.bma-mp__schlitten { position: absolute; top: 26.4%; left: 16%; width: 7%; height: 2.4%; border-radius: 3px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.95), transparent); box-shadow: 0 0 8px 2px rgba(255,255,255,.6); animation: bma-mp-schlitten .8s ease-in-out infinite alternate; }
@keyframes bma-mp-schlitten { to { left: 71%; } }
.bma-mp__foto--swissqprint .bma-mp__rahmen { mix-blend-mode: multiply; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 6%, #000 74%, transparent 97%), linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%); -webkit-mask-composite: source-in; mask-image: linear-gradient(to bottom, transparent 0, #000 6%, #000 74%, transparent 97%), linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%); mask-composite: intersect; }
.bma-mp__portal { position: absolute; left: 17.429%; top: 8.791%; width: 82.026%; transform-origin: 11.95% 47.3%; animation: bma-mp-portal 16s linear infinite; }
.bma-mp__portal > img, .bma-mp__kopf img { display: block; width: 100% !important; height: auto !important; }
@keyframes bma-mp-portal { 0%, 3% { left: .544%; top: 17.11%; transform: rotate(5.2deg) scale(1.03); } 78%, 88% { left: 17.429%; top: 8.791%; transform: rotate(0) scale(1); } 100% { left: .544%; top: 17.11%; transform: rotate(5.2deg) scale(1.03); } }
.bma-mp__kopf { position: absolute; left: 47.41%; top: 29.56%; width: 23.77%; transform-origin: 0 100%; animation: bma-mp-kopf 2.6s ease-in-out infinite; }
@keyframes bma-mp-kopf { 0%, 4% { left: 47.41%; top: 29.56%; transform: scale(1); } 46%, 54% { left: 14.21%; top: 13.79%; transform: scale(.86); } 96%, 100% { left: 47.41%; top: 29.56%; transform: scale(1); } }
.bma-mp__uv { position: absolute; left: 6%; top: 84%; width: 88%; height: 14%; border-radius: 50%; transform: rotate(6.5deg); filter: blur(1.5px); background: radial-gradient(ellipse at center, rgba(70,95,255,.95), rgba(70,95,255,.45) 50%, transparent 72%); box-shadow: 0 0 14px 4px rgba(80,100,255,.35); animation: bma-mp-uv 1.6s ease-in-out infinite; }
@keyframes bma-mp-uv { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
.bma-mp__leer { position: absolute; inset: 0; background: #f3f4f6; pointer-events: none; animation: bma-mp-druck 16s linear infinite; }
@keyframes bma-mp-druck {
  0%, 3% { clip-path: polygon(10.3% 32.2%, 60.6% 47.1%, 76.6% 31.9%, 27.2% 23.9%); opacity: 1; }
  78%, 88% { clip-path: polygon(27.2% 23.9%, 76.6% 31.9%, 76.6% 31.9%, 27.2% 23.9%); opacity: 1; }
  88.1% { clip-path: polygon(10.3% 32.2%, 60.6% 47.1%, 76.6% 31.9%, 27.2% 23.9%); opacity: 0; }
  100% { clip-path: polygon(10.3% 32.2%, 60.6% 47.1%, 76.6% 31.9%, 27.2% 23.9%); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .bma-mp__bahn, .bma-mp__schlitten, .bma-mp__portal, .bma-mp__kopf, .bma-mp__leer, .bma-mp__uv { animation: none; } .bma-mp__leer { display: none; } }
@media (max-width: 760px) { .bma-mp { padding: 22px 16px; } .bma-mp__maschinen { grid-template-columns: 1fr; } .bma-mp__foto { height: 220px; } }
@media (max-width: 520px) { .bma-mp__foto { height: 196px; } .bma-mp__rahmen, .bma-mp__rahmen img { height: 164px !important; } }
/* Maschinenpark (Fotos + Animation von bm-artprint.de übernommen, Optik Plakatbande, Bande jubelt mit) */
.mp .sec-head{margin-bottom:26px}
.bma-mp__maschinen{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.bma-mp__maschine{display:flex;flex-direction:column;border-radius:0;background:#fff;border:3px solid var(--schwarz);box-shadow:7px 7px 0 var(--schwarz)}
.bma-mp__foto{border-radius:0!important;overflow:visible!important;height:300px!important}
.bma-mp__text{padding:18px 22px 22px}
.bma-mp__marke{display:inline-block;font-family:var(--f-display);font-weight:900;font-size:13px;letter-spacing:.08em;text-transform:uppercase;background:var(--gelb);border:2px solid var(--schwarz);padding:2px 10px;margin-bottom:8px}
.bma-mp__text strong{display:block;font-size:1.2rem;margin:0 0 8px}
.bma-mp__text ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.bma-mp__text li{position:relative;padding-left:22px}
.bma-mp__text li::before{content:"\2713";position:absolute;left:0;font-weight:900}
.bma-mp__druck{background-size:100% 100%!important;background-position:center!important}
.mp-bande{position:absolute;bottom:8px;width:62px;z-index:3}
.mp-bande svg{display:block;width:100%;height:auto;overflow:visible}
.mp-bande.l{left:10px}.mp-bande.r{right:14px}.mp-bande.m{left:auto;right:16px}
.mp-bande{animation:mp-jubel 2.4s cubic-bezier(.3,1.6,.5,1) infinite;transform-origin:50% 100%}
.mp-bande.r{animation-delay:.4s}.mp-bande.m{animation-delay:.8s}
@keyframes mp-jubel{0%,55%,100%{transform:translateY(0) rotate(0)}65%{transform:translateY(-26px) rotate(-8deg)}75%{transform:translateY(0) scaleY(.9)}82%{transform:translateY(-12px) rotate(6deg)}90%{transform:translateY(0)}}
.mp-bande::before{content:"";position:absolute;left:50%;top:-14px;font:900 18px/1 var(--f-display);opacity:0;transform:translateX(-50%);animation:mp-ruf 2.4s infinite;animation-delay:inherit}
.mp-bande.l::before{content:"YES!"}.mp-bande.r::before{content:"WOW!"}.mp-bande.m::before{content:"JA!"}
@keyframes mp-ruf{0%,58%,92%,100%{opacity:0;top:-10px}66%,84%{opacity:1;top:-30px}}
@media (max-width:760px){.bma-mp__maschinen{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.mp-bande,.mp-bande::before{animation:none}}
/* Logo-Wow: Bande hüpft rein, blinzelt, wackelt beim Drüberfahren; Schriftzug klatscht wie ein Plakat an */
header .logo svg{overflow:visible}
header .logo .fig>g>g{transform-box:fill-box;transform-origin:50% 100%;animation:logo-rein .8s cubic-bezier(.3,1.7,.5,1) both}
header .logo .fig>g:nth-child(1)>g{animation-delay:.1s}header .logo .fig>g:nth-child(2)>g{animation-delay:.25s}header .logo .fig>g:nth-child(3)>g{animation-delay:.4s}
@keyframes logo-rein{from{transform:translateY(-70%) scale(.4);opacity:0}}
header .logo:hover .fig>g>g{animation:logo-wackel .7s ease both}
header .logo:hover .fig>g:nth-child(2)>g{animation-delay:.08s}header .logo:hover .fig>g:nth-child(3)>g{animation-delay:.16s}
@keyframes logo-wackel{30%{transform:translateY(-16%) rotate(-10deg)}60%{transform:rotate(8deg)}85%{transform:rotate(-3deg)}}
header .logo .fig ellipse,header .logo .fig circle{transform-box:fill-box;transform-origin:50% 50%;animation:logo-blinzeln 5s 1.5s infinite}
header .logo .fig>g:nth-child(2) ellipse,header .logo .fig>g:nth-child(2) circle{animation-delay:2.8s}
header .logo .fig>g:nth-child(3) ellipse,header .logo .fig>g:nth-child(3) circle{animation-delay:3.6s}
@keyframes logo-blinzeln{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}
header .logo .wort{transform-box:fill-box;transform-origin:50% 50%;animation:logo-klatsch .55s .55s cubic-bezier(.2,1.6,.4,1) both}
@keyframes logo-klatsch{0%{transform:scale(1.8) rotate(8deg);opacity:0}60%{opacity:1}}
header .logo .spritzer{transform-box:fill-box;transform-origin:50% 50%;animation:logo-spritz .5s 1s ease-out both}
@keyframes logo-spritz{0%{transform:scale(0);opacity:0}60%{opacity:1}100%{transform:scale(1);opacity:1}}
header .logo:hover .wort{animation:logo-klatsch .45s cubic-bezier(.2,1.6,.4,1) both}
@media (prefers-reduced-motion:reduce){header .logo *{animation:none!important}}
/* Epson: sechs Drucker im Halbkreis, die Bande feuert in der Mitte an */
.mp-halbkreis{position:relative;display:block;width:100%;height:100%}
.mp-go{position:absolute;left:50%;bottom:-4px;transform:translateX(-50%);display:flex;gap:4px;z-index:20}
.mp-go .mp-bande{position:relative;left:auto;right:auto;bottom:auto;margin:0;width:52px}
.mp-go .g1{animation-delay:.45s}.mp-go .g2{animation-delay:.9s}
.mp-go .mp-bande::before{top:-12px;white-space:nowrap;font-size:17px;background:#FFD400;border:2px solid #111;padding:2px 6px}.mp-go .g0::before{content:"JIPPIEH!"}.mp-go .g1::before{content:"SCHNELLER!"}.mp-go .g2::before{content:"WEITER!"}
.mp-go .mp-bande{animation-duration:2.2s}
.mp-go .mp-bande::before{animation-duration:2.2s}
.bma-mp__foto{height:420px!important}
.bma-mp__foto--swissqprint .bma-mp__rahmen{transform:scale(1.25)}
.mp-go{bottom:35%;z-index:4;gap:12px}.mp-go .mp-bande{width:64px}
/* R5010L in Frontansicht (mit Signallampe, freigestellt): das Plakat läuft über die Rolle und hängt unten heraus, Schlitten im oberen Sichtfenster */
.bma-mp__foto--epson .bma-mp__papier{left:18%;top:59.5%;width:56.5%;height:66%;background:#f3f2ee;box-shadow:0 6px 10px -4px rgba(0,0,0,.35)}
.bma-mp__foto--epson .bma-mp__rolle{display:none}
.bma-mp__foto--epson .bma-mp__schlitten{top:23.3%;left:18%;width:8%;animation-name:mp-schlitten-r5}
@keyframes mp-schlitten-r5{to{left:66%}}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
@media (max-width:1100px){.picto-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:560px){.picto-grid{grid-template-columns:1fr 1fr;gap:12px}.picto-grid a{padding:14px 12px}.picto-grid svg{width:52px;height:52px}}
@media (max-width:900px){
  header .wrap{flex-wrap:wrap;height:auto;padding-top:10px;padding-bottom:6px;gap:12px}
  header .logo{flex:1}
  .head-icons{order:2}
  header .logo svg{height:62px}
  nav{order:3;flex-basis:100%;overflow-x:auto;gap:18px;padding-bottom:6px}
  .hero .wrap,.split{grid-template-columns:1fr}
  .cards,.step-grid{grid-template-columns:1fr 1fr}
  .usp .wrap{grid-template-columns:1fr 1fr}
  .f-grid{grid-template-columns:1fr 1fr}
  .seo-text{columns:1}
}
@media (max-width:560px){
  section{padding:52px 0}
  .hero .wrap{padding-top:36px;padding-bottom:44px}
  .cards,.step-grid,.f-grid{grid-template-columns:1fr}
  .usp .wrap{font-size:13px}
  header .logo svg{height:52px}
  .formats{font-size:13px}
  .formats th,.formats td{padding:8px 10px}
}
@media (max-height:500px){header{position:static}}

/* ===== MIX-WOW MAX =====
   Startzustände hängen an .intro/.kl (setzt das Kopf-Script nur ohne reduzierte Bewegung) – ohne JS steht alles im Endzustand */
:root{--ease-out:cubic-bezier(.23,1,.32,1);--ease-in-out:cubic-bezier(.77,0,.175,1)}

/* 1 · Intro (wow1): Wörter klatschen an, „DAMIT!" knallt, Säule fährt hoch, Postermann springt */
.hero h1 .w{display:inline-block;transform-origin:20% 90%}
.intro .hero h1 .w{animation:klatsch .42s var(--ease-out) both;animation-delay:calc(80ms + var(--i) * 110ms)}
@keyframes klatsch{
  0%{opacity:0;transform:translateY(-35%) scale(1.3,.4) rotate(-6deg)}
  1%{opacity:1}
  40%{transform:translateY(0) scale(.92,1.14) rotate(1.5deg)}
  68%{transform:scale(1.04,.96) rotate(-.5deg)}
  100%{opacity:1;transform:none}
}
.intro .hero h1 span{animation:knall .46s var(--ease-out) .66s both}
@keyframes knall{
  0%{opacity:0;transform:scale(1.9) rotate(-9deg)}
  1%{opacity:1}
  45%{transform:scale(.9,1.1) rotate(0deg)}
  70%{transform:scale(1.05,.95) rotate(-2.6deg)}
  100%{opacity:1;transform:rotate(-2deg)}
}
.intro .buehne{clip-path:inset(-100vh -100vw 0 -100vw)}
.intro .szene{animation:hochfahren 1.1s var(--ease-out) .25s both}
@keyframes hochfahren{0%{transform:translateY(100%)}72%{transform:translateY(-2.5%)}100%{transform:none}}
/* Bande steht von Anfang an an der Säule (David 23.10.: nicht hineinfliegen) */
@keyframes sprung{
  0%{opacity:0;transform:translate(-80%,-150%) rotate(-24deg)}
  1%{opacity:1}
  55%{transform:translate(0,-6%) rotate(4deg) scale(.95,1.05)}
  72%{transform:scale(1.14,.84)}
  88%{transform:scale(.97,1.04)}
  100%{opacity:1;transform:none}
}

/* 2 · Lebendiger Hero (wow2): Wand mit Fetzen/Risskanten, Tiefenebenen per Maus, Augen + Winken */
.hero{position:relative}
.hero .wrap{position:relative;z-index:1}
.hero-deko{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.wand,.fetzen{position:absolute;inset:-16px;will-change:transform}
.wand{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1400 700' preserveAspectRatio='xMidYMid slice'%3E%3Cg fill='%23F1C800' stroke='%23E8C000' stroke-width='2' stroke-linejoin='round'%3E%3Cpolygon points='0,0 372,0 366,22 381,41 362,63 377,92 356,118 371,150 349,171 367,203 344,236 358,262 331,281 312,276 296,299 270,288 248,306 214,292 190,311 160,296 132,314 96,300 64,318 30,302 0,316'/%3E%3Cpolygon points='520,700 528,640 552,622 541,601 573,590 590,562 618,571 641,544 676,556 702,530 731,546 760,522 792,540 826,518 851,539 884,527 903,553 934,546 951,575 979,568 992,599 1018,604 1031,636 1062,650 1070,700'/%3E%3Cpolygon points='1400,72 1214,84 1226,112 1203,139 1219,172 1192,198 1214,232 1186,259 1205,296 1176,321 1197,358 1168,384 1189,421 1400,430'/%3E%3Cpolygon points='0,512 62,503 70,522 131,508 142,531 207,514 219,538 284,521 291,546 352,532 360,556 296,568 232,560 168,574 102,566 40,580 0,574'/%3E%3C/g%3E%3Cg fill='none' stroke='%23EBC300' stroke-width='3'%3E%3Cpath d='M640 0 L652 34 L634 61 L655 96 L638 128 L660 166'/%3E%3Cpath d='M1240 520 L1266 548 L1251 574 L1279 603 L1262 636 L1290 700'/%3E%3C/g%3E%3C/svg%3E") center/cover no-repeat}
.fz{position:absolute;display:block;background:#F2CA00;clip-path:polygon(0 6%,9% 0,22% 5%,37% 1%,52% 6%,68% 0,83% 5%,100% 2%,97% 22%,100% 41%,96% 63%,100% 84%,94% 100%,76% 95%,58% 100%,41% 94%,24% 99%,7% 95%,0 100%,3% 74%,0 52%,4% 31%)}
.fz2{background:repeating-linear-gradient(-45deg,#F2CA00 0 14px,#EEC500 14px 28px)}
.tp{position:absolute;display:block;width:88px;height:22px;background:var(--tape);opacity:.7;clip-path:polygon(0 8%,4% 30%,1% 52%,5% 74%,0 100%,100% 92%,96% 70%,100% 48%,95% 25%,100% 0)}
.fz1{left:-34px;top:60%;width:230px;height:170px;transform:rotate(-5deg)}
.fz2{right:-26px;top:-36px;width:270px;height:210px;transform:rotate(7deg)}
.fz3{left:43%;bottom:-48px;width:190px;height:130px;transform:rotate(3deg)}
.tp1{left:46px;top:calc(60% - 10px);transform:rotate(-11deg)}
.tp2{right:206px;top:150px;transform:rotate(34deg)}
.tp3{left:calc(43% + 50px);bottom:64px;transform:rotate(-6deg)}
.pm-hero .pupille{transition:transform .15s var(--ease-out)}
.pm-hero .arm{transform-origin:162px 150px}
.pm-hero.winkt .arm{animation:winken 1.5s ease-in-out infinite}
@keyframes winken{0%,100%{transform:rotate(0)}18%{transform:rotate(-118deg)}30%{transform:rotate(-94deg)}42%{transform:rotate(-122deg)}54%{transform:rotate(-94deg)}66%{transform:rotate(-116deg)}84%{transform:rotate(0)}}

/* 3 · Säule zieht mit (e8/e9): eigene Spur über Hero + Produkte, darin klebt die Säule (nur Desktop, .mitzug setzt das Script) */
.zug{position:relative}
.spur{position:absolute;inset:0;z-index:2;pointer-events:none}
.spur .wrap{height:100%;display:grid;grid-template-columns:1.15fr .85fr;gap:30px}
.spur .hero-saeule{grid-column:2;position:sticky;top:104px;align-self:start;pointer-events:auto}
.mitzug #produkte .wrap{display:grid;grid-template-columns:1.15fr .85fr;column-gap:30px}
.mitzug #produkte .sec-head,.mitzug #produkte .cards{grid-column:1}
.mitzug #produkte .cards{grid-template-columns:1fr 1fr;align-items:start}
/* versetzt geklebt wie an der Plakatwand – so erreicht jede Karte die Fenstermitte zu eigener Zeit */
.mitzug #produkte .card:nth-child(even){top:140px}
/* Luft unten: die Säule soll bei der letzten Karte noch ganz stehen, bevor sie wegscrollt */
.mitzug #produkte{padding-bottom:380px}
/* Pinsel-Schwung als eigene Gruppe, damit der Extra-Wisch das Grundwippen nicht abreißt */
.pm-hero .schwung,.cta-band .schwung{transform-origin:60px 150px}
/* Kleister-Glanz über dem vorderen Plakat; Fläche = perspektivisch gerechnete Plakatform (clip-path aus dem Script) */
.kleister{position:absolute;pointer-events:none;overflow:hidden}
.kleister i{position:absolute;top:0;bottom:0;left:0;transform:translateX(-300%) skewX(-16deg);
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.35) 0 1px,transparent 1px 4px),linear-gradient(90deg,transparent,rgba(255,255,255,.62) 40%,rgba(255,255,255,.9) 50%,rgba(255,255,255,.4) 62%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 35%,#000 65%,transparent);mask-image:linear-gradient(90deg,transparent,#000 35%,#000 65%,transparent)}

/* 4 · Produktkarten werden angekleistert (wow1): anklatschen, Glanz, Klebeband – Inhalt ist nie versteckt */
.card{position:relative}
.card .img{position:relative}
.card .img::before,.card .img::after{content:"";position:absolute;top:-12px;width:62px;height:22px;background:var(--tape);opacity:.9;box-shadow:0 1px 0 rgba(0,0,0,.18);pointer-events:none}
.card .img::before{left:-16px;transform:rotate(-12deg)}
.card .img::after{right:-16px;transform:rotate(10deg)}
.card::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.75) 48%,rgba(255,255,255,.95) 50%,rgba(255,255,255,.55) 53%,transparent 60%) no-repeat;background-size:300% 100%;background-position:100% 0}
.kl .card:not(.geklebt) .img::before,.kl .card:not(.geklebt) .img::after{opacity:0}
.kl .card.geklebt{animation:anklatschen .5s var(--ease-out) calc(var(--k,0) * 70ms) backwards}
@keyframes anklatschen{0%{transform:scale(1.06) rotate(-2.4deg)}45%{transform:scale(.98,1.01) rotate(.6deg)}75%{transform:scale(1.01) rotate(-.2deg)}100%{transform:none}}
.kl .card.geklebt::after{animation:glanz .52s var(--ease-in-out) calc(.12s + var(--k,0) * 70ms) both}
@keyframes glanz{0%{opacity:1;background-position:100% 0}99%{opacity:1}100%{opacity:0;background-position:0 0}}
.kl .card.geklebt .img::before{animation:tapeL .3s var(--ease-out) calc(.3s + var(--k,0) * 70ms) both}
.kl .card.geklebt .img::after{animation:tapeR .3s var(--ease-out) calc(.36s + var(--k,0) * 70ms) both}
@keyframes tapeL{0%{opacity:0;transform:rotate(-30deg) scale(1.6)}1%{opacity:.9}60%{transform:rotate(-10deg) scale(.92)}100%{opacity:.9;transform:rotate(-12deg)}}
@keyframes tapeR{0%{opacity:0;transform:rotate(28deg) scale(1.6)}1%{opacity:.9}60%{transform:rotate(8deg) scale(.92)}100%{opacity:.9;transform:rotate(10deg)}}

/* 5 · Schluss-CTA: Zeile wird angeklatscht, Postermann kleistert */
.cta-band{overflow-x:clip}
.cta-band .claim{transform-origin:50% 70%}
.cta-band.bereit:not(.klatscht) .claim{opacity:0}
.cta-band.klatscht .claim{animation:plakatklatsch .5s var(--ease-out) both}
@keyframes plakatklatsch{
  0%{opacity:0;transform:scale(1.7) rotate(-6deg)}
  1%{opacity:1}
  45%{transform:scale(.94,1.08) rotate(.6deg)}
  70%{transform:scale(1.03,.97) rotate(-.8deg)}
  100%{opacity:1;transform:none}
}

@media (max-width:900px){.fz2{width:180px;height:140px}.tp2{right:120px;top:96px}.fz3,.tp3{display:none}}
@media (max-height:500px){.spur .hero-saeule{top:16px}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}.card:hover,.btn:hover{transform:none}}
.hero .wrap{align-items:start;padding-top:44px}
.hero .wrap>div:first-child{position:relative;padding-top:8px}
.stoerer-reihe{display:flex;align-items:center;gap:28px;margin-top:40px;flex-wrap:wrap}
.stoerer{flex:none;width:150px;height:150px;border-radius:50%;background:var(--schwarz);color:var(--gelb);display:grid;place-content:center;text-align:center;font-family:var(--f-display);font-weight:900;font-size:13px;line-height:1.15;text-transform:uppercase;transform:rotate(-8deg);border:3px dashed var(--gelb);outline:5px solid var(--schwarz)}
.zettel{position:relative;background:#fff;border:3px solid var(--schwarz);box-shadow:5px 5px 0 var(--schwarz);padding:14px 18px;font-weight:700;font-size:16px;line-height:1.4;transform:rotate(2deg)}
.zettel::before{content:"";position:absolute;top:-12px;left:50%;margin-left:-30px;width:60px;height:20px;background:var(--tape);opacity:.9;transform:rotate(-4deg)}
.stoerer b{display:block;font-size:22px;line-height:1}
.hero .ctas{margin-top:4px}
@media (max-width:900px){.stoerer-reihe{margin-top:28px}}
@media (max-width:560px){.stoerer{width:120px;height:120px;font-size:11px}.stoerer b{font-size:18px}.zettel{font-size:14px}}
.pm-hero.pm-bande{width:clamp(160px,40%,230px);margin-left:-40px}
@media (max-width:900px){.pm-hero.pm-bande{margin-left:0;width:clamp(130px,34%,200px)}}
.formats td.anfrage{text-align:center;color:var(--grau);font-weight:700;font-family:inherit}
.formats tr.neu-gruppe td{border-top:3px solid var(--schwarz)}
.formats-hinweis{margin-top:14px;color:var(--grau);font-weight:700}
.formats td.offen{color:#C62A1F;font-size:12px;font-weight:700;text-transform:uppercase}
.formats th{white-space:nowrap}
.formats td:nth-child(2){white-space:nowrap;font-size:14px}
.formats th,.formats td{padding:10px 8px}
.formats th{font-size:12px}
.lieferzeit{background:#fff;border-top:4px solid var(--schwarz)}
.tempo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.tempo{border:3px solid var(--schwarz);box-shadow:6px 6px 0 var(--schwarz);padding:22px 20px;display:flex;flex-direction:column;gap:6px}
.tempo b{font-size:24px;line-height:1}
.tempo .tage{font-family:var(--f-display);font-weight:900;font-size:34px;line-height:1.1}
.tempo p{color:var(--grau);font-size:15px}
.t-blitz{background:var(--gelb)}.t-blitz p{color:var(--schwarz)}
.t-express{background:var(--schwarz);color:var(--gelb)}.t-express p{color:#ddd}
.t-standard{background:var(--papier)}
@media (max-width:900px){.tempo-grid{grid-template-columns:1fr}}