import { useState, useEffect, useRef } from „react“; /* ───────────────────────────────────────────────────────────────────────────── TIERHEILPRAXIS SEEBERGER — Vollständiger Online-Kurs Landing Page + Paywall + 7 Module + Quiz + Checkliste + Zertifikat ───────────────────────────────────────────────────────────────────────────── */ const FONTS = `@import url(‚https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;0,700;1,400;1,600&family=DM+Sans:wght@300;400;500;700&display=swap‘);`; const CSS = ` *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { –cream: #FAF5ED; –warm-white: #FFFCF7; –gold: #B8860B; –gold-light: #D4A017; –gold-pale: #F5E6BB; –brown-dark: #1E0F07; –brown-mid: #3D1F0D; –brown-warm: #6B3A1F; –brown-light: #A0734A; –text: #2A1408; –text-mid: #5C3A1E; –text-muted: #9A7055; –border: #E8D8B8; –success: #2D6A4F; –error: #8B2020; } body { font-family: ‚DM Sans‘, sans-serif; background: var(–cream); color: var(–text); } .serif { font-family: ‚Cormorant Garamond‘, serif; } .fade-in { animation: fadeIn 0.6s ease forwards; } .slide-up { animation: slideUp 0.5s ease forwards; } @keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } } @keyframes slideUp { from { opacity: 0; transform: translateY(20px) } to { opacity: 1; transform: translateY(0) } } @keyframes pulse { 0%,100% { transform: scale(1) } 50% { transform: scale(1.03) } } @keyframes shimmer { 0% { background-position: -200% center } 100% { background-position: 200% center } } .btn-gold { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 16px 36px; background: linear-gradient(135deg, var(–gold), var(–gold-light)); color: #fff; border: none; border-radius: 4px; cursor: pointer; font-family: ‚DM Sans‘, sans-serif; font-weight: 700; font-size: 16px; letter-spacing: 0.5px; transition: all 0.3s; box-shadow: 0 4px 20px rgba(184,134,11,0.4); } .btn-gold:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(184,134,11,0.5); } .btn-ghost { padding: 10px 20px; background: transparent; border: 1.5px solid var(–border); border-radius: 4px; cursor: pointer; font-family: ‚DM Sans‘, sans-serif; font-size: 13px; color: var(–text-muted); transition: all 0.2s; } .btn-ghost:hover { border-color: var(–gold); color: var(–gold); } .card { background: var(–warm-white); border: 1px solid var(–border); border-radius: 6px; } @media print { .no-print { display: none !important; } body { background: #fff; } } @media (max-width: 600px) { .hero-title { font-size: 36px !important; } .grid-2 { grid-template-columns: 1fr !important; } } `; /* ── COURSE DATA ─────────────────────────────────────────────────────────────*/ const MODULES = [ { id: 1, icon: „I“, title: „Geschichte & Ziele“, sub: „Die Wurzeln der klassischen Massage“, dur: „10 min“, color: „#6B3A1F“, sections: [ { h: „Die Geschichte der Klassischen Massage“, p: „Massage ist eines der ältesten Heilmittel der Medizin und hat durch alle Kulturen ihre Wurzeln immer mehr gefestigt. Die klassische Massage der heutigen Form hat ihren Ursprung in der griechisch-römischen Tradition. Im 19. Jahrhundert erhielt sie die entscheidende Prägung durch den schwedischen Heilgymnasten Per Ling und den holländischen Arzt J. Georg Mezger.“ }, { type: „etymology“, items: [{ l: „Griechisch“, w: „massein“, m: „kneten“ }, { l: „Hebräisch“, w: „massa“, m: „betasten“ }, { l: „Arabisch“, w: „massah“, m: „reiben, streichen“ }] }, { h: „Grifftechniken der klassischen Massage“, type: „list“, items: [„Streichungen“, „Knetungen“, „Friktion“, „Vibration“, „Klopfungen“, „Erschütternde und schüttelnde Griffe“] }, { h: „Was du in diesem Kurs lernst“, type: „goals“, items: [„Einblick in die Anatomie des Hundes gewinnen“, „Relevante Strukturen für eine Massage kennen“, „Wissen, welche Systeme von Massage profitieren“, „Auswirkungen auf Wohlbefinden & Gangbild verstehen“, „Grundlagen der klassischen Massagetechniken erlernen“] }, { h: „Das Therapieprinzip“, p: „Der individuelle Aufbau jeder Massagetherapie ergibt sich aus der erwünschten therapeutischen Wirkung, von der auch Intensität, Dauer und Schnelligkeit der Griffe sowie deren Kombinationen abhängig sind. Es geht nicht um irgendeine Massage, sondern immer um die richtige Massage.“ }, ], quiz: [ { q: „In welchem Jahrhundert wurde die klassische Massage durch Per Ling maßgeblich geprägt?“, opts: [„17. Jhd.“, „18. Jhd.“, „19. Jhd.“, „20. Jhd.“], c: 2 }, { q: „Was bedeutet das arabische Wort ‚massah‘?“, opts: [„kneten“, „betasten“, „reiben, streichen“, „entspannen“], c: 2 }, { q: „Welche Tradition bildet den Ursprung der heutigen klassischen Massage?“, opts: [„Chinesisch-japanisch“, „Griechisch-römisch“, „Ägyptisch-persisch“, „Nordeuropäisch“], c: 1 }, ], }, { id: 2, icon: „II“, title: „Anatomie des Hundes“, sub: „Muskeln, Knochen & Gelenke“, dur: „20 min“, color: „#3D1F0D“, sections: [ { type: „two-col“, left: { h: „Passiver Bewegungsapparat“, items: [„Knochen“, „Gelenke“, „Bildet das Gerüst“, „Statische Basis“] }, right: { h: „Aktiver Bewegungsapparat“, items: [„Muskeln“, „Sehnen“, „Bänder“, „Erzeugt Bewegung“] } }, { h: „Aufbau der Muskulatur“, p: „Bei der Massage werden überwiegend Muskeln bearbeitet. Das Muskelsystem ist der aktive Teil des Bewegungsapparates — etwa 40 % des Körpergewichts entfallen auf die Muskulatur. Jeder Muskel besteht aus zahlreichen Muskelfasern, die zu Bündeln zusammengefasst sind. Zwischen den Fasern befinden sich Bindegewebe und ein dichtes Netz von Blutgefäßen.“ }, { type: „muscle-parts“, items: [{ n: „Ursprung“, d: „Befestigung am stabileren Knochen“ }, { n: „Muskelbauch“, d: „Das eigentliche Muskelfleisch in der Mitte“ }, { n: „Ansatz“, d: „Befestigung am beweglicheren Knochen“ }, { n: „Fazien“, d: „Bindegewebshülle mit Nerven und Gefäßen“ }] }, { h: „Warum Knochen relevant sind“, p: „Jeder Massierende sollte wissen, ob er gerade auf dem Muskelbauch massiert oder die Sehne und den Knochen in den Fingern hat. Skelettmuskulatur befindet sich stets im engen Kontakt zum Knochen — sie können auf, neben oder sogar zwischen zwei Knochen liegen.“ }, { type: „spine-table“, h: „Wirbelsäule des Hundes“, rows: [[„Halswirbelsäule“, „7“], [„Widerrist (Dornfortsätze)“, „5“], [„Brustwirbelsäule“, „13“], [„Lendenwirbelsäule“, „7“], [„Kreuzbeinwirbel“, „3“], [„Schwanzwirbelsäule“, „18–22“], [„Echte Rippenpaare“, „9“], [„Falsche Rippenpaare“, „4“]] }, ], quiz: [ { q: „Wie viel Prozent des Körpergewichts macht Muskulatur aus?“, opts: [„ca. 20 %“, „ca. 30 %“, „ca. 40 %“, „ca. 60 %“], c: 2 }, { q: „Was bezeichnet man als ‚Muskelbauch‘?“, opts: [„Befestigung am Knochen“, „Muskelfleisch zwischen Ursprung & Ansatz“, „Die Muskelhülle“, „Den beweglichen Knochenansatz“], c: 1 }, { q: „Wie viele Halswirbel hat ein Hund?“, opts: [„5“, „6“, „7“, „9“], c: 2 }, ], }, { id: 3, icon: „III“, title: „Physiologische Wirkung“, sub: „Was Massage im Körper bewirkt“, dur: „15 min“, color: „#1E3A2F“, sections: [ { h: „Was passiert im Muskel unter Belastung?“, p: „Ständige Muskelarbeit führt zum Abbau energiereicher Substanzen. Diese spalten sich in saure Stoffwechselprodukte (Laktate = Milchsäure), die die Leistungsfähigkeit herabsetzen. Sehr häufige Kontraktionen verhindern, dass der Muskel vollständig in seine Ruhelänge zurückkehren kann — gestörte Muskel-Gelenk-Beziehungen entstehen.“ }, { type: „effects-grid“, items: [{ ic: „🩸“, t: „Durchblutung“, d: „Gesteigerte Durchblutung transportiert Stoffwechselschlacken rasch ab.“ }, { ic: „🧹“, t: „Entschlackung“, d: „Milchsäure und Abbauprodukte werden aus dem Gewebe herausgespült.“ }, { ic: „🌊“, t: „Lymphfluss“, d: „Das Lymphsystem wird angeregt, Schwellungen werden reduziert.“ }, { ic: „😌“, t: „Entspannung“, d: „Muskeln nehmen ihre volle Länge wieder ein, Verspannungen lösen sich.“ }, { ic: „❤️“, t: „Bindung“, d: „Die Massage stärkt die Beziehung zwischen Hund und Besitzer nachhaltig.“ }, { ic: „⚡“, t: „Regeneration“, d: „Erholung wird beschleunigt, Verletzungsrisiko sinkt.“ }] }, { h: „Wirkung auf Haut und Gefäße“, p: „Schon bei leichten Reibungen oder Streichungen kommt es zur Rötung der Haut. Dabei werden nicht nur die Kapillaren, sondern auch oberflächliche Venen und das Lymphsystem angesprochen. Das darunter liegende Gewebe reagiert auf kräftigere Griffe wie dehnende Streichungen und Zirkelungen.“ }, { type: „intensity-bar“, h: „Intensität & Wirkung“, items: [{ l: „Langsam & sanft“, e: „entspannend, beruhigend“, p: 28 }, { l: „Mittel & rhythmisch“, e: „durchblutungsfördernd“, p: 60 }, { l: „Kräftig & schnell“, e: „tonisierend, aktivierend“, p: 92 }] }, ], quiz: [ { q: „Wie heißt das Abbauprodukt, das bei intensiver Muskelarbeit entsteht?“, opts: [„Glukose“, „Laktat (Milchsäure)“, „Serotonin“, „Kollagen“], c: 1 }, { q: „Was bewirkt eine langsame, sanfte Massage?“, opts: [„Erhöht die Muskelspannung“, „Aktiviert und tonisiert“, „Entspannt und beruhigt“, „Kühlt das Gewebe“], c: 2 }, { q: „Welches System wird bei der Massage neben Blutgefäßen ebenfalls angesprochen?“, opts: [„Verdauungssystem“, „Lymphsystem“, „Hormonsystem“, „Knochensystem“], c: 1 }, ], }, { id: 4, icon: „IV“, title: „Vorbereitung & Kontraindikationen“, sub: „Wann & wie du massierst — und wann nicht“, dur: „10 min“, color: „#6B1F1F“, sections: [ { h: „Grundlagen zur Behandlung“, p: „Führe die Behandlung nur durch, wenn du und dein Hund sich voll darauf konzentrieren können. Schalte alle Ablenkungen aus (TV, Radio) und sorge für einen ruhigen, bequemen Ort. Zwing deinem Hund die Massage nie auf — sie soll freiwillig und angenehm sein.“ }, { type: „rules-list“, h: „Goldene Vorbereitungsregeln“, items: [„Volle Aufmerksamkeit für deinen Hund — keine Ablenkungen“, „Massage ist freiwillig und angenehm für das Tier“, „Ruhig bleiben, wenn der Hund sich entziehen will“, „Jeden Griff ca. 4–6 Mal wiederholen“, „Ruhige, rhythmische und gleichmäßige Bewegungen“, „Nach Wärmeanwendung mindestens 30 Minuten Pause einhalten“, „Auf jedes noch so kleine Signal des Hundes achten“, „Uhren und Schmuck ablegen“] }, { type: „danger-box“, h: „⛔ Kontraindikationen — NICHT massieren bei:“, items: [„Fieberhaften Erkrankungen“, „Entzündlichen Prozessen (Erkältung, Abszess)“, „Infektionskrankheiten“, „Geschwürbildung“, „Tumorösen Prozessen“, „Bluterkrankungen / blutverdünnenden Medikamenten“, „Herzerkrankungen“, „Venenerkrankungen“, „Frischen Knochen- und Wirbelbrüchen“, „Großen Verletzungen / offenen Wunden“, „Trächtigkeit“, „Narbenbehandlung“, „Nach Impfung / Wurmkur“] }, ], quiz: [ { q: „Wie oft soll ein Massagegriff in der Regel wiederholt werden?“, opts: [„1–2 Mal“, „2–3 Mal“, „4–6 Mal“, „8–10 Mal“], c: 2 }, { q: „Wie lange sollte die Pause nach Wärmeanwendung mindestens dauern?“, opts: [„5 Minuten“, „15 Minuten“, „30 Minuten“, „60 Minuten“], c: 2 }, { q: „Darf ein trächtiger Hund massiert werden?“, opts: [„Ja, sanfte Massage ist erlaubt“, „Nein, Trächtigkeit ist eine Kontraindikation“, „Nur im ersten Trimester“, „Ja, mit reduziertem Druck“], c: 1 }, ], }, { id: 5, icon: „V“, title: „Die Massagegriffe“, sub: „Effleurage · Friktion · Petrissage“, dur: „25 min“, color: „#1A2E4A“, sections: [ { type: „key-rule“, t: „Regel: Eine Massage beginnt und endet immer mit einer Ausstreichung. Alle Bewegungen sind fließend — niemals ruckartig!“ }, { type: „technique-cards“, items: [ { n: „Oberflächliche Effleurage“, sub: „Streichung — der Einstieg“, ic: „〰️“, effects: [„entspannend“, „beruhigend“, „durchblutungsfördernd“, „kontaktaufbauend“], how: „Hund auf die linke Seite legen. Mit der linken Hand sanft den langen Rückenmuskel seitlich der Wirbelsäule bis zum Hüftgelenk entlangstreichen, rechte Hand liegt locker auf dem Schulterblatt. Am Hüftgelenk über den Oberschenkel weiter bis zur Pfote führen. Rechte Hand folgt nach — Körperkontakt nie unterbrechen.“, tip: „Kann als langer Strich oder schiebende/ziehende Kreise ausgeführt werden.“ }, { n: „Tiefere Effleurage“, sub: „Streichung — tiefere Schichten“, ic: „⬇️“, effects: [„dehnt Unterhaut“, „beschleunigt Blutstrom“, „bereitet auf Knetung vor“], how: „Genau wie die oberflächliche Effleurage, jedoch mit erhöhtem Druck auf Muskelpartien. An Stellen mit weniger Gewebe (Unterarm, Unterschenkel, Hals) Druck entsprechend reduzieren.“, tip: „Warte, bis der Hund sich vollständig entspannt hat, bevor du zur tiefen Effleurage wechselst.“ }, { n: „Reibung / Friktion“, sub: „Gezielte Druckpunkte“, ic: „🔄“, effects: [„löst Verklebungen“, „tiefe Durchblutung“, „Gewebemobilisation“], how: „Nicht die ganze Hand auflegen, sondern begrenzte Flächen: Daumen, Daumenballen oder Zeige-, Ring- und Mittelfinger. Bewegungen können geradlinig, kreisförmig oder spiralförmig sein. Die Haut wird gegen die Unterhaut bewegt — kein Gleiten auf der Haut.“, tip: „Reibungen werden mit deutlich stärkerem Druck als Streichungen ausgeführt.“ }, { n: „Zirkelungen / Friktion“, sub: „Spindel- & Spiralbewegungen“, ic: „🌀“, effects: [„tiefe Gewebemobilisation“, „löst Verhärtungen“, „lokale Durchblutung“], how: „Mit Fingerspitzen oder Daumen kleine spindel- oder spiralförmige Bewegungen ausführen. Druck ist relativ stark und verhindert ein Gleiten auf der Haut — stattdessen wird die Haut gegen das darunter liegende Gewebe verschoben.“, tip: „Ideal für punktuelle Verspannungen an Schulter, Kruppe oder Rücken.“ }, { n: „Knetung / Petrissage“, sub: „Tiefes Lockern & Mobilisieren“, ic: „🫳“, effects: [„löst Verklebungen“, „fördert Durchblutung“, „senkt Muskeltonus“, „lockert Verspannungen“], how: „Mit Daumen und Fingerkuppen beider Hände im Abstand von ca. 3 cm Haut und Unterhaut ergreifen und vorsichtig von der tiefer liegenden Struktur abheben. Nach der Dehnung langsam loslassen, mit den Händen nach vorne gleiten und die Haut des nächsten Segments ergreifen.“, tip: „Quer zur Faserrichtung der Muskulatur ausführen. Am besten nach der Erwärmung der Muskulatur einsetzen.“ }, ] }, ], quiz: [ { q: „Womit beginnt und endet jede Massage?“, opts: [„Knetung“, „Reibung“, „Ausstreichung (Effleurage)“, „Zirkelung“], c: 2 }, { q: „In welche Richtung zur Muskulatur wird die Knetung (Petrissage) ausgeführt?“, opts: [„Längs zur Faserrichtung“, „Diagonal“, „Quer zur Faserrichtung“, „Spiralig“], c: 2 }, { q: „Was ist das Besondere an der Reibung gegenüber der Streichung?“, opts: [„Sie wird langsamer ausgeführt“, „Sie wird mit deutlich stärkerem Druck ausgeführt“, „Sie nutzt immer die ganze Hand“, „Sie ist immer kreisförmig“], c: 1 }, ], }, { id: 6, icon: „VI“, title: „Wärmetherapie“, sub: „Heiße Rolle · Rotlicht · Körnerkissen“, dur: „15 min“, color: „#4A2800“, sections: [ { type: „two-col“, left: { h: „🌡️ Trockene Wärme“, items: [„Rotlicht“, „Wärmflasche / Fango“, „Körnerkissen“, „Durchblutungsfördernd“, „Muskelentspannend“, „Häufig bei Verspannungen“] }, right: { h: „💧 Feuchte Wärme“, items: [„Heiße Rolle“, „Badewanne / nasses Handtuch“, „Dringt tiefer ins Gewebe“, „Wirkung länger anhaltend“, „Intensiver als trockene Wärme“, „Ideal in den Abendstunden“] } }, { h: „Wer profitiert besonders?“, p: „Feuchte Wärme senkt die Muskelspannung, verbessert die Dehnbarkeit von Bändern und Sehnen sowie die Gelenkbeweglichkeit. Besonders profitieren arthrotische Hunde und Hunde mit Wirbelsäulenerkrankungen wie Spondylose oder Bandscheibenvorfall.“ }, { type: „step-by-step“, h: „Heiße Rolle — Schritt für Schritt“, steps: [„Handtuch (50×100 cm) der Länge nach in der Mitte zusammenlegen“, „Straff zu einem Trichter zusammenrollen — fest, damit keine Wärme verloren geht“, „Heißes Wasser hineingießen (250–750 ml je nach Handtuch) bis kurz vor den Trichteranfang“, „⚠️ Unbedingt zuerst am eigenen Arm testen — Verbrennungsgefahr!“, „Auf den Hund auflegen und eine der drei Techniken anwenden“, „Wenn Wärme nachlässt: Handtuch etwas abwickeln und auf der anderen Seite wieder aufrollen“] }, { type: „technique-cards“, compact: true, items: [{ n: „1. Ausstreichen“, ic: „➡️“, how: „Die heiße Rolle in Fellrichtung über das Fell streichen. Dabei leicht andrücken.“ }, { n: „2. Punktuell rollen“, ic: „⚫“, how: „Die Rolle punktuell rollen und dabei ins Gewebe drücken. Viele Hunde mögen den Druck an Rückenmuskulatur oder Hüfte.“ }, { n: „3. Kreisen“, ic: „🔵“, how: „Kreisende Bewegungen geben einen angenehmen Massageeffekt.“ }] }, { type: „danger-box“, h: „⚠️ Sicherheitshinweise“, items: [„Immer zuerst am eigenen Arm auf Temperatur testen!“, „Nach Behandlung: Fell ist nass — an kalten Tagen nicht sofort nach draußen“, „30 Minuten Pause vor einer Massage nach jeder Wärmeanwendung einhalten“] }, ], quiz: [ { q: „Was musst du tun, bevor du die heiße Rolle auf den Hund legst?“, opts: [„‚Platz‘ geben“, „Am eigenen Arm auf Temperatur testen“, „Den Hund mit Wasser besprühen“, „20 Minuten warten“], c: 1 }, { q: „Welche Wärmemethode dringt tiefer ins Gewebe?“, opts: [„Trockene Wärme (Rotlicht)“, „Feuchte Wärme (Heiße Rolle)“, „Beide gleich“, „Körperwärme“], c: 1 }, { q: „Wie groß sollte das Handtuch für die Heiße Rolle sein?“, opts: [„30×50 cm“, „50×100 cm“, „70×140 cm“, „100×200 cm“], c: 1 }, ], }, { id: 7, icon: „VII“, title: „10 Goldene Regeln“, sub: „Das Wichtigste auf einen Blick“, dur: „5 min“, color: „#2A3A1A“, sections: [ { type: „golden-rules“, items: [ { n: 1, r: „Jahrtausende altes Wissen“, d: „Massage wird zu Entspannungs- und Heilzwecken eingesetzt — respektiere dieses Wissen.“ }, { n: 2, r: „Teil des Trainingsplans“, d: „Massage gehört gleichberechtigt neben Stretching, Aufwärmen und Cool-down.“ }, { n: 3, r: „Körper- und Seelenmassage“, d: „Gute Massage ist nicht nur eine Muskelbehandlung, sondern auch ein Stück Seelenmassage.“ }, { n: 4, r: „Kein starres Schema“, d: „Jede Massage muss individuell auf Zweck, Hund und Situation abgestimmt sein.“ }, { n: 5, r: „Wellness ≠ Heilmassage“, d: „Wellness- und Sportmassage sind keine medizinische Heilmassage und umgekehrt.“ }, { n: 6, r: „Kontraindikationen beachten“, d: „Halte dich strikt an die Gegenanzeigen — z.B. bei Fieber oder frischen Verletzungen niemals massieren.“ }, { n: 7, r: „Blickkontakt halten“, d: „Nur so erhältst du die wichtige Rückmeldung, wie die Griffe auf deinen Hund wirken.“ }, { n: 8, r: „Kommunikation gehört dazu“, d: „Beruhigende oder motivierende Worte sind Teil jeder guten Massagebehandlung.“ }, { n: 9, r: „Langsam = entspannend“, d: „Langsam mit mäßigem Druck ausgeführte Griffe wirken entspannend und beruhigend.“ }, { n: 10, r: „Schnell = aktivierend“, d: „Kräftige, schnelle Griffe erhöhen die Muskelspannung — manchmal durchaus gewünscht.“ }, ] }, ], quiz: [ { q: „Was bewirken kräftige, schnelle Massagegriffe?“, opts: [„Sie entspannen die Muskulatur“, „Sie erhöhen die Muskelspannung“, „Sie kühlen das Gewebe“, „Keine Wirkung“], c: 1 }, { q: „Ist Wellness-Massage dasselbe wie eine medizinische Heilmassage?“, opts: [„Ja, identisch“, „Nein, klar voneinander zu trennen“, „Nur bei älteren Hunden“, „Ja, wenn vom Tierarzt empfohlen“], c: 1 }, { q: „Warum ist Blickkontakt während der Massage wichtig?“, opts: [„Damit der Hund nicht einschläft“, „Um Reaktion auf die Griffe zu beobachten“, „Als Dominanzsignal“, „Ist nicht wichtig“], c: 1 }, ], }, ]; const CHECKLIST = [ { cat: „Vorbereitung“, items: [„Ruhiger, ablenkungsfreier Ort gewählt“, „TV, Radio und Handy ausgeschaltet“, „Uhren und Schmuck abgelegt“, „Bequeme Unterlage für den Hund bereit“, „Hund ist ruhig und kooperativ“] }, { cat: „Gesundheitscheck“, items: [„Kein Fieber beim Hund“, „Keine offenen Wunden oder Entzündungen“, „Keine frischen Knochen-/Wirbelbrüche“, „Keine Trächtigkeit“, „Keine kürzliche Impfung oder Wurmkur“] }, { cat: „Während der Massage“, items: [„Mit oberflächlicher Effleurage begonnen“, „Blickkontakt zum Hund gehalten“, „Jeden Griff 4–6 Mal wiederholt“, „Fließende Bewegungen (niemals ruckartig)“, „Mit Ausstreichung beendet“] }, { cat: „Heiße Rolle“, items: [„Handtuch (50×100 cm) fest zu Trichter gerollt“, „Temperatur am eigenen Arm getestet“, „30 Min. Pause vor anschließender Massage“] }, ]; /* ── SECTION RENDERERS ───────────────────────────────────────────────────────*/ function Section({ s }) { const C = { color: „var(–text-mid)“, fontSize: 15, lineHeight: 1.8 }; const H = { fontFamily: „‚Cormorant Garamond‘, serif“, fontSize: 22, fontWeight: 600, color: „var(–brown-dark)“, marginBottom: 12 }; if (!s.type) return (
{s.h}

{s.p}

); if (s.type === „etymology“) return (
{s.items.map((it, i) => (
{it.l}
„{it.w}“
{it.m}
))}
); if (s.type === „list“) return (
{s.h}
{s.items.map((it, i) => (
{it}
))}
); if (s.type === „goals“) return (
{s.h}
{s.items.map((it, i) => (
{it}
))}
); if (s.type === „two-col“) return (
{[s.left, s.right].map((col, i) => (
{col.h}
    {col.items.map((it, j) =>
  • {it}
  • )}
))}
); if (s.type === „muscle-parts“) return (
{s.items.map((it, i) => (
{it.n}: {it.d}
))}
); if (s.type === „spine-table“) return (
{s.h}
{s.rows.map(([seg, n], i) => ( ))}
{seg} {n}
); if (s.type === „effects-grid“) return (
{s.items.map((it, i) => (
{it.ic}
{it.t}
{it.d}
))}
); if (s.type === „intensity-bar“) return (
{s.h}
{s.items.map((it, i) => (
{it.l} {it.e}
))}
); if (s.type === „rules-list“) return (
{s.h}
{s.items.map((it, i) => (
{i + 1}
{it}
))}
); if (s.type === „danger-box“) return (
{s.h}
{s.items.map((it, i) => (
{it}
))}
); if (s.type === „key-rule“) return (

{s.t}

); if (s.type === „technique-cards“) return (
{s.items.map((it, i) => (
{it.ic}
{it.n}
{it.sub &&
{it.sub}
}
{it.effects && (
{it.effects.map((e, j) => {e})}
)}

{it.how}

{it.tip &&
💡 {it.tip}
}
))}
); if (s.type === „step-by-step“) return (
{s.h}
{s.steps.map((step, i) => (
{i + 1}
{i < s.steps.length - 1 &&
}

{step}

))}
); if (s.type === „golden-rules“) return (
{s.items.map((it, i) => (
{it.n}
{it.r}
{it.d}
))}
); return null; } /* ── QUIZ ─────────────────────────────────────────────────────────────────────*/ function Quiz({ questions, onPass }) { const [ans, setAns] = useState({}); const [done, setDone] = useState(false); const score = questions.filter((q, i) => ans[i] === q.c).length; const allAnswered = Object.keys(ans).length === questions.length; const submit = () => { if (!allAnswered) return; setDone(true); if (score === questions.length) setTimeout(onPass, 600); }; return (

Wissenstest

{questions.map((q, qi) => { const correct = ans[qi] === q.c; return (

{qi + 1}. {q.q}

{q.opts.map((opt, oi) => { let bg = „#fff“, border = „1.5px solid var(–border)“, color = „var(–text-mid)“; if (ans[qi] === oi) { bg = „var(–gold-pale)“; border = „1.5px solid var(–gold)“; color = „#7A4F00“; } if (done && oi === q.c) { bg = „#E6F7E6“; border = „1.5px solid #4CAF50“; color = „#1A5C1A“; } if (done && ans[qi] === oi && oi !== q.c) { bg = „#FDE8E8“; border = „1.5px solid #E57373“; color = „#8C1A1A“; } return ( ); })}
); })} {!done && ( )} {done && (

{score === questions.length ? „🎉 Perfekt — alle Antworten richtig!“ : `${score} von ${questions.length} richtig — lies das Modul nochmal durch.`}

)}
); } /* ── MAIN APP ─────────────────────────────────────────────────────────────────*/ export default function App() { const [page, setPage] = useState(„landing“); // landing | course | module | checklist | cert const [activeModule, setActiveModule] = useState(null); const [completed, setCompleted] = useState({}); const [checked, setChecked] = useState({}); const [certName, setCertName] = useState(„“); const [certShown, setCertShown] = useState(false); const topRef = useRef(null); const completedCount = Object.keys(completed).length; const allDone = completedCount === MODULES.length; const scrollTop = () => topRef.current?.scrollIntoView({ behavior: „smooth“ }); const goModule = (m) => { setActiveModule(m); setPage(„module“); scrollTop(); }; const pct = Math.round((completedCount / MODULES.length) * 100); /* ── LANDING PAGE ───────────────────────────────────────────────────────── */ if (page === „landing“) return (
{/* HERO */}
{/* decorative elements */}
{/* badge */}
🐾 Tierheilpraxis Seeberger

Entspannung für
unsere Vierbeiner

Der professionelle Online-Massagekurs für Hundebesitzer

{/* PRICE BOX */}
Einmalzahlung · Lebenslanger Zugang
39 €
inkl. MwSt.
Demo-Modus: Kurs direkt öffnen
{/* features row */}
{[„7 Module“, „Quiz & Tests“, „Checkliste“, „Zertifikat“].map(f => (
{f}
))}
{/* WHAT YOU LEARN */}
Kursinhalte

Was dich erwartet

{[„Anatomische Grundlagen des Hundes“, „Wirkunsweise von Massage auf Muskeln & Gewebe“, „Alle klassischen Massagegriffe mit Schritt-für-Schritt-Anleitungen“, „Wärmetherapie: Heiße Rolle, Rotlicht & mehr“, „Kontraindikationen — wann du nicht massieren solltest“, „10 goldene Regeln der Hundemassage“, „Interaktive Checkliste für jede Session“, „Offizielles Zertifikat nach Kursabschluss“].map((item, i) => (
{item}
))}
{/* MODULES PREVIEW */}
7 Module

Der Kursaufbau

{MODULES.map((m, i) => (
{m.icon}
{m.title}
{m.sub}
{m.dur}
))}
{/* TESTIMONIALS */}

Was Teilnehmer sagen

{[ { name: „Sabine M.“, text: „Endlich verstehe ich, warum mein Hund nach der Massage so entspannt ist. Der Kurs erklärt alles wunderbar verständlich.“, loc: „Augsburg“ }, { name: „Thomas R.“, text: „Sehr praxisnah aufgebaut. Die Checkliste nutze ich vor jeder Massage. Klare Empfehlung!“, loc: „Ulm“ }, { name: „Maria K.“, text: „Mein älterer Golden Retriever profitiert enorm von der Heißen Rolle. Danke für diesen tollen Kurs!“, loc: „Dillingen“ }, { name: „Johannes W.“, text: „Übersichtlich, wissenschaftlich fundiert und trotzdem sehr zugänglich. Genau das, was ich gesucht habe.“, loc: „Donauwörth“ }, ].map((t, i) => (

{t.text}

{t.name}
{t.loc}
))}
{/* ABOUT */}
🐾

Tierheilpraxis Seeberger

Isabella Seeberger ist zertifizierte Tierheilpraktikerin und Physiotherapeutin. Dieser Kurs basiert auf ihrem bewährten Präsenzkurs bei der OG Dillingen / Donau — jetzt bequem von zu Hause erlernbar.

📞 0151 / 44344356 🌐 tierheilpraxis-seeberger.de
{/* FINAL CTA */}

Bereit anzufangen?

Gib deinem Hund die Entspannung, die er verdient.

Demo-Modus: Kurs direkt öffnen

); /* ── COURSE OVERVIEW ────────────────────────────────────────────────────── */ if (page === „course“) return (
{/* top bar */}
🐾 Tierheilpraxis Seeberger {[[„course“, „Kursübersicht“], [„checklist“, „Checkliste“], [„cert“, „Zertifikat“]].map(([v, l]) => ( ))}
{/* progress */}
{completedCount} von {MODULES.length} Modulen abgeschlossen {pct}%
{MODULES.map((m) => { const done = !!completed[m.id]; return (
goModule(m)} style={{ display: „flex“, alignItems: „center“, gap: 18, padding: „18px 22px“, background: „var(–warm-white)“, border: `1px solid ${done ? „#A3D9A5“ : „var(–border)“}`, borderLeft: `4px solid ${done ? „#4CAF50“ : m.color}`, borderRadius: „0 6px 6px 0“, cursor: „pointer“, transition: „all 0.2s“, boxShadow: „0 1px 4px rgba(0,0,0,0.04)“ }}>
{done ? „✓“ : m.icon}
{m.title} {done && Abgeschlossen}
{m.sub} · {m.dur}
); })}

Fragen? Ich helfe gerne!

0151 / 44344356

); /* ── MODULE ──────────────────────────────────────────────────────────────── */ if (page === „module“ && activeModule) return (
Modul {activeModule.icon} · {activeModule.dur}
{/* module header */}
Modul {activeModule.icon}

{activeModule.title}

{activeModule.sub}

{activeModule.sections.map((s, i) =>
)} setCompleted(p => ({ …p, [activeModule.id]: true }))} />
{activeModule.id < MODULES.length ? ( ) : ( )}
); /* ── CHECKLIST ───────────────────────────────────────────────────────────── */ if (page === „checklist“) return (
🐾 Tierheilpraxis Seeberger {[[„course“, „Kursübersicht“], [„checklist“, „Checkliste“], [„cert“, „Zertifikat“]].map(([v, l]) => ( ))}

Massagecheckliste

Hake alle Punkte ab, bevor und während du deinen Hund massierst.

{CHECKLIST.map((cat, ci) => (

{cat.cat}

{cat.items.map((item, idx) => { const key = `${ci}-${idx}`; const on = !!checked[key]; return (
setChecked(p => ({ …p, [key]: !p[key] }))} style={{ display: „flex“, alignItems: „flex-start“, gap: 14, padding: „12px 16px“, marginBottom: 6, background: on ? „#F0FAF0“ : „var(–warm-white)“, border: `1px solid ${on ? „#A3D9A5“ : „var(–border)“}`, borderRadius: 4, cursor: „pointer“, transition: „all 0.2s“ }}>
{on && }
{item}
); })}
))}
); /* ── CERTIFICATE ─────────────────────────────────────────────────────────── */ if (page === „cert“) return (
🐾 Tierheilpraxis Seeberger {[[„course“, „Kursübersicht“], [„checklist“, „Checkliste“], [„cert“, „Zertifikat“]].map(([v, l]) => ( ))}
{!allDone ? (
🔒

Zertifikat noch gesperrt

Schließe alle 7 Module ab und bestehe die Wissenstests.

{completedCount} / {MODULES.length} Module abgeschlossen

) : (

🎉 Herzlichen Glückwunsch!

Du hast alle Module erfolgreich abgeschlossen. Erstelle jetzt dein persönliches Zertifikat.

setCertName(e.target.value)} placeholder=“Dein vollständiger Name“ style={{ padding: „12px 18px“, border: „1.5px solid var(–border)“, borderRadius: 4, fontSize: 16, fontFamily: „‚Cormorant Garamond‘,serif“, background: „var(–warm-white)“, color: „var(–text)“, outline: „none“, width: 280 }} />
{certShown && certName.trim() && (
Tierheilpraxis Seeberger

Zertifikat

Hiermit wird bestätigt, dass

{certName.trim()}

den Online-Kurs
„Entspannung für unsere Vierbeiner —
Massagekurs für Hundebesitzer“

erfolgreich abgeschlossen hat.

Tierheilpraxis Seeberger · Isabella Seeberger
{new Date().toLocaleDateString(„de-DE“, { day: „2-digit“, month: „long“, year: „numeric“ })}
)}
)}
); return null; }