> ## Documentation Index
> Fetch the complete documentation index at: https://docs.delicious-data.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Erste Schritte

> Steuere dein Geschäft mit KI-gestützten Analysen — vom ersten Login bis zur automatisierten Wochenanalyse

export const Bubble = ({ children }) => (
  <div style={{ display: 'flex', justifyContent: 'flex-end', marginBottom: '1rem' }}>
    <p style={{ background: '#F3F4F6', border: '1px solid #E5E7EB', borderRadius: '1rem 1rem 0.25rem 1rem', padding: '0.75rem 1rem', maxWidth: '80%', margin: 0 }}>{children}</p>
  </div>
)

export const AiBubble = ({ children }) => (
  <div style={{ display: 'flex', justifyContent: 'flex-start', marginBottom: '1rem' }}>
    <div style={{ background: '#FFFFFF', border: '1px solid #E5E7EB', borderRadius: '1rem 1rem 1rem 0.25rem', padding: '0.75rem 1rem', maxWidth: '80%', margin: 0 }}>{children}</div>
  </div>
)

export const TypingDots = () => (
  <div style={{ display: 'flex', justifyContent: 'flex-start', marginBottom: '1rem' }}>
    <div className="typing-dots" style={{ background: '#FFFFFF', border: '1px solid #E5E7EB', borderRadius: '1rem 1rem 1rem 0.25rem', padding: '0.75rem 1rem', display: 'flex', gap: '4px', alignItems: 'center' }}>
      <span className="dot dot-1" style={{ width: 6, height: 6, borderRadius: '50%', background: '#9CA3AF', display: 'inline-block' }} />
      <span className="dot dot-2" style={{ width: 6, height: 6, borderRadius: '50%', background: '#9CA3AF', display: 'inline-block' }} />
      <span className="dot dot-3" style={{ width: 6, height: 6, borderRadius: '50%', background: '#9CA3AF', display: 'inline-block' }} />
    </div>
  </div>
)

export const ChatStyles = () => {
  if (typeof document === 'undefined') return null
  try {
    if (!document.getElementById('chat-anim-styles')) {
      const s = document.createElement('style')
      s.id = 'chat-anim-styles'
      s.textContent = [
        '.chat-demo { padding-bottom:0.25rem !important; }',
        '.chat-msg { opacity:0; transition:opacity 0.5s ease; }',
        '.chat-typing { opacity:0; transition:opacity 0.3s ease; height:0; overflow:visible; }',
        '.chat-msg.visible, .chat-typing.visible { opacity:1; }',
        '@keyframes dotBounce { 0%,80%,100% { transform:translateY(0); } 40% { transform:translateY(-4px); } }',
        '.chat-typing.visible .dot { animation:dotBounce 1.2s ease infinite; }',
        '.chat-typing.visible .dot-2 { animation-delay:0.15s; }',
        '.chat-typing.visible .dot-3 { animation-delay:0.3s; }',
      ].join(' ')
      document.head.appendChild(s)
    }
    const init = () => {
      document.querySelectorAll('.chat-demo').forEach(container => {
        if (container.dataset.animated) return
        container.dataset.animated = '1'
        const showAll = () => {
          container.querySelectorAll('.chat-msg').forEach(el => el.classList.add('visible'))
          container.querySelectorAll('.chat-typing').forEach(el => el.classList.remove('visible'))
        }
        let fallback = null
        const observer = new IntersectionObserver((entries) => {
          if (entries[0].isIntersecting) {
            if (fallback) clearTimeout(fallback)
            fallback = setTimeout(showAll, 10000)
            observer.disconnect()
            const steps = []
            container.querySelectorAll('[data-step]').forEach(el => {
              steps.push({ el, step: parseInt(el.dataset.step), type: el.dataset.type })
            })
            steps.sort((a, b) => a.step - b.step)
            let delay = 0
            steps.forEach(({ el, type }) => {
              if (type === 'typing') {
                setTimeout(() => el.classList.add('visible'), delay)
                delay += 1200
                setTimeout(() => el.classList.remove('visible'), delay)
                delay += 300
              } else {
                setTimeout(() => el.classList.add('visible'), delay)
                delay += 800
              }
            })
          }
        }, { threshold: 0.1, rootMargin: '-20% 0px -20% 0px' })
        observer.observe(container)
      })
    }
    if (document.readyState === 'complete') {
      setTimeout(init, 200)
    } else {
      window.addEventListener('load', () => setTimeout(init, 200), { once: true })
    }
  } catch (e) {
    document.querySelectorAll('.chat-msg, .chat-typing').forEach(el => { el.style.opacity = '1'; })
  }
  return null
}

