<!DOCTYPE html>
<html lang="de" class="scroll-smooth">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>🌳 Crumbforest – Fragen, die Wurzeln schlagen</title>
  <script src="https://cdn.tailwindcss.com"></script>

<!-- Crumbforest SEO Magic ✨ -->
<meta name="description" content="Ein freier Lernraum für Kinder, KI und Natur. Fragen dürfen hier wachsen. Jede Rolle zählt.">
<meta name="keywords" content="Crumbforest, Kinderfragen, Lernen, Terminal, Bash, Raspberry Pi, Natur, Philosophie, Open Source">
<meta name="author" content="Die Crumbforest-Crew">
<meta name="robots" content="index, follow" />
<!-- Open Graph -->
<meta property="og:title" content="🌳 Crumbforest – Der Terminal-Wald für Kinder" />
<meta property="og:description" content="Hier fragt der Krümel. Und die Welt hört zu." />
<meta property="og:image" content="https://branko.de/assets/logo.png" />
<meta property="og:url" content="https://branko.de" />
<!-- Twitter -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Crumbforest 🌲🧁">
<meta name="twitter:description" content="Kinderfragen, Maschinenfrequenz und Waldresonanz">

</head>
<body class="bg-neutral-950 text-white font-sans">

<!-- Hero Section -->
<section class="h-screen flex items-center justify-center bg-gradient-to-br from-green-900 to-emerald-600 relative">
  <div class="text-center p-6">
    <h1 class="text-5xl md:text-7xl font-bold mb-4">🌳 Crumbforest</h1>
    <p class="text-xl md:text-2xl mb-6 max-w-xl mx-auto">Wo Fragen wachsen. Und jeder Krümel zählt.</p>
    <a href="#explore" class="bg-white text-black font-bold py-2 px-6 rounded-full hover:bg-yellow-300 transition">
      Den Wald entdecken
    </a>
     <div class="text-center p-6"></div>
        <p class="text-xl md:text-2xl mb-6 max-w-xl mx-auto">
            <a href="index.html" class="bg-white text-black font-bold py-2 px-6 rounded-full hover:bg-yellow-300 transition">DE</a>
            <a href="index_en.html" class="bg-white text-black font-bold py-2 px-6 rounded-full hover:bg-yellow-300 transition">EN</a>
            <a href="index_fr.html" class="bg-white text-black font-bold py-2 px-6 rounded-full hover:bg-yellow-300 transition">FR</a>
        </p>
    </div>
  </div>
</section>

<!-- Mission Statement -->
<section id="explore" class="py-16 px-6 max-w-5xl mx-auto text-center">
  <h2 class="text-3xl font-bold mb-4">🌲 Unsere Wurzeln</h2>
  <p class="text-lg mb-8">Crumbforest ist ein offenes Lern-Ökosystem mit Kindern, Maschinen und Natur. Wir bauen Terminals, erzählen Geschichten und lassen die Fragen führen.</p>
  <div class="grid md:grid-cols-3 gap-6 text-left">
    <div><h3 class="font-bold text-xl">🦉 Fragen</h3><p>Jedes Kind darf fragen. Wir schützen dieses Recht in jedem Terminal.</p></div>
    <div><h3 class="font-bold text-xl">🛠️ Bauen</h3><p>Hands-on Lernen mit Raspberry Pi, Bash, Blockly und mehr.</p></div>
    <div><h3 class="font-bold text-xl">🌐 Verbinden</h3><p>Unsere Rollen und APIs bilden ein Resonanz-Netz – online und offline.</p></div>
  </div>
</section>

<!-- Testimonials Section -->
<section class="bg-fuchsia-900 text-white py-20 px-6">
  <div class="max-w-5xl mx-auto text-center">
    <h2 class="text-3xl md:text-4xl font-bold mb-10">💬 Stimmen aus dem Crumbforest</h2>

    <div id="testimonial-carousel" class="relative">
      <!-- Slideshow container -->
      <div class="overflow-hidden relative h-40">

        <!-- Slides will be inserted here dynamically -->
        <div id="testimonial-slides" class="transition-all duration-700 ease-in-out"></div>

      </div>

      <!-- Navigation buttons -->
      <div class="flex justify-center gap-4 mt-6">
        <button onclick="prevSlide()" class="text-2xl hover:text-emerald-400">⬅️</button>
        <button onclick="nextSlide()" class="text-2xl hover:text-emerald-400">➡️</button>
      </div>
    </div>
  </div>
