1<!DOCTYPE html> 2<html lang="de-de"> 3 <head> 4 <!-- Required meta tags --> 5 <meta charset="utf-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/> 7 <meta name="google-site-verification" content="0thQJop0O1O6tJdEz8bA49-I13N2-5t8YQ1_StXrekk"/> 8 <meta name="keywords" content="Berufsorientierung, Berufsberatung, Ausbildung, Studium, Duales Studium, App, Stellenangebot, Praktikum, stick to, Karriere-Exploration, Berufswahl, Jobsuche, Gamification, Mobile App"/> 9 <meta name="author" content="StickTo"/> 10 <meta name="description" content="Die Berufsorientierungs-App für Schüler! Swipe dich über 1.300 Berufe, erstelle ein Interessensprofil, finde Unternehmen für Ausbildungen, ein Duales Studium oder Praktika in deiner Nähe und bewirb dich direkt."/> 11 <meta name="copyright"content="StickTo"/> 12 <meta name="language" content="DE"/> 13 <meta name="url" content="https://stick-to.de/"/> 14 <meta name="category" content="Bildung"/> 15 <meta name="theme-color" content="#ffffff"/> 16 <meta name="apple-itunes-app" content="app-id=1591738967"> 17 18 <meta property="og:type" content="website"/> 19 <meta property="og:site_name" content="StickTo"/> 20 <meta property="og:title" content="StickTo - Your Swipe. Your Future"/> 21 <meta property="og:description" content="Die Berufsorientierungs-App für Schüler! Swipe dich über 1.300 Berufe, erstelle ein Interessensprofil, finde Unternehmen für Ausbildungen, ein Duales Studium oder Praktika in deiner Nähe und bewirb dich direkt."/> 22 <meta property="og:url" content="https://stick-to.de/"/> 23 <link rel="canonical" href="https://stick-to.de/"/> 24 <meta property="og:image" content="https://stick-to.de/img/og/website-preview-image.png"/> 25 26 <title>StickTo - Your Swipe. Your Future</title> 27 28 <!-- Google Tag Manager --> 29
29<script>
vendor: 351 bytes, lines 29-33
29(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': 30 new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], 31 j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 32 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); 33 })(window,document,'script','dataLayer','
33GTM-5425MRB
vendor: 3 bytes, line 33
33');
33</script>
33 34 <!-- End Google Tag Manager --> 35 36 <!-- Resource-Hints: Drittanbieter-Handshake + Hero-Font beschleunigen --> 37 <link rel="preconnect" href="https://www.googletagmanager.com"> 38 <link rel="preconnect" href="https://www.google-analytics.com" crossorigin> 39 <link rel="preconnect" href="https://cdn.kiprotect.com"> 40 <link rel="preconnect" href="https://unpkg.com" crossorigin> 41 <link rel="preload" as="font" type="font/woff2" href="fonts/google/poppins/poppins-700-normal-latin.woff2" crossorigin> 42 <link rel="preload" as="font" type="font/woff2" href="fonts/google/poppins/poppins-400-normal-latin.woff2" crossorigin> 43 44 <!--====== Favicon Icon ======--> 45 <link rel="shortcut icon" href="img/StickTo_Icon.png?v=2" type="image/png"> 46 47 <!-- LCP Preload: Hero-Bild --> 48 <link rel="preload" as="image" href="img/App_Jobkarte.webp" fetchpriority="high"> 49 50 51 <!-- Bootstrap CSS --> 52 <link rel="stylesheet" href="css/variables.css?v=2"> 53 <link rel="stylesheet" href="css/bootstrap.min.css"> 54 55 <link rel="stylesheet" href="css/LineIcons.css?v=1"> 56 <link rel="stylesheet" href="css/owl.carousel.css" media="print" onload="this.media='all'"> 57 <noscript><link rel="stylesheet" href="css/owl.carousel.css"></noscript> 58 <link rel="stylesheet" href="css/owl.theme.css" media="print" onload="this.media='all'"> 59 <noscript><link rel="stylesheet" href="css/owl.theme.css"></noscript> 60 <!-- <link rel="stylesheet" href="css/magnific-popup.css"> --> 61 <link rel="stylesheet" href="css/main.css?v=65"> 62 <link rel="stylesheet" href="css/responsive.css?v=25"> 63 <link rel="stylesheet" href="css/app-banner.css?v=20"> 64 <link rel="stylesheet" href="css/fontawesome.css" media="print" onload="this.media='all'"> 65 <noscript><link rel="stylesheet" href="css/fontawesome.css"></noscript> 66 67 <!-- Klaro --> 68
68<script defer src="js/klaro-config.js"></script>
68 69
69<script defer data-config="klaroConfig" src="https://cdn.kiprotect.com/klaro/latest/klaro.js"></script>
69 70 <link rel="stylesheet" href="https://cdn.kiprotect.com/klaro/latest/klaro.css" /> 71 <link rel="stylesheet" href="css/custom-klaro.css" /> 72 73 <!-- AOS Animation Library --> 74 <link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet"> 75
75<script defer src="https://unpkg.com/[email protected]/dist/aos.js"></script>
75 76 77 <!-- Custom Header Animations --> 78 <style> 79 /* Wrapper macht die Float-Animation, Img macht den Hover-Transform. 80 * Saubere Trennung verhindert den Konflikt zwischen kontinuierlicher 81 * animation (translateY) und transition-basiertem hover (scale). */ 82 .header-app-image-wrapper { 83 display: inline-block; 84 animation: float-header 6s ease-in-out infinite; 85 } 86 87 .header-app-image { 88 filter: drop-shadow(0 20px 40px rgba(0,0,0,0.3)); 89 transition: transform 0.3s ease, filter 0.3s ease; 90 will-change: transform, filter; 91 } 92 93 .header-app-image:hover { 94 transform: scale(1.05); 95 filter: drop-shadow(0 30px 60px rgba(0,0,0,0.4)); 96 } 97 98 @keyframes float-header { 99 0%, 100% { 100 transform: translateY(0px); 101 } 102 50% { 103 transform: translateY(-20px); 104 } 105 } 106 </style> 107 108 109 </head> 110 111 <body> 112 <!-- Google Tag Manager (noscript) -->
vendor: 72 bytes, lines 112-113
112 113 <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=
113GTM-5425MRB
vendor: 87 bytes, lines 113-114
113" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript> 114
114<!-- End Google Tag Manager (noscript) --> 115 <div id="klaro"></div> 116 117 <!-- Header Section Start --> 118 <!-- Android App Banner Start (iOS via meta apple-itunes-app) --> 119 <div id="app-banner" class="app-banner" hidden> 120 <img src="img/StickTo_Icon.png" alt="" class="app-banner-icon" width="1500" height="1500" loading="lazy" decoding="async"> 121 <div class="app-banner-text"> 122 <div class="app-banner-title">StickTo</div> 123 <div class="app-banner-subtitle">Berufsorientierungs-App</div> 124 </div> 125 <a href="https://play.google.com/store/apps/details?id=com.stickto.stickto" class="app-banner-cta" target="_blank" rel="noopener noreferrer">Ãffnen</a> 126 <button type="button" class="app-banner-close" aria-label="Banner schlieÃen">Ã</button> 127 </div> 128 <!-- Android App Banner End --> 129 130 131 <header id="home" class="hero-area"> 132 <div class="overlay"> 133 <span></span> 134 <span></span> 135 </div> 136 <nav class="navbar navbar-expand-md bg-inverse fixed-top scrolling-navbar"> 137 <div class="container"> 138 <a href="/" class="navbar-brand"><img src="img/StickTo_Logo_breit.svg" alt="StickTo Logo" width="165" height="52"></a> 139 <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation"> 140 <i class="lni-menu"></i> 141 </button> 142 <div class="collapse navbar-collapse" id="navbarCollapse"> 143 <ul class="navbar-nav mr-auto w-100 justify-content-end"> 144 <li class="nav-item"> 145 <a class="nav-link page-scroll active" href="#home">Start</a> 146 </li> 147 <li class="nav-item"> 148 <a class="nav-link page-scroll" href="/eltern">Eltern</a> 149 </li> 150 <li class="nav-item"> 151 <a class="nav-link page-scroll" href="/team">Ãber uns</a> 152 </li> 153 <li class="nav-item"> 154 <a class="nav-link page-scroll" href="/unternehmen">Für Unternehmen</a> 155 </li> 156 <li class="nav-item"> 157 <a class="nav-link page-scroll" href="/blog/">Blog</a> 158 </li> 159 </ul> 160 </div> 161 </div> 162 </nav> 163 <div class="container"> 164 <div class="row space-100"> 165 <div class="col-lg-6 col-md-12 col-xs-12 p-0"> 166 <div class="intro-img"> 167 <a href="#company-matching" class="page-scroll" aria-label="Mehr über das Matching mit Unternehmen erfahren"> 168 <span class="header-app-image-wrapper"> 169 <img src="img/App_Jobkarte.webp" alt="Mobile frame StickTo Jobkarte" class="header-app-image" width="1570" height="2932" fetchpriority="high"> 170 </span> 171 </a> 172 </div> 173 </div> 174 <div class="col-lg-6 col-md-12 col-xs-12"> 175 <div class="contents"> 176 <h1 class="head-title"> <b>StickTo</b> <br> Your Swipe. Your Future. </h1> 177 <p> Egal ob Ausbildung oder Studium, informiere dich unkompliziert zu 1000+ Berufen und lerne Unternehmen in deiner Region kennen.</p> 178 <div class="check"> 179 180 <img src="img/icon/task_alt_FILL0_wght400_GRAD0_opsz24.svg" alt="Check Icon" width="24" height="24"> 181 182 <h2> Berufsorientierung ist endlich einfach</h2> 183 184 </div> 185 <div class="business-item-info-app"> 186 <a href="https://apps.apple.com/us/app/stickto-die-orientierungsapp/id1591738967?itscg=30200&itsct=apps_box_link" target="_blank" rel="noopener noreferrer" class="download-btn download-appstore"> 187 <img src="img/app/badge-appstore.png" class="img-fluid" alt="Apple Downloadbutton für die App" width="1991" height="584"> 188 </a> 189 <a href="https://play.google.com/store/apps/details?id=com.stickto.stickto" target="_blank" rel="noopener noreferrer" class="download-btn download-playstore"> 190 <img src="img/app/badge-play.png" class="img-fluid" alt="Andoid Downloadbutton für die App" width="2000" height="588"> 191 </a> 192 </div> 193 194 </div> 195 </div> 196 197 </div> 198 </div> 199 </header> 200 <!-- Header Section End --> 201 202 <section class="stats-box"> 203 <div class="stats-item">
204 <span class="stats-number">+50K</span> 205 <span class="stats-label">User</span> 206 </div> 207 <div class="stats-item"> 208 <span class="stats-number">+8,3 Mio</span> 209 <span class="stats-label">Swipes</span> 210 </div> 211 <div class="stats-item"> 212 <span class="stats-number"> 213 +4,5 214 <svg class="stats-icon" width="1em" height="1em" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg" transform="rotate(0 0 0)"> 215 <path fill-rule="evenodd" clip-rule="evenodd" d="M11.9996 2.125C12.2851 2.125 12.5459 2.28707 12.6722 2.54308L15.3264 7.9211L21.2614 8.78351C21.5439 8.82456 21.7786 9.02244 21.8669 9.29395C21.9551 9.56546 21.8815 9.86351 21.6771 10.0628L17.3825 14.249L18.3963 20.16C18.4445 20.4414 18.3289 20.7257 18.0979 20.8936C17.867 21.0614 17.5608 21.0835 17.3081 20.9506L11.9996 18.1598L6.69122 20.9506C6.43853 21.0835 6.13233 21.0614 5.90137 20.8936C5.67041 20.7257 5.55475 20.4414 5.603 20.16L6.61682 14.249L2.32222 10.0628C2.11779 9.86351 2.04421 9.56546 2.13243 9.29395C2.22065 9.02244 2.45536 8.82456 2.73788 8.78351L8.67288 7.9211L11.3271 2.54308C11.4534 2.28707 11.7142 2.125 11.9996 2.125ZM11.9996 4.56966L9.84348 8.93853C9.73423 9.15989 9.52306 9.31331 9.27878 9.34881L4.45745 10.0494L7.94619 13.4501C8.12296 13.6224 8.20362 13.8706 8.16189 14.1139L7.33831 18.9158L11.6506 16.6487C11.8691 16.5338 12.1302 16.5338 12.3486 16.6487L16.661 18.9158L15.8374 14.1139C15.7957 13.8706 15.8763 13.6224 16.0531 13.4501L19.5418 10.0494L14.7205 9.34881C14.4762 9.31331 14.2651 9.15989 14.1558 8.93853L11.9996 4.56966Z" fill="#1f2730"/> 216 </svg> 217 </span> 218 <span class="stats-label">Bewertet</span> 219 </div> 220 </section> 221 222 <!-- Bekannt aus Section --> 223 <section class="bekannt-aus"> 224 <div class="container"> 225 <h3 data-aos="fade-up">Bekannt aus</h3> 226 <div class="logo-container"> 227 <div class="logo-item" data-aos="fade-up" data-aos-delay="100"> 228 <img src="img/media/Logos/Personalmagazin.webp" alt="Logo Hamburger Abendblatt" width="1240" height="472" loading="lazy" decoding="async"> 229 </div> 230 <div class="logo-item" data-aos="fade-up" data-aos-delay="200"> 231 <img src="img/media/Logos/Hamburger_abendblatt.webp" alt="Logo Hamburger Abendblatt" width="1597" height="178" loading="lazy" decoding="async"> 232 </div> 233 <div class="logo-item" data-aos="fade-up" data-aos-delay="300"> 234 <img src="img/media/Logos/WELT.webp" alt="Logo WELT" width="1024" height="268" loading="lazy" decoding="async"> 235 </div> 236 <div class="logo-item" data-aos="fade-up" data-aos-delay="400"> 237 <img src="img/media/Logos/Kieler_Nachrichten.webp" alt="Logo Kieler Nachrichten" width="1379" height="121" loading="lazy" decoding="async"> 238 </div> 239 <!-- Weitere Logos hinzufügen, falls benötigt --> 240 </div> 241 </div> 242 </section> 243 244 <!-- App Showcase Section Start --> 245 <section id="app-showcase" class="section"> 246 <div class="container"> 247 <div class="row align-items-center"> 248 <div class="col-lg-6 col-md-12"> 249 <div class="app-showcase-content"> 250 <div class="section-header"> 251 <h2 class="section-title">Berufe einfach entdecken</h2> 252 <p class="section-subtitle">Mit StickTo wird Berufsorientierung zum Kinderspiel</p> 253 </div> 254 255 <div class="feature-grid"> 256 <div class="feature-item" data-aos="fade-up" data-aos-delay="100"> 257 <div class="feature-icon"> 258 <i class="fas fa-search"></i> 259 </div> 260 <div class="feature-content"> 261 <h3>1300+ Berufe entdecken</h3> 262 <p>Entdecke schnell und spielerisch alle anerkannten Berufe in Deutschland</p> 263 </div> 264 </div> 265 266 <div class="feature-item" data-aos="fade-up" data-aos-delay="200"> 267 <div class="feature-icon"> 268 <i class="fas fa-clock"></i> 269 </div> 270 <div class="feature-content"> 271 <h3>
271In 10 Sekunden verstehen</h3> 272 <p>Lerne auf einer Karte alles Wichtige: Tagesabläufe, Gehalt, Ausbildung</p> 273 </div> 274 </div> 275 276 <div class="feature-item" data-aos="fade-up" data-aos-delay="300"> 277 <div class="feature-icon"> 278 <i class="fas fa-heart"></i> 279 </div> 280 <div class="feature-content"> 281 <h3>Interessen durch Swipen</h3> 282 <p>Speichere spannende Berufe und finde so deine wahren Interessen</p> 283 </div> 284 </div> 285 </div> 286 </div> 287 </div> 288 289 <div class="col-lg-6 col-md-12"> 290 <div class="app-showcase-visual" data-aos="fade-left" data-aos-delay="400"> 291 <div class="phone-mockup"> 292 <img src="img/App_Jobkarte_card.webp" alt="StickTo App - Jobkarte" class="app-screenshot" width="754" height="1526" loading="lazy" decoding="async"> 293 <div class="floating-card floating-card-1" data-aos="fade-left" data-aos-delay="500"> 294 <div class="card-content"> 295 <h4>Voraussetzungen</h4> 296 <p>Studium, Ausbildung und mehr</p> 297 </div> 298 </div> 299 <div class="floating-card floating-card-2" data-aos="fade-right" data-aos-delay="600"> 300 <div class="card-content"> 301 <h4>Tagesablauf</h4> 302 <p>Aus der Praxis zum durchklicken</p> 303 </div> 304 </div> 305 </div> 306 </div> 307 </div> 308 </div> 309 </div> 310 </section> 311 <!-- App Showcase Section End --> 312 313 <!-- App Features Section Start --> 314 <section id="app-features" class="section"> 315 <div class="container"> 316 <div class="row align-items-center"> 317 <div class="col-lg-6 col-md-12 order-lg-2 order-md-1"> 318 <div class="app-features-content"> 319 <div class="section-header"> 320 <h2 class="section-title">Dein Interessenprofil</h2> 321 <p class="section-subtitle">Lerne dich selbst besser kennen</p> 322 </div> 323 324 <div class="feature-grid"> 325 <div class="feature-item" data-aos="fade-up" data-aos-delay="100"> 326 <div class="feature-icon"> 327 <i class="fas fa-question-circle"></i> 328 </div> 329 <div class="feature-content"> 330 <h3>Kurze Fragen</h3> 331 <p>Entdecke durch gezielte Fragen deine wahren Interessen</p> 332 </div> 333 </div> 334 335 <div class="feature-item" data-aos="fade-up" data-aos-delay="200"> 336 <div class="feature-icon"> 337 <i class="fas fa-brain"></i> 338 </div> 339 <div class="feature-content"> 340 <h3>KI-gestütztes Matching</h3> 341 <p>Durch Swipen lernt die App deine Interessen kennen</p> 342 </div> 343 </div> 344 345 <div class="feature-item" data-aos="fade-up" data-aos-delay="300"> 346 <div class="feature-icon"> 347 <i class="fas fa-user-circle"></i> 348 </div> 349 <div class="feature-content"> 350 <h3>Persönliches Profil</h3> 351 <p>Erkenne deine Stärken und gewinne Klarheit über deine Zukunft</p> 352 </div> 353 </div> 354 </div> 355 </div> 356 </div> 357 358 <div class="col-lg-6 col-md-12 order-lg-1 order-md-2"> 359 <div class="app-features-visual" data-aos="fade-right" data-aos-delay="400"> 360 <div class="phone-mockup"> 361 <img src="img/App_Profil_card.webp" alt="StickTo App - Profil" class="app-screenshot" width="754" height="1526" loading="lazy" decoding="async"> 362 <div class="profile-stats"> 363 <div class="stat-item">
364 <span class="stat-number" data-target="100">0</span> 365 <span class="stat-label">Gamification</span> 366 </div> 367 <div class="stat-item"> 368 <span class="stat-number" data-target="5">0</span> 369 <span class="stat-label">Topinteressen</span> 370 </div> 371 </div> 372 </div> 373 </div> 374 </div> 375 </div> 376 </div> 377 </section> 378 <!-- App Features Section End --> 379 380 <!-- Company Matching Section Start --> 381 <section id="company-matching" class="section"> 382 <div class="container"> 383 <div class="row align-items-center"> 384 <div class="col-lg-6 col-md-12"> 385 <div class="company-matching-content"> 386 <div class="section-header"> 387 <h2 class="section-title">Unternehmen + Du = Match!</h2> 388 <p class="section-subtitle">Finde deinen Traumjob in der Region</p> 389 </div> 390 391 <div class="feature-grid"> 392 <div class="feature-item" data-aos="fade-up" data-aos-delay="100"> 393 <div class="feature-icon"> 394 <i class="fas fa-map-marker-alt"></i> 395 </div> 396 <div class="feature-content"> 397 <h3>Regionale Unternehmen</h3> 398 <p>Entdecke spannende Arbeitgeber in deiner Nähe</p> 399 </div> 400 </div> 401 402 <div class="feature-item" data-aos="fade-up" data-aos-delay="200"> 403 <div class="feature-icon"> 404 <i class="fas fa-paper-plane"></i> 405 </div> 406 <div class="feature-content"> 407 <h3>Direkte Bewerbung</h3> 408 <p>Stelle Fragen und bewirb dich direkt über die App</p> 409 </div> 410 </div> 411 412 <div class="feature-item" data-aos="fade-up" data-aos-delay="300"> 413 <div class="feature-icon"> 414 <i class="fas fa-magic"></i> 415 </div> 416 <div class="feature-content"> 417 <h3>Intelligentes Matching</h3> 418 <p>Basierend auf deinem Swipeverhalten werden dir passende Unternehmen angezeigt</p> 419 </div> 420 </div> 421 </div> 422 </div> 423 </div> 424 425 <div class="col-lg-6 col-md-12"> 426 <div class="company-matching-visual" data-aos="fade-left" data-aos-delay="400"> 427 <div class="phone-mockup"> 428 <a href="/unternehmen" class="app-screenshot-link" aria-label="Zur Unternehmensseite von StickTo"> 429 <img src="img/App_Unternehmenskarte_card.webp" alt="StickTo App - Unternehmenskarte" class="app-screenshot" width="754" height="1526" loading="lazy" decoding="async"> 430 </a> 431 <div class="company-cards"> 432 <div class="company-card company-card-1" data-aos="fade-up" data-aos-delay="500"> 433 <img src="img/partner/Hamburger_Sparkasse_Logo.webp" alt="Hamburger Sparkasse" width="2560" height="1141" loading="lazy" decoding="async"> 434 </div> 435 <div class="company-card company-card-2" data-aos="fade-up" data-aos-delay="600"> 436 <img src="img/partner/signalIduna_logo.webp" alt="Minimax" width="1198" height="411" loading="lazy" decoding="async"> 437 </div> 438 <div class="company-card company-card-3" data-aos="fade-up" data-aos-delay="700"> 439 <img src="img/partner/hobby_logo.webp" alt="Hobby" width="4148" height="1211" loading="lazy" decoding="async"> 440 </div> 441 </div> 442 </div> 443 </div> 444 </div> 445 </div> 446 </div> 447 </section> 448 <!-- Company Matching Section End --> 449 450 <!-- Unternehmens-Teaser Section Start --> 451 <section id="unternehmens-teaser" class="unternehmens-teaser-simple"> 452 <div class="container"> 453 <div class="row justify-content-center"> 454 <div class="col-lg-8 col-md-10 col-sm-12"> 455 <div class="teaser-content" data-aos="fade-up"> 456 <h2 class="teaser-title">Sie sind ein Unternehmen?</h2> 457 <p class="teaser-text">Lernen Sie, wie Sie zielgruppenspezifisch in der jungen Generation sichtbar werden können und direkte Bewerbungen erhalten</p> 458 <div class="teaser-cta">
459 <a href="/unternehmen" class="btn btn-unternehmen-teaser"> 460 <span>Jetzt mehr erfahren</span> 461 <i class="lni-arrow-right"></i> 462 </a> 463 </div> 464 </div> 465 </div> 466 </div> 467 </div> 468 </section> 469 <!-- Unternehmens-Teaser Section End --> 470 471 <!-- Team Section Start --> 472 <section id="team-section" class="section"> 473 <div class="container"> 474 <div class="row"> 475 <div class="col-lg-12"> 476 <div class="section-header text-center" data-aos="fade-up"> 477 <h2 class="section-title">Das sind wir</h2> 478 <p class="section-subtitle">Das Team hinter StickTo</p> 479 </div> 480 </div> 481 </div> 482 483 <div class="row align-items-center"> 484 <div class="col-lg-6 col-md-12"> 485 <div class="team-content" data-aos="fade-right"> 486 <div class="team-story"> 487 <h3>Unsere Geschichte</h3> 488 <p class="team-description">Hi, das sind wir - das Team hinter StickTo. Erst vor ein paar Jahren standen wir alle noch vor der Frage: was tun nach dem Schulabschluss? Kaum jemand von uns hatte darauf eine klare Antwort.</p> 489 <p class="team-description">Also haben wir StickTo gebaut. Damit Berufsorientierung endlich einfach wird!</p> 490 491 <div class="team-stats"> 492 <div class="stat-item"> 493 <span class="stat-number" data-target="8">0</span> 494 <span class="stat-label">Teammitglieder</span> 495 </div> 496 <div class="stat-item"> 497 <span class="stat-number" data-target="5">0</span> 498 <span class="stat-label">Jahre Erfahrung</span> 499 </div> 500 <div class="stat-item"> 501 <span class="stat-number" data-target="50">0</span> 502 <span class="stat-label">tausend Glückliche User</span> 503 </div> 504 </div> 505 506 <div class="team-cta-new"> 507 <a class="btn btn-team-cta" href="/team"> 508 <span>Mehr zu uns</span> 509 <i class="lni-arrow-right"></i> 510 </a> 511 </div> 512 </div> 513 </div> 514 </div> 515 516 <div class="col-lg-6 col-md-12"> 517 <div class="team-visual" data-aos="fade-left"> 518 <div class="team-image-container"> 519 <img src="img/team/Team-2.webp" alt="Das StickTo Team bei der Arbeit" class="team-main-image" width="3272" height="2618" loading="lazy" decoding="async"> 520 <div class="floating-avatars"> 521 <div class="avatar avatar-1"> 522 <img src="img/team/Konrad.webp" alt="Konrad" width="1052" height="1240" loading="lazy" decoding="async"> 523 </div> 524 </div> 525 </div> 526 </div> 527 </div> 528 </div> 529 </div> 530 </section> 531 <!-- Team Section End --> 532 533 <!-- Video Section Start --> 534 <section id="video-section" class="section"> 535 <div class="container"> 536 <div class="row"> 537 <div class="col-lg-12"> 538 <div class="section-header text-center" data-aos="fade-up"> 539 <h2 class="section-title">Sieh dir StickTo in Aktion an</h2> 540 <p class="section-subtitle">Entdecke, wie einfach Berufsorientierung sein kann</p> 541 </div> 542 </div> 543 </div> 544 545 <div class="row justify-content-center"> 546 <div class="col-lg-10 col-md-12"> 547 <div class="video-container" data-aos="zoom-in"> 548 <div class="video-wrapper-homepage"> 549 <iframe 550 src="https://www.youtube.com/embed/mYQelXULbVI?autoplay=1&mute=1&loop=1&playlist=mYQelXULbVI&controls=0&showinfo=0&rel=0&modestbranding=1" 551 title="StickTo App Demo Video" 552 frameborder="0" 553 allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 554 allowfullscreen> 555 </iframe> 556 </div> 557 </div> 558 </div> 559 </div> 560 </div> 561 </section> 562 <!-- Video Section End --> 563 564 <!-- Review-Collage Section Start (scrollgetriebene Rezensions-Collage, kein data-aos) --> 565 <section id="reviews" class="review-stage"> 566 <div class="review-stage-pin"> 567 <div class="review-stage-header section-header"> 568 <h2 class="section-title">Das sagen unsere User</h2> 569 <p class="section-subtitle">Ãber 50.000 zufriedene Schüler vertrauen auf StickTo</p> 570 </div> 571 <div class="review-collage" tabindex="0" aria-label="Rezensionen, horizontal scrollbar"> 572 <article class="review-card review-card--1"> 573 <div class="review-stars"> 574 <img src="img/testimonial/sterne.webp" alt="5 Sterne Bewertung" width="300" height="90" loading="lazy" decoding="async"> 575 </div> 576 <p class="review-text">"Absolut gute Idee, die professionell umgesetzt wurde! Chapeau! Ich empfehle diese App wirklich jedem, der sich über seine Berufswahl noch unsicher ist."</p> 577 <footer class="review-author">
578 <span class="review-author-name">Android User</span> 579 <span class="review-author-platform">Google Play</span> 580 </footer> 581 </article> 582 583 <article class="review-card review-card--2"> 584 <div class="review-stars"> 585 <img src="img/testimonial/sterne.webp" alt="5 Sterne Bewertung" width="300" height="90" loading="lazy" decoding="async"> 586 </div> 587 <p class="review-text">"Prima, toll gemacht. Man kann fast zu jedem Beruf alle wichtigen Informationen finden. Besonders die kleinen Videos geben einen kurzweiligen Einblick."</p> 588 <footer class="review-author"> 589 <span class="review-author-name">iOS User</span> 590 <span class="review-author-platform">App Store</span> 591 </footer> 592 </article> 593 594 <article class="review-card review-card--3"> 595 <div class="review-stars"> 596 <img src="img/testimonial/sterne.webp" alt="5 Sterne Bewertung" width="300" height="90" loading="lazy" decoding="async"> 597 </div> 598 <p class="review-text">"Die App ist sehr einfach zu bedienen und sehr übersichtlich. Tut was sie soll, mir mehr Informationen über die Berufswelt geben."</p> 599 <footer class="review-author"> 600 <span class="review-author-name">Android User</span> 601 <span class="review-author-platform">Google Play</span> 602 </footer> 603 </article> 604 605 <article class="review-card review-card--4 review-card--social"> 606 <div class="review-social-head"> 607 <span class="review-avatar" aria-hidden="true">G</span> 608 <span class="review-author-name">GreyHelmetguy</span> 609 </div> 610 <p class="review-text">"Ich liebe eure App unnormal"</p> 611 <footer class="review-author"> 612 <span class="review-author-source"><i class="fa-brands fa-tiktok" aria-hidden="true"></i> via TikTok</span> 613 </footer> 614 </article> 615 616 <article class="review-card review-card--5 review-card--hero review-card--social"> 617 <div class="review-social-head"> 618 <span class="review-avatar" aria-hidden="true">M</span> 619 <span class="review-author-name">Melissa</span> 620 </div> 621 <p class="review-text">"Ganz ehrlich ich bin dieser App so dankbar. Es gibt so viele Berufe die mir unbekannt waren. Dann habe ich in der App die Schiffahrtskauffrau entdeckt, mich bei Reedereien beworben, wurde angenommen, habe das Abitur abgebrochen und dieses Jahr ziehe ich fast 8 Stunden von meinem Heimatdorf in die GroÃstadt um die Ausbildung anzutreten."</p> 622 <footer class="review-author"> 623 <span class="review-author-source"><i class="fa-brands fa-tiktok" aria-hidden="true"></i> via TikTok</span> 624 </footer> 625 </article> 626 627 <article class="review-card review-card--6 review-card--social"> 628 <div class="review-social-head"> 629 <span class="review-avatar" aria-hidden="true">H</span> 630 <span class="review-author-name">Hannah</span> 631 </div> 632 <p class="review-text">"ich hab die ausprobiert, ich fand die Jobs so interessant und die Gestaltung so toll dass ich gar nicht aufs Gehalt geachtet habe"</p> 633 <footer class="review-author"> 634 <span class="review-author-source"><i class="fa-brands fa-tiktok" aria-hidden="true"></i> via TikTok</span> 635 </footer> 636 </article> 637 </div> 638 </div> 639 </section> 640 <!-- Review-Collage Section End --> 641 642 <!-- Förderer Section Start --> 643 <section id="foerderer-section" class="section"> 644 <div class="container"> 645 <div class="row"> 646 <div class="col-lg-12"> 647 <div class="section-header text-center" data-aos="fade-up"> 648 <h2 class="section-title">Unsere Förderer & Partner</h2> 649 <p class="section-subtitle">Gefördert und unterstützt von</p> 650 </div> 651 </div> 652 </div> 653 654 <div class="row"> 655 <div class="col-lg-12"> 656 <div class="foerderer-container" data-aos="fade-up" data-aos-delay="200"> 657 <div class="foerderer-logos"> 658 <div class="foerderer-logo-item" data-aos="fade-up" data-aos-delay="300"> 659 <img src="img/foerderer/gateway49-logo.webp" alt="Gateway49 Logo" class="foerderer-logo" width="400" height="400" loading="lazy" decoding="async">
660 <span class="foerderer-name">Gateway49</span> 661 </div> 662 663 <div class="foerderer-logo-item" data-aos="fade-up" data-aos-delay="400"> 664 <img src="img/foerderer/eu-logo.webp" alt="Europäische Union Logo" class="foerderer-logo" width="743" height="336" loading="lazy" decoding="async"> 665 <span class="foerderer-name">Europäische Union</span> 666 </div> 667 668 <div class="foerderer-logo-item" data-aos="fade-up" data-aos-delay="500"> 669 <img src="img/foerderer/schleswig-holstein-logo.webp" alt="Schleswig-Holstein Logo" class="foerderer-logo" width="808" height="309" loading="lazy" decoding="async"> 670 <span class="foerderer-name">Schleswig-Holstein</span> 671 </div> 672 673 <div class="foerderer-logo-item" data-aos="fade-up" data-aos-delay="600"> 674 <img src="img/foerderer/bds-logo.webp" alt="BDS Logo" class="foerderer-logo" width="1134" height="327" loading="lazy" decoding="async"> 675 <span class="foerderer-name">BDS</span> 676 </div> 677 678 <div class="foerderer-logo-item" data-aos="fade-up" data-aos-delay="700"> 679 <img src="img/foerderer/bvmw-logo.webp" alt="BVMW Logo" class="foerderer-logo" width="3200" height="1219" loading="lazy" decoding="async"> 680 <span class="foerderer-name">BVMW</span> 681 </div> 682 683 <div class="foerderer-logo-item" data-aos="fade-up" data-aos-delay="800"> 684 <img src="img/foerderer/netzwerk-gruene-arbeitswelt-logo.webp" alt="Netzwerk Grüne Arbeitswelt Logo" class="foerderer-logo" width="567" height="258" loading="lazy" decoding="async"> 685 <span class="foerderer-name">Netzwerk Grüne Arbeitswelt</span> 686 </div> 687 </div> 688 </div> 689 </div> 690 </div> 691 </div> 692 </section> 693 <!-- Förderer Section End --> 694 695 <!-- Help & Connect Section (Mai 2026, ersetzt alte Kontakt-Section) --> 696 <!-- Organisation, Website & App-Schema: macht StickTo als Entitaet fuer Google--> 697 <!-- AI-Overviews, ChatGPT, Perplexity & Co. eindeutig erkennbar. --> 698 <!-- aggregateRating = verifizierte App-Store-Daten (iOS, itunes lookup). --> 699 <!-- Bei neuem Bewertungsstand ratingValue/ratingCount aktualisieren. --> 700
700<script type="application/ld+json"> 701 { 702 "@context": "https://schema.org", 703 "@graph": [ 704 { 705 "@type": "Organization", 706 "@id": "https://stick-to.de/#organization", 707 "name": "StickTo", 708 "legalName": "StickTo UG (haftungsbeschraenkt)", 709 "url": "https://stick-to.de/", 710 "logo": {"@type": "ImageObject", "url": "https://stick-to.de/img/StickTo_Icon.png"}, 711 "description": "StickTo ist die Berufsorientierungs-App fuer Schueler:innen und junge Menschen (14-25) in Deutschland. Per Swipe entdecken Nutzer:innen ueber 1.300 Berufe, Ausbildungen und duale Studiengaenge und matchen mit regionalen Unternehmen.", 712 "email": "[email protected]", 713 "areaServed": "DE", 714 "sameAs": [ 715 "https://www.instagram.com/stickto.app", 716 "https://www.tiktok.com/@stickto.app", 717 "https://www.linkedin.com/company/76475722", 718 "https://apps.apple.com/de/app/stickto-die-orientierungsapp/id1591738967", 719 "https://play.google.com/store/apps/details?id=com.stickto.stickto" 720 ] 721 }, 722 { 723 "@type": "WebSite", 724 "@id": "https://stick-to.de/#website", 725 "url": "https://stick-to.de/", 726 "name": "StickTo", 727 "inLanguage": "de-DE", 728 "publisher": {"@id": "https://stick-to.de/#organization"} 729 }, 730 { 731 "@type": "MobileApplication", 732 "name": "StickTo - Die Orientierungsapp", 733 "operatingSystem": "iOS, Android", 734 "applicationCategory": "EducationApplication", 735 "url": "https://stick-to.de/", 736 "publisher": {"@id": "https://stick-to.de/#organization"}, 737 "offers": {"@type": "Offer", "price": "0", "priceCurrency": "EUR"}, 738 "aggregateRating": { 739 "@type": "AggregateRating", 740 "ratingValue": "4.6", 741 "ratingCount": "58", 742 "bestRating": "5", 743 "worstRating": "1" 744 } 745 } 746 ] 747 } 748 </script>
748 749 <!-- FAQ-Schema fuer SEO / AEO Rich-Results --> 750
750<script type="application/ld+json"> 751 { 752 "@context": "https://schema.org", 753 "@type": "FAQPage", 754 "mainEntity": [ 755 {"@type": "Question", "name": "Ist die StickTo-App kostenlos?", "acceptedAnswer": {"@type": "Answer", "text": "Ja, StickTo ist fuer Schueler:innen komplett kostenlos. Es gibt keine Werbung, kein Abo, keine Premium-Funktionen."}}, 756 {"@type": "Question", "name": "Ab wann kann ich StickTo benutzen?", "acceptedAnswer": {"@type": "Answer", "text": "Sobald das erste Praktikum in der Schule ansteht, stellt sich die Frage: Wo will ich das machen? Ab diesem Zeitpunkt startet die Berufsorientierung und StickTo hilft dabei, einen Ueberblick zu bekommen. Tipps fuer die Suche gibt es im StickTo-Guide âSchuelerpraktikum findenâ unter stick-to.de/blog/schuelerpraktikum-finden/."}}, 757 {"@type": "Question", "name": "Wie funktioniert das Swipe-Prinzip in StickTo?", "acceptedAnswer": {"@type": "Answer", "text": "Anhand der Swipes ermittelt die App automatisch, was die Jugendlichen interessiert, und schlaegt auf Basis dessen passende Berufe, Unternehmen und Hochschulen vor."}} 758 ] 759 } 760 </script>
760 761 <section id="contact" class="help-connect"> 762 <div class="help-connect-container"> 763 764 <!-- Header --> 765 <div class="help-connect-header" data-aos="fade-up"> 766 <h2 class="help-connect-title">Noch Fragen?</h2> 767 <p class="help-connect-subtitle">Wir helfen gerne weiter. Wähle den passenden Kanal â oder schau in die häufigen Fragen.</p> 768 </div> 769 770 <!-- Stufe 1: Intent-Cards (3 Zielgruppen, Self-Routing) --> 771 <div class="intent-cards" data-aos="fade-up" data-aos-delay="100"> 772 <a href="https://discord.com/invite/em7JGdbTkG" class="intent-card" target="_blank" rel="noopener noreferrer"> 773 <div class="intent-card-icon"><i class="lni lni-graduation"></i></div> 774 <h3 class="intent-card-title">Schüler:innen</h3> 775 <p class="intent-card-text">Direkt mit der Community austauschen und schnelle Hilfe bekommen.</p> 776 <span class="intent-card-cta">Discord <i class="lni lni-arrow-right"></i></span> 777 </a> 778 779 <a href="/unternehmen#contact-calendly" class="intent-card"> 780 <div class="intent-card-icon"><i class="lni lni-briefcase"></i></div> 781 <h3 class="intent-card-title">Unternehmen</h3> 782 <p class="intent-card-text">Erstgespräch zur StickTo-Unternehmenskarte und passgenauem Recruiting.</p> 783 <span class="intent-card-cta">Erstgespräch <i class="lni lni-arrow-right"></i></span> 784 </a> 785 786 <a href="mailto:[email protected]" class="intent-card"> 787 <div class="intent-card-icon"><i class="lni lni-users"></i></div> 788 <h3 class="intent-card-title">Eltern & Lehrkräfte</h3> 789 <p class="intent-card-text">Fragen zur App und wie wir Jugendliche bei der Berufsorientierung unterstützen.</p> 790 <span class="intent-card-cta">E-Mail <i class="lni lni-arrow-right"></i></span> 791 </a> 792 </div> 793 794 <!-- Stufe 2: FAQ-Accordion (3 Items, gleich auf allen 5 Hauptseiten) --> 795 <div class="faq-section" data-aos="fade-up" data-aos-delay="200"> 796 <h3 class="faq-section-title">Häufige Fragen</h3> 797 <div class="faq-list"> 798 <details class="faq-item"> 799 <summary class="faq-question"><span>Ist die StickTo-App kostenlos?</span><i class="lni lni-chevron-down faq-chevron"></i></summary> 800 <div class="faq-answer"><p>Ja, StickTo ist für Schüler:innen komplett kostenlos. Es gibt keine Werbung, kein Abo, keine Premium-Funktionen.</p></div> 801 </details> 802 <details class="faq-item"> 803 <summary class="faq-question"><span>Ab wann kann ich StickTo benutzen?</span><i class="lni lni-chevron-down faq-chevron"></i></summary> 804 <div class="faq-answer"><p>Sobald das erste Praktikum in der Schule ansteht, stellt sich die Frage: Wo will ich das machen? Ab diesem Zeitpunkt startet die Berufsorientierung â und StickTo hilft dabei, einen Ãberblick zu bekommen. Tipps für die Suche findest du in unserem Guide <a href="/blog/schuelerpraktikum-finden/">Schülerpraktikum finden</a>.</p></div> 805 </details> 806 <details class="faq-item"> 807 <summary class="faq-question"><span>Wie funktioniert das Swipe-Prinzip in StickTo?</span><i class="lni lni-chevron-down faq-chevron"></i></summary> 808 <div class="faq-answer"><p>Anhand der Swipes ermittelt die App automatisch, was die Jugendlichen interessiert, und schlägt auf Basis dessen passende Berufe, Unternehmen und Hochschulen vor.</p></div> 809 </details> 810 </div> 811 </div> 812 813 <!-- Stufe 3: Fallback-CTA --> 814 <div class="help-connect-fallback" data-aos="fade-up" data-aos-delay="300"> 815 <p class="help-connect-fallback-text"> 816 Frage nicht dabei? Schreib uns direkt: <a href="mailto:[email protected]">[email protected]</a><br> 817 Noch mehr Antworten rund um Berufsorientierung, Ausbildung & Bewerbung findest du in unserem <a href="/blog/">Blog</a>. 818 </p> 819 </div> 820 821 </div> 822 </section> 823 <!-- End Help & Connect --> 824 825 <!-- AOS Initialization --> 826
826<script> 827 window.addEventListener('DOMContentLoaded', function () { 828 AOS.init({ 829 duration: 800, 830 easing: 'ease-in-out', 831 once: true, 832 offset: 100 833 }); 834 }); 835 </script>
835 836 837 <!-- Footer Section Start --> 838 <footer> 839 <!-- Footer Area Start --> 840 <section id="footer-Content"> 841 <div class="container"> 842 <!-- Start Row --> 843 <div class="row"> 844 845 <!-- Start Col --> 846 <div class="col-lg-3 col-md-6 col-sm-6 col-xs-6 col-mb-12"> 847 848 <div class="footer-logo"> 849 <a href="/"><img src="img/StickTo_Logo_breit_white.svg" alt="StickTo Logo" width="165" height="52" loading="lazy" decoding="async"></a> 850 </div> 851 <div class="social-menu"> 852 <ul> 853 <li><a href="https://www.instagram.com/stickto.app" target="_blank" rel="noopener noreferrer" aria-label="StickTo auf Instagram"><i class="fa-brands fa-instagram"></i></a></li> 854 <li><a href="https://www.tiktok.com/@stickto.app" target="_blank" rel="noopener noreferrer" aria-label="StickTo auf TikTok"><i class="fa-brands fa-tiktok"></i></a></li> 855 <li><a href="https://www.linkedin.com/company/76475722" target="_blank" rel="noopener noreferrer" aria-label="StickTo auf LinkedIn"><i class="fa-brands fa-linkedin"></i></a></li> 856 </ul> 857 </div> 858 <div class="social-menu-text"> 859 <ul> 860 <li><p>@stickto.app</p></li> 861 </ul> 862 </div> 863 </div> 864 <!-- End Col --> 865 <!-- Start Col --> 866 <div class="col-lg-3 col-md-6 col-sm-6 col-xs-6 col-mb-12"> 867 <div class="widget"> 868 <h3 class="block-title">StickTo</h3> 869 <ul class="menu"> 870 <li><a href="/">- Jugendliche</a></li> 871 <li><a href="/eltern">- Eltern</a></li> 872 <li><a href="/unternehmen">- Unternehmen</a></li> 873 <li><a href="/partner">- Partner</a></li> 874 <li><a href="/presse">- Presse</a></li> 875 <li><a href="/blog/">- Blog</a></li> 876 </ul> 877 </div> 878 </div> 879 <!-- End Col --> 880 <!-- Start Col --> 881 <div class="col-lg-3 col-md-6 col-sm-6 col-xs-6 col-mb-12"> 882 <div class="widget"> 883 <h3 class="block-title">Download App</h3> 884 <ul class="menu"> 885 <li><a href="https://play.google.com/store/apps/details?id=com.stickto.stickto">- Android App</a></li> 886 <li><a href="https://apps.apple.com/us/app/stickto-die-orientierungsapp/id1591738967?itscg=30200&itsct=apps_box_link">- IOS App</a></li> 887 </ul> 888 </div> 889 </div> 890 <!-- End Col --> 891 <!-- Start Col --> 892 <div class="col-lg-3 col-md-6 col-sm-6 col-xs-6 col-mb-12"> 893 <div class="widget"> 894 <h3 class="block-title">Rechtliches</h3> 895 <ul class="menu"> 896 <li><a href="/impressum">- Impressum</a></li> 897 <li><a href="/d-privacy">- Datenschutz</a></li> 898 </ul> 899 </div> 900 </div> 901 <!-- End Col --> 902 <!-- Start Col --> 903 904 <!-- End Col --> 905 </div> 906 <!-- End Row --> 907 </div> 908 <!-- Copyright Start --> 909 910 <div class="copyright"> 911 <div class="container"> 912 <!-- Star Row --> 913 <div class="row"> 914 <div class="col-md-12"> 915 <div class="site-info text-center"> 916 <p>Copyright © <span class="copyright-year"></span> <a href="http://stick-to.de" rel="nofollow">StickTo</a></p> 917 </div> 918 919 </div> 920 <!-- End Col --> 921 </div> 922 <!-- End Row --> 923 </div> 924 </div> 925 <!-- Copyright End --> 926 </section> 927 <!-- Footer area End --> 928 929 </footer> 930 <!-- Footer Section End --> 931 932 933 <!-- Go To Top Link --> 934 <a href="#" class="back-to-top" aria-label="Nach oben scrollen"> 935 <i class="lni-chevron-up"></i> 936 </a> 937 938 <!-- Preloader --> 939 <div id="preloader"> 940 <div class="loader" id="loader-1"></div> 941 </div> 942 <!-- End Preloader --> 943 944 <!-- jQuery first, then Tether, then Bootstrap JS. --> 945
945<script src="js/jquery-min.js"></script>
945 946
946<script src="js/popper.min.js"></script>
946 947
947<script src="js/bootstrap.min.js"></script>
947 948
948<script src="js/owl.carousel.js"></script>
948 949
949<script src="js/jquery.nav.js"></script>
949 950
950<script src="js/scrolling-nav.js"></script>
950 951
951<script src="js/jquery.easing.min.js"></script>
951 952
952<script src="js/jquery.magnific-popup.min.js"></script>
952 953
953<script src="js/main.js?v=3"></script>
953 954
954<script src="js/faq-accordion.js?v=1"></script>
954 955
955<script src="js/tracking.js?v=1"></script>
955 956
956<script src="js/app-banner.js?v=1"></script>
956 957
957<script src="js/review-collage.js?v=1" defer></script>
957 958 959 960 <!-- Initialisiere Cookie Banner --> 961 <!--
961<script> 962 window.addEventListener('DOMContentLoaded', () => { 963 klaro.run(klaroConfig); 964 }); 965 </script>
965 966 --> 967 968 <!-- Counter Animation Script --> 969
969<script> 970 function animateCounter(element, target, duration = 2000) { 971 const start = 0; 972 const increment = target / (duration / 16); // 60 FPS 973 let current = start; 974 975 const timer = setInterval(() => { 976 current += increment; 977 if (current >= target) { 978 current = target; 979 clearInterval(timer); 980 } 981 982 // Formatierung für verschiedene Zahlen 983 if (target >= 1000) { 984 element.textContent = Math.floor(current / 1000) + 'K+'; 985 } else if (target === 6.4) { 986 element.textContent = current.toFixed(1) + ' Mio'; 987 } else if (target === 4.5) { 988 element.textContent = current.toFixed(1); 989 } else if (target === 100) { 990 element.textContent = Math.floor(current) + '%'; 991 } else { 992 element.textContent = Math.floor(current); 993 } 994 }, 16); 995 } 996 997 // Intersection Observer für Counter Animation 998 const counterObserver = new IntersectionObserver((entries) => { 999 entries.forEach(entry => { 1000 if (entry.isIntersecting) { 1001 const counter = entry.target; 1002 const target = parseFloat(counter.getAttribute('data-target')); 1003 animateCounter(counter, target); 1004 counterObserver.unobserve(counter); // Nur einmal ausführen 1005 } 1006 }); 1007 }, { threshold: 0.5 }); 1008 1009 // Alle Counter beobachten 1010 document.addEventListener('DOMContentLoaded', () => { 1011 const counters = document.querySelectorAll('.stat-number[data-target]'); 1012 counters.forEach(counter => { 1013 counterObserver.observe(counter); 1014 }); 1015 }); 1016 </script>
1016 1017 </body> 1018</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.