CCT4U Dokumentation

Überblick: Wie die Komponenten zusammenarbeiten

Stell dir das Cookie-System wie eine Hierarchie vor:

1. Kategorien = Die Hauptordner (z.B. "Marketing")
2. Dienste = Die konkreten Dienste in den Ordnern (z.B. "Google Analytics")
3. Skripte & Cookies =
   Skripte – Der Code, der für die Dienste ausgeführt wird (z.B. Google Analytics-Tracking-Code)
   Cookies – Die kleinen Dateien, die von den Diensten gesetzt werden (z.B. "_ga"-Cookie)

1. Kategorien – Die grundlegende Organisation

Was sind Kategorien?

Kategorien sind die Hauptthemenbereiche, in die du deine Dienste einordnest. Sie helfen den Besuchern deiner Website zu verstehen, wofür unterschiedliche Cookies eingesetzt werden.

Standard-Kategorien:

• "Notwendig" (wird automatisch erstellt, kann nicht gelöscht werden)
• "Marketing" (für Werbung und Tracking)
• "Komfort" (für bessere Benutzererfahrung)
• "Statistik" (für Analyse des Besucherverhaltens)

Wie füge ich Kategorien hinzu:

1. Titel: Z.B. "Marketing und Werbung" (frei wählbar)
2. Schlüssel: Wird automatisch generiert (z.B. "marketing-und-werbung"), kann aber bei Bedarf manuell angepasst werden
3. Beschreibung: "Diese Dienste helfen uns, unsere Werbung zu verbessern und dir relevante Inhalte zu zeigen."

2. Dienste – Die konkreten Services

Was sind Dienste?

Dienste sind die tatsächlichen Services, die du auf deiner Website verwendest. Jeder Dienst gehört zu einer Kategorie und kann mehrere Skripte und Cookies haben.

Beispiele für Dienste:

• Google Analytics (Kategorie: Statistik)
• Facebook Pixel (Kategorie: Marketing)
• YouTube Videos (Kategorie: Komfort)
• Google Fonts (Kategorie: Notwendig)

Wie füge ich Dienste hinzu:

1. Name: google-analytics (technischer Name, keine Leerzeichen! – frei wählbar, aber muss eindeutig sein)
2. Titel: "Google Analytics" (für Besucher sichtbar – frei wählbar)
3. Beschreibung: "Hilft uns zu verstehen, wie unsere Website genutzt wird" (frei wählbar)
4. Kategorie: Wähle aus deinen zuvor erstellten Kategorien

<?php
// functions.php - DSGVO-VERSTOSS!
wp_enqueue_style('google-fonts',
    'https://fonts.googleapis.com/css2?family=Roboto');
// → Lädt IMMER, auch ohne Zustimmung!

<?php
// Aus functions.php entfernen!
// Stattdessen zu CCT4U → Dienste → Skripte-Tab hinzufügen:

// Skript-Code (im CCT4U Admin):
<link href="https://fonts.googleapis.com/css2?family=Roboto"
      rel="stylesheet"
      type="text/css">

Backend-Platzhalter für Dienste (Contextual Consent)

Was sind Backend-Platzhalter?

Beim Erstellen oder Bearbeiten eines Dienstes im Backend findest du die Option "Platzhalter anzeigen". Diese aktiviert die sogenannte "Contextual Consent"-Funktion von Klaro.

Wie funktioniert es?

Statt blockierte Inhalte einfach zu verstecken, zeigt CCT4U einen ansprechenden Platzhalter mit zwei Buttons:

• "Ja" – Aktiviert den Dienst nur für diese Sitzung
• "Immer" – Aktiviert den Dienst dauerhaft (speichert Zustimmung)

Sobald der Besucher auf einen der Buttons klickt, verschwindet der Platzhalter und der eigentliche Inhalt (z.B. YouTube Video, Google Maps Karte) wird geladen.

Platzhalter-Hintergrundbild (optional)

Du kannst zusätzlich ein Hintergrundbild für den Platzhalter festlegen. Das ist besonders nützlich für:

• Google Maps: Statisches Kartenbild als Vorschau
• YouTube Videos: Screenshot des Videos oder Thumbnail
• Andere Dienste: Logo oder relevante Grafik

