Superitalia

<div data-tn style="display:none">Shopify-Konzept</div><style> *{margin:0;padding:0;box-sizing:border-box}body{font-family:Trispace,sans-serif;background:#150D0C;color:#F1EBC9;line-height:1.6}.si-ks-container{max-width:1200px;margin:0 auto;padding:40px 20px}.si-ks-title{font-size:28px;margin-bottom:30px;font-weight:600}.si-ks-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.si-ks-card{background:#1C1C1C;border:1px solid #2A2020;padding:28px;display:flex;flex-direction:column}.si-ks-card-number{font-size:11px;color:#F1EBC9;opacity:0.55;margin-bottom:16px;text-transform:uppercase}.si-ks-card-heading{font-size:18px;font-weight:600;margin-bottom:16px}.si-ks-card-list{list-style:none}.si-ks-card-list li{font-size:14px;color:#F1EBC9;margin-bottom:12px;padding-left:12px;position:relative}.si-ks-card-list li:before{content:"–";position:absolute;left:0}.si-ks-card-highlight{color:#F1EBC9;opacity:0.85;font-size:12px;margin-top:16px;padding-top:16px;border-top:1px solid #2A2020}@media(max-width:767px){.si-ks-cards{grid-template-columns:1fr!important}h2{font-size:22px!important}.si-ks-container{padding:20px 12px!important}h3{font-size:16px!important}}</style><div class="si-ks-container"><h2 class="si-ks-title">Shopify-Konzept</h2><div class="si-ks-cards"><div class="si-ks-card"><span class="si-ks-card-number">Säule 1</span><h3 class="si-ks-card-heading">Produktstruktur</h3><ul class="si-ks-card-list"><li>Kategorisierung nach Wirkung statt Produkttyp</li><li>4 Haupt-Collections:Energy,Recovery,Endurance,Focus</li><li>Cross-Selling durch intelligente Bundling</li><li>Performance-Benefits prominent kommuniziert</li></ul><div class="si-ks-card-highlight">Fokus:Athletische Nutzenargumente über Lifestyle</div></div><div class="si-ks-card"><span class="si-ks-card-number">Säule 2</span><h3 class="si-ks-card-heading">Shopify-Architektur</h3><ul class="si-ks-card-list"><li>Custom Theme mit CI-konformer UI</li><li>Metafields für Performance-Daten</li><li>Bundle-Builder für Trainings-Sets</li><li>Inventory-Sync zu Lager-System</li></ul><div class="si-ks-card-highlight">Technische Basis:Skalierbar & modular</div></div><div class="si-ks-card"><span class="si-ks-card-number">Säule 3</span><h3 class="si-ks-card-heading">Conversion-Strategie</h3><ul class="si-ks-card-list"><li>Abo-Logik mit Rabatt-Incentives</li><li>Social Proof:Athlet-Reviews & Testimonials</li><li>Amazon-Integration für Multi-Channel</li><li>Upsell:Zubehör & Complementary Products</li></ul><div class="si-ks-card-highlight">Ziel:40% Abo-Quote,3.2x AOV</div></div></div></div>

<div data-tn style="display:none">Marktanalyse</div><style> *{margin:0;padding:0;box-sizing:border-box}body{font-family:Trispace,sans-serif;background:#150D0C;color:#F1EBC9;line-height:1.6}.si-ra-container{max-width:1200px;margin:0 auto;padding:40px 20px}.si-ra-title{font-size:28px;margin-bottom:30px;font-weight:600}.si-ra-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}.si-ra-card{background:#1C1C1C;border:1px solid #2A2020;padding:24px;display:flex;flex-direction:column}.si-ra-card-label{font-size:12px;color:#F1EBC9;opacity:0.55;margin-bottom:12px;text-transform:uppercase;letter-spacing:0}.si-ra-card-title{font-size:20px;font-weight:600;margin-bottom:12px}.si-ra-card-value{font-size:24px;color:#F1EBC9;margin-bottom:12px;font-weight:700}.si-ra-card-description{font-size:14px;color:#F1EBC9;opacity:0.85}.si-ra-card-highlight{color:#F1EBC9;font-weight:600}@media(max-width:767px){.si-ra-grid{grid-template-columns:1fr!important}h2{font-size:22px!important}.si-ra-container{padding:20px 12px!important}h3{font-size:16px!important}}</style><div class="si-ra-container"><h2 class="si-ra-title">Marktanalyse</h2><div class="si-ra-grid"><div class="si-ra-card"><span class="si-ra-card-label">Marktwachstum</span><h3 class="si-ra-card-title">Supplement-Markt</h3><div class="si-ra-card-value">+12%</div><p class="si-ra-card-description">Jährliches Wachstum im europäischen Segment mit Fokus auf funktionale Lebensmittel und Performance-Produkte.</p></div><div class="si-ra-card"><span class="si-ra-card-label">Zielgruppe</span><h3 class="si-ra-card-title">Kerndemografie</h3><div class="si-ra-card-value">25–45</div><p class="si-ra-card-description"><span class="si-ra-card-highlight">Sportlich,gesundheitsbewusst:</span> Fitness-Enthusiasten,Athleten,Wellness-orientierte Konsumenten mit höherer Kaufkraft.</p></div><div class="si-ra-card"><span class="si-ra-card-label">Wettbewerbsanalyse</span><h3 class="si-ra-card-title">Marktübersicht</h3><div class="si-ra-card-value">8</div><p class="si-ra-card-description">Direkte Konkurrenten analysiert:MusclePro,NutriForce,PowerShake,VitaActive,ProFit,EneryBrew,SportCaps,FitNutrition.</p></div><div class="si-ra-card"><span class="si-ra-card-label">Differenzierung</span><h3 class="si-ra-card-title">USP</h3><div class="si-ra-card-value">2X</div><p class="si-ra-card-description"><span class="si-ra-card-highlight">Italienisches Heritage + Sportfokus:</span> Einzige Marke mit authentischem Italian-Craftsmanship und direkter Sports-Nutrition-Positionierung.</p></div></div></div>

<div data-tn style="display:none">UX & Shopify</div> <style> .si-ux{max-width:100%;width:100%;background:#150D0C;padding:40px 24px;font-family:Trispace,sans-serif} .si-ux-title{text-align:left;font-weight:700;font-size:17px;color:#F1EBC9;margin:0 0 16px} .si-ux-sub{text-align:left;font-size:13px;color:rgba(241,235,201,0.55);margin:0 0 28px} .si-ux-phases{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;max-width:840px;margin:0 auto} .si-ux-phase{background:#1C1C1C;border:1px solid #2A2020;border-radius:0;padding:24px 20px} .si-ux-phase-icon{font-size:20px;margin:0 0 10px} .si-ux-phase-name{font-weight:700;font-size:13px;color:#F1EBC9;margin:0 0 12px} .si-ux-phase-items{list-style:none;padding:0;margin:0} .si-ux-phase-items li{font-size:11px;color:rgba(241,235,201,0.55);padding:4px 0;border-bottom:1px solid rgba(241,235,201,0.08)} .si-ux-phase-items li:last-child{border:none} @media(max-width:767px){[class*='-grid'],[class*='-pillars'],[class*='-phases'],[class*='-row'],[class*='-flow'],[class*='-metrics'],[class*='-principles'],[class*='-cards'],[class*='-deliverables'],[class*='ux-'],[class*='vis-'],[class*='faz-']{grid-template-columns:1fr!important;flex-direction:column!important}[class*='-mb']{min-height:500px!important}[class*='-mb-img']{position:relative!important;left:auto!important;top:auto!important;width:100%!important;max-width:320px!important;margin:8px auto!important;display:block!important}h2{font-size:22px!important}h3{font-size:16px!important}[class$='-container'],[class*='-wrap'],[class*='-content']{padding:20px 12px!important;max-width:100%!important;overflow-x:hidden!important}} </style> <div class="si-ux"> <div class="si-ux-title">UX-Prozess & Shopify-Umsetzung</div> <p class="si-ux-sub">Iterativer Designprozess vom Wireframe bis zum live Shopify-Store</p> <div class="si-ux-phases"> <div class="si-ux-phase"><div class="si-ux-phase-icon">🔍</div><div class="si-ux-phase-name">Discovery</div><ul class="si-ux-phase-items"><li>Stakeholder-Interviews</li><li>Wettbewerbsanalyse</li><li>Zielgruppen-Personas</li><li>User Journey Mapping</li></ul></div> <div class="si-ux-phase"><div class="si-ux-phase-icon">✏️</div><div class="si-ux-phase-name">Wireframing</div><ul class="si-ux-phase-items"><li>Low-Fidelity Wireframes</li><li>Informationsarchitektur</li><li>Navigation & Filterlogik</li><li>Mobile-First Layout</li></ul></div> <div class="si-ux-phase"><div class="si-ux-phase-icon">🎨</div><div class="si-ux-phase-name">UI Design</div><ul class="si-ux-phase-items"><li>Visual Design System</li><li>Produktseiten-Templates</li><li>Bundle-Builder UI</li><li>Responsive Breakpoints</li></ul></div> <div class="si-ux-phase"><div class="si-ux-phase-icon">🚀</div><div class="si-ux-phase-name">Shopify Build</div><ul class="si-ux-phase-items"><li>Custom Theme Development</li><li>Metafield-Integration</li><li>App-Konfiguration</li><li>Performance-Optimierung</li></ul></div> </div> </div>

<div data-tn style="display:none">Moodboard</div> <style> .si-mb{position:relative;width:100%;min-height:700px;background:#150D0C;overflow:hidden;cursor:grab;user-select:none;-webkit-user-select:none} .si-mb:active{cursor:grabbing} .si-mb-img{position:absolute;border-radius:0;box-shadow:0 4px 20px rgba(0,0,0,0.5);transition:box-shadow 0.2s,transform 0.15s;cursor:grab;object-fit:cover} .si-mb-img:hover{box-shadow:0 8px 32px rgba(0,0,0,0.7);z-index:10!important} .si-mb-img.dragging{box-shadow:0 12px 40px rgba(0,0,0,0.8);transform:scale(1.03);z-index:100!important;transition:none} @media(max-width:767px){[class*='-grid'],[class*='-pillars'],[class*='-phases'],[class*='-row'],[class*='-flow'],[class*='-metrics'],[class*='-principles'],[class*='-cards'],[class*='-deliverables'],[class*='ux-'],[class*='vis-'],[class*='faz-']{grid-template-columns:1fr!important;flex-direction:column!important}[class*='-mb']{min-height:500px!important}[class*='-mb-img']{position:relative!important;left:auto!important;top:auto!important;width:100%!important;max-width:320px!important;margin:8px auto!important;display:block!important}h2{font-size:22px!important}h3{font-size:16px!important}[class$='-container'],[class*='-wrap'],[class*='-content']{padding:20px 12px!important;max-width:100%!important;overflow-x:hidden!important}} </style> <div class="si-mb" id="si-moodboard"> <img class="si-mb-img" src="https://cdn.prod.website-files.com/651855a500ee886d8d6529c7/69ca8827b51b5cc7e8021a53_69c9850c2691cde30ecccda7_superitalia-coffee-supplements-bundles-beauty-1.png" style="width:260px;top:20px;left:5%;z-index:1" alt="Superitalia Bundles Beauty"> <img class="si-mb-img" src="https://cdn.prod.website-files.com/651855a500ee886d8d6529c7/69ca8827e1ecaff3f55e20e8_69c985152a35e29271932faa_superitalia-coffee-supplements-bundles-sport-2.png" style="width:220px;top:40px;left:30%;z-index:2" alt="Superitalia Bundles Sport"> <img class="si-mb-img" src="https://cdn.prod.website-files.com/651855a500ee886d8d6529c7/69ca8827bf08318462c28556_69c984fd1dab0a54474cb28a_superitalia-coffee-supplements-blends-by-benefit.png" style="width:280px;top:10px;left:55%;z-index:3" alt="Superitalia Blends by Benefit"> <img class="si-mb-img" src="https://cdn.prod.website-files.com/651855a500ee886d8d6529c7/69ca88273824d7bce26f6562_69c98506214f0b9becd11d1a_superitalia-coffee-supplements-bundle-performance.png" style="width:240px;top:60px;left:75%;z-index:4" alt="Superitalia Bundle Performance"> <img class="si-mb-img" src="https://cdn.prod.website-files.com/651855a500ee886d8d6529c7/69ca8828ad7792156caad2f3_69c984d1cb6f8c10b0ae3659_superitalia-coffee-supllements-bundle-calm-and-recovery-cappuccino.png" style="width:250px;top:220px;left:2%;z-index:5" alt="Superitalia Calm Recovery"> <img class="si-mb-img" src="https://cdn.prod.website-files.com/651855a500ee886d8d6529c7/69ca8828e0413bcde499ca84_69c984d106a8f3921338b9ee_superitalia-coffee-supllements-dunle-sustained-engery-boost.png" style="width:230px;top:240px;left:28%;z-index:6" alt="Superitalia Energy Boost"> <img class="si-mb-img" src="https://cdn.prod.website-files.com/651855a500ee886d8d6529c7/69ca88285264269eacd86b78_69c984dede4f6f0ef5c32b31_superitalia-coffee-supllements-la-familia2.png" style="width:270px;top:200px;left:52%;z-index:7" alt="Superitalia La Familia"> <img class="si-mb-img" src="https://cdn.prod.website-files.com/651855a500ee886d8d6529c7/69ca885bde6f6e491cac4c06_annekevandermost_superitalia-coffee-supllements-sport-sustained-energy-boost-hyrox-rimini.webp" style="width:240px;top:420px;left:8%;z-index:8" alt="Superitalia Hyrox Rimini"> <img class="si-mb-img" src="https://cdn.prod.website-files.com/651855a500ee886d8d6529c7/69ca885b031674a25b2a62e7_annekevandermost_superitalia-coffee-supllements-sport-beauty-recovery-woman-hyrox-washington.webp" style="width:260px;top:400px;left:35%;z-index:9" alt="Superitalia Hyrox Washington"> <img class="si-mb-img" src="https://cdn.prod.website-files.com/651855a500ee886d8d6529c7/69ca885cad280fc4fe5b6cb8_annekevandermost_superitalia-coffee-supllements-sport-beauty-beauty-and-glow-nutrition-6%20(1).png" style="width:220px;top:440px;left:60%;z-index:10" alt="Superitalia Beauty Glow 1"> <img class="si-mb-img" src="https://cdn.prod.website-files.com/651855a500ee886d8d6529c7/69ca885c52e563f3d140b34c_annekevandermost_superitalia-coffee-supllements-sport-beauty-beauty-and-glow-nutrition-5.png" style="width:250px;top:380px;left:78%;z-index:11" alt="Superitalia Beauty Glow 2"> </div> <script> (function(){var c=document.getElementById('si-moodboard');if(!c)return;var imgs=c.querySelectorAll('.si-mb-img');var drag=null,ox=0,oy=0,mx=0;imgs.forEach(function(img,i){img.style.zIndex=i+1});function start(e){var t=e.target.closest('.si-mb-img');if(!t)return;e.preventDefault();drag=t;mx=Math.max.apply(null,Array.from(imgs).map(function(x){return parseInt(x.style.zIndex)||0}))+1;drag.style.zIndex=mx;drag.classList.add('dragging');var p=e.touches?e.touches[0]:e;ox=p.clientX-drag.offsetLeft;oy=p.clientY-drag.offsetTop}function move(e){if(!drag)return;e.preventDefault();var p=e.touches?e.touches[0]:e;drag.style.left=(p.clientX-ox)+'px';drag.style.top=(p.clientY-oy)+'px'}function end(){if(drag){drag.classList.remove('dragging');drag=null}}c.addEventListener('mousedown',start);c.addEventListener('mousemove',move);c.addEventListener('mouseup',end);c.addEventListener('mouseleave',end);c.addEventListener('touchstart',start,{passive:false});c.addEventListener('touchmove',move,{passive:false});c.addEventListener('touchend',end)})(); </script>

<div data-tn style="display:none">Design System</div><style> .si-ds{max-width:100%;width:100%;background:#150D0C;padding:40px 24px;font-family:Trispace,sans-serif} .si-ds-title{text-align:left;font-weight:700;font-size:17px;color:#F1EBC9;margin:0 0 16px} .si-ds-sub{text-align:left;font-size:13px;color:rgba(241,235,201,0.55);margin:0 0 28px} .si-ds-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:840px;margin:0 auto 16px} .si-ds-section{background:#1C1C1C;border:1px solid #2A2020;border-radius:0;padding:20px} .si-ds-section-title{font-weight:700;font-size:13px;color:#F1EBC9;margin:0 0 16px;text-transform:uppercase} .si-ds-colors{display:flex;gap:12px;flex-wrap:wrap} .si-ds-color{display:flex;flex-direction:column;align-items:center;gap:6px} .si-ds-swatch{width:48px;height:48px;border-radius:0;border:1px solid rgba(241,235,201,0.15)} .si-ds-color-name{font-size:10px;color:rgba(241,235,201,0.55);font-weight:600} .si-ds-typo-sample{margin:0 0 12px} .si-ds-typo-label{font-size:10px;color:rgba(241,235,201,0.4);margin:0 0 16px} .si-ds-typo-text{font-size:22px;font-weight:700;color:#F1EBC9;margin:0;font-family:Trispace,sans-serif} .si-ds-typo-body{font-size:13px;color:rgba(241,235,201,0.55);line-height:1.6;margin:0;font-family:Trispace,sans-serif} @media(max-width:767px){[class*='-grid'],[class*='-pillars'],[class*='-phases'],[class*='-row'],[class*='-flow'],[class*='-metrics'],[class*='-principles'],[class*='-cards'],[class*='-deliverables'],[class*='ux-'],[class*='vis-'],[class*='faz-']{grid-template-columns:1fr!important;flex-direction:column!important}[class*='-mb']{min-height:500px!important}[class*='-mb-img']{position:relative!important;left:auto!important;top:auto!important;width:100%!important;max-width:320px!important;margin:8px auto!important;display:block!important}h2{font-size:22px!important}h3{font-size:16px!important}[class$='-container'],[class*='-wrap'],[class*='-content']{padding:20px 12px!important;max-width:100%!important;overflow-x:hidden!important}} </style> <div class="si-ds"> <h3 class="si-ds-title">Design System</h3> <p class="si-ds-sub">Farben, Typografie & visuelle Identität</p> <div class="si-ds-row"> <div class="si-ds-section"> <p class="si-ds-section-title">Farbpalette</p> <div class="si-ds-colors"> <div class="si-ds-color"><div class="si-ds-swatch" style="background:#C41E3A"></div><p class="si-ds-color-name">Rosso</p></div> <div class="si-ds-color"><div class="si-ds-swatch" style="background:#1B4332"></div><p class="si-ds-color-name">Verde</p></div> <div class="si-ds-color"><div class="si-ds-swatch" style="background:#F5E6CC"></div><p class="si-ds-color-name">Crema</p></div> <div class="si-ds-color"><div class="si-ds-swatch" style="background:#2C1810"></div><p class="si-ds-color-name">Espresso</p></div> <div class="si-ds-color"><div class="si-ds-swatch" style="background:#D4A574"></div><p class="si-ds-color-name">Oro</p></div> </div> </div> <div class="si-ds-section"> <p class="si-ds-section-title">Typografie</p> <div class="si-ds-typo-sample"><p class="si-ds-typo-label">Heading / Trispace</p><p class="si-ds-typo-text">Superitalia</p></div> <div class="si-ds-typo-sample"><p class="si-ds-typo-label">Body / Trispace</p><p class="si-ds-typo-body">Authentische italienische Küche mit regionalen Zutaten. Warme, einladende Typografie für Speisekarten und Web.</p></div> </div> </div> </div>

<div data-tn style="display:none">Fazit</div> <style> .si-fz{max-width:100%;width:100%;background:#150D0C;padding:40px 24px;font-family:Trispace,sans-serif} .si-fz-content{max-width:640px;margin:0 auto} .si-fz-text{font-size:13px;color:rgba(241,235,201,0.55);line-height:1.7;margin:0 0 16px} .si-fz-metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:16px;margin:28px 0 0} .si-fz-metric{background:#1C1C1C;border:1px solid #2A2020;border-radius:0;padding:20px;text-align:left} .si-fz-metric-val{font-size:22px;font-weight:700;color:#F1EBC9;margin:0 0 6px} .si-fz-metric-lbl{font-size:11px;color:rgba(241,235,201,0.55);margin:0} @media(max-width:767px){[class*='-grid'],[class*='-pillars'],[class*='-phases'],[class*='-row'],[class*='-flow'],[class*='-metrics'],[class*='-principles'],[class*='-cards'],[class*='-deliverables'],[class*='ux-'],[class*='vis-'],[class*='faz-']{grid-template-columns:1fr!important;flex-direction:column!important}[class*='-mb']{min-height:500px!important}[class*='-mb-img']{position:relative!important;left:auto!important;top:auto!important;width:100%!important;max-width:320px!important;margin:8px auto!important;display:block!important}h2{font-size:22px!important}h3{font-size:16px!important}[class$='-container'],[class*='-wrap'],[class*='-content']{padding:20px 12px!important;max-width:100%!important;overflow-x:hidden!important}} </style> <div class="si-fz"> <div class="si-fz-content"> <p class="si-fz-text">Für Superitalia wurde ein vollständiger Shopify-Store konzipiert und umgesetzt — von der Markenpositionierung über die Produktstruktur bis zum Custom Theme. Der Shop verbindet italienisches Lifestyle-Branding mit funktionaler Supplementierung und bietet eine durchdachte Bundle-Logik für wiederkehrende Kunden.</p> <div class="si-fz-metrics"> <div class="si-fz-metric"><div class="si-fz-metric-val">40+</div><div class="si-fz-metric-lbl">Produkte & Bundles</div></div> <div class="si-fz-metric"><div class="si-fz-metric-val">Custom</div><div class="si-fz-metric-lbl">Shopify Theme</div></div> <div class="si-fz-metric"><div class="si-fz-metric-val">Mobile</div><div class="si-fz-metric-lbl">First Approach</div></div> <div class="si-fz-metric"><div class="si-fz-metric-val">Abo</div><div class="si-fz-metric-lbl">Reorder-System</div></div> </div> </div> </div>