{"id":16,"date":"2026-04-29T18:12:22","date_gmt":"2026-04-29T18:12:22","guid":{"rendered":"https:\/\/dartclubhochdorf.ch\/?page_id=16"},"modified":"2026-05-03T19:28:32","modified_gmt":"2026-05-03T19:28:32","slug":"elementor-16","status":"publish","type":"page","link":"https:\/\/dartclubhochdorf.ch\/","title":{"rendered":""},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n\r\n\r\nDart Club Hochdorf<\/title>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Bebas+Neue&family=DM+Sans:ital,wght@0,300;0,400;0,500;1,300&display=swap\" rel=\"stylesheet\">\r\n<style>\r\n *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\r\n\r\n :root {\r\n --gold: #C9A84C;\r\n --gold-light: #E8C97A;\r\n --dark: #0c0c0c;\r\n --dark-2: #141414;\r\n --dark-3: #1e1e1e;\r\n --gray: #888;\r\n --light: #f4f0e8;\r\n }\r\n\r\n .footer-logo img {\r\n height: 35px;\r\n width: auto;\r\n opacity: 0.9;\r\n }\r\n\r\n .nav-logo:hover {\r\n opacity: 0.85;\r\n }\r\n\r\n .nav-logo img {\r\n filter: drop-shadow(0 2px 4px rgba(201, 168, 76, 0.1));\r\n transition: filter 0.3s ease;\r\n }\r\n\r\n .nav-logo:hover img {\r\n filter: drop-shadow(0 4px 12px rgba(201, 168, 76, 0.3));\r\n }\r\n\r\n html { scroll-behavior: smooth; }\r\n\r\n body {\r\n background: var(--dark);\r\n color: var(--light);\r\n font-family: 'DM Sans', sans-serif;\r\n font-weight: 300;\r\n line-height: 1.7;\r\n overflow-x: hidden;\r\n }\r\n\r\n \/* NAV *\/\r\n nav {\r\n position: fixed; top: 0; left: 0; right: 0; z-index: 100;\r\n display: flex; align-items: center; justify-content: space-between;\r\n padding: 1.5rem 4rem;\r\n background: rgba(12,12,12,0.92);\r\n backdrop-filter: blur(10px);\r\n border-bottom: 1px solid rgba(201,168,76,0.12);\r\n }\r\n\r\n .nav-logo {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-family: 'Bebas Neue', sans-serif;\r\n font-size: clamp(1rem, 4vw, 1.6rem);\r\n letter-spacing: 0.1em;\r\n color: var(--gold);\r\n background: transparent;\r\n text-decoration: none;\r\n transition: opacity 0.3s ease;\r\n min-width: 0;\r\n }\r\n\r\n .nav-links { display: flex; gap: clamp(1rem, 3vw, 2.5rem); list-style: none; flex-wrap: wrap; }\r\n\r\n .nav-links a {\r\n text-decoration: none; color: var(--light); opacity: 0.65;\r\n font-size: clamp(0.65rem, 2vw, 0.8rem); letter-spacing: 0.15em; text-transform: uppercase;\r\n transition: opacity 0.2s;\r\n white-space: nowrap;\r\n }\r\n\r\n .nav-links a:hover { opacity: 1; color: var(--gold); }\r\n\r\n .nav-cta {\r\n font-size: clamp(0.65rem, 2vw, 0.75rem); letter-spacing: 0.15em; text-transform: uppercase;\r\n padding: 0.6rem 1.5rem; border: 1px solid var(--gold);\r\n color: var(--gold); text-decoration: none;\r\n transition: background 0.2s, color 0.2s;\r\n white-space: nowrap;\r\n }\r\n\r\n .nav-cta:hover { background: var(--gold); color: var(--dark); }\r\n\r\n \/* HERO *\/\r\n .hero {\r\n min-height: 100vh;\r\n display: grid; grid-template-columns: 1fr 1fr; align-items: center;\r\n padding: 8rem 4rem 4rem;\r\n position: relative; overflow: hidden;\r\n gap: 2rem;\r\n }\r\n\r\n .hero::after {\r\n content: '';\r\n position: absolute; right: -60px; top: 50%; transform: translateY(-50%);\r\n width: 520px; height: 520px;\r\n border-radius: 50%;\r\n background: conic-gradient(\r\n from 0deg,\r\n #0c0c0c 0deg 10deg, #1e1e1e 10deg 20deg,\r\n #0c0c0c 20deg 30deg, #1e1e1e 30deg 40deg,\r\n #0c0c0c 40deg 50deg, #1e1e1e 50deg 60deg,\r\n #0c0c0c 60deg 70deg, #1e1e1e 70deg 80deg,\r\n #0c0c0c 80deg 90deg, #1e1e1e 90deg 100deg,\r\n #0c0c0c 100deg 110deg, #1e1e1e 110deg 120deg,\r\n #0c0c0c 120deg 130deg, #1e1e1e 130deg 140deg,\r\n #0c0c0c 140deg 150deg, #1e1e1e 150deg 160deg,\r\n #0c0c0c 160deg 170deg, #1e1e1e 170deg 180deg,\r\n #0c0c0c 180deg 190deg, #1e1e1e 190deg 200deg,\r\n #0c0c0c 200deg 210deg, #1e1e1e 210deg 220deg,\r\n #0c0c0c 220deg 230deg, #1e1e1e 230deg 240deg,\r\n #0c0c0c 240deg 250deg, #1e1e1e 250deg 260deg,\r\n #0c0c0c 260deg 270deg, #1e1e1e 270deg 280deg,\r\n #0c0c0c 280deg 290deg, #1e1e1e 290deg 300deg,\r\n #0c0c0c 300deg 310deg, #1e1e1e 310deg 320deg,\r\n #0c0c0c 320deg 330deg, #1e1e1e 330deg 340deg,\r\n #0c0c0c 340deg 350deg, #1e1e1e 350deg 360deg\r\n );\r\n opacity: 0.5;\r\n }\r\n\r\n .dartboard-container {\r\n position: absolute; right: -40px; top: 50%; transform: translateY(-50%);\r\n width: 520px; height: 520px;\r\n z-index: 1;\r\n }\r\n\r\n .hero-text { position: relative; z-index: 2; }\r\n\r\n .hero-label {\r\n font-size: clamp(0.65rem, 2vw, 0.72rem); letter-spacing: 0.25em; text-transform: uppercase;\r\n color: var(--gold); margin-bottom: 1.5rem;\r\n display: flex; align-items: center; gap: 0.8rem;\r\n }\r\n\r\n .hero-label::before {\r\n content: ''; display: block; width: clamp(20px, 5vw, 32px); height: 1px; background: var(--gold);\r\n }\r\n\r\n .hero h2 {\r\n font-family: 'Bebas Neue', sans-serif;\r\n font-size: clamp(2.5rem, 8vw, 7.5rem);\r\n line-height: 0.95;\r\n letter-spacing: 0.02em;\r\n color: var(--light);\r\n margin-bottom: 1.5rem;\r\n }\r\n\r\n .hero h2 span.punkt { color: var(--gold); }\r\n\r\n .hero h2 span.mentalit\u00e4t { color: var(--gold); }\r\n\r\n .hero p {\r\n font-size: clamp(0.85rem, 2vw, 1rem); color: rgba(244,240,232,0.6);\r\n max-width: 380px; line-height: 1.8; margin-bottom: 2.5rem;\r\n }\r\n\r\n .hero-buttons { display: flex; gap: 1rem; flex-wrap: wrap; }\r\n\r\n .btn-primary {\r\n padding: 0.9rem 1.5rem; background: var(--gold); color: var(--dark);\r\n text-decoration: none; font-size: clamp(0.65rem, 2vw, 0.78rem); letter-spacing: 0.15em;\r\n text-transform: uppercase; font-weight: 500; transition: opacity 0.2s;\r\n white-space: nowrap;\r\n }\r\n\r\n .btn-primary:hover { opacity: 0.85; }\r\n\r\n .btn-secondary {\r\n padding: 0.9rem 1.5rem; border: 1px solid rgba(244,240,232,0.2);\r\n color: var(--light); text-decoration: none; font-size: clamp(0.65rem, 2vw, 0.78rem);\r\n letter-spacing: 0.15em; text-transform: uppercase;\r\n transition: border-color 0.2s;\r\n white-space: nowrap;\r\n }\r\n\r\n .btn-secondary:hover { border-color: var(--gold); color: var(--gold); }\r\n\r\n .hero-stats {\r\n margin-top: 4rem; padding-top: 2rem;\r\n border-top: 1px solid rgba(244,240,232,0.08);\r\n display: flex; gap: clamp(1.5rem, 5vw, 3rem); flex-wrap: wrap;\r\n }\r\n\r\n .stat-num {\r\n font-family: 'Bebas Neue', sans-serif; font-size: clamp(1.8rem, 4vw, 2.5rem);\r\n color: var(--gold); line-height: 1;\r\n }\r\n\r\n .stat-label { font-size: clamp(0.6rem, 1.5vw, 0.72rem); letter-spacing: 0.12em; text-transform: uppercase; color: var(--gray); margin-top: 0.2rem; }\r\n\r\n \/* SECTION BASE *\/\r\n section { padding: clamp(3rem, 8vw, 6rem) clamp(1.5rem, 5vw, 4rem); }\r\n\r\n .section-label {\r\n font-size: clamp(0.6rem, 1.5vw, 0.7rem); letter-spacing: 0.25em; text-transform: uppercase;\r\n color: var(--gold); margin-bottom: 1rem;\r\n display: flex; align-items: center; gap: 0.8rem;\r\n }\r\n\r\n .section-label::before { content: ''; display: block; width: clamp(18px, 4vw, 24px); height: 1px; background: var(--gold); }\r\n\r\n .section-title {\r\n font-family: 'Bebas Neue', sans-serif;\r\n font-size: clamp(1.8rem, 5vw, 4rem);\r\n line-height: 1; letter-spacing: 0.02em; margin-bottom: 1rem; margin-top: 3rem;\r\n }\r\n\r\n \/* ABOUT *\/\r\n .about { background: var(--dark-2); }\r\n\r\n .about-grid {\r\n display: grid; grid-template-columns: 1fr; gap: clamp(3rem, 8vw, 6rem); align-items: center; margin-top: 3rem;\r\n }\r\n\r\n .about-text p { color: rgba(244,240,232,0.6); margin-bottom: 1rem; font-size: clamp(0.85rem, 2vw, 1rem); }\r\n\r\n .feature {\r\n display: flex; align-items: flex-start; gap: 1rem;\r\n padding: 1.2rem; border: 1px solid rgba(201,168,76,0.1);\r\n background: rgba(201,168,76,0.03);\r\n }\r\n\r\n .feature-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); margin-top: 0.55rem; flex-shrink: 0; }\r\n\r\n .feature-text strong { font-weight: 500; font-size: clamp(0.8rem, 2vw, 0.9rem); }\r\n\r\n .feature-text span { display: block; font-size: clamp(0.75rem, 1.8vw, 0.82rem); color: var(--gray); }\r\n\r\n .about-image {\r\n position: relative; aspect-ratio: 4\/5;\r\n background: var(--dark-3);\r\n border: 1px solid rgba(201,168,76,0.08);\r\n overflow: hidden;\r\n display: flex; align-items: center; justify-content: center;\r\n }\r\n\r\n .dartboard-placeholder { position: relative; }\r\n\r\n .db-outer { width: clamp(200px, 60vw, 300px); height: clamp(200px, 60vw, 300px); border-radius: 50%; background: #1a1a1a; border: clamp(4px, 2vw, 8px) solid #C9A84C; position: relative; display: flex; align-items: center; justify-content: center; }\r\n\r\n .db-ring1 { width: 80%; height: 80%; border-radius: 50%; background: #141414; border: clamp(2px, 1vw, 4px) solid #333; display: flex; align-items: center; justify-content: center; }\r\n\r\n .db-ring2 { width: 75%; height: 75%; border-radius: 50%; background: #1e1e1e; border: clamp(2px, 1vw, 4px) solid #333; display: flex; align-items: center; justify-content: center; }\r\n\r\n .db-ring3 { width: 60%; height: 60%; border-radius: 50%; background: #141414; border: clamp(2px, 1vw, 4px) solid #C9A84C; display: flex; align-items: center; justify-content: center; }\r\n\r\n .db-bull { width: 25%; height: 25%; border-radius: 50%; background: #C9A84C; border: clamp(2px, 1vw, 4px) solid var(--dark); display: flex; align-items: center; justify-content: center; }\r\n\r\n .db-inner-bull { width: 40%; height: 40%; border-radius: 50%; background: var(--dark); }\r\n\r\n .about-image-label {\r\n position: absolute; bottom: 1.5rem; left: 1.5rem;\r\n font-size: clamp(0.6rem, 1.5vw, 0.7rem); letter-spacing: 0.15em; text-transform: uppercase;\r\n color: var(--gold); background: var(--dark); padding: 0.4rem 0.8rem;\r\n border: 1px solid rgba(201,168,76,0.2);\r\n }\r\n\r\n \/* EVENTS *\/\r\n .events { }\r\n\r\n .events-header { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 3rem; }\r\n\r\n .events-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5px; background: rgba(244,240,232,0.05); }\r\n\r\n .event-card {\r\n background: var(--dark); padding: clamp(1.5rem, 4vw, 2rem); position: relative;\r\n border-bottom: 2px solid transparent; transition: border-color 0.2s;\r\n cursor: default;\r\n }\r\n\r\n .event-card:hover { border-color: var(--gold); background: var(--dark-2); }\r\n\r\n .event-date {\r\n font-family: 'Bebas Neue', sans-serif; font-size: clamp(2rem, 5vw, 3rem); line-height: 1;\r\n color: var(--gold); margin-bottom: 0.2rem;\r\n }\r\n\r\n .event-month { font-size: clamp(0.6rem, 1.5vw, 0.7rem); letter-spacing: 0.2em; text-transform: uppercase; color: var(--gray); margin-bottom: 1.2rem; }\r\n\r\n .event-title { font-size: clamp(0.95rem, 2.5vw, 1.1rem); font-weight: 500; margin-bottom: 0.5rem; }\r\n\r\n .event-meta { font-size: clamp(0.7rem, 1.8vw, 0.78rem); color: var(--gray); }\r\n\r\n .event-tag {\r\n position: absolute; top: 1.5rem; right: 1.5rem;\r\n font-size: clamp(0.55rem, 1.5vw, 0.65rem); letter-spacing: 0.12em; text-transform: uppercase;\r\n padding: 0.25rem 0.6rem; border: 1px solid rgba(201,168,76,0.3); color: var(--gold);\r\n }\r\n\r\n \/* TEAM *\/\r\n .team { background: var(--dark-2); padding: clamp(2rem, 5vw, 3rem) clamp(1.5rem, 5vw, 4rem); }\r\n\r\n .team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1.5rem, 4vw, 2rem); margin-top: 3rem; }\r\n\r\n .team-card { }\r\n\r\n .team-avatar {\r\n width: 100%; aspect-ratio: 1;\r\n background: var(--dark-3);\r\n border: 1px solid rgba(201,168,76,0.1);\r\n margin-bottom: 1rem;\r\n display: flex; align-items: center; justify-content: center;\r\n font-family: 'Bebas Neue', sans-serif; font-size: clamp(1.8rem, 5vw, 3rem); color: rgba(201,168,76,0.2);\r\n position: relative; overflow: hidden;\r\n }\r\n\r\n .team-avatar::after {\r\n content: ''; position: absolute; bottom: 0; left: 0; right: 0;\r\n height: 3px; background: var(--gold); transform: scaleX(0); transition: transform 0.3s;\r\n }\r\n\r\n .team-card:hover .team-avatar::after { transform: scaleX(1); }\r\n\r\n .team-name { font-weight: 500; margin-bottom: 0.2rem; font-size: clamp(0.9rem, 2vw, 1rem); text-transform: uppercase; }\r\n\r\n .team-role { font-size: clamp(0.65rem, 1.8vw, 0.78rem); color: var(--gold); letter-spacing: 0.08em; text-transform: uppercase; }\r\n\r\n .team-avg { font-size: clamp(0.65rem, 1.8vw, 0.75rem); color: var(--gray); margin-top: 0.2rem; }\r\n\r\n \/* JOIN *\/\r\n .join {\r\n background: var(--gold); color: var(--dark);\r\n text-align: center; padding: clamp(3rem, 8vw, 6rem) clamp(1.5rem, 5vw, 4rem);\r\n }\r\n\r\n .join .section-label { color: rgba(12,12,12,0.4); justify-content: center; }\r\n\r\n .join .section-label::before { background: rgba(12,12,12,0.3); }\r\n\r\n .join .section-title { color: var(--dark); }\r\n\r\n .join p { color: rgba(12,12,12,0.6); max-width: 500px; margin: 1rem auto 2.5rem; font-size: clamp(0.85rem, 2vw, 1rem); }\r\n\r\n .join .btn-join {\r\n padding: 1rem 2.5rem; background: var(--dark); color: var(--gold);\r\n text-decoration: none; font-size: clamp(0.65rem, 2vw, 0.8rem); letter-spacing: 0.15em; text-transform: uppercase;\r\n font-weight: 500; display: inline-block; transition: opacity 0.2s;\r\n white-space: nowrap;\r\n }\r\n\r\n .join .btn-join:hover { opacity: 0.85; }\r\n\r\n .join-details { margin-top: 2.5rem; display: flex; flex-direction: column; gap: 1.5rem; justify-content: center; }\r\n\r\n @media (min-width: 768px) {\r\n .join-details { flex-direction: row; gap: 3rem; }\r\n }\r\n\r\n .join-detail { font-size: clamp(0.65rem, 1.8vw, 0.78rem); color: rgba(12,12,12,0.5); }\r\n\r\n .join-detail strong { display: block; font-size: clamp(0.95rem, 2.5vw, 1.1rem); color: var(--dark); font-weight: 500; margin-bottom: 0.2rem; }\r\n\r\n \/* FOOTER *\/\r\n footer {\r\n background: var(--dark); padding: clamp(2rem, 4vw, 3rem) clamp(1.5rem, 5vw, 4rem);\r\n border-top: 1px solid rgba(244,240,232,0.06);\r\n display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; gap: 2rem;\r\n }\r\n\r\n @media (min-width: 768px) {\r\n footer { flex-direction: row; align-items: center; }\r\n }\r\n\r\n .footer-logo {\r\n display: flex;\r\n align-items: center;\r\n gap: 0.8rem; font-family: 'Bebas Neue', sans-serif; font-size: clamp(1rem, 3vw, 1.4rem); color: var(--gold); letter-spacing: 0.1em;\r\n }\r\n\r\n .footer-copy { font-size: clamp(0.6rem, 1.5vw, 0.75rem); color: var(--gray); }\r\n\r\n .footer-links { display: flex; gap: 1.5rem; flex-wrap: wrap; }\r\n\r\n .footer-links a { font-size: clamp(0.6rem, 1.5vw, 0.75rem); color: var(--gray); text-decoration: none; transition: color 0.2s; }\r\n\r\n .footer-links a:hover { color: var(--gold); }\r\n\r\n \/* ANIMATIONS *\/\r\n @keyframes fadeUp {\r\n from { opacity: 0; transform: translateY(30px); }\r\n to { opacity: 1; transform: translateY(0); }\r\n }\r\n\r\n .hero-text > * { animation: fadeUp 0.7s ease both; }\r\n\r\n .hero-label { animation-delay: 0.1s; }\r\n\r\n .hero h2 { animation-delay: 0.2s; }\r\n\r\n .hero p { animation-delay: 0.3s; }\r\n\r\n .hero-buttons { animation-delay: 0.4s; }\r\n\r\n .hero-stats { animation-delay: 0.5s; }\r\n\r\n \/* TICKER *\/\r\n .ticker {\r\n background: var(--gold); padding: 0.6rem clamp(1rem, 3vw, 2rem); overflow: hidden;\r\n white-space: nowrap;\r\n }\r\n\r\n .ticker-inner {\r\n display: inline-block;\r\n animation: ticker 20s linear infinite;\r\n }\r\n\r\n .ticker span {\r\n font-size: clamp(0.6rem, 1.8vw, 0.72rem); letter-spacing: 0.2em; text-transform: uppercase;\r\n color: var(--dark); font-weight: 500; padding: 0 clamp(1rem, 3vw, 2rem);\r\n }\r\n\r\n @keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }\r\n\r\n \/* MOBILE OPTIMIZATIONS *\/\r\n @media (max-width: 767px) {\r\n nav {\r\n padding: 1rem 1.5rem;\r\n flex-wrap: wrap;\r\n gap: 1rem;\r\n }\r\n\r\n .nav-logo {\r\n order: 1;\r\n flex: 0 1 auto;\r\n }\r\n\r\n .nav-links {\r\n order: 3;\r\n flex: 0 1 100%;\r\n margin-top: 1rem;\r\n }\r\n\r\n .nav-cta {\r\n order: 2;\r\n }\r\n\r\n .hero {\r\n grid-template-columns: 1fr;\r\n padding: 5rem 1.5rem 2rem;\r\n min-height: auto;\r\n }\r\n\r\n .hero::after,\r\n .dartboard-container {\r\n display: none;\r\n }\r\n\r\n .hero-text {\r\n width: 100%;\r\n }\r\n\r\n .hero h2 {\r\n word-break: break-word;\r\n }\r\n\r\n .team-grid {\r\n grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));\r\n }\r\n\r\n .events-grid {\r\n grid-template-columns: 1fr;\r\n }\r\n\r\n section {\r\n padding: clamp(2rem, 5vw, 4rem) clamp(1rem, 4vw, 2rem);\r\n }\r\n\r\n .about-grid {\r\n grid-template-columns: 1fr;\r\n }\r\n\r\n .feature {\r\n flex-wrap: wrap;\r\n }\r\n\r\n footer {\r\n gap: 1.5rem;\r\n }\r\n\r\n .dartboard-container canvas {\r\n max-width: 100vw;\r\n height: auto;\r\n }\r\n }\r\n\r\n @media (max-width: 480px) {\r\n nav {\r\n padding: 0.8rem 1rem;\r\n }\r\n\r\n .nav-links a {\r\n font-size: 0.6rem;\r\n }\r\n\r\n .nav-cta {\r\n padding: 0.5rem 1rem;\r\n font-size: 0.6rem;\r\n }\r\n\r\n .hero {\r\n padding: 4rem 1rem 1.5rem;\r\n }\r\n\r\n .hero h2 {\r\n font-size: 1.8rem;\r\n margin-bottom: 1rem;\r\n }\r\n\r\n .hero p {\r\n font-size: 0.8rem;\r\n margin-bottom: 1.5rem;\r\n }\r\n\r\n .hero-buttons {\r\n gap: 0.5rem;\r\n }\r\n\r\n .btn-primary,\r\n .btn-secondary {\r\n padding: 0.7rem 1rem;\r\n font-size: 0.65rem;\r\n }\r\n\r\n .hero-stats {\r\n gap: 1rem;\r\n margin-top: 2rem;\r\n }\r\n\r\n .stat-num {\r\n font-size: 1.5rem;\r\n }\r\n\r\n .team-grid {\r\n grid-template-columns: 1fr;\r\n }\r\n\r\n .events-grid {\r\n grid-template-columns: 1fr;\r\n }\r\n\r\n .join-details {\r\n flex-direction: column;\r\n gap: 1rem;\r\n }\r\n\r\n section {\r\n padding: 2rem 1rem;\r\n }\r\n\r\n footer {\r\n flex-direction: column;\r\n align-items: flex-start;\r\n gap: 1rem;\r\n padding: 2rem 1rem;\r\n }\r\n }\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<nav>\r\n <a href=\"#\" class=\"nav-logo\">Dart Club Hochdorf<\/a>\r\n <ul class=\"nav-links\">\r\n <\/ul>\r\n<\/nav>\r\n\r\n<section class=\"hero\">\r\n <h1 style=\"display: none;\">Dart Club Hochdorf<\/h1>\r\n <div class=\"hero-text\">\r\n <div class=\"hero-label\">Dart Club Hochdorf \u2014 Gegr\u00fcndet 2025<\/div>\r\n <h2>Bullseye<br><span class=\"mentalit\u00e4t\">Mentalit\u00e4t<\/span><span class=\"punkt\">.<\/span><\/h2>\r\n <p>Mit Steel zum Erfolg. Dart Club Hochdorf ist ein neuer Verein f\u00fcr alle, die den Dartsport lieben. Wir verbinden Leidenschaft, Pr\u00e4zision und Kameradschaft.<\/p>\r\n <div class=\"hero-buttons\">\r\n <\/div>\r\n <div class=\"hero-stats\">\r\n <div>\r\n <div class=\"stat-num\" id=\"stat-members\">3<\/div>\r\n <div class=\"stat-label\">Mitglieder<\/div>\r\n <\/div>\r\n <div>\r\n <div class=\"stat-num\">2025<\/div>\r\n <div class=\"stat-label\">Gr\u00fcndung<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"dartboard-container\">\r\n <canvas id=\"dartboard\" width=\"520\" height=\"520\"><\/canvas>\r\n <\/div>\r\n<\/section>\r\n\r\n<div class=\"ticker\">\r\n <div class=\"ticker-inner\">\r\n <span>Trainingsabend Details folgen<\/span>\r\n <span>\u2605<\/span>\r\n <span>Neu gegr\u00fcndet im Jahr 2025<\/span>\r\n <span>\u2605<\/span>\r\n <span>Suche Vereinslokal l\u00e4uft<\/span>\r\n <span>\u2605<\/span>\r\n <\/div>\r\n<\/div>\r\n\r\n<section class=\"about\" id=\"about\">\r\n <div class=\"about-grid\">\r\n <div class=\"about-text\">\r\n <div class=\"section-label\">\u00dcber uns<\/div>\r\n <h2 class=\"section-title\">spass und leidenschaft<br>f\u00fcr den dartsport<\/h2>\r\n <p>Der Dart Club Hochdorf wurde 2025 gegr\u00fcndet und verbindet Dartbegeisterte aus der Region. Wir sind ein junger Verein mit gro\u00dfem Enthusiasmus und Leidenschaft f\u00fcr den Dartsport.<\/p>\r\n <p>Unser Ziel ist es, eine lebendige Community zu schaffen, wo jeder willkommen ist.<\/p>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<section class=\"team\" id=\"team\">\r\n <div class=\"section-label\">Mitglieder<\/div>\r\n <h2 class=\"section-title\">Vorstand<\/h2>\r\n <div class=\"team-grid\">\r\n <div class=\"team-card\">\r\n <div class=\"team-avatar\">SM<\/div>\r\n <div class=\"team-name\">Severin M\u00fcller<\/div>\r\n <div class=\"team-role\">Pr\u00e4sident & Gr\u00fcndungsmitglied<\/div>\r\n <div class=\"team-avg\"><a href=\"mailto:severin@dartclubhochdorf.ch\" style=\"color: var(--gold); text-decoration: none;\">severin@dartclubhochdorf.ch<\/a><\/div>\r\n <\/div>\r\n <div class=\"team-card\">\r\n <div class=\"team-avatar\">PT<\/div>\r\n <div class=\"team-name\">Pascal Tunaj<\/div>\r\n <div class=\"team-role\">Gr\u00fcndungsmitglied<\/div>\r\n <div class=\"team-avg\"><a href=\"mailto:pascal@dartclubhochdorf.ch\" style=\"color: var(--gold); text-decoration: none;\">pascal@dartclubhochdorf.ch<\/a><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <h2 class=\"section-title\">Aktive<\/h2>\r\n <div class=\"team-grid\">\r\n <div class=\"team-card\">\r\n <div class=\"team-avatar\">MA<\/div>\r\n <div class=\"team-name\">Martin Anderhub<\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<section class=\"join\" id=\"join\">\r\n <div class=\"section-label\"><\/div>\r\n <h2 class=\"section-title\">Interesse geweckt?<br>Werde Teil der Dartfamilie.<\/h2>\r\n <p>Kontaktiere uns f\u00fcr weitere Informationen.<\/p>\r\n <a href=\"mailto:info@dartclubhochdorf.ch\" class=\"btn-join\">E-Mail schreiben<\/a>\r\n <div class=\"join-details\">\r\n <\/div>\r\n<\/section>\r\n\r\n<footer>\r\n <div class=\"footer-logo\">\r\n <span>Dart Club Hochdorf<\/span>\r\n <\/div>\r\n <div class=\"footer-copy\">\u00a9 2026 Dart Club Hochdorf<\/div>\r\n <div class=\"footer-links\">\r\n <a href=\"mailto:info@dchochdorf.ch\">Kontakt<\/a>\r\n <\/div>\r\n<\/footer>\r\n\r\n<script>\r\n(function() {\r\n const canvasId = 'dartboard';\r\n \r\n function initDartboard() {\r\n const canvas = document.getElementById(canvasId);\r\n if (!canvas) {\r\n console.warn('Canvas element not found');\r\n return;\r\n }\r\n\r\n const ctx = canvas.getContext('2d');\r\n if (!ctx) {\r\n console.warn('Cannot get 2D context');\r\n return;\r\n }\r\n\r\n const cx = canvas.width \/ 2;\r\n const cy = canvas.height \/ 2;\r\n\r\n const C = {\r\n dark1: '#0c0c0c',\r\n dark2: '#1a1a1a',\r\n dark3: '#252525',\r\n gold: '#C9A84C',\r\n goldDim: '#8a6f2e',\r\n goldRim: '#E8C97A',\r\n wire: '#3a3020',\r\n text: '#f4f0e8',\r\n };\r\n\r\n const SEG = [20, 1, 18, 4, 13, 6, 10, 15, 2, 17, 3, 19, 7, 16, 8, 11, 14, 9, 12, 5];\r\n const SEGS = SEG.length;\r\n const segAngle = (Math.PI * 2) \/ SEGS;\r\n\r\n const SCALE = 260 \/ 225.5;\r\n const R = {\r\n outerEdge: Math.round(225.5 * SCALE),\r\n doubleOuter: Math.round(170.0 * SCALE),\r\n doubleInner: Math.round(162.0 * SCALE),\r\n outerSingle: Math.round(162.0 * SCALE),\r\n tripleOuter: Math.round(107.0 * SCALE),\r\n tripleInner: Math.round(99.0 * SCALE),\r\n innerField: Math.round(99.0 * SCALE),\r\n bullOuter: Math.round(15.9 * SCALE),\r\n bullInner: Math.round(6.35 * SCALE),\r\n };\r\n\r\n function segStartAngle(i) {\r\n return -Math.PI \/ 2 - segAngle \/ 2 + i * segAngle;\r\n }\r\n\r\n function drawSegment(i, r1, r2, fillA, fillB) {\r\n const a1 = segStartAngle(i);\r\n const a2 = a1 + segAngle;\r\n const fill = (i % 2 === 0) ? fillA : fillB;\r\n ctx.beginPath();\r\n ctx.moveTo(cx, cy);\r\n ctx.arc(cx, cy, r2, a1, a2);\r\n ctx.arc(cx, cy, r1, a2, a1, true);\r\n ctx.closePath();\r\n ctx.fillStyle = fill;\r\n ctx.fill();\r\n }\r\n\r\n function drawWire(r) {\r\n ctx.beginPath();\r\n ctx.arc(cx, cy, r, 0, Math.PI * 2);\r\n ctx.strokeStyle = C.wire;\r\n ctx.lineWidth = 1.5;\r\n ctx.stroke();\r\n }\r\n\r\n function drawSpiderLines() {\r\n for (let i = 0; i < SEGS; i++) {\r\n const a = segStartAngle(i);\r\n ctx.beginPath();\r\n ctx.moveTo(cx + Math.cos(a) * R.bullOuter, cy + Math.sin(a) * R.bullOuter);\r\n ctx.lineTo(cx + Math.cos(a) * R.outerEdge, cy + Math.sin(a) * R.outerEdge);\r\n ctx.strokeStyle = C.wire;\r\n ctx.lineWidth = 1;\r\n ctx.stroke();\r\n }\r\n }\r\n\r\n function drawNumbers() {\r\n ctx.font = 'bold 18px \"Bebas Neue\", Arial';\r\n ctx.textAlign = 'center';\r\n ctx.textBaseline = 'middle';\r\n for (let i = 0; i < SEGS; i++) {\r\n const a = segStartAngle(i) + segAngle \/ 2;\r\n const r = R.doubleOuter + 22;\r\n const x = cx + Math.cos(a) * r;\r\n const y = cy + Math.sin(a) * r;\r\n ctx.fillStyle = (SEG[i] === 20) ? C.goldRim : C.text;\r\n ctx.fillText(SEG[i], x, y);\r\n }\r\n }\r\n\r\n function drawBoard() {\r\n ctx.beginPath();\r\n ctx.arc(cx, cy, R.outerEdge, 0, Math.PI * 2);\r\n ctx.fillStyle = C.dark1;\r\n ctx.fill();\r\n\r\n for (let i = 0; i < SEGS; i++) {\r\n drawSegment(i, R.tripleOuter, R.outerSingle, C.dark2, C.dark3);\r\n }\r\n\r\n for (let i = 0; i < SEGS; i++) {\r\n drawSegment(i, R.tripleInner, R.tripleOuter, C.gold, C.goldDim);\r\n }\r\n\r\n for (let i = 0; i < SEGS; i++) {\r\n drawSegment(i, R.bullOuter, R.innerField, C.dark2, C.dark3);\r\n }\r\n\r\n for (let i = 0; i < SEGS; i++) {\r\n drawSegment(i, R.doubleInner, R.doubleOuter, C.gold, C.goldDim);\r\n }\r\n\r\n drawWire(R.outerEdge);\r\n drawWire(R.doubleOuter);\r\n drawWire(R.doubleInner);\r\n drawWire(R.tripleOuter);\r\n drawWire(R.tripleInner);\r\n drawWire(R.bullOuter);\r\n drawWire(R.bullInner);\r\n drawSpiderLines();\r\n\r\n ctx.beginPath();\r\n ctx.arc(cx, cy, R.bullOuter, 0, Math.PI * 2);\r\n ctx.fillStyle = C.goldDim;\r\n ctx.fill();\r\n ctx.strokeStyle = C.wire;\r\n ctx.lineWidth = 1.5;\r\n ctx.stroke();\r\n\r\n ctx.beginPath();\r\n ctx.arc(cx, cy, R.bullInner, 0, Math.PI * 2);\r\n ctx.fillStyle = C.gold;\r\n ctx.fill();\r\n ctx.strokeStyle = C.wire;\r\n ctx.lineWidth = 1.5;\r\n ctx.stroke();\r\n\r\n ctx.beginPath();\r\n ctx.arc(cx, cy, 6, 0, Math.PI * 2);\r\n ctx.fillStyle = C.dark1;\r\n ctx.fill();\r\n\r\n drawNumbers();\r\n }\r\n\r\n const t20Angle = -Math.PI \/ 2;\r\n const t20R = (R.tripleInner + R.tripleOuter) \/ 2;\r\n const t20HalfW = (R.tripleInner + R.tripleOuter) \/ 2 * (segAngle * 0.28);\r\n const t20x = cx + Math.cos(t20Angle) * t20R;\r\n const t20y = cy + Math.sin(t20Angle) * t20R;\r\n const tang = t20Angle + Math.PI \/ 2;\r\n const d1x = t20x + Math.cos(tang) * (-t20HalfW * 0.5);\r\n const d1y = t20y + Math.sin(tang) * (-t20HalfW * 0.5);\r\n const d2x = t20x + Math.cos(tang) * (t20HalfW * 0.5);\r\n const d2y = t20y + Math.sin(tang) * (t20HalfW * 0.5);\r\n const d3x = t20x;\r\n const d3y = t20y + 3;\r\n\r\n const dartTargets = [\r\n { x: d1x, y: d1y, delay: 0.0, tilt: -6 },\r\n { x: d2x, y: d2y, delay: 2.5, tilt: 8 },\r\n { x: d3x, y: d3y, delay: 5.0, tilt: 1 },\r\n ];\r\n\r\n const THROW_DURATION = 7.5;\r\n const SHOW_180_AT = 8.0;\r\n const LOOP_DURATION = 11.5;\r\n\r\n let startTime = null;\r\n let alpha180 = 0;\r\n\r\n function drawDart(tx, ty, progress, tiltDeg) {\r\n if (progress <= 0) return;\r\n const p = Math.min(progress, 1);\r\n\r\n const startX = cx + 380;\r\n const startY = cy - 20;\r\n const ctrlX = tx + 180;\r\n const ctrlY = ty - 80;\r\n\r\n const bx = (1 - p) * (1 - p) * startX + 2 * (1 - p) * p * ctrlX + p * p * tx;\r\n const by = (1 - p) * (1 - p) * startY + 2 * (1 - p) * p * ctrlY + p * p * ty;\r\n\r\n const dp = 0.01;\r\n const p2 = Math.min(p + dp, 1);\r\n const bx2 = (1 - p2) * (1 - p2) * startX + 2 * (1 - p2) * p2 * ctrlX + p2 * p2 * tx;\r\n const by2 = (1 - p2) * (1 - p2) * startY + 2 * (1 - p2) * p2 * ctrlY + p2 * p2 * ty;\r\n const flightAngle = Math.atan2(by2 - by, bx2 - bx);\r\n\r\n const tilt = (tiltDeg || 0) * Math.PI \/ 180;\r\n const finalAngle = -Math.PI \/ 2 + tilt;\r\n const blendStart = 0.85;\r\n const blendFactor = p < blendStart ? 0 : (p - blendStart) \/ (1 - blendStart);\r\n const rawAngle = flightAngle + Math.PI \/ 2;\r\n let delta = finalAngle - rawAngle;\r\n while (delta > Math.PI) delta -= 2 * Math.PI;\r\n while (delta < -Math.PI) delta += 2 * Math.PI;\r\n const angle = rawAngle + delta * blendFactor;\r\n\r\n ctx.save();\r\n ctx.translate(bx, by);\r\n ctx.rotate(angle);\r\n\r\n const tipLen = 10;\r\n const barrelLen = 26;\r\n const shaftLen = 32;\r\n const flightH = 20;\r\n\r\n const tipGrad = ctx.createLinearGradient(-2, 0, 2, 0);\r\n tipGrad.addColorStop(0, '#888');\r\n tipGrad.addColorStop(0.5, '#eee');\r\n tipGrad.addColorStop(1, '#666');\r\n ctx.beginPath();\r\n ctx.moveTo(0, 0);\r\n ctx.lineTo(-1.5, tipLen);\r\n ctx.lineTo(1.5, tipLen);\r\n ctx.closePath();\r\n ctx.fillStyle = tipGrad;\r\n ctx.fill();\r\n\r\n const bGrad = ctx.createLinearGradient(-4, 0, 4, 0);\r\n bGrad.addColorStop(0, '#1a1a1a');\r\n bGrad.addColorStop(0.25, '#999');\r\n bGrad.addColorStop(0.5, '#ddd');\r\n bGrad.addColorStop(0.75, '#888');\r\n bGrad.addColorStop(1, '#111');\r\n ctx.beginPath();\r\n ctx.moveTo(-2, tipLen);\r\n ctx.lineTo(-4, tipLen + 4);\r\n ctx.lineTo(-4, tipLen + barrelLen - 2);\r\n ctx.lineTo(-2.5, tipLen + barrelLen);\r\n ctx.lineTo(2.5, tipLen + barrelLen);\r\n ctx.lineTo(4, tipLen + barrelLen - 2);\r\n ctx.lineTo(4, tipLen + 4);\r\n ctx.lineTo(2, tipLen);\r\n ctx.closePath();\r\n ctx.fillStyle = bGrad;\r\n ctx.fill();\r\n\r\n for (let r = 0; r < 6; r++) {\r\n const ry = tipLen + 5 + r * 3.5;\r\n ctx.beginPath();\r\n ctx.moveTo(-4, ry);\r\n ctx.lineTo(4, ry);\r\n ctx.strokeStyle = 'rgba(0,0,0,0.4)';\r\n ctx.lineWidth = 0.7;\r\n ctx.stroke();\r\n }\r\n\r\n const sy = tipLen + barrelLen;\r\n const sGrad = ctx.createLinearGradient(-2, 0, 2, 0);\r\n sGrad.addColorStop(0, '#222');\r\n sGrad.addColorStop(0.5, '#555');\r\n sGrad.addColorStop(1, '#1a1a1a');\r\n ctx.beginPath();\r\n ctx.rect(-2, sy, 4, shaftLen);\r\n ctx.fillStyle = sGrad;\r\n ctx.fill();\r\n\r\n const fy = sy + shaftLen;\r\n const fw = 20;\r\n const fh = 30;\r\n\r\n ctx.beginPath();\r\n ctx.moveTo(0, fy);\r\n ctx.lineTo(-fw, fy + fh);\r\n ctx.lineTo(0, fy + fh);\r\n ctx.closePath();\r\n const lgL = ctx.createLinearGradient(0, fy, -fw, fy + fh);\r\n lgL.addColorStop(0, C.goldRim);\r\n lgL.addColorStop(0.5, C.gold);\r\n lgL.addColorStop(1, C.goldDim);\r\n ctx.fillStyle = lgL;\r\n ctx.globalAlpha = 1;\r\n ctx.fill();\r\n ctx.strokeStyle = '#4a3410';\r\n ctx.lineWidth = 0.9;\r\n ctx.stroke();\r\n\r\n ctx.beginPath();\r\n ctx.moveTo(0, fy);\r\n ctx.lineTo(fw, fy + fh);\r\n ctx.lineTo(0, fy + fh);\r\n ctx.closePath();\r\n const lgR = ctx.createLinearGradient(0, fy, fw, fy + fh);\r\n lgR.addColorStop(0, C.goldRim);\r\n lgR.addColorStop(0.5, C.gold);\r\n lgR.addColorStop(1, C.goldDim);\r\n ctx.fillStyle = lgR;\r\n ctx.globalAlpha = 1;\r\n ctx.fill();\r\n ctx.strokeStyle = '#4a3410';\r\n ctx.lineWidth = 0.9;\r\n ctx.stroke();\r\n\r\n ctx.beginPath();\r\n ctx.moveTo(0, fy);\r\n ctx.lineTo(0, fy + fh);\r\n ctx.strokeStyle = '#2a1a05';\r\n ctx.lineWidth = 1.5;\r\n ctx.globalAlpha = 1;\r\n ctx.stroke();\r\n\r\n ctx.globalAlpha = 1;\r\n ctx.restore();\r\n }\r\n\r\n function easeOutBack(t) {\r\n const c1 = 1.70158;\r\n const c3 = c1 + 1;\r\n return 1 + c3 * Math.pow(t - 1, 3) + c1 * Math.pow(t - 1, 2);\r\n }\r\n\r\n function draw180(alpha) {\r\n if (alpha <= 0) return;\r\n const text = '180';\r\n const x = cx;\r\n const y = cy;\r\n\r\n ctx.save();\r\n ctx.globalAlpha = alpha;\r\n\r\n ctx.shadowColor = C.gold;\r\n ctx.shadowBlur = 60;\r\n\r\n ctx.font = 'bold 100px \"Bebas Neue\", Arial';\r\n ctx.textAlign = 'center';\r\n ctx.textBaseline = 'middle';\r\n\r\n const grad = ctx.createLinearGradient(x - 120, y - 60, x + 120, y + 60);\r\n grad.addColorStop(0, C.goldDim);\r\n grad.addColorStop(0.4, C.goldRim);\r\n grad.addColorStop(0.6, C.gold);\r\n grad.addColorStop(1, C.goldDim);\r\n\r\n ctx.fillStyle = grad;\r\n ctx.fillText(text, x, y);\r\n\r\n ctx.shadowBlur = 0;\r\n ctx.globalAlpha = alpha * 0.25;\r\n ctx.fillStyle = '#fff';\r\n ctx.fillText(text, x, y);\r\n\r\n ctx.restore();\r\n }\r\n\r\n function animate(ts) {\r\n if (!startTime) startTime = ts;\r\n const elapsed = (ts - startTime) \/ 1000;\r\n\r\n ctx.clearRect(0, 0, canvas.width, canvas.height);\r\n drawBoard();\r\n\r\n for (let i = 0; i < dartTargets.length; i++) {\r\n const d = dartTargets[i];\r\n const t = elapsed - d.delay;\r\n let progress = 0;\r\n const flyTime = 0.75;\r\n if (t > 0 && t < flyTime) {\r\n progress = easeOutBack(t \/ flyTime);\r\n } else if (t >= flyTime) {\r\n progress = 1;\r\n }\r\n drawDart(d.x, d.y, progress, d.tilt);\r\n }\r\n\r\n const timeIn180 = elapsed - SHOW_180_AT;\r\n if (timeIn180 > 0) {\r\n const fadeIn = Math.min(timeIn180 \/ 0.4, 1);\r\n const fadeOut = Math.max(0, 1 - (elapsed - (LOOP_DURATION - 1.2)) \/ 0.6);\r\n alpha180 = Math.min(fadeIn, fadeOut);\r\n draw180(alpha180);\r\n }\r\n\r\n if (elapsed >= LOOP_DURATION) {\r\n startTime = ts;\r\n alpha180 = 0;\r\n }\r\n\r\n requestAnimationFrame(animate);\r\n }\r\n\r\n requestAnimationFrame(animate);\r\n }\r\n\r\n if (document.readyState === 'loading') {\r\n document.addEventListener('DOMContentLoaded', initDartboard);\r\n } else {\r\n initDartboard();\r\n }\r\n})();\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Dart Club Hochdorf Dart Club Hochdorf Dart Club Hochdorf Dart Club Hochdorf \u2014 Gegr\u00fcndet 2025 BullseyeMentalit\u00e4t. Mit Steel zum Erfolg. Dart Club Hochdorf ist ein neuer Verein f\u00fcr alle, die den Dartsport lieben. Wir verbinden Leidenschaft, Pr\u00e4zision und Kameradschaft. 3 Mitglieder 2025 Gr\u00fcndung Trainingsabend Details folgen \u2605 Neu gegr\u00fcndet im Jahr 2025 \u2605 Suche Vereinslokal […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_angie_page":false,"footnotes":""},"class_list":["post-16","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/dartclubhochdorf.ch\/index.php?rest_route=\/wp\/v2\/pages\/16","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dartclubhochdorf.ch\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/dartclubhochdorf.ch\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/dartclubhochdorf.ch\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/dartclubhochdorf.ch\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=16"}],"version-history":[{"count":53,"href":"https:\/\/dartclubhochdorf.ch\/index.php?rest_route=\/wp\/v2\/pages\/16\/revisions"}],"predecessor-version":[{"id":100,"href":"https:\/\/dartclubhochdorf.ch\/index.php?rest_route=\/wp\/v2\/pages\/16\/revisions\/100"}],"wp:attachment":[{"href":"https:\/\/dartclubhochdorf.ch\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=16"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}