Wo konfiguriere ich das?

Im WordPress-Backend unter CCT4U → Dienste:

1. Öffne oder erstelle einen Dienst (z.B. "Google Maps")
2. Aktiviere die Checkbox "Platzhalter anzeigen"
3. Optional: Klicke auf "Bild auswählen" und wähle ein Hintergrundbild aus deiner Mediathek
4. Speichere die Änderungen

Wann sollte ich Backend-Platzhalter verwenden?

Beispiel: Google Maps mit Backend-Platzhalter

<iframe data-src="https://www.google.com/maps/embed?pb=..."
        data-name="google-maps"
        width="600"
        height="450"
        style="border:0;">
</iframe>

2a. Manuelle Integration mit data-name

Was ist data-name?

Das data-name-Attribut verbindet HTML-Elemente (Skripte, Iframes, Bilder, etc.) mit deinen konfigurierten Diensten. Elemente werden nur geladen, wenn der Besucher dem entsprechenden Dienst zugestimmt hat.

Wann verwende ich data-name?

Verwende data-name, wenn du manuell externe Inhalte in deine Seiten oder Beiträge einbetten möchtest, die eine Benutzerzustimmung erfordern:

• YouTube Videos
• Google Maps Einbettungen
• Social Media Einbettungen (Facebook, Instagram, etc.)
• Externe Skripte, die Zustimmung benötigen
• Bilder von externen Servern

Wie verwende ich data-name in verschiedenen Elementen:

A) Skripte mit data-name

Für Skripte, die erst nach Zustimmung geladen werden sollen, verwende:

<script data-type="application/javascript"
        type="text/plain"
        data-name="google-analytics">
  // Dein JavaScript-Code hier
  console.log('Google Analytics geladen!');
</script>

Erklärung:

• type="text/plain" - Verhindert, dass der Browser das Skript sofort ausführt
• data-type="application/javascript" - Der tatsächliche Skript-Typ nach Zustimmung
• data-name="google-analytics" - Entspricht deinem Dienst-Namen

B) iframes (YouTube, Google Maps) mit data-name

Für eingebettete Inhalte, ersetze src durch data-src:

YouTube Beispiel:

<iframe data-src="https://www.youtube.com/embed/VIDEO_ID"
        data-name="youtube"
        width="560"
        height="315"
        frameborder="0"
        allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
        allowfullscreen>
</iframe>

Google Maps Beispiel:

<iframe data-src="https://www.google.com/maps/embed?pb=YOUR_EMBED_CODE"
        data-name="google-maps"
        width="600"
        height="450"
        style="border:0;"
        allowfullscreen=""
        loading="lazy">
</iframe>

Erklärung:

• data-src statt src - Die iframe-URL wird erst nach Zustimmung aktiviert
• data-name="youtube" - Muss exakt mit deinem Dienst-Namen übereinstimmen

C) Bilder mit data-name

Für Bilder von externen Servern, die Zustimmung benötigen:

<img data-src="https://external-server.com/image.jpg"
     data-name="external-service"
     alt="Beschreibung"
     width="600" />

D) Div/Container-Elemente mit data-name

Für komplexe Einbettungen oder Widgets:

<div data-name="facebook-widget">
  <!-- Facebook Widget Embed-Code hier -->
</div>

Wie füge ich das in WordPress hinzu:

Gutenberg Editor (Block-Editor):

1. Füge einen "Eigenes HTML"-Block hinzu
2. Füge deinen Code mit data-name-Attribut ein
3. Veröffentliche oder aktualisiere die Seite/den Beitrag

Classic Editor:

1. Wechsle zum "Text"-Modus (nicht "Visuell")
2. Füge deinen Code mit data-name-Attribut ein
3. Veröffentliche oder aktualisiere die Seite/den Beitrag

Vollständige Beispiele:

Beispiel 1: Google Maps Einbettung

<iframe data-src="https://www.google.com/maps/embed?pb=..."
        data-name="google-maps"
        width="600"
        height="450">
</iframe>

Beispiel 2: YouTube Video

<iframe data-src="https://www.youtube.com/embed/dQw4w9WgXcQ"
        data-name="youtube"
        width="560"
        height="315">
