Center sequence Diagram

Defensio/00_preamble.tex

@@ -33,13 +33,14 @@
 \usepackage{pgfplots}
 \usepackage{pgfplotstable}
 % \usepackage{fontawesome}
+\usepackage{fontawesome5}
 \usepackage{tikzpingus}
 \usepackage{tikzducks}
 \usepackage{pdfpc}
 \usepackage{amsmath}
 
 \usepgfplotslibrary{dateplot}
-\usetikzlibrary{shapes,tikzmark}
+\usetikzlibrary{shapes,tikzmark,positioning,shapes.geometric}
 \tikzset{pipelinestep/.style={lw,rnd,shape=signal,signal from=west,signal pointer angle=130,minimum width=3cm,minimum height=2cm,draw=black,fill=lightgray!30}}
 
 \def\info#1{\begingroup\color{gray}\scriptsize#1\endgroup}

Defensio/01_Praesentation_Allgemein.md

@@ -4,8 +4,10 @@
 
 ##  {.plain}
 
+\setbeamertemplate{sidebar left}{}
+
 \begin{tikzpicture}[remember picture,overlay]
-    \node[anchor=center] at (current page.center) {
+    \node[anchor=center, inner sep=0pt, outer sep=0pt] at (current page.center) {
-        \movie[width=\paperwidth, height=\paperheight, poster, showcontrols=false, autostart]{}{\imagepath/video/introduction/sample-10s.mp4}
+        \movie[width=\paperwidth, height=\paperheight, poster, showcontrols=false, autostart]{}{\imagepath/video/introduction/introduction.mp4}
     };
 \end{tikzpicture}

Defensio/02_Praesentation_Konstantin_Hintermayer.md

@@ -4,7 +4,7 @@
 
 ::: columns
 
-:::: column
+::: {.column width="50%"}
 **Aufgabenbereiche**:
 
 - Product Owner
@@ -17,10 +17,11 @@
 - Black Board
 - Report System
 - Mass Mailer
+- Token Lifetime
   
-::::
+:::
 
-:::: column
+::: {.column width="50%"}
 
 \begin{tikzpicture}
     \clip (0,0) circle (3em);
@@ -28,14 +29,14 @@
     \draw[accent, line width=3pt] (0,0) circle (3em);
 \end{tikzpicture}
 
-::::
+:::
 
 :::
 
 ## Infrastruktur 
 
 ::: columns
-:::: column
+::: {.column width="50%"}
 
 **Entwicklung:**
 
@@ -45,8 +46,8 @@
 - **GitHub:** Transfer
 - **Gitea Actions:** CI/CD 
 
-::::
+:::
-:::: column
+::: {.column width="50%"}
 
 **Produktion:** 
 
@@ -55,51 +56,210 @@
 - **PostgreSQL:** Datenbank
 - **Oqtane:** CMS
 
-::::
+:::
 :::
 
+\vfill
 
-## CI/CD
+\begin{center}
+    \includegraphics[width=2.5em]{./Images/images/konstantin/logos/debian.pdf} \hspace{1em}
+    \includegraphics[width=2.5em]{./Images/images/konstantin/logos/docker.pdf} \hspace{1em}
+    \includegraphics[width=2.5em]{./Images/images/konstantin/logos/gitea.pdf} \hspace{1em}
+    \includegraphics[width=2.5em]{./Images/images/konstantin/logos/wireguard.pdf} \hspace{1em}
+    \includegraphics[width=2.5em]{./Images/images/konstantin/logos/github.pdf} \hspace{1em}
+    \includegraphics[width=2.5em]{./Images/images/konstantin/logos/nginx.pdf} \hspace{1em}
+    \includegraphics[width=2.5em]{./Images/images/konstantin/logos/postgres.pdf} \hspace{1em}
+    \includegraphics[width=2.5em]{./Images/images/konstantin/logos/oqtane.pdf}
+\end{center}
 
-CI: 
+\vfill
+<!-- ![](./Images/konstantin/tech_stack_logos.png){ width=100% } -->
 
-- Gitea Actions
+## {.unnumbered .noframenumbering}
-- Debian Packages (.deb)
-- Code-Reviewing:
-  - KI
-  - Git-Flow
 
-## Softwarearchitektur
+\vfill
+
+```mermaid
+sequenceDiagram
+    participant browser as Client
+    participant nginx as NginX
+    participant oqtane as Oqtane
+    participant db as PostgreSQL
+
+    browser->>+nginx: HTTPS => 0.0.0.0:443
+    nginx->>nginx: SSL Terminierung
+    nginx->>+oqtane: HTTP => 127.0.0.1:5000
+    oqtane->>+db: SQL => 127.0.0.1:5432
+    db-->>-oqtane: SQL
+    oqtane-->>-nginx: HTTP
+    nginx-->>-browser: HTTPS
+```
+
+\vfill
+
+## Vom Commit zu Paket
+
+\begin{tikzpicture}[
+    node distance=1cm,
+    stepnode/.style={circle, minimum size=1.2cm, draw, line width=1.5pt, fill=white, inner sep=0pt},
+    labelnode/.style={align=center, font=\small\bfseries},
+    textnode/.style={align=center, font=\scriptsize, color=gray},
+    track/.style={line width=2pt, gray!20}
+]
+    % Central Track
+    \draw[track] (-1,0) -- (12,0);
+
+    \node[stepnode, draw=red] (n1) at (0,0) {\color{red}\small\faCodeBranch};
+    \node[stepnode, draw=green!60!black, right=of n1] (n2) {\color{green!60!black}\small\faTag};
+    \node[stepnode, draw=blue!60!black, right=of n2] (n3) {\color{blue!60!black}\small\faTasks};
+    \node[stepnode, draw=green!60!black, right=of n3] (n4) {\color{green!60!black}\small\faBoxOpen};
+    \node[stepnode, draw=blue!60!black, right=of n4] (n5) {\color{blue!60!black}\small\faDatabase};
+
+    % Labels Above
+    \node[labelnode, below=0.2cm of n1, color=red] {Commit};
+    \node[labelnode, below=0.2cm of n2, color=green!60!black] {Tag};
+    \node[labelnode, below=0.2cm of n3, color=blue!60!black] {CI/CD};
+    \node[labelnode, below=0.2cm of n4, color=green!60!black] {.deb Paket};
+    \node[labelnode, below=0.2cm of n5, color=blue!60!black] {Registry};
+\end{tikzpicture}
+
+\vspace{1em}
+
+**Ablauf:**
+
+1. laufende Entwicklung
+2. Commit zu einem Release zusammenfassen (Tag)
+3. CI/CD Pipeline beginnt zu laufen
+4. .deb Paket wird gebaut
+5. .deb Paket wird in der Registry abgelegt
+
+## Softwarearchitektur (.NET / Oqtane)
+  
+**Design Patterns:**
+
+\vspace{1em}
+
+\begin{tikzpicture}[
+    node distance=0.15cm,
+    stepnode/.style={rectangle, draw, line width=1.5pt, minimum width=1.5cm, minimum height=1.5cm, fill=white, inner sep=0pt},
+]
+    \node[stepnode, draw=red] (n1) at (0,0) {\LARGE\color{red}S};
+    \node[stepnode, draw=green!60!black, right=of n1] (n2) {\LARGE\color{green!60!black}O};
+    \node[stepnode, draw=blue!60!black, right=of n2] (n3) {\LARGE\color{blue!60!black}L};
+    \node[stepnode, draw=orange, right=of n3] (n4) {\LARGE\color{orange}I};
+    \node[stepnode, draw=orange!70!black, right=of n4] (n5) {\LARGE\color{orange!70!black}D};
+\end{tikzpicture}
+
+\vspace{1em}
 
 - Open-Closed Principle
-- Strategy Pattern
+- Dependency Injection (IServiceProvider)
-- Dependency Injection
+- Repository-Pattern (EntityFramework)
 
-## Technischer Vergleich
+## Module
-
-Bisherige Erfahrungen:
-
-- Go
-- Typescript
-- GRPC (interprozess Kommunikation)
-
-Untersuchungsgebiete:
-
-- Typisierung
-- Konsistenz
-
-## Teamleitung
 
 ::: columns
+::: {.column width="50%"}
+**Admin Module:**
 
-:::: column
+  - Mass Mailer
-left
+  - Token Lifetime
-::::
+  - Report System
 
-:::: column
+**Allgemeine Module:**
-right
+
-::::
+  - Event Registration
+  - Black Board
 
 :::
+::: {.column width="50%"}
+\vfill
+![](./Images/images/konstantin/ReportingSystem.png)
+\vfill
+:::
+:::
+
+## Produktion $\neq$ Staging
+
+\begin{tikzpicture}[
+    node distance=2.2cm,
+    stepnode/.style={circle, minimum size=1.2cm, draw, line width=1.5pt, fill=white, inner sep=0pt},
+    labelnode/.style={align=center, font=\small\bfseries},
+    textnode/.style={align=center, font=\scriptsize, color=gray},
+    track/.style={line width=2pt, gray!20}
+]
+    % Central Track
+    \draw[track] (-1,0) -- (12,0);
+
+    % Steps
+    \node[stepnode, draw=green!60!black] (s1) at (0,0) {\color{green!60!black}\Large\faCheck};
+    \node[stepnode, draw=accent, right=of s1] (s2) {\color{accent}\Large\faCodeBranch};
+    \node[stepnode, draw=red, right=of s2] (s3) {\color{red}\Large\faExclamationTriangle};
+    \node[stepnode, draw=orange, right=of s3] (s4) {\color{orange}\Large\faLightbulb};
+
+    % Labels Above
+    \node[labelnode, above=0.2cm of s1, color=green!60!black] {Staging};
+    \node[labelnode, above=0.2cm of s2, color=accent] {Deploy};
+    \node[labelnode, above=0.2cm of s3, color=red] {Bruch};
+    \node[labelnode, above=0.2cm of s4, color=orange] {Erkenntnis};
+\end{tikzpicture}
+
+\vfill
+
+::: columns
+::: {.column width="40%"}
+"It works on my Machine"
+:::
+::: {.column width="60%"}
+**Deploymentprobleme**
+
+**Problem:** Schlechte Dokumentation.
+
+**Lösung:** Debugging mithilfe von Wireshark und Source Code lesen.
+:::
+:::
+
+
+## Teamleitung & PM
+
+::: columns
+:::: column
+**Scrum Workflow:**
+
+- 14-tägige Sprints
+- Weeklies & Retrospektiven
+- Definition of Done (DoD)
+::::
+:::: column
+**Gitea Issues / Board:**
+
+- Integrierter Workflow
+- Single Source of Truth
+  
+::::
+:::
+
+![Gitea Board](./Images/images/konstantin/GiteaIssues-TaskBoard.png){ width=60% }
 
 ## Fazit
+
+\vspace{0.5em}
+
+\begin{tikzpicture}[x=\linewidth/10, y=1cm, every node/.style={font=\sffamily}]
+    % Rule: 90/90
+    \fill[black!5] (0, 2.8) rectangle (10, 3.4);
+    \fill[green!60!black] (0, 2.8) rectangle (9, 3.4);
+    \node[anchor=north west, inner sep=3pt] at (0, 2.8) {\scriptsize Erste \textbf{90\,\%} des Codes $\rightarrow$ \textbf{90\,\%} der Zeit};
+
+    \fill[black!5] (0, 1.2) rectangle (10, 1.8);
+    \fill[accent] (0, 1.2) rectangle (1, 1.8);
+    \node[anchor=north west, inner sep=3pt, text=accent] at (0, 1.2) {\scriptsize \textbf{Letzte 10\,\% des Codes $\rightarrow$ weitere 90\,\% der Zeit}};
+\end{tikzpicture}
+
+\vspace{1em}
+
+Learnings:
+
+- **Asynchrones Arbeiten:** Entkopplung von Meetings und Deadlines.
+- **Review-First-Policy:** Konsequente Umsetzung der *Definition of Done*.
+- **Team-Fokus:** höhere Motivation und Eigenverantwortung durch Verkleinerung des Teams.

Defensio/03_Praesentation_Florian_Edlmayer.md

@@ -1,13 +1,58 @@
 # Florian Edlmayer
 
 ## Individueller Teil: Florian Edlmayer
-**Datensicherheit, Backup-Systeme & Premium-Bereich**
+
+\vspace{0.8em}
+
+\begin{center}
+\begin{tikzpicture}
+
+% ── Card 1: Datensicherheit ────────────────────────────────────────
+\fill[rounded corners=6pt, fill=orange!8]  (0,0)   rectangle (3.4,-3.0);
+\draw[rounded corners=6pt, orange, line width=1.8pt] (0,0) rectangle (3.4,-3.0);
+\begin{scope}
+  \clip[rounded corners=6pt] (0,0) rectangle (3.4,-3.0);
+  \fill[orange] (0,0) rectangle (3.4,-0.85);
+\end{scope}
+\node[text=white, font=\small\bfseries, align=center] at (1.7,-0.425)
+  {\faLock\ \ Datensicherheit};
+\node[font=\small, align=center, text width=3.0cm] at (1.7,-1.95)
+  {DSGVO-konform \& verschlüsselt};
+
+% ── Card 2: Backup-Systeme ─────────────────────────────────────────
+\fill[rounded corners=6pt, fill=orange!8]  (3.8,0) rectangle (7.2,-3.0);
+\draw[rounded corners=6pt, orange, line width=1.8pt] (3.8,0) rectangle (7.2,-3.0);
+\begin{scope}
+  \clip[rounded corners=6pt] (3.8,0) rectangle (7.2,-3.0);
+  \fill[orange] (3.8,0) rectangle (7.2,-0.85);
+\end{scope}
+\node[text=white, font=\small\bfseries, align=center] at (5.5,-0.425)
+  {\faDatabase\ \ Backup-Systeme};
+\node[font=\small, align=center, text width=3.0cm] at (5.5,-1.95)
+  {Automatisch, täglich \& zuverlässig};
+
+% ── Card 3: Premium-Bereich ────────────────────────────────────────
+\fill[rounded corners=6pt, fill=orange!8]  (7.6,0) rectangle (11.0,-3.0);
+\draw[rounded corners=6pt, orange, line width=1.8pt] (7.6,0) rectangle (11.0,-3.0);
+\begin{scope}
+  \clip[rounded corners=6pt] (7.6,0) rectangle (11.0,-3.0);
+  \fill[orange] (7.6,0) rectangle (11.0,-0.85);
+\end{scope}
+\node[text=white, font=\small\bfseries, align=center] at (9.3,-0.425)
+  {\faStar\ \ Premium-Bereich};
+\node[font=\small, align=center, text width=3.0cm] at (9.3,-1.95)
+  {Exklusiv, motivierend \& sicher};
+
+\end{tikzpicture}
+\end{center}
 
 ---
 
 ## Ausgangslage & Zielsetzung
 - **Ausgangssituation**: 
-  - Keine digitale, sichere Absolventen-Vernetzung.
+  - Kein digitaler Vernetzungsraum für Absolventen.
+  - Keine rechtskonforme Datenverwaltung (DSGVO).
+  - Keine automatisierte Datensicherung vorhanden.
 - **Mein Beitrag**:
   - Datenschutz (DSGVO).
   - Automatisierte Backups & Restore.
@@ -18,20 +63,77 @@
 ---
 
 ## Eingesetzte Technologien
-- **Framework**: ASP.NET Core & .NET 8
+
-- **Datenbanksystem**: PostgreSQL
+\vspace{1em}
-- **Authentifizierung**: OAuth 2.0 (LinkedIn)
+
-- **Scripting & Automation**: Bash-Skripte für Linux Cronjobs
+\begin{columns}[c]
+
+\begin{column}{0.33\textwidth}
+\centering
+\includegraphics[height=2.2cm]{image-1.png}\\[0.5em]
+{\large\textbf{\color{accent}PostgreSQL}}\\[0.3em]
+{\small Relationale Datenbank\\für strukturierte Datenspeicherung}
+\end{column}
+
+\begin{column}{0.33\textwidth}
+\centering
+\includegraphics[height=2.2cm]{image-6.png}\\[0.5em]
+{\large\textbf{\color{accent}LinkedIn OAuth 2.0}}\\[0.3em]
+{\small Sichere Authentifizierung\\ohne eigene Passwortverwaltung}
+\end{column}
+
+\begin{column}{0.33\textwidth}
+\centering
+\includegraphics[height=2.2cm]{image-7.png}\\[0.5em]
+{\large\textbf{\color{accent}Bash}}\\[0.3em]
+{\small Automatisierte Skripte\\für Linux Cronjobs}
+\end{column}
+
+\end{columns}
 
 ---
 
+
 ## DSGVO & Datenschutz
 - **Rechtliche Basis**: Einhaltung von DSGVO & DSG.
 - **Umsetzung**:
-  - **Datenschutzerklärung**: Rechtskonform integriert.
+
-  - **Datenminimierung**: Nur zwingend benötigte Daten.
+\begin{center}
-  - **Vertraulichkeit**: TLS/HTTPS & lokales Austria-Hosting.
+\begin{tikzpicture}[
-  - **Betroffenenrechte**: Auskunft & Löschung garantiert.
+    node distance=0.5cm,
+    stepnode/.style={rectangle, rounded corners=3pt, minimum width=4.2cm, minimum height=2.2cm, draw, line width=1pt, fill=white, inner sep=2pt},
+    iconnode/.style={circle, minimum size=0.8cm, fill=gray!5},
+    titlenode/.style={align=center, font=\scriptsize\bfseries},
+    arrow/.style={-latex, line width=1.5pt, color=accent!60}
+]
+    % Obere Reihe
+    \node[stepnode, draw=gray]           (n1) at (0,0) {};
+    \node[stepnode, draw=green!60!black, right=of n1] (n2) {};
+
+    % Untere Reihe
+    \node[stepnode, draw=blue!60!black,  below=of n1] (n3) {};
+    \node[stepnode, draw=orange,         below=of n2] (n4) {};
+
+    % Icons – obere Reihe
+    \node[iconnode] at (n1.north) [yshift=-0.7cm] {\color{gray}\small\faFile};
+    \node[iconnode] at (n2.north) [yshift=-0.7cm] {\color{green!60!black}\small\faFilter};
+
+    % Icons – untere Reihe
+    \node[iconnode] at (n3.north) [yshift=-0.7cm] {\color{blue!60!black}\small\faLock};
+    \node[iconnode] at (n4.north) [yshift=-0.7cm] {\color{orange}\small\faUserShield};
+
+    % Labels
+    \node[titlenode] at (n1.center) [yshift=-0.2cm] {Datenschutz-\\erkl\"{a}rung};
+    \node[titlenode] at (n2.center) [yshift=-0.2cm] {Daten-\\minimierung};
+    \node[titlenode] at (n3.center) [yshift=-0.2cm] {Vertrau-\\lichkeit};
+    \node[titlenode] at (n4.center) [yshift=-0.2cm] {Betroffenen-\\rechte};
+
+    % Pfeile: → rechts oben, ↓ rechts, → rechts unten
+    % \draw[arrow] (n1) -- (n2);
+    % \draw[arrow] (n2) -- (n4);
+    % \draw[arrow] (n3) -- (n4);
+\end{tikzpicture}
+\end{center}
 
 ---
 
@@ -39,12 +141,9 @@
 - **Problem**: Datenverlust (Hardware, Software, Cyberangriffe).
 - **Lösung**: Vollautomatisiertes Backup-Skript.
 
-**Automatischer Ablauf (täglich 02:30 Uhr):**
+\vspace{2em}
-1. Cronjob startet → Konfiguration wird geladen
+
-2. Datenbank-Backup wird erstellt
+![](image.png)
-3. Restliches Dateisystem wird komprimiert
-4. Fehlerüberprüfung → bei Fehler: Log-Eintrag & Abbruch
-5. Rotation: Nur die letzten 30 Backups bleiben erhalten, ältere werden automatisch gelöscht
 
 ---
 
@@ -65,7 +164,7 @@
   - Abbau von Registrierungshürden. 
   - Keine sensiblen Passwörter im eigenen System.
 
-![Ablauf der OAuth-Authentifizierung](Images/oauth-flow-new.png)
+![](Images/oauth-flow-new.png){width=20em}
 
 ---
 
@@ -79,12 +178,7 @@
 ---
 
 ## Der Premium-Bereich (2)
-**Architektur des Premium-Bereich-Moduls:**
+![](./Images/images/florian/image-3.png)
-**Technische Architektur:**
-- **Frontend**: Blazor WebAssembly (Oqtane) → ruft API auf
-- **Backend**: ASP.NET Core Controller → Service-Schicht mit Rechteverwaltung
-- **Datenbank**: EF Core → PostgreSQL mit Audit-Trail (jede Premium-Vergabe nachvollziehbar)
-
 **Datensparsame Mitgliedersuche & Kontaktfunktion:**
 ![Mitgliedersuche und Kontaktfunktion für Premium-Mitglieder](../Diplomarbeitsbuch/images/04-Florian/premium-mitglieder-suche.png)
 
@@ -96,6 +190,7 @@
   - Hohe Ausfallsicherheit (automatisierte Bash-Backups).
   - Barrierefreier Zugang (LinkedIn-Login).
   - Echter Mehrwert durch Premium-Funktionen.
-- **Ausblick**: 
+- **Persönliche Learnings**:
-  - Weitere OAuth-Anbieter (z.B. Google, Microsoft).
+  - Tiefes Verständnis für moderne Webtechnologien (ASP.NET, PostgreSQL, OAuth 2.0).
-  - Ausbau zukünftiger Premium-Features.
+  - Agile Arbeitsweise mit Scrum stärkt Planung & Zeitmanagement.
+  - Komplexe Projekte fördern Selbstorganisation & Problemlösungskompetenz.

Defensio/04_Praesentation_Adam_Gaiswinkler.md

@@ -7,7 +7,8 @@
   - Oqtane-Theme
   - Hall-of-Fame-Modul
   - Anmeldetool
-- **Ziel**: Moderne, responsive Website für den HTL-Absolventenverein
+- **Ziel**: 
+  - Moderne, responsive Website für den SZU Absolventenverein
 
 ---
 
@@ -50,10 +51,10 @@
 ::: columns
 
 :::: column
-- Eigen‑Navigation (bootstrap Komponenten haben nicht gepasst ).
+- Eigen‑Navigation (Bootstrap-Komponenten haben nicht gepasst).
 - Systemseiten per LINQ ausblenden.
 - Responsive CSS‑Media‑Queries + reines CSS‑Burger‑Menu.
-- Cookie‑Consent (erforderlich für dsgvo konformität und gesamtheit der website ).
+- Cookie‑Consent (erforderlich für DSGVO-Konformität und Gesamtheit der Website).
 ::::
 
 :::: column
@@ -77,7 +78,7 @@
 
 :::: column
 \begin{tikzpicture}
-\node[inner sep=0pt, rounded corners=5pt, clip] {\includegraphics[width=0.55\columnwidth]{Images/HallOfFameBeispiel.png}};
+\node[inner sep=0pt, rounded corners=5pt, clip] {\includegraphics[width=0.55\columnwidth]{Images/HallOfFamePdfNeuBesser.png}};
 \end{tikzpicture}
 ::::
 
@@ -117,44 +118,94 @@
 ---
 
 ## Anmeldetool
-- **UI**: Ja/Nein‑Buttons (grün/rot)
-- **Live‑Feedback**: Sofortige Statusänderung via Blazor
-- **Mobile**: Sauberes Touch-Handling
-- **Architektur**: UI & Backend-API getrennt
-
----
-
-## Herausforderungen & Lösungen
-- **Plattformwechsel** Windows → macOS
-  - Oqtane stark an Windows gebunden
-  - → **Visual Studio Code** als plattformübergreifende Lösung
-- **Keine funktionsfähige Website** (Sommer 2025)
-  - Kurz vor einem Event, kein funktionierendes CMS
-  - → Schnelle **Node.js/HTML-Übergangslösung** sicherte Event-Anmeldung
-
----
-
-## Learnings
-
 \vspace{1cm}
 \begin{tikzpicture}[remember picture, overlay]
 \node at (current page.center) {
-\renewcommand{\arraystretch}{1.5}
+\begin{tabular}{@{}c@{\hspace{4mm}}c@{}}
-\begin{tabular}{c c c}
+\begin{tcolorbox}[colback=accent!5, colframe=accent, arc=3pt, title=\textbf{UI}, width=6.5cm, height=2cm, valign=center]
-\textbf{Technisch} & \textbf{Methodisch} & \textbf{Persönlich} \\
+\centering Ja/Nein-Buttons (grün/rot)
-\hline
+\end{tcolorbox}
-Git & Aufgabenverteilung & Eigeninitiative \\
+&
-CSS-Flexbox & Regelmäßige Meetings & Verantwortung \\
+\begin{tcolorbox}[colback=accent!5, colframe=accent, arc=3pt, title=\textbf{Live-Feedback}, width=6.5cm, height=2cm, valign=center]
-Blazor & & \\
+\centering Sofort via Blazor
+\end{tcolorbox}
+\\[3mm]
+\begin{tcolorbox}[colback=accent!5, colframe=accent, arc=3pt, title=\textbf{Mobile}, width=6.5cm, height=2cm, valign=center]
+\centering Sauberes Touch-Handling
+\end{tcolorbox}
+&
+\begin{tcolorbox}[colback=accent!5, colframe=accent, arc=3pt, title=\textbf{Architektur}, width=6.5cm, height=2cm, valign=center]
+\centering UI \& Backend-API getrennt
+\end{tcolorbox}
 \end{tabular}
 };
 \end{tikzpicture}
 
 ---
 
-## Fazit & Ausblick
+## Herausforderungen & Lösungen
-- **Ergebnis**:
+
-  - Theme final & mobil-optimiert
+\vspace{5mm}
-  - Hall of Fame funktionsfähig
+\begin{tikzpicture}[remember picture, overlay,
-  - Anmeldetool einsatzbereit
+  problem/.style={rectangle, rounded corners=3pt, draw=red!60!black, fill=red!8, minimum width=5cm, minimum height=1.4cm, align=center, font=\small},
+  solution/.style={rectangle, rounded corners=3pt, draw=green!60!black, fill=green!8, minimum width=5cm, minimum height=1.4cm, align=center, font=\small},
+  header/.style={font=\small\bfseries\color{gray!70!black}},
+  arrow/.style={-latex, line width=1.5pt, color=accent!70}
+]
+% Spalten-Header
+\node[header] at ([xshift=-2.5cm, yshift=2.2cm]current page.center) {Herausforderung};
+\node[header] at ([xshift=4cm, yshift=2.2cm]current page.center) {Lösung};
+
+% Reihe 1
+\node[problem] at ([xshift=-2.5cm, yshift=0.9cm]current page.center) (p1) {$\triangle$\;\textbf{Plattformwechsel}\\[-1mm]{\scriptsize Windows $\rightarrow$ macOS}};
+\node[solution] at ([xshift=4cm, yshift=0.9cm]current page.center) (s1) {\checkmark\;\textbf{Visual Studio Code}\\[-1mm]{\scriptsize Plattformübergreifend}};
+
+% Reihe 2
+\node[problem] at ([xshift=-2.5cm, yshift=-1.1cm]current page.center) (p2) {$\triangle$\;\textbf{Kein CMS verfügbar}\\[-1mm]{\scriptsize Sommer 2025, Event steht an}};
+\node[solution] at ([xshift=4cm, yshift=-1.1cm]current page.center) (s2) {\checkmark\;\textbf{Node.js/HTML}\\[-1mm]{\scriptsize Übergangslösung}};
+
+% Reihe 3
+\node[problem] at ([xshift=-2.5cm, yshift=-3.1cm]current page.center) (p3) {$\triangle$\;\textbf{UI-Fehler am Handy}\\[-1mm]{\scriptsize Clipping-Probleme}};
+\node[solution] at ([xshift=4cm, yshift=-3.1cm]current page.center) (s3) {\checkmark\;\textbf{Testen und Anpassen}\\[-1mm]{\scriptsize Debuggen und Verbessern der UI}};
+
+\draw[arrow] (p1) -- (s1);
+\draw[arrow] (p2) -- (s2);
+\draw[arrow] (p3) -- (s3);
+\end{tikzpicture}
+
+---
+
+## Learnings
+
+\vspace{1cm}
+\begin{tikzpicture}[remember picture, overlay,
+  every node/.style={font=\small},
+  branch/.style={thick, accent},
+  cat/.style={rectangle, rounded corners=3pt, draw=accent, fill=accent!15, font=\small\bfseries, minimum height=7mm, align=center},
+  item/.style={font=\scriptsize, align=left}
+]
+\node[circle, draw=accent, fill=accent!20, font=\bfseries, minimum size=1.5cm] at (current page.center) (center) {Learnings};
+
+% Technisch - links
+\node[cat] at ([xshift=-3.5cm, yshift=0.8cm]current page.center) (tech) {Technisch};
+\draw[branch] (center) -- (tech);
+\node[item, anchor=east] at ([xshift=-1mm, yshift=5mm]tech.west) {Git};
+\node[item, anchor=east] at ([xshift=-1mm]tech.west) {CSS-Flexbox};
+\node[item, anchor=east] at ([xshift=-1mm, yshift=-5mm]tech.west) {Blazor};
+
+% Methodisch - rechts oben
+\node[cat] at ([xshift=3.5cm, yshift=0.8cm]current page.center) (meth) {Methodisch};
+\draw[branch] (center) -- (meth);
+\node[item, anchor=west] at ([xshift=1mm, yshift=3mm]meth.east) {Aufgaben-};
+\node[item, anchor=west] at ([xshift=1mm, yshift=-3mm]meth.east) {verteilung};
+\node[item, anchor=west] at ([xshift=1mm, yshift=-9mm]meth.east) {Meetings};
+
+% Persönlich - unten
+\node[cat] at ([yshift=-2cm]current page.center) (pers) {Persönlich};
+\draw[branch] (center) -- (pers);
+\node[item] at ([yshift=-7mm]pers.south) {Eigeninitiative \& Verantwortung};
+\end{tikzpicture}
+
+
+