-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
3056 lines (2674 loc) · 166 KB
/
index.html
File metadata and controls
3056 lines (2674 loc) · 166 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Recherche-Cockpit | Version 2.0</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/all.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/introjs.min.css">
<script src="js/intro.min.js"></script>
<style>
/* === Layout === */
body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: #f4f6f9; }
.hangar-area { background: #ffffff; height: 100vh; overflow-y: auto; border-right: 1px solid #dee2e6; padding: 15px; box-shadow: 2px 0 5px rgba(0,0,0,0.05); position: sticky; top: 0; z-index: 1020; }
.cockpit-area { padding: 20px; height: 100vh; overflow-y: auto; }
.cat-header { font-size: 0.75rem; font-weight: 800; color: #5c6770; text-transform: uppercase; letter-spacing: 1px; margin-top: 15px; margin-bottom: 8px; border-bottom: 1px solid #e2e6ea; padding-bottom: 4px; }
.phase-col { background: #eef2f7; border-radius: 12px; min-height: 65vh; padding: 10px; border: 2px dashed #cbd5e0; transition: background 0.3s; }
.phase-col.drag-over { background: #dbeafe; border-color: #3b82f6; }
.global-header { font-weight: 700; text-align: center; margin: 20px 0 10px; color: #0d6efd; font-size: 0.9rem; display: flex; align-items: center; justify-content: center; }
.global-drop { min-height: 160px; background: #e8f4ff; border-color: #0d6efd99; box-shadow: inset 0 0 0 1px #0d6efd33; }
.global-drop.drag-over { background: #d0e7ff; border-color: #0d6efd; }
.phase-header { font-weight: 700; text-align: center; margin-bottom: 15px; color: #495057; font-size: 0.85rem; min-height: 40px; display: flex; align-items: center; justify-content: center; }
.deleted-wrapper { border: 1px dashed #ced4da; border-radius: 8px; padding: 10px; background: #f8f9fa; }
.deleted-item { background: white; border: 1px solid #e0e0e0; border-radius: 6px; padding: 6px 8px; margin-bottom: 6px; display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 0.9rem; }
.deleted-item:last-child { margin-bottom: 0; }
.deleted-item .meta { color: #6c757d; font-size: 0.8rem; }
.deleted-empty { color: #adb5bd; font-style: italic; font-size: 0.9rem; }
.ki-callout { border: 1px solid #ffeeba; background: #fff8e1; border-radius: 8px; padding: 12px; }
.ki-callout .icon-wrap { width: 38px; height: 38px; border-radius: 8px; background: #fff3cd; display: inline-flex; align-items: center; justify-content: center; color: #e67e22; box-shadow: inset 0 0 0 1px #ffe8a1; }
.ki-checklist .list-group-item { border: none; border-bottom: 1px dashed #f1c40f; background: transparent; padding-left: 0; padding-right: 0; }
.ki-checklist .list-group-item:last-child { border-bottom: none; }
/* === Cards === */
.tool-card { background: white; border: 1px solid #e0e0e0; border-radius: 6px; padding: 8px 36px 8px 8px; margin-bottom: 8px; cursor: grab; display: flex; align-items: center; gap: 8px; transition: all 0.2s; box-shadow: 0 1px 3px rgba(0,0,0,0.05); font-size: 0.9rem; position: relative; }
.tool-card.tool-card--chatgpt { min-height: 56px; }
.tool-card:hover { background: #f8fbff; box-shadow: 0 6px 14px rgba(13, 110, 253, 0.16); border-color: #0d6efd; z-index: 10; }
.tool-card:active { cursor: grabbing; }
.tool-icon { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; background: #f8f9fa; border-radius: 4px; color: #555; font-size: 0.8rem; }
.tool-card-body { min-width: 0; }
.tool-title-row { align-items: flex-start; gap: 8px; flex-wrap: wrap; }
.tool-title { flex: 1 1 auto; min-width: 0; white-space: normal; line-height: 1.25; max-height: 3.75em; overflow: hidden; transition: max-height 0.2s ease; }
.tool-title.expanded { max-height: none; }
.tool-title-toggle { border: none; background: transparent; color: #0d6efd; font-size: 0.75rem; padding: 0 4px; line-height: 1.25; }
.tool-title-toggle:hover { text-decoration: underline; }
.tool-title-toggle:focus-visible { outline: 2px solid #0d6efd; outline-offset: 2px; }
.tool-badges { display: flex; gap: 4px; flex-shrink: 0; margin-left: auto; }
.tool-category { white-space: normal; line-height: 1.2; }
.is-ai { box-shadow: inset 3px 0 0 #8e44ad; }
.is-library { box-shadow: inset 3px 0 0 #198754; }
.is-ai.is-library { box-shadow: inset 3px 0 0 #8e44ad, inset 6px 0 0 #198754; }
.status-badge { font-size: 0.7rem; padding: 2px 6px; border-radius: 8px; }
.badge-ai { background: #f3e8ff; color: #6f42c1; border: 1px solid #e0c3ff; }
.badge-lib { background: #e8fff3; color: #0f5132; border: 1px solid #b6e2c8; }
.badge-vwl { background: #e8f2ff; color: #1d4ed8; border: 1px solid #bfdbfe; }
.badge-bwl { background: #e8f2ff; color: #1d4ed8; border: 1px solid #bfdbfe; }
.tool-link { color: #495057; margin-left: auto; padding: 2px 6px; border-radius: 4px; transition: 0.2s; }
.tool-link:hover { background-color: #e9ecef; color: #0d6efd; }
.tool-remove-btn { position: absolute; top: 6px; right: 6px; border: none; background: transparent; color: #6c757d; padding: 4px; border-radius: 4px; display: inline-flex; align-items: center; justify-content: center; line-height: 1; }
.tool-remove-btn:hover, .tool-remove-btn:focus-visible { color: #dc3545; background: #f8d7da; }
/* === Buttons === */
.edit-custom-btn { border: none; background: transparent; color: #6c757d; padding: 2px 6px; }
.edit-custom-btn:hover { color: #0d6efd; }
.ki-check-btn { background: linear-gradient(135deg, #f39c12, #e67e22); color: #fff; font-weight: 700; letter-spacing: 0.3px; box-shadow: 0 6px 14px rgba(243, 156, 18, 0.3); border: none; }
.ki-check-btn:hover { color: #fff; background: linear-gradient(135deg, #ffa726, #e67e22); box-shadow: 0 8px 18px rgba(243, 156, 18, 0.45); transform: translateY(-1px); }
/* === Guided Tour (Intro.js) === */
.introjs-overlay { background: rgba(10, 88, 202, 0.28); }
.introjs-tooltip { border-radius: 12px; border: 1px solid #cfe2ff; box-shadow: 0 14px 28px rgba(13, 110, 253, 0.2); }
.introjs-tooltip-title { color: #0d6efd; font-weight: 700; }
.introjs-tooltiptext { color: #1f2937; }
.introjs-button { border-radius: 8px; border: 1px solid #0d6efd; color: #0d6efd; background: #e7f1ff; }
.introjs-button:hover { background: #dbeafe; color: #0a58ca; }
.introjs-bullets ul li a.active { background: #0d6efd; }
.introjs-progress { background: #e7f1ff; }
.introjs-progressbar { background: #0d6efd; }
.introjs-button:focus-visible { outline: 3px solid #0a58ca; outline-offset: 2px; }
.introjs-helperLayer {
background: transparent !important;
box-shadow: none !important;
border: none !important;
}
.introjs-arrow {
border-width: 12px !important;
}
.introjs-arrow.top { border-bottom-color: #0d6efd !important; }
.introjs-arrow.bottom { border-top-color: #0d6efd !important; }
.introjs-arrow.left { border-right-color: #0d6efd !important; }
.introjs-arrow.right { border-left-color: #0d6efd !important; }
.introjs-tooltip {
position: relative;
}
.introjs-tooltip::after {
content: '';
position: absolute;
width: 10px;
height: 10px;
background: #0d6efd;
border-radius: 50%;
box-shadow: 0 0 0 6px rgba(13, 110, 253, 0.25);
}
.introjs-tooltip.introjs-bottom::after { top: -22px; left: 24px; }
.introjs-tooltip.introjs-top::after { bottom: -22px; left: 24px; }
.introjs-tooltip.introjs-left::after { right: -22px; top: 24px; }
.introjs-tooltip.introjs-right::after { left: -22px; top: 24px; }
.introjs-tooltipbuttons {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 8px;
flex-wrap: wrap;
}
.introjs-tooltipbuttons .introjs-prevbutton,
.introjs-tooltipbuttons .introjs-nextbutton,
.introjs-tooltipbuttons .introjs-donebutton {
float: none;
}
.introjs-tooltipbuttons .introjs-prevbutton { order: 1; }
.introjs-tooltipbuttons .introjs-nextbutton { order: 2; }
.introjs-tooltipbuttons .introjs-donebutton { order: 3; }
/* === Modal === */
.orientation-highlight {
outline: 3px solid #0d6efd;
outline-offset: 3px;
box-shadow: 0 0 0 6px rgba(13, 110, 253, 0.2);
transition: outline-offset 0.2s ease, box-shadow 0.2s ease;
}
.orientation-onboarding-tag {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 10px;
border-radius: 999px;
background: #e7f1ff;
color: #0d6efd;
font-weight: 600;
font-size: 0.85rem;
}
.orientation-tip-list li + li { margin-top: 6px; }
.orientation-modal-footer {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 10px;
}
.orientation-modal-footer .btn-group { flex-wrap: wrap; }
/* === Toasts === */
.toast-container { position: fixed; top: 1rem; right: 1rem; display: flex; flex-direction: column; gap: 0.5rem; z-index: 1080; pointer-events: none; }
.toast-container.bottom { top: auto; bottom: 1rem; }
.toast-item { background: #ffffff; color: #111827; border-radius: 10px; border: 1px solid #e5e7eb; border-left: 4px solid #0d6efd; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12); padding: 10px 12px; min-width: 260px; max-width: min(360px, calc(100vw - 2rem)); display: flex; align-items: flex-start; gap: 10px; pointer-events: auto; opacity: 0; transform: translateY(6px); transition: opacity 0.2s ease, transform 0.2s ease; }
.toast-item.show { opacity: 1; transform: translateY(0); }
.toast-item .toast-icon { font-size: 1rem; margin-top: 2px; }
.toast-item .toast-content { flex: 1; }
.toast-item .toast-title { font-weight: 700; font-size: 0.95rem; line-height: 1.2; }
.toast-item .toast-message { font-size: 0.9rem; color: #374151; line-height: 1.35; word-break: break-word; }
.toast-item .toast-close { border: none; background: transparent; color: #6b7280; cursor: pointer; padding: 4px; border-radius: 6px; flex-shrink: 0; }
.toast-item .toast-close:focus-visible { outline: 2px solid #0d6efd; outline-offset: 2px; }
.toast-success { border-left-color: #16a34a; }
.toast-success .toast-icon { color: #16a34a; }
.toast-info { border-left-color: #0d6efd; }
.toast-info .toast-icon { color: #0d6efd; }
.toast-error { border-left-color: #dc2626; }
.toast-error .toast-icon { color: #dc2626; }
/* === License Badge === */
.license-badge {
position: fixed;
bottom: 16px;
right: 16px;
background: #ffffff;
color: #495057;
border: 1px solid #dee2e6;
border-radius: 10px;
padding: 10px 12px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
font-size: 0.85rem;
display: flex;
flex-direction: column;
gap: 8px;
max-width: min(380px, calc(100vw - 2rem));
z-index: 1100;
}
.license-badge-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.license-badge-title {
font-size: 0.82rem;
font-weight: 700;
color: #212529;
display: inline-flex;
align-items: center;
gap: 6px;
}
.license-badge-collapse-btn {
border: 1px solid #dee2e6;
background: #f8f9fa;
color: #495057;
border-radius: 999px;
width: 28px;
height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 1;
}
.license-badge-collapse-btn:hover,
.license-badge-collapse-btn:focus-visible {
background: #e9ecef;
color: #212529;
}
.license-badge-content {
display: flex;
flex-direction: column;
gap: 8px;
}
.license-badge.license-badge--collapsed {
max-width: fit-content;
padding: 8px;
gap: 0;
}
.license-badge.license-badge--collapsed .license-badge-content {
display: none;
}
.license-badge.license-badge--collapsed .license-badge-title {
font-size: 0.8rem;
}
.license-badge-section-title {
font-weight: 700;
color: #212529;
margin-bottom: 2px;
}
.license-badge p,
.license-badge ul {
margin: 0;
padding-left: 0;
list-style: none;
}
.license-badge li + li {
margin-top: 2px;
}
.license-badge-topline {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.license-badge a,
.license-badge .btn-link {
color: #0d6efd;
text-decoration: none;
}
.license-badge a:hover,
.license-badge a:focus-visible,
.license-badge .btn-link:hover,
.license-badge .btn-link:focus-visible {
text-decoration: underline;
}
.license-badge .btn-link {
font-size: 0.85rem;
font-weight: 600;
}
.license-badge .badge-separator {
color: #adb5bd;
}
.external-services-note {
border-top: 1px solid #e9ecef;
padding-top: 8px;
font-size: 0.82rem;
line-height: 1.35;
color: #495057;
}
.external-services-note button {
font-size: 0.82rem;
font-weight: 600;
padding: 0;
vertical-align: baseline;
}
@media (max-width: 576px) {
.toast-container { left: 0.75rem; right: 0.75rem; top: auto; bottom: 1rem; align-items: flex-end; }
.toast-item { width: 100%; max-width: none; }
}
/* === A11y === */
.tool-card:focus-visible, .btn:focus-visible, .form-control:focus-visible, .form-select:focus-visible, .tool-link:focus-visible, .tool-info-btn:focus-visible, .edit-custom-btn:focus-visible, .tool-title-toggle:focus-visible {
outline: 3px solid #0a58ca;
outline-offset: 3px;
box-shadow: 0 0 0 4px rgba(13, 110, 253, 0.2);
}
.tool-info-btn {
border: none;
background: transparent;
color: #6c757d;
padding: 4px;
border-radius: 6px;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 32px;
min-height: 32px;
}
.tool-info-btn:hover { background: #e9ecef; color: #0d6efd; }
.phase-col:focus-within { box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.35); border-color: #0d6efd; }
/* === Responsive Board & Layout === */
.cockpit-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: flex-end; }
.board-wrapper { overflow-x: auto; padding-bottom: 6px; }
.board-grid { flex-wrap: nowrap; min-height: 70vh; }
.board-grid > .col { min-width: 280px; flex: 0 0 auto; }
@media (max-width: 1199.98px) {
.hangar-area { height: auto; max-height: 70vh; }
.cockpit-area { height: auto; }
.board-wrapper { margin-top: 10px; }
}
@media (min-width: 1400px) {
.board-grid { flex-wrap: wrap; }
.board-grid > .col { min-width: 0; flex: 1 0 0; }
}
/* === Responsive === */
@media print {
.hangar-area, .no-print, .modal { display: none !important; }
.cockpit-area { width: 100% !important; height: auto !important; overflow: visible; padding: 0; }
.phase-col { border: 1px solid #ccc; min-height: 150px; page-break-inside: avoid; break-inside: avoid; padding: 10px; }
.phase-header { background: #f1f3f5; padding: 8px; border-bottom: 1px solid #dee2e6; border-radius: 6px 6px 0 0; }
.row { display: flex !important; flex-wrap: wrap !important; gap: 12px !important; }
.cockpit-area .row.row-cols-1.row-cols-md-6.g-2 > .col { flex: 1 1 45% !important; max-width: 50% !important; min-width: 240px; }
.cockpit-area .row.g-2 > .col-12 { flex: 1 1 100% !important; max-width: 100% !important; }
body { background: white; -webkit-print-color-adjust: exact; }
.tool-link { display: inline-flex !important; align-items: center; gap: 4px; color: #0d6efd !important; text-decoration: underline !important; visibility: visible !important; opacity: 1 !important; }
}
.tooltip-inner {
max-width: 360px;
word-break: normal;
overflow-wrap: normal;
hyphens: none;
word-break: keep-all;
}
.tooltip-inner ul,
.tooltip-inner ol {
list-style: none;
padding-left: 0;
margin-bottom: 0;
}
.tooltip-inner li + li {
margin-top: 4px;
}
</style>
</head>
<body>
<div id="toast-container" class="toast-container no-print" aria-live="polite" aria-atomic="true" role="region" aria-label="Systembenachrichtigungen"></div>
<div id="licenseBadge" class="license-badge no-print" aria-label="Unihinweis">
<div class="license-badge-header">
<span class="license-badge-title"><i class="fas fa-balance-scale" aria-hidden="true"></i> Hinweise</span>
<button id="licenseBadgeToggle" type="button" class="license-badge-collapse-btn" aria-controls="licenseBadgeContent" aria-expanded="true" aria-label="Hinweisfeld minimieren">
<i class="fas fa-chevron-down" aria-hidden="true"></i>
</button>
</div>
<div id="licenseBadgeContent" class="license-badge-content">
<div class="license-badge-topline">
<span><a href="https://creativecommons.org/licenses/by/4.0/deed.de" target="_blank" rel="noopener">CC BY 4.0</a></span>
<span class="badge-separator">|</span>
<button type="button" class="btn btn-link p-0 align-baseline" data-bs-toggle="modal" data-bs-target="#privacyModal">Datenschutz</button>
<span class="badge-separator">|</span>
<button type="button" class="btn btn-link p-0 align-baseline" data-bs-toggle="modal" data-bs-target="#legalNoticeModal">Impressum & Quellenangaben</button>
</div>
<div class="external-services-note">
<i class="fas fa-shield-halved me-1" aria-hidden="true"></i>
Externe Dienste: Vor jedem Klick Hinweise zur Datenweitergabe beachten.
<button type="button" class="btn btn-link p-0 align-baseline"
data-bs-toggle="modal"
data-bs-target="#privacyModal"
data-scroll-target="externalServicesNotice">
Details anzeigen
</button>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-md-3 hangar-area d-flex flex-column">
<h5 class="mb-3"><i class="fas fa-warehouse"></i> Hangar</h5>
<p class="text-muted small" style="line-height: 1.2;">Ziehe die Instrumente in die 5 Recherche-Phasen.</p>
<div class="no-print mb-3">
<label class="form-label visually-hidden" for="toolSearchInput">Tools durchsuchen</label>
<input type="text" id="toolSearchInput" class="form-control form-control-sm mb-2" placeholder="Tools durchsuchen..." aria-label="Tools durchsuchen">
<label class="form-label visually-hidden" for="toolCategoryDropdownButton">Kategorie filtern</label>
<div class="dropdown w-100">
<button id="toolCategoryDropdownButton" class="btn btn-sm btn-outline-secondary dropdown-toggle w-100 d-flex align-items-center justify-content-between" type="button" data-bs-toggle="dropdown" aria-expanded="false" aria-label="Tools nach Kategorie filtern">
<span class="d-flex align-items-center gap-2">
<i class="fas fa-filter text-secondary"></i>
<span class="category-label">Alle Kategorien</span>
</span>
<i class="fas fa-chevron-down small text-muted"></i>
</button>
<ul class="dropdown-menu w-100" aria-labelledby="toolCategoryDropdownButton" id="toolCategoryMenu"></ul>
</div>
<div class="form-text small text-muted mt-1">
Fahren Sie in der Liste über eine Kategorie, um deren Beschreibung zu sehen.
</div>
</div>
<div id="tool-pool">
</div>
<button class="btn btn-sm btn-outline-primary w-100 mt-3 no-print" data-bs-toggle="modal" data-bs-target="#customToolModal">
<i class="fas fa-plus"></i> Eigenes Tool ergänzen
</button>
<button class="btn btn-sm btn-outline-success w-100 mt-2 no-print" data-bs-toggle="modal" data-bs-target="#licensedDbModal">
<i class="fas fa-database"></i> Datenbank ergänzen
</button>
<div class="mt-auto no-print">
<div class="mt-3 deleted-wrapper">
<div class="d-flex justify-content-between align-items-center mb-2">
<div class="fw-bold"><i class="fas fa-trash-undo me-2"></i>Gelöschte Tools & Notizen</div>
<button class="btn btn-sm btn-outline-secondary" onclick="restoreAllDeleted()" data-bs-toggle="tooltip" data-bs-title="Alle zurückholen" aria-label="Alle gelöschten Tools wiederherstellen">
<i class="fas fa-undo"></i>
</button>
</div>
<div id="deleted-list" class="deleted-empty">Noch nichts gelöscht</div>
</div>
</div>
</div>
<div class="col-md-9 cockpit-area">
<div class="d-flex justify-content-between align-items-center mb-4 flex-wrap gap-3">
<div>
<h3 class="mb-1"><i class="fas fa-plane-departure"></i> Ihr Recherche‑Cockpit für die Wirtschaftswissenschaften</h3>
<p class="text-muted mb-0">Navigieren Sie Ihren Rechercheprozess mit einer gezielten Auswahl klassischer und KI‑gestützter Tools.</p>
</div>
<div class="no-print cockpit-actions">
<div class="dropdown" id="noteDropdown">
<button id="noteDropdownButton" class="btn btn-sm btn-outline-secondary d-inline-flex align-items-center gap-2 dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
<i class="fas fa-note-sticky"></i>
<span>Notiz hinzufügen</span>
</button>
<ul class="dropdown-menu dropdown-menu-end">
<li class="dropdown-header">Ziel auswählen</li>
<li><button class="dropdown-item" type="button" onclick="openTextModal('phase-1')">Thema eingrenzen</button></li>
<li><button class="dropdown-item" type="button" onclick="openTextModal('phase-2')">Suchbegriffe sammeln</button></li>
<li><button class="dropdown-item" type="button" onclick="openTextModal('phase-3')">Literatur suchen</button></li>
<li><button class="dropdown-item" type="button" onclick="openTextModal('phase-5')">Literatur lesen</button></li>
<li><button class="dropdown-item" type="button" onclick="openTextModal('phase-6')">Text schreiben</button></li>
</ul>
</div>
<button id="orientationButton" type="button" class="btn btn-sm btn-outline-primary d-inline-flex align-items-center gap-2" data-bs-toggle="modal" data-bs-target="#orientationModal">
<i class="fas fa-compass"></i>
<span>Compass</span>
</button>
<button id="ai-source-check-btn" class="btn ki-check-btn btn-sm d-inline-flex align-items-center gap-2" data-bs-toggle="modal" data-bs-target="#kiSourcesModal">
<i class="fas fa-shield-alt"></i>
<span>Reflektierter Umgang mit KI</span>
</button>
<button id="craap-check-btn" class="btn btn-sm btn-outline-warning d-inline-flex align-items-center gap-2" data-bs-toggle="modal" data-bs-target="#craapModal">
<i class="fas fa-clipboard-check"></i>
<span>CRAAP-Test</span>
</button>
<button id="guided-tour-btn" type="button" class="btn btn-sm btn-outline-info d-inline-flex align-items-center gap-2">
<i class="fas fa-route"></i>
<span>Guided Tour</span>
</button>
<div class="dropdown">
<button class="btn btn-sm btn-primary dropdown-toggle" id="flightControlsButton" type="button" data-bs-toggle="dropdown" aria-expanded="false">
<i class="fas fa-plane"></i> Flight Controls
</button>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="flightControlsButton">
<li><button class="dropdown-item" id="savePdfButton" type="button"><i class="fas fa-file-pdf me-2"></i>Als PDF speichern</button></li>
<li><button class="dropdown-item" id="exportJsonButton" type="button" onclick="exportConfiguration()"><i class="fas fa-download me-2"></i>Export</button></li>
<li><button class="dropdown-item" id="importJsonButton" type="button" onclick="triggerImport()"><i class="fas fa-upload me-2"></i>Import</button></li>
<li><button class="dropdown-item" type="button" onclick="loadExampleCockpit()"><i class="fas fa-lightbulb me-2"></i>Beispiel</button></li>
<li><button class="dropdown-item" type="button" onclick="resetCockpit()"><i class="fas fa-undo me-2"></i>Reset</button></li>
</ul>
</div>
<input type="file" id="importJsonInput" class="d-none" accept="application/json" />
</div>
</div>
<div class="row g-3 mb-4">
<div class="col-md-6">
<input type="text" class="form-control" id="cockpitTitleInput" placeholder="Bezeichnung des Projekts">
</div>
<div class="col-md-6">
<input type="text" class="form-control" id="userNameInput" placeholder="Pilot/in">
</div>
</div>
<div class="board-wrapper">
<div class="row row-cols-1 row-cols-md-5 g-2 board-grid flex-nowrap">
<div class="col">
<div class="phase-header">Thema eingrenzen</div>
<div class="phase-col" id="phase-1" role="region" aria-label="Thema eingrenzen" ondrop="drop(event)" ondragover="allowDrop(event)" ondragenter="dragEnter(event)" ondragleave="dragLeave(event)"></div>
</div>
<div class="col">
<div class="phase-header">Suchbegriffe sammeln</div>
<div class="phase-col" id="phase-2" role="region" aria-label="Suchbegriffe sammeln" ondrop="drop(event)" ondragover="allowDrop(event)" ondragenter="dragEnter(event)" ondragleave="dragLeave(event)"></div>
</div>
<div class="col">
<div class="phase-header">Literatur suchen</div>
<div class="phase-col" id="phase-3" role="region" aria-label="Literatur suchen" ondrop="drop(event)" ondragover="allowDrop(event)" ondragenter="dragEnter(event)" ondragleave="dragLeave(event)"></div>
</div>
<div class="col">
<div class="phase-header">Literatur lesen</div>
<div class="phase-col" id="phase-5" role="region" aria-label="Literatur lesen" ondrop="drop(event)" ondragover="allowDrop(event)" ondragenter="dragEnter(event)" ondragleave="dragLeave(event)"></div>
</div>
<div class="col">
<div class="phase-header">Text schreiben</div>
<div class="phase-col" id="phase-6" role="region" aria-label="Text schreiben" ondrop="drop(event)" ondragover="allowDrop(event)" ondragenter="dragEnter(event)" ondragleave="dragLeave(event)"></div>
</div>
</div>
</div>
<div class="row g-2">
<div class="col-12">
</div>
</div>
</div>
</div>
</div>
<div class="modal fade" id="orientationModal" role="dialog" tabindex="-1" aria-labelledby="orientationModalLabel" aria-modal="true">
<div class="modal-dialog modal-lg modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<div>
<p class="orientation-onboarding-tag mb-1"><i class="fas fa-compass"></i> Compass</p>
<h5 class="modal-title" id="orientationModalLabel">Compass – Schnelle Hilfe & Onboarding</h5>
</div>
<button type="button" class="btn-close" aria-label="Schließen" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
<div class="alert alert-info py-2 px-3 mb-3" role="status">
<div class="small mb-1 fw-semibold text-primary">Uni- und KI-Hinweis</div>
<ul class="small mb-0 ps-3">
<li><strong>Badges erkennen:</strong> Tools mit einem grünen „Uni“-Badge sind lizenzierte Angebote Ihrer Hochschule; der Zugriff ist i.d.R. nur im Campus-WLAN oder über VPN möglich. Ein lila „KI“-Badge kennzeichnet KI-gestützte Tools. Einige Tools tragen mehrere Badges.</li>
<li><strong>Reflektierter Umgang mit KI nutzen:</strong> Der Button „Reflektierter Umgang mit KI“ führt zu einem KI-Leitfaden und Reflexionsfragen. Der CRAAP-Test steht als eigener Button bereit, um Quellen systematisch zu prüfen.</li>
</ul>
</div>
<div class="row g-3">
<div class="col-12">
<h6 class="fw-bold">Was kann ich hier tun?</h6>
<ul class="orientation-tip-list ps-3">
<li><strong>Recherche-Board einrichten:</strong> Ziehen Sie Tools aus dem Hangar in die fünf Phasen des Rechercheprozesses oder zurück in den Hangar. Nutzen Sie die „Notiz hinzufügen“-Funktion, um Fragen, Quellen etc. zu dokumentieren. Halten Sie oben Ihre Projektbezeichnung fest.</li>
<li><strong>Tools finden und erweitern:</strong> Verwenden Sie das Suchfeld und den Kategorien-Filter im Hangar, um bestimmte Tools zu finden. Über „Datenbank ergänzen“ und „Eigenes Tool ergänzen“ lassen sich weitere Datenbanken aus einer Liste und weitere Tools in den Hangar aufnehmen.</li>
<li><strong>Löschen & wiederherstellen:</strong> Tools und Notizen löschen Sie über das „x“ an der jeweiligen Karte. Gelöschte Einträge erscheinen anschließend im Bereich „Gelöschte Tools & Notizen“ im Hangar und lassen sich dort wiederherstellen.</li>
<li><strong>Setups speichern & teilen:</strong> Über die Flight Controls (oben rechts) können Sie Ihr Cockpit als PDF exportieren, Export/Import von JSON-Dateien durchführen oder sich ein Beispiel-Layout anzeigen lassen. Die Option Reset stellt das Board in den Ausgangszustand zurück.</li>
</ul>
</div>
</div>
<div class="alert alert-info mt-3 small" role="note">
<strong>Hinweis zur Toolauswahl:</strong> Das Feld „Literaturrecherche mit KI“ verändert sich schnell; die Angaben entsprechen dem Stand von Februar 2026.
</div>
<div class="alert alert-secondary d-flex align-items-start gap-3 mt-3" role="status">
<i class="fas fa-envelope-open-text text-primary mt-1"></i>
<div class="small">
<div class="fw-semibold">Kontakt</div>
<div>Bei Fragen oder für Schulungen wenden Sie sich an das Team Fachreferat Wirtschaft der ZHB Luzern:</div>
<div class="mb-1">E-Mail: <a href="mailto:wirtschaft@zhbluzern.ch">wirtschaft@zhbluzern.ch</a></div>
<ul class="mb-1 ps-3">
<li>Stefan Eicher Engel</li>
<li>Sandra Müller</li>
</ul>
<div>Beratung & Kurse: <a class="link-primary" href="https://www.zhbluzern.ch/recherchieren/fachgebiete/buchen-sie-uns-rechercheberatung" target="_blank" rel="noreferrer noopener">Online-Buchung über das Anfrageformular</a></div>
</div>
</div>
</div>
<div class="modal-footer orientation-modal-footer">
<span class="small text-muted">ESC schließt das Fenster.</span>
<div class="btn-group" role="group" aria-label="Modalaktionen">
<button type="button" class="btn btn-primary" data-bs-dismiss="modal">Schließen</button>
</div>
</div>
</div>
</div>
</div>
<div class="modal fade" id="textNoteModal" tabindex="-1" role="dialog" aria-modal="true" aria-labelledby="textNoteModalTitle">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="textNoteModalTitle"><i class="fas fa-note-sticky me-2"></i>Notiz hinzufügen</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
<input type="text" id="noteTitle" class="form-control mb-2" placeholder="Titel (optional)" aria-label="Titel der Notiz">
<textarea id="noteContent" class="form-control" rows="4" placeholder="Ihre Notiz" aria-label="Inhalt der Notiz"></textarea>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" onclick="addTextBlock()">Speichern</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="customToolModal" tabindex="-1" role="dialog" aria-modal="true" aria-labelledby="customToolModalTitle">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="customToolModalTitle">Eigenes Tool ergänzen</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
<input type="text" id="customToolName" class="form-control mb-2" placeholder="Name (z.B. Experten-Interview)" aria-label="Name des Tools">
<input type="text" id="customToolInfo" class="form-control mb-2" placeholder="Beschreibung für Mouseover" aria-label="Beschreibung des Tools">
<input type="text" id="customToolUrl" class="form-control mb-2" placeholder="URL (optional)" aria-label="URL des Tools">
<div class="mb-2">
<label for="customToolCategory" class="form-label">Bereich (Mehrfachauswahl möglich)</label>
<select id="customToolCategory" class="form-select" multiple size="6"></select>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="customToolIsAi">
<label class="form-check-label" for="customToolIsAi">
KI-Tool
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="customToolIsLib">
<label class="form-check-label" for="customToolIsLib">
Uni
</label>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" id="customToolSubmitBtn" onclick="addCustomTool()">Hinzufügen</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="licensedDbModal" tabindex="-1" role="dialog" aria-modal="true" aria-labelledby="licensedDbModalLabel" aria-describedby="licensedDbDescription">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="licensedDbModalLabel"><i class="fas fa-database me-2"></i>Datenbank ergänzen</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
<div class="row g-3">
<div class="col-md-5">
<label for="licensedDbSelect" class="form-label">Datenbank auswählen</label>
<select id="licensedDbSelect" class="form-select" size="10"></select>
</div>
<div class="col-md-7">
<div class="border rounded p-3 h-100 bg-light" id="licensedDbDetails">
<h6 class="fw-bold mb-2" id="licensedDbTitle">Datenbank wählen</h6>
<p class="mb-2 small text-muted" id="licensedDbDescription">Wählen Sie links eine Datenbank aus, um Details zu sehen.</p>
<div class="small" id="licensedDbBadges"></div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" onclick="addLicensedDatabase()">Zum Hangar hinzufügen</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="kiSourcesModal" tabindex="-1" role="dialog" aria-modal="true" aria-labelledby="kiSourcesModalLabel" aria-describedby="kiSourcesModalDesc">
<div class="modal-dialog modal-lg">
<div class="modal-content border border-warning shadow-lg">
<div class="modal-header bg-warning-subtle">
<h5 class="modal-title" id="kiSourcesModalLabel">
<i class="fas fa-shield-alt text-warning me-2"></i>
Reflektierter Umgang mit KI
</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p class="small text-muted mb-3" id="kiSourcesModalDesc"></p>
<ul class="nav nav-pills" id="kiSourcesTab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="ki-guide-tab" data-bs-toggle="pill" data-bs-target="#ki-guide" type="button" role="tab" aria-controls="ki-guide" aria-selected="true">
<i class="fas fa-graduation-cap me-1"></i> KI-Guide
</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="ki-reflexion-fragen-tab" data-bs-toggle="pill" data-bs-target="#ki-reflexion-fragen" type="button" role="tab" aria-controls="ki-reflexion-fragen" aria-selected="false">
<i class="fas fa-comments me-1"></i> KI-Reflexion – Fragen
</button>
</li>
</ul>
<div class="tab-content mt-3">
<div class="tab-pane fade show active" id="ki-guide" role="tabpanel" aria-labelledby="ki-guide-tab">
<div class="ki-callout mb-3">
<div class="d-flex align-items-center gap-2 mb-2">
<i class="fas fa-graduation-cap text-warning"></i>
<span class="fw-semibold">KI-Guide</span>
</div>
<p class="mb-3 small text-muted">Dieser Leitfaden zeigt auf, wie KI im Rahmen der Literaturrecherche im Studium genutzt werden darf und welche Anforderungen an die Offenlegung ihres Einsatzes bestehen.</p>
<h6 class="fw-semibold text-warning mb-2">1. Der Vor-Check: Kenne die Regeln</h6>
<p class="small text-muted">Bevor Sie KI-Tools für die Literaturrecherche verwenden, klären Sie die Rahmenbedingungen. Es gibt keine "Eine Regel für alle".</p>
<ul class="small text-muted mb-3">
<li><strong>Fakultät / Institut prüfen:</strong> Gibt es offizielle Merkblätter, KI-Leitlinien oder Richtlinien auf der Website Ihrer Fakultät?</li>
<li><strong>Betreuung fragen:</strong> Wenn nichts Schriftliches vorliegt, fragen Sie direkt Ihre Betreuungsperson: <em>"Darf ich KI-Tools nutzen, und wenn ja, in welchem Umfang?"</em></li>
</ul>
<h6 class="fw-semibold text-warning mb-2">2. Der Kompass: Drei Prinzipien guter wissenschaftlicher Praxis</h6>
<p class="small text-muted">Ihr KI-Einsatz steht und fällt mit diesen drei Säulen. Wenn Sie die Prinzipien beachten, sind Sie auf der sicheren Seite.</p>
<div class="mb-3">
<div class="fw-semibold small">Prinzip 1: Verantwortung ("Human in the Loop")</div>
<p class="small text-muted mb-2">Sie sind der Regisseur, die KI-Tools sind nur Ihre Assistenten. Übernehmen Sie nie blind KI-generierte Inhalte und Quellen!</p>
<ul class="small text-muted mb-2">
<li><strong>Ihre Aufgabe:</strong> KI-Outputs hinterfragen, prüfen und überarbeiten.</li>
<li><strong>Das Ziel:</strong> Sie müssen jede Zeile Ihrer Arbeit erklären und verteidigen können.</li>
</ul>
<div class="small text-muted mb-2">Hilfen:</div>
<ul class="small text-muted mb-0">
<li>KI-Reflexion – Fragen</li>
<li>CRAAP-Test</li>
</ul>
</div>
<div class="mb-3">
<div class="fw-semibold small">Prinzip 2: Eigenleistung</div>
<p class="small text-muted mb-2">Wissenschaftliches Arbeiten ist der Beweis Ihrer eigenen Denkfähigkeit. Strukturieren, Argumentieren und Schlussfolgern ist Ihr Job.</p>
<ul class="small text-muted mb-2">
<li><strong>Die Grenze:</strong> Die KI kann Impulse geben, aber die intellektuelle Schöpfung (die "rote Linie") muss von Ihnen stammen.</li>
<li><strong>Achtung:</strong> Am Ende einer wissenschaftlichen Arbeit steht eine Selbständigkeitserklärung, mittlerweile an vielen Unis inkl. Abschnitt zu KI-Nutzung.</li>
</ul>
</div>
<div class="mb-3">
<div class="fw-semibold small">Prinzip 3: Transparenz</div>
<p class="small text-muted mb-2">Verstecken Sie den KI-Einsatz nicht. Legen Sie offen, wie Ergebnisse entstanden sind.</p>
<ul class="small text-muted mb-2">
<li><strong>Leitlinie:</strong> "So transparent wie nötig, so einfach wie möglich."</li>
<li><strong>Die Dokumentation:</strong> Führen Sie während des Schreibens ein einfaches Protokoll ("Prompt-Tagebuch"). Das schafft Sicherheit, falls später Fragen aufkommen.</li>
</ul>
</div>
<h6 class="fw-semibold text-warning mb-2">3. Praxis-Tipp: Das KI-Protokoll</h6>
<p class="small text-muted">Dokumentieren Sie Ihre KI-Nutzung laufend (z. B. in einer einfachen Excel- oder Word-Tabelle). Das spart Ihnen am Ende Stress.</p>
<h6 class="fw-semibold text-warning mb-2">4. Anwendungsbeispiel: Wie konkret KI-Nutzung offenlegen?</h6>
<p class="small text-muted">
Informieren Sie sich hierzu im Merkblatt des Center für Human Resource Management an der Uni Luzern:
<a class="link-primary" href="https://www.unilu.ch/fileadmin/fakultaeten/wf/institute/hrm/dok/Studium/DE_Merkblatt_fuer_den_Umgang_mit_Kuenstlicher_Intelligenz__KI__.pdf" target="_blank" rel="noreferrer noopener">Merkblatt zum Umgang mit KI</a>.
</p>
<h6 class="fw-semibold text-warning mb-2">5. Quintessenz</h6>
<p class="small text-muted mb-0">Wissenschaftliches Arbeiten heißt nicht, alles allein zu tun. Es bedeutet, Verantwortung für das Ergebnis zu übernehmen und alle Hilfen – egal ob Literatur, Betreuer/innen, Kommiliton/innen oder KI-Tools – reflektiert und transparent zu nutzen.</p>
</div>
</div>
<div class="tab-pane fade" id="ki-reflexion-fragen" role="tabpanel" aria-labelledby="ki-reflexion-fragen-tab">
<div class="ki-callout mb-3">
<div class="d-flex align-items-center gap-2 mb-2">
<i class="fas fa-comments text-warning"></i>
<span class="fw-semibold">Wie kann ich KI reflektiert einsetzen? – Fragen, die Sie sich immer wieder stellen können</span>
</div>
<p class="mb-3 small text-muted">
KI-Tools können wertvolle Assistenten bei der Literaturrecherche sein – doch die Regie müssen Sie übernehmen. Sie sind verantwortlich für die Inhalte und Quellen Ihrer Arbeit. Deshalb gilt: Verwenden Sie nur Inhalte und Quellen, die Sie selbst nachvollziehen und erklären können. Dazu können Sie sich immer wieder folgende Fragen stellen:
</p>
<ol class="small text-muted mb-0">
<li class="mb-2">
<strong>Problem – Was genau möchte ich erreichen? Was ist die spezifische Teilaufgabe?</strong>
</li>
<li class="mb-2">
<strong>Rolle – Welche Rolle soll die KI übernehmen?</strong>
<div class="mt-1">Zwei typische Einsatzszenarien:</div>
<ul class="mt-1">
<li><strong>Brainstorming-Partnerin:</strong> Die KI kann Inspiration und Impulse für die Literaturrecherche bieten – zu Beginn und während des Prozesses.</li>
<li><strong>Feedback-Partnerin:</strong> Die KI lässt sich als Feedback-Schleife in den eigenen Arbeitsprozess integrieren.</li>
</ul>
</li>
<li class="mb-2">
<strong>Datenbasis des Tools – Was wird durchsucht?</strong>
<div class="mt-1">Nicht jedes Tool eignet sich für jede Fragestellung – prüfen Sie, ob die Datenbasis passt:</div>
<ul class="mt-1">
<li>Deckt das Tool mein Fachgebiet ab?</li>
<li>Welche Art von Literatur kann gefunden werden?</li>
<li>Welche Publikationsformen (Journalartikel, Preprints oder Bücher)?</li>
<li>Open Access oder lizenzierte Inhalte?</li>
<li>Welche Sprachen?</li>
<li>Wie aktuell sind die Quellen?</li>
</ul>
</li>
<li class="mb-2">
<strong>Reflexion – Wie kann ich prüfen, ob der generierte Output zu meiner Problemstellung passt?</strong>
<div class="mt-1">Die kritische Einschätzung erfordert Fachkompetenz. Prüfen Sie den Output anhand folgender Kriterien:</div>
<ul class="mt-1">
<li>Passt der Inhalt zu meiner Fragestellung oder führt er auf ein Nebengleis?</li>
<li>Ist die Quelle relevant und zuverlässig? (z. B. mit dem CRAAP-Test prüfen)</li>
<li>Stammen die Autor/innen aus meinem Fachgebiet?</li>
<li>Welche Literatur finde ich mit klassischen Suchinstrumenten?</li>
</ul>
</li>
<li class="mb-2">
<strong>Zugang und Kosten – Ist das Tool auch in der kostenlosen Version nützlich? Gibt es lizenzierte Alternativen über die Bibliothek?</strong>
</li>
<li>
<strong>Datenschutz und Urheberrecht – Was passiert mit den eingegebenen Daten?</strong>
<ul class="mt-1">
<li>Wenn nicht ausgeschlossen werden kann, dass die eingegebenen Daten weiterverarbeitet werden (z. B. zu Trainingszwecken), gilt: Geben Sie keine sensiblen personenbezogenen Informationen über sich oder andere Personen ein.</li>
<li>Laden Sie keine Inhalte hoch, an denen Sie keine Rechte besitzen.</li>
</ul>
</li>
</ol>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Schließen</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="craapModal" tabindex="-1" role="dialog" aria-modal="true" aria-labelledby="craapModalLabel" aria-describedby="craapModalDesc">
<div class="modal-dialog modal-lg">
<div class="modal-content border border-warning shadow-lg">
<div class="modal-header bg-warning-subtle">
<h5 class="modal-title" id="craapModalLabel">
<i class="fas fa-clipboard-check text-warning me-2"></i>
CRAAP-Test
</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="ki-callout" id="craapModalDesc">
<div class="d-flex align-items-center gap-2 mb-2">
<i class="fas fa-list-check text-warning"></i>
<span class="fw-semibold">Soll ich die Quelle zitieren oder nicht? – CRAAP-Test (Checkliste)</span>
</div>
<p class="mb-2 small text-muted">Bewerten Sie Quellen systematisch, bevor Sie sie übernehmen.</p>
<ul class="list-group ki-checklist">
<li class="list-group-item">
<div class="d-flex align-items-start gap-2">
<i class="fas fa-clock text-warning mt-1"></i>
<div><div class="fw-semibold">Currency</div><div class="text-muted small">Wie aktuell sind Daten und Publikation?</div></div>
</div>
</li>
<li class="list-group-item">
<div class="d-flex align-items-start gap-2">
<i class="fas fa-bullseye text-warning mt-1"></i>
<div><div class="fw-semibold">Relevance</div><div class="text-muted small">Passt der Inhalt genau zu Ihrer Fragestellung?</div></div>
</div>
</li>
<li class="list-group-item">
<div class="d-flex align-items-start gap-2">
<i class="fas fa-user-tie text-warning mt-1"></i>
<div><div class="fw-semibold">Authority</div><div class="text-muted small">Wer steht hinter der Quelle? Kommen die Autor/innen aus der Wissenschaft? Sind sie Expert/innen im Thema?</div></div>
</div>
</li>
<li class="list-group-item">
<div class="d-flex align-items-start gap-2">
<i class="fas fa-check-double text-warning mt-1"></i>
<div><div class="fw-semibold">Accuracy</div><div class="text-muted small">Sind Aussagen belegt, konsistent und nachvollziehbar?</div></div>
</div>
</li>
<li class="list-group-item">
<div class="d-flex align-items-start gap-2">
<i class="fas fa-bullhorn text-warning mt-1"></i>
<div><div class="fw-semibold">Purpose</div><div class="text-muted small">Warum existiert die Quelle? Information, Verkauf, Meinung?</div></div>
</div>
</li>
</ul>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Schließen</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="privacyModal" tabindex="-1" role="dialog" aria-modal="true" aria-labelledby="privacyModalLabel">
<div class="modal-dialog modal-lg modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header">
<div>
<h5 class="modal-title" id="privacyModalLabel">Datenschutzerklärung</h5>
<div class="text-muted small">Recherche-Cockpit | thinkik.github.io/recherche/</div>
</div>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Schließen"></button>
</div>
<div class="modal-body">
<div class="small text-muted mb-3">Stand: 09.01.2026</div>
<p>Diese Datenschutzerklärung informiert darüber, welche Daten beim Besuch und bei der Nutzung des Recherche-Cockpits verarbeitet werden, wo diese Daten anfallen (Browser / Hosting / Drittanbieter) und wie Sie Daten wieder löschen können.</p>
<h6 class="fw-bold mt-4">1) Verantwortliche Stelle</h6>
<p class="mb-2">Zentral- und Hochschulbibliothek Luzern (ZHB Luzern)<br>
Sempacherstrasse 10, Postfach 4469, 6002 Luzern (CH)<br>
Kontakt (fachlich): <a href="mailto:wirtschaft@zhbluzern.ch">wirtschaft@zhbluzern.ch</a> (Team Wirtschaft; siehe Kontaktangabe im Cockpit).</p>
<p class="mb-0"><strong>Hinweis zum Hosting:</strong> Diese Seite wird technisch über GitHub Pages bereitgestellt. GitHub verarbeitet dabei gewisse technische Zugriffsdaten (siehe Ziff. 3).</p>
<h6 class="fw-bold mt-4">2) Grundprinzip: Keine serverseitige Speicherung Ihrer Cockpit-Inhalte</h6>
<p>Das Recherche-Cockpit ist als client-seitiges Tool konzipiert:</p>
<ul>
<li>Notizen, Board-Setup, gelöschte Elemente und selbst hinzugefügte Tools werden lokal in Ihrem Browser gespeichert (Local Storage) – nicht auf einem Server der ZHB.</li>
<li>Es gibt kein Login, keine Nutzerkonten und keine Eingabeformulare, die Inhalte an einen ZHB-Server senden.</li>
</ul>
<h6 class="fw-bold mt-4">3) Hosting & Zugriffsdaten (GitHub Pages)</h6>
<p>Beim Aufruf der Website werden durch den Hosting-Anbieter GitHub Pages aus Sicherheitsgründen Zugriffsdaten verarbeitet. Dazu können insbesondere gehören:</p>
<ul>
<li>IP-Adresse, Datum/Uhrzeit, aufgerufene Seite, technische Informationen (z. B. Browser/OS), Referrer.</li>
</ul>
<p>GitHub dokumentiert, dass bei GitHub Pages die IP-Adresse protokolliert und zu Sicherheitszwecken gespeichert wird. Weitere Informationen: <a href="https://docs.github.com/en/site-policy/privacy-policies/github-privacy-statement" target="_blank" rel="noreferrer noopener">GitHub Privacy Statement</a>.</p>
<p class="mb-0"><strong>Hinweis zum Drittlandbezug:</strong> GitHub, Inc. ist ein Anbieter mit Bezug zu den USA (Drittstaat aus CH/EU-Sicht). Eine Verarbeitung bzw. ein Zugriff aus Drittländern kann daher nicht ausgeschlossen werden. GitHub verweist für internationale Datentransfers auf Standardvertragsklauseln und ergänzende Schutzmaßnahmen; Details finden Sie im <a href="https://docs.github.com/en/site-policy/privacy-policies/github-general-privacy-statement#international-data-transfers" target="_blank" rel="noreferrer noopener">Abschnitt zu internationalen Datenübermittlungen</a> sowie im <a href="https://docs.github.com/en/site-policy/privacy-policies/github-subprocessors" target="_blank" rel="noreferrer noopener">Subprocessor-Verzeichnis</a>.</p>
<h6 class="fw-bold mt-4">4) Lokale Bibliotheken (Self-Hosting im Repository)</h6>
<p>Die Bibliotheken Bootstrap, Font Awesome und Intro.js werden direkt lokal aus diesem Repository geladen (Self-Hosting) und nicht über externe CDNs eingebunden.</p>
<p>Aktuell werden lokal eingebunden:</p>
<ul>
<li>Bootstrap über <code>css/bootstrap.min.css</code> und <code>js/bootstrap.bundle.min.js</code></li>
<li>Font Awesome über <code>css/all.min.css</code> (inkl. lokaler <code>webfonts/</code>)</li>
<li>Intro.js über <code>css/introjs.min.css</code> und <code>js/intro.min.js</code></li>
</ul>
<p class="mb-0">Dadurch entfallen beim Laden dieser Abhängigkeiten externe Requests an jsDelivr, cdnjs oder unpkg.</p>
<h6 class="fw-bold mt-4">5) Lokale Speicherung im Browser (Local Storage) – transparent aufgeschlüsselt</h6>
<p>Das Tool speichert Zustände ausschließlich in Ihrem Browser (Local Storage). Dabei werden insbesondere folgende Schlüssel genutzt:</p>
<ul>
<li><strong>cockpitState_v3</strong>: Speichert das Cockpit-Board (welche Tools in welcher Phase liegen, Notizen, Tool-Metadaten wie Name/Beschreibung/URL/Kategorien, Badges wie „KI“/„Uni“/„VWL“, Status-Attribute wie „custom tool“ etc.).</li>
<li><strong>cockpitDeleted_v1</strong>: Speichert gelöschte Tools/Notizen, damit diese im Bereich „Gelöschte Tools & Notizen“ wiederhergestellt werden können.</li>
<li><strong>customTools</strong>: Speichert von Ihnen selbst hinzugefügte Tools (Name, URL, Beschreibung, Kategorien, Badges).</li>
<li><strong>tourCompleted</strong>: Speichert, ob die Guided Tour bereits abgeschlossen/übersprungen wurde (damit sie nicht bei jedem Start automatisch läuft).</li>
</ul>
<p><strong>Wie löschen Sie diese Daten?</strong></p>
<ul>
<li>In der Anwendung: „Reset“ setzt das Board zurück (je nach Implementierung inkl. lokaler Speicherstände).</li>
<li>Im Browser: Löschen Sie Website-Daten/Local-Storage für thinkik.github.io (Browser-Einstellungen → Datenschutz → Website-Daten löschen).</li>
</ul>
<h6 class="fw-bold mt-4">6) Export/Import & PDF</h6>
<ul>
<li><strong>Export (JSON):</strong> Beim Export wird eine Datei auf Ihrem Gerät erstellt. Es erfolgt keine automatische Übertragung an Dritte.</li>
<li><strong>Import (JSON):</strong> Beim Import wird eine von Ihnen gewählte Datei lokal eingelesen; anschließend wird der Zustand lokal gespeichert.</li>
<li><strong>Als PDF speichern:</strong> Nutzt die Druck-/PDF-Funktion Ihres Browsers (lokaler Prozess).</li>
</ul>
<h6 class="fw-bold mt-4">7) Externe Links & verlinkte Tools (z. B. KI-Tools, Datenbanken)</h6>
<p>Das Cockpit enthält Links zu externen Angeboten (Recherche-Tools, Datenbanken, KI-Dienste, Beratungsformulare). Wenn Sie diese öffnen, gilt:</p>
<ul>
<li>Ihr Browser stellt eine direkte Verbindung zum jeweiligen Anbieter her; dabei werden technisch bedingt u. a. IP-Adresse und Browser-Informationen übertragen.</li>
<li>Welche Daten dort verarbeitet werden, regelt die Datenschutzerklärung des jeweiligen Anbieters.</li>
</ul>
<p class="mb-0"><strong>Wichtiger Hinweis bei KI-Tools:</strong> Geben Sie keine sensiblen personenbezogenen Daten oder urheberrechtlich geschützten Volltexte ein, wenn Sie nicht sicher sind, wie der Anbieter diese verarbeitet.</p>
<h6 class="fw-bold mt-4" id="externalServicesNotice">8) Wichtiger Hinweis zu externen Diensten (beim Klick auf Tool-Links)</h6>
<ul>
<li><strong>Datenübermittlung an Drittdienste beim Klick:</strong> Sobald Sie einen externen Tool-Link öffnen, gelten die Datenschutz- und Nutzungsbedingungen des jeweiligen Dienstes. Dabei können technische Nutzungsdaten und ggf. Inhalteingaben an Drittdienste übermittelt werden.</li>
<li><strong>Eigenverantwortung der Nutzenden:</strong> Die Nutzung externer Dienste erfolgt in eigener Verantwortung. Prüfen Sie vor der Nutzung die jeweils aktuellen Richtlinien, Speicherorte und Zugriffsrechte des Anbieters.</li>
<li><strong>Verbot kritischer Eingaben in KI-Diensten:</strong> Geben Sie keine sensiblen personenbezogenen Daten, vertraulichen Informationen oder urheberrechtlich problematischen Inhalte in KI-Dienste ein. Solche Eingaben sind zu unterlassen und können zu rechtlichen Konsequenzen (inkl. Abmahnungen) führen.</li>
</ul>