</iframe>

Beispiel 3: Google Analytics Inline-Skript

<script data-type="application/javascript"
        type="text/plain"
        data-name="google-analytics">
  gtag('event', 'page_view', {
    'page_title': 'Homepage',
    'page_path': '/'
  });
</script>

2b. Bedingte Inhaltsanzeige mit data-without-consent

Was ist data-without-consent?

Das data-without-consent-Attribut ermöglicht es, Inhalte NUR anzuzeigen, wenn der Besucher einem Dienst NICHT zugestimmt hat. Dies ist das Gegenteil von data-name.

Wann verwende ich data-without-consent?

Verwende data-without-consent für Platzhalter, Hinweise oder alternative Inhalte, die nur erscheinen sollen, solange der Besucher KEINEN Consent gegeben hat:

• Placeholder-Nachrichten - "Zum Anzeigen der Karte bitte zustimmen"
• Aktivierungs-Buttons - Button zum Öffnen der Consent-Einstellungen
• Alternative Inhalte - Statisches Bild statt eingebettetem Video
• Hinweistexte - Information über blockierte Inhalte

Technische Details:

• Das ursprüngliche display-Attribut des Elements wird automatisch gespeichert
• Bei Zustimmungswiderruf wird der ursprüngliche Wert wiederhergestellt
• Falls der Dienst nicht existiert, wird das Element angezeigt (Graceful Degradation)
• Keine Animationen, hartes display: none bzw. display: block

Vollständige Beispiele:

Beispiel 1: YouTube Video mit Platzhalter-Nachricht

<!-- Nachricht wird NUR angezeigt wenn YouTube NICHT zugestimmt wurde -->
<div data-without-consent="youtube"
     style="padding: 20px;
            background: #f5f5f5;
            text-align: center;
            border-radius: 8px;">
    <p><strong>⚠️ YouTube ist derzeit deaktiviert</strong></p>
    <p>Um dieses Video anzusehen, aktiviere bitte YouTube in den Cookie-Einstellungen.</p>
    <button onclick="klaro.show()"
            style="padding: 10px 20px;
                   background: #0073aa;
                   color: white;
                   border: none;
                   border-radius: 5px;
                   cursor: pointer;">
        YouTube aktivieren
    </button>
</div>

<!-- YouTube iframe wird NUR angezeigt wenn zugestimmt wurde -->
<iframe data-src="https://www.youtube.com/embed/dQw4w9WgXcQ"
        data-name="youtube"
        width="560"
        height="315"
        frameborder="0"
        allowfullscreen>
</iframe>

Beispiel 2: Google Maps mit Platzhalter-Bild

<!-- Container für beide Varianten -->
<div style="position: relative; width: 600px; height: 450px;">

    <!-- Platzhalter-Bild - wird NUR OHNE Consent angezeigt -->
    <div data-without-consent="google-maps"
         style="width: 100%;
                height: 100%;
                background: url('/pfad/zur/karten-vorschau.jpg') center/cover;
                display: flex;
                align-items: center;
                justify-content: center;">
        <div style="background: rgba(255,255,255,0.95);
                    padding: 30px;
                    border-radius: 10px;
                    text-align: center;
                    max-width: 300px;">
            <h3>📍 Kartenansicht</h3>
            <p>Aktiviere Google Maps um die interaktive Karte zu sehen.</p>
            <button onclick="klaro.show()">Karte aktivieren</button>
        </div>
    </div>

    <!-- Echte Google Maps - wird NUR MIT Consent angezeigt -->
    <iframe data-src="https://www.google.com/maps/embed?pb=YOUR_EMBED_CODE"
            data-name="google-maps"
            width="600"
            height="450"
            style="border:0;"
            allowfullscreen>
    </iframe>

</div>

Beispiel 3: Kontextabhängiger Hinweistext

<!-- Hinweis wird NUR angezeigt wenn Google Analytics NICHT aktiv ist -->
<div data-without-consent="google-analytics"
     style="background: #e7f7ff;
            padding: 15px;
            border-left: 4px solid #00a0d2;
            margin: 20px 0;">
    <p><strong>ℹ️ Anonyme Statistiken deaktiviert</strong></p>
    <p>
        Aktuell erfassen wir keine Nutzungsstatistiken.
        Wenn du uns helfen möchtest, die Website zu verbessern,
        kannst du anonyme Statistiken aktivieren.
    </p>
    <button onclick="klaro.show()">
        Zu den Einstellungen
    </button>