Delicious Data gibt dir zwei Werkzeuge für datengetriebene Entscheidungen:
den **[BI-Assistenten](/bakeries/business_intelligence/ki_chat/overview_de)** für KI-gestützte Analysen im Gespräch
und **[Dashboards](/bakeries/business_intelligence/dashboards/overview_de)** als permanente visuelle Übersichten.

<CardGroup cols={2}>
  <Card title="BI-Assistent" icon="sparkles" href="/bakeries/business_intelligence/ki_chat/overview_de">
    Stell Fragen, lass Berichte erstellen, erkenne Muster — alles im Gespräch
  </Card>

  <Card title="Dashboards" icon="table-columns" href="/bakeries/business_intelligence/dashboards/overview_de">
    Permanente Ansichten für euer Geschäft — Filter, Berichte, E-Mail-Abos
  </Card>

  <Card title="Automatisierung" icon="bolt" href="/bakeries/business_intelligence/ki_chat/quick_actions_de">
    Wiederkehrende Analysen automatisch ausführen und per E-Mail liefern
  </Card>

  <Card title="Metriken" icon="chart-mixed" href="/bakeries/business_intelligence/metrics/overview_de">
    Alle verfügbaren Kennzahlen und wie sie berechnet werden
  </Card>
</CardGroup>

## In 5 Minuten loslegen

<Steps>
  <Step title="Dem BI-Assistenten eine Frage stellen">
    Öffne den BI-Assistenten über die Navigation oder klicke auf `KI-Einblicke` oben in einem Dashboard.
    Tippe eine Frage ins Eingabefeld — der BI-Assistent analysiert deine Daten, erstellt Berichte
    und liefert eine Einordnung. Stell Folgefragen, um tiefer einzutauchen:

    <div className="chat-demo" style={{ background: '#F9FAFB', border: '1px solid #E5E7EB', borderRadius: '0.75rem', padding: '1.25rem 1rem', margin: '1rem 0' }}>
      <div className="chat-msg" data-step="1" data-type="msg">
        <Bubble>Wie war letzte Woche im Vergleich zur Vorwoche?</Bubble>
      </div>

      <div className="chat-typing" data-step="2" data-type="typing">
        <TypingDots />
      </div>

      <div className="chat-msg" data-step="3" data-type="msg">
        <AiBubble><p style={{ margin: 0 }}><strong>📊 Letzte Woche vs. Vorwoche</strong><br /><br />💰 Umsatz: <strong>47.200 EUR</strong> (+3,2%)<br />📦 Absatz: <strong>12.400 Stk.</strong> (+1,8%)<br />🏆 Top: Marktplatz <strong>+12%</strong> · 📉 Schwächster: Bahnhof <strong>-8%</strong><br /><br />⚠️ An <strong>8 von 21 Verbrauchsorten</strong> war Donnerstag der schwächste Tag. Soll ich aufschlüsseln, welche Artikel betroffen waren?</p></AiBubble>
      </div>

      <div className="chat-msg" data-step="4" data-type="msg">
        <Bubble>Ja, welche Artikel haben am meisten verloren?</Bubble>
      </div>

      <div className="chat-typing" data-step="5" data-type="typing">
        <TypingDots />
      </div>

      <div className="chat-msg" data-step="6" data-type="msg">
        <AiBubble><p style={{ margin: 0 }}><strong>📉 Donnerstag — betroffene Artikel</strong><br /><br />🥐 Brötchen: <strong>-14%</strong><br />🧁 Feingebäck: <strong>-11%</strong><br />🍞 Brot: <strong>+1%</strong> (stabil)<br /><br />Das Muster betrifft primär Frühstücksartikel. Soll ich prüfen, ob die Bestellmengen an den betroffenen Verbrauchsorten zu niedrig waren?</p></AiBubble>
      </div>
    </div>
  </Step>

  <Step title="Chat Prompt starten">
    Geh zurück zur BI-Assistent Startseite. Dort siehst du [Chat Prompts](/bakeries/business_intelligence/ki_chat/quick_actions_de) —
    vorgefertigte Analysen, die mit einem Klick eine vollständige Auswertung starten.

    Klick auf einen und schau dir an, was der BI-Assistent daraus macht. Du kannst danach
    ganz normal weiter chatten und Folgefragen stellen.
  </Step>

  <Step title="Dashboard erkunden">
    Gehe zum Bereich **Analyse** in der App. Dort findest du vorkonfigurierte Dashboards,
    die du sofort nutzen kannst.

    <Frame style={{ maxWidth: '500px' }}>
      <img src="https://mintcdn.com/deliciousdata/1E8qOcWCwnxHIwYI/images/desktop_dashboard.jpeg?fit=max&auto=format&n=1E8qOcWCwnxHIwYI&q=85&s=1ecbbce9952381ab6dfe4a6e4211b033" style={{ borderRadius: '0.5rem' }} width="4250" height="2548" data-path="images/desktop_dashboard.jpeg" />
    </Frame>

    Beginne mit dem **Unternehmensübersicht**-Dashboard für deine wichtigsten Metriken auf einen Blick.
    Nutze die Filter oben, um dich auf bestimmte Zeiträume, Verbrauchsorte oder Artikel zu konzentrieren.
  </Step>