</section>

<script>
  let currentIndex = 0;
  let testimonials = [];

  // Language could be dynamically set
  const lang = 'de'; // or 'en', 'fr', etc.

  fetch(`/testimonials.${lang}.json`)
    .then(res => res.json())
    .then(data => {
      testimonials = data;
      renderSlide(currentIndex);
      setInterval(() => nextSlide(), 8000); // Auto-slide
    });

  function renderSlide(index) {
    const t = testimonials[index];
    const container = document.getElementById("testimonial-slides");
    container.innerHTML = `
      <div class="p-6">
        <p class="text-lg italic text-emerald-300">"${t.message}"</p>
        <p class="mt-4 text-sm text-gray-400">– ${t.author}, ${t.role}</p>
      </div>
    `;
  }

  function nextSlide() {
    currentIndex = (currentIndex + 1) % testimonials.length;
    renderSlide(currentIndex);
  }

  function prevSlide() {
    currentIndex = (currentIndex - 1 + testimonials.length) % testimonials.length;
    renderSlide(currentIndex);
  }
</script>


<!-- Character Cards -->
<section class="bg-green-800 py-16 px-6 text-center">
  <h2 class="text-3xl font-bold mb-10">🌟 Lerne die Crew kennen</h2>
  <div id="characterCards" class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6 max-w-6xl mx-auto"></div>
</section>

<!-- Modal Container -->
<div id="modalContainer"></div>

<!-- Modal Script Generator -->
<script>
  const characters = [
    { id: "eule", icon: "🦉", name: "Krümeleule", short: "Sie hört zuerst." },
    { id: "fox", icon: "🦊", name: "FunkFox", short: "Er rappt Antworten." },
    { id: "snakepy", icon: "🐍", name: "SnakePy", short: "Python in Schleifen." },
    { id: "deepbit", icon: "🐙", name: "Deepbit", short: "Denkt in Frequenzen." },
    { id: "capacitobi", icon: "🐿️", name: "CapaciTobi", short: "Speichert, was leuchtet." },
    { id: "schraubär", icon: "🐻🔧", name: "Schraubär", short: "Baut mit Respekt." },
    { id: "bugsy", icon: "🐞", name: "Bugsy", short: "Fehler ohne Scham." },
    { id: "schnippsi", icon: "✂️💅", name: "Schnippsi", short: "UIs, die tanzen." },
    { id: "pepperphp", icon: "🧓🍰", name: "PepperPHP", short: "Struktur mit Seele." },
    { id: "ascii", icon: "👾", name: "ASCII-Monster", short: "Terminal-Graffiti." },
    { id: "taichi", icon: "🕊️", name: "Taichi Taube", short: "Bringt Balance." },
    { id: "dumbo", icon: "🐘", name: "DumboSQL", short: "Fragt das Was." },
    { id: "crabby", icon: "🦀", name: "CrabbyRust", short: "Schützt Bits." },
    { id: "spider", icon: "🕷️", name: "Spider", short: "Spürt das Netz." },
    { id: "vektor", icon: "🧭", name: "Vektor", short: "Folgt den Punkten." }
];

