1<!DOCTYPE html> 2<html lang="de" data-theme="light"> 3<head> 4 <meta charset="UTF-8" /> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 6 7 <!-- SEO --> 8 <title>CSTRSK Software – Business-Apps & Digitale Tools seit 2008 | Ulm</title> 9 <meta name="description" content="CSTRSK Software aus Ulm: Praxisnahe Business-Apps, Tools und PWAs für den täglichen Einsatz. Veröffentlicht in Microsoft Store, Huawei AppGallery & als PWA. Seit 2008." /> 10 <meta name="keywords" content="Business Apps, App Entwicklung, Digitale Tools, PWA, Progressive Web App, Microsoft Store, Huawei AppGallery, Ulm, Autismus, Produktivität" /> 11 <meta name="author" content="CSTRSK Software" /> 12 <meta name="robots" content="index, follow" /> 13 <link rel="canonical" href="https://cstrsk.de/" /> 14 15 <!-- Open Graph --> 16 <meta property="og:type" content="website" /> 17 <meta property="og:url" content="https://cstrsk.de/" /> 18 <meta property="og:title" content="CSTRSK Software – Business-Apps & Digitale Tools seit 2008" /> 19 <meta property="og:description" content="Praxisnahe Business-Apps, Tools und PWAs für den täglichen Einsatz aus Ulm. Seit 2008 – über 70 Apps veröffentlicht." /> 20 <meta property="og:image" content="https://cstrsk.de/images/og-image.png" /> 21 <meta property="og:locale" content="de_DE" /> 22 <meta property="og:site_name" content="CSTRSK Software" /> 23 24 <!-- Twitter Card --> 25 <meta name="twitter:card" content="summary_large_image" /> 26 <meta name="twitter:title" content="CSTRSK Software – Business-Apps & Digitale Tools" /> 27 <meta name="twitter:description" content="Praxisnahe Business-Apps und Tools aus Ulm für den täglichen Einsatz. Seit 2008." /> 28 <meta name="twitter:image" content="https://cstrsk.de/images/og-image.png" /> 29 30 <!-- Favicon --> 31 <link rel="icon" type="image/png" sizes="16x16" href="fav/favicon-16x16.png" /> 32 <link rel="icon" type="image/png" sizes="32x32" href="fav/favicon-32x32.png" /> 33 <link rel="icon" type="image/png" sizes="96x96" href="fav/favicon-96x96.png" /> 34 <link rel="icon" type="image/png" sizes="192x192" href="fav/android-icon-192x192.png" /> 35 <link rel="apple-touch-icon" sizes="180x180" href="fav/apple-icon-180x180.png" /> 36 <link rel="apple-touch-icon" sizes="152x152" href="fav/apple-icon-152x152.png" /> 37 <link rel="apple-touch-icon" sizes="120x120" href="fav/apple-icon-120x120.png" /> 38 <meta name="msapplication-TileImage" content="fav/ms-icon-144x144.png" /> 39 40 <!-- JSON-LD Structured Data --> 41
41<script type="application/ld+json"> 42 { 43 "@context": "https://schema.org", 44 "@type": "LocalBusiness", 45 "name": "CSTRSK Software", 46 "url": "https://cstrsk.de", 47 "email": "[email protected]", 48 "foundingDate": "2008", 49 "address": { 50 "@type": "PostalAddress", 51 "addressLocality": "Ulm", 52 "addressCountry": "DE" 53 }, 54 "openingHours": "Mo-Fr 09:00-17:00", 55 "description": "Business-Apps und digitale Tools für den täglichen Einsatz. Autistischer Entwickler mit über 15 Jahren Erfahrung und 70+ veröffentlichten Apps.", 56 "sameAs": [ 57 "https://github.com/CSTRSK" 58 ], 59 "serviceType": ["App Entwicklung", "Progressive Web App Entwicklung", "Digitale Tools", "Business-Apps"] 60 } 61 </script>
61 62 63 <!-- Alpine.js --> 64
64<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"></script>
64 65 66 <style> 67 /* ===== DESIGN TOKENS ===== */ 68 :root { 69 --bg-primary: #f3f3f3; 70 --bg-secondary: #ffffff; 71 --bg-tertiary: #e5e5e5; 72 --text-primary: #111111; 73 --text-secondary: #2a3050; 74 --text-tertiary: #6b7080; 75 --accent: #1A237E; 76 --accent-hover: #283593; 77 --accent-active: #0D1137; 78 --accent-text: #ffffff; 79 --header-gradient: linear-gradient(135deg, #0D1137 0%, #1A237E 40%, #3B49DF 100%); 80 --header-gradient-dark: linear-gradient(135deg, #0a0a2a 0%, #121254 40%, #1a1a7a 100%); 81 --success: #16A34A; 82 --success-bg: #dcfce7; 83 --error: #DC2626; 84 --error-bg: #fee2e2; 85 --warning: #D97706; 86 --warning-bg: #fef3c7; 87 --divider: #e0e0e0; 88 --card-bg: #ffffff; 89 --card-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04); 90 --card-shadow-hover: 0 4px 12px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04); 91 --reveal-hover: rgba(26,35,126,0.06); 92 --radius-sm: 4px; 93 --radius-md: 8px; 94 --radius-lg: 12px; 95 --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1); 96 --transition-med: 250ms cubic-bezier(0.4, 0, 0.2, 1); 97 --font-display: "Segoe UI Variable Display", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif; 98 --font-text: "Segoe UI Variable Text", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif; 99 --font-mono: "Cascadia Code", "JetBrains Mono", "Fira Code", monospace; 100 --mica-noise: 26,35,126; 101 } 102 103 [data-theme="dark"] { 104 --bg-primary: #1a1a1a; 105 --bg-secondary: #252525; 106 --bg-tertiary: #2d2d2d; 107 --text-primary: #ffffff; 108 --text-secondary: #ababab; 109 --text-tertiary: #ffffff; 110 --accent: #7986CB; 111 --accent-hover: #9FA8DA; 112 --accent-active: #5C6BC0; 113 --accent-text: #000000; 114 --header-gradient: linear-gradient(135deg, #0a0a2a 0%, #121254 40%, #1a1a7a 100%); 115 --divider: #3d3d3d; 116 --card-bg: #252525; 117 --card-shadow: 0 1px 3px rgba(0,0,0,0.2), 0 1px 2px rgba(0,0,0,0.15); 118 --card-shadow-hover: 0 4px 12px rgba(0,0,0,0.3), 0 2px 4px rgba(0,0,0,0.2); 119 --reveal-hover: rgba(121,134,203,0.08); 120 --success: #4ADE80; 121 --success-bg: #1a3a1a; 122 --error: #F87171; 123 --error-bg: #3a1a1a; 124 --warning: #FBBF24; 125 --warning-bg: #3a2a0a; 126 --mica-noise: 121,134,203; 127 } 128 129 /* ===== RESET ===== */ 130 *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } 131 html { scroll-behavior: smooth; } 132 body { 133 font-family: var(--font-text); 134 background: var(--bg-primary); 135 color: var(--text-primary); 136 line-height: 1.6; 137 -webkit-font-smoothing: antialiased; 138 -moz-osx-font-smoothing: grayscale; 139 } 140 a { color: inherit; text-decoration: none; } 141 img { max-width: 100%; height: auto; display: block; } 142 143 ::selection { background: var(--accent); color: var(--accent-text); } 144 145 /* ===== MICA BACKGROUND ===== */ 146 body::before { 147 content: ''; 148 position: fixed; 149 inset: 0; 150 background: 151 radial-gradient(ellipse at 20% 30%, rgba(var(--mica-noise),0.02) 0%, transparent 60%), 152 radial-gradient(ellipse at 80% 70%, rgba(var(--mica-noise),0.02) 0%, transparent 50%); 153 pointer-events: none; 154 z-index: -1; 155 } 156 157 /* ===== HEADER WITH GRADIENT ===== */ 158 .header { 159 position: relative; 160 background: var(--header-gradient); 161 color: #ffffff; 162 overflow: hidden; 163 padding-top: 60px; 164 } 165 .header::before { 166 content: ''; 167 position: absolute; 168 inset: 0; 169 background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Ccircle cx='20' cy='20' r='16' fill='rgba(255,255,255,0.03)'/%3E%3Ccircle cx='80' cy='10' r='10' fill='rgba(255,255,255,0.02)'/%3E%3Ccircle cx='50' cy='80' r='20' fill='rgba(255,255,255,0.02)'/%3E%3C/svg%3E"); 170 background-repeat: repeat; 171 background-size: 120px 120px; 172 pointer-events: none; 173 z-index: 0; 174 } 175 .header > * { position: relative; z-index: 1; } 176 177 /* ===== NAVIGATION ===== */ 178 .nav { 179 display: flex; 180 align-items: center; 181 justify-content: space-between; 182 padding: 0 1.5rem; 183 height: 60px; 184 max-width: 1100px; 185 margin: 0 auto; 186 } 187 .nav-bar { 188 position: fixed; 189 top: 0; left: 0; right: 0; 190 z-index: 100; 191 background: var(--header-gradient); 192 border-bottom: 1px solid rgba(255,255,255,0.06); 193 } 194 .nav-logo { 195 font-family: var(--font-mono); 196 font-size: 0.9375rem; 197 font-weight: 700; 198 color: #ffffff; 199 letter-spacing: 0.03em; 200 background: rgba(255,255,255,0.08); 201 padding: 0.375rem 0.75rem; 202 border-radius: var(--radius-sm); 203 border: 1px solid rgba(255,255,255,0.1); 204 } 205 .nav-logo span { opacity: 0.55; font-weight: 400; } 206 .nav-desktop { display: none; } 207 .nav-desktop a { 208 font-size: 0.8125rem; 209 font-weight: 500; 210 color: rgba(255,255,255,0.7); 211 transition: color var(--transition-fast); 212 position: relative; 213 padding: 0.375rem 0; 214 letter-spacing: 0.02em; 215 } 216 .nav-desktop a:hover { color: #ffffff; } 217 .nav-desktop a::after { 218 content: ''; 219 position: absolute; 220 bottom: -1px; left: 0; right: 0; 221 height: 2px; 222 background: #ffffff; 223 border-radius: 1px; 224 transform: scaleX(0); 225 transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1); 226 } 227 .nav-desktop a:hover::after { transform: scaleX(1); } 228 .nav-cta { 229 background: rgba(255,255,255,0.12); 230 color: #ffffff !important; 231 border: 1px solid rgba(255,255,255,0.35); 232 backdrop-filter: blur(8px); 233 border-radius: 6px !important; 234 padding: 0.5rem 1.125rem !important; 235 font-size: 0.75rem !important; 236 font-weight: 600; 237 letter-spacing: 0.04em; 238 transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast); 239 } 240 .nav-cta:hover { 241 background: rgba(255,255,255,0.2) !important; 242 border-color: rgba(255,255,255,0.6) !important; 243 transform: translateY(-1px); 244 } 245 .nav-cta::after { display: none !important; } 246 247 /* ===== HERO SECTION ===== */ 248 .hero { 249 max-width: 1100px; 250 margin: 0 auto; 251 padding: 3rem 1.5rem 4rem; 252 } 253 .hero-label { 254 font-family: var(--font-mono); 255 font-size: 0.6875rem; 256 letter-spacing: 0.12em; 257 text-transform: uppercase; 258 color: #ffffff; 259 margin-bottom: 1rem; 260 } 261 .hero-title { 262 font-family: var(--font-display); 263 font-size: 2rem; 264 font-weight: 700; 265 line-height: 1.15; 266 color: #ffffff; 267 margin-bottom: 1rem; 268 max-width: 600px; 269 } 270 .hero-title .dot { color: #ffffff; } 271 .hero-sub { 272 font-size: 0.9375rem; 273 color: #ffffff; 274 line-height: 1.7; 275 margin-bottom: 2rem; 276 max-width: 520px; 277 } 278 .hero-ctas { 279 display: flex; 280 flex-wrap: wrap; 281 gap: 0.75rem; 282 } 283 .btn-primary { 284 display: inline-block; 285 background: #ffffff; 286 color: var(--accent); 287 font-size: 0.8125rem; 288 font-weight: 600; 289 padding: 0.5rem 1.25rem; 290 border-radius: var(--radius-sm); 291 transition: box-shadow var(--transition-fast), transform var(--transition-fast); 292 border: none; 293 cursor: pointer; 294 text-align: center; 295 } 296 .btn-primary:hover { 297 box-shadow: 0 2px 8px rgba(0,0,0,0.2); 298 transform: translateY(-1px); 299 } 300 .btn-primary:disabled { opacity: 0.5;
300 cursor: not-allowed; transform: none; } 301 .btn-outline-light { 302 display: inline-block; 303 border: 1px solid rgba(255,255,255,0.4); 304 color: rgba(255,255,255,0.85); 305 font-size: 0.8125rem; 306 padding: 0.5rem 1.25rem; 307 border-radius: var(--radius-sm); 308 transition: border-color var(--transition-fast), color var(--transition-fast); 309 } 310 .btn-outline-light:hover { 311 border-color: #ffffff; 312 color: #ffffff; 313 } 314 315 /* ===== STATS STRIP ===== */ 316 .stats-grid { 317 display: grid; 318 grid-template-columns: repeat(2, 1fr); 319 gap: 0; 320 border-radius: var(--radius-md); 321 overflow: hidden; 322 box-shadow: var(--card-shadow); 323 margin-top: 2.5rem; 324 } 325 .stat-item { 326 background: var(--card-bg); 327 padding: 1rem 1.25rem; 328 border-right: 1px solid var(--divider); 329 border-bottom: 1px solid var(--divider); 330 } 331 .stat-item:nth-child(2n) { border-right: none; } 332 .stat-item:nth-last-child(-n+2) { border-bottom: none; } 333 .stat-num { 334 font-family: var(--font-display); 335 font-size: 1.5rem; 336 font-weight: 700; 337 color: var(--accent); 338 } 339 .stat-label { 340 font-size: 0.75rem; 341 color: var(--text-tertiary); 342 margin-top: 0.125rem; 343 } 344 345 /* ===== SECTION LAYOUT ===== */ 346 .section-wrap { 347 max-width: 1100px; 348 margin: 0 auto; 349 padding: 0 1.5rem; 350 } 351 .section { 352 padding: 3.5rem 0; 353 border-bottom: 1px solid var(--divider); 354 } 355 .section:last-of-type { border-bottom: none; } 356 .section-label { 357 font-family: var(--font-mono); 358 font-size: 0.6875rem; 359 letter-spacing: 0.12em; 360 text-transform: uppercase; 361 color: var(--accent); 362 margin-bottom: 1.5rem; 363 } 364 .section-title { 365 font-family: var(--font-display); 366 font-size: 1.5rem; 367 font-weight: 700; 368 color: var(--text-primary); 369 line-height: 1.25; 370 margin-bottom: 1rem; 371 } 372 .section-text { 373 font-size: 0.875rem; 374 color: var(--text-secondary); 375 line-height: 1.7; 376 } 377 378 /* ===== CARDS ===== */ 379 .card { 380 background: var(--card-bg); 381 border-radius: var(--radius-md); 382 box-shadow: var(--card-shadow); 383 transition: box-shadow var(--transition-fast), transform var(--transition-fast); 384 position: relative; 385 overflow: hidden; 386 } 387 .card::before { 388 content: ''; 389 position: absolute; 390 inset: 0; 391 background: radial-gradient(circle at var(--reveal-x,50%) var(--reveal-y,0%), 392 var(--reveal-hover) 0%, transparent 70%); 393 opacity: 0; 394 transition: opacity var(--transition-med); 395 pointer-events: none; 396 z-index: 0; 397 } 398 .card:hover::before { opacity: 1; } 399 .card:hover { 400 box-shadow: var(--card-shadow-hover); 401 transform: translateY(-1px); 402 } 403 .card > * { position: relative; z-index: 1; } 404 .card-body { padding: 1.25rem; } 405 406 /* ===== 3-COL SERVICE CARDS ===== */ 407 .service-grid { 408 display: grid; 409 grid-template-columns: 1fr; 410 gap: 1rem; 411 } 412 .service-card { padding: 1.5rem; } 413 .service-icon { 414 width: 32px; height: 32px; 415 display: flex; align-items: center; justify-content: center; 416 border: 1px solid var(--divider); 417 border-radius: var(--radius-sm); 418 margin-bottom: 1.25rem; 419 } 420 .service-icon svg { width: 16px; height: 16px; color: var(--accent); } 421 .service-title { font-size: 0.875rem; font-weight: 600; margin-bottom: 0.5rem; } 422 .service-text { font-size: 0.8125rem; color: var(--text-secondary); line-height: 1.6; margin-bottom: 1rem; } 423 .service-list { list-style: none; display: flex; flex-direction: column; gap: 0.375rem; } 424 .service-list li { 425 font-size: 0.8125rem; 426 color: var(--text-secondary); 427 display: flex; 428 align-items: center; 429 gap: 0.5rem; 430 } 431 .service-list li::before { 432 content: ''; 433 width: 4px; height: 4px; 434 border-radius: 50%; 435 background: var(--accent); 436 flex-shrink: 0; 437 } 438 439 /* ===== 2-COL LAYOUTS ===== */ 440 .grid-2 { 441 display: grid; 442 grid-template-columns: 1fr; 443 gap: 2rem; 444 } 445 446 /* ===== BENEFIT / AUTISMUS ITEMS ===== */ 447 .benefit-item, .autism-item { 448 display: flex; 449 gap: 1rem; 450 padding: 1rem 1.25rem; 451 } 452 .benefit-dot { 453 width: 6px; height: 6px; 454 border-radius: 50%; 455 background: var(--accent); 456 flex-shrink: 0; 457 margin-top: 0.375rem; 458 } 459 .benefit-title, .autism-title { font-size: 0.875rem; font-weight: 600; margin-bottom: 0.125rem; } 460 .benefit-text, .autism-text { font-size: 0.8125rem; color: var(--text-secondary); line-height: 1.6; } 461 462 /* ===== FISI SECTION ===== */ 463 .fisi-stats { 464 display: grid; 465 grid-template-columns: repeat(2, 1fr); 466 gap: 0.75rem; 467 } 468 .fisi-stat { padding: 1rem; } 469 .fisi-num { 470 font-family: var(--font-mono); 471 font-size: 1.25rem; 472 font-weight: 700; 473 color: var(--accent); 474 } 475 .fisi-label { font-size: 0.75rem; color: var(--text-tertiary); margin-top: 0.25rem; } 476 477 /* ===== REFERENCE CARDS ===== */ 478 .ref-grid { 479 display: grid; 480 grid-template-columns: repeat(2, 1fr); 481 gap: 1rem; 482 } 483 .ref-card { overflow: hidden; } 484 .ref-card img { 485 width: 100%; 486 height: 100px; 487 object-fit: cover; 488 border-radius: var(--radius-md) var(--radius-md) 0 0; 489 } 490 .ref-title { 491 font-size: 0.8125rem; 492 font-weight: 600; 493 transition: color var(--transition-fast); 494 } 495 .ref-card:hover .ref-title { color: var(--accent); } 496 .ref-desc { font-size: 0.75rem; color: var(--text-tertiary); margin-top: 0.125rem; } 497 498 /* ===== FULL PROJECT LIST ===== */ 499 .show-more-btn { 500 display: flex; 501 align-items: center; 502 gap: 0.5rem; 503 background: none; 504 border: none; 505 cursor: pointer; 506 font-size: 0.8125rem; 507 color: var(--text-tertiary); 508 font-family: var(--font-text); 509 transition: color var(--transition-fast); 510 padding: 0; 511 } 512 .show-more-btn:hover { color: var(--text-primary); } 513 .show-more-btn svg { width: 16px; height: 16px; transition: transform var(--transition-fast); } 514 .show-more-btn.open svg { transform: rotate(90deg); } 515 516 .project-card { 517 padding: 1.25rem; 518 margin-top: 1rem; 519 } 520 .project-legend { 521 font-size: 0.75rem; 522 color: var(--text-tertiary); 523 font-family: var(--font-mono); 524 margin-bottom: 1rem; 525 } 526 .project-list { 527 columns: 1; 528 list-style: none; 529 font-size: 0.8125rem; 530 color: var(--text-secondary); 531 line-height: 1.8; 532 } 533 .project-list li { 534 display: flex; 535 align-items: center; 536 gap: 0.375rem; 537 break-inside: avoid; 538 } 539 .store-link { 540 color: var(--accent); 541 font-size: 0.75rem; 542 } 543 .store-link:hover { text-decoration: underline; } 544 .store-link-accent { 545 color: var(--warning); 546 font-size: 0.75rem; 547 } 548 .store-link-accent:hover { text-decoration: underline; } 549 .project-note { 550 font-size: 0.75rem; 551 color: var(--text-tertiary); 552 margin-top: 1rem; 553 } 554 .project-note a { color: var(--accent); } 555 .project-note a:hover { text-decoration: underline; } 556 557 /* ===== CONTACT FORM ===== */ 558 .contact-info { 559 display: flex; 560 flex-direction: column; 561 gap: 1rem; 562 margin-bottom: 2rem; 563 } 564 .contact-row { 565 display: flex; 566 align-items: center; 567 gap: 0.75rem; 568 font-size: 0.875rem; 569 color: var(--text-secondary); 570 } 571 .contact-row svg { 572 width: 16px; height: 16px; 573 color: var(--text-tertiary); 574 flex-shrink: 0; 575 } 576 577 .form-group { margin-bottom: 0.75rem; } 578 .form-label { 579 display: block; 580 font-size: 0.75rem; 581 color: var(--text-tertiary); 582 margin-bottom: 0.375rem; 583 } 584 .form-input, .form-textarea { 585 width: 100%; 586 background: var(--bg-primary);
587 border: 1px solid var(--divider); 588 border-radius: var(--radius-sm); 589 color: var(--text-primary); 590 font-size: 0.875rem; 591 font-family: var(--font-text); 592 padding: 0.625rem 0.75rem; 593 outline: none; 594 transition: border-color var(--transition-fast); 595 } 596 .form-input:focus, .form-textarea:focus { border-color: var(--accent); } 597 .form-input::placeholder, .form-textarea::placeholder { color: var(--text-tertiary); } 598 .form-input.error { border-color: var(--error); } 599 .form-textarea { resize: vertical; min-height: 100px; } 600 .form-error { 601 font-size: 0.75rem; 602 color: var(--error); 603 margin-top: 0.25rem; 604 } 605 606 .btn-submit { 607 width: 100%; 608 background: var(--accent); 609 color: var(--accent-text); 610 font-size: 0.875rem; 611 font-weight: 600; 612 padding: 0.625rem 1.25rem; 613 border-radius: var(--radius-sm); 614 border: none; 615 cursor: pointer; 616 transition: background var(--transition-fast); 617 } 618 .btn-submit:hover { background: var(--accent-hover); } 619 .btn-submit:disabled { opacity: 0.5; cursor: not-allowed; } 620 621 .form-success { 622 padding: 1.5rem; 623 text-align: center; 624 } 625 .form-success-icon { 626 width: 40px; height: 40px; 627 margin: 0 auto 0.75rem; 628 border: 1px solid var(--divider); 629 border-radius: 50%; 630 display: flex; 631 align-items: center; 632 justify-content: center; 633 } 634 .form-success-icon svg { width: 20px; height: 20px; color: var(--success); } 635 .form-success-title { font-size: 0.875rem; font-weight: 600; margin-bottom: 0.25rem; } 636 .form-success-text { font-size: 0.8125rem; color: var(--text-secondary); } 637 638 .form-error-box { 639 padding: 1.5rem; 640 text-align: center; 641 border: 1px solid var(--error); 642 } 643 .form-error-text { font-size: 0.8125rem; color: var(--error); } 644 .form-error-text a { color: var(--accent); text-decoration: underline; } 645 646 /* ===== FOOTER ===== */ 647 .footer { 648 max-width: 1100px; 649 margin: 0 auto; 650 padding: 2rem 1.5rem; 651 } 652 .footer-inner { 653 display: flex; 654 flex-direction: column; 655 align-items: flex-start; 656 gap: 1rem; 657 } 658 .footer-copy { 659 font-family: var(--font-mono); 660 font-size: 0.75rem; 661 color: var(--text-tertiary); 662 } 663 .footer-links { 664 display: flex; 665 flex-wrap: wrap; 666 gap: 1.25rem; 667 } 668 .footer-links a { 669 font-size: 0.75rem; 670 color: var(--text-tertiary); 671 transition: color var(--transition-fast); 672 } 673 .footer-links a:hover { color: var(--text-primary); } 674 675 /* ===== DARK MODE TOGGLE ===== */ 676 .theme-toggle-wrap { 677 display: flex; 678 align-items: center; 679 gap: 0.5rem; 680 } 681 .theme-switch { 682 position: relative; 683 width: 36px; 684 height: 18px; 685 display: inline-block; 686 } 687 .theme-switch input { opacity: 0; width: 0; height: 0; } 688 .theme-switch .slider { 689 position: absolute; 690 cursor: pointer; 691 inset: 0; 692 background: rgba(255,255,255,0.3); 693 border-radius: 9px; 694 transition: var(--transition-med); 695 } 696 .theme-switch .slider::before { 697 content: ""; 698 position: absolute; 699 height: 12px; width: 12px; 700 left: 3px; bottom: 3px; 701 background: #fff; 702 border-radius: 50%; 703 transition: var(--transition-med); 704 } 705 .theme-switch input:checked + .slider { background: rgba(255,255,255,0.6); } 706 .theme-switch input:checked + .slider::before { transform: translateX(18px); } 707 .theme-icon { font-size: 0.75rem; } 708 709 /* ===== HAMBURGER ANIMATED ===== */ 710 .hamburger-wrap { 711 display: flex; 712 align-items: center; 713 justify-content: center; 714 background: rgba(0,0,0,0.25); 715 border: 1px solid rgba(255,255,255,0.2); 716 border-radius: var(--radius-sm); 717 cursor: pointer; 718 padding: 0.5rem; 719 transition: background var(--transition-fast); 720 min-width: 40px; 721 min-height: 40px; 722 } 723 .hamburger-wrap:hover { background: rgba(0,0,0,0.4); } 724 .hamburger-icon {
725 width: 20px; 726 height: 20px; 727 position: relative; 728 display: flex; 729 flex-direction: column; 730 justify-content: center; 731 align-items: center; 732 gap: 0; 733 } 734 .hamburger-icon span { 735 display: block; 736 width: 18px; 737 height: 2px; 738 background: rgba(255,255,255,0.85); 739 border-radius: 1px; 740 transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1); 741 position: absolute; 742 left: 1px; 743 } 744 .hamburger-icon span:nth-child(1) { top: 3px; } 745 .hamburger-icon span:nth-child(2) { top: 9px; } 746 .hamburger-icon span:nth-child(3) { top: 15px; } 747 .hamburger-wrap.open .hamburger-icon span:nth-child(1) { 748 top: 9px; 749 transform: rotate(45deg); 750 } 751 .hamburger-wrap.open .hamburger-icon span:nth-child(2) { 752 opacity: 0; 753 transform: scaleX(0); 754 } 755 .hamburger-wrap.open .hamburger-icon span:nth-child(3) { 756 top: 9px; 757 transform: rotate(-45deg); 758 } 759 760 /* Mobile menu improvements */ 761 .mobile-overlay { 762 position: fixed; 763 top: 60px; left: 0; right: 0; bottom: 0; 764 background: rgba(0,0,0,0.4); 765 backdrop-filter: blur(4px); 766 z-index: 39; 767 } 768 .mobile-menu { 769 position: fixed; 770 top: 60px; left: 0; right: 0; 771 background: var(--header-gradient); 772 border-bottom: 1px solid rgba(255,255,255,0.1); 773 padding: 1rem 1.5rem 1.5rem; 774 z-index: 40; 775 box-shadow: 0 8px 24px rgba(0,0,0,0.2); 776 } 777 .mobile-menu a { 778 color: rgba(255,255,255,0.75); 779 font-size: 0.9375rem; 780 padding: 0.625rem 0.75rem; 781 border-radius: var(--radius-sm); 782 transition: background var(--transition-fast), color var(--transition-fast); 783 display: block; 784 } 785 .mobile-menu a:hover { color: #ffffff; background: rgba(255,255,255,0.08); } 786 .mobile-menu .nav-cta { 787 display: inline-block; 788 text-align: center; 789 margin-top: 0.5rem; 790 padding: 0.625rem 1rem !important; 791 } 792 793 /* ===== SCROLLBAR ===== */ 794 ::-webkit-scrollbar { width: 6px; } 795 ::-webkit-scrollbar-track { background: var(--bg-primary); }
796 ::-webkit-scrollbar-thumb { background: var(--divider); border-radius: 3px; } 797 798 /* ===== UTILITIES ===== */ 799 [x-cloak] { display: none !important; } 800 .news-scroll { 801 max-height: 22rem; 802 overflow-y: auto; 803 padding-right: 0.25rem; 804 scrollbar-width: thin; 805 scrollbar-color: var(--divider) transparent; 806 } 807 .news-item { display: block; padding: 1rem; } 808 .news-meta { 809 display: flex; 810 align-items: center; 811 gap: 0.5rem; 812 font-family: var(--font-mono); 813 font-size: 0.75rem; 814 color: var(--text-tertiary); 815 margin-bottom: 0.25rem; 816 } 817 .news-meta span:not(.sep) { color: inherit; } 818 .news-sep { color: var(--divider); } 819 .news-title { font-size: 0.8125rem; font-weight: 600; margin-bottom: 0.25rem; } 820 .news-excerpt { font-size: 0.75rem; color: var(--text-secondary); line-height: 1.5; } 821 822 .section-quote { 823 font-size: 0.8125rem; 824 color: var(--text-tertiary); 825 border-left: 2px solid var(--divider); 826 padding-left: 1rem; 827 margin-top: 1rem; 828 line-height: 1.6; 829 } 830 831 /* ===== RESPONSIVE ===== */ 832 @media (min-width: 640px) { 833 .hero { padding: 4rem 2rem 5rem; } 834 .hero-title { font-size: 2.5rem; } 835 .stats-grid { grid-template-columns: repeat(4, 1fr); } 836 .stat-item { border-bottom: none; } 837 .stat-item:nth-child(2n) { border-right: 1px solid var(--divider); } 838 .stat-item:last-child { border-right: none; } 839 .section-title { font-size: 1.75rem; } 840 .section-wrap { padding: 0 2rem; } 841 .service-grid { grid-template-columns: repeat(3, 1fr); } 842 .ref-grid { grid-template-columns: repeat(3, 1fr); } 843 .ref-card img { height: 130px; } 844 .fisi-stats { grid-template-columns: repeat(4, 1fr); } 845 .footer-inner { flex-direction: row; align-items: center; justify-content: space-between; } 846 .project-list { columns: 2; } 847 } 848 849 @media (min-width: 768px) { 850 .hamburger-wrap { display: none; } 851 .nav-desktop { display: flex; align-items: center; gap: 1.75rem; } 852 .grid-2 { grid-template-columns: 1fr 1fr; gap: 3rem; } 853 .hero-title { font-size: 3rem; } 854 .section-wrap { padding: 0 2rem; } 855 } 856 857 @media (min-width: 1024px) { 858 .project-list { columns: 3; } 859 .section { padding: 4.5rem 0; } 860 } 861 862 @media (max-width: 480px) { 863 .hero { padding: 2rem 1rem 3rem; } 864 .hero-title { font-size: 1.5rem; } 865 .section { padding: 2.5rem 0; } 866 .section-wrap { padding: 0 1rem; } 867 .service-card { padding: 1.25rem; } 868 .stat-num { font-size: 1.25rem; } 869 .stat-item { padding: 0.75rem 1rem; } 870 .ref-card img { height: 85px; } 871 .ref-grid { gap: 0.75rem; } 872 body { padding: 0; } 873 .card-body { padding: 1rem; } 874 .news-scroll { max-height: 18rem; } 875 } 876 </style> 877</head> 878<body> 879 880 <!-- ===== HEADER ===== --> 881 <header class="header"> 882 <div class="nav-bar"> 883 <nav class="nav" x-data="{ mobileOpen: false }"> 884 <a href="#" class="nav-logo">CSTRSK <span>software</span></a> 885 886 <div class="nav-desktop"> 887 <a href="#services">Services</a> 888 <a href="#vorteile">Vorteile</a> 889 <a href="#autismus">Autismus</a> 890 <a href="#referenzen">Referenzen</a> 891 <a href="#kontakt">Kontakt</a> 892 <a href="https://cstrsk.de/blog.html" target="_blank" rel="noopener">Blog</a> 893 <a href="https://cstrsk.de/Schluesseldienst-Verzeichnis/">Schlüsseldienst</a> 894 <a href="https://cstrsk.de/apps/">Apps</a> 895 <a href="#kontakt" class="nav-cta">Beratung anfragen</a> 896 </div> 897 898 <button class="hamburger-wrap" :class="mobileOpen ? 'open' : ''" @click="mobileOpen = !mobileOpen" aria-label="Menü öffnen"> 899 <div class="hamburger-icon"> 900 <span></span> 901 <span></span> 902 <span></span> 903 </div> 904 </button> 905 906 <!-- Backdrop overlay --> 907 <div x-show="mobileOpen" x-transition:enter="transition duration-200" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" class="mobile-overlay md:hidden" @click="mobileOpen = false"></div> 908 909 <div x-show="mobileOpen" x-transition:enter="transition duration-200" x-transition:enter-start="opacity-0 -translate-y-2" x-transition:enter-end="opacity-100 translate-y-0" class="mobile-menu md:hidden" role="navigation"> 910 <div class="flex flex-col gap-2"> 911 <a href="#services" @click="mobileOpen=false">Services</a> 912 <a href="#vorteile" @click="mobileOpen=false">Vorteile</a> 913 <a href="#autismus" @click="mobileOpen=false">Autismus</a> 914 <a href="#referenzen" @click="mobileOpen=false">Referenzen</a> 915 <a href="#kontakt" @click="mobileOpen=false">Kontakt</a> 916 <a href="https://cstrsk.de/blog.html" target="_blank" rel="noopener">Blog</a> 917 <a href="https://cstrsk.de/Schluesseldienst-Verzeichnis/">Schlüsseldienst</a> 918 <a href="https://cstrsk.de/apps/">Apps</a> 919 <a href="#kontakt" @click="mobileOpen=false" class="nav-cta">Beratung anfragen</a> 920 </div> 921 </div> 922 </nav> 923 </div> 924 925 <div class="hero"> 926 <p class="hero-label">seit 2008 · Ulm</p> 927 <h1 class="hero-title">Business-Apps &<br />Digitale Tools aus Ulm<span class="dot">.</span></h1> 928 <p class="hero-sub"> 929 Praxisnahe Anwendungen für den täglichen Business-Einsatz. Als App im Store, als PWA im Browser – immer griffbereit, immer zuverlässig. 930 </p> 931 <div class="hero-ctas"> 932 <a href="#kontakt" class="btn-primary">Kostenlose Beratung</a> 933 <a href="#referenzen" class="btn-outline-light">Referenzen ansehen</a> 934 </div> 935 936 <div class="stats-grid"> 937 <div class="stat-item"> 938 <p class="stat-num">15+</p> 939 <p class="stat-label">Jahre Erfahrung</p> 940 </div> 941 <div class="stat-item"> 942 <p class="stat-num">70+</p> 943 <p class="stat-label">Apps veröffentlicht</p> 944 </div> 945 <div class="stat-item"> 946 <p class="stat-num">4</p> 947 <p class="stat-label">Store-Plattformen</p> 948 </div> 949 <div class="stat-item"> 950 <p class="stat-num">Ulm</p> 951 <p class="stat-label">
951Deutschland</p> 952 </div> 953 </div> 954 </div> 955 </header> 956 957 <!-- ===== MAIN ===== --> 958 <main class="section-wrap"> 959 960 <!-- NEWS --> 961 <section x-data="newsFeed()" class="section"> 962 <div class="flex-between" style="display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem;"> 963 <p class="section-label">Neueste Beiträge</p> 964 <a href="https://cstrsk.de/blog.html" class="show-more-btn" style="font-size:0.75rem;">Alle anzeigen</a> 965 </div> 966 <div class="news-scroll"> 967 <template x-for="post in latestPosts" :key="post.slug"> 968 <a :href="post.slug === 'app-catalog' ? 'https://cstrsk.de/apps/' : 'https://cstrsk.de/blog.html#'+post.slug" class="card news-item"> 969 <div class="news-meta"> 970 <span x-text="post.date"></span> 971 <span class="news-sep">·</span> 972 <span x-text="post.cat"></span> 973 </div> 974 <p class="news-title" x-text="post.title"></p> 975 <p class="news-excerpt" x-text="trunc(post.excerpt, 100)"></p> 976 </a> 977 </template> 978 </div> 979 </section> 980 981 <!-- FISI --> 982 <section class="section"> 983 <div class="grid-2" style="align-items:center;"> 984 <div> 985 <p class="section-label">FISI Ausbildung Trainer</p> 986 <h2 class="section-title">1.260 Prüfungsfragen.<br />Fachinformatiker SI.</h2> 987 <p class="section-text" style="margin-bottom:1.5rem;"> 988 Multiple-Choice-Trainer für die IHK-Abschlussprüfung. Quiz, Lernkarten und 30-Fragen-Prüfungssimulation mit Zeitlimit. 250 Fragen kostenlos, 1.010 Premium-Fragen für 1€/Monat. Nach Anfrage freigeschaltet. 989 </p> 990 <a href="https://cstrsk.de/fisi-pruefung/" class="btn-primary" style="background:var(--accent);color:var(--accent-text);">Jetzt testen</a> 991 </div> 992 <div class="fisi-stats"> 993 <div class="card fisi-stat"> 994 <p class="fisi-num">1.260</p> 995 <p class="fisi-label">Fragen gesamt</p> 996 </div> 997 <div class="card fisi-stat"> 998 <p class="fisi-num" style="color:var(--warning);">5</p> 999 <p class="fisi-label">Themenbereiche</p> 1000 </div> 1001 <div class="card fisi-stat"> 1002 <p class="fisi-num">1€/Monat</p> 1003 <p class="fisi-label">Premium/Jahr</p> 1004 </div> 1005 <div class="card fisi-stat"> 1006 <p class="fisi-num" style="color:var(--warning);">IHK</p> 1007 <p class="fisi-label">Prüfungsniveau</p> 1008 </div> 1009 </div> 1010 </div> 1011 </section> 1012 1013 <!-- VOXIFY --> 1014 <section class="section"> 1015 <div class="grid-2" style="align-items:center;"> 1016 <div> 1017 <p class="section-label">Live-Voting & Feedback</p> 1018 <h2 class="section-title">Voxify.<br />Umfragen für Meetings & Präsentationen.</h2> 1019 <p class="section-text" style="margin-bottom:1.5rem;"> 1020 Interaktive Live-Umfragen per QR-Code oder Link. Presenter sieht Ergebnisse und Charts in Echtzeit. Mit Company-Branding, 12 Design-Vorlagen, PNG/PDF-Export und DSGVO-konformer Datenlöschung. Dark Mode mit Neon-Glow. 1021 </p> 1022 <a href="https://cstrsk.de/Voxify/" class="btn-primary" style="background:var(--accent);color:var(--accent-text);">Jetzt testen</a> 1023 </div> 1024 <div class="fisi-stats"> 1025 <div class="card fisi-stat"> 1026 <p class="fisi-num">Echtzeit</p> 1027 <p class="fisi-label">Live-Voting & Charts</p> 1028 </div> 1029 <div class="card fisi-stat"> 1030 <p class="fisi-num" style="color:var(--warning);">12</p> 1031 <p class="fisi-label">Design-Vorlagen</p> 1032 </div> 1033 <div class="card fisi-stat"> 1034 <p class="fisi-num">Branding</p> 1035 <p class="fisi-label">Logo, Farbe, Name</p> 1036 </div> 1037 <div class="card fisi-stat"> 1038 <p class="fisi-num" style="color:var(--warning);">DSGVO</p> 1039 <p class="fisi-label">Datenlöschung</p> 1040 </div> 1041 </div> 1042 </div> 1043 </section> 1044 1045 <!-- SERVICES --> 1046 <section id="services" class="section"> 1047 <p class="section-label">Services</p> 1048 <div class="service-grid"> 1049 1050 <div class="card service-card"> 1051 <div class="service-icon"> 1052 <svg fill="none" stroke="currentColor" stroke-width="1.5" viewB
1052ox="0 0 24 24"> 1053 <path stroke-linecap="round" stroke-linejoin="round" d="M10.5 1.5H8.25A2.25 2.25 0 006 3.75v16.5a2.25 2.25 0 002.25 2.25h7.5A2.25 2.25 0 0018 20.25V3.75a2.25 2.25 0 00-2.25-2.25H13.5m-3 0V3h3V1.5m-3 0h3m-3 8.25h3m-3 3h3m-3 3h3" /> 1054 </svg> 1055 </div> 1056 <h2 class="service-title">App Entwicklung</h2> 1057 <p class="service-text">Massgeschneiderte Business-Apps für Microsoft Store, Huawei AppGallery und als PWA.</p> 1058 <ul class="service-list"> 1059 <li>Microsoft Store & Windows Apps</li> 1060 <li>Huawei AppGallery</li> 1061 <li>Progressive Web Apps (PWA)</li> 1062 <li>Amazon Appstore</li> 1063 </ul> 1064 </div> 1065 1066 <div class="card service-card"> 1067 <div class="service-icon"> 1068 <svg fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"> 1069 <path stroke-linecap="round" stroke-linejoin="round" d="M7.5 8.25h9m-9 3H12m-9.75 1.51c0 1.6 1.123 2.994 2.707 3.227 1.129.166 2.27.293 3.423.379.35.026.67.21.865.501L12 21l2.755-4.133a1.14 1.14 0 01.865-.501 48.172 48.172 0 003.423-.379c1.584-.233 2.707-1.626 2.707-3.228V6.741c0-1.602-1.
1069123-2.995-2.707-3.228A48.394 48.394 0 0012 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018z" /> 1070 </svg> 1071 </div> 1072 <h2 class="service-title">Beratung</h2> 1073 <p class="service-text">Persönlich in Ulm oder remote – von der Idee bis zur veröffentlichten App.</p> 1074 <ul class="service-list"> 1075 <li>Konzeption & Machbarkeit</li> 1076 <li>App-Store-Optimierung (ASO)</li> 1077 <li>Publishing & Store-Einreichung</li> 1078 <li>API-Integration & Automatisierung</li> 1079 </ul> 1080 </div> 1081 1082 </div> 1083 </section> 1084 1085 <!-- VORTEILE --> 1086 <section id="vorteile" class="section"> 1087 <div class="grid-2" style="align-items:start;"> 1088 <div> 1089 <p class="section-label">Warum CSTRSK</p> 1090 <h2 class="section-title">Digitale Werkzeuge, die im Alltag wirklich helfen.</h2> 1091 <p class="section-text" style="margin-bottom:1rem;"> 1092 Seit 2008 entwickle ich praktische Anwendungen, die den Arbeitsalltag erleichtern. Keine überladenen Suiten, sondern gezielte Tools für echte Probleme – vom Kassensystem über Allergie-Warnungen bis zum Prüfungstrainer. 1093 </p> 1094 <p class="section-text"> 1095 Jede App wird mit Fokus auf Benutzerfreundlichkeit und Stabilität entwickelt. Verfügbar auf den Plattformen, die Ihre Kunden nutzen – egal ob Windows, Huawei oder direkt im Browser als PWA. 1096 </p> 1097 </div> 1098 <div style="display:flex;flex-direction:column;gap:0.75rem;"> 1099 <div class="card benefit-item"> 1100 <div class="benefit-dot"></div> 1101 <div> 1102 <p class="benefit-title">Multiplattform</p> 1103 <p class="benefit-text">Eine App für Microsoft Store, Huawei AppGallery, Amazon und als PWA – maximale Reichweite.</p> 1104 </div> 1105 </div> 1106 <div class="card benefit-item"> 1107 <div class="benefit-dot"></div> 1108 <div> 1109 <p class="benefit-title">Praxisnah</p> 1110 <p class="benefit-text">Keine theoretischen Konzepte, sondern einsatzbereite Lösungen für den täglichen Bedarf.</p> 1111 </div> 1112 </div> 1113 <div class="card benefit-item"> 1114 <div class="benefit-dot"></div> 1115 <div> 1116 <p class="benefit-title">PWA-fähig</p> 1117 <p class="benefit-text">Installierbar auf jedem Gerät ohne Store-Zwang – offline, schnell, platzsparend.</p> 1118 </div> 1119 </div> 1120 <div class="card benefit-item"> 1121 <div class="benefit-dot"></div> 1122 <div> 1123 <p class="benefit-title">Langfristig</p> 1124 <p class="benefit-text">Seit 2008 am Markt – Ihre Apps werden nicht nach einem Jahr eingestellt.</p> 1125 </div> 1126 </div> 1127 </div> 1128 </div> 1129 </section> 1130 1131 <!-- BERATUNGSFORMAT --> 1132 <section id="online-offline" class="section"> 1133 <p class="section-label">Beratungsformat</p> 1134 <div class="service-grid"> 1135 <div class="card service-card"> 1136 <h2 class="service-title">Persönliche Beratung</h2> 1137 <p class="service-text">Direkter Kontakt in Ulm – gemeinsame Konzeption, Prototyping und Feedbacks.</p> 1138 <ul class="service-list"> 1139 <li>Direkter persönlicher Kontakt</li> 1140 <li>Individuelle Betreuung</li> 1141 <li>Live-Demos & Prototyping</li> 1142 <li>Vor-Ort Unterstützung möglich</li> 1143 </ul> 1144 </div> 1145 <div class="card service-card"> 1146 <h2 class="service-title">Online Beratung</h2> 1147 <p class="service-text">Ortsunabhängig via E-Mail, Chat oder Videokonferenz – mit vollständiger Dokumentation.</p> 1148 <ul class="service-list"> 1149 <li>Flexible Terminvereinbarung</li> 1150 <li>Ortsunabhängig</li> 1151 <li>Schneller Austausch</li> 1152 <li>Dokumentation der Ergebnisse</li> 1153 </ul> 1154 </div> 1155 </div> 1156 <p class="card" style="padding:0.75rem 1rem;margin-top:1rem;font-size:0.8125rem;color:var(--text-secondary);"> 1157 In beiden Fällen ist das Ziel dasselbe: eine fertige, einsatzbereite App, die im Alltag wirklich hilft. 1158 </p> 1159 </section> 1160 1161 <!-- AUTISMUS --> 1162 <section id="autismus" class="section"> 1163 <div class="grid-2" style="align-items:start;"> 1164 <div> 1165 <p class="section-label">Autismus als Stärke</p> 1166 <h2 class="section-title">Präzision, die den Unterschied macht.</h2> 1167 <p class="section-text" style="margin-bottom:1rem;"> 1168 Menschen im Autismus-Spektrum bringen besondere Stärken mit, die in der Software-Entwicklung wertvoll sind: hohe Konzentration auf Details, ausdauernde Beschäftigung mit komplexen Aufgaben und ein systematisches, logisches Denkmuster. Jede App profitiert von dieser Gründlichkeit – von der ersten Zeile Code bis zur letzten Überprüfung vor dem Release. 1169 </p> 1170 <p class="section-quote"> 1171 Nicht alle Menschen im Autismus-Spektrum haben dieselben Fähigkeiten – individuelle Stärken und Bedürfnisse zählen. 1172 </p> 1173 </div> 1174 <div style="display:flex;flex-direction:column;gap:0.75rem;"> 1175 <div class="card autism-item"> 1176 <div> 1177 <p class="autism-title">Detailgenauigkeit</p> 1178 <p class="autism-text">Jede Funktion wird millimetergenau umgesetzt – kein übersehener Randfall.</p> 1179 </div> 1180 </div> 1181 <div class="card autism-item"> 1182 <div> 1183 <p class="autism-title">Systematisches Denken</p> 1184 <p class="autism-text">Strukturierte Architektur und sauberer Code durch methodische Arbeitsweise.</p> 1185 </div> 1186 </div> 1187 <div class="card autism-item"> 1188 <div> 1189 <p class="autism-title">Ausdauer & Fokus</p> 1190 <p class="autism-text">Durchgehende Konzentration auf komplexe Projekte ohne Qualitätseinbussen.</p> 1191 </div> 1192 </div> 1193 </div> 1194 </div> 1195 </section> 1196 1197 <!-- REFERENZEN --> 1198 <section id="referenzen" class="section"> 1199 <p class="section-label">Referenzen & Projekte</p> 1200 <h2 class="section-title">Über 70 Apps & PWAs seit 2008.</h2> 1201 <p class="section-text" style="margin-bottom:1.5rem;"> 1202 Von der Microsoft Store-App über Huawei AppGallery bis zur installierbaren PWA – eine Übersicht aller Projekte, die auf cstrsk.de oder in den Stores veröffentlicht wurden. 1203 </p> 1204 1205 <!-- Full project list --> 1206 <div x-data="{ open: false }" style="margin-top:2rem;"> 1207 <button @click="open = !open" class="show-more-btn" :class="open ? 'open' : ''"> 1208 <svg fill="none" stroke="currentColor" stroke-width="1.5" viewB
1208ox="0 0 24 24" aria-hidden="true"> 1209 <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" /> 1210 </svg> 1211 <span x-text="open ? 'Liste ausblenden' : 'Vollständige Projektliste anzeigen'"></span> 1212 </button> 1213 1214 <div x-show="open" x-transition:enter="transition duration-150" x-transition:enter-start="opacity-0 -translate-y-1" x-transition:enter-end="opacity-100 translate-y-0" class="card project-card"> 1215 <p class="project-legend">MS = Microsoft Store · HW = Huawei AppGallery · PWA = Progressive Web App · AMZ = Amazon</p> 1216 <ul class="project-list"> 1217 <li>Accelerometer Analyzer <a href="https://www.microsoft.com/store/apps/9NM82JCBGZ5R" target="_blank" rel="noopener" class="store-link">MS</a></li> 1218 <li>Age Quick Calculator</li> 1219 <li>Animal Jump (Game) <a href="https://www.microsoft.com/store/apps/9NH6WGPF549M" target="_blank" rel="noopener" class="store-link">MS</a></li> 1220 <li>Are you 2 Fat <a href="https://www.microsoft.com/store/apps/9NBLGGGZ60CS" target="_blank" rel="noopener" class="store-link">MS</a></li> 1221 <li>Audio-Recorder++ <a href="https://www.microsoft.com/store/apps/9NBLGGH40GFD" target="_blank" rel="noopener" class="store-link">MS</a></li> 1222 <li>Autism Mood <a href="https://www.microsoft.com/store/apps/9P9S0WKVQHF8" target="_blank" rel="noopener" class="store-link">MS</a></li> 1223 <li>Battery-Free <a href="https://www.microsoft.com/store/apps/9NBLGGH6JJS2" target="_blank" rel="noopener" class="store-link">MS</a></li> 1224 <li>Biowetter <a href="https://cstrsk.de/Biowetter/" target="_blank" rel="noopener" class="store-link">PWA</a> <a href="https://www.microsoft.com/store/apps/9P7CR3VR0ZQN" target="_blank" rel="noopener" class="store-link">MS</a></li> 1225 <li>Bitcoin Solo Luck <a href="https://cstrsk.de/bitcoin-solo-luck/" target="_blank" rel="noopener" class="store-link">PWA</a></li> 1226 <li>Bitcoins Free <a href="https://www.microsoft.com/store/apps/9WZDNCRD1LL3" target="_blank" rel="noopener" class="store-link">MS</a></li> 1227 <li>Blackjack Free Table <a href="https://www.microsoft.com/store/apps/9PDZFR448VZS" target="_blank" rel="noopener" class="store-link">MS</a></li> 1228 <li>Bubble Crusher (Game) <a href="https://www.microsoft.com/store/apps/9PPR1HS5BMDW" target="_blank" rel="noopener" class="store-link">MS</a></li> 1229 <li>Bubble Crusher Free (Game) <a href="https://www.microsoft.com/store/apps/9N5PZZ6G9QKQ" target="_blank" rel="noopener" class="store-link">MS</a></li> 1230 <li>Bußgeldkatalog Gratis <a href="https://www.microsoft.com/store/apps/9NBLGGGZM76S" target="_blank" rel="noopener" class="store-link">MS</a> <a href="https://appgallery.cloud.huawei.com/ag/n/app/C102807457" target="_blank" rel="noopener" class="store-link-accent">HW</a></li> 1231 <li>Cálculo mental (Game) <a href="https://www.microsoft.com/store/apps/9nblggh67vsz" target="_blank" rel="noopener" class="store-link">MS</a></li> 1232 <li>Charades <a href="https://cstrsk.de/Charades" target="_blank" rel="noopener" class="store-link">PWA</a></li> 1233 <li>Coin Market Info <a href="https://cstrsk.de/Coin-Market-Info" target="_blank" rel="noopener" class="store-link">PWA</a> <a href="https://www.microsoft.com/store/apps/9NVS2MWWB3KZ" target="_blank" rel="noopener" class="store-link">MS</a> <a href="https://www.amazon.com/gp/product/B08B5BG66Y" target="_blank" rel="noopener" class="store-link-accent">AMZ</a> <a href="https://appgallery.cloud.huawei.com/ag/n/app/C102814871" target="_blank" rel="noopener" class="store-link-accent">HW</a></li> 1234 <li>Color Drop (Game) <a href="https://www.microsoft.com/store/apps/9N7D8MSDGN33" target="_blank" rel="noopener" class="store-link">MS</a> <a href="https://www.amazon.com/gp/product/B08B59CJHV" target="_blank" rel="noopener" class="store-link-accent">AMZ</a> <a href="https://appgallery.cloud.huawei.com/ag/n/app/C102487647" target="_blank" rel="noopener" class="store-link-accent">HW</a></li> 1235 <li>Converter (Length/Speed/Temp/Weight) <a href="https://www.microsoft.com/store/productId/9P9J06MPBGRN" target="_blank" rel="noopener" class="store-link">MS</a> <a href="https://appgallery.cloud.huawei.com/ag/n/app/C102846289" target="_blank" rel="noopener" class="store-link-accent">HW</a></li> 1236 <li>Currency Exchange Calculator <a href="https://www.microsoft.com/store/apps/9NMSNWV7PNNP" target="_blank" rel="noopener" class="store-link">MS</a> <a href="https://www.amazon.com/gp/product/B08GJQDB2X" target="_blank" rel="noopener" class="store-link-accent">AMZ</a> <a href="https://appgallery.cloud.huawei.com/ag/n/app/C102776803" target="_blank" rel="noopener" class="store-link-accent">HW</a></li> 1237 <li>Crypto Currency Converter <a href="https://www.microsoft.com/store/apps/9NB6VW4M85GP" target="_blank" rel="noopener" class="store-link">MS</a> <a href="https://appgallery.cloud.huawei.com/ag/n/app/C102753361" target="_blank" rel="noopener" class="store-link-accent">HW</a></li> 1238 <li>Defuse The Bomb HD (Game) <a href="https://www.microsoft.com/store/apps/9NBLGGGZJLL7" target="_blank" rel="noopener" class="store-link">MS</a></li> 1239 <li>Edit Live <a href="https://www.microsoft.com/store/apps/9NBLGGH6B82Z" target="_blank" rel="noopener" class="store-link">MS</a></li> 1240 <li>Egg Timer <a href="https://www.microsoft.com/store/apps/9NBLGGH6C1VW" target="_blank" rel="noopener" class="store-link">MS</a></li> 1241 <li>Emoji Sweeper Minesweeper <a href="https://www.microsoft.com/store/apps/9NBLGGGZJLL8" target="_blank" rel="noopener" class="store-link">MS</a></li> 1242 <li>Encoder/Decoder <a href="https://cstrsk.de/Encoder-Decoder/" target="_blank" rel="noopener" class="store-link">PWA</a></li> 1243 <li>Fast Bill <a href="https://www.microsoft.com/store/apps/9NVMDPLHVZLH" target="_blank" rel="noopener" class="store-link">MS</a></li> 1244 <li>Firecrackers HD (Game) <a href="https://www.microsoft.com/store/apps/9NBLGGH08780" target="_blank" rel="noopener" class="store-link">MS</a></li> 1245 <li>Firecrackers+ (Game) <a href="https://www.microsoft.com/store/apps/9NBLGGH
12455WZNQ" target="_blank" rel="noopener" class="store-link">MS</a></li> 1246 <li>FISI Prüfungstrainer <a href="https://cstrsk.de/fisi-pruefung/" target="_blank" rel="noopener" class="store-link">PWA</a></li> 1247 <li>FIVES (Game) <a href="https://cstrsk.de/FIVES/" target="_blank" rel="noopener" class="store-link">PWA</a> <a href="https://www.microsoft.com/store/apps/9PFPG2199DVT" target="_blank" rel="noopener" class="store-link">MS</a> <a href="https://appgallery.cloud.huawei.com/ag/n/app/C103704561" target="_blank" rel="noopener" class="store-link-accent">HW</a></li> 1248 <li>Football Juggler (Game) <a href="https://www.microsoft.com/store/apps/9MTJJMFVPGV4" target="_blank" rel="noopener" class="store-link">MS</a></li> 1249 <li>FuelCC <a href="https://www.microsoft.com/store/apps/9NBLGGGXWDJ3" target="_blank" rel="noopener" class="store-link">MS</a></li> 1250 <li>Halloween Sound <a href="https://www.microsoft.com/store/apps/9WZDNCRDC8Z4" target="_blank" rel="noopener" class="store-link">MS</a></li> 1251 <li>Hexagon Party (Game) <a href="https://www.microsoft.com/store/apps/9N8793DVNWGL" target="_blank" rel="noopener" class="store-link">MS</a></li> 1252 <li>Hit Moles Game <a href="https://www.microsoft.com/store/apps/9NBLGGGZQ3RP" target="_blank" rel="noopener" class="store-link">MS</a></li> 1253 <li>Horoscope Daily PWA ✨ Partner-Check <a href="https://cstrsk.de/Horoscope-Daily/" target="_blank" rel="noopener" class="store-link">PWA</a> <a href="https://www.microsoft.com/store/apps/9NBLGGH6GX4P" target="_blank" rel="noopener" class="store-link">MS</a> <a href="https://appgallery.cloud.huawei.com/ag/n/app/C103569819" target="_blank" rel="noopener" class="store-link-accent">HW</a></li> 1254 <li>i.Kcal <a href="https://www.microsoft.com/store/apps/9WZDNCRDC8ZH" target="_blank" rel="noopener" class="store-link">MS</a> <a href="https://www.amazon.com/gp/product/B08F49LBLT" target="_blank" rel="noopener" class="store-link-accent">AMZ</a> <a href="https://appgallery.cloud.huawei.com/ag/n/app/C102847759" target="_blank" rel="noopener" class="store-link-accent">HW</a></li> 1255 <li>Ice Climb (Game) <a href="https://www.microsoft.com/store/apps/9NFD3D6R2VS3" target="_blank" rel="noopener" class="store-link">MS</a></li> 1256 <li>Inventory List <a href="https://www.microsoft.com/store/apps/9PKXN7BVRGP1" target="_blank" rel="noopener" class="store-link">MS</a></li> 1257 <li>IP Info Scan <a href="https://www.microsoft.com/store/apps/9NPNKTRJRRM5" target="_blank" rel="noopener" class="store-link">MS</a></li> 1258 <li>IT-Tools Hub <a href="https://cstrsk.de/IT-Tools/" target="_blank" rel="noopener" class="store-link">PWA</a></li> 1259 <li>IPv4 Subnet Calculator <a href="https://cstrsk.de/IPv4-Subnet-Calculator/" target="_blank" rel="noopener" class="store-link">PWA</a></li> 1260 <li>IPv6 Subnet Calculator <a href="https://cstrsk.de/IPv6-Subnet-Calculator/" target="_blank" rel="noopener" class="store-link">PWA</a></li> 1261 <li>KASY PoS Point of Sale <a href="https://www.microsoft.com/store/apps/9NF3Q7K5Z3HJ" target="_blank" rel="noopener" class="store-link">MS</a></li> 1262 <li>Kalenderwochen <a href="https://cstrsk.de/Kalenderwochen/" target="_blank" rel="noopener" class="store-link">PWA</a></li> 1263 <li>Kalie Covid-19 Contact Tracking</li> 1264 <li>Knoten <a href="https://cstrsk.de/Knoten/" target="_blank" rel="noopener" class="store-link">PWA</a></li> 1265 <li>Kommunikator <a href="https://cstrsk.de/Kommunikator/" target="_blank" rel="noopener" class="store-link">PWA</a></li> 1266 <li>Landlord – Real Estate Investor (Game) <a href="https://www.microsoft.com/store/apps/9N4HWR81K3L6" target="_blank" rel="noopener" class="store-link">MS</a></li> 1267 <li>Lotto Go <a href="https://cstrsk.de/Lotto%20Go/" target="_blank" rel="noopener" class="store-link">PWA</a> <a href="https://www.microsoft.com/store/apps/9NBLGGH2W26L" target="_blank" rel="noopener" class="store-link">MS</a> <a href="https://appgallery.cloud.huawei.com/ag/n/app/C102830065" target="_blank" rel="noopener" class="store-link-accent">HW</a></li> 1268 <li>Loyalty Cards <a href="https://cstrsk.de/LCard/" target="_blank" rel="noopener" class="store-link">PWA</a> <a href="https://www.microsoft.com/store/apps/9NPRP40XF836" target="_blank" rel="noopener" class="store-link">MS</a></li> 1269 <li>Lux Light Meter <a href="https://www.microsoft.com/store/apps/9P8DL94KJ797" target="_blank" rel="noopener" class="store-link">MS</a></li> 1270 <li>Markdown Editor Free <a href="https://www.microsoft.com/store/apps/9PKFLMLPCW3C" target="_blank" rel="noopener" class="store-link">MS</a></li> 1271 <li>Math Logic Brain Trainer (Game) <a href="https://www.microsoft.com/store/apps/9WZDNCR
1271DC8Z3" target="_blank" rel="noopener" class="store-link">MS</a></li> 1272 <li>Meditari Meditation <a href="https://www.microsoft.com/store/apps/9PDZDW4X9064" target="_blank" rel="noopener" class="store-link">MS</a></li> 1273 <li>Memory Game HD (Game) <a href="https://www.microsoft.com/store/apps/9NBLGGH5PS48" target="_blank" rel="noopener" class="store-link">MS</a></li> 1274 <li>Money Compound Interest <a href="https://www.microsoft.com/store/apps/9NBDP2VHJJMC" target="_blank" rel="noopener" class="store-link">MS</a></li> 1275 <li>Mr. Simon (Game) <a href="https://www.microsoft.com/store/apps/9NBLGGH5JBL8" target="_blank" rel="noopener" class="store-link">MS</a></li> 1276 <li>Number Converter <a href="https://cstrsk.de/Number-Converter/" target="_blank" rel="noopener" class="store-link">PWA</a></li> 1277 <li>One Scan QR Code <a href="https://www.microsoft.com/store/apps/9NBLGGH5GP89" target="_blank" rel="noopener" class="store-link">MS</a></li> 1278 <li>One-Card <a href="https://cstrsk.de/One-Card/" target="_blank" rel="noopener" class="store-link">PWA</a></li> 1279 <li>Open Mensa <a href="https://www.microsoft.com/store/apps/9NK1S4PRNGVM" target="_blank" rel="noopener" class="store-link">MS</a></li> 1280 <li>Open Restroom <a href="https://cstrsk.de/Open-Restroom/" target="_blank" rel="noopener" class="store-link">PWA</a> <a href="https://www.microsoft.com/store/apps/9pb841t5869p" target="_blank" rel="noopener" class="store-link">MS</a></li> 1281 <li>Pokemon Go Friend Code</li> 1282 <li>Pollenflug <a href="https://www.microsoft.com/store/apps/9NBLGGH0JVDD" target="_blank" rel="noopener" class="store-link">MS</a> <a href="https://appgallery.cloud.huawei.com/ag/n/app/C102745945" target="_blank" rel="noopener" class="store-link-accent">HW</a> <a href="https://cstrsk.de/Pollenflug" target="_blank" rel="noopener" class="store-link">PWA</a></li> 1283 <li>Pollenflug Pro <a href="https://www.microsoft.com/store/apps/9NBLGGH5KPG0" target="_blank" rel="noopener" class="store-link">MS</a> <a href="https://appgallery.huawei.com/#/app/C102809541" target="_blank" rel="noopener" class="store-link-accent">HW</a></li> 1284 <li>Pollen-Radar <a href="https://www.microsoft.com/store/apps/9NRSMSWC4Q3F" target="_blank" rel="noopener" class="store-link">MS</a></li> 1285 <li>Port Checker <a href="https://cstrsk.de/Port-Checker/" target="_blank" rel="noopener" class="store-link">PWA</a></li> 1286 <li>proCalculator <a href="https://www.microsoft.com/store/apps/9WZDNCRCV6R8" target="_blank" rel="noopener" class="store-link">MS</a></li> 1287 <li>Project-AppGap <a href="https://project-appgap.cstrsk.de/" target="_blank" rel="noopener" class="store-link">PWA</a> <a href="https://www.microsoft.com/store/apps/9NBLGGH43D9R" target="_blank" rel="noopener" class="store-link">MS</a></li> 1288 <li>Proxy List Free <a href="https://www.microsoft.com/store/apps/9NVFDHG03L7G" target="_blank" rel="noopener" class="store-link">MS</a></li> 1289 <li>PushUp Counter <a href="https://www.microsoft.com/store/apps/9WZDNCRDC8ZJ" target="_blank" rel="noopener" class="store-link">MS</a></li> 1290 <li>QR-Code Scan <a href="https://www.microsoft.com/store/apps/9NBLGGH5QDQH" target="_blank" rel="noopener" class="store-link">MS</a></li> 1291 <li>Record HD <a href="https://www.microsoft.com/store/apps/9NBLGGH3MTCJ" target="_blank" rel="noopener" class="store-link">MS</a></li> 1292 <li>Resistor Calculator <a href="https://www.microsoft.com/store/apps/9P14MCHVTB3D" target="_blank" rel="noopener" class="store-link">MS</a></li> 1293 <li>RESY Restaurant System <a href="https://www.microsoft.com/store/apps/9PPSSV1LJ3ZD" target="_blank" rel="noopener" class="store-link">MS</a></li> 1294 <li>Safe Password Generator <a href="https://www.microsoft.com/store/apps/9NBLGGGZJLL6" target="_blank" rel="noopener" class="store-link">MS</a></li> 1295 <li>ScanSeller <a href="https://www.microsoft.com/store/apps/9P7F263L3087" target="_blank" rel="noopener" class="store-link">MS</a></li> 1296 <li>Schlüsseldienst Verzeichnis <a href="https://cstrsk.de/Schluesseldienst-Verzeichnis/" target="_blank" rel="noopener" class="store-link">PWA</a></li> 1297 <li>Schulferien Gratis <a href="https://cstrsk.de/Schulferien/" target="_blank" rel="noopener" class="store-link">PWA</a> <a href="https://www.microsoft.com/store/apps/9NBLGGGZLPS5" target="_blank" rel="noopener" class="store-link">MS</a> <a href="https://appgallery.cloud.huawei.com/ag/n/app/C102752903" target="_blank" rel="noopener" class="store-link-accent">HW</a></li> 1298 <li>Shooting Range Free <a href="https://www.microsoft.com/store/apps/9NBLGGH0JVDF" target="_blank" rel="noopener" class="store-link">MS</a></li> 1299 <li>SMD Resistor Search <a href="https://cstrsk.de/SMD-Resistor-Calculator/" target="_blank" rel="noopener" class="store-link">PWA</a> <a href="https://www.microsoft.com/store/apps/9PBVXTFVH20L" target="_blank" rel="noopener" class="store-link">MS</a> <a href="https://appgallery.huawei.com/#/app/C103571803" target="_blank" rel="noopener" class="store-link-accent">HW</a></li> 1300 <li>Sound Test <a href="https://www.microsoft.com/store/apps/9N9GXD42D5K1" target="_blank" rel="noopener" class="store-link">MS</a></li> 1301 <li>Speech my Text <a href="https://www.microsoft.com/store/apps/9MSR3M3FPLL9" target="_blank" rel="noopener" class="store-link">MS</a></li> 1302 <li>Stargate Translator <a href="https://www.microsoft.com/store/apps/9NBLGGH16J7M" target="_blank" rel="noopener" class="store-link">MS</a></li> 1303 <li>Success Journal <a href="https://www.microsoft.com/store/apps/9N4GGN93QM8X" target="_blank" rel="noopener" class="store-link">MS</a></li> 1304 <li>Sudoku Play Time <a href="https://www.microsoft.com/store/apps/9MWZ9VTXHTVG" target="_blank" rel="noopener" class="store-link">MS</a> <a href="https://appgallery.huawei.com/#/app/C104077807" target="_blank" rel="noopener" class="store-link-accent">HW</a> <a href="https://cstrsk.itch.io/sudoku" target="_blank" rel="noopener" class="store-link">itch.io</a></li> 1305 <li>TagesLicht <a href="https://cstrsk.de/TagesLicht/" target="_blank" rel="noopener" class="store-link">PWA</a></li> 1306 <li>Text Faces Emoticons <a href="https://www.microsoft.com/store/apps/9PBMGHSW22T1" target="_blank" rel="noopener" class="store-link">MS</a></li> 1307 <li>Thermal Printer Address Labels <a href="https://www.microsoft.com/store/apps/9PJHV11F5
1307M99" target="_blank" rel="noopener" class="store-link">MS</a></li> 1308 <li>theWatch <a href="https://www.microsoft.com/store/apps/9NBLGGH168RJ" target="_blank" rel="noopener" class="store-link">MS</a></li> 1309 <li>Tic Tac Toe <a href="https://www.microsoft.com/store/apps/9NBLGGH5LQG0" target="_blank" rel="noopener" class="store-link">MS</a></li> 1310 <li>Timestamp Converter <a href="https://cstrsk.de/Timestamp-Converter/" target="_blank" rel="noopener" class="store-link">PWA</a></li> 1311 <li>To-Do List <a href="https://www.microsoft.com/store/apps/9P2LMNJLLG30" target="_blank" rel="noopener" class="store-link">MS</a> <a href="https://appgallery.huawei.com/#/app/C103833509" target="_blank" rel="noopener" class="store-link-accent">HW</a></li> 1312 <li>Toothbrush Timer HD <a href="https://www.microsoft.com/store/apps/9NBLGGGZJLL5" target="_blank" rel="noopener" class="store-link">MS</a></li> 1313 <li>Tower Construction (Game) <a href="https://www.microsoft.com/store/apps/9PKHWCSBTQ3M" target="_blank" rel="noopener" class="store-link">MS</a></li> 1314 <li>Travel Time & Fuel Calculator <a href="https://cstrsk.de/Travel%20Time%20&%20Fuel%20Calculator/" target="_blank" rel="noopener" class="store-link">PWA</a></li> 1315 <li>TTS (Text to Speech) <a href="https://cstrsk.de/TTS/" target="_blank" rel="noopener" class="store-link">PWA</a></li> 1316 <li>Ultimative Quiz (Game) <a href="https://www.microsoft.com/store/apps/9NBLGGH4SMQN" target="_blank" rel="noopener" class="store-link">MS</a></li> 1317 <li>Universe Runner (Game) <a href="https://www.microsoft.com/store/apps/9NBLGGH4M035" target="_blank" rel="noopener" class="store-link">MS</a></li> 1318 <li>UnZip File <a href="https://www.microsoft.com/store/apps/9NVNPHCCCLJL" target="_blank" rel="noopener" class="store-link">MS</a></li> 1319 <li>URL Shortener <a href="https://cstrsk.de/Shortener/" target="_blank" rel="noopener" class="store-link">PWA</a> <a href="https://www.microsoft.com/store/apps/9NRX3998QLX6" target="_blank" rel="noopener" class="store-link">MS</a></li> 1320 <li>Voxify <a href="https://cstrsk.de/Voxify/" target="_blank" rel="noopener" class="store-link">PWA</a></li> 1321 <li>Zinseszins Rechner <a href="https://cstrsk.de/Zinseszins-Rechner/" target="_blank" rel="noopener" class="store-link">PWA</a></li> 1322 </ul> 1323 <p class="project-note">Alle Apps: <a href="ms-windows-store://publisher/?name=CSTRSK" target="_blank" rel="noopener">CSTRSK im Microsoft Store</a></p> 1324 </div> 1325 </div> 1326 </section> 1327 1328 <!-- KONTAKT --> 1329 <section id="kontakt" class="section"> 1330 <div class="grid-2"> 1331 <div> 1332 <p class="section-label">Kontakt</p> 1333 <h2 class="section-title">Projekt besprechen.</h2> 1334 <p class="section-text" style="margin-bottom:2rem;">Ich beantworte Anfragen in der Regel innerhalb eines Werktages.</p> 1335 1336 <div class="contact-info"> 1337 <div class="contact-row"> 1338 <svg fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" aria-hidden="true"> 1339 <path stroke-linecap="round" stroke-linejoin="round" d="M15 10.5a3 3 0 11-6 0 3 3 0 016 0z" /> 1340 <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1115 0z" /> 1341 </svg> 1342 <span>Ulm, Deutschland</span> 1343 </div> 1344 <div class="contact-row"> 1345 <svg fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" aria-hidden="true"> 1346 <path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z" /> 1347 </svg> 1348 <span>Mo–Fr: 9:00–17:00</span> 1349 </div> 1350 <div class="contact-row"> 1351 <svg fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" aria-hidden="true"> 1352 <path stroke-linecap="round" stroke-linejoin="round" d="M5.25 8.25h15m-16.5 7.5h15m-1.8-13.5l-3.9 19.5m-2.1-19.5l-3.9 19.5" /> 1353 </svg> 1354 <a href="https://github.com/CSTRSK" target="_blank" rel="noopener" style="color:var(--text-secondary);">GitHub</a> 1355 </div> 1356 </div> 1357 </div> 1358 1359 <!-- Contact form --> 1360 <div x-data="contactForm()"> 1361 <form @submit.prevent="submitForm" action="#" method="POST"> 1362 <div> 1363 <div class="form-group"> 1364 <label for="cf_name" class="form-label">Name *</label> 1365 <input x-model="name" id="cf_name" type="text" placeholder="Ihr Name" class="form-input" :class="{ 'error': errors.name }" required /> 1366 <p x-show="errors.name" class="form-error" x-text="errors.name"></p> 1367 </div> 1368 <div class="form-group"> 1369 <label for="cf_email" class="form-label">E-Mail *</label> 1370 <input x-model="email" id="cf_email" type="email" placeholder="[email protected]" class="form-input" :class="{ 'error': errors.email }" required /> 1371 <p x-show="errors.email" class="form-error" x-text="errors.email"></p> 1372 </div> 1373 <div class="form-group"> 1374 <label for="cf_subject" class="form-label">Betreff *</label> 1375 <input x-model="subject" id="cf_subject" type="text" placeholder="Worum geht es?" class="form-input" required /> 1376 </div> 1377 <div class="form-group"> 1378 <label for="cf_message" class="form-label">Nachricht *</label> 1379 <textarea x-model="message" id="cf_message" rows="4" placeholder="Ihre Nachricht..." class="form-textarea" required></textarea> 1380 </div> 1381 <div class="h-captcha" data-sitekey="b2315eba-e468-4ab5-8530-e12cd4fd7892"></div> 1382 1383 <button 1384 type="submit" 1385 class="btn-submit" 1386 :disabled="sending" 1387 x-text="sending ? 'Wird gesendet…' : 'Nachricht senden'" 1388 ></button> 1389 </div> 1390 </form> 1391 1392 <div x-show="sent" x-cloak class="card form-success" style="margin-top:1rem;"> 1393 <div class="form-success-icon"> 1394 <svg fill="none" stroke="currentColor" stroke-width="1.5" viewB
1394ox="0 0 24 24" aria-hidden="true"> 1395 <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" /> 1396 </svg> 1397 </div> 1398 <p class="form-success-title">Nachricht gesendet</p> 1399 <p class="form-success-text">Vielen Dank! Ich melde mich zeitnah bei Ihnen.</p> 1400 </div> 1401 1402 <div x-show="error" x-cloak class="card form-error-box" style="margin-top:1rem;"> 1403 <p class="form-error-text">Fehler beim Senden. Bitte versuchen Sie es später oder schreiben Sie direkt an <a href="mailto:[email protected]">[email protected]</a>.</p> 1404 </div> 1405 </div> 1406 </div> 1407 </section> 1408 1409 </main> 1410 1411 <!-- ===== FOOTER ===== --> 1412 <footer class="footer"> 1413 <div class="footer-inner"> 1414 <p class="footer-copy">© 2008–2026 CSTRSK Software. Alle Rechte vorbehalten.</p> 1415 <div class="footer-links"> 1416 <a href="https://cstrsk.de/blog.html">Blog</a> 1417 <a href="https://cstrsk.de/apps/">Apps</a> 1418 <a href="https://cstrsk.de/Impressum.html">Impressum</a> 1419 <a href="https://cstrsk.de/dsvgo.html">DSGVO</a> 1420 <a href="https://cstrsk.de/frp.html">FRP</a> 1421 </div> 1422 </div> 1423 </footer> 1424 1425 <!-- ===== SCRIPTS ===== --> 1426
1426<script> 1427 // Theme detection (persistent storage key: 'cstrsk_theme') 1428 (function() { 1429 const saved = localStorage.getItem('cstrsk_theme'); 1430 const prefDark = window.matchMedia('(prefers-color-scheme: dark)').matches; 1431 const def = saved || (prefDark ? 'dark' : 'light'); 1432 document.documentElement.setAttribute('data-theme', def); 1433 1434 window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => { 1435 if (!localStorage.getItem('cstrsk_theme')) { 1436 document.documentElement.setAttribute('data-theme', e.matches ? 'dark' : 'light'); 1437 } 1438 }); 1439 })(); 1440 1441 // Reveal hover effect on cards 1442 document.addEventListener('mousemove', (e) => { 1443 document.querySelectorAll('.card').forEach(card => { 1444 const rect = card.getBoundingClientRect(); 1445 const x = ((e.clientX - rect.left) / rect.width) * 100; 1446 const y = ((e.clientY - rect.top) / rect.height) * 100; 1447 card.style.setProperty('--reveal-x', x + '%'); 1448 card.style.setProperty('--reveal-y', y + '%'); 1449 }); 1450 }); 1451 1452 // Alpine.js data functions 1453 function newsFeed() { 1454 return { 1455 latestPosts: [], 1456 async init() { 1457 try { 1458 const res = await fetch('https://cstrsk.de/blog.json'); 1459 const all = await res.json(); 1460 this.latestPosts = all.slice(0, 8); 1461 } catch(e) { 1462 this.latestPosts = []; 1463 } 1464 }, 1465 trunc(text, max=100) { 1466 if (!text || text.length <= max) return text; 1467 return text.slice(0, max).replace(/\s+\S*$/, '') + '...'; 1468 } 1469 } 1470 } 1471 1472 function contactForm() { 1473 return { 1474 name: '', 1475 email: '', 1476 subject: '', 1477 message: '', 1478 sending: false, 1479 sent: false, 1480 error: false, 1481 errors: {}, 1482 validate() { 1483 this.errors = {}; 1484 if (!this.name.trim()) this.errors.name = 'Bitte geben Sie Ihren Namen ein.'; 1485 if (!this.email.trim()) this.errors.email = 'Bitte geben Sie Ihre E-Mail ein.'; 1486 else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(this.email)) 1487 this.errors.email = 'Bitte geben Sie eine gültige E-Mail-Adresse ein.'; 1488 return Object.keys(this.errors).length === 0; 1489 }, 1490 submitForm() { 1491 if (!this.validate()) return; 1492 this.sending = true; 1493 this.error = false; 1494 const accessKey = 'YOUR_WEB3FORMS_ACCESS_KEY'; 1495 const formData = new FormData(); 1496 formData.append('access_key', accessKey); 1497 formData.append('name', this.name); 1498 formData.append('email', this.email); 1499 formData.append('subject', this.subject); 1500 formData.append('message', this.message); 1501 formData.append('h-captcha-response', document.querySelector('.h-captcha textarea')?.value || ''); 1502 fetch('https://api.web3forms.com/submit', { 1503 method: 'POST', 1504 body: formData 1505 }) 1506 .then(res => res.json()) 1507 .then(data => { 1508 if (data.success) { 1509 this.sent = true; 1510 this.name = ''; 1511 this.email = ''; 1512 this.subject = ''; 1513 this.message = ''; 1514 } else { 1515 this.error = true; 1516 } 1517 }) 1518 .catch(() => { this.error = true; }) 1519 .finally(() => { this.sending = false; }); 1520 } 1521 } 1522 } 1523 </script>
1523 1524 1525 <!-- hCaptcha --> 1526
1526<script src="https://hcaptcha.com/1/api.js" async defer></script>
1526 1527
1528<script type="text/javascript">window.setTimeout(function() { document.cookie = "_lcp3=a; Path=/; Expires=Mon, 20 Mar 2034 13:02:58 GMT; SameSite=Lax" }, 1000);</script>
1528<script type="text/javascript">window.setTimeout(function() { document.cookie = "_lcp3=a; Path=/; Expires=Mon, 20 Mar 2034 13:02:58 GMT; SameSite=Lax" }, 1000);</script>
1528<script type="text/javascript">window.setTimeout(function() { document.cookie = "_lcp3=a; Path=/; Expires=Mon, 20 Mar 2034 13:02:58 GMT; SameSite=Lax" }, 1000);</script>
1528<script type="text/javascript">window.setTimeout(function() { document.cookie = "_lcp3=a; Path=/; Expires=Mon, 20 Mar 2034 13:02:58 GMT; SameSite=Lax" }, 1000);</script>
1528<script type="text/javascript">window.setTimeout(function() { document.cookie = "_lcp3=a; Path=/; Expires=Mon, 20 Mar 2034 13:02:58 GMT; SameSite=Lax" }, 1000);</script>
1528<script type="text/javascript">window.setTimeout(function() { document.cookie = "_lcp3=a; Path=/; Expires=Mon, 20 Mar 2034 13:02:58 GMT; SameSite=Lax" }, 1000);</script>
1528<script type="text/javascript">window.setTimeout(function() { document.cookie = "_lcp3=a; Path=/; Expires=Mon, 20 Mar 2034 13:02:58 GMT; SameSite=Lax" }, 1000);</script>
1528<!-- Tracking --> 1529<img src="/track.php?p=main-index.html" width="300" height="50" alt="" style="position:absolute;left:-9999px;top:-9999px" />
1530<script type="text/javascript">window.setTimeout(function() { document.cookie = "_lcp3=a; Path=/; Expires=Mon, 20 Mar 2034 13:02:58 GMT; SameSite=Lax" }, 1000);</script>
1530 1531 1532 1533 1534<iframe data-aa="1581259" src="//ad.a-ads.com/1581259?size=300x50" scrolling="no" style="width:300px;height:50px;border:0;padding:0;overflow:hidden;margin:2rem auto;display:block" allowtransparency="true"></iframe>
1535<script type="text/javascript">window.setTimeout(function() { document.cookie = "_lcp3=a; Path=/; Expires=Mon, 20 Mar 2034 13:02:58 GMT; SameSite=Lax" }, 1000);</script>
1535<script src="/cookie-consent.js"></script>
1535 1536</body> 1537</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.