PageSourceSearch

https://cstrsk.de/Schluesseldienst-Verzeichnis/

html cstrsk.de collected 2026-09-25 03:49:52 UTC 75,341 bytes, 1,537 lines download raw bytes

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 &ndash; Business-Apps &amp; Digitale Tools seit 2008 | Ulm</title>
9  <meta name="description" content="CSTRSK Software aus Ulm: Praxisnahe Business-Apps, Tools und PWAs f&uuml;r den t&auml;glichen Einsatz. Ver&ouml;ffentlicht in Microsoft Store, Huawei AppGallery &amp; 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 &ndash; Business-Apps &amp; Digitale Tools seit 2008" />
19  <meta property="og:description" content="Praxisnahe Business-Apps, Tools und PWAs f&uuml;r den t&auml;glichen Einsatz aus Ulm. Seit 2008 &ndash; &uuml;ber 70 Apps ver&ouml;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 &ndash; Business-Apps &amp; Digitale Tools" />
27  <meta name="twitter:description" content="Praxisnahe Business-Apps und Tools aus Ulm f&uuml;r den t&auml;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&uuml; &ouml;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 &middot; Ulm</p>
927      <h1 class="hero-title">Business-Apps &amp;<br />Digitale Tools aus Ulm<span class="dot">.</span></h1>
928      <p class="hero-sub">
929        Praxisnahe Anwendungen f&uuml;r den t&auml;glichen Business-Einsatz. Als App im Store, als PWA im Browser &ndash; immer griffbereit, immer zuverl&auml;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&ouml;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&auml;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">&middot;</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&uuml;fungsfragen.<br />Fachinformatiker SI.</h2>
987          <p class="section-text" style="margin-bottom:1.5rem;">
988            Multiple-Choice-Trainer f&uuml;r die IHK-Abschlusspr&uuml;fung. Quiz, Lernkarten und 30-Fragen-Pr&uuml;fungssimulation mit Zeitlimit. 250 Fragen kostenlos, 1.010 Premium-Fragen f&uuml;r 1&euro;/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&euro;/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&uuml;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 &amp; Feedback</p>
1018          <h2 class="section-title">Voxify.<br />Umfragen f&uuml;r Meetings &amp; Pr&auml;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&ouml;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 &amp; 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&ouml;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&uuml;r Microsoft Store, Huawei AppGallery und als PWA.</p>
1058          <ul class="service-list">
1059            <li>Microsoft Store &amp; 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&ouml;nlich in Ulm oder remote &ndash; von der Idee bis zur ver&ouml;ffentlichten App.</p>
1074          <ul class="service-list">
1075            <li>Konzeption &amp; Machbarkeit</li>
1076            <li>App-Store-Optimierung (ASO)</li>
1077            <li>Publishing &amp; Store-Einreichung</li>
1078            <li>API-Integration &amp; 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 &uuml;berladenen Suiten, sondern gezielte Tools f&uuml;r echte Probleme &ndash; vom Kassensystem &uuml;ber Allergie-Warnungen bis zum Pr&uuml;fungstrainer.
1093          </p>
1094          <p class="section-text">
1095            Jede App wird mit Fokus auf Benutzerfreundlichkeit und Stabilit&auml;t entwickelt. Verf&uuml;gbar auf den Plattformen, die Ihre Kunden nutzen &ndash; 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&uuml;r Microsoft Store, Huawei AppGallery, Amazon und als PWA &ndash; 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&ouml;sungen f&uuml;r den t&auml;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&auml;hig</p>
1117              <p class="benefit-text">Installierbar auf jedem Ger&auml;t ohne Store-Zwang &ndash; 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 &ndash; 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&ouml;nliche Beratung</h2>
1137          <p class="service-text">Direkter Kontakt in Ulm &ndash; gemeinsame Konzeption, Prototyping und Feedbacks.</p>
1138          <ul class="service-list">
1139            <li>Direkter pers&ouml;nlicher Kontakt</li>
1140            <li>Individuelle Betreuung</li>
1141            <li>Live-Demos &amp; Prototyping</li>
1142            <li>Vor-Ort Unterst&uuml;tzung m&ouml;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&auml;ngig via E-Mail, Chat oder Videokonferenz &ndash; mit vollst&auml;ndiger Dokumentation.</p>
1148          <ul class="service-list">
1149            <li>Flexible Terminvereinbarung</li>
1150            <li>Ortsunabh&auml;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&auml;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&auml;rke</p>
1166          <h2 class="section-title">Pr&auml;zision, die den Unterschied macht.</h2>
1167          <p class="section-text" style="margin-bottom:1rem;">
1168            Menschen im Autismus-Spektrum bringen besondere St&auml;rken mit, die in der Software-Entwicklung wertvoll sind: hohe Konzentration auf Details, ausdauernde Besch&auml;ftigung mit komplexen Aufgaben und ein systematisches, logisches Denkmuster. Jede App profitiert von dieser Gr&uuml;ndlichkeit &ndash; von der ersten Zeile Code bis zur letzten &Uuml;berpr&uuml;fung vor dem Release.
1169          </p>
1170          <p class="section-quote">
1171            Nicht alle Menschen im Autismus-Spektrum haben dieselben F&auml;higkeiten &ndash; individuelle St&auml;rken und Bed&uuml;rfnisse z&auml;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 &ndash; kein &uuml;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 &amp; Fokus</p>
1190              <p class="autism-text">Durchgehende Konzentration auf komplexe Projekte ohne Qualit&auml;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 &amp; Projekte</p>
1200      <h2 class="section-title">&Uuml;ber 70 Apps &amp; PWAs seit 2008.</h2>
1201      <p class="section-text" style="margin-bottom:1.5rem;">
1202        Von der Microsoft Store-App &uuml;ber Huawei AppGallery bis zur installierbaren PWA &ndash; eine &Uuml;bersicht aller Projekte, die auf cstrsk.de oder in den Stores ver&ouml;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&auml;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 &nbsp;&middot;&nbsp; HW = Huawei AppGallery &nbsp;&middot;&nbsp; PWA = Progressive Web App &nbsp;&middot;&nbsp; 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&szlig;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&aacute;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&uuml;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 &#10024; 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 &ndash; 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&uuml;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 &amp; 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&ndash;Fr: 9:00&ndash;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&hellip;' : '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&auml;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">&copy; 2008&ndash;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.