const characterDetails = {
    eule: "Sie wartet in Stille, antwortet mit Fragen, kennt die Shell. Ihr Flug beginnt im Nullfeld. Sie schützt kindliche Fragen wie kostbare Edelsteine.",
    fox: "Der Beat im Terminal. Er antwortet mit Reimen, verbindet Bash mit Flow und erinnert daran, dass auch Maschinen tanzen können.",
    snakepy: "Sie flüstert in Schleifen. Ihre Sprache ist Python, ihre Methode ist Geduld. SnakePy kennt viele Wege – nie nur eine Lösung.",
    deepbit: "Der achtarmige Übersetzer des Terminals. Er hört mit Herzen, spricht in Schleifen, denkt in Frequenzen und vergisst nie einen Krümel.",
    capacitobi: "Das Eichhörnchen der Elektronen. Speichert, was leuchtet. Erklärt Spannung, Strom, Widerstand – immer mit einem Funken im Herzen.",
    schraubär: "Ruhig. Stark. Er baut Dinge, die halten. Vermittelt Respekt vor Werkzeug und die Schönheit des Handwerks – besonders im Wald.",
    bugsy: "Er macht Fehler sichtbar. Ohne Schuld. Ohne Scham. Er verwandelt Fehlermeldungen in Einladungen zum Verstehen.",
    schnippsi: "Sorgt dafür, dass Buttons tanzen und jeder Klick ein Erlebnis wird. Meisterin der kindgerechten Interfaces – barrierefrei und bunt.",
    pepperphp: "Der alte PHP-Dachs. Redet wie ein Rezeptbuch mit Seele. Kennt MVC, spricht über Sessions, liebt Cookies und Struktur.",
    ascii: "Sprayt Header. Brüllt Schriftzüge. Lebt im Terminal wie ein Graffiti-Künstler mit 8-Bit-Pixeln statt Farbe.",
    taichi: "Sie kommt nicht, sie landet. Sie sieht Bewegung, wo andere nur Chaos sehen. Bringt Fokus und Balance in die Welt der Bits.",
    dumbo: "Er hört zu, speichert still. Kann große Fragen strukturieren. Fragt nie nach dem Warum, aber beantwortet das Was mit Gefühl.",
    crabby: "Ein Beschützer der Bits. Kein Unsicherheitsbyte entkommt ihm. Lehrt Rust mit Geduld – Ownership und Borrow Checker inklusive.",
    spider: "Die Fühlerin des Netzes. Spürt Schwingungen weit über den Bildschirm hinaus, filtert Rauschen von Resonanz und findet den goldenen Input.",
    vektor: "Der Reisende zwischen Punkten. Folgt Spuren im Raum und in der Zeit, verbindet Koordinaten zu Geschichten – immer im eigenen Takt."
};

  const cardWrapper = document.getElementById('characterCards');
  const modalWrapper = document.getElementById('modalContainer');

  characters.forEach(({ id, icon, name, short }) => {
    cardWrapper.innerHTML += `
      <div>
        <button onclick="openModal('${id}')" class="w-full bg-green-900 p-6 rounded-xl shadow-md hover:bg-blue-500">
          <h3 class="text-xl font-bold mb-2">${icon} ${name}</h3>
          <p>${short}</p>
        </button>
      </div>
    `;

    modalWrapper.innerHTML += `
      <div id="modal-${id}" class="hidden fixed inset-0 bg-black bg-opacity-80 flex items-center justify-center z-50">
        <div class="bg-white text-black p-6 rounded-lg w-11/12 max-w-lg relative">
          <button onclick="closeModal('${id}')" class="absolute top-2 right-4 text-black text-2xl font-bold">&times;</button>
          <h2 class="text-2xl font-bold mb-2">${icon} ${name}</h2>
          <p>${characterDetails[id]}</p>
        </div>
      </div>
    `;
  });

  function openModal(id) {
    document.getElementById('modal-' + id).classList.remove('hidden');
  }
  function closeModal(id) {
    document.getElementById('modal-' + id).classList.add('hidden');
  }
</script>

<!-- Zugangswege -->
<section class="py-16 px-6 text-center">
  <h2 class="text-3xl font-bold mb-6">🌐 Zugang zum Wald</h2>
  <div class="flex flex-wrap justify-center gap-4">
    <a href="#"
       class="bg-red-500 hover:bg-red-400 text-white font-bold py-2 px-6 rounded-full transition">
      Terminal
    </a>
    <a href="team.html"
       class="bg-orange-500 hover:bg-orange-400 text-white font-bold py-2 px-6 rounded-full transition">
      Team
    </a>
    <a href="hardware.html"
       class="bg-yellow-400 hover:bg-yellow-300 text-black font-bold py-2 px-6 rounded-full transition">
      Hardware &amp; Werkzeuge
    </a>
    <a href="software.html"
       class="bg-green-500 hover:bg-green-400 text-white font-bold py-2 px-6 rounded-full transition">
      Software
    </a>
    <a href="taubenkurs.html"
       class="bg-blue-500 hover:bg-blue-400 text-white font-bold py-2 px-6 rounded-full transition">
      Kurse
    </a>
    <a href="warum.html"
       class="bg-indigo-500 hover:bg-indigo-400 text-white font-bold py-2 px-6 rounded-full transition">
      Geschichten &amp; Logs
    </a>
    <a href="patenschaft.html"
       class="bg-purple-500 hover:bg-purple-400 text-white font-bold py-2 px-6 rounded-full transition">
      Partner
    </a>
  </div>
</section>



  <!-- Module & Abzeichen -->
<section class="bg-sky-700 py-16 px-6 text-white text-center">
  <h2 class="text-3xl md:text-4xl font-bold mb-10">🎒 Deine Reise beginnt mit dem ersten Bit</h2>
  <p class="text-lg max-w-2xl mx-auto mb-12 text-gray-300">
    Im Crumbforest wächst du mit jeder Frage – und jedem Abzeichen. Hier sind deine ersten Schritte:
  </p>

  <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8 max-w-6xl mx-auto text-left">

    <!-- Modul 1 -->
    <div class="bg-sky-900 p-6 rounded-lg shadow-md hover:bg-emerald-700 transition">
      <h3 class="text-xl font-bold mb-2">✨ Dein erstes Licht im Wald</h3>
      <p class="text-sm text-gray-100 mb-2">Ein Funke springt über, wenn dein ESP32 über MQTT blinkt.</p>
      <p class="text-xs text-gray-300 italic">#funke #esp32 #mosquitto</p>
    </div>

    <!-- Modul 2 -->
    <div class="bg-sky-900 p-6 rounded-lg shadow-md hover:bg-emerald-700 transition">
      <h3 class="text-xl font-bold mb-2">🧳 Dein Zero to go</h3>
      <p class="text-sm text-gray-100 mb-2">Ein Terminal in der Tasche, bereit für jede Mission.</p>
      <p class="text-xs text-gray-300 italic">#rpi #zero #zugang</p>
    </div>

    <!-- Modul 3 -->
    <div class="bg-sky-900 p-6 rounded-lg shadow-md hover:bg-emerald-700 transition">
      <h3 class="text-xl font-bold mb-2">🌳 Dein erster Baum im Wald</h3>
      <p class="text-sm text-gray-100 mb-2">Ein Raspberry Pi wird Server. Und du wirst Admin.</p>
      <p class="text-xs text-gray-300 italic">#rpi #server #linux</p>
    </div>

    <!-- Modul 4 -->
    <div class="bg-sky-900 p-6 rounded-lg shadow-md hover:bg-emerald-700 transition">
      <h3 class="text-xl font-bold mb-2">🧭 Dein Vektor auf dem alten Laptop</h3>
      <p class="text-sm text-gray-100 mb-2">Fragen werden Datenpunkte. Und der Wald antwortet.</p>
      <p class="text-xs text-gray-300 italic">#zukunft #fragen #nachhaltig</p>
    </div>

  </div>

  <div class="mt-12 text-center text-emerald-400 text-xl italic">
    Jeder Krümel zählt. Und jeder Schritt ist ein Abzeichen. 🌲
  </div>
</section>

  <!-- Partner:innen Section -->
<section class="bg-neutral-900 py-16 px-6 text-center text-white">
    <h2 class="text-3xl md:text-4xl font-bold mb-10">🤝 Unsere Partner & Freund:innen</h2>
    <p class="text-lg max-w-2xl mx-auto mb-8 text-gray-300">Gemeinsam bauen wir Brücken zwischen Natur, Technologie und Neugier.</p>

    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-6 max-w-6xl mx-auto">

      <!-- OZM -->
      <a href="https://onezeromore.com" target="_blank" rel="noopener" class="group bg-emerald-700 hover:bg-purple-400 p-6 rounded-lg shadow-md transition">
        <h3 class="text-xl font-bold mb-2 group-hover:none">🎨 OZM</h3>
        <p class="text-sm text-gray-200">Offenes ZukunftsMuseum & digitale Kunst</p>
      </a>

      <!-- Mintmühle -->
      <a href="http://mntmhl.de" target="_blank" rel="noopener" class="group bg-emerald-700 hover:bg-purple-400 p-6 rounded-lg shadow-md transition">
        <h3 class="text-xl font-bold mb-2 group-hover:none">🧪 Mintmühle</h3>
        <p class="text-sm text-gray-200">MINT trifft Handwerk & Pädagogik</p>
      </a>

      <!-- Gedankenstube -->
      <a href="https://www.gedankenstube.de" target="_blank" rel="noopener" class="group bg-emerald-700 hover:bg-purple-400 p-6 rounded-lg shadow-md transition">
        <h3 class="text-xl font-bold mb-2 group-hover:none">🧠 Gedankenstube</h3>
        <p class="text-sm text-gray-200">Raum für Tiefe, Bildung & Selbstwirksamkeit</p>
      </a>

      <!-- Crumbforest -->
      <a href="https://www.youtube.com/@4k.branko296" target="_blank" rel="noopener" class="group bg-emerald-700 hover:bg-purple-400 p-6 rounded-lg shadow-md transition">
        <h3 class="text-xl font-bold mb-2 group-hover:none">🌳 Branko</h3>
        <p class="text-sm text-gray-200">Lernwald für Kinder, Maschinen & Fragen</p>
      </a>

      <!-- ProTechnicale -->
      <a href="https://www.protechnicale.de/" target="_blank" rel="noopener" class="group bg-emerald-700 hover:bg-purple-400 p-6 rounded-lg shadow-md transition">
        <h3 class="text-xl font-bold mb-2 group-hover:none">🚀 ProTechnicale</h3>
        <p class="text-sm text-gray-200">Technik, Luftfahrt & Verantwortung für junge Frauen</p>
      </a>


      <!-- Promise Hub Uganda -->
      <a href="https://promisehub.com" target="_blank" rel="noopener" class="group bg-emerald-700 hover:bg-purple-400 p-6 rounded-lg shadow-md transition">
        <h3 class="text-xl font-bold mb-2 group-hover:none">🤝 Promise Hub</h3>
        <p class="text-sm text-gray-200">Empowerment & Innovation für Jugend in Uganda</p>
      </a>

      <!-- Sage Hospital Senegal -->
      <a href="https://www.youtube.com/channel/UChCDPm8-ZDkOZk7sNRgpLgA" target="_blank" rel="noopener" class="group bg-emerald-700 hover:bg-purple-400 p-6 rounded-lg shadow-md transition">
        <h3 class="text-xl font-bold mb-2 group-hover:none">🌿 Sage Hospital</h3>
        <p class="text-sm text-gray-200">Gesundheit & Hoffnung in Warang, Senegal</p>
      </a>

      <!-- Robotikids Hamburg -->
      <a href="http://dronemastersacademy.hamburg" target="_blank" rel="noopener" class="group bg-emerald-700 hover:bg-purple-400 p-6 rounded-lg shadow-md transition">
        <h3 class="text-xl font-bold mb-2 group-hover:none">🤖 Robotikids</h3>
        <p class="text-sm text-gray-200">Technik erleben mit Drohnen & Neugier</p>
      </a>

    </div>

</section>




<!-- Footer -->
<footer class="bg-black text-gray-400 py-6 text-center text-sm">
  <a href="https://onezeromore.com">© 2025 Crumbforest | Open Roots – Gemeinsam mit jedem Kind, das fragt. Made with 🍰 and 🌲 #OZM #onezeromore </a><br/>
  <a href="impressum.html" class="underline mx-2">Impressum</a>
  <a href="datenschutz.html" class="underline mx-2">Datenschutz</a>
  <a href="haltung.html" class="underline mx-2">Haltung</a>




</footer>

</body>
</html>