</Steps>

## Dein Team einladen

Bevor du weiter einsteigst: lade dein Team ein. Je früher alle Zugriff haben, desto schneller wird Delicious Data Teil eures Alltags.

<Card title="Benutzer anlegen" icon="users" href="/bakeries/account/users_de">
  Teammitglieder einladen, Rollen zuweisen und festlegen, wer welche Verbrauchsorte sieht
</Card>

## Weiter vertiefen

<CardGroup cols={2}>
  <Card title="Analysen automatisieren" icon="bolt" href="/bakeries/business_intelligence/ki_chat/quick_actions_de">
    Standardisiere wiederkehrende Analysen und lass sie automatisch an dein Team liefern
  </Card>

  <Card title="Kundenkontext einrichten" icon="brain" href="/bakeries/business_intelligence/ki_chat/kundenkontext_de">
    Gib dem BI-Assistenten Hintergrundwissen über euer Geschäft — Ziele, Begriffe, Regeln
  </Card>

  <Card title="Eigenes Dashboard bauen" icon="table-columns" href="/bakeries/business_intelligence/dashboards/overview_de#dashboards-erstellen">
    Erstelle eine Ansicht, die genau zu deinen Anforderungen passt
  </Card>

  <Card title="Bessere Prompts" icon="pen" href="/bakeries/business_intelligence/ki_chat/prompts_de">
    Lerne die Bausteine eines guten Prompts — für präzisere Ergebnisse
  </Card>

  <Card title="Bestellautopilot" icon="robot" href="/bakeries/order_automation/orders/overview_de">
    KI-gestützte Bestellvorschläge — die gleichen Daten, die hier analysiert werden, nutzt der Autopilot zum Bestellen
  </Card>
</CardGroup>

## Free vs. Pro

Delicious Data gibt es in zwei Plänen. Features mit <a href="/bakeries/account/plans_de" style={{ background: 'linear-gradient(135deg, #7C3AED, #2563EB)', color: 'white', padding: '2px 8px', borderRadius: '9999px', fontSize: '0.75rem', fontWeight: 600, verticalAlign: 'middle', marginLeft: '0.5rem', textDecoration: 'none' }}>Pro</a> erfordern ein Upgrade.

<Card title="Pläne vergleichen" icon="gem" href="/bakeries/account/plans_de">
  Alle Unterschiede auf einen Blick — und warum sich Pro lohnt
</Card>

<ChatStyles />