-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathgit-github-schulung.html
More file actions
1153 lines (1001 loc) · 70.1 KB
/
Copy pathgit-github-schulung.html
File metadata and controls
1153 lines (1001 loc) · 70.1 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>Git & GitHub für alle – ganz ohne Vorkenntnisse</title>
<!-- Marken-Schrift der Agents-Plattform (mit System-Fallback → funktioniert auch offline) -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<style>
:root{
--wd:#f09d16; --wd-bg:#fef7e3; /* Arbeitsverzeichnis */
--stage:#5730cc; --stage-bg:#eeeaff; /* Staging */
--repo:#009869; --repo-bg:#e5fce9; /* Repository */
--hub:#3375dd; --hub-bg:#eaf1fc; /* GitHub / Remote */
--accent:#1b595d; --accent-bg:#e8efee;
--warn:#ef521f; --warn-bg:#fef2ed;
--ink:#010920; --muted:#60687a;
--line:#d8dde2; --paper:#ffffff; --bg:#f3f5f7;
--radius:16px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
margin:0; background:var(--bg); color:var(--ink);
font-family:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
font-size:19px; line-height:1.7; scroll-padding-top:84px;
}
h1,h2,h3,.brand{letter-spacing:-0.015em}
h1,h2{font-weight:800}
/* ---------- Kopf / Navigation ---------- */
.topbar{
position:sticky; top:0; z-index:50; background:rgba(255,255,255,.92);
backdrop-filter:blur(8px); border-bottom:1px solid var(--line);
}
.topbar .inner{display:flex; align-items:center; gap:18px; max-width:1100px; margin:0 auto; padding:10px 20px}
.brand{font-weight:800; font-size:18px; white-space:nowrap; color:var(--accent)}
.brand small{display:block; font-weight:500; font-size:12px; color:var(--muted)}
.toc{display:flex; gap:6px; overflow-x:auto; scrollbar-width:thin}
.toc a{
flex:0 0 auto; text-decoration:none; color:var(--muted); font-size:13.5px; font-weight:600;
padding:6px 12px; border-radius:999px; border:1px solid var(--line); background:#fff; white-space:nowrap;
}
.toc a:hover{color:var(--accent); border-color:var(--accent)}
/* ---------- Grundlayout ---------- */
main{max-width:1100px; margin:0 auto; padding:0 20px 80px}
.chapter{
background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
padding:38px 42px; margin:30px 0; box-shadow:0 1px 3px rgba(20,20,50,.04);
}
.chapter-num{
display:inline-block; font-size:13px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
color:var(--accent); background:var(--accent-bg); padding:4px 12px; border-radius:999px; margin-bottom:14px;
}
h1{font-size:42px; line-height:1.15; margin:.2em 0 .3em}
h2{font-size:30px; line-height:1.2; margin:0 0 .4em}
h3{font-size:21px; margin:1.4em 0 .3em}
p{margin:.7em 0}
.lead{font-size:21px; color:var(--ink)}
.muted{color:var(--muted)}
code{background:#eef0f4; padding:2px 7px; border-radius:6px; font-size:.86em;
font-family:"SF Mono",SFMono-Regular,Consolas,"Liberation Mono",Menlo,monospace}
strong{font-weight:700}
ul,ol{margin:.6em 0; padding-left:1.3em}
li{margin:.35em 0}
/* ---------- Diagramme ---------- */
figure.diagram{margin:26px 0; padding:22px; background:#f5f7f8; border:1px solid var(--line); border-radius:14px}
figure.diagram svg{width:100%; height:auto; display:block}
figure.diagram figcaption{text-align:center; color:var(--muted); font-size:14.5px; margin-top:12px}
/* ---------- Callouts ---------- */
.callout{border-radius:14px; padding:16px 20px 16px 18px; margin:20px 0; border-left:6px solid var(--accent); background:var(--accent-bg)}
.callout .tag{display:block; font-weight:800; font-size:14px; letter-spacing:.02em; margin-bottom:4px}
.callout p{margin:.3em 0}
.analogy{border-color:var(--hub); background:var(--hub-bg)}
.analogy .tag{color:var(--hub)}
.merksatz{border-color:var(--repo); background:var(--repo-bg)}
.merksatz .tag{color:#076a4a}
.miss{border-color:var(--warn); background:var(--warn-bg)}
.miss .tag{color:var(--warn)}
.mitmach{border-color:var(--accent); background:var(--accent-bg)}
.mitmach .tag{color:var(--accent)}
details.trainer{margin:18px 0 4px; border:1px dashed #c0c6ce; border-radius:12px; background:#f6f8f8}
details.trainer summary{cursor:pointer; font-weight:700; color:var(--muted); padding:12px 16px; list-style:none}
details.trainer summary::-webkit-details-marker{display:none}
details.trainer summary::before{content:"▸ "; color:var(--accent)}
details.trainer[open] summary::before{content:"▾ "}
details.trainer .body{padding:0 18px 16px; color:var(--muted); font-size:16.5px}
/* ---------- Schritt-Liste (Mitmachen) ---------- */
ol.steps{list-style:none; counter-reset:s; padding:0; margin:24px 0}
ol.steps>li{counter-increment:s; position:relative; padding:14px 14px 14px 64px; margin:12px 0;
background:#f5f7f8; border:1px solid var(--line); border-radius:12px}
ol.steps>li::before{content:counter(s); position:absolute; left:16px; top:14px; width:34px; height:34px;
background:var(--accent); color:#fff; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:800}
ol.steps b{color:var(--accent)}
/* ---------- Tabellen ---------- */
table{width:100%; border-collapse:collapse; margin:20px 0; font-size:16.5px}
th,td{text-align:left; padding:11px 14px; border-bottom:1px solid var(--line); vertical-align:top}
th{background:#eef0f4; font-size:14px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted)}
td code{white-space:nowrap}
/* ---------- Terminal ---------- */
.terminal{background:#010920; border-radius:12px; overflow:hidden; margin:22px 0; box-shadow:0 6px 20px rgba(20,20,50,.18)}
.terminal .bar{background:#0e1a30; padding:9px 14px; display:flex; gap:7px; align-items:center}
.terminal .bar i{width:12px; height:12px; border-radius:50%; display:inline-block}
.terminal .bar i:nth-child(1){background:#ff5f56}
.terminal .bar i:nth-child(2){background:#ffbd2e}
.terminal .bar i:nth-child(3){background:#bee600}
.terminal .bar span{color:#7f8798; font-size:13px; margin-left:8px}
.terminal pre{margin:0; padding:18px 20px; color:#e6e8f0; font-size:15px; line-height:1.8; overflow-x:auto;
font-family:"SF Mono",SFMono-Regular,Consolas,"Liberation Mono",Menlo,monospace}
.terminal .p{color:#bee600} /* prompt */
.terminal .c{color:#60687a} /* kommentar */
.terminal .k{color:#7db2ee} /* befehl */
/* ---------- Glossar ---------- */
dl.glossar{margin:18px 0}
dl.glossar div{padding:14px 0; border-bottom:1px solid var(--line)}
dl.glossar dt{font-weight:800; font-size:18px; color:var(--accent)}
dl.glossar dd{margin:.2em 0 0; color:var(--ink)}
/* ---------- Quiz ---------- */
details.quiz{border:1px solid var(--line); border-radius:12px; margin:12px 0; background:#fff}
details.quiz summary{cursor:pointer; font-weight:700; padding:14px 18px; list-style:none}
details.quiz summary::-webkit-details-marker{display:none}
details.quiz summary::before{content:"❓ "}
details.quiz .a{padding:0 18px 16px; color:#076a4a; font-weight:600}
details.quiz .a::before{content:"✓ "}
/* ---------- Hero ---------- */
.hero{background:linear-gradient(135deg,#e5fce9 0%,#eef7f3 55%,#f4f9e2 100%); border:1px solid var(--line);
border-radius:24px; padding:50px 46px; margin:30px 0}
.hero .kicker{font-weight:800; color:var(--accent); letter-spacing:.08em; text-transform:uppercase; font-size:14px}
.hero p.lead{font-size:23px; max-width:42ch}
.pill-row{display:flex; flex-wrap:wrap; gap:10px; margin-top:22px}
.pill{background:#fff; border:1px solid var(--line); border-radius:999px; padding:8px 16px; font-size:15px; font-weight:600}
.legend{display:flex; flex-wrap:wrap; gap:14px; margin:22px 0}
.legend span{display:inline-flex; align-items:center; gap:8px; font-size:15px; font-weight:600}
.legend b{width:16px; height:16px; border-radius:5px; display:inline-block}
footer{max-width:1100px; margin:0 auto; padding:30px 20px 60px; color:var(--muted); font-size:15px; text-align:center}
/* ---------- Responsiv ---------- */
@media (max-width:680px){
body{font-size:17px}
.chapter{padding:26px 22px}
h1{font-size:32px} h2{font-size:24px}
.hero{padding:32px 24px}
.brand small{display:none}
}
/* ---------- Druck (Handout) ---------- */
@media print{
body{background:#fff; font-size:12pt}
.topbar,details.trainer,.hero .pill-row{display:none}
.chapter{box-shadow:none; border:1px solid #ccc; break-inside:avoid; page-break-inside:avoid}
details.quiz,details.trainer{break-inside:avoid}
}
</style>
</head>
<body>
<!-- ============ NAVIGATION ============ -->
<header class="topbar">
<div class="inner">
<div class="brand">Git & GitHub<small>Grundlagen für Einsteiger</small></div>
<nav class="toc" aria-label="Inhaltsverzeichnis">
<a href="#start">Start</a>
<a href="#kap1">1 · Problem</a>
<a href="#kap2">2 · Versionsverwaltung</a>
<a href="#exkurs">Geschichte</a>
<a href="#kap3">3 · Git ≠ GitHub</a>
<a href="#kap4">4 · Repository</a>
<a href="#kap5">5 · Commit</a>
<a href="#kap6">6 · Drei Bereiche</a>
<a href="#kap7">7 · Branches</a>
<a href="#kap8">8 · Merge</a>
<a href="#kap9">9 · Clone/Push/Pull</a>
<a href="#kap10">10 · Pull Request</a>
<a href="#kap11">11 · Kommandozeile</a>
<a href="#kap12">12 · Mitmachen ✋</a>
<a href="#quiz">Quiz</a>
<a href="#glossar">Glossar</a>
<a href="#spick">Spickzettel</a>
</nav>
</div>
</header>
<main>
<!-- ============ HERO ============ -->
<section id="start" class="hero">
<div style="display:flex; align-items:center; gap:12px; margin-bottom:20px">
<svg viewBox="0 0 188 48" height="26" role="img" aria-label="Seibert"><path fill="#010920" d="M12.135 39.451q-5.847 0-8.892-2.161Q.196 35.078 0 30.706h6.73q.198 1.77 1.671 2.702 1.474.934 4.078.934 2.064 0 3.194-.639t1.13-1.769-1.229-1.67q-1.228-.59-4.52-.982-3.487-.394-5.748-1.18-2.21-.786-3.34-2.161t-1.13-3.489q0-3.586 2.947-5.6 2.948-2.015 7.763-2.015 5.158 0 8.106 2.162 2.997 2.112 3.095 5.846h-6.534q-.148-1.326-1.474-2.112-1.277-.786-3.243-.786-1.915 0-3.046.639-1.08.637-1.08 1.719 0 1.08 1.277 1.621t4.372.934q3.636.393 5.847 1.13 2.26.687 3.39 2.063 1.179 1.376 1.179 3.636 0 3.585-2.997 5.699-2.997 2.064-8.303 2.063m27.12 0q-5.798 0-9.187-3.193-3.342-3.193-3.341-8.893 0-3.733 1.523-6.583a10.74 10.74 0 0 1 4.421-4.373q2.85-1.572 6.731-1.572 5.896 0 8.991 3.292 3.095 3.243 3.095 9.138v.54h-19.16v-2.014H46.33l-1.229.786q-.048-2.8-1.523-4.372-1.425-1.622-4.127-1.622-2.8 0-4.47 1.67-1.622 1.672-1.622 4.717v.442q0 3.047 1.621 4.668t4.57 1.621q2.111 0 3.488-.786 1.425-.835 1.867-2.309h6.436a9.14 9.14 0 0 1-1.818 4.52q-1.474 1.965-4.127 3.144-2.604 1.18-6.141 1.18Zm16.262-23.975h6.632v23.337h-6.632zm3.34-3.292q-1.817 0-3.144-1.277-1.277-1.277-1.277-3.095 0-1.77 1.277-3.046 1.327-1.327 3.145-1.327c1.818 0 2.227.426 3.046 1.277q1.277 1.278 1.277 3.096 0 1.866-1.277 3.144-1.229 1.228-3.046 1.228Zm8.697-5.65h6.632v17.589l-.737 2.997.737 2.997v8.696h-6.632zm6.829 16.803q.097-2.31 1.179-4.225a8.6 8.6 0 0 1 2.948-3.096q1.916-1.179 4.421-1.179 4.815 0 7.517 3.292 2.752 3.292 2.752 9.04 0 3.734-1.376 6.534-1.326 2.8-3.734 4.274t-5.453 1.474q-3.587 0-5.847-2.112-2.21-2.162-2.407-6.387h-1.867v-7.615zm5.994 10.366q2.702 0 4.372-1.818t1.67-4.716q0-2.9-1.719-4.717-1.671-1.818-4.47-1.817-2.753 0-4.52 1.817-1.77 1.77-1.77 4.668t1.818 4.765q1.868 1.818 4.619 1.818m28.299 5.748q-5.797 0-9.139-3.193-3.34-3.193-3.34-8.893 0-3.733 1.522-6.583a10.73 10.73 0 0 1 4.422-4.373q2.899-1.572 6.731-1.572 5.895 0 8.942 3.292 3.095 3.243 3.095 9.138v.54h-19.161v-2.014h14.051l-1.228.786q-.049-2.8-1.523-4.372-1.425-1.622-4.078-1.622-2.8 0-4.52 1.67-1.67 1.672-1.67 4.717v.442q0 3.047 1.621 4.668 1.622 1.62 4.569 1.621 2.113 0 3.489-.786 1.424-.835 1.866-2.309h6.486a9.14 9.14 0 0 1-1.818 4.52q-1.474 2.014-4.127 3.193-2.653 1.13-6.19 1.13m16.655-23.975h6.632v23.337h-6.632zm5.551 8.745h1.179q.148-4.618 2.555-6.682t6.731-2.063h16.409v6.141H138.89q-3.587 0-5.256 1.474-1.671 1.425-1.671 4.52zm22.895 15.23q-4.373 0-6.829-2.456-2.457-2.505-2.457-7.124V8.352h6.633v20.733q0 2.113.884 3.242.885 1.13 2.801 1.13a5.5 5.5 0 0 0 3.046-.884l2.751 4.176q-1.327 1.179-3.046 1.965-1.72.737-3.783.737M173.865 0h2.407l-12.626 48h-2.408zm11.083 0h2.407l-12.626 48h-2.408z"/></svg>
<span style="color:var(--muted); font-size:14px; font-weight:600; border-left:1px solid var(--line); padding-left:12px">Agents in Teams</span>
</div>
<div class="kicker">Schulung · für absolute Einsteiger</div>
<h1>Git & GitHub – ganz ohne Vorkenntnisse</h1>
<p class="lead">Du bist kein Programmierer? Perfekt. In dieser Session lernst du in Ruhe, was diese
beiden Werkzeuge eigentlich sind – mit einfachen Bildern, Alltags­vergleichen und einer ersten
eigenen Übung auf GitHub.</p>
<div class="pill-row">
<span class="pill">🐢 Langsam & in Alltagssprache</span>
<span class="pill">🖼️ Mit einfachen Zeichnungen</span>
<span class="pill">🌐 Schwerpunkt: GitHub im Browser</span>
<span class="pill">✋ Mit Mitmach-Teil zum Schluss</span>
</div>
<div class="legend" style="margin-top:30px">
<span class="muted" style="width:100%; font-weight:700; color:var(--ink)">Diese Farben begleiten dich durch die ganze Schulung:</span>
<span><b style="background:var(--wd)"></b> Arbeitsverzeichnis (dein Schreibtisch)</span>
<span><b style="background:var(--stage)"></b> Staging (der Sammelkorb)</span>
<span><b style="background:var(--repo)"></b> Repository (das Fotoalbum)</span>
<span><b style="background:var(--hub)"></b> GitHub (das Internet)</span>
</div>
<details class="trainer">
<summary>🧑🏫 Trainer-Tipp · So nutzt du diese Seite</summary>
<div class="body">
<p>Scrolle in der Session Kapitel für Kapitel durch – jedes Kapitel ist eine kleine „Folie". Oben
kannst du mit der Leiste gezielt springen. Plane pro Kapitel 3–6 Minuten ein; bei 1–11 reine Erklärung,
bei 12 macht ihr es gemeinsam live.</p>
<p><b>Wichtig zu Beginn:</b> nimm den Leuten die Angst. Frag in die Runde: „Wer hat schon mal eine Datei
<code>…_final_v2_wirklich_final</code> genannt?" – fast alle melden sich. Genau dieses Problem löst Git.</p>
<p>Die Trainer-Tipps stehen nur für dich da und sind beim Ausdruck (Handout) automatisch ausgeblendet.</p>
</div>
</details>
</section>
<!-- ============ KAPITEL 1 ============ -->
<section id="kap1" class="chapter">
<div class="chapter-num">Kapitel 1</div>
<h2>Das Problem: Arbeiten <em>ohne</em> Git</h2>
<p class="lead">Bevor wir erklären, was Git ist, schauen wir, warum es überhaupt erfunden wurde.
Wahrscheinlich kennst du das Chaos schon.</p>
<p>Stell dir vor, mehrere Leute arbeiten an derselben Datei – einem Angebot, einer Präsentation, einem Text.
Man schickt sie per E-Mail hin und her, jeder speichert seine eigene Version, und am Ende heißt sie:</p>
<figure class="diagram">
<svg viewBox="0 0 820 280" role="img" aria-label="Viele durcheinanderliegende Dateiversionen mit Fragezeichen">
<!-- Doc-Karte als wiederverwendbares Symbol -->
<defs>
<g id="doc">
<rect width="190" height="118" rx="10" fill="#ffffff" stroke="#c0c6ce" stroke-width="2"/>
<path d="M170 0 h20 v20 z" fill="#e4e7eb"/>
<rect x="18" y="58" width="120" height="8" rx="4" fill="#d8dde2"/>
<rect x="18" y="76" width="150" height="8" rx="4" fill="#e4e7eb"/>
<rect x="18" y="94" width="95" height="8" rx="4" fill="#e4e7eb"/>
</g>
</defs>
<use href="#doc" x="40" y="30" transform="rotate(-6 135 89)"/>
<use href="#doc" x="250" y="55" transform="rotate(4 345 114)"/>
<use href="#doc" x="470" y="22" transform="rotate(-3 565 81)"/>
<use href="#doc" x="600" y="120" transform="rotate(7 695 179)"/>
<text x="58" y="55" font-size="13" fill="#010920" font-weight="700">Angebot_final.docx</text>
<text x="268" y="80" font-size="13" fill="#010920" font-weight="700">Angebot_final_v2.docx</text>
<text x="486" y="47" font-size="13" fill="#010920" font-weight="700">Angebot_WIRKLICH_final.docx</text>
<text x="612" y="145" font-size="13" fill="#010920" font-weight="700">Angebot_final_ChefKorrektur.docx</text>
<text x="410" y="245" font-size="60" fill="#ef521f" font-weight="800" text-anchor="middle">?!?</text>
<text x="410" y="272" font-size="15" fill="#60687a" text-anchor="middle">Welche ist jetzt die richtige Version?</text>
</svg>
<figcaption>Ohne ein gemeinsames System weiß niemand mehr, welche Datei die aktuelle ist.</figcaption>
</figure>
<p>Typische Probleme dabei:</p>
<ul>
<li>Niemand weiß sicher, welche Version die <strong>neueste</strong> ist.</li>
<li>Zwei Personen ändern gleichzeitig – eine Änderung <strong>überschreibt</strong> die andere.</li>
<li>Man kann nicht nachvollziehen, <strong>wer was wann und warum</strong> geändert hat.</li>
<li>Ein alter Stand lässt sich kaum sauber <strong>wiederherstellen</strong>.</li>
</ul>
<div class="callout miss">
<span class="tag">⚠️ Häufiges Missverständnis</span>
<p>„Git ist nur was für Programmierer." – Nein. Git löst ein <em>ganz allgemeines</em> Problem: viele
Versionen, viele Menschen, eine gemeinsame Wahrheit. Es wird vor allem für Programmcode benutzt, aber das Prinzip gilt für jede Art von Text­dateien.</p>
</div>
<details class="trainer">
<summary>🧑🏫 Trainer-Tipp</summary>
<div class="body"><p>Lass die Teilnehmer kurz eigene Horror-Geschichten erzählen („zwei Leute im selben Excel…").
Das holt alle ab und macht sofort klar, <em>wofür</em> das Werkzeug gut ist – bevor ein einziger Fachbegriff fällt.</p></div>
</details>
</section>
<!-- ============ KAPITEL 2 ============ -->
<section id="kap2" class="chapter">
<div class="chapter-num">Kapitel 2</div>
<h2>Die Lösung: Was ist „Versionsverwaltung"?</h2>
<p class="lead">Eine Versionsverwaltung ist ein Werkzeug, das sich <strong>jede Version</strong> deiner Dateien
merkt – und dazu, wer sie wann und warum geändert hat.</p>
<div class="callout analogy">
<span class="tag">💡 Analogie</span>
<p>Denk an die <strong>Speicherstände in einem Videospiel</strong> oder an ein <strong>Logbuch</strong>:
Du kannst jederzeit zu einem früheren Punkt zurückspringen, und es ist genau festgehalten, was passiert ist.
Oder: wie „Änderungen nachverfolgen" in Word – aber für ein ganzes Projekt und für ein ganzes Team.</p>
</div>
<figure class="diagram">
<svg viewBox="0 0 820 200" role="img" aria-label="Ein Zeitstrahl mit mehreren gespeicherten Ständen">
<line x1="50" y1="110" x2="770" y2="110" stroke="#c0c6ce" stroke-width="4"/>
<!-- Punkte -->
<g font-size="13" fill="#60687a" text-anchor="middle">
<circle cx="140" cy="110" r="16" fill="#009869"/><text x="140" y="150">Stand 1</text>
<circle cx="320" cy="110" r="16" fill="#009869"/><text x="320" y="150">Stand 2</text>
<circle cx="500" cy="110" r="16" fill="#009869"/><text x="500" y="150">Stand 3</text>
<circle cx="680" cy="110" r="16" fill="#009869"/><text x="680" y="150">Stand 4 (jetzt)</text>
</g>
<g font-size="12" fill="#010920" text-anchor="middle">
<text x="140" y="74">„angelegt"</text>
<text x="320" y="74">„Preise ergänzt"</text>
<text x="500" y="74">„Chef-Korrektur"</text>
<text x="680" y="74">„Tippfehler"</text>
</g>
<text x="770" y="100" font-size="22">→</text>
<text x="410" y="190" font-size="14" fill="#60687a" text-anchor="middle">Die Zeit läuft nach rechts – jeder Punkt ist ein gespeicherter Stand.</text>
</svg>
<figcaption>Statt vieler kryptisch benannter Dateien gibt es <em>eine</em> Datei mit einer lückenlosen Historie.</figcaption>
</figure>
<p>Mit so einem Werkzeug kannst du:</p>
<ul>
<li>zu jedem alten Stand <strong>zurückspringen</strong>,</li>
<li>genau sehen, <strong>was sich von Stand zu Stand geändert</strong> hat,</li>
<li>und mit anderen arbeiten, ohne euch gegenseitig zu überschreiben.</li>
</ul>
<p><strong>Git</strong> ist das mit Abstand bekannteste Werkzeug dieser Art. Schauen wir es uns genauer an –
und klären als Erstes den Unterschied, der am meisten Verwirrung stiftet.</p>
<div class="callout merksatz">
<span class="tag">📌 Merksatz</span>
<p>Versionsverwaltung = ein „Gedächtnis" für deine Dateien. <strong>Git</strong> ist das Werkzeug, das dieses Gedächtnis führt.</p>
</div>
</section>
<!-- ============ EXKURS: GESCHICHTE ============ -->
<section id="exkurs" class="chapter">
<div class="chapter-num">Exkurs · kleine Geschichte</div>
<h2>Woher kommt Git eigentlich?</h2>
<p class="lead">Git ist gar nicht so alt – und seine Entstehung ist eine kleine Notgeschichte.
Sie hilft zu verstehen, warum das Werkzeug so funktioniert, wie es funktioniert.</p>
<figure class="diagram">
<svg viewBox="0 0 820 190" role="img" aria-label="Zeitleiste: 2005 Git entsteht, 2008 GitHub geht online, heute Welt-Standard">
<line x1="70" y1="100" x2="745" y2="100" stroke="#009869" stroke-width="4"/>
<text x="752" y="107" font-size="20" fill="#009869">→</text>
<!-- 2005 -->
<circle cx="170" cy="100" r="15" fill="#009869"/>
<text x="170" y="62" font-size="21" font-weight="800" fill="#010920" text-anchor="middle">2005</text>
<text x="170" y="140" font-size="13.5" font-weight="700" fill="#010920" text-anchor="middle">Git entsteht</text>
<text x="170" y="160" font-size="12" fill="#60687a" text-anchor="middle">von Linus Torvalds</text>
<!-- 2008 -->
<circle cx="410" cy="100" r="15" fill="#3375dd"/>
<text x="410" y="62" font-size="21" font-weight="800" fill="#010920" text-anchor="middle">2008</text>
<text x="410" y="140" font-size="13.5" font-weight="700" fill="#010920" text-anchor="middle">GitHub geht online</text>
<text x="410" y="160" font-size="12" fill="#60687a" text-anchor="middle">Git wird populär</text>
<!-- heute -->
<circle cx="650" cy="100" r="15" fill="#009869"/>
<text x="650" y="62" font-size="21" font-weight="800" fill="#010920" text-anchor="middle">heute</text>
<text x="650" y="140" font-size="13.5" font-weight="700" fill="#010920" text-anchor="middle">Welt-Standard</text>
<text x="650" y="160" font-size="12" fill="#60687a" text-anchor="middle">fast alle Teams nutzen es</text>
</svg>
<figcaption>Von der Notlösung zum weltweiten Standard – in nur wenigen Jahren.</figcaption>
</figure>
<h3>Aus der Not geboren (2005)</h3>
<p>Erfunden hat Git <strong>Linus Torvalds</strong> – derselbe Mann, der das Betriebssystem
<strong>Linux</strong> gestartet hat (es läuft heute auf einem Großteil des Internets). Für die
Weiterentwicklung von Linux arbeiteten <em>tausende</em> Programmierer weltweit zusammen. Dafür
brauchten sie ein gutes Werkzeug – und genau das fiel 2005 plötzlich weg: Das bis dahin genutzte
Programm durften sie nicht länger kostenlos verwenden, und die Alternativen waren für ein so riesiges
Projekt schlicht zu langsam.</p>
<p>Also setzte sich Linus hin und baute in nur <strong>wenigen Wochen</strong> sein eigenes Werkzeug.
Seine drei Ziele erklären bis heute, wie sich Git anfühlt:</p>
<ul>
<li><strong>Schnell</strong> – auch bei riesigen Projekten.</li>
<li><strong>Für viele gleichzeitig</strong> – tausende Leute parallel, ohne sich zu blockieren.</li>
<li><strong>Verteilt</strong> – jede Person hat die <em>komplette</em> Historie auf dem eigenen
Rechner. Kein zentraler Server, der alles lahmlegt, wenn er ausfällt.</li>
</ul>
<div class="callout analogy">
<span class="tag">💡 Fun-Fact: der Name „Git"</span>
<p>„git" ist im britischen Englisch ein liebevoll-spöttisches Wort für einen sturen Dickkopf.
Linus meinte selbstironisch, er benenne seine Projekte eben nach sich selbst – erst „Linux", dann „Git". 😄</p>
</div>
<h3>Vom Geheimtipp zum Standard (2008 → heute)</h3>
<p>Git war von Anfang an <strong>kostenlos und quelloffen</strong> – jeder durfte es nutzen. Das half
ihm, sich überall zu verbreiten. 2008 kam dann <strong>GitHub</strong> dazu: eine Webseite, die <em>auf</em>
Git aufbaut und es auch für Menschen ohne Kommandozeilen-Erfahrung benutzbar machte. Damit wurde Git
endgültig populär – weit über Programmierer hinaus.</p>
<div class="callout merksatz">
<span class="tag">📌 Zum Schmunzeln & Merken</span>
<p>Wenn du heute GitHub benutzt, nutzt du Technik, die ursprünglich erfunden wurde, um <strong>tausende
Linux-Freiwillige weltweit</strong> zu koordinieren. Ganz schön großer Ursprung für deine erste kleine Änderung.</p>
</div>
<details class="trainer">
<summary>🧑🏫 Trainer-Tipp</summary>
<div class="body"><p>Bewusst kurz und locker halten – das ist die Auflockerung zwischendurch, kein Prüfungsstoff.
Die „Linus = Linux = Git"-Verbindung und der Name-Gag kommen erfahrungsgemäß gut an und machen das abstrakte
Thema menschlich. Wer mag, fragt: „Wer hat schon mal von Linux gehört?"</p></div>
</details>
</section>
<!-- ============ KAPITEL 3 ============ -->
<section id="kap3" class="chapter">
<div class="chapter-num">Kapitel 3</div>
<h2>Der wichtigste Unterschied: Git ≠ GitHub</h2>
<p class="lead">Diese beiden werden ständig verwechselt. Wenn du nur eine Sache aus dieser Schulung mitnimmst,
dann diese:</p>
<figure class="diagram">
<svg viewBox="0 0 820 300" role="img" aria-label="Laptop mit Git links, GitHub-Wolke rechts, Pfeile dazwischen">
<!-- Laptop -->
<g>
<rect x="70" y="80" width="220" height="140" rx="12" fill="#fff" stroke="#c0c6ce" stroke-width="2"/>
<rect x="90" y="100" width="180" height="100" rx="6" fill="#010920"/>
<rect x="55" y="220" width="250" height="16" rx="6" fill="#c0c6ce"/>
<text x="180" y="150" fill="#bee600" font-size="22" font-family="monospace" text-anchor="middle">git</text>
<text x="180" y="178" fill="#7f8798" font-size="12" font-family="monospace" text-anchor="middle">$ commit ✓</text>
</g>
<text x="180" y="268" font-size="17" font-weight="800" fill="#010920" text-anchor="middle">Git</text>
<text x="180" y="290" font-size="13.5" fill="#60687a" text-anchor="middle">das Werkzeug · auf deinem Rechner · offline</text>
<!-- Pfeile -->
<g stroke="#3375dd" stroke-width="3" fill="none">
<path d="M320 120 H470" marker-end="url(#ar)"/>
<path d="M470 180 H320" marker-end="url(#ar)"/>
</g>
<defs><marker id="ar" markerWidth="10" markerHeight="10" refX="8" refY="3" orient="auto">
<path d="M0,0 L8,3 L0,6 Z" fill="#3375dd"/></marker></defs>
<text x="395" y="110" font-size="12.5" fill="#3375dd" text-anchor="middle" font-weight="700">hochladen</text>
<text x="395" y="202" font-size="12.5" fill="#3375dd" text-anchor="middle" font-weight="700">herunterladen</text>
<!-- Cloud -->
<g>
<path d="M560 150 a40 40 0 0 1 78 -12 a34 34 0 0 1 60 22 a32 32 0 0 1 -8 63 H575 a35 35 0 0 1 -15 -73 z"
fill="#eaf1fc" stroke="#3375dd" stroke-width="2.5"/>
<text x="632" y="158" font-size="24" text-anchor="middle">🐙</text>
<text x="632" y="185" font-size="14" fill="#3375dd" font-weight="800" text-anchor="middle">GitHub</text>
</g>
<text x="632" y="268" font-size="17" font-weight="800" fill="#010920" text-anchor="middle">GitHub</text>
<text x="632" y="290" font-size="13.5" fill="#60687a" text-anchor="middle">die Webseite · im Internet · fürs Team</text>
</svg>
<figcaption>Git lebt auf deinem Computer. GitHub ist ein Ort im Internet, an dem dein Projekt für alle liegt.</figcaption>
</figure>
<table>
<tr><th></th><th>Git</th><th>GitHub</th></tr>
<tr><td><strong>Was ist es?</strong></td><td>Ein Werkzeug / Programm</td><td>Eine Webseite / Plattform</td></tr>
<tr><td><strong>Wo läuft es?</strong></td><td>Auf deinem eigenen Rechner</td><td>Im Internet (in der „Cloud")</td></tr>
<tr><td><strong>Internet nötig?</strong></td><td>Nein, geht auch offline</td><td>Ja, es ist eine Webseite</td></tr>
<tr><td><strong>Wofür?</strong></td><td>Versionen merken</td><td>Projekte teilen & gemeinsam dran arbeiten</td></tr>
</table>
<div class="callout analogy">
<span class="tag">💡 Analogie</span>
<p>Es ist wie bei <strong>E-Mail</strong> und <strong>Gmail</strong>: „E-Mail" ist die Technik, „Gmail" ist
nur <em>ein Anbieter</em>, bei dem du sie nutzt. Genauso ist <strong>Git</strong> die Technik – und
<strong>GitHub</strong> einer von mehreren Anbietern. Andere Anbieter sind z. B. GitLab oder Bitbucket.</p>
</div>
<div class="callout merksatz">
<span class="tag">📌 Merksatz</span>
<p><strong>Git</strong> = das Werkzeug auf deinem Rechner. <strong>GitHub</strong> = der gemeinsame Treffpunkt im Internet, wo das Projekt liegt.</p>
</div>
<details class="trainer">
<summary>🧑🏫 Trainer-Tipp</summary>
<div class="body"><p>Die E-Mail/Gmail-Analogie zündet bei Nicht-Devs fast immer. Wiederhol sie ruhig später nochmal.
Wenn jemand fragt „brauche ich beides?": In dieser Firma arbeitet ihr meist über GitHub im Browser – Git läuft im Hintergrund mit, ohne dass man es direkt sieht.</p></div>
</details>
</section>
<!-- ============ KAPITEL 4 ============ -->
<section id="kap4" class="chapter">
<div class="chapter-num">Kapitel 4</div>
<h2>Das Repository – kurz „Repo"</h2>
<p class="lead">Ein Repository ist einfach dein <strong>Projektordner – aber mit Gedächtnis</strong>.
Es enthält deine Dateien <em>und</em> die komplette Geschichte aller Änderungen.</p>
<figure class="diagram">
<svg viewBox="0 0 820 250" role="img" aria-label="Lokales Repository auf dem Laptop und Remote-Repository in der Wolke">
<!-- lokal -->
<g>
<path d="M120 90 h70 l14 18 h120 v92 a8 8 0 0 1 -8 8 H120 a8 8 0 0 1 -8 -8 V98 a8 8 0 0 1 8 -8 z"
fill="#e5fce9" stroke="#009869" stroke-width="2.5"/>
<circle cx="300" cy="98" r="20" fill="#fff" stroke="#009869" stroke-width="2.5"/>
<path d="M300 88 v10 l7 4" stroke="#009869" stroke-width="2.5" fill="none" stroke-linecap="round"/>
<text x="210" y="160" font-size="15" fill="#076a4a" font-weight="800" text-anchor="middle">mein-projekt</text>
<text x="210" y="182" font-size="12" fill="#60687a" text-anchor="middle">Dateien + ganze Historie</text>
</g>
<text x="210" y="232" font-size="14.5" fill="#010920" text-anchor="middle" font-weight="700">Lokales Repo (auf deinem Rechner)</text>
<!-- Sync-Pfeile -->
<g stroke="#3375dd" stroke-width="3" fill="none">
<path d="M380 120 H520" marker-end="url(#ar2)"/>
<path d="M520 160 H380" marker-end="url(#ar2)"/>
</g>
<defs><marker id="ar2" markerWidth="10" markerHeight="10" refX="8" refY="3" orient="auto">
<path d="M0,0 L8,3 L0,6 Z" fill="#3375dd"/></marker></defs>
<text x="450" y="108" font-size="12.5" fill="#3375dd" text-anchor="middle" font-weight="700">synchronisieren</text>
<!-- remote -->
<g>
<path d="M560 150 a40 40 0 0 1 78 -12 a34 34 0 0 1 60 22 a32 32 0 0 1 -8 63 H575 a35 35 0 0 1 -15 -73 z"
fill="#eaf1fc" stroke="#3375dd" stroke-width="2.5"/>
<text x="635" y="165" font-size="15" fill="#3375dd" font-weight="800" text-anchor="middle">mein-projekt</text>
</g>
<text x="635" y="232" font-size="14.5" fill="#010920" text-anchor="middle" font-weight="700">Remote-Repo (auf GitHub)</text>
</svg>
<figcaption>Dasselbe Projekt gibt es lokal (bei dir) und „remote" (auf GitHub). Beide hält man synchron.</figcaption>
</figure>
<p>Wenn du auf GitHub ein neues Projekt anlegst, legst du genau so ein Repository an. Es kann sein:</p>
<ul>
<li><strong>privat</strong> – nur du (und eingeladene Personen) seht es, oder</li>
<li><strong>öffentlich</strong> – jeder im Internet kann es ansehen.</li>
</ul>
<div class="callout merksatz">
<span class="tag">📌 Merksatz</span>
<p>Ein <strong>Repository</strong> ist ein Projektordner, der sich seine komplette Vergangenheit merkt. „Lokal" = bei dir, „Remote" = auf GitHub.</p>
</div>
</section>
<!-- ============ KAPITEL 5 ============ -->
<section id="kap5" class="chapter">
<div class="chapter-num">Kapitel 5</div>
<h2>Der Commit – ein gespeicherter Schnappschuss</h2>
<p class="lead">Ein <strong>Commit</strong> ist ein gespeicherter Stand deines Projekts zu einem bestimmten
Moment – zusammen mit einer kurzen Notiz, <em>was</em> du geändert hast und <em>warum</em>.</p>
<div class="callout analogy">
<span class="tag">💡 Analogie</span>
<p>Ein Commit ist wie ein <strong>Foto mit Bildunterschrift</strong>: Es hält den Moment fest und sagt in
einem Satz, was darauf passiert. Diese Bildunterschrift nennt man die <strong>Commit-Nachricht</strong>.</p>
</div>
<figure class="diagram">
<svg viewBox="0 0 820 210" role="img" aria-label="Drei Commits als Fotokarten auf einer Linie">
<line x1="60" y1="95" x2="760" y2="95" stroke="#c0c6ce" stroke-width="4"/>
<g>
<!-- Karte 1 -->
<circle cx="170" cy="95" r="14" fill="#009869"/>
<rect x="110" y="120" width="160" height="60" rx="9" fill="#fff" stroke="#009869" stroke-width="2"/>
<text x="190" y="143" font-size="13" fill="#010920" font-weight="700" text-anchor="middle">„Projekt angelegt"</text>
<text x="190" y="165" font-size="11" fill="#60687a" text-anchor="middle" font-family="monospace">a1b2c3 · Anna</text>
<!-- Karte 2 -->
<circle cx="410" cy="95" r="14" fill="#009869"/>
<rect x="350" y="120" width="160" height="60" rx="9" fill="#fff" stroke="#009869" stroke-width="2"/>
<text x="430" y="143" font-size="13" fill="#010920" font-weight="700" text-anchor="middle">„Texte überarbeitet"</text>
<text x="430" y="165" font-size="11" fill="#60687a" text-anchor="middle" font-family="monospace">d4e5f6 · Ben</text>
<!-- Karte 3 -->
<circle cx="650" cy="95" r="14" fill="#009869"/>
<rect x="590" y="120" width="160" height="60" rx="9" fill="#fff" stroke="#009869" stroke-width="2"/>
<text x="670" y="143" font-size="13" fill="#010920" font-weight="700" text-anchor="middle">„Bilder ergänzt"</text>
<text x="670" y="165" font-size="11" fill="#60687a" text-anchor="middle" font-family="monospace">7g8h9i · Anna</text>
</g>
<text x="60" y="45" font-size="14" fill="#60687a">früher</text>
<text x="760" y="45" font-size="14" fill="#60687a" text-anchor="end">jetzt →</text>
</svg>
<figcaption>Jeder Commit hat eine Nachricht, einen Autor und eine eindeutige Kennung (z. B. <code>a1b2c3</code>).</figcaption>
</figure>
<p>Die Aneinanderreihung aller Commits ist die <strong>Historie</strong> deines Projekts. Du kannst sie jederzeit
durchblättern wie ein Tagebuch – und sehen, wer wann was gemacht hat.</p>
<div class="callout miss">
<span class="tag">⚠️ Häufiges Missverständnis</span>
<p>Ein Commit ist <em>nicht</em> dasselbe wie „Datei speichern". Speichern macht dein Programm sowieso ständig.
Ein Commit ist ein <strong>bewusster</strong> Schnappschuss, den du mit einer Nachricht festhältst – etwa
„so, dieser Abschnitt ist fertig".</p>
</div>
<div class="callout merksatz">
<span class="tag">📌 Merksatz</span>
<p><strong>Commit</strong> = ein bewusst gespeicherter Stand + eine kurze Nachricht „was & warum".</p>
</div>
<details class="trainer">
<summary>🧑🏫 Trainer-Tipp</summary>
<div class="body"><p>Betone die <em>Nachricht</em>. Gute Commit-Nachrichten sind das, was Historie überhaupt lesbar macht.
Gegenbeispiel zum Schmunzeln: Commits mit der Nachricht „asdf" oder „Änderung" – damit kann später niemand etwas anfangen.</p></div>
</details>
</section>
<!-- ============ KAPITEL 6 ============ -->
<section id="kap6" class="chapter">
<div class="chapter-num">Kapitel 6 · Kernmodell</div>
<h2>Die drei Bereiche: vom Schreibtisch ins Fotoalbum</h2>
<p class="lead">Damit aus einer Änderung ein Commit wird, durchläuft sie drei Stationen. Das ist <em>das</em>
Herzstück von Git. Wir gehen es ganz langsam durch.</p>
<figure class="diagram">
<svg viewBox="0 0 840 300" role="img" aria-label="Drei Bereiche: Arbeitsverzeichnis, Staging, Repository, eine Datei wandert hindurch">
<!-- Zone 1 -->
<rect x="20" y="60" width="230" height="180" rx="14" fill="#fef7e3" stroke="#f09d16" stroke-width="2.5"/>
<text x="135" y="90" font-size="15" font-weight="800" fill="#a4690a" text-anchor="middle">1 · Arbeitsverzeichnis</text>
<text x="135" y="112" font-size="12.5" fill="#60687a" text-anchor="middle">dein Schreibtisch</text>
<text x="135" y="175" font-size="40" text-anchor="middle">📝</text>
<text x="135" y="215" font-size="12.5" fill="#60687a" text-anchor="middle">hier änderst du Dateien</text>
<!-- Zone 2 -->
<rect x="305" y="60" width="230" height="180" rx="14" fill="#eeeaff" stroke="#5730cc" stroke-width="2.5"/>
<text x="420" y="90" font-size="15" font-weight="800" fill="#3f1fa0" text-anchor="middle">2 · Staging</text>
<text x="420" y="112" font-size="12.5" fill="#60687a" text-anchor="middle">der Sammelkorb</text>
<text x="420" y="175" font-size="40" text-anchor="middle">🧺</text>
<text x="420" y="215" font-size="12.5" fill="#60687a" text-anchor="middle">was soll in den Schnappschuss?</text>
<!-- Zone 3 -->
<rect x="590" y="60" width="230" height="180" rx="14" fill="#e5fce9" stroke="#009869" stroke-width="2.5"/>
<text x="705" y="90" font-size="15" font-weight="800" fill="#076a4a" text-anchor="middle">3 · Repository</text>
<text x="705" y="112" font-size="12.5" fill="#60687a" text-anchor="middle">das Fotoalbum</text>
<text x="705" y="175" font-size="40" text-anchor="middle">📚</text>
<text x="705" y="215" font-size="12.5" fill="#60687a" text-anchor="middle">Schnappschuss für immer drin</text>
<!-- Pfeile -->
<defs><marker id="ar3" markerWidth="12" markerHeight="12" refX="8" refY="3" orient="auto">
<path d="M0,0 L8,3 L0,6 Z" fill="#1b595d"/></marker></defs>
<g stroke="#1b595d" stroke-width="3" fill="none">
<path d="M255 280 H300" marker-end="url(#ar3)"/>
<path d="M540 280 H585" marker-end="url(#ar3)"/>
</g>
<text x="278" y="272" font-size="12.5" fill="#1b595d" text-anchor="middle" font-weight="800">add</text>
<text x="563" y="272" font-size="12.5" fill="#1b595d" text-anchor="middle" font-weight="800">commit</text>
</svg>
<figcaption>Eine Änderung wandert: <b style="color:var(--wd)">ändern</b> → mit <code>add</code> in den Korb → mit <code>commit</code> ins Album.</figcaption>
</figure>
<h3>Schritt für Schritt</h3>
<ol>
<li><strong>Arbeitsverzeichnis (Schreibtisch):</strong> Hier bearbeitest du deine Dateien ganz normal.</li>
<li><strong>Staging / Sammelkorb:</strong> Du legst <em>gezielt</em> die Änderungen hinein, die in den nächsten
Schnappschuss sollen. (So kannst du z. B. drei von fünf Änderungen festhalten und zwei noch liegen lassen.)</li>
<li><strong>Repository / Fotoalbum:</strong> Mit dem Commit wird aus dem Korb ein fester Schnappschuss in der Historie.</li>
</ol>
<div class="callout analogy">
<span class="tag">💡 Analogie</span>
<p><strong>Ein Paket packen:</strong> Auf dem Schreibtisch liegen viele Dinge (Arbeitsverzeichnis). Du legst
ausgewählte Dinge in den Karton (Staging). Dann klebst du den Karton zu und schickst ihn ins Archiv – fertig,
nicht mehr änderbar (Commit ins Repository).</p>
</div>
<div class="callout miss">
<span class="tag">⚠️ Gut zu wissen für GitHub im Browser</span>
<p>Wenn du direkt auf der GitHub-Webseite arbeitest, passieren „Sammelkorb" und „Foto machen" in <strong>einem
Schritt</strong>: Du klickst „Commit changes" und gibst die Nachricht ein. Das Modell mit den drei Bereichen
läuft trotzdem im Hintergrund – gut, es zu kennen, damit dich später kein Begriff überrascht.</p>
</div>
<div class="callout merksatz">
<span class="tag">📌 Merksatz</span>
<p>ändern <span style="color:var(--wd)">●</span> → <strong>add</strong> in den Sammelkorb <span style="color:var(--stage)">●</span> → <strong>commit</strong> ins Album <span style="color:var(--repo)">●</span>.</p>
</div>
<details class="trainer">
<summary>🧑🏫 Trainer-Tipp</summary>
<div class="body"><p>Das ist das schwierigste Kapitel für Einsteiger – nimm dir hier am meisten Zeit. Zeig die
Paket-Analogie mit den Händen. Wer das Staging einmal verstanden hat, versteht später Push/Pull fast von allein.</p></div>
</details>
</section>
<!-- ============ KAPITEL 7 ============ -->
<section id="kap7" class="chapter">
<div class="chapter-num">Kapitel 7</div>
<h2>Branches – parallel arbeiten ohne Chaos</h2>
<p class="lead">Ein <strong>Branch</strong> (deutsch: „Zweig") ist eine parallele Arbeitskopie. Du kannst darin
etwas ausprobieren, <em>ohne</em> die offizielle Version kaputtzumachen.</p>
<div class="callout analogy">
<span class="tag">💡 Analogie</span>
<p>Wie ein <strong>Sandkasten</strong> oder ein <strong>Paralleluniversum</strong>: Du baust in Ruhe an deiner
Idee. Klappt sie, holst du sie zurück in die Hauptversion. Klappt sie nicht, wirfst du den Zweig einfach weg –
die Hauptversion hat nie etwas davon mitbekommen.</p>
</div>
<figure class="diagram">
<svg viewBox="0 0 820 230" role="img" aria-label="Hauptlinie main mit einem abzweigenden und wieder zurückführenden Branch">
<!-- main-Linie (durchgehend) -->
<line x1="60" y1="160" x2="760" y2="160" stroke="#009869" stroke-width="5"/>
<!-- Branch: symmetrisch hoch, gerade, symmetrisch zurück -->
<path d="M230,160 C 285,160 285,60 340,60 H520 C 575,60 575,160 630,160"
fill="none" stroke="#5730cc" stroke-width="5"/>
<!-- Branch-Punkte (genau auf der waagrechten Linie y=60) -->
<g fill="#5730cc">
<circle cx="410" cy="60" r="13"/>
<circle cx="510" cy="60" r="13"/>
</g>
<!-- main-Punkte (über der Linie, inkl. Abzweig- und Rückführpunkt) -->
<g fill="#009869">
<circle cx="120" cy="160" r="13"/>
<circle cx="230" cy="160" r="13"/>
<circle cx="630" cy="160" r="13"/>
<circle cx="720" cy="160" r="13"/>
</g>
<!-- Beschriftung -->
<text x="460" y="38" font-size="15" fill="#3f1fa0" font-weight="800" text-anchor="middle">Branch „neue-idee"</text>
<text x="60" y="200" font-size="14" fill="#076a4a" font-weight="800">main · die offizielle Version</text>
<text x="268" y="128" font-size="12.5" fill="#3f1fa0" text-anchor="middle">abzweigen</text>
<text x="592" y="128" font-size="12.5" fill="#3f1fa0" text-anchor="middle">zurückführen</text>
</svg>
<figcaption>Aus <code>main</code> zweigt ein eigener Branch ab, sammelt ein paar Commits – und fließt später wieder zurück.</figcaption>
</figure>
<p>Der Hauptzweig heißt fast immer <strong><code>main</code></strong> (früher oft <code>master</code>) – das ist
die „gilt für alle"-Version. Branches benutzt man, um:</p>
<ul>
<li>eine neue Idee oder ein Feature in Ruhe auszuprobieren,</li>
<li>mit mehreren Leuten gleichzeitig an verschiedenen Dingen zu arbeiten,</li>
<li>die Hauptversion immer funktionsfähig zu halten.</li>
</ul>
<div class="callout merksatz">
<span class="tag">📌 Merksatz</span>
<p>Ein <strong>Branch</strong> ist ein sicherer Spiel-Zweig neben der Hauptversion <code>main</code>. Experimentieren erlaubt – ohne Risiko.</p>
</div>
</section>
<!-- ============ KAPITEL 8 ============ -->
<section id="kap8" class="chapter">
<div class="chapter-num">Kapitel 8</div>
<h2>Merge – Zweige wieder zusammenführen</h2>
<p class="lead"><strong>Mergen</strong> heißt: die Änderungen aus einem Branch zurück in einen anderen
(meist <code>main</code>) holen. Aus zwei Linien wird wieder eine.</p>
<figure class="diagram">
<svg viewBox="0 0 820 230" role="img" aria-label="Zwei Zweige fließen in einem Merge-Punkt zusammen">
<!-- main-Linie (durchgehend) -->
<line x1="60" y1="160" x2="760" y2="160" stroke="#009869" stroke-width="5"/>
<!-- Branch: symmetrisch hoch, gerade, symmetrisch in den Merge-Punkt -->
<path d="M200,160 C 255,160 255,60 310,60 H520 C 575,60 575,160 620,160"
fill="none" stroke="#5730cc" stroke-width="5"/>
<!-- Branch-Punkte (genau auf der waagrechten Linie y=60) -->
<g fill="#5730cc">
<circle cx="380" cy="60" r="13"/>
<circle cx="470" cy="60" r="13"/>
</g>
<!-- main-Punkte -->
<g fill="#009869">
<circle cx="110" cy="160" r="13"/>
<circle cx="200" cy="160" r="13"/>
<circle cx="720" cy="160" r="13"/>
</g>
<!-- Merge-Knoten (sitzt exakt am Ende von main-Linie und Branch) -->
<circle cx="620" cy="160" r="18" fill="#1b595d"/>
<text x="620" y="166" font-size="16" fill="#fff" text-anchor="middle">⇄</text>
<!-- Beschriftung -->
<text x="415" y="38" font-size="15" fill="#3f1fa0" font-weight="800" text-anchor="middle">Branch</text>
<text x="80" y="200" font-size="14" fill="#076a4a" font-weight="800">main</text>
<text x="620" y="202" font-size="13.5" fill="#1b595d" font-weight="800" text-anchor="middle">Merge</text>
<text x="620" y="221" font-size="12.5" fill="#60687a" text-anchor="middle">die Zweige sind vereint</text>
</svg>
<figcaption>Beim Merge werden die Commits beider Zweige zu einer gemeinsamen Geschichte verbunden.</figcaption>
</figure>
<h3>Und was ist ein „Merge-Konflikt"?</h3>
<p>Meistens klappt das Zusammenführen ganz automatisch. Ein <strong>Konflikt</strong> entsteht nur, wenn
<em>zwei Leute genau dieselbe Zeile</em> unterschiedlich geändert haben. Dann kann Git nicht raten, welche
Version stimmt – und fragt einen Menschen: „Welche Variante soll gelten?"</p>
<div class="callout miss">
<span class="tag">⚠️ Keine Angst vor Konflikten</span>
<p>Ein Merge-Konflikt ist <strong>völlig normal</strong> und kein Fehler. Git zeigt dir genau die Stelle und
beide Varianten; du wählst aus oder kombinierst sie. Danach ist alles wieder gut.</p>
</div>
<div class="callout merksatz">
<span class="tag">📌 Merksatz</span>
<p><strong>Merge</strong> = Zweige vereinen. <strong>Konflikt</strong> = dieselbe Stelle doppelt geändert, ein Mensch entscheidet.</p>
</div>
</section>
<!-- ============ KAPITEL 9 ============ -->
<section id="kap9" class="chapter">
<div class="chapter-num">Kapitel 9 · Zusammenarbeit</div>
<h2>Clone, Push und Pull</h2>
<p class="lead">Jetzt verbinden wir „bei dir" (lokal) mit „auf GitHub" (remote). Dafür gibt es genau drei
Worte, die du dir merken solltest.</p>
<figure class="diagram">
<svg viewBox="0 0 820 300" role="img" aria-label="Laptop und GitHub-Wolke mit den Pfeilen Clone, Push und Pull">
<!-- Laptop -->
<rect x="80" y="110" width="200" height="120" rx="10" fill="#fff" stroke="#c0c6ce" stroke-width="2"/>
<rect x="98" y="128" width="164" height="84" rx="5" fill="#010920"/>
<rect x="66" y="230" width="228" height="14" rx="6" fill="#c0c6ce"/>
<text x="180" y="178" fill="#bee600" font-size="16" font-family="monospace" text-anchor="middle">dein Laptop</text>
<text x="180" y="282" font-size="14" font-weight="800" fill="#010920" text-anchor="middle">Lokal (bei dir)</text>
<!-- cloud -->
<path d="M560 150 a40 40 0 0 1 78 -12 a34 34 0 0 1 60 22 a32 32 0 0 1 -8 63 H575 a35 35 0 0 1 -15 -73 z"
fill="#eaf1fc" stroke="#3375dd" stroke-width="2.5"/>
<text x="632" y="160" font-size="26" text-anchor="middle">🐙</text>
<text x="632" y="186" font-size="14" fill="#3375dd" font-weight="800" text-anchor="middle">GitHub</text>
<text x="632" y="282" font-size="14" font-weight="800" fill="#010920" text-anchor="middle">Remote (Internet)</text>
<defs><marker id="arp" markerWidth="11" markerHeight="11" refX="8" refY="3" orient="auto">
<path d="M0,0 L8,3 L0,6 Z" fill="currentColor"/></marker></defs>
<!-- clone -->
<g color="#5730cc" stroke="#5730cc" stroke-width="3" fill="none">
<path d="M555 120 H290" marker-end="url(#arp)"/>
</g>
<text x="420" y="108" font-size="13.5" fill="#3f1fa0" font-weight="800" text-anchor="middle">clone – erste Kopie holen</text>
<!-- push -->
<g color="#009869" stroke="#009869" stroke-width="3" fill="none">
<path d="M290 165 H555" marker-end="url(#arp)"/>
</g>
<text x="420" y="158" font-size="13.5" fill="#076a4a" font-weight="800" text-anchor="middle">push – hochladen ▲</text>
<!-- pull -->
<g color="#f09d16" stroke="#f09d16" stroke-width="3" fill="none">
<path d="M555 205 H290" marker-end="url(#arp)"/>
</g>
<text x="420" y="225" font-size="13.5" fill="#a4690a" font-weight="800" text-anchor="middle">pull – herunterladen ▼</text>
</svg>
<figcaption>Drei Bewegungen zwischen deinem Rechner und GitHub.</figcaption>
</figure>
<table>
<tr><th>Wort</th><th>Bedeutung</th><th>In einem Satz</th></tr>
<tr><td><strong>Clone</strong></td><td>Erste Kopie holen</td><td>„Ich hole mir das Projekt von GitHub das erste Mal auf meinen Rechner."</td></tr>
<tr><td><strong>Push</strong></td><td>Hochladen</td><td>„Ich schicke meine Commits hinauf zu GitHub, damit andere sie haben."</td></tr>
<tr><td><strong>Pull</strong></td><td>Herunterladen</td><td>„Ich hole mir die neuesten Änderungen der anderen von GitHub herunter."</td></tr>
</table>
<div class="callout merksatz">
<span class="tag">📌 Merksatz</span>
<p><strong>Push = hoch</strong> (geben), <strong>Pull = runter</strong> (holen), <strong>Clone</strong> = die allererste Kopie.</p>
</div>
<details class="trainer">
<summary>🧑🏫 Trainer-Tipp</summary>
<div class="body"><p>Eselsbrücke laut mitsprechen lassen: „<b>Push</b>en heißt drücken – nach oben. <b>Pull</b>en heißt ziehen – zu mir herunter."
Bei reiner Browser-Arbeit auf GitHub macht man Push/Pull oft gar nicht selbst – das ist trotzdem das Vokabular, das überall fällt.</p></div>
</details>
</section>
<!-- ============ KAPITEL 10 ============ -->
<section id="kap10" class="chapter">
<div class="chapter-num">Kapitel 10 · Der wichtigste GitHub-Ablauf</div>
<h2>Pull Request & Review – so arbeitet ein Team</h2>
<p class="lead">Das ist der Ablauf, den du bei GitHub am häufigsten sehen wirst. Ein <strong>Pull Request</strong>
(kurz „PR") heißt im Grunde: <em>„Ich schlage diese Änderung vor – schaut sie euch bitte an, bevor sie offiziell wird."</em></p>
<div class="callout analogy">
<span class="tag">💡 Analogie</span>
<p>Wie <strong>„Änderungen vorschlagen" in Google Docs</strong>: Du änderst nicht einfach wild im Original,
sondern machst einen Vorschlag. Eine Kollegin schaut drauf, kommentiert, und erst wenn alle einverstanden
sind, wird der Vorschlag übernommen.</p>
</div>
<figure class="diagram">
<svg viewBox="0 0 820 220" role="img" aria-label="Ablauf von Branch über Pull Request und Review bis zum Merge in main">
<defs><marker id="arf" markerWidth="11" markerHeight="11" refX="8" refY="3" orient="auto">
<path d="M0,0 L8,3 L0,6 Z" fill="#1b595d"/></marker></defs>
<!-- Schritt-Boxen -->
<g font-size="13" text-anchor="middle">
<rect x="20" y="80" width="150" height="64" rx="12" fill="#eeeaff" stroke="#5730cc" stroke-width="2"/>
<text x="95" y="108" font-weight="800" fill="#3f1fa0">1 · Branch</text>
<text x="95" y="128" fill="#60687a">ändern in Ruhe</text>
<rect x="215" y="80" width="150" height="64" rx="12" fill="#e8efee" stroke="#1b595d" stroke-width="2"/>
<text x="290" y="108" font-weight="800" fill="#1b595d">2 · Pull Request</text>
<text x="290" y="128" fill="#60687a">„bitte ansehen"</text>
<rect x="410" y="80" width="150" height="64" rx="12" fill="#eaf1fc" stroke="#3375dd" stroke-width="2"/>
<text x="485" y="108" font-weight="800" fill="#3375dd">3 · Review</text>
<text x="485" y="128" fill="#60687a">prüfen & kommentieren</text>
<rect x="605" y="80" width="150" height="64" rx="12" fill="#e5fce9" stroke="#009869" stroke-width="2"/>
<text x="680" y="108" font-weight="800" fill="#076a4a">4 · Merge</text>
<text x="680" y="128" fill="#60687a">in main übernommen</text>
</g>
<g stroke="#1b595d" stroke-width="3" fill="none">
<path d="M170 112 H213" marker-end="url(#arf)"/>
<path d="M365 112 H408" marker-end="url(#arf)"/>
<path d="M560 112 H603" marker-end="url(#arf)"/>
</g>
<text x="410" y="185" font-size="13" fill="#60687a" text-anchor="middle">Erst nach dem Review (oft mit ✅-Freigabe) wandert die Änderung in die offizielle Version.</text>
</svg>
<figcaption>Branch → Pull Request → Review → Merge: der Standard-Weg, wie Änderungen sicher in <code>main</code> kommen.</figcaption>
</figure>
<p>Im Pull Request sieht man genau, <strong>was sich ändert</strong> (alte vs. neue Zeilen, grün/rot markiert),
kann darunter <strong>diskutieren</strong>, Änderungen anfordern und am Ende auf <strong>„Merge"</strong> klicken.</p>
<h3>Und „Issues"?</h3>
<p>Ein <strong>Issue</strong> ist einfach ein <strong>Ticket / eine Notiz</strong> auf GitHub: „Hier ist ein Fehler",
„das wünschen wir uns", „das ist noch zu tun". Issues sind die To-do-Liste des Projekts – Pull Requests sind
die konkreten Lösungen dazu.</p>
<div class="callout merksatz">
<span class="tag">📌 Merksatz</span>
<p><strong>Pull Request</strong> = ein Änderungs-Vorschlag, der erst geprüft und dann übernommen (gemergt) wird. <strong>Issue</strong> = ein Ticket auf der To-do-Liste.</p>
</div>
<details class="trainer">
<summary>🧑🏫 Trainer-Tipp</summary>
<div class="body"><p>Das ist der praxisrelevanteste Punkt für Nicht-Devs – hier verbringen sie später ihre Zeit.
Wenn möglich: zeig live einen echten (harmlosen) Pull Request im Browser, damit sie die grün/rote Diff-Ansicht und den „Merge"-Button einmal gesehen haben.</p></div>
</details>
</section>
<!-- ============ KAPITEL 11 ============ -->
<section id="kap11" class="chapter">
<div class="chapter-num">Kapitel 11</div>
<h2>Die Kommandozeile – der „Profi-Weg"</h2>
<p class="lead">Alles, was du im Browser klickst, geht auch über getippte Befehle in einem schwarzen Fenster –
der Kommandozeile (auch „Terminal"). Du musst das <strong>nicht</strong> können, um loszulegen. Aber du sollst
wissen, dass es das gibt.</p>
<div class="terminal">
<div class="bar"><i></i><i></i><i></i><span>Terminal</span></div>
<pre><span class="c"># So sieht ein typischer Arbeitsablauf in der Kommandozeile aus:</span>
<span class="p">$</span> <span class="k">git clone</span> https://github.com/firma/projekt.git <span class="c"># erste Kopie holen</span>
<span class="p">$</span> <span class="k">git add</span> angebot.txt <span class="c"># Änderung in den Sammelkorb legen</span>
<span class="p">$</span> <span class="k">git commit</span> -m "Preise aktualisiert" <span class="c"># Schnappschuss + Nachricht</span>
<span class="p">$</span> <span class="k">git push</span> <span class="c"># zu GitHub hochladen</span>
</pre>
</div>
<p>Du erkennst die Begriffe wieder – es sind genau dieselben wie im Browser, nur getippt:</p>
<table>
<tr><th>Im Browser auf GitHub …</th><th>… als Befehl in der Kommandozeile</th></tr>
<tr><td>Projekt auf den Rechner holen</td><td><code>git clone …</code></td></tr>
<tr><td>Änderung markieren (Sammelkorb)</td><td><code>git add datei</code></td></tr>
<tr><td>„Commit changes" klicken</td><td><code>git commit -m "Nachricht"</code></td></tr>
<tr><td>Hochladen</td><td><code>git push</code></td></tr>
<tr><td>Neueste Änderungen holen</td><td><code>git pull</code></td></tr>
<tr><td>Neuen Branch anlegen</td><td><code>git branch name</code> / <code>git switch -c name</code></td></tr>
<tr><td>Zusammenführen</td><td><code>git merge name</code></td></tr>
</table>
<div class="callout miss">
<span class="tag">⚠️ Wichtig zur Beruhigung</span>
<p>Die Kommandozeile sieht „nach Hacker" aus, ist aber nur eine andere Bedienoberfläche für genau dieselben
Dinge. Für den Anfang reicht der Browser völlig. Viele nutzen außerdem grafische Programme wie
<strong>GitHub Desktop</strong> – Buttons statt Tippen.</p>
</div>
<div class="callout merksatz">
<span class="tag">📌 Merksatz</span>
<p>Browser, GitHub Desktop, Kommandozeile – drei Wege, <em>dasselbe</em> zu tun. Die Begriffe bleiben überall gleich.</p>
</div>
</section>
<!-- ============ KAPITEL 12 — MITMACHEN ============ -->
<section id="kap12" class="chapter">
<div class="chapter-num">Kapitel 12 · Jetzt du!</div>
<h2>✋ Mitmach-Teil: deine erste Änderung auf GitHub</h2>
<p class="lead">Komplett im Browser, ohne Installation. Am Ende hast du ein eigenes Repository angelegt und
deinen ersten Commit gemacht. Folge den Schritten – ich begleite dich.</p>
<div class="callout mitmach">
<span class="tag">✋ Was du brauchst</span>
<p>Nur einen Browser und ein kostenloses GitHub-Konto. Falls noch keins da ist: auf
<strong>github.com</strong> → „Sign up" → mit E-Mail registrieren. (In der Firma evtl. das vorhandene
Organisations-Konto nutzen – frag im Zweifel deine Trainerin / deinen Trainer.)</p>
</div>
<ol class="steps">
<li><b>Repository anlegen.</b> Oben rechts auf <b>＋</b> → „New repository". Gib einen Namen ein
(z. B. <code>mein-erstes-repo</code>), setze einen Haken bei <b>„Add a README file"</b> und klicke
<b>„Create repository"</b>. → Du hast gerade ein <strong>Repository</strong> erstellt (Kapitel 4).</li>