banyaro/backend/static/landing.html

1061 lines
42 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ban Yaro — Die Hunde-App für Deutschland, Österreich & Schweiz</title>
<meta name="description" content="Ban Yaro: Die kostenlose All-in-One Hunde-App für DACH. Tagebuch, Giftköder-Alarm, Training mit KI, Forum, Wurfbörse, Stammbaum, Inzucht-Check — DSGVO-konform, offline-fähig, ohne App Store.">
<meta name="keywords" content="Hunde App, Hunde Community, Wurfbörse, Züchter, Welpen kaufen, Stammbaum Hund, Inzuchtkoeffizient, Hundezucht, Impfpass Hund, Giftköder Alarm, Gassi Community, Hundetraining App, Hunde Forum, Hunde KI, Hundefilm Datenbank, Welpen Marktplatz">
<meta name="robots" content="index, follow">
<link rel="canonical" href="https://banyaro.app/info">
<!-- Open Graph -->
<meta property="og:type" content="website">
<meta property="og:title" content="Ban Yaro — Die Hunde-App für Deutschland, Österreich & Schweiz">
<meta property="og:description" content="Tagebuch, Giftköder-Alarm, KI-Training, Forum, Wurfbörse, Stammbaum, Inzucht-Check — alles in einer DSGVO-konformen App ohne App Store. Kostenlos.">
<meta property="og:url" content="https://banyaro.app/info">
<meta property="og:image" content="https://banyaro.app/icons/icon-512.png">
<meta property="og:locale" content="de_DE">
<meta property="og:site_name" content="Ban Yaro">
<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Ban Yaro — Die Hunde-App für DACH">
<meta name="twitter:description" content="Giftköder-Alarm, KI-Training, Forum, Wurfbörse, Stammbaum, Inzucht-Check — kostenlos, DSGVO-konform, ohne App Store.">
<meta name="twitter:image" content="https://banyaro.app/icons/icon-512.png">
<!-- Structured Data -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "MobileApplication",
"name": "Ban Yaro",
"alternateName": "Ban Yaro — Die Hunde-Plattform",
"description": "Ban Yaro ist die kostenlose, deutschsprachige All-in-One Hunde-App für Hundebesitzer und Züchter. Tagebuch, Impfpass, Wurfbörse, Stammbaum, Inzucht-Koeffizient, Tierschutz-Check, Giftköder-Alarm, Gassi-Community — DSGVO-konform, ohne App Store.",
"url": "https://banyaro.app",
"applicationCategory": "LifestyleApplication",
"applicationSubCategory": "PetApplication",
"operatingSystem": "iOS, Android, Web",
"inLanguage": "de",
"availableOnDevice": "Smartphone, Tablet",
"offers": {
"@type": "Offer",
"price": "0",
"priceCurrency": "EUR",
"availability": "https://schema.org/InStock"
},
"publisher": {
"@type": "Organization",
"name": "Ban Yaro",
"url": "https://banyaro.app"
},
"featureList": [
"Digitales Hunde-Tagebuch mit Fotos, Videos und GPS",
"Kalender-, Karten- und Medien-Ansicht im Tagebuch",
"Digitaler Impfpass und Gesundheitsakte",
"Pflege-System mit 43 rassenspezifischen Tipps in 10 Kategorien",
"Giftköder-Alarm mit GPS und Push-Benachrichtigungen",
"Zecken-Warnung regelbasiert (Saison und Temperatur)",
"Wetter-Chip in der App (Open-Meteo, ohne API-Key)",
"Gassi-Community und GPS-Routen aufzeichnen",
"Täglicher Routenvorschlag (2, 4 oder 6 km via OpenRouteService)",
"Hundesitting-Vermittlung (nur 8% Provision)",
"NFC-Halsband-Tags mit öffentlichem Hunde-Profil",
"Forum öffentlich lesbar, schreiben nach E-Mail-Verifikation",
"1003 Hunderassen Wikipedia-grounded und KI-angereichert",
"Rassen-Wiki mit Community-Fotos und Moderation",
"Verlorener Hund Alarm mit GPS-Position",
"Offline-Modus via Service Worker (3 Stufen)",
"Symptom-Checker (KI, kostenlos)",
"104 Trainingsübungen in Datenbank mit Schwierigkeitsgraden",
"Trainings-Logging: Wiederholungen, Erfolgsquote, Stimmung",
"Virtueller KI-Trainer mit täglichen Übungsempfehlungen",
"Wöchentlicher KI-Lober jeden Montag",
"Trainings-Streaks und Trainingskalender",
"Kommandos und Fähigkeiten im Hundeprofil",
"Events-Kalender (Agility, Ausstellungen, lokale Veranstaltungen)",
"Wurfbörse mit Filtersuche nach Rasse und Status",
"Züchter-Profile mit verifizierten Gesundheitstests und Gentests",
"Stammbaum-Visualisierung bis 4 Generationen",
"Inzucht-Koeffizient nach Wright's Formel mit Ampel-Bewertung",
"Probeverpaarung mit IK-Simulation und genetischer Risikoanalyse",
"Tierschutz-Check automatisch bei jeder Verpaarung",
"KI-Züchter-Assistenz: Wurfankündigungen, Genetik, Paarungsanalyse",
"Datenexport als HTML und ODS",
"Hunde-Filmdatenbank: 68 Filme, Serien und Dokumentationen sortier- und filterbar",
"Filmdatenbank-Feature: Stirbt der Hund? — Taschentuch-Warnung",
"Berühmte Hunde der Geschichte",
"Hund des Monats Community-Abstimmung",
"Push-Benachrichtigungen (VAPID, ohne Drittanbieter)",
"Freundschaften und Direktnachrichten",
"Social-Media-Manager Luna (KI-generierte Posts für Instagram und TikTok)",
"Notizblock mit KI-Analyse-Funktion",
"Erste-Hilfe-Ratgeber für häufige Notfälle",
"Hunde-Knigge (Begegnungen, ÖPNV, Leinenpflicht, Haftpflicht)",
"Admin-Panel mit Moderation, Outreach-Mailing und Statistiken",
"Gassi-Score mit 7-Tage-Wetter und persönlichen Wetter-Rekorden",
"Ernährungsrechner, BARF-Guide und Giftliste",
"Hunde-Persönlichkeitstest mit Trainingstipps",
"Reise-Checkliste und EU-Länder-Einreiseregeln",
"Integrierte Hilfe und FAQ ohne App Store"
],
"screenshot": "https://banyaro.app/icons/icon-512.png",
"softwareVersion": "1.2.1",
"datePublished": "2026-05-01",
"areaServed": ["DE", "AT", "CH"],
"audience": {
"@type": "Audience",
"audienceType": "Hundebesitzer, Hundeschulen, Tierärzte, Züchter"
}
}
</script>
<style>
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
--primary: #C4843A;
--primary-dark: #a86e2e;
--primary-light: #f5e6d3;
--text: #1a1a1a;
--text-secondary: #555;
--text-muted: #888;
--bg: #FAF7F2;
--surface: #fff;
--border: #e8ddd0;
--radius: 12px;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
background: var(--bg);
color: var(--text);
line-height: 1.6;
}
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
.container { max-width: 900px; margin: 0 auto; padding: 0 1.5rem; }
/* Header */
header {
background: linear-gradient(135deg, #C4843A 0%, #e8a857 100%);
color: white;
padding: 3rem 0 4rem;
text-align: center;
}
.header-logo {
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
margin-bottom: 1.5rem;
}
.header-logo img {
width: 64px;
height: 64px;
border-radius: 14px;
box-shadow: 0 4px 20px rgba(0,0,0,.2);
}
.header-logo .logo-name {
font-size: 2rem;
font-weight: 800;
letter-spacing: -0.02em;
}
header h1 {
font-size: clamp(1.5rem, 4vw, 2.5rem);
font-weight: 700;
margin-bottom: 1rem;
line-height: 1.2;
}
header p {
font-size: 1.15rem;
opacity: 0.92;
max-width: 600px;
margin: 0 auto 2rem;
}
.header-badges {
display: flex;
gap: 0.75rem;
justify-content: center;
flex-wrap: wrap;
}
.badge {
background: rgba(255,255,255,.2);
border: 1px solid rgba(255,255,255,.4);
border-radius: 999px;
padding: 0.4rem 1rem;
font-size: 0.85rem;
font-weight: 600;
}
.cta-btn {
display: inline-block;
background: white;
color: var(--primary-dark);
font-weight: 700;
font-size: 1.1rem;
padding: 0.85rem 2.5rem;
border-radius: 999px;
margin-top: 2rem;
box-shadow: 0 4px 20px rgba(0,0,0,.15);
transition: transform 0.15s, box-shadow 0.15s;
}
.cta-btn:hover {
transform: translateY(-2px);
box-shadow: 0 6px 28px rgba(0,0,0,.2);
text-decoration: none;
}
/* Nav */
nav {
background: white;
border-bottom: 1px solid var(--border);
padding: 0.75rem 0;
position: sticky;
top: 0;
z-index: 10;
}
nav .container {
display: flex;
gap: 1.5rem;
flex-wrap: wrap;
align-items: center;
}
nav a {
font-size: 0.9rem;
font-weight: 500;
color: var(--text-secondary);
}
nav a:hover { color: var(--primary); text-decoration: none; }
nav .nav-brand {
font-weight: 800;
color: var(--primary);
margin-right: auto;
font-size: 1rem;
}
/* Sections */
section { padding: 4rem 0; }
section:nth-child(even) { background: white; }
h2 {
font-size: clamp(1.4rem, 3vw, 2rem);
font-weight: 700;
color: var(--text);
margin-bottom: 0.5rem;
}
.section-intro {
color: var(--text-secondary);
font-size: 1.05rem;
margin-bottom: 2.5rem;
max-width: 600px;
}
/* Feature Groups */
.feature-group { margin-bottom: 2.5rem; }
.feature-group-label {
font-size: 0.72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--primary-dark);
background: var(--primary-light);
display: inline-block;
padding: 0.25rem 0.75rem;
border-radius: 999px;
margin-bottom: 1rem;
}
.feature-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 1rem;
}
.feature-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 1.25rem 1.5rem;
display: flex;
gap: 1rem;
align-items: flex-start;
}
section:nth-child(even) .feature-card { background: var(--bg); }
.feature-icon {
font-size: 1.6rem;
flex-shrink: 0;
margin-top: 0.1rem;
}
.feature-card h3 {
font-size: 0.95rem;
font-weight: 700;
margin-bottom: 0.25rem;
color: var(--text);
}
.feature-card p {
font-size: 0.85rem;
color: var(--text-secondary);
line-height: 1.5;
margin: 0;
}
.feature-tag {
display: inline-block;
background: var(--primary-light);
color: var(--primary-dark);
font-size: 0.68rem;
font-weight: 700;
padding: 0.15rem 0.5rem;
border-radius: 999px;
margin-top: 0.4rem;
text-transform: uppercase;
letter-spacing: 0.04em;
}
/* Comparison Table */
.table-wrap { overflow-x: auto; margin-top: 2rem; }
table { width: 100%; border-collapse: collapse; font-size: 0.9rem; min-width: 500px; }
th {
background: var(--primary);
color: white;
font-weight: 600;
padding: 0.75rem 1rem;
text-align: left;
}
th:first-child { border-radius: var(--radius) 0 0 0; }
th:last-child { border-radius: 0 var(--radius) 0 0; }
td { padding: 0.7rem 1rem; border-bottom: 1px solid var(--border); }
tr:last-child td { border-bottom: none; }
tr:nth-child(even) td { background: var(--bg); }
.check { color: #16a34a; font-weight: 700; }
.cross { color: #dc2626; }
/* Pricing */
.pricing-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 1.5rem;
margin-top: 2rem;
}
.pricing-card {
border: 2px solid var(--border);
border-radius: var(--radius);
padding: 2rem 1.5rem;
background: white;
}
.pricing-card.featured {
border-color: var(--primary);
position: relative;
}
.pricing-card.featured::before {
content: "Empfohlen";
position: absolute;
top: -12px;
left: 50%;
transform: translateX(-50%);
background: var(--primary);
color: white;
font-size: 0.75rem;
font-weight: 700;
padding: 0.25rem 0.75rem;
border-radius: 999px;
}
.pricing-card h3 { font-size: 1.2rem; font-weight: 700; margin-bottom: 0.25rem; }
.pricing-price { font-size: 2rem; font-weight: 800; color: var(--primary); margin: 0.75rem 0; }
.pricing-price span { font-size: 1rem; font-weight: 400; color: var(--text-muted); }
.pricing-card ul { list-style: none; margin-top: 1rem; }
.pricing-card ul li { padding: 0.35rem 0; font-size: 0.9rem; color: var(--text-secondary); }
.pricing-card ul li::before { content: "✓ "; color: #16a34a; font-weight: 700; }
/* USP Strip */
.usp-strip {
display: flex;
gap: 2rem;
flex-wrap: wrap;
margin-top: 2rem;
}
.usp-item { display: flex; align-items: flex-start; gap: 0.75rem; }
.usp-icon { font-size: 1.5rem; flex-shrink: 0; margin-top: 0.1rem; }
.usp-item h3 { font-size: 0.95rem; font-weight: 700; margin-bottom: 0.2rem; }
.usp-item p { font-size: 0.85rem; color: var(--text-secondary); }
/* Outcome Cards */
.outcome-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 24px;
margin-top: 2rem;
}
.outcome-card {
background: white;
border-radius: 12px;
padding: 24px;
box-shadow: 0 2px 12px rgba(0,0,0,.07);
}
.outcome-card .oc-icon {
font-size: 0; /* Emoji-Fallback ausblenden */
width: 3rem;
height: 3rem;
background: var(--primary-light);
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 1rem;
flex-shrink: 0;
}
.outcome-card .oc-icon svg {
width: 1.6rem;
height: 1.6rem;
color: var(--primary);
}
.feature-card .feature-icon svg {
width: 1.4rem;
height: 1.4rem;
color: var(--primary);
}
.feature-card .feature-icon {
font-size: 0;
display: flex;
align-items: center;
justify-content: center;
}
.outcome-card h3 {
font-size: 1.05rem;
font-weight: 700;
color: var(--text);
margin-bottom: 0.5rem;
}
.outcome-card p {
font-size: 0.9rem;
color: var(--text-secondary);
line-height: 1.6;
margin: 0;
}
.section-cta-link {
display: inline-block;
margin-top: 1.75rem;
font-size: 0.9rem;
color: var(--text-muted);
cursor: pointer;
user-select: none;
}
.section-cta-link:hover { color: var(--primary); text-decoration: none; }
.collapsible-content { display: none; margin-top: 1.5rem; }
.collapsible-content.open { display: block; }
.section-cta-btn {
display: inline-block;
background: var(--primary);
color: white;
font-weight: 700;
font-size: 1rem;
padding: 0.75rem 2rem;
border-radius: 999px;
margin-top: 2rem;
box-shadow: 0 4px 16px rgba(196,132,58,.35);
transition: transform 0.15s, box-shadow 0.15s;
}
.section-cta-btn:hover {
transform: translateY(-2px);
box-shadow: 0 6px 24px rgba(196,132,58,.45);
text-decoration: none;
color: white;
}
/* Footer */
footer {
background: #1a1a1a;
color: #aaa;
padding: 2.5rem 0;
text-align: center;
font-size: 0.85rem;
}
footer a { color: var(--primary); }
footer .footer-links { margin-top: 0.75rem; display: flex; gap: 1.5rem; justify-content: center; flex-wrap: wrap; }
</style>
</head>
<body>
<header>
<div class="container">
<div class="header-logo">
<img src="/icons/icon-180.png" alt="Ban Yaro App Icon">
<span class="logo-name">Ban Yaro</span>
</div>
<h1>Die deutschsprachige Hunde-Plattform</h1>
<p>Alles rund um deinen Hund — von Welpe bis Opa. Kostenlos, ohne App Store, Daten in Deutschland.</p>
<div class="header-badges">
<span class="badge">Kostenlos nutzbar</span>
<span class="badge">Daten in Deutschland</span>
<span class="badge">Kein App Store nötig</span>
<span class="badge">Made in Germany</span>
<span class="badge">Offline-fähig</span>
</div>
<a href="/" class="cta-btn">Jetzt kostenlos starten</a>
</div>
</header>
<nav>
<div class="container">
<span class="nav-brand">Ban Yaro</span>
<a href="#demo">Demo</a>
<a href="#funktionen">Hundebesitzer</a>
<a href="#zuechter">Züchter</a>
<a href="#welpen">Welpen</a>
<a href="#vergleich">Vergleich</a>
<a href="#preise">Preise</a>
<a href="#warum">Warum Ban Yaro?</a>
<a href="/wiki/rassen">Rassen-Wiki</a>
<a href="/">App öffnen</a>
</div>
</nav>
<!-- Demo-Video -->
<section id="demo" style="background:#1a1a1a;padding:64px 20px;text-align:center">
<div style="max-width:480px;margin:0 auto">
<h2 style="color:white;font-size:clamp(1.3rem,3.5vw,1.8rem);font-weight:800;margin:0 0 12px">
Sieh selbst wie es sich anfühlt
</h2>
<p style="color:rgba(255,255,255,0.65);font-size:1rem;margin:0 0 32px;line-height:1.6">
2:48 Minuten echte App — kein Marketing-Video, keine Dummy-Daten.
</p>
<div style="position:relative;display:inline-block;
border-radius:36px;overflow:hidden;
box-shadow:0 20px 60px rgba(0,0,0,0.5);
border:3px solid rgba(255,255,255,0.12);
max-width:280px;width:100%">
<video
src="/img/demo/app-demo.mp4"
controls
preload="metadata"
playsinline
style="display:block;width:100%;border-radius:33px"
poster="/icons/icon-512.png">
</video>
</div>
<p style="color:rgba(255,255,255,0.35);font-size:0.8rem;margin:20px 0 0">
Tippe auf Play — Ton optional, alles verständlich ohne
</p>
</div>
</section>
<!-- Sektion A: Für Hundebesitzer -->
<section id="funktionen" style="background: #f5f5f5;">
<div class="container">
<h2>Dein Hund. Dein Alltag. Alles an einem Ort.</h2>
<p class="section-intro">Alles was Hundehalter täglich brauchen — in einer App. Hier ist was Ban Yaro für dich bedeutet.</p>
<div class="outcome-grid">
<div class="outcome-card">
<div class="oc-icon">
<svg viewBox="0 0 256 256"><use href="/icons/phosphor.svg#book-open"></use></svg>
</div>
<h3>Meine persönlichen Highlights</h3>
<p>Ein Tagebuch das wirklich lebt — Fotos, GPS-Orte, Stimmungen. Schau in einem Jahr zurück und erinnere dich an jeden besonderen Moment.</p>
</div>
<div class="outcome-card">
<div class="oc-icon">
<svg viewBox="0 0 256 256"><use href="/icons/phosphor.svg#map-trifold"></use></svg>
</div>
<h3>Gassi ohne Fragezeichen</h3>
<p>Wo ist der nächste Mülleimer? Gibt es einen Kotbeutelspender? Mein Hund hat Durst — wo kann er trinken? Die Karte hat alle Antworten.</p>
</div>
<div class="outcome-card">
<div class="oc-icon">
<svg viewBox="0 0 256 256"><use href="/icons/phosphor.svg#path"></use></svg>
</div>
<h3>Lieblingsrouten für immer</h3>
<p>Speichere deine schönsten Strecken und teile sie mit anderen. Oder lass dir täglich eine neue Route vorschlagen — 2, 4 oder 6 km, direkt navigierbar.</p>
</div>
<div class="outcome-card">
<div class="oc-icon">
<svg viewBox="0 0 256 256"><use href="/icons/phosphor.svg#cloud-sun"></use></svg>
</div>
<h3>Das Gassiwetter</h3>
<p>Nicht einfach nur Wetter — ein Gassi-Score von 110. Zu heiß, zu windig, Regen im Anzug? Du weißt es bevor du die Tür aufmachst.</p>
</div>
<div class="outcome-card">
<div class="oc-icon">
<svg viewBox="0 0 256 256"><use href="/icons/phosphor.svg#heartbeat"></use></svg>
</div>
<h3>Gesundheit und Ausgaben im Blick</h3>
<p>Impfpass, Tierarztbesuche, Medikamente — alles digital. Und was kostet mein Hund mich eigentlich? Ausgaben-Tracker inklusive.</p>
</div>
<div class="outcome-card">
<div class="oc-icon">
<svg viewBox="0 0 256 256"><use href="/icons/phosphor.svg#graduation-cap"></use></svg>
</div>
<h3>Mein virtueller Trainer</h3>
<p>104 Übungen mit Schritt-für-Schritt-Anleitungen. Der KI-Trainer analysiert euren Stand täglich und beantwortet auch spezielle Probleme — wie ein Profi, immer dabei.</p>
</div>
<div class="outcome-card">
<div class="oc-icon">
<svg viewBox="0 0 256 256"><use href="/icons/phosphor.svg#chat-circle-dots"></use></svg>
</div>
<h3>Leute unter sich</h3>
<p>Ein Forum nur für Hundemenschen. Fragen stellen, Erfahrungen teilen, lokale Gassi-Treffen organisieren — ohne Algorithmen, ohne Werbung.</p>
</div>
<div class="outcome-card">
<div class="oc-icon">
<svg viewBox="0 0 256 256"><use href="/icons/phosphor.svg#house-line"></use></svg>
</div>
<h3>Jemanden für die Gassi gesucht?</h3>
<p>Du musst da oder dort hin — finde jemanden der auf deinen Hund aufpasst. Hundesitting-Vermittlung mit nur 8% Provision statt 20% bei anderen.</p>
</div>
</div>
<span class="section-cta-link" onclick="var c=document.getElementById('hundebesitzer-details');c.classList.toggle('open');this.textContent=c.classList.contains('open')?'▴ Weniger anzeigen':'+ Alle Features für Hundebesitzer ansehen ▾'">+ Alle Features für Hundebesitzer ansehen ▾</span>
<div id="hundebesitzer-details" class="collapsible-content">
<div class="feature-group">
<div class="feature-group-label">Mein Hund</div>
<div class="feature-grid">
<div class="feature-card">
<span class="feature-icon"><svg viewBox="0 0 256 256"><use href="/icons/phosphor.svg#house-line"></use></svg></span>
<div><h3>Personalisiertes Dashboard</h3><p>Täglich wechselndes Foto deines Hundes, aktuelle Stats, nächster Termin, Gewicht, Übung des Tages.</p></div>
</div>
<div class="feature-card">
<span class="feature-icon"><svg viewBox="0 0 256 256"><use href="/icons/phosphor.svg#book-open"></use></svg></span>
<div><h3>Tagebuch</h3><p>Fotos, Videos, Texte und GPS-Orte — alle Momente mit deinem Hund. Kalender-, Karten- und Medien-Ansicht.</p></div>
</div>
<div class="feature-card">
<span class="feature-icon"><svg viewBox="0 0 256 256"><use href="/icons/phosphor.svg#heartbeat"></use></svg></span>
<div><h3>Gesundheit &amp; Impfpass</h3><p>Impfungen, Tierarztbesuche, Medikamente digital verwalten. Automatische Erinnerungen per Push-Notification.</p></div>
</div>
<div class="feature-card">
<span class="feature-icon"><svg viewBox="0 0 256 256"><use href="/icons/phosphor.svg#target"></use></svg></span>
<div><h3>Training &amp; KI-Trainer</h3><p>104 Übungen, Einheiten loggen, Fortschritt in 5 Stufen. Virtueller Trainer mit täglichen Empfehlungen, Streaks und Abzeichen.</p></div>
</div>
<div class="feature-card">
<span class="feature-icon"><svg viewBox="0 0 256 256"><use href="/icons/phosphor.svg#first-aid"></use></svg></span>
<div><h3>Symptom-Checker</h3><p>KI-gestützte Ersteinschätzung: beobachten, Tierarzt oder Notfall?</p></div>
</div>
<div class="feature-card">
<span class="feature-icon"><svg viewBox="0 0 256 256"><use href="/icons/phosphor.svg#sparkle"></use></svg></span>
<div><h3>Pflege-System</h3><p>43 rassenspezifische Pflegetipps in 10 Kategorien — Tipp des Tages automatisch ausgewählt.</p></div>
</div>
<div class="feature-card">
<span class="feature-icon"><svg viewBox="0 0 256 256"><use href="/icons/phosphor.svg#cloud-sun"></use></svg></span>
<div><h3>Wetter, Gassi-Score &amp; Zecken-Alarm</h3><p>7-Tage-Wetter, tägliche Bewertung 110 für Gassi-Eignung, automatische Zecken-Warnung.</p></div>
</div>
<div class="feature-card">
<span class="feature-icon"><svg viewBox="0 0 256 256"><use href="/icons/phosphor.svg#fork-knife"></use></svg></span>
<div><h3>Ernährung &amp; Futter</h3><p>Kalorienbedarf berechnen, BARF-Guide, Giftliste und KI-Futterberater.</p></div>
</div>
<div class="feature-card">
<span class="feature-icon"><svg viewBox="0 0 256 256"><use href="/icons/phosphor.svg#airplane"></use></svg></span>
<div><h3>Reise mit Hund</h3><p>Reisecheckliste und EU-Länder-Guide mit länderspezifischen Einreiseregeln und Impfvorschriften.</p></div>
</div>
<div class="feature-card">
<span class="feature-icon"><svg viewBox="0 0 256 256"><use href="/icons/phosphor.svg#certificate"></use></svg></span>
<div><h3>NFC-Halsband-Tags</h3><p>Öffentliche Profilseite für jeden Hund. Finder kontaktiert dich anonym — ohne deine Nummer preiszugeben.</p></div>
</div>
</div>
</div>
<div class="feature-group">
<div class="feature-group-label">Community &amp; Entdecken</div>
<div class="feature-grid">
<div class="feature-card">
<span class="feature-icon"><svg viewBox="0 0 256 256"><use href="/icons/phosphor.svg#skull"></use></svg></span>
<div><h3>Giftköder-Alarm</h3><p>GPS-Meldungen mit Foto, sofortige Push-Notification für alle Nutzer im Umkreis.</p></div>
</div>
<div class="feature-card">
<span class="feature-icon"><svg viewBox="0 0 256 256"><use href="/icons/phosphor.svg#dog"></use></svg></span>
<div><h3>Verlorener Hund</h3><p>Sofortalarm für alle Nutzer in der Nähe — mit Foto, letzter GPS-Position und direktem Kontakt.</p></div>
</div>
<div class="feature-card">
<span class="feature-icon"><svg viewBox="0 0 256 256"><use href="/icons/phosphor.svg#path"></use></svg></span>
<div><h3>Tages-Gassirunde</h3><p>Täglich neue Rundroute — 2, 4 oder 6 km ab deinem Standort. Berechnet via OpenRouteService.</p></div>
</div>
<div class="feature-card">
<span class="feature-icon"><svg viewBox="0 0 256 256"><use href="/icons/phosphor.svg#paw-print"></use></svg></span>
<div><h3>Gassi-Treffen</h3><p>Spontane oder geplante Gassi-Treffen erstellen und finden.</p></div>
</div>
<div class="feature-card">
<span class="feature-icon"><svg viewBox="0 0 256 256"><use href="/icons/phosphor.svg#chat-circle-dots"></use></svg></span>
<div><h3>Forum</h3><p>Öffentlich lesbar ohne Anmeldung. Kategorien nach Rasse, Region, Gesundheit und Erziehung.</p></div>
</div>
<div class="feature-card">
<span class="feature-icon"><svg viewBox="0 0 256 256"><use href="/icons/phosphor.svg#books"></use></svg></span>
<div><h3><a href="/wiki/rassen">Hunde-Wiki</a></h3><p>1003 Hunderassen — Wikipedia-grounded und von KI angereichert. Community-Fotos und Rassen-Quiz.</p></div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Sektion B: Für Züchter -->
<section id="zuechter" style="background: #fffbf0;">
<div class="container">
<h2>Züchten. Nicht verwalten.</h2>
<p class="section-intro">Stammbaum, Inzucht-Koeffizient, Wurfverwaltung, Tierschutz-Check — alles was du brauchst, nichts was du nicht brauchst. Kein Excel. Keine veraltete Verbandssoftware.</p>
<div class="outcome-grid">
<div class="outcome-card">
<div class="oc-icon">
<svg viewBox="0 0 256 256"><use href="/icons/phosphor.svg#shield-check"></use></svg>
</div>
<h3>Transparenz die Vertrauen schafft</h3>
<p>Stammbaum bis 4 Generationen, Gesundheitstests, Gentests — alles für Käufer sichtbar. Die erste Plattform die Zucht wirklich transparent macht.</p>
</div>
<div class="outcome-card">
<div class="oc-icon">
<svg viewBox="0 0 256 256"><use href="/icons/phosphor.svg#scales"></use></svg>
</div>
<h3>Tierschutz automatisch</h3>
<p>Der Tierschutz-Check läuft bei jeder Verpaarung automatisch. Nicht abschaltbar — weil die Tiere zählen. Dein stärkstes Argument gegenüber Käufern.</p>
</div>
<div class="outcome-card">
<div class="oc-icon">
<svg viewBox="0 0 256 256"><use href="/icons/phosphor.svg#calendar-dots"></use></svg>
</div>
<h3>Von der Verpaarung bis zum Kaufvertrag</h3>
<p>Wurfbörse, Welpen-Verwaltung, automatischer Kaufvertrag. Interessenten schreiben direkt per Chat — du hast alles an einem Ort.</p>
</div>
</div>
<a href="/" class="section-cta-btn">Züchter-Profil anlegen — kostenlos</a>
</div>
</section>
<!-- Sektion C: Für Welpenkäufer -->
<section id="welpen" style="background: white;">
<div class="container">
<h2>Den richtigen Welpen finden. Sicher.</h2>
<p class="section-intro">Verifizierte Züchter, transparente Gesundheitsdaten, direkter Kontakt. Kein Kleinanzeigen-Chaos.</p>
<div class="outcome-grid">
<div class="outcome-card">
<div class="oc-icon">
<svg viewBox="0 0 256 256"><use href="/icons/phosphor.svg#magnifying-glass"></use></svg>
</div>
<h3>Nur verifizierte Züchter</h3>
<p>Jeder Züchter auf Ban Yaro wurde geprüft. Stammbaum und Gesundheitstests öffentlich einsehbar — bevor du fragst.</p>
</div>
<div class="outcome-card">
<div class="oc-icon">
<svg viewBox="0 0 256 256"><use href="/icons/phosphor.svg#chat-circle-dots"></use></svg>
</div>
<h3>Direkt zum Züchter</h3>
<p>Kein Umweg über Kleinanzeigen. Schreib direkt per Nachricht, sieh Fotos der Eltern und des Wurfs.</p>
</div>
<div class="outcome-card">
<div class="oc-icon">
<svg viewBox="0 0 256 256"><use href="/icons/phosphor.svg#paw-print"></use></svg>
</div>
<h3>Vorbereitet wenn der Welpe kommt</h3>
<p>Starte direkt mit Tagebuch, Training und Gesundheitsakte. Alles bereit für den ersten Tag.</p>
</div>
</div>
<a href="/wurfboerse" class="section-cta-btn">Wurfbörse durchstöbern — kostenlos</a>
</div>
</section>
<section id="vergleich">
<div class="container">
<h2>Ban Yaro vs. Konkurrenz</h2>
<p class="section-intro">Hundeo ist stark im Training — Dogorama stark in der Community. Ban Yaro vereint beides und geht weit darüber hinaus: Zucht-Management, KI-Trainer, Gesundheitsakte und Sitting in einer einzigen App — ohne App Store.</p>
<div class="table-wrap">
<table>
<thead>
<tr>
<th>Funktion</th>
<th>Ban Yaro</th>
<th>Hundeo</th>
<th>Dogorama</th>
</tr>
</thead>
<tbody>
<tr>
<td>Kostenlos nutzbar</td>
<td class="check">✓ Ja</td>
<td>Freemium</td>
<td>Freemium</td>
</tr>
<tr>
<td>DSGVO / EU-konform</td>
<td class="check">✓ DE</td>
<td class="check">✓ EU</td>
<td class="check">✓ DE</td>
</tr>
<tr>
<td>Kein App Store nötig (PWA)</td>
<td class="check"></td>
<td class="cross"></td>
<td class="cross"></td>
</tr>
<tr>
<td>KI-Hundetrainer</td>
<td class="check"></td>
<td class="check"></td>
<td class="cross"></td>
</tr>
<tr>
<td>Giftköder-Alarm</td>
<td class="check"></td>
<td class="cross"></td>
<td class="check"></td>
</tr>
<tr>
<td>Gesundheitsakte &amp; Impfpass</td>
<td class="check"></td>
<td class="cross"></td>
<td class="check"></td>
</tr>
<tr>
<td>Forum &amp; Community</td>
<td class="check"></td>
<td class="cross"></td>
<td class="check"></td>
</tr>
<tr>
<td>Gassi-Treffen &amp; Playdates</td>
<td class="check"></td>
<td class="cross"></td>
<td class="check"></td>
</tr>
<tr>
<td>Wurfbörse &amp; Zucht-Management</td>
<td class="check"></td>
<td class="cross"></td>
<td class="cross"></td>
</tr>
<tr>
<td>Stammbaum &amp; Inzucht-Check</td>
<td class="check"></td>
<td class="cross"></td>
<td class="cross"></td>
</tr>
<tr>
<td>Hundesitting-Vermittlung</td>
<td class="check">✓ kostenlos</td>
<td class="cross"></td>
<td class="cross"></td>
</tr>
<tr>
<td>Verlorener Hund Alarm</td>
<td class="check"></td>
<td class="cross"></td>
<td class="check"></td>
</tr>
<tr>
<td>Rassen-Wiki (KI-angereichert)</td>
<td class="check">✓ 1.003</td>
<td>200+</td>
<td>Basis</td>
</tr>
<tr>
<td>Offline-Modus</td>
<td class="check"></td>
<td>nur Premium</td>
<td class="cross"></td>
</tr>
<tr>
<td>KI-Routenvorschlag</td>
<td class="check"></td>
<td class="cross"></td>
<td class="cross"></td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
<section id="preise">
<div class="container">
<h2>Preise</h2>
<p class="section-intro">Ban Yaro startet kostenlos — mit allem was du täglich brauchst. Mehr Features kommen, wenn die Community gewachsen ist.</p>
<div class="pricing-grid" style="max-width:860px;margin:0 auto;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))">
<div class="pricing-card featured">
<h3>Kostenlos</h3>
<div class="pricing-price">0 € <span>/ für immer</span></div>
<p style="font-size:0.85rem;color:var(--text-secondary);margin-bottom:1rem">1 Hund · alle Essentials</p>
<ul>
<li>Tagebuch, Gesundheit, Übungen</li>
<li>Karte, Giftköder-Alarm, Gassiwetter</li>
<li>Forum, Wiki, Erste Hilfe</li>
<li>Routen, Events, Rückrufe, Knigge</li>
<li>Sitting — 0% Provision, ihr handelt selbst aus</li>
<li>Persönlichkeitstest, Adoption, Ausgaben</li>
</ul>
</div>
<div class="pricing-card">
<h3>Ban Yaro Pro</h3>
<div class="pricing-price" style="font-size:1.4rem">Kommt bald</div>
<p style="font-size:0.85rem;color:var(--text-secondary);margin-bottom:1rem">Mehrere Hunde · erweiterte Community</p>
<ul>
<li>Mehrere Hunde verwalten</li>
<li>KI-Trainer für personalisiertes Training</li>
<li>Direktnachrichten, Freunde, Playdate</li>
<li>Gassi-Treffen, Ernährung, Reise</li>
<li>Notizblock</li>
</ul>
<p style="margin-top:1rem;font-size:0.82rem;color:var(--text-muted)">Preis wird mit der Community entwickelt. Wer jetzt dabei ist, profitiert.</p>
</div>
<div class="pricing-card">
<h3>Züchter</h3>
<div class="pricing-price" style="font-size:1.4rem">Kommt bald</div>
<p style="font-size:0.85rem;color:var(--text-secondary);margin-bottom:1rem">Professionelle Zucht · alles aus Pro</p>
<ul>
<li>Stammbaum bis 4 Generationen</li>
<li>Inzucht-Koeffizient nach Wright</li>
<li>Wurfverwaltung + Kaufvertrag</li>
<li>Tierschutz-Check (automatisch)</li>
<li>Wurfbörse + verifiziertes Profil</li>
</ul>
</div>
</div>
</div>
</section>
<section id="warum">
<div class="container">
<h2>Warum Ban Yaro?</h2>
<p class="section-intro">Ban Yaro wurde von Hundebesitzern für Hundebesitzer entwickelt — mit einem klaren Standpunkt zu Datenschutz und Fairness.</p>
<div class="usp-strip">
<div class="usp-item">
<span class="usp-icon">🇩🇪</span>
<div>
<h3>Deutsche Plattform</h3>
<p>Hosting in Deutschland, deutschsprachiger Support, auf DACH-Nutzer zugeschnitten.</p>
</div>
</div>
<div class="usp-item">
<span class="usp-icon">🔒</span>
<div>
<h3>Deine Daten. Dein Eigentum.</h3>
<p>Keine Datenweitergabe an US-Konzerne. Cookielose Analytics (Umami). Transparente Datennutzung.</p>
</div>
</div>
<div class="usp-item">
<span class="usp-icon">📱</span>
<div>
<h3>Kein App Store</h3>
<p>Als Progressive Web App direkt über den Browser installierbar — auf iOS und Android. Sofort updatebar.</p>
</div>
</div>
<div class="usp-item">
<span class="usp-icon">📡</span>
<div>
<h3>Offline-fähig</h3>
<p>Service Worker sorgt dafür dass die App auch ohne Internet funktioniert — beim Gassi gehen in der Natur.</p>
</div>
</div>
<div class="usp-item">
<span class="usp-icon">💸</span>
<div>
<h3>Faire Provision</h3>
<p>Hundesitting nur 8% Provision — Rover und Pawshake nehmen 20%. Mehr Geld bleibt beim Sitter.</p>
</div>
</div>
<div class="usp-item">
<span class="usp-icon">🗺️</span>
<div>
<h3>OpenStreetMap</h3>
<p>Karten von OpenStreetMap statt Google — keine Tracking-Cookies, kein API-Lock-in, günstiger für alle.</p>
</div>
</div>
<div class="usp-item">
<span class="usp-icon">🔐</span>
<div>
<h3>Aktive Sicherheit</h3>
<p>HSTS, Content-Security-Policy, Rate Limiting auf allen Endpunkten, Account-Lockout nach Fehlversuchen, E-Mail-Verifikation. Sicherheit by Default, nicht als Nachgedanke.</p>
</div>
</div>
<div class="usp-item">
<span class="usp-icon">🤖</span>
<div>
<h3>KI Made in Europe</h3>
<p>Alle KI-Funktionen laufen über Claude (Anthropic) — kein Training mit deinen Daten, kein Opt-out nötig, deine Daten bleiben deine Daten.</p>
</div>
</div>
</div>
</div>
</section>
<section>
<div class="container" style="text-align:center">
<h2>Jetzt kostenlos starten</h2>
<p class="section-intro" style="margin:1rem auto 2rem">Einfach banyaro.app im Browser öffnen und "Zum Homescreen hinzufügen" — fertig. Kein App Store, keine Kreditkarte.</p>
<a href="/" class="cta-btn" style="background:var(--primary);color:white;box-shadow:0 4px 20px rgba(196,132,58,.4)">Ban Yaro öffnen</a>
</div>
</section>
<section id="ueber" style="background:white;padding:5rem 0">
<div class="container" style="text-align:center">
<h2>Warum „Ban Yaro"?</h2>
<p class="section-intro" style="margin:1rem auto 2.5rem">
Ban Yaro ist ein Hund. Genauer gesagt: ein Hund aus dem B-Wurf einer Züchterin,
die Star Wars liebt und ihre Würfe nach Charakteren dieses Epos benennt.
Ban Yaro ist der Namensgeber dieser App — und ein gutes Zeichen, dass hier
Hundemenschen für Hundemenschen bauen.
</p>
<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.5rem;text-align:left;margin-top:3rem">
<div class="feature-card">
<span class="feature-icon"><svg viewBox="0 0 256 256"><use href="/icons/phosphor.svg#calendar-dots"></use></svg></span>
<div>
<h3>Gegründet 2026</h3>
<p>Ebersberg, Bayern. Ein-Mann-Projekt von René Degelmann — mit großem Herz für Hunde.</p>
</div>
</div>
<div class="feature-card">
<span class="feature-icon"><svg viewBox="0 0 256 256"><use href="/icons/phosphor.svg#shield"></use></svg></span>
<div>
<h3>Server in Deutschland</h3>
<p>Alle Daten bleiben in Deutschland. Kein US-Konzern, kein Datenhändler.</p>
</div>
</div>
<div class="feature-card">
<span class="feature-icon"><svg viewBox="0 0 256 256"><use href="/icons/phosphor.svg#lock"></use></svg></span>
<div>
<h3>Deine Daten. Dein Eigentum.</h3>
<p>Vollständige Datenschutzerklärung, keine Tracker, keine Werbung.</p>
</div>
</div>
<div class="feature-card">
<span class="feature-icon"><svg viewBox="0 0 256 256"><use href="/icons/phosphor.svg#envelope"></use></svg></span>
<div>
<h3>Direkt erreichbar</h3>
<p><a href="mailto:hallo@banyaro.app">hallo@banyaro.app</a> — kein Support-Ticket-System, echte Menschen.</p>
</div>
</div>
</div>
</div>
</section>
<footer>
<div class="container">
<p><strong style="color:white">Ban Yaro</strong> — Die deutschsprachige Hunde-Plattform</p>
<p style="margin-top:0.5rem">banyaro.app · DSGVO-konform · Hosting in Deutschland · Made with 🐾</p>
<div class="footer-links">
<a href="/">App öffnen</a>
<a href="/info">Über Ban Yaro</a>
<a href="/wiki/rassen">Hunde-Rassen</a>
<a href="/knigge">Hunde-Knigge</a>
<a href="https://instagram.com/banyaro.app" rel="noopener" target="_blank">Instagram</a>
<a href="https://tiktok.com/@banyaro.app" rel="noopener" target="_blank">TikTok</a>
<a href="/#impressum">Impressum</a>
<a href="/#datenschutz">Datenschutz</a>
</div>
</div>
</footer>
<script>
// Alle Links die zur App führen (/) setzen das Flag damit kein Redirect-Loop entsteht
document.querySelectorAll('a[href="/"], a[href^="/#"]').forEach(function(a) {
a.addEventListener('click', function() {
sessionStorage.setItem('by_stay_in_app', '1');
});
});
</script>
</body>
</html>