</div>

Kombination von data-without-consent und data-name:

Die wahre Stärke liegt in der Kombination beider Attribute für nahtlose User Experience:

Tipp: Immer beide Zustände abdecken!

<!-- Container für beide Zustände -->
<div class="video-container">

    <!-- Zustand 1: OHNE Consent -->
    <div data-without-consent="youtube">
        Platzhalter-Inhalt hier
    </div>

    <!-- Zustand 2: MIT Consent -->
    <iframe data-name="youtube" data-src="..."></iframe>

</div>

So sieht der Besucher IMMER passenden Inhalt, egal ob Consent gegeben wurde oder nicht!

Häufige Fehler:

• Falscher Dienst-Name: data-without-consent muss exakt mit dem Dienst-Namen übereinstimmen (z.B. "youtube", nicht "YouTube")
• Display-Wert vergessen: Stelle sicher, dass das Element einen sichtbaren display-Wert hat (block, flex, etc.)
• Dienst existiert nicht: Der referenzierte Dienst muss in CCT4U konfiguriert sein
• Inkonsistente Namen: data-name und data-without-consent müssen denselben Dienst-Namen verwenden

Test-Anleitung:

1. Initiale Ansicht: Öffne die Seite im Inkognito-Modus → Platzhalter (data-without-consent) sollte sichtbar sein
2. Consent geben: Öffne Consent-Modal, akzeptiere den Dienst → Platzhalter verschwindet, echter Inhalt (data-name) erscheint
3. Consent widerrufen: Öffne Consent-Modal erneut, widerrufe Zustimmung → Echter Inhalt verschwindet, Platzhalter erscheint wieder
4. Browser DevTools: Überprüfe im "Elements"-Tab, dass display-Werte korrekt umgeschaltet werden

Vorteile von data-without-consent:

• Bessere User Experience - Keine leeren Bereiche auf der Seite
• Transparenz - Besucher wissen, was blockiert ist
• Call-to-Action - Direkte Möglichkeit zur Aktivierung
• Flexibilität - Jedes HTML-Element kann verwendet werden
• Reaktiv - Automatische Aktualisierung bei Consent-Änderungen

3. Skripte – Der ausführbare Code

Was sind Skripte?

Skripte sind JavaScript-Code-Schnipsel, die nur ausgeführt werden, wenn der Besucher dem entsprechenden Dienst zugestimmt hat.

Zwei Arten von Skripten:

A) Vollständige Script-Tags:

<script async src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'GA_MEASUREMENT_ID');
</script>

B) Reiner JavaScript-Code:

window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'GA_MEASUREMENT_ID');

Wie füge ich Skripte hinzu:

1. Dienst: Wähle den Dienst (z.B. "google-analytics")
2. Position:
   • "Head Start" = Wird in <head> geladen
   • "Body End" = Wird vor </body> geladen
3. Code: Füge deinen JavaScript-Code ein
4. Aktiv: Aktiviere das Häkchen, um das Skript zu aktivieren

4. Cookies – Die gespeicherten Daten

Was sind Cookies?

Cookies sind kleine Dateien, die Dienste auf dem Computer des Besuchers speichern. Du musst sie registrieren, damit das Plugin sie verwalten kann.

Cookie-Beispiele:

• _ga (Google Analytics Session Cookie)
• _gid (Google Analytics Besucher-ID)
• fbp (Facebook Pixel)
• YSC (YouTube Session)

Wie füge ich Cookies hinzu:

1. Name: _ga (exakter Cookie-Name)
2. Domain: .your-website.com (mit Punkt = auch Subdomains)
3. Pfad: / (normalerweise der Root-Pfad)
4. Dienst: Wähle den entsprechenden Dienst
5. Ablauf: "2 Jahre" oder "Session" (für Besucher-Info)
6. Regex: Nur aktivieren für Muster wie _ga_*

Warum Cookies registrieren, wenn Skripte blockiert werden?

