Vorsorge-Rechner

Q: "Warum 14 Tage Vorrat?"

"Das Bundesamt für Bevölkerungsschutz (BBK) empfiehlt mindestens 10 Tage Vorrat. Wir rechnen mit 14 Tagen, um einen zusätzlichen Puffer für längere Krisensituationen einzuplanen — zum Beispiel bei großflächigen Stromausfällen oder Lieferengpässen."

Q: "Warum 2 Liter Wasser pro Person und Tag?"

"2 Liter pro Person und Tag sind das absolute Minimum zum Trinken und für die Zubereitung von Mahlzeiten. Für Hygiene brauchst du zusätzliches Wasser. In der Praxis solltest du eher 3-4 Liter pro Tag einplanen."

Q: "Wie berechnet sich der Kalorienbedarf?"

"2.200 kcal pro Person und Tag ist der Durchschnittswert für einen Erwachsenen bei moderater Aktivität. In einer Krisensituation kann der Bedarf höher sein (Kälte, Stress). Kinder brauchen je nach Alter weniger."

Q: "Brauche ich wirklich alles auf der Liste?"

"Die Checkliste zeigt das empfohlene Minimum. Nicht jeder Haushalt braucht alles — aber je mehr du abgedeckt hast, desto besser bist du vorbereitet. Fang mit den Grundlagen an: Wasser, Nahrung, Licht."

1 2 3

Schritt 1: Dein Haushalt

  <div class="space-y-6">
    <div>
      <label for="personen" class="block text-sm font-semibold text-gray-700 mb-2">Wie viele Personen leben in deinem Haushalt?</label>
      <input type="number" id="personen" min="1" max="10" value="2"
        class="w-full max-w-xs px-4 py-3 border border-gray-300 rounded-lg text-lg focus:ring-2 focus:ring-vb-primary focus:border-vb-primary outline-none transition-all">
      <p class="text-sm text-gray-500 mt-1">Inklusive Kinder</p>
    </div>

    <div>
      <label class="flex items-center gap-3 cursor-pointer group">
        <input type="checkbox" id="haustiere"
          class="w-5 h-5 rounded border-gray-300 text-vb-primary focus:ring-vb-primary cursor-pointer">
        <span class="text-sm font-semibold text-gray-700 group-hover:text-gray-900 transition-colors">Haustiere vorhanden?</span>
      </label>
      <p class="text-sm text-gray-500 mt-1 ml-8">Hunde, Katzen oder andere Tiere, die versorgt werden müssen</p>
    </div>
  </div>

  <div class="mt-8 flex justify-end">
    <button onclick="goToStep(2)" class="px-6 py-3 bg-vb-primary text-white font-semibold rounded-lg hover:bg-vb-primary-dark transition-colors focus:ring-2 focus:ring-vb-primary focus:ring-offset-2 outline-none">
      Weiter &rarr;
    </button>
  </div>
</div>

Schritt 2: Wohnsituation

  <div class="space-y-6">
    <div>
      <p class="block text-sm font-semibold text-gray-700 mb-3">Wohnst du in einer Wohnung oder einem Haus?</p>
      <div class="flex gap-4">
        <label class="flex-1 cursor-pointer">
          <input type="radio" name="wohnart" value="wohnung" class="peer sr-only" checked>
          <div class="peer-checked:border-vb-primary peer-checked:bg-vb-primary/5 border-2 border-gray-200 rounded-xl p-4 text-center transition-all hover:border-gray-300">
            <div class="text-2xl mb-1">🏢</div>
            <span class="font-semibold text-gray-900">Wohnung</span>
          </div>
        </label>
        <label class="flex-1 cursor-pointer">
          <input type="radio" name="wohnart" value="haus" class="peer sr-only">
          <div class="peer-checked:border-vb-primary peer-checked:bg-vb-primary/5 border-2 border-gray-200 rounded-xl p-4 text-center transition-all hover:border-gray-300">
            <div class="text-2xl mb-1">🏡</div>
            <span class="font-semibold text-gray-900">Haus</span>
          </div>
        </label>
      </div>
    </div>

    <div id="stockwerk-container">
      <label for="stockwerk" class="block text-sm font-semibold text-gray-700 mb-2">In welchem Stockwerk?</label>
      <input type="number" id="stockwerk" min="0" max="20" value="1"
        class="w-full max-w-xs px-4 py-3 border border-gray-300 rounded-lg text-lg focus:ring-2 focus:ring-vb-primary focus:border-vb-primary outline-none transition-all">
      <p class="text-sm text-gray-500 mt-1">Erdgeschoss = 0</p>
    </div>
  </div>

  <div class="mt-8 flex justify-between">
    <button onclick="goToStep(1)" class="px-6 py-3 border border-gray-300 text-gray-700 font-semibold rounded-lg hover:bg-gray-50 transition-colors focus:ring-2 focus:ring-gray-300 focus:ring-offset-2 outline-none">
      &larr; Zurück
    </button>
    <button onclick="goToStep(3)" class="px-6 py-3 bg-vb-primary text-white font-semibold rounded-lg hover:bg-vb-primary-dark transition-colors focus:ring-2 focus:ring-vb-primary focus:ring-offset-2 outline-none">
      Weiter &rarr;
    </button>
  </div>
</div>

Schritt 3: Was hast du schon?

  <p class="text-gray-600 mb-6">Hake alles an, was du bereits zu Hause hast.</p>

  <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
    <label class="flex items-center gap-3 p-3 rounded-lg border border-gray-200 cursor-pointer hover:bg-gray-50 transition-colors">
      <input type="checkbox" data-equip="taschenlampe" class="equip-check w-5 h-5 rounded border-gray-300 text-vb-primary focus:ring-vb-primary cursor-pointer">
      <div>
        <span class="font-medium text-gray-900">Taschenlampe</span>
        <p class="text-xs text-gray-500">mit Ersatzbatterien</p>
      </div>
    </label>

    <label class="flex items-center gap-3 p-3 rounded-lg border border-gray-200 cursor-pointer hover:bg-gray-50 transition-colors">
      <input type="checkbox" data-equip="kurbelradio" class="equip-check w-5 h-5 rounded border-gray-300 text-vb-primary focus:ring-vb-primary cursor-pointer">
      <div>
        <span class="font-medium text-gray-900">Kurbelradio</span>
        <p class="text-xs text-gray-500">UKW/DAB+ Empfang</p>
      </div>
    </label>

    <label class="flex items-center gap-3 p-3 rounded-lg border border-gray-200 cursor-pointer hover:bg-gray-50 transition-colors">
      <input type="checkbox" data-equip="powerbank" class="equip-check w-5 h-5 rounded border-gray-300 text-vb-primary focus:ring-vb-primary cursor-pointer">
      <div>
        <span class="font-medium text-gray-900">Powerbank</span>
        <p class="text-xs text-gray-500">mind. 10.000 mAh</p>
      </div>
    </label>

    <label class="flex items-center gap-3 p-3 rounded-lg border border-gray-200 cursor-pointer hover:bg-gray-50 transition-colors">
      <input type="checkbox" data-equip="campingkocher" class="equip-check w-5 h-5 rounded border-gray-300 text-vb-primary focus:ring-vb-primary cursor-pointer">
      <div>
        <span class="font-medium text-gray-900">Campingkocher</span>
        <p class="text-xs text-gray-500">mit Brennstoff</p>
      </div>
    </label>

    <label class="flex items-center gap-3 p-3 rounded-lg border border-gray-200 cursor-pointer hover:bg-gray-50 transition-colors">
      <input type="checkbox" data-equip="wasserfilter" class="equip-check w-5 h-5 rounded border-gray-300 text-vb-primary focus:ring-vb-primary cursor-pointer">
      <div>
        <span class="font-medium text-gray-900">Wasserfilter</span>
        <p class="text-xs text-gray-500">z.B. Sawyer, LifeStraw</p>
      </div>
    </label>

    <label class="flex items-center gap-3 p-3 rounded-lg border border-gray-200 cursor-pointer hover:bg-gray-50 transition-colors">
      <input type="checkbox" data-equip="erstehilfe" class="equip-check w-5 h-5 rounded border-gray-300 text-vb-primary focus:ring-vb-primary cursor-pointer">
      <div>
        <span class="font-medium text-gray-900">Erste-Hilfe-Set</span>
        <p class="text-xs text-gray-500">Verbandsmaterial, Medikamente</p>
      </div>
    </label>

    <label class="flex items-center gap-3 p-3 rounded-lg border border-gray-200 cursor-pointer hover:bg-gray-50 transition-colors">
      <input type="checkbox" data-equip="wasservorrat" class="equip-check w-5 h-5 rounded border-gray-300 text-vb-primary focus:ring-vb-primary cursor-pointer">
      <div>
        <span class="font-medium text-gray-900">Wasservorrat</span>
        <p class="text-xs text-gray-500">eingelagertes Trinkwasser</p>
      </div>
    </label>

    <label class="flex items-center gap-3 p-3 rounded-lg border border-gray-200 cursor-pointer hover:bg-gray-50 transition-colors">
      <input type="checkbox" data-equip="bargeld" class="equip-check w-5 h-5 rounded border-gray-300 text-vb-primary focus:ring-vb-primary cursor-pointer">
      <div>
        <span class="font-medium text-gray-900">Bargeld</span>
        <p class="text-xs text-gray-500">kleine Scheine und Münzen</p>
      </div>
    </label>
  </div>

  <div class="mt-8 flex justify-between">
    <button onclick="goToStep(2)" class="px-6 py-3 border border-gray-300 text-gray-700 font-semibold rounded-lg hover:bg-gray-50 transition-colors focus:ring-2 focus:ring-gray-300 focus:ring-offset-2 outline-none">
      &larr; Zurück
    </button>
    <button onclick="berechnen()" class="px-6 py-3 bg-vb-accent text-gray-900 font-bold rounded-lg hover:bg-amber-400 transition-colors focus:ring-2 focus:ring-vb-accent focus:ring-offset-2 outline-none shadow-md">
      Meine Checkliste erstellen
    </button>
  </div>
</div>

<!-- Vorrat Berechnung -->
<div class="bg-white border border-gray-200 rounded-xl p-6 md:p-8 shadow-sm mb-6">
  <h2 class="text-xl md:text-2xl font-bold text-gray-900 mb-6 flex items-center gap-3">
    <div class="w-10 h-10 bg-blue-50 rounded-lg flex items-center justify-center">
      <svg class="w-5 h-5 text-vb-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 7h6m0 10v-3m-3 3h.01M9 17h.01M9 14h.01M12 14h.01M15 11h.01M12 11h.01M9 11h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z"/></svg>
    </div>
    Dein persönlicher Vorratsbedarf
  </h2>

  <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
    <div class="bg-blue-50 rounded-xl p-5">
      <div class="flex items-center gap-2 mb-2">
        <svg class="w-5 h-5 text-vb-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z"/></svg>
        <h3 class="font-bold text-gray-900">Trinkwasser</h3>
      </div>
      <p class="text-3xl font-extrabold text-vb-primary" id="result-wasser">–</p>
      <p class="text-sm text-gray-600 mt-1" id="result-wasser-detail"></p>
    </div>

    <div class="bg-amber-50 rounded-xl p-5">
      <div class="flex items-center gap-2 mb-2">
        <svg class="w-5 h-5 text-amber-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 100 4 2 2 0 000-4z"/></svg>
        <h3 class="font-bold text-gray-900">Nahrung</h3>
      </div>
      <p class="text-3xl font-extrabold text-amber-600" id="result-nahrung">–</p>
      <p class="text-sm text-gray-600 mt-1" id="result-nahrung-detail"></p>
    </div>
  </div>

  <!-- Haustier-Hinweis -->
  <div id="result-haustier" class="hidden mt-4 bg-purple-50 border border-purple-200 rounded-xl p-4">
    <p class="text-sm text-purple-800 font-medium">
      <strong>Haustiere nicht vergessen:</strong> Plane zusätzlich Futter und Wasser für deine Tiere ein. Pro Hund ca. 0,5 L Wasser und 400 g Futter pro Tag, pro Katze ca. 0,2 L Wasser und 200 g Futter pro Tag.
    </p>
  </div>
</div>

<!-- Warnungen -->
<div id="result-warnungen" class="hidden mb-6 space-y-3"></div>

<!-- Fehlende Ausrüstung -->
<div id="result-missing" class="hidden bg-white border border-gray-200 rounded-xl p-6 md:p-8 shadow-sm mb-6">
  <h2 class="text-xl md:text-2xl font-bold text-gray-900 mb-2 flex items-center gap-3">
    <div class="w-10 h-10 bg-red-50 rounded-lg flex items-center justify-center">
      <svg class="w-5 h-5 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L4.082 16.5c-.77.833.192 2.5 1.732 2.5z"/></svg>
    </div>
    Das fehlt dir noch
  </h2>
  <p class="text-gray-600 mb-5">Diese Ausrüstung solltest du dir noch besorgen:</p>
  <div id="missing-list" class="space-y-3"></div>
</div>

<!-- Alles vorhanden -->
<div id="result-complete" class="hidden bg-white border border-green-200 rounded-xl p-6 md:p-8 shadow-sm mb-6">
  <div class="flex items-center gap-3">
    <div class="w-10 h-10 bg-green-50 rounded-lg flex items-center justify-center">
      <svg class="w-6 h-6 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
    </div>
    <div>
      <h3 class="font-bold text-green-800 text-lg">Sehr gut vorbereitet!</h3>
      <p class="text-green-700">Du hast bereits alle wichtigen Ausrüstungsgegenstände. Denke daran, deinen Vorrat regelmäßig zu prüfen.</p>
    </div>
  </div>
</div>

<!-- Weiterführende Links -->
<div class="bg-gray-50 border border-gray-200 rounded-xl p-6 md:p-8">
  <h3 class="font-bold text-gray-900 mb-4">So gehst du weiter vor</h3>
  <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
    <a href="/checklisten/krisenvorsorge-checkliste/" class="flex items-center gap-3 p-4 bg-white rounded-lg border border-gray-200 hover:border-vb-primary hover:shadow-sm transition-all group">
      <svg class="w-5 h-5 text-gray-400 group-hover:text-vb-primary transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"/></svg>
      <span class="font-medium text-gray-900 group-hover:text-vb-primary transition-colors">Komplette Krisenvorsorge Checkliste</span>
    </a>
    <a href="/checklisten/lebensmittelvorrat/" class="flex items-center gap-3 p-4 bg-white rounded-lg border border-gray-200 hover:border-vb-primary hover:shadow-sm transition-all group">
      <svg class="w-5 h-5 text-gray-400 group-hover:text-vb-primary transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 100 4 2 2 0 000-4z"/></svg>
      <span class="font-medium text-gray-900 group-hover:text-vb-primary transition-colors">Lebensmittelvorrat Checkliste</span>
    </a>
    <a href="/checklisten/notfallrucksack/" class="flex items-center gap-3 p-4 bg-white rounded-lg border border-gray-200 hover:border-vb-primary hover:shadow-sm transition-all group">
      <svg class="w-5 h-5 text-gray-400 group-hover:text-vb-primary transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4"/></svg>
      <span class="font-medium text-gray-900 group-hover:text-vb-primary transition-colors">Notfallrucksack packen</span>
    </a>
    <a href="/checklisten/blackout-checkliste/" class="flex items-center gap-3 p-4 bg-white rounded-lg border border-gray-200 hover:border-vb-primary hover:shadow-sm transition-all group">
      <svg class="w-5 h-5 text-gray-400 group-hover:text-vb-primary transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
      <span class="font-medium text-gray-900 group-hover:text-vb-primary transition-colors">Blackout Checkliste</span>
    </a>
  </div>
</div>

<!-- Nochmal berechnen -->
<div class="mt-6 text-center">
  <button onclick="zuruecksetzen()" class="text-vb-primary hover:underline font-medium">
    Neue Berechnung starten
  </button>
</div>

Häufige Fragen

Warum 14 Tage Vorrat?

Das Bundesamt für Bevölkerungsschutz (BBK) empfiehlt mindestens 10 Tage Vorrat. Wir rechnen mit 14 Tagen, um einen zusätzlichen Puffer für längere Krisensituationen einzuplanen — zum Beispiel bei großflächigen Stromausfällen oder Lieferengpässen.

Warum 2 Liter Wasser pro Person und Tag?

2 Liter pro Person und Tag sind das absolute Minimum zum Trinken und für die Zubereitung von Mahlzeiten. Für Hygiene brauchst du zusätzliches Wasser. In der Praxis solltest du eher 3-4 Liter pro Tag einplanen.

Wie berechnet sich der Kalorienbedarf?

2.200 kcal pro Person und Tag ist der Durchschnittswert für einen Erwachsenen bei moderater Aktivität. In einer Krisensituation kann der Bedarf höher sein (Kälte, Stress). Kinder brauchen je nach Alter weniger.

Brauche ich wirklich alles auf der Liste?

Die Checkliste zeigt das empfohlene Minimum. Nicht jeder Haushalt braucht alles — aber je mehr du abgedeckt hast, desto besser bist du vorbereitet. Fang mit den Grundlagen an: Wasser, Nahrung, Licht.