…/title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..60,400;12..60,600;12..60,700;12..60,800&family=Outfit:wght@300;400;500;600;700&display=swap" rel="stylesheet"> <link rel="stylesheet" href="style.css" /> </head> <body> <nav class="site-nav" id="site-nav"> <div class="nav-inner"> <a href="index.html" class="nav-logo" aria-label="Besser Sprechen – Startseite"> <img src="./assets/besser-sprechen-logo-horizontal.png" alt="Besser Sprechen"> </a> <ul class="nav-links" id="nav-links-desktop"> <li><a href="index.html" class="nav-link" data-slug="index">Startseite</a></li> <li><a href="irinavonbentheim.html" class="nav-link" data-slug="irinavonbentheim">Irina von Bentheim</a></li> <li><a href="dietmarwunder.html" class="nav-link" data-slug="dietmarwunder">Dietmar Wunder</a></li> <li><a href="silkehaas.html" class="nav-link" data-slug="silkehaas">Silke Haas</a></li> <li><a href="markuskaestle.html" class="nav-link" data-slug="markuskaestle">Markus Kästle</a></li> <li><a href="ulrikevoelger.html" class="nav-link" data-slug="ulrikevoelger">Ulrike Völger</a></li> <li><a href="praxiszugang.html" class="nav-link" data-slug="praxiszugang">Praxiszugang</a></li> <li><a href="support.html" class="nav-link" data-slug="support">Support</a></li> <li><a href="faq.html" class="nav-link" data-slug="faq">FAQ</a></li> </ul> <button class="nav-hamburger" id="nav-hamburger" aria-label="Menü öffnen" aria-expanded="false" aria-controls="nav-mobile-overlay" onclick="(function(){ var btn = document.getElementById('nav-hamburger'); var overlay = document.getElementById('nav-mobile-overlay'); var isOpen = btn.classList.toggle('is-open'); overlay.classList.toggle('is-open', isOpen); btn.setAttribute('aria-expanded', String(isOpen)); btn.setAttribute('aria-label', isOpen ? 'Menü schließen' : 'Menü öffnen'); document.body.style.overflow = isOpen ? 'hidden' : ''; })()" > <span></span> <span></span> <span></span> </button> </div> <div class="nav-mobile-overlay" id="nav-mobile-overlay" role="dialog" aria-modal="true" aria-label="Hauptnavigation"> <a href="index.html" class="nav-link" data-slug="index">Startseite</a> <a href="irinavonbentheim.html" class="nav-link" data-slug="irinavonbentheim">Irina von Bentheim</a> <a href="dietmarwunder.html" class="nav-link" data-slug="dietmarwunder">Dietmar Wunder</a> <a href="silkehaas.html" class="nav-link" data-slug="silkehaas">Silke Haas</a> <a href="markuskaestle.html" class="nav-link" data-slug="markuskaestle">Markus Kästle</a> <a href="ulrikevoelger.html" class="nav-link" data-slug="ulrikevoelger">Ulrike Völger</a> <a href="praxiszugang.html" class="nav-link" data-slug="praxiszugang">Praxiszugang</a> <a href="support.html" class="nav-link" data-slug="support">Support</a> <a href="faq.html" class="nav-link" data-slug="faq">FAQ</a> </div> </nav> <header class="page-hero"> <div class="page-hero-inner"> <span class="page-hero-eyebrow">Besser Sprechen</span> <h1 class="page-hero-title">Markus Kaestle</h1> </div> </header> <div class="waveform-divider" aria-hidden="true"></div> <main class="coach-page"> <section class="coach-intro section fade-in"> <div class="container"> <div class="intro-grid"> <div class="intro-text"> <p class="coach-role-label">…/p> <h1 class="display-heading intro-name">Markus<br>Kästle</h1> <p class="body-text intro-lead">…/p> <div class="station-badges"> <span class="station-badge">Antenne Bayern</span> <span class="station-badge">Sky</span> <span class="station-badge">NDR2</span> <span class="station-badge">MDR</span> <span class="station-badge">Radio 7</span> </div> </div> <div class="intro-portrait-wrap"> <div class="portrait-frame"> <img src="./assets/e76fa14c-3b37-4855-a3b4-e5df1e66857e.png" alt="Markus Kästle – Station Voice, Werbesprecher & Stimmcoach" class="coach-portrait" /> <div class="portrait-overlay-bar"> <span class="portrait-label-text">Station Voice</span> </div> </div> </div> </div> </div> </section> <div class="waveform-divider" aria-hidden="true"> <svg class="waveform-svg" viewBox="0 0 1440 60" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg"> <polyline class="waveform-line" points=" 0,30 20,30 30,30 40,28 50,32 60,20 70,40 80,14 90,46 100,10 110,50 120,8 130,52 140,12 150,48 160,18 170,42 180,22 190,38 200,28 210,32 220,24 230,36 240,20 250,40 260,16 270,44 280,22 290,38 300,28 320,30 340,30 360,26 380,34 400,18 420,42 440,10 460,50 480,6 500,54 520,8 540,52 560,14 580,46 600,20 620,40 640,24 660,36 680,28 700,32 720,30 740,30 760,26 780,34 800,22 820,38 840,18 860,42 880,14 900,46 920,20 940,40 960,28 980,32 1000,24 1020,36 1040,18 1060,42 1080,22 1100,38 1120,26 1140,34 1160,30 1180,30 1200,28 1220,32 1240,24 1260,36 1280,20 1300,40 1320,28 1340,32 1360,30 1380,30 1400,30 1440,30 "/> </svg> </div> <section class="about-section section fade-in"> <div class="container"> <div class="about-grid"> <div class="about-label-col"> <span class="section-eyebrow">Über Markus</span> <div class="vertical-rule"></div> </div> <div class="about-content-col"> <h2 class="section-title about-title">Eine Stimme,<br><em>die bleibt.</em></h2> <div class="about-body"> <p class="body-text">…/p> <p class="body-text">…/p> </div> </div> </div> </div> </section> <section class="expertise-section section fade-in"> <div class="container"> <p class="section-eyebrow eyebrow-center">Tätigkeitsbereiche</p> <div class="expertise-grid"> <article class="expertise-card card"> <div class="expertise-icon-ring"> <svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"> <circle cx="14" cy="14" r="6" stroke="var(--accent)" stroke-width="1.5"/> <circle cx="14" cy="14" r="11" stroke="var(--accent)" stroke-width="1" stroke-dasharray="3 2"/> <circle cx="14" cy="14" r="2.5" fill="var(--accent)"/> </svg> </div> <h3 class="expertise-card-title">Station Voice</h3> <p class="body-text expertise-desc">…/p> <ul class="station-list"> <li>NDR 2</li> <li>Radio 7</li> <li>MDR Sachsen-Anhalt</li> </ul> </article> <article class="expertise-card card expertise-card--featured"> <div class="expertise-icon-ring"> <svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"> <path d="M4 14 Q7 6 14 8 Q21 10 24 14 Q21 22 14 20 Q7 18 4 14Z" stroke="var(--accent)" stroke-width="1.5" fill="none"/> <line x1="14" y1="4" x2="14" y2="6" stroke="var(--accent)" stroke-width="1.5" stroke-linecap="round"/> <line x1="14" y1="22" x2="14" y2="24" stroke="var(--accent)" stroke-width="1.5" stroke-linecap="round"/> </svg> </div> <h3 class="expertise-card-title">Werbung</h3> <p class="body-text expertise-desc">…/p> <span class="expertise-tag">National</span> <span class="expertise-tag">International</span> </article> <article class="expertise-card card"> <div class="expertise-icon-ring"> <svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"> <rect x="4" y="7" width="20" height="14" rx="2" stroke="var(--accent)" stroke-width="1.5" fill="none"/> <path d="M11 11.5 L18 14 L11 16.5Z" fill="var(--accent)"/> </svg> </div> <h3 class="expertise-card-title">Dokumentationen</h3> <p class="body-text expertise-desc">…/p> <span class="expertise-tag">TV-Produktionen</span> <span class="expertise-tag">Reportagen</span> </article> </div> </div> </section> <div class="waveform-divider" aria-hidden="true"> <svg class="waveform-svg" viewBox="0 0 1440 60" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg"> <polyline class="waveform-line" points=" 0,30 30,30 50,32 70,28 90,34 110,24 130,36 150,18 170,42 190,12 210,48 230,10 250,50 270,16 290,44 310,22 330,38 350,26 370,34 390,28 410,32 430,24 450,36 470,20 490,40 510,26 530,34 550,22 570,38 590,18 610,42 630,14 650,46 670,20 690,40 710,28 730,32 750,30 770,30 790,28 810,32 830,20 850,40 870,14 890,46 910,22 930,38 950,26 970,34 990,24 1010,36 1030,20 1050,40 1070,26 1090,34 1110,22 1130,38 1150,28 1170,32 1190,30 1210,30 1230,28 1250,32 1270,26 1290,34 1310,30 1330,30 1360,30 1400,30 1440,30 "/> </svg> </div> <section class="bootcamp-section fade-in"> <div class="bootcamp-inner"> <div class="bootcamp-content-wrap container"> <div class="bootcamp-text-block"> <span class="section-eyebrow bootcamp-eyebrow">Markus' Training</span> <h2 class="display-heading bootcamp-title">OnAir-<br>Bootcamp</h2> <p class="body-text bootcamp-desc">…/p> <div class="bootcamp-tags"> <span class="skill-pill">Radio-Moderation</span> <span class="skill-pill">Station Voice</span> <span class="skill-pill">Mikrofon-Technik</span> <span class="skill-pill">Werbesprechen</span> </div> </div> <div class="bootcamp-visual"> <div class="bootcamp-mic-graphic" aria-hidden="true"> <svg width="120" height="200" viewBox="0 0 120 200" fill="none" xmlns="http://www.w3.org/2000/svg"> <rect x="42" y="20" width="36" height="80" rx="18" stroke="var(--accent)" stroke-width="2" fill="none"/> <rect x="48" y="30" width="24" height="10" rx="5" fill="var(--accent)" opacity="0.3"/> <rect x="48" y="48" width="24" height="10" rx="5" fill="var(--accent)" opacity="0.5"/> <rect x="48" y="66" width="24" height="10" rx="5" fill="var(--accent)" opacity="0.3"/> <path d="M24 90 Q24 130 60 130 Q96 130 96 90" stroke="var(--accent)" stroke-width="2" fill="none"/> <line x1="60" y1="130" x2="60" y2="165" stroke="var(--accent)" stroke-width="2"/> <line x1="35" y1="165" x2="85" y2="165" stroke="var(--accent)" stroke-width="2"/><path d="M15 70 Q8 100 15 120" stroke="var(--accent)" stroke-width="1" fill="none" opacity="0.4"/> <path d="M105 70 Q112 100 105 120" stroke="var(--accent)" stroke-width="1" fill="none" opacity="0.4"/> <path d="M5 55 Q-6 95 5 130" stroke="var(--accent)" stroke-width="0.8" fill="none" opacity="0.2"/> <path d="M115 55 Q126 95 115 130" stroke="var(--accent)" stroke-width="0.8" fill="none" opacity="0.2"/> </svg> </div> <div class="bootcamp-mini-waveform" aria-hidden="true"> <svg width="200" height="40" viewBox="0 0 200 40" fill="none" xmlns="http://www.w3.org/2000/svg"> <polyline class="waveform-line" points="0,20 5,20 10,16 15,24 20,8 25,32 30,4 35,36 40,6 45,34 50,10 55,30 60,14 65,26 70,18 75,22 80,20 90,20 95,16 100,24 105,10 110,30 115,6 120,34 125,12 130,28 135,18 140,22 145,20 155,20 160,18 165,22 170,16 175,24 180,20 185,20 190,20 195,20 200,20"/> </svg> </div> </div> </div> </div> </section> <div class="waveform-divider" aria-hidden="true"> <svg class="waveform-svg" viewBox="0 0 1440 60" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg"> <polyline class="waveform-line" points=" 0,30 40,30 60,26 80,34 100,20 120,40 140,16 160,44 180,22 200,38 220,28 240,32 260,24 280,36 300,20 320,40 340,26 360,34 380,22 400,38 420,18 440,42 460,24 480,36 500,28 520,32 540,30 560,30 580,28 600,32 620,20 640,40 660,14 680,46 700,22 720,38 740,26 760,34 780,28 800,32 820,24 840,36 860,20 880,40 900,26 920,34 940,28 960,32 980,30 1000,30 1020,28 1040,32 1060,24 1080,36 1100,20 1120,40 1140,28 1160,32 1180,30 1200,30 1220,28 1240,32 1260,30 1280,30 1300,30 1320,30 1360,30 1400,30 1440,30 "/> </svg> </div> <section class="app-cta-section section fade-in"> <div class="container"> <div class="app-cta-grid"> <div class="app-cta-text"> <span class="section-eyebrow">BesserSprechen App</span> <h2 class="section-title app-cta-title">Lerne von Markus<br><em>…/em></h2> <p class="body-text app-cta-desc">…/p> <div class="store-badges"> <a href="https://apps.apple.com/de/app/besser-sprechen-3/id976526364" class="store-badge-link" target="_blank" rel="noopener"> <img src="./assets/appstore-LbDaQdIb.png" alt="Laden im App Store" class="store-badge-img" /> </a> <a href="https://play.google.com/store/apps/details?id=de.apps2go.bs&pcampaignid=web_share" class="store-badge-link" target="_blank" rel="noopener"> <img src="./assets/playstore-DPU1KjSs.png" alt="Jetzt bei Google Play" class="store-badge-img" /> </a> </div> </div> <div class="app-cta-visual"> <img src="./assets/iPhone_Blau.png" alt="BesserSprechen App auf dem iPhone" class="app-iphone-mockup" /> </div> </div> </div> </section> <section class="all-coaches-section fade-in"> <div class="container"> <div class="all-coaches-inner"> <div class="all-coaches-waveform-accent" aria-hidden="true"> <svg width="80" height="24" viewBox="0 0 80 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <polyline class="waveform-line" points="0,12 5,12 10,8 15,16 20,4 25,20 30,6 35,18 40,10 45,14 50,8 55,16 60,10 65,14 70,12 75,12 80,12"/> </svg> </div> <p class="body-text all-coaches-cta-text">…/p> <a href="https://bessersprechen.app/" class="btn-secondary all-coaches-btn" target="_blank" rel="noopener">…svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="btn-arrow"> <path d="M3 8h10M9 4l4 4-4 4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> </svg> </a> </div> </div> </section> </main> <footer class="site-footer"> <div class="waveform-divider" aria-hidden="true"></div> <div class="footer-inner"> <div class="footer-top"> <div class="footer-brand"> <a href="index.html" aria-label="Besser Sprechen – Startseite"> <img src="./assets/besser-sprechen-logo-horizontal.png" alt="Besser Sprechen"> </a> <p class="footer-tagline">…/p> </div> <div class="footer-nav-group"> <p class="footer-nav-label">Navigation</p> <ul class="footer-links"> <li><a href="index.html" class="footer-link">Startseite</a></li> <li><a href="irinavonbentheim.html" class="footer-link">Irina von Bentheim</a></li> <li><a href="dietmarwunder.html" class="footer-link">Dietmar Wunder</a></li> <li><a href="silkehaas.html" class="footer-link">Silke Haas</a></li> <li><a href="markuskaestle.html" class="footer-link">Markus Kästle</a></li> <li><a href="ulrikevoelger.html" class="footer-link">Ulrike Völger</a></li> <li><a href="praxiszugang.html" class="footer-link">Praxiszugang</a></li> <li><a href="support.html" class="footer-link">Support</a></li> <li><a href="faq.html" class="footer-link">FAQ</a></li> </ul> </div> </div> <div class="footer-bottom"> <p class="footer-copy">…/p> <ul class="footer-legal-links"> </ul> </div> </div> </footer> </body> </html>