Die Antwort: Drei kritische Gründe

1. Zustimmungswiderruf & Cookie-Löschung

Wichtigster Grund!

Szenario:

1. Benutzer gibt Zustimmung → GA-Skript läuft → Cookies werden gesetzt (_ga, _gid)
2. Benutzer widerruft Zustimmung später
3. Plugin muss die Cookies LÖSCHEN
4. Ohne Cookie-Registrierung → Keine Löschung möglich!

2. DSGVO-Transparenzanforderungen

Rechtliche Verpflichtung!

Die DSGVO verlangt:

• Vollständige Information über ALLE Cookies, die gesetzt werden KÖNNTEN
• Benutzer müssen VOR der Zustimmung informiert werden
• Cookie-Liste wird im Consent-Modal angezeigt

Beispiel im CCT4U Modal:

Google Analytics
├─ _ga (2 Jahre) - Unterscheidet Benutzer
├─ _gid (24 Stunden) - Unterscheidet Benutzer
└─ _gat (1 Minute) - Drosselt Anfragen

3. Fehlerschutz & Fallback

Sicherheitsnetz!

Was wenn:

• Skript falsch konfiguriert ist (fehlendes type="text/plain")
• Ein anderes Plugin GA lädt (außerhalb der CCT4U-Kontrolle)
• Server-seitiger Code Cookies setzt

Dann:

• Cookie-Registrierung ermöglicht Löschversuch
• Benutzer können über CCT4U-Interface entfernen

Technische Einschränkungen

Beispiel:

• GA im First-Party-Modus: Löschbar
• GA im Third-Party-Modus: Nicht löschbar
• YouTube Embed-Cookies: Normalerweise löschbar

Best Practice

5. External Resources Scanner - DSGVO Compliance Tool

<?php
// In functions.php oder header.php - FALSCH!
wp_enqueue_style('google-fonts',
    'https://fonts.googleapis.com/css2?family=Roboto');

// Das lädt IMMER, auch wenn:
// - JavaScript AUS ist
// - Benutzer Zustimmung verweigert hat
// → DSGVO-VERSTOSS!

Was macht der Scanner?

Der External Resources Scanner durchsucht dein aktives Theme nach externen Ressourcen (Google Fonts, Google Maps, CDNs, Tracking-Skripte, etc.), die hartcodiert sind und die DSGVO verletzen könnten.

Der Scanner findet:

• Google Fonts - fonts.googleapis.com
• Google Maps - maps.google.com
• YouTube - youtube.com/embed
• Google Analytics - google-analytics.com
• Facebook - facebook.com, connect.facebook.net
• CDN-Skripte - cdnjs.com, jsdelivr.net
• Font Awesome - fontawesome.com
• Und mehr...

Wie benutze ich den Scanner:

1. Gehe zu WordPress Admin → Tools → CCT4U Scanner
2. Klicke auf "Scan durchführen"
3. Überprüfe die Ergebnisse gruppiert nach Schweregrad:
   • CRITICAL - DSGVO-Verstoß sehr wahrscheinlich (Google Fonts, Maps, YouTube, Analytics)
   • WARNING - Potentielles DSGVO-Risiko (CDNs, Font Awesome)
   • INFO - Empfehlung (jQuery CDN)
4. Befolge die Lösungen, die für jeden Fund angezeigt werden

Lösungen:

<?php
// Fonts herunterladen von google-webfonts-helper.herokuapp.com
// Hochladen nach /wp-content/themes/dein-theme/fonts/

function load_local_fonts() {
    wp_enqueue_style('local-fonts',
        get_stylesheet_directory_uri() . '/fonts/roboto.css'
    );
}
add_action('wp_enqueue_scripts', 'load_local_fonts');

body {
    font-family: -apple-system, BlinkMacSystemFont,
                 'Segoe UI', Roboto, Oxygen, Ubuntu,
                 sans-serif;
}

Beispiel: Google Fonts beheben

VORHER (FALSCH - DSGVO-Verstoß):

<?php
// In functions.php
function load_google_fonts() {
    wp_enqueue_style('google-fonts',
        'https://fonts.googleapis.com/css2?family=Roboto'
    );
}
add_action('wp_enqueue_scripts', 'load_google_fonts');

// Problem: Lädt IMMER, auch ohne Zustimmung!

NACHHER (RICHTIG - DSGVO-konform):

<?php
// Option 1: Lokal hosten
function load_local_fonts() {
    wp_enqueue_style('local-roboto',
        get_stylesheet_directory_uri() . '/fonts/roboto.css'
    );
}
add_action('wp_enqueue_scripts', 'load_local_fonts');

// Option 2: System-Schriften in CSS
body {
    font-family: -apple-system, BlinkMacSystemFont,
                 'Segoe UI', Roboto, sans-serif;
}

6. Cookie Domain Scope - Cross-Domain Consent Sharing

Anwendungsfall:

Du hast mehrere WordPress-Installationen auf verschiedenen Subdomains:

• shop.deine-firma.de - Dein Online-Shop
• blog.deine-firma.de - Dein Firmenblog
• support.deine-firma.de - Dein Support-Portal

Problem ohne Cookie Domain Scope:

Lösung mit Cookie Domain Scope:

Einrichtung:

Technische Details:

Option 1: "This domain only" (Standard)

// Cookie wird gesetzt für:
Domain: shop.deine-firma.de
Path: /

// Cookie ist gültig für:
✅ shop.deine-firma.de
❌ blog.deine-firma.de (anderes Cookie nötig)
❌ support.deine-firma.de (anderes Cookie nötig)

Option 2: "All subdomains" (Sharing aktiviert)

// Cookie wird gesetzt für:
Domain: .deine-firma.de (mit führendem Punkt!)
Path: /

// Cookie ist gültig für:
✅ shop.deine-firma.de
✅ blog.deine-firma.de
✅ support.deine-firma.de
✅ www.deine-firma.de
✅ ALLE Subdomains von deine-firma.de

Test-Anleitung:

1. Browser-Test vorbereiten:
   • Öffne ein Inkognito/Privat-Fenster
   • Drücke F12 für DevTools
   • Gehe zum Tab "Application" → "Cookies"
2. Teste auf Domain 1:
   • Besuche shop.deine-firma.de
   • Akzeptiere die Cookie-Zustimmung
   • Prüfe in DevTools: Cookie cct_4u sollte Domain .deine-firma.de haben
3. Teste auf Domain 2:
   • Navigiere zu blog.deine-firma.de (ohne Tab zu schließen!)
   • Banner sollte NICHT mehr erscheinen
   • Prüfe in DevTools: Das gleiche cct_4u Cookie ist vorhanden

Unterschiedliche Dienste auf verschiedenen Domains:

Was passiert, wenn deine Subdomains UNTERSCHIEDLICHE Dienste haben?

Domain A Cookie: { necessary: true }
Domain B erwartet: { necessary: true, google-maps: ?, youtube: ? }

→ Banner muss erscheinen, weil google-maps und youtube noch nicht zugestimmt wurden!

Alle Domains haben:
- Notwendige Dienste
- Google Analytics
- Google Maps
- YouTube

→ Shop nutzt nur Analytics (Maps/YouTube sind konfiguriert, aber keine Skripte)
→ Blog nutzt alle Dienste
→ Banner erscheint nur EINMAL auf dem Shop, gilt dann für Blog!

7. Praxis-Beispiel: Google Analytics komplett einrichten

Schritt 1: Kategorie erstellen

• Titel: "Statistik"
• Beschreibung: "Hilft uns zu verstehen, wie unsere Website genutzt wird"

Schritt 2: Dienst anlegen

• Name: google-analytics
• Titel: "Google Analytics"
• Kategorie: "Statistik"
• Beschreibung: "Analysiert das Besucherverhalten anonym"

Schritt 3: Skript hinzufügen

• Dienst: "google-analytics"
• Position: "Head Start"
• Code:

<script async src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'GA_MEASUREMENT_ID');
</script>

Schritt 4: Cookies registrieren

Cookie 1:

• Name: _ga
• Dienst: "google-analytics"
• Ablauf: "2 Jahre"

Cookie 2:

• Name: _gid
• Dienst: "google-analytics"
• Ablauf: "24 Stunden"

8. Wichtige Regeln & Tipps