Chili and Change

<div data-tn style="display:none">Plattformkonzept</div><style> .cc-ux-container { font-family:Trispace,sans-serif; max-width: 800px; margin: 32px auto; } .cc-ux-title { font-size: 17px; font-weight: 700; color: #F1EBC9; margin:0 0 16px 0; text-align:left; } .cc-ux-subtitle { font-size: 13px; color: rgba(241,235,201,0.55); margin: 0 0 24px 0; text-align:left; } .cc-ux-journey { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 16px; } .cc-ux-step { background: #1C1C1C; border: 1px solid #2A2020; border-radius: 8px; padding: 16px; text-align:left; transition: all 0.2s ease; } .cc-ux-step:hover { border-color: #3A3030; box-shadow: 0 4px 12px rgba(241,235,201,0.08); } .cc-ux-step-icon { font-size: 24px; margin-bottom: 8px; } .cc-ux-step-label { font-size: 12px; color: #F1EBC9; font-weight: 600; 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-']{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}}</style> <div class="cc-ux-container"> <h3 class="cc-ux-title">Plattform-Strategie: Nachhaltige Lieferketten</h3> <p class="cc-ux-subtitle">Transparente Supply Chain durch Blockchain & Community</p> <div class="cc-ux-journey"> <div class="cc-ux-step"> <div class="cc-ux-step-icon">🌾</div> <p class="cc-ux-step-label">Bauern</p> </div> <div class="cc-ux-step"> <div class="cc-ux-step-icon">✓</div> <p class="cc-ux-step-label">Zertifizierung</p> </div> <div class="cc-ux-step"> <div class="cc-ux-step-icon">📦</div> <p class="cc-ux-step-label">Logistik</p> </div> <div class="cc-ux-step"> <div class="cc-ux-step-icon">🛒</div> <p class="cc-ux-step-label">Verbraucher</p> </div> <div class="cc-ux-step"> <div class="cc-ux-step-icon">🌱</div> <p class="cc-ux-step-label">Impact</p> </div> </div> </div>

<div data-tn style="display:none">Bedarfsanalyse</div><style>.cc-aus-container{max-width:100%;width:100%;background-color:#150D0C;padding:40px 0;font-family:Trispace,sans-serif}.cc-aus-title{text-align:left;font-weight:700;font-size:17px;color:#F1EBC9;margin:0 0 4px 0}.cc-aus-subtitle{text-align:left;font-weight:400;font-size:13px;color:rgba(241,235,201,0.55);margin:0 0 28px 0}.cc-aus-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:16px;max-width:840px;margin:0 auto}.cc-aus-card{background-color:#1C1C1C;border:1px solid #2A2020;border-radius:12px;padding:20px;text-align:left;transition:all 0.2s ease}.cc-aus-card:hover{background-color:#150D0C;border-color:#3A3030;box-shadow:0 4px 12px rgba(241,235,201,0.08)}.cc-aus-card-num{font-weight:700;font-size:32px;line-height:1.2;margin:0 0 4px 0}.cc-aus-card-label{font-weight:600;font-size:12px;color:rgba(241,235,201,0.55);text-transform:uppercase;margin:0 0 8px 0}.cc-aus-card-desc{font-size:12px;color:rgba(241,235,201,0.55);line-height:1.5;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-']{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}}</style><div class="cc-aus-container"><h3 class="cc-aus-title">Bedarfsanalyse: Nachhaltige Lebensmittel</h3><p class="cc-aus-subtitle">Rückverfolgbarkeit und Transparenz als Kaufkriterium (n=156)</p><div class="cc-aus-grid"><div class="cc-aus-card"><div style="display: flex; align-items: center; justify-content: center;"><span class="cc-aus-card-num" style="color: #F1EBC9;">73%</span></div><p class="cc-aus-card-label">Transparenz wichtig</p><p class="cc-aus-card-desc">Herkunft & Anbau</p></div><div class="cc-aus-card"><div style="display: flex; align-items: center; justify-content: center;"><span class="cc-aus-card-num" style="color: #F1EBC9;">68%</span></div><p class="cc-aus-card-label">Willingness to Pay</p><p class="cc-aus-card-desc">Premium f. Nachhalt</p></div><div class="cc-aus-card"><div style="display: flex; align-items: center; justify-content: center;"><span class="cc-aus-card-num" style="color: #F1EBC9;">81%</span></div><p class="cc-aus-card-label">Digitale Infos nutzen</p><p class="cc-aus-card-desc">QR-Codes, Apps</p></div><div class="cc-aus-card"><div style="display: flex; align-items: center; justify-content: center;"><span class="cc-aus-card-num" style="color: #F1EBC9;">56%</span></div><p class="cc-aus-card-label">Online kaufen</p><p class="cc-aus-card-desc">Mit Lieferung</p></div></div></div>

<div data-tn style="display:none">Stakeholder Matrix</div><style> .cc-mx{width:100%;background:#150D0C;padding:24px;font-family:Trispace,sans-serif} .cc-mx-title{font-size:17px;font-weight:700;color:#F1EBC9;margin:0 0 16px 0;text-align:left} .cc-mx-sub{font-size:13px;color:rgba(241,235,201,0.55);margin:0 0 24px 0;text-align:left} .cc-mx-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:600px;margin:0 auto} .cc-mx-quad{border:1px solid rgba(241,235,201,0.2);border-radius:8px;padding:16px;background:#1C1C1C} .cc-mx-quad-title{font-size:12px;font-weight:700;color:#F1EBC9;margin:0 0 12px 0} .cc-mx-quad-items{font-size:11px;color:rgba(241,235,201,0.6);line-height:1.6} @media(max-width:767px){[class*='-grid'],[class*='-pillars'],[class*='-phases'],[class*='-row'],[class*='-flow'],[class*='-metrics'],[class*='-principles'],[class*='-cards'],[class*='-deliverables'],[class*='ux-']{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}}</style> <div class="cc-mx"> <p class="cc-mx-title">Stakeholder Matrix</p> <p class="cc-mx-sub">Einfluss & Interesse der Stakeholder</p> <div class="cc-mx-grid"> <div class="cc-mx-quad"> <p class="cc-mx-quad-title">Hochinteresse, hoher Einfluss</p> <div class="cc-mx-quad-items">Landwirte, Distributor, Regulierung</div> </div> <div class="cc-mx-quad"> <p class="cc-mx-quad-title">Hochinteresse, geringer Einfluss</p> <div class="cc-mx-quad-items">Verbraucher, NGOs</div> </div> <div class="cc-mx-quad"> <p class="cc-mx-quad-title">Niedriges Interesse, hoher Einfluss</p> <div class="cc-mx-quad-items">Großhandelsketten, Investoren</div> </div> <div class="cc-mx-quad"> <p class="cc-mx-quad-title">Niedriges Interesse & Einfluss</p> <div class="cc-mx-quad-items">Logistik-Unternehmen (Routine)</div> </div> </div> </div>

<style> .cc-erg-container { font-family:Trispace,sans-serif; background-color: #150D0C; padding: 2rem; border-radius: 8px; max-width: 100%; color: #1F2937; } .cc-erg-header { margin-bottom: 2rem; text-align:left; } .cc-erg-title { font-size: 1.5rem; font-weight: 600; margin-bottom: 0.5rem; color: #F1EBC9; } .cc-erg-subtitle { font-size: 0.95rem; color: rgba(241,235,201,0.55); } .cc-erg-cards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.5rem; } .cc-erg-card { background: white; border: 1px solid #2A2020; border-radius: 6px; padding: 1.5rem; transition: all 0.3s ease; position: relative; } .cc-erg-card:hover { box-shadow: 0 8px 20px rgba(241,235,201,0.15); } .cc-erg-card-icon { font-size: 2rem; margin-bottom: 0.75rem; } .cc-erg-card-title { font-size: 1.1rem; font-weight: 600; margin-bottom: 0.5rem; color: #1F2937; } .cc-erg-card-desc { font-size: 0.9rem; color: #6B7280; line-height: 1.5; } @media(max-width:767px){[class*='-grid'],[class*='-pillars'],[class*='-phases'],[class*='-row'],[class*='-flow'],[class*='-metrics'],[class*='-principles'],[class*='-cards'],[class*='-deliverables'],[class*='ux-']{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}}</style> <div class="cc-erg-container"> <div class="cc-erg-header"> <h3 class="cc-erg-title">Ergebnis & Wirkung</h3> <p class="cc-erg-subtitle">Messbare Erfolge der Kampagne</p> </div> <div class="cc-erg-cards-grid"> <div class="cc-erg-card"> <div class="cc-erg-card-icon">102%</div> <h4 class="cc-erg-card-title">User Engagement</h4> <p class="cc-erg-card-desc">Steigerung der Interaktion durch Community-fokussiertes Design</p> </div> <div class="cc-erg-card"> <div class="cc-erg-card-icon">250K</div> <h4 class="cc-erg-card-title">Reach</h4> <p class="cc-erg-card-desc">Organische Reichweite in Zielgruppen</p> </div> <div class="cc-erg-card"> <div class="cc-erg-card-icon">78%</div> <h4 class="cc-erg-card-title">Conversion</h4> <p class="cc-erg-card-desc">Steigerung von Verkaufsabschlüssen</p> </div> </div> </div>

<style> .cc-ds{width:100%;background:#150D0C;padding:32px 0;font-family:Trispace,sans-serif} .cc-ds-wrap{max-width:800px;margin:0 auto;padding:0 24px} .cc-ds-title{font-size:17px;font-weight:700;color:#F1EBC9;margin:0 0 16px 0;text-align:left} .cc-ds-subtitle{font-size:13px;color:rgba(241,235,201,.55);margin:0 0 24px 0;text-align:left} .cc-ds-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:16px} .cc-ds-card{border:1px solid #2A2020;border-radius:12px;padding:16px;background:#1C1C1C;text-align:left;transition:all .2s ease} .cc-ds-card:hover{border-color:#3A3030;box-shadow:0 4px 12px rgba(241,235,201,.08)} .cc-ds-card-color{width:100%;height:60px;border-radius:8px;margin-bottom:12px;border:1px solid #2A2020} .cc-ds-card-label{font-weight:600;font-size:12px;color:#F1EBC9;margin:0 0 16px 0} .cc-ds-card-value{font-size:11px;color:rgba(241,235,201,.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-']{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}}</style> <div class="cc-ds"> <div class="cc-ds-wrap"> <h3 class="cc-ds-title">Design System - Farben</h3> <p class="cc-ds-subtitle">Nachhaltige & vertrauenserweckende Farbpalette</p> <div class="cc-ds-grid"> <div class="cc-ds-card"> <div class="cc-ds-card-color" style="background:#150D0C;border:2px solid #F1EBC9"></div> <p class="cc-ds-card-label">Primary</p> <p class="cc-ds-card-value">#150D0C</p> </div> <div class="cc-ds-card"> <div class="cc-ds-card-color" style="background:#F1EBC9"></div> <p class="cc-ds-card-label">Accent</p> <p class="cc-ds-card-value">#F1EBC9</p> </div> <div class="cc-ds-card"> <div class="cc-ds-card-color" style="background:#6B8E23"></div> <p class="cc-ds-card-label">Growth Green</p> <p class="cc-ds-card-value">#6B8E23</p> </div> <div class="cc-ds-card"> <div class="cc-ds-card-color" style="background:#D2B48C"></div> <p class="cc-ds-card-label">Earth Tone</p> <p class="cc-ds-card-value">#D2B48C</p> </div> </div> </div> </div>

<div data-tn style="display:none">Fazit</div><style> .cc-fz{max-width:100%;width:100%;background:#150D0C;padding:40px 24px;font-family:Trispace,sans-serif} .cc-fz-title{text-align:left;font-weight:700;font-size:17px;color:#F1EBC9;margin:0 0 20px} .cc-fz-content{max-width:640px;margin:0 auto} .cc-fz-text{font-size:13px;color:rgba(241,235,201,0.7);line-height:1.8;margin:0 0 16px;font-family:Trispace,sans-serif} .cc-fz-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:24px} .cc-fz-metric{background:#1C1C1C;border:1px solid #2A2020;border-radius:12px;padding:20px;text-align:left} .cc-fz-metric-val{font-weight:700;font-size:24px;color:#F1EBC9;margin:0 0 4px} .cc-fz-metric-lbl{font-size:11px;color:rgba(241,235,201,0.55);text-transform:uppercase;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-']{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}}</style> <div class="cc-fz"> <h3 class="cc-fz-title">Fazit & Ausblick</h3> <div class="cc-fz-content"> <p class="cc-fz-text">Chili and Change zeigt, wie eine beratungsintensive Dienstleistung digital klar und überzeugend präsentiert werden kann. Die modulare Webflow-Architektur ermöglicht dem Team eigenständige Content-Pflege — ohne technische Abhängigkeiten.</p> <p class="cc-fz-text">Durch gezielte Informationshierarchie und interaktive Elemente wird der Beratungsansatz greifbar. Die CMS-Struktur ist auf Wachstum ausgelegt: neue Leistungen, Case Studies oder Team-Mitglieder lassen sich ohne Redesign ergänzen.</p> <div class="cc-fz-metrics"> <div class="cc-fz-metric"><p class="cc-fz-metric-val">12+</p><p class="cc-fz-metric-lbl">Seiten</p></div> <div class="cc-fz-metric"><p class="cc-fz-metric-val">CMS</p><p class="cc-fz-metric-lbl">Eigenständige Pflege</p></div> <div class="cc-fz-metric"><p class="cc-fz-metric-val">100%</p><p class="cc-fz-metric-lbl">Webflow-nativ</p></div> </div></div></div>