rene
d0a76e1b54
Eigener Song (KI-Demo via Suno) als Marken-Hymne. Dezente Player-Karte unter dem Tageszitat; preload=none → 6 MB MP3 lädt erst bei Play, der SW cacht sie danach für offline. Der Banner ist einmalige Einladung und verschwindet nach erstem Hören (durchgehört oder >30s + Pause); danach dezenter runder Play-Button unten links als Gegenspieler zum FAB, nur in WELT. Audio-Element zentral in index.html → übersteht Welt-Wechsel & Re-Renders. „Gehört" wird hybrid gemerkt: localStorage (sofort/offline) + DB-Flag anthem_heard am User (neue Spalte, über /auth/me, gesetzt via POST /api/profile/anthem-heard) — geräte- und deploy-übergreifend, damit der Banner nicht erneut nervt.
1671 lines
76 KiB
HTML
1671 lines
76 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<meta name="color-scheme" content="light dark">
|
||
<script src="/js/landing-init.js?v=1295"></script>
|
||
<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, direkt im Browser oder als native iPhone-App (Ban Yaro Go).">
|
||
<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/">
|
||
|
||
<!-- 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 Web-App direkt im Browser. Kostenlos.">
|
||
<meta property="og:url" content="https://banyaro.app/">
|
||
<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, direkt im Browser.">
|
||
<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 deutschsprachige All-in-One Hunde-Plattform für Hundebesitzer und Züchter. Kostenlos: Tagebuch, Impfpass, Gassi-Community, Giftköder-Alarm. Pro (29 €/Jahr): mehrere Hunde, Ernährung. Züchter (49 €/Jahr): Warteliste, Läufigkeit, Wurfverwaltung, Stammbaum, Inzucht-Koeffizient, KI-Assistent — DSGVO-konform, direkt im Browser.",
|
||
"url": "https://banyaro.app",
|
||
"applicationCategory": "LifestyleApplication",
|
||
"applicationSubCategory": "PetApplication",
|
||
"operatingSystem": "iOS, Android, Web",
|
||
"inLanguage": "de",
|
||
"availableOnDevice": "Smartphone, Tablet",
|
||
"offers": [
|
||
{
|
||
"@type": "Offer",
|
||
"name": "Kostenlos",
|
||
"price": "0",
|
||
"priceCurrency": "EUR",
|
||
"availability": "https://schema.org/InStock"
|
||
},
|
||
{
|
||
"@type": "Offer",
|
||
"name": "Ban Yaro Pro",
|
||
"price": "29",
|
||
"priceCurrency": "EUR",
|
||
"availability": "https://schema.org/InStock",
|
||
"description": "Mehrere Hunde, Ernährung, erweiterte Karten-Layer"
|
||
},
|
||
{
|
||
"@type": "Offer",
|
||
"name": "Züchter",
|
||
"price": "49",
|
||
"priceCurrency": "EUR",
|
||
"availability": "https://schema.org/InStock",
|
||
"description": "Vollständige Züchter-Plattform: Warteliste, Läufigkeit, Wurfverwaltung, Stammbaum, IK-Rechner, KI-Assistent"
|
||
}
|
||
],
|
||
"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",
|
||
"Native iPhone-App (Ban Yaro Go): Tracking im Hintergrund bei gesperrtem Display, Apple Health, Live-Aktivität, GPX-Import",
|
||
"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 JSON (DSGVO Art. 20)",
|
||
"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, Giftliste und KI-Berater",
|
||
"Futter-Verträglichkeits-Tracker: 20 Reaktionstypen, automatische Muster-Analyse",
|
||
"Verhaltens-Protokoll: 8 Kategorien, 11 Auslöser, Intensitätsskala",
|
||
"Versicherungs-Verwaltung direkt im Gesundheitsbereich",
|
||
"Aktive Erinnerungen für Impfungen und Medikamente (Push 7 + 3 + 0 Tage vorher)",
|
||
"Trauer-Feature: Gedenkseite mit KI-Abschiedstext, Statistiken und Fotos",
|
||
"Widerristhöhe im Hundeprofil mit Anleinpflicht-Hinweis",
|
||
"Hundefotos und Rasse bei Gassi-Treffen-Teilnehmern",
|
||
"Fotos nach dem Gassi-Treffen hochladen und teilen",
|
||
"Hundefreundliche Restaurants, Cafés und Hotels auf der Karte",
|
||
"Multi-Hund-Support: getrennte Trainingsfortschritte, Ernährungs- und Gesundheitsdaten",
|
||
"DSGVO Datenexport (Art. 20): vollständiger JSON-Download aller eigenen Daten",
|
||
"Hunde-Persönlichkeitstest mit Trainingstipps",
|
||
"Reise-Checkliste und EU-Länder-Einreiseregeln",
|
||
"Integrierte Hilfe und FAQ direkt in der App",
|
||
"Warteliste: Interessenten mit Präferenzen pro Zuchthündin verwalten",
|
||
"Läufigkeit und Trächtigkeit: Zykluskalender, Progesterontests, Deckdaten, Meilensteine",
|
||
"Wurf-Buchstabe und Wurf-Name für jeden Wurf",
|
||
"Privater Züchter-Bereich mit Logo und Zwingername im Header",
|
||
"Züchter-Profilfotos und Galerie auf der öffentlichen Visitenkarte",
|
||
"Züchter-Kacheln in HUND-Welt mit Z-Badge erkennbar"
|
||
],
|
||
"screenshot": "https://banyaro.app/icons/icon-512.png",
|
||
"softwareVersion": "1.5.1",
|
||
"datePublished": "2026-05-01",
|
||
"dateModified": "2026-05-14",
|
||
"areaServed": ["DE", "AT", "CH"],
|
||
"audience": {
|
||
"@type": "Audience",
|
||
"audienceType": "Hundebesitzer, Hundeschulen, Tierärzte, Züchter"
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<script type="application/ld+json">
|
||
{
|
||
"@context": "https://schema.org",
|
||
"@type": "WebSite",
|
||
"name": "Ban Yaro",
|
||
"url": "https://banyaro.app",
|
||
"description": "Die Hunde-App für Deutschland, Österreich und die Schweiz",
|
||
"inLanguage": "de",
|
||
"potentialAction": {
|
||
"@type": "SearchAction",
|
||
"target": {
|
||
"@type": "EntryPoint",
|
||
"urlTemplate": "https://banyaro.app/wiki/rassen?q={search_term_string}"
|
||
},
|
||
"query-input": "required name=search_term_string"
|
||
}
|
||
}
|
||
</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;
|
||
color-scheme: light dark;
|
||
}
|
||
|
||
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 { width: 1.6rem; height: 1.6rem; flex-shrink: 0; margin-top: 0.15rem; color: var(--primary); }
|
||
.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;
|
||
}
|
||
|
||
/* Audience Cards */
|
||
.audience-card > div { transition: border-color .2s, transform .15s; }
|
||
.audience-card:hover > div { transform: translateY(-3px); }
|
||
.audience-card:first-child:hover > div { border-color: var(--primary); }
|
||
.audience-card:last-child:hover > div { border-color: rgba(196,132,58,.7); }
|
||
@media (max-width: 600px) {
|
||
#fuer-beide .container > div { grid-template-columns: 1fr !important; }
|
||
}
|
||
|
||
/* 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; }
|
||
|
||
/* Hero Stats */
|
||
.hero-stats {
|
||
margin-top: 1.5rem;
|
||
font-size: 0.88rem;
|
||
opacity: 0.88;
|
||
display: flex;
|
||
gap: 0.6rem;
|
||
justify-content: center;
|
||
flex-wrap: wrap;
|
||
align-items: center;
|
||
}
|
||
.hero-stats strong { font-weight: 800; }
|
||
.hero-stats .sep { opacity: 0.45; }
|
||
|
||
/* Big Stats Band */
|
||
.stats-band {
|
||
background: linear-gradient(135deg, #a86e2e 0%, #C4843A 50%, #d4944a 100%);
|
||
color: white;
|
||
padding: 2.5rem 0;
|
||
}
|
||
.stats-band-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
|
||
gap: 1.5rem;
|
||
text-align: center;
|
||
}
|
||
.stats-band-item { padding: 0.5rem; }
|
||
.stats-band-num {
|
||
font-size: clamp(2rem, 5vw, 2.8rem);
|
||
font-weight: 900;
|
||
line-height: 1;
|
||
letter-spacing: -0.02em;
|
||
margin-bottom: 0.4rem;
|
||
}
|
||
.stats-band-label {
|
||
font-size: 0.82rem;
|
||
opacity: 0.82;
|
||
font-weight: 500;
|
||
}
|
||
|
||
/* Testimonials */
|
||
.testimonials-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||
gap: 1.5rem;
|
||
margin-top: 2rem;
|
||
}
|
||
.testimonial-card {
|
||
background: white;
|
||
border-radius: 16px;
|
||
padding: 1.75rem;
|
||
box-shadow: 0 2px 16px rgba(0,0,0,.07);
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0.85rem;
|
||
border: 1px solid var(--border);
|
||
}
|
||
.testimonial-stars { color: #f59e0b; letter-spacing: 2px; font-size: 0.95rem; }
|
||
.testimonial-quote {
|
||
font-size: 0.97rem;
|
||
line-height: 1.7;
|
||
color: var(--text);
|
||
flex: 1;
|
||
}
|
||
.testimonial-quote::before { content: "„"; font-size: 1.3em; color: var(--primary); line-height: 0; vertical-align: -0.2em; margin-right: 2px; }
|
||
.testimonial-quote::after { content: """; font-size: 1.3em; color: var(--primary); line-height: 0; vertical-align: -0.2em; margin-left: 2px; }
|
||
.testimonial-author { font-size: 0.875rem; font-weight: 700; color: var(--text); }
|
||
.testimonial-dog { font-size: 0.8rem; color: var(--primary); font-weight: 500; margin-top: 0.1rem; }
|
||
.testimonial-placeholder { opacity: 0.4; font-style: italic; }
|
||
|
||
/* Foto-Sections */
|
||
.photo-credit {
|
||
position: absolute;
|
||
bottom: 7px; right: 9px;
|
||
font-size: 0.62rem;
|
||
color: rgba(255,255,255,0.8);
|
||
background: rgba(0,0,0,0.32);
|
||
padding: 2px 7px;
|
||
border-radius: 4px;
|
||
letter-spacing: 0.03em;
|
||
backdrop-filter: blur(3px);
|
||
pointer-events: none;
|
||
}
|
||
.photo-strip {
|
||
display: grid;
|
||
grid-template-columns: repeat(4,1fr);
|
||
gap: 3px;
|
||
}
|
||
@media (max-width: 640px) { .photo-strip { grid-template-columns: repeat(2,1fr); } }
|
||
.photo-strip-item {
|
||
position: relative;
|
||
aspect-ratio: 1;
|
||
overflow: hidden;
|
||
}
|
||
.photo-strip-item img {
|
||
width: 100%; height: 100%;
|
||
object-fit: cover;
|
||
transition: transform 0.45s ease;
|
||
display: block;
|
||
}
|
||
.photo-strip-item:hover img { transform: scale(1.04); }
|
||
.moment-split {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
min-height: 420px;
|
||
}
|
||
@media (max-width: 700px) {
|
||
.moment-split { grid-template-columns: 1fr; }
|
||
.moment-split .moment-photo { aspect-ratio: 4/3; min-height: unset; }
|
||
}
|
||
.moment-photo { position: relative; overflow: hidden; }
|
||
.moment-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
|
||
.moment-text {
|
||
background: linear-gradient(135deg, #C4843A 0%, #d4944a 100%);
|
||
color: white;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
padding: clamp(2rem,5vw,3.5rem);
|
||
gap: 1.5rem;
|
||
}
|
||
.moment-text blockquote {
|
||
font-size: clamp(1.3rem,2.5vw,1.9rem);
|
||
font-weight: 800;
|
||
line-height: 1.3;
|
||
margin: 0;
|
||
}
|
||
.moment-text p { font-size: 1rem; opacity: 0.88; margin: 0; line-height: 1.65; }
|
||
|
||
/* Scroll animations */
|
||
.fade-up {
|
||
opacity: 0;
|
||
transform: translateY(22px);
|
||
transition: opacity 0.55s ease, transform 0.55s ease;
|
||
}
|
||
.fade-up.visible { opacity: 1; transform: none; }
|
||
|
||
/* Dark Mode */
|
||
/* Dark-Mode via JS-Klasse (html.dark) — Fallback für macOS 26 / Brave */
|
||
html.dark {
|
||
--bg: #141210;
|
||
--surface: #1e1a16;
|
||
--text: #ede8e2;
|
||
--text-secondary:#a89880;
|
||
--text-muted: #6b5e50;
|
||
--border: #2e2620;
|
||
--primary-light: #3a2510;
|
||
color-scheme: dark;
|
||
}
|
||
/* Dark-Mode via Media Query (Standard-Browser-Fallback) */
|
||
@media (prefers-color-scheme: dark) {
|
||
:root {
|
||
--bg: #141210;
|
||
--surface: #1e1a16;
|
||
--text: #ede8e2;
|
||
--text-secondary:#a89880;
|
||
--text-muted: #6b5e50;
|
||
--border: #2e2620;
|
||
--primary-light: #3a2510;
|
||
color-scheme: dark;
|
||
}
|
||
}
|
||
html.dark body { background: #141210 !important; color: #ede8e2 !important; }
|
||
html.dark nav { background: #1a1612 !important; border-color: #2e2620 !important; }
|
||
html.dark nav a { color: #a89880 !important; }
|
||
html.dark nav .nav-brand { color: #C4843A !important; }
|
||
html.dark section { background: #141210 !important; }
|
||
html.dark section:nth-child(even) { background: #1a1612 !important; }
|
||
html.dark #fuer-beide { background: #1a1612 !important; }
|
||
html.dark #funktionen { background: #1a1612 !important; }
|
||
html.dark #welpen { background: #1a1612 !important; }
|
||
html.dark #stimmen { background: #141210 !important; }
|
||
html.dark #zuechter { background: #1a1208 !important; }
|
||
html.dark #warum { background: #141210 !important; }
|
||
html.dark #vergleich { background: #1a1612 !important; }
|
||
html.dark #preise { background: #141210 !important; }
|
||
html.dark #ueber { background: #1a1612 !important; }
|
||
html.dark .outcome-card { background: #1e1a16 !important; border-color: #2e2620 !important; }
|
||
html.dark .feature-card { background: #1e1a16 !important; border-color: #2e2620 !important; }
|
||
html.dark .testimonial-card{ background: #1e1a16 !important; border-color: #2e2620 !important; }
|
||
html.dark .pricing-card { background: #1e1a16 !important; border-color: #2e2620 !important; }
|
||
html.dark .pricing-card.featured { border-color: #C4843A !important; }
|
||
html.dark .audience-card > div { background: #1e1a16 !important; border-color: #2e2620 !important; }
|
||
html.dark .feature-group-label { background: #3a2510 !important; color: #C4843A !important; }
|
||
html.dark h2, html.dark h3 { color: #ede8e2 !important; }
|
||
html.dark p { color: #a89880; }
|
||
html.dark table { background: #1e1a16 !important; }
|
||
html.dark th { background: #C4843A !important; }
|
||
html.dark td { border-color: #2e2620 !important; color: #ede8e2 !important; }
|
||
html.dark tr:nth-child(even) td { background: #141210 !important; }
|
||
html.dark footer { background: #0d0b09 !important; }
|
||
html.dark .section-intro { color: #a89880 !important; }
|
||
html.dark .ios-card { background: #1e1a16 !important; border-color: #2e2620 !important; }
|
||
</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>Weil jeder Moment<br>mit ihm zählt.</h1>
|
||
<p>Ban Yaro begleitet euch durch jeden gemeinsamen Tag — Tagebuch, Training und Gesundheit für Hundebesitzer, Stammbaum und Wurfverwaltung für Züchter. Eine App. Mit ganzem Herzen.</p>
|
||
<div style="display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;margin-top:2rem">
|
||
<a href="/" class="cta-btn" data-stay-in-app>Kostenlos starten</a>
|
||
<a href="/zuechter" class="cta-btn" style="background:transparent;color:white;border:2px solid rgba(255,255,255,.6)">Ich bin Züchter</a>
|
||
</div>
|
||
<div class="header-badges" style="margin-top:1.5rem">
|
||
<span class="badge">Kostenlos nutzbar</span>
|
||
<span class="badge">Daten in Deutschland</span>
|
||
<span class="badge">Läuft direkt im Browser</span>
|
||
<span class="badge">Made in Germany</span>
|
||
<span class="badge">Offline-fähig</span>
|
||
</div>
|
||
<div class="hero-stats" id="hero-stats" style="display:none"></div>
|
||
</div>
|
||
</header>
|
||
|
||
<nav>
|
||
<div class="container">
|
||
<span class="nav-brand">Ban Yaro</span>
|
||
<a href="#demo">Demo</a>
|
||
<a href="#fuer-beide">Übersicht</a>
|
||
<a href="#funktionen">Hundebesitzer</a>
|
||
<a href="#zuechter">Züchter</a>
|
||
<a href="#verbindung">Verzahnung</a>
|
||
<a href="#vergleich">Vergleich</a>
|
||
<a href="#preise">Preise</a>
|
||
<a href="/">App öffnen</a>
|
||
</div>
|
||
</nav>
|
||
|
||
<!-- Zwei Welten, eine App -->
|
||
<section id="fuer-beide" style="background:white;padding:3rem 0">
|
||
<div class="container">
|
||
<h2 style="text-align:center;margin-bottom:0.5rem">Zwei Zielgruppen. Eine Plattform.</h2>
|
||
<p class="section-intro" style="text-align:center;margin:0 auto 2.5rem">Ban Yaro ist die einzige App die Hundebesitzer und Züchter nahtlos verbindet — weil Züchter und Käufer die gleiche App benutzen.</p>
|
||
<div style="display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;max-width:860px;margin:0 auto">
|
||
|
||
<!-- Hundebesitzer -->
|
||
<a href="#funktionen" style="text-decoration:none" class="audience-card">
|
||
<div style="background:var(--bg);border:2px solid var(--border);border-radius:14px;padding:2rem;height:100%;display:flex;flex-direction:column;gap:1rem;transition:border-color .2s">
|
||
<div style="width:52px;height:52px;background:var(--primary-light);border-radius:14px;display:flex;align-items:center;justify-content:center">
|
||
<svg style="width:28px;height:28px;color:var(--primary)" viewBox="0 0 256 256"><use href="/icons/phosphor.svg#paw-print"></use></svg>
|
||
</div>
|
||
<div>
|
||
<h3 style="margin:0 0 .5rem;font-size:1.15rem">Für Hundebesitzer</h3>
|
||
<p style="margin:0;color:var(--text-secondary);font-size:.9rem;line-height:1.6">Tagebuch · Gesundheitsakte · KI-Trainer · Giftköder-Alarm · Gassi-Routen · Wetter · Forum · Wurfbörse</p>
|
||
</div>
|
||
<span style="color:var(--primary);font-size:.85rem;font-weight:600;margin-top:auto">Alle Features ansehen →</span>
|
||
</div>
|
||
</a>
|
||
|
||
<!-- Züchter -->
|
||
<a href="/zuechter" style="text-decoration:none" class="audience-card">
|
||
<div style="background:linear-gradient(135deg,#1a1208,#2d1f0e);border:2px solid rgba(196,132,58,.4);border-radius:14px;padding:2rem;height:100%;display:flex;flex-direction:column;gap:1rem">
|
||
<div style="width:52px;height:52px;background:#C4843A;border-radius:14px;display:flex;align-items:center;justify-content:center">
|
||
<svg style="width:28px;height:28px;color:#ffffff" viewBox="0 0 256 256"><use href="/icons/phosphor.svg#certificate"></use></svg>
|
||
</div>
|
||
<div>
|
||
<h3 style="margin:0 0 .5rem;font-size:1.15rem;color:white">Für Züchter</h3>
|
||
<p style="margin:0;color:rgba(255,255,255,.65);font-size:.9rem;line-height:1.6">Stammbaum · Inzuchtkoeffizient · Wurfverwaltung · Warteliste · Läufigkeit · Kaufvertrag · KI-Assistent</p>
|
||
</div>
|
||
<span style="color:#C4843A;font-size:.85rem;font-weight:600;margin-top:auto">Züchter-Tool entdecken →</span>
|
||
</div>
|
||
</a>
|
||
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Stats Band -->
|
||
<section class="stats-band" id="zahlen">
|
||
<div class="container">
|
||
<div class="stats-band-grid">
|
||
<div class="stats-band-item fade-up">
|
||
<div class="stats-band-num" id="big-users">…</div>
|
||
<div class="stats-band-label">Hundemenschen</div>
|
||
</div>
|
||
<div class="stats-band-item fade-up">
|
||
<div class="stats-band-num" id="big-dogs">…</div>
|
||
<div class="stats-band-label">Hunde registriert</div>
|
||
</div>
|
||
<div class="stats-band-item fade-up">
|
||
<div class="stats-band-num" id="big-km">…</div>
|
||
<div class="stats-band-label">km Gassi-Routen</div>
|
||
</div>
|
||
<div class="stats-band-item fade-up">
|
||
<div class="stats-band-num" id="big-posts">…</div>
|
||
<div class="stats-band-label">Forum-Beiträge</div>
|
||
</div>
|
||
<div class="stats-band-item fade-up">
|
||
<div class="stats-band-num" id="big-diary">…</div>
|
||
<div class="stats-band-label">Tagebuch-Einträge</div>
|
||
</div>
|
||
<div class="stats-band-item fade-up">
|
||
<div class="stats-band-num" id="big-kotbeutel">…</div>
|
||
<div class="stats-band-label">Mülleimer für Kotbeutel</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Emotionaler Split: Eric Ward -->
|
||
<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));min-height:420px;overflow:hidden">
|
||
<div style="position:relative;min-height:300px">
|
||
<img src="/img/landing/eric-ward.webp" alt="Hundebesitzer umarmt seinen Golden Retriever"
|
||
loading="lazy"
|
||
style="position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block">
|
||
<span class="photo-credit">© Eric Ward · Unsplash</span>
|
||
</div>
|
||
<div style="background:linear-gradient(135deg,#C4843A 0%,#d4944a 100%);color:white;
|
||
display:flex;flex-direction:column;justify-content:center;
|
||
padding:clamp(2rem,5vw,3.5rem);gap:1.5rem">
|
||
<p style="font-size:clamp(1.3rem,2.5vw,1.9rem);font-weight:800;line-height:1.3;margin:0">
|
||
„Ich kann mir ein Leben ohne ihn nicht mehr vorstellen."
|
||
</p>
|
||
<p style="font-size:1rem;opacity:0.88;margin:0;line-height:1.65">
|
||
Das sagen uns Tausende Hundemenschen täglich. Ban Yaro begleitet diese Liebe — mit Tagebuch, Gesundheit, Training und einer Gemeinschaft die genauso fühlt wie du.
|
||
</p>
|
||
<a href="/" class="cta-btn"
|
||
style="align-self:flex-start;background:white;color:#a86e2e;margin:0;box-shadow:0 4px 20px rgba(0,0,0,.2)"
|
||
data-stay-in-app>Kostenlos starten</a>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Demo-Video -->
|
||
<section id="demo" style="position:relative;background:#1a1a1a;padding:64px 20px;text-align:center;overflow:hidden">
|
||
<img src="/img/landing/baptist-standaert.webp" alt=""
|
||
loading="lazy" aria-hidden="true"
|
||
style="position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 20%;opacity:0.15;filter:grayscale(50%)">
|
||
<span class="photo-credit" style="position:absolute;top:7px;right:9px">© Baptist Standaert · Unsplash</span>
|
||
<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 1–10. 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, Tipps weitergeben — 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 kostenlos, ohne Provision. Ihr einigt euch direkt.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<span class="section-cta-link" data-toggle-target="hundebesitzer-details"
|
||
data-toggle-text-open="▴ Weniger anzeigen"
|
||
style="cursor:pointer">+ 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 & 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 & 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 & Zecken-Alarm</h3><p>7-Tage-Wetter, tägliche Bewertung 1–10 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#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 & 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#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>
|
||
|
||
<!-- Foto-Strip -->
|
||
<section style="padding:0;overflow:hidden">
|
||
<div style="display:grid;grid-template-columns:repeat(4,1fr);gap:3px">
|
||
<div style="position:relative;aspect-ratio:1;overflow:hidden">
|
||
<img src="/img/landing/alvan-nee.webp" alt="Zwei Hunde laufen einen Waldweg entlang" loading="lazy"
|
||
style="width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease">
|
||
<span class="photo-credit">© Alvan Nee · Unsplash</span>
|
||
</div>
|
||
<div style="position:relative;aspect-ratio:1;overflow:hidden">
|
||
<img src="/img/landing/nicholas-brownlow.webp" alt="Frau gibt ihrem Golden Retriever einen Kuss" loading="lazy"
|
||
style="width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease">
|
||
<span class="photo-credit">© Nicholas Brownlow · Unsplash</span>
|
||
</div>
|
||
<div style="position:relative;aspect-ratio:1;overflow:hidden">
|
||
<img src="/img/landing/wade-austin-ellis.webp" alt="Frau mit Labrador auf der Wiese" loading="lazy"
|
||
style="width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease">
|
||
<span class="photo-credit">© Wade Austin Ellis · Unsplash</span>
|
||
</div>
|
||
<div style="position:relative;aspect-ratio:1;overflow:hidden">
|
||
<img src="/img/landing/tamas-pap.webp" alt="Frau lacht während ihr Hund sie abschleckt" loading="lazy"
|
||
style="width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease">
|
||
<span class="photo-credit">© Tamas Pap · Unsplash</span>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Testimonials -->
|
||
<section id="stimmen" style="background:white">
|
||
<div class="container">
|
||
<h2>Was Hundemenschen sagen</h2>
|
||
<p class="section-intro">Echte Menschen. Echte Hunde. Echte Momente.</p>
|
||
<div class="testimonials-grid">
|
||
|
||
<div class="testimonial-card fade-up">
|
||
<div class="testimonial-stars">★★★★★</div>
|
||
<p class="testimonial-quote testimonial-placeholder">Hier könnte dein Zitat stehen — schreib uns an hallo@banyaro.app</p>
|
||
<div>
|
||
<div class="testimonial-author">Maria K.</div>
|
||
<div class="testimonial-dog"><svg viewBox="0 0 256 256" style="width:.85rem;height:.85rem;fill:currentColor;vertical-align:middle"><use href="/icons/phosphor.svg#paw-print"></use></svg> Luna · Golden Retriever</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="testimonial-card fade-up">
|
||
<div class="testimonial-stars">★★★★★</div>
|
||
<p class="testimonial-quote testimonial-placeholder">Hier könnte dein Zitat stehen — schreib uns an hallo@banyaro.app</p>
|
||
<div>
|
||
<div class="testimonial-author">Thomas W.</div>
|
||
<div class="testimonial-dog"><svg viewBox="0 0 256 256" style="width:.85rem;height:.85rem;fill:currentColor;vertical-align:middle"><use href="/icons/phosphor.svg#paw-print"></use></svg> Max · Labrador</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="testimonial-card fade-up">
|
||
<div class="testimonial-stars">★★★★★</div>
|
||
<p class="testimonial-quote testimonial-placeholder">Hier könnte dein Zitat stehen — schreib uns an hallo@banyaro.app</p>
|
||
<div>
|
||
<div class="testimonial-author">Sarah M.</div>
|
||
<div class="testimonial-dog"><svg viewBox="0 0 256 256" style="width:.85rem;height:.85rem;fill:currentColor;vertical-align:middle"><use href="/icons/phosphor.svg#paw-print"></use></svg> Bella · Schäferhund</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>
|
||
|
||
<!-- Läufigkeit Feature Spotlight -->
|
||
<div style="margin-top:3rem;display:grid;grid-template-columns:1fr 1fr;gap:2.5rem;align-items:center">
|
||
<div>
|
||
<p style="font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:#C4843A;margin:0 0 .5rem">Läufigkeit & Trächtigkeit</p>
|
||
<h3 style="margin:0 0 1rem;font-size:1.4rem">Kein Zettelkaos mehr.</h3>
|
||
<p style="color:#555;line-height:1.7;margin:0 0 1.25rem">Progesterontests, Deckdaten und Trächtigkeits-Meilensteine an einem Ort. Die App berechnet automatisch wann der früheste Ultraschall möglich ist, wann der Bauch sichtbar wird — und erinnert dich rechtzeitig.</p>
|
||
<ul style="list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.5rem;color:#444;font-size:.9rem">
|
||
<li style="display:flex;gap:.5rem;align-items:flex-start">
|
||
<svg viewBox="0 0 256 256" style="width:1rem;height:1rem;flex-shrink:0;margin-top:2px;fill:#C4843A"><use href="/icons/phosphor.svg#check-circle"></use></svg>
|
||
Zykluskalender mit Beginn, Ende und Dauer
|
||
</li>
|
||
<li style="display:flex;gap:.5rem;align-items:flex-start">
|
||
<svg viewBox="0 0 256 256" style="width:1rem;height:1rem;flex-shrink:0;margin-top:2px;fill:#C4843A"><use href="/icons/phosphor.svg#check-circle"></use></svg>
|
||
Progesteronkurve: Werte, Labor, Übersicht
|
||
</li>
|
||
<li style="display:flex;gap:.5rem;align-items:flex-start">
|
||
<svg viewBox="0 0 256 256" style="width:1rem;height:1rem;flex-shrink:0;margin-top:2px;fill:#C4843A"><use href="/icons/phosphor.svg#check-circle"></use></svg>
|
||
8 automatische Trächtigkeits-Meilensteine
|
||
</li>
|
||
<li style="display:flex;gap:.5rem;align-items:flex-start">
|
||
<svg viewBox="0 0 256 256" style="width:1rem;height:1rem;flex-shrink:0;margin-top:2px;fill:#C4843A"><use href="/icons/phosphor.svg#check-circle"></use></svg>
|
||
Deckdaten: Rüde, Deckart, Ultraschall-Ergebnis
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<div style="background:linear-gradient(135deg,#1a1208,#2d1f0e);border-radius:16px;padding:1.25rem;font-size:.82rem;color:white">
|
||
<div style="font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(196,132,58,.7);margin-bottom:.75rem">Beispiel — Luna vom Bergwald</div>
|
||
<!-- Deckung -->
|
||
<div style="background:rgba(255,255,255,.06);border:1px solid rgba(196,132,58,.3);border-radius:10px;padding:.75rem;margin-bottom:.5rem">
|
||
<div style="display:flex;align-items:center;gap:.5rem;margin-bottom:.35rem">
|
||
<svg viewBox="0 0 256 256" style="width:.9rem;height:.9rem;fill:#e74c7a;flex-shrink:0"><use href="/icons/phosphor.svg#heart"></use></svg>
|
||
<span style="font-weight:700">Deckung 14.05.2026</span>
|
||
<span style="background:rgba(34,197,94,.2);color:#4ade80;border-radius:4px;padding:1px 6px;font-size:.7rem;font-weight:600;margin-left:auto">Trächtig ✓</span>
|
||
</div>
|
||
<div style="color:rgba(255,255,255,.55);font-size:.75rem">Blitz vom Schwarzwaldforst ZB 44201 · Natürlich</div>
|
||
<!-- Nächster Meilenstein -->
|
||
<div style="background:rgba(196,132,58,.15);border:1px solid rgba(196,132,58,.4);border-radius:6px;padding:.4rem .6rem;margin-top:.5rem;font-size:.72rem;display:flex;align-items:center;gap:.35rem">
|
||
<svg viewBox="0 0 256 256" style="width:.75rem;height:.75rem;fill:#C4843A;flex-shrink:0"><use href="/icons/phosphor.svg#calendar-check"></use></svg>
|
||
<span style="color:#f5c07a;font-weight:600">Frühester Ultraschall · Tag 21 · 04.06.2026</span>
|
||
</div>
|
||
</div>
|
||
<!-- Meilensteine -->
|
||
<div style="display:flex;flex-direction:column;gap:.3rem">
|
||
<div style="font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.35);margin-bottom:.1rem">Trächtigkeits-Meilensteine</div>
|
||
<div style="display:flex;align-items:center;gap:.5rem;color:rgba(255,255,255,.7)"><span style="background:rgba(196,132,58,.25);color:#f5c07a;border-radius:50%;width:18px;height:18px;display:flex;align-items:center;justify-content:center;font-size:.65rem;font-weight:700;flex-shrink:0">21</span>04.06. Frühester Ultraschall möglich</div>
|
||
<div style="display:flex;align-items:center;gap:.5rem;color:rgba(255,255,255,.7)"><span style="background:rgba(196,132,58,.25);color:#f5c07a;border-radius:50%;width:18px;height:18px;display:flex;align-items:center;justify-content:center;font-size:.65rem;font-weight:700;flex-shrink:0">25</span>08.06. Welpen erkennbar im Ultraschall</div>
|
||
<div style="display:flex;align-items:center;gap:.5rem;color:rgba(255,255,255,.7)"><span style="background:rgba(196,132,58,.25);color:#f5c07a;border-radius:50%;width:18px;height:18px;display:flex;align-items:center;justify-content:center;font-size:.65rem;font-weight:700;flex-shrink:0">35</span>18.06. Bauch wird sichtbar</div>
|
||
<div style="display:flex;align-items:center;gap:.5rem;color:rgba(255,255,255,.5);font-size:.72rem;margin-top:.1rem">+ 5 weitere Meilensteine bis Geburtstermin</div>
|
||
</div>
|
||
<!-- Progesterontests -->
|
||
<div style="border-top:1px solid rgba(255,255,255,.1);margin-top:.75rem;padding-top:.75rem">
|
||
<div style="font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.35);margin-bottom:.4rem">Progesteronkurve</div>
|
||
<div style="display:flex;gap:.5rem;align-items:flex-end;height:40px">
|
||
<div style="display:flex;flex-direction:column;align-items:center;gap:2px;flex:1">
|
||
<div style="background:#C4843A;width:100%;border-radius:2px 2px 0 0;height:30%"></div>
|
||
<span style="font-size:.6rem;color:rgba(255,255,255,.4)">10.8</span>
|
||
</div>
|
||
<div style="display:flex;flex-direction:column;align-items:center;gap:2px;flex:1">
|
||
<div style="background:#C4843A;width:100%;border-radius:2px 2px 0 0;height:65%"></div>
|
||
<span style="font-size:.6rem;color:rgba(255,255,255,.4)">17.5</span>
|
||
</div>
|
||
<div style="display:flex;flex-direction:column;align-items:center;gap:2px;flex:1">
|
||
<div style="background:#f5c07a;width:100%;border-radius:2px 2px 0 0;height:100%"></div>
|
||
<span style="font-size:.6rem;color:rgba(255,255,255,.4)">22.3</span>
|
||
</div>
|
||
</div>
|
||
<div style="font-size:.65rem;color:rgba(255,255,255,.3);margin-top:.25rem">ng/ml · Ovulation erreicht</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Verzahnung -->
|
||
<section id="verbindung" style="background:linear-gradient(135deg,#1a1208 0%,#2d1f0e 50%,#1a1208 100%);padding:4rem 0;color:white">
|
||
<div class="container" style="text-align:center">
|
||
<p style="font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:rgba(196,132,58,.7);margin:0 0 .75rem">Das Alleinstellungsmerkmal</p>
|
||
<h2 style="color:white;margin-bottom:1rem">Der Welpe geht mit.</h2>
|
||
<p style="color:rgba(255,255,255,.7);max-width:560px;margin:0 auto 3rem;font-size:1.05rem;line-height:1.7">Züchter und Käufer benutzen dieselbe App. Das Welpen-Profil mit Gewichtsverlauf, Impfungen und Stammbaum überträgt sich bei der Abgabe direkt — kein Papierstapel, kein vergessener Impfausweis.</p>
|
||
|
||
<div style="display:flex;align-items:center;justify-content:center;gap:1rem;flex-wrap:wrap;max-width:720px;margin:0 auto">
|
||
|
||
<div style="background:rgba(255,255,255,.08);border:1px solid rgba(196,132,58,.3);border-radius:12px;padding:1.25rem 1.5rem;flex:1;min-width:160px;text-align:left">
|
||
<div style="width:2rem;height:2rem;margin-bottom:.5rem">
|
||
<svg viewBox="0 0 256 256" style="width:100%;height:100%;fill:white"><use href="/icons/phosphor.svg#house-line"></use></svg>
|
||
</div>
|
||
<div style="font-weight:700;font-size:.95rem;margin-bottom:.25rem">Züchter</div>
|
||
<div style="font-size:.82rem;color:rgba(255,255,255,.6)">Legt Wurf an, dokumentiert Welpen, veröffentlicht in der Wurfbörse</div>
|
||
</div>
|
||
|
||
<div style="color:rgba(196,132,58,.8);font-size:1.5rem;flex-shrink:0">→</div>
|
||
|
||
<div style="background:rgba(255,255,255,.08);border:1px solid rgba(196,132,58,.3);border-radius:12px;padding:1.25rem 1.5rem;flex:1;min-width:160px;text-align:left">
|
||
<div style="width:2rem;height:2rem;margin-bottom:.5rem">
|
||
<svg viewBox="0 0 256 256" style="width:100%;height:100%;fill:white"><use href="/icons/phosphor.svg#magnifying-glass"></use></svg>
|
||
</div>
|
||
<div style="font-weight:700;font-size:.95rem;margin-bottom:.25rem">Käufer</div>
|
||
<div style="font-size:.82rem;color:rgba(255,255,255,.6)">Findet Wurf in der Wurfbörse, kontaktiert Züchter direkt per Chat</div>
|
||
</div>
|
||
|
||
<div style="color:rgba(196,132,58,.8);font-size:1.5rem;flex-shrink:0">→</div>
|
||
|
||
<div style="background:rgba(196,132,58,.15);border:1px solid rgba(196,132,58,.5);border-radius:12px;padding:1.25rem 1.5rem;flex:1;min-width:160px;text-align:left">
|
||
<div style="width:2rem;height:2rem;margin-bottom:.5rem">
|
||
<svg viewBox="0 0 256 256" style="width:100%;height:100%;fill:#f5c07a"><use href="/icons/phosphor.svg#dog"></use></svg>
|
||
</div>
|
||
<div style="font-weight:700;font-size:.95rem;margin-bottom:.25rem;color:#f5c07a">Übergabe</div>
|
||
<div style="font-size:.82rem;color:rgba(255,255,255,.6)">Welpen-Profil mit allem landet direkt in der App des neuen Besitzers</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<p style="margin:2.5rem auto 0;font-size:.85rem;color:rgba(255,255,255,.4);max-width:480px">Das kann keine reine Züchter-Software. Das kann keine reine Community-App. Nur eine Plattform die beide verbindet.</p>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Sektion C: Für Welpenkäufer -->
|
||
<section id="welpen" style="background: white;">
|
||
<div style="position:relative;height:280px;overflow:hidden">
|
||
<img src="/img/landing/chewy.webp" alt="Pärchen mit Hund aus dem Tierheim" loading="lazy"
|
||
style="width:100%;height:100%;object-fit:cover;object-position:center 40%">
|
||
<div style="position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,.1),rgba(0,0,0,.55))"></div>
|
||
<span class="photo-credit">© Chewy · Unsplash</span>
|
||
</div>
|
||
<div class="container">
|
||
<h2 style="margin-top:2.5rem">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>
|
||
|
||
</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 — direkt im Browser.</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>Direkt im Browser nutzbar (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 & Impfpass</td>
|
||
<td class="check">✓</td>
|
||
<td class="cross">✗</td>
|
||
<td class="check">✓</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Forum & Community</td>
|
||
<td class="check">✓</td>
|
||
<td class="cross">✗</td>
|
||
<td class="check">✓</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Gassi-Treffen & Playdates</td>
|
||
<td class="check">✓</td>
|
||
<td class="cross">✗</td>
|
||
<td class="check">✓</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Wurfbörse & Zucht-Management</td>
|
||
<td class="check">✓</td>
|
||
<td class="cross">✗</td>
|
||
<td class="cross">✗</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Stammbaum & 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</td>
|
||
<td class="check">✓ > 1.000</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.</p>
|
||
<div class="pricing-grid" style="max-width:900px;margin:0 auto;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))">
|
||
|
||
<!-- Kostenlos -->
|
||
<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</li>
|
||
<li>Persönlichkeitstest, Adoption, Ausgaben</li>
|
||
</ul>
|
||
<a href="/" class="section-cta-btn" style="display:block;text-align:center;margin-top:1.5rem"
|
||
data-stay-in-app>Kostenlos starten</a>
|
||
</div>
|
||
|
||
<!-- Pro -->
|
||
<div class="pricing-card">
|
||
<h3>Ban Yaro Pro</h3>
|
||
<div class="pricing-price">29 € <span>/ Jahr</span></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 mit KI-Analyse</li>
|
||
<li>Alles aus Kostenlos inklusive</li>
|
||
</ul>
|
||
<a href="/" class="section-cta-btn" style="display:block;text-align:center;margin-top:1.5rem"
|
||
data-stay-in-app>Pro starten</a>
|
||
</div>
|
||
|
||
<!-- Züchter -->
|
||
<div class="pricing-card" style="border-color:var(--primary);position:relative;overflow:hidden">
|
||
<div style="position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#C4843A,#f5c07a)"></div>
|
||
<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:.25rem">
|
||
<h3 style="margin:0">Züchter</h3>
|
||
<span style="background:#fef3c7;color:#92400e;font-size:0.7rem;font-weight:700;
|
||
padding:2px 8px;border-radius:999px">
|
||
🎉 Gründer: 39 €
|
||
</span>
|
||
</div>
|
||
<div class="pricing-price">49 € <span>/ Jahr</span></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 + Warteliste</li>
|
||
<li>Kaufvertrag automatisch generiert</li>
|
||
<li>Läufigkeit & Trächtigkeits-Meilensteine</li>
|
||
<li>KI-Assistent für Züchter</li>
|
||
<li>Tierschutz-Check automatisch</li>
|
||
<li>Verifiziertes Züchterprofil</li>
|
||
</ul>
|
||
<p style="margin-top:0.75rem;font-size:0.8rem;color:var(--primary-dark);font-weight:600">
|
||
Jetzt: 39 €/Jahr für die ersten 20 Züchter
|
||
</p>
|
||
<a href="/zuechter" class="section-cta-btn" style="display:block;text-align:center;margin-top:1rem">Als Züchter registrieren</a>
|
||
</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">
|
||
<svg class="usp-icon" viewBox="0 0 256 256"><use href="/icons/phosphor.svg#flag"></use></svg>
|
||
<div>
|
||
<h3>Deutsche Plattform</h3>
|
||
<p>Hosting in Deutschland, deutschsprachiger Support, auf DACH-Nutzer zugeschnitten.</p>
|
||
</div>
|
||
</div>
|
||
<div class="usp-item">
|
||
<svg class="usp-icon" viewBox="0 0 256 256"><use href="/icons/phosphor.svg#lock-simple"></use></svg>
|
||
<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">
|
||
<svg class="usp-icon" viewBox="0 0 256 256"><use href="/icons/phosphor.svg#device-mobile"></use></svg>
|
||
<div>
|
||
<h3>Direkt im Browser</h3>
|
||
<p>Als Progressive Web App direkt über den Browser installierbar — auf iOS und Android. Sofort updatebar.</p>
|
||
</div>
|
||
</div>
|
||
<div class="usp-item">
|
||
<svg class="usp-icon" viewBox="0 0 256 256"><use href="/icons/phosphor.svg#cloud-slash"></use></svg>
|
||
<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">
|
||
<svg class="usp-icon" viewBox="0 0 256 256"><use href="/icons/phosphor.svg#handshake"></use></svg>
|
||
<div>
|
||
<h3>Sitting ohne Provision</h3>
|
||
<p>Hundesitting-Vermittlung kostenlos — keine Plattform-Provision, ihr einigt euch direkt. Rover und Pawshake nehmen 20%.</p>
|
||
</div>
|
||
</div>
|
||
<div class="usp-item">
|
||
<svg class="usp-icon" viewBox="0 0 256 256"><use href="/icons/phosphor.svg#map-trifold"></use></svg>
|
||
<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">
|
||
<svg class="usp-icon" viewBox="0 0 256 256"><use href="/icons/phosphor.svg#shield-check"></use></svg>
|
||
<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">
|
||
<svg class="usp-icon" viewBox="0 0 256 256"><use href="/icons/phosphor.svg#robot"></use></svg>
|
||
<div>
|
||
<h3>KI mit Datenschutz</h3>
|
||
<p>KI-Funktionen laufen standardmäßig lokal auf unserem Server in Deutschland — deine Anfragen verlassen Europa nicht. Bei Überlast Fallback auf Claude Sonnet (Anthropic, USA). Übertragen wird nur deine Frage und der Kontext (Rasse, Alter) — keine Fotos, keine sensiblen Profildaten. Kein Training mit deinen Daten.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Native iOS-App — Ban Yaro Go -->
|
||
<section id="ios-app" style="background:var(--bg)">
|
||
<div class="container">
|
||
<div class="ios-card" style="background:white;border:2px solid var(--border);border-radius:18px;padding:clamp(1.75rem,5vw,3rem);text-align:center;max-width:780px;margin:0 auto;box-shadow:0 8px 32px rgba(0,0,0,.06)">
|
||
<span style="display:inline-flex;align-items:center;gap:.45rem;background:var(--primary-light);color:var(--primary);font-weight:700;font-size:.78rem;letter-spacing:.04em;text-transform:uppercase;padding:.4rem 1rem;border-radius:999px;margin-bottom:1rem">
|
||
<svg viewBox="0 0 256 256" style="width:1rem;height:1rem;fill:currentColor"><use href="/icons/phosphor.svg#apple-logo"></use></svg>
|
||
Jetzt im App Store
|
||
</span>
|
||
<h2 style="margin:0 0 .75rem">Lieber nativ? Ban Yaro Go fürs iPhone</h2>
|
||
<p class="section-intro" style="margin:0 auto 2rem">Die native App ist auf das gemacht, was unterwegs wirklich zählt — und läuft auch dann weiter, wenn der Browser längst aufgegeben hätte.</p>
|
||
|
||
<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1.4rem;text-align:left;margin-bottom:2.25rem">
|
||
<div class="usp-item">
|
||
<svg class="usp-icon" viewBox="0 0 256 256"><use href="/icons/phosphor.svg#device-mobile"></use></svg>
|
||
<div>
|
||
<h3>Track läuft einfach weiter</h3>
|
||
<p>Die Aufzeichnung läuft im Hintergrund — auch bei gesperrtem Display, in der Hosentasche oder während du telefonierst. Mit Live-Aktivität in der Dynamic Island und automatischer Pause beim Stehenbleiben.</p>
|
||
</div>
|
||
</div>
|
||
<div class="usp-item">
|
||
<svg class="usp-icon" viewBox="0 0 256 256"><use href="/icons/phosphor.svg#cloud-slash"></use></svg>
|
||
<div>
|
||
<h3>Funkloch-sicher unterwegs</h3>
|
||
<p>Kein Empfang? Egal. Die Tour wird lokal auf dem iPhone gesichert und automatisch hochgeladen, sobald wieder Netz da ist. Hunde, Touren und Tagebuch sind offline dabei.</p>
|
||
</div>
|
||
</div>
|
||
<div class="usp-item">
|
||
<svg class="usp-icon" viewBox="0 0 256 256"><use href="/icons/phosphor.svg#heartbeat"></use></svg>
|
||
<div>
|
||
<h3>Tief in iOS integriert</h3>
|
||
<p>Touren landen auf Wunsch als Spaziergang-Workout in Apple Health, Fotos hängen am richtigen Streckenpunkt, und GPX-Tracks aus Komoot & Co. kommen per Teilen-Menü rein.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<a href="https://apps.apple.com/app/ban-yaro-go/id6775012705" data-appstore aria-label="Ban Yaro Go im App Store laden" style="display:inline-block;line-height:0;margin-top:.5rem">
|
||
<img src="/img/appstore-badge-de.svg" alt="Laden im App Store" style="height:58px;width:auto">
|
||
</a>
|
||
<p style="font-size:.85rem;color:var(--text-muted);margin-top:1rem">Kostenlos · iPhone, iOS 17+ · banyaro.app bleibt im Browser voll nutzbar</p>
|
||
</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. Keine Installation, 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:0">
|
||
<!-- Ban Yaro persönlich -->
|
||
<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));overflow:hidden">
|
||
<div style="position:relative;height:360px;max-height:420px">
|
||
<img src="/img/landing/ban-yaro-original.webp"
|
||
alt="Ban Yaro — der echte Hund hinter der App"
|
||
loading="lazy"
|
||
style="position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%;display:block">
|
||
</div>
|
||
<div style="background:var(--bg,#FAF7F2);padding:clamp(2rem,5vw,3.5rem);display:flex;flex-direction:column;justify-content:center;gap:1rem">
|
||
<h2 style="margin:0">Warum „Ban Yaro"?</h2>
|
||
<p style="color:var(--text-secondary,#555);line-height:1.75;margin:0">
|
||
Ban Yaro ist ein echter Hund — aus dem B-Wurf einer Züchterin die Star Wars liebt
|
||
und ihre Würfe nach Charakteren des Epos benennt. Er ist der Namensgeber dieser App
|
||
und lebt in Ebersberg, Bayern.
|
||
</p>
|
||
<p style="color:var(--text-secondary,#555);line-height:1.75;margin:0">
|
||
Ban Yaro wurde von einem Hundemenschen für Hundemenschen gebaut — von René Degelmann,
|
||
der genau weiß wie es sich anfühlt seinen Hund täglich zu begleiten.
|
||
</p>
|
||
<p style="font-size:0.85rem;color:var(--text-muted,#888);margin:0">
|
||
Ebersberg, Bayern · gegründet 2026 · <a href="mailto:hallo@banyaro.app">hallo@banyaro.app</a>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div class="container" style="text-align:center;padding-top:3rem;padding-bottom:3rem">
|
||
|
||
<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>
|
||
</div><!-- end container -->
|
||
</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 <svg viewBox="0 0 256 256" style="width:.9rem;height:.9rem;fill:#C4843A;vertical-align:middle;display:inline-block"><use href="/icons/phosphor.svg#paw-print"></use></svg></p>
|
||
<div class="footer-links">
|
||
<a href="/#impressum">Impressum</a>
|
||
<a href="/#datenschutz">Datenschutz</a>
|
||
<a href="/#agb">AGB</a>
|
||
<a href="/presse">Presse</a>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
|
||
|
||
</body>
|
||
</html>
|