@extends('layouts.app')

@section('title', 'Datenschutz (Allgemein) | KOTSCH.TECH von Arthur Kotsch')
@section('meta_description', 'Allgemeine Datenschutzerklärung von KOTSCH.TECH: Betreiber ist Arthur Kotsch. Hosting, Mail, Kontakt, Shop, Webtools, Umfrage, Apps, Werbung und deine Rechte.')

@section('content')
    <noscript>
        <style>.reveal { opacity: 1 !important; transform: none !important; }</style>
    </noscript>
    <div class="legal-progress" id="legal-progress" aria-hidden="true"></div>

    <header class="legal-hero">
        <div class="legal-hero-orbs" aria-hidden="true">
            <span class="legal-orb legal-orb-1"></span>
            <span class="legal-orb legal-orb-2"></span>
        </div>
        <div class="container legal-hero-inner reveal active">
            <span class="legal-kicker">
                <span class="legal-kicker-dot" aria-hidden="true"></span>
                <i class="fas fa-shield-halved"></i> Datenschutz · Allgemein
            </span>
            <h1>Datenschutz&shy;erklärung</h1>
            <p class="lead">
                Verständlich, konkret und ohne Nebel: Hier steht, welche Daten auf KOTSCH.TECH verarbeitet werden können — und warum.
            </p>
            <p class="legal-hero-sub">
                Betreiber: <strong>Arthur Kotsch</strong> &middot; Marke: <strong>KOTSCH.TECH</strong> &middot; <a href="https://www.kotsch.tech">www.kotsch.tech</a>
            </p>
            <div class="legal-hero-meta" aria-label="Kurzübersicht">
                <span><i class="fas fa-calendar-check"></i> Stand Juni 2026</span>
                <span><i class="fas fa-envelope"></i> Eigene Mail-Infrastruktur</span>
                <span><i class="fas fa-cookie-bite"></i> Werbung nur mit Einwilligung</span>
            </div>
            <a class="legal-hub-link" href="{{ route('datenschutz.hub', [], false) }}">
                <i class="fas fa-layer-group"></i> Datenschutz pro Bereich &amp; App ansehen
            </a>
        </div>
    </header>

    <section class="legal-section">
        <div class="container legal-layout">
            <aside class="legal-sidebar">
                <div class="legal-status">
                    <span>Dokument</span>
                    <strong>Datenschutz</strong>
                    <p>Die wichtigsten Datenflüsse für Kontakt, Mail, Webtools, PDF-Teilen, IT-Hilfe, Shop, Umfrage, Beta-Tests und Apps.</p>
                </div>

                <div class="legal-toc" role="navigation" aria-label="Inhalt der Datenschutzerklärung" id="legal-toc">
                    <a href="#verantwortlicher">Verantwortlicher</a>
                    <a href="#hosting">Hosting &amp; Logs</a>
                    <a href="#kontakt">Kontakt &amp; Formular</a>
                    <a href="#mail">E-Mail</a>
                    <a href="#pdf">PDF teilen</a>
                    <a href="#shop">Shop</a>
                    <a href="#umfrage">Umfrage</a>
                    <a href="#tester">Beta-Tester</a>
                    <a href="#tools">Webtools</a>
                    <a href="#werbung">Werbung &amp; AdSense</a>
                    <a href="#cookies">Cookies</a>
                    <a href="#rechte">Deine Rechte</a>
                </div>

                <a class="legal-sidebar-action" href="mailto:arthurkotsch@kotsch.tech">
                    <i class="fas fa-envelope"></i>
                    Datenschutzfrage senden
                </a>
            </aside>

            <article class="legal-document" id="legal-doc">
                <div class="legal-notice">
                    <i class="fas fa-lock"></i>
                    <p>Grundsatz: Es werden nur Daten verarbeitet, die für Betrieb, Sicherheit, Kommunikation, Projektanfragen, Support oder gesetzliche Pflichten erforderlich sind. Bereichsspezifische Hinweise findest du im <a href="{{ route('datenschutz.hub', [], false) }}">Datenschutz-Hub</a>.</p>
                </div>

                <div class="legal-summary-grid">
                    <div class="legal-summary reveal">
                        <i class="fas fa-paper-plane"></i>
                        <strong>Kontakt &amp; Mail</strong>
                        <p>Anfragen werden über die eigene Mail-Infrastruktur von KOTSCH.TECH verarbeitet.</p>
                    </div>
                    <div class="legal-summary reveal">
                        <i class="fas fa-file-pdf"></i>
                        <strong>PDF teilen</strong>
                        <p>Hochgeladene PDFs liegen hinter einem geheimen Link und werden automatisch gelöscht.</p>
                    </div>
                    <div class="legal-summary reveal">
                        <i class="fas fa-code"></i>
                        <strong>Webtools</strong>
                        <p>Viele Tools laufen im Browser. Echte Passwörter gehören nicht in Testfelder.</p>
                    </div>
                </div>

                <section id="verantwortlicher" class="legal-card reveal">
                    <h2>Verantwortlicher</h2>
                    <p>Verantwortlich für die Verarbeitung personenbezogener Daten auf dieser Website ist:</p>
                    <address class="legal-address">
                        <strong>Arthur Kotsch</strong><br>
                        Brückenstraße 4<br>
                        09350 Lichtenstein<br>
                        Deutschland<br>
                        E-Mail: <a href="mailto:arthurkotsch@kotsch.tech">arthurkotsch@kotsch.tech</a>
                    </address>
                </section>

                <section class="legal-card reveal">
                    <h2>Allgemeine Hinweise</h2>
                    <p>Personenbezogene Daten sind alle Informationen, die sich auf eine identifizierte oder identifizierbare Person beziehen. Ich verarbeite personenbezogene Daten nur, soweit dies für Betrieb, Kommunikation, Projektanfragen, IT-Hilfe, App-Support oder gesetzliche Pflichten erforderlich ist.</p>
                    <p>Die Website ist eine persönliche Tech-Marke mit Softwareprojekten, iOS-Apps, geplanten Android-Apps, Webdesign, Webtools, IT-Hilfe und einem Shop für digitale Produkte.</p>
                </section>

                <section id="hosting" class="legal-card reveal">
                    <h2>Hosting und Server-Logfiles</h2>
                    <p>Beim Aufruf der Website werden technisch notwendige Daten verarbeitet, insbesondere IP-Adresse, Datum und Uhrzeit, aufgerufene Seite, Referrer, Browser/User-Agent und übertragene Datenmenge. Die Verarbeitung erfolgt zur sicheren und stabilen Bereitstellung der Website auf Grundlage von Art. 6 Abs. 1 lit. f DSGVO.</p>
                    <p>Logdaten werden nur so lange gespeichert, wie dies für Sicherheit und Fehleranalyse erforderlich ist. Das berechtigte Interesse liegt im stabilen Betrieb, der Fehleranalyse, Missbrauchserkennung und Absicherung der Website.</p>
                </section>

                <section id="kontakt" class="legal-card reveal">
                    <h2>Kontaktaufnahme &amp; Kontaktformular</h2>
                    <p>Wenn du per E-Mail oder über das Kontaktformular Kontakt aufnimmst, verarbeite ich die von dir übermittelten Angaben, insbesondere Name, E-Mail-Adresse, Themenbereich, Inhalt der Nachricht und technische Mail-Metadaten, zur Bearbeitung deiner Anfrage.</p>
                    <p>Bitte sende keine sensiblen Daten, Passwörter, Ausweisdaten, Gesundheitsdaten oder vertrauliche Kundendaten über das Formular.</p>
                    <p>Rechtsgrundlage ist Art. 6 Abs. 1 lit. b DSGVO bei vorvertraglichen oder vertraglichen Anfragen; in allen anderen Fällen Art. 6 Abs. 1 lit. f DSGVO.</p>
                </section>

                <section id="mail" class="legal-card legal-card-accent reveal">
                    <h2>E-Mail-Infrastruktur</h2>
                    <p>Das Kontaktformular wird direkt über die eigene Mail-Infrastruktur von KOTSCH.TECH verarbeitet. Als E-Mail-Anbieter wird Zoho Mail genutzt.</p>
                    <p>Übermittelt werden können insbesondere Name, E-Mail-Adresse, Themenbereich, Nachricht, IP-Adresse, Zeitpunkt der Übermittlung und technische Browserdaten. Die Verarbeitung dient ausschließlich der Zustellung und Bearbeitung deiner Anfrage.</p>
                    <p>Die Zugangsdaten für den Mailversand werden serverseitig in Umgebungsvariablen gespeichert und nicht im Browser ausgegeben.</p>
                </section>

                <section id="pdf" class="legal-card legal-card-accent reveal">
                    <h2>PDF teilen &amp; Datei-Uploads</h2>
                    <p>Im Webtool „PDF teilen &amp; QR-Code" kannst du <strong>freiwillig</strong> eine PDF-Datei hochladen, um daraus einen geheimen Link und einen QR-Code zu erzeugen. Eine Nutzung ist nicht erforderlich, um die übrige Website zu verwenden.</p>
                    <p>Verarbeitet werden dabei: die hochgeladene PDF-Datei (Inhalt und Dateiname), die Dateigröße, der Zeitpunkt des Uploads, ein zufällig erzeugtes, nicht erratbares Zugriffstoken sowie – falls du es setzt – ein optionales Passwort. Dieses Passwort wird ausschließlich als kryptografischer Hash gespeichert, niemals im Klartext.</p>
                    <p>Die Datei wird auf dem Server in einem nicht öffentlich auflistbaren Bereich gespeichert und ausschließlich über den geheimen Link ausgeliefert. Die Auslieferung ist als <em>noindex</em> gekennzeichnet, damit geteilte Dateien nicht von Suchmaschinen erfasst werden.</p>
                    <p><strong>Automatische Löschung:</strong> Du wählst beim Upload die Gültigkeitsdauer (von 1 Stunde bis 30 Tage). Nach Ablauf wird die Datei automatisch und unwiderruflich gelöscht – spätestens beim nächsten Aufruf des abgelaufenen Links sowie durch einen regelmäßigen serverseitigen Bereinigungslauf.</p>
                    <p><strong>Optionaler E-Mail-Versand:</strong> Auf Wunsch kannst du den Link an eine von dir angegebene Empfängeradresse senden. Dann werden diese Adresse, der Link und ein erzeugtes QR-Bild über die genannte Mail-Infrastruktur (Zoho) zugestellt.</p>
                    <p><strong>Wichtiger Hinweis:</strong> Lade keine sensiblen oder personenbezogenen Daten Dritter hoch, für die keine Rechtsgrundlage besteht. Jede Person, die über den geheimen Link (und ggf. das Passwort) verfügt, kann die Datei abrufen, solange sie nicht abgelaufen ist.</p>
                    <p>Rechtsgrundlage ist Art. 6 Abs. 1 lit. f DSGVO (berechtigtes Interesse an der Bereitstellung der Funktion); beim freiwilligen E-Mail-Versand handelst du auf eigene Veranlassung.</p>
                </section>

                <section id="shop" class="legal-card legal-card-accent reveal">
                    <h2>Shop für digitale Produkte</h2>
                    <p>Im Shop werden ausschließlich digitale Produkte angeboten. Für die Abwicklung einer Bestellung verarbeite ich die von dir angegebenen Daten, insbesondere Name, E-Mail-Adresse und ggf. Rechnungsanschrift sowie die zur Bestellung gehörenden Angaben (Produkt, Betrag, Bestellnummer). Rechtsgrundlage ist die Erfüllung des Kaufvertrags nach Art. 6 Abs. 1 lit. b DSGVO.</p>
                    <p>Die Bezahlung erfolgt über PayPal oder per Vorkasse/Überweisung. Bei Zahlung über PayPal werden die für die Zahlung erforderlichen Daten an die PayPal (Europe) S.à r.l. et Cie, S.C.A. übermittelt; es gelten zusätzlich deren Datenschutzbestimmungen. Bei Vorkasse verarbeite ich die für den Zahlungsabgleich nötigen Angaben. Die Auslieferung erfolgt digital über einen persönlichen, signierten Download-Link bzw. per E-Mail – ein Postversand findet nicht statt.</p>
                    <p>Bestell- und Rechnungsdaten unterliegen den gesetzlichen Aufbewahrungspflichten (u. a. § 147 AO, § 257 HGB) und werden für die vorgeschriebene Dauer (in der Regel bis zu zehn Jahre) gespeichert. Rechtsgrundlage hierfür ist Art. 6 Abs. 1 lit. c DSGVO. Technisch notwendige Session- und Warenkorbdaten werden zur Bereitstellung der Shop-Funktion verarbeitet (Art. 6 Abs. 1 lit. f DSGVO).</p>
                </section>

                <section id="umfrage" class="legal-card legal-card-accent reveal">
                    <h2>Umfrage &amp; ProblemRadar</h2>
                    <p>Auf der Umfrage-Plattform ProblemRadar kannst du <strong>freiwillig</strong> Alltags- oder Arbeitsprobleme schildern, damit daraus passende Lösungen und Apps entstehen. Eine Teilnahme ist überwiegend ohne persönliche Angaben möglich.</p>
                    <p>Verarbeitet werden können: ein zufällig erzeugter Antwort-Code, die Quelle und Sprache der Umfrage, Zeitstempel, freiwillige Angaben wie Name und grobe Altersgruppe sowie deine Problem-Angaben (Bereich, Beschreibung, Häufigkeit, Schweregrad und ggf. bisherige Lösung).</p>
                    <p>Auf Basis deiner Angaben kann automatisiert ein Eignungswert für vorhandene Apps berechnet werden. Ein Profiling mit rechtlicher Wirkung findet nicht statt; gezeigte Empfehlungen sind unverbindlich.</p>
                    <p><strong>E-Mail nur mit Einwilligung:</strong> Wenn du es ausdrücklich wünschst, speichere ich deine E-Mail-Adresse (mit Abmelde-Token) für Rückfragen oder Ergebnisse. Du kannst dich jederzeit über den Link in jeder Nachricht abmelden.</p>
                    <p>Rechtsgrundlage ist Art. 6 Abs. 1 lit. f DSGVO (Marktforschung); für die E-Mail-Aufnahme Art. 6 Abs. 1 lit. a DSGVO (Einwilligung).</p>
                </section>

                <section id="tester" class="legal-card reveal">
                    <h2>Beta-Tester-Bewerbung</h2>
                    <p>Über das Tester-Formular kannst du dich als Beta-Tester bewerben. Dabei verarbeite ich Name, E-Mail-Adresse, gewünschte Plattformen (iOS/Android/Windows), Gerätemodell und optionale Notizen.</p>
                    <p>Die Daten dienen der Auswahl und Organisation von Tests sowie der Kommunikation mit Testenden. Rechtsgrundlage ist Art. 6 Abs. 1 lit. f DSGVO; bei vertraglichem Bezug Art. 6 Abs. 1 lit. b DSGVO. Die Angaben werden für die Dauer des Testprogramms gespeichert und danach gelöscht, sofern du nichts anderes wünschst.</p>
                </section>

                <section class="legal-card reveal">
                    <h2>IT-Hilfe und Projektanfragen</h2>
                    <p>Bei IT-Hilfe und Projektanfragen können Name, Kontaktdaten, Problembeschreibung, Projektinformationen und Terminabsprachen verarbeitet werden. Bei der IT-Hilfe können personenbezogene Daten sichtbar werden. Diese werden nur verarbeitet, soweit dies zur gewünschten Unterstützung erforderlich ist.</p>
                    <p>Zugangsdaten sollten nach Möglichkeit vom Kunden selbst eingegeben werden. Rechtsgrundlage ist Art. 6 Abs. 1 lit. b DSGVO bei vorvertraglichen oder vertraglichen Anfragen; sonst Art. 6 Abs. 1 lit. f DSGVO.</p>
                </section>

                <section class="legal-card reveal">
                    <h2>Hosting-Anfragen</h2>
                    <p>Bei Hosting-Anfragen werden die von dir bereitgestellten Kontakt- und Projektdaten verarbeitet, um Machbarkeit, Umfang und technische Anforderungen zu klären. Das Hosting-Angebot ist klein und infrastrukturell begrenzt.</p>
                    <p>Bei Hosting-Leistungen kann je nach Projekt eine Auftragsverarbeitung nach Art. 28 DSGVO erforderlich sein. In diesem Fall wird ein gesonderter Vertrag zur Auftragsverarbeitung geschlossen.</p>
                </section>

                <section class="legal-card reveal">
                    <h2>Apps und App-Support</h2>
                    <p>iOS-Apps und macOS-Programme können verfügbar, in Entwicklung oder geplant sein. Für App-Support-Anfragen werden die vom Nutzer bereitgestellten Daten zur Bearbeitung der Anfrage verarbeitet. Dazu können Name, E-Mail-Adresse, App-Name, Geräte-/Systemangaben und Fehlerbeschreibung gehören.</p>
                    <p>Android-Apps befinden sich aktuell in Entwicklung. Über diese Website werden keine Nutzungsdaten dieser Android-Apps verarbeitet.</p>
                    <p>App- und programmspezifische Hinweise findest du im <a href="{{ route('datenschutz.hub', [], false) }}">Datenschutz-Hub</a>. Rechtsgrundlage für Support-Anfragen ist Art. 6 Abs. 1 lit. b DSGVO, soweit die Anfrage mit einer App-Nutzung oder einem Vertrag zusammenhängt; sonst Art. 6 Abs. 1 lit. f DSGVO.</p>
                </section>

                <section id="tools" class="legal-card reveal">
                    <h2>Webtools</h2>
                    <p>Die Webtools, etwa Passwort-Check, Decoder oder Morse-Übersetzer, laufen grundsätzlich im Browser. Eingaben sollen nicht an den Server gesendet werden, sofern das jeweilige Tool nicht ausdrücklich etwas anderes angibt (z. B. das Tool „PDF teilen", siehe oben).</p>
                    <p>Beim Aufruf der Tool-Seiten fallen jedoch die üblichen Server-Logdaten an. Bitte gib keine echten Passwörter, Zugangsdaten oder vertraulichen Inhalte ein.</p>
                </section>

                <section id="werbung" class="legal-card legal-card-accent reveal">
                    <h2>Werbung &amp; Google AdSense</h2>
                    <p>Auf dieser Website wird zur Finanzierung des Angebots Werbung über den Dienst Google AdSense eingebunden. Anbieter ist die <strong>Google Ireland Ltd.</strong>, Gordon House, Barrow Street, Dublin 4, Irland (im Folgenden „Google").</p>
                    <p>Google AdSense verwendet Cookies und vergleichbare Technologien (z. B. Web Beacons) und verarbeitet dabei deine IP-Adresse sowie Nutzungs- und Geräteinformationen, um Anzeigen auszuliefern, deren Leistung zu messen und – abhängig von deiner Einwilligung – personalisierte oder kontextbezogene Werbung anzuzeigen. Über diese Cookies kann dein Endgerät wiedererkannt werden.</p>
                    <p>Im Rahmen der Auslieferung der Werbung können Daten an die <strong>Google LLC</strong> mit Sitz in den USA übermittelt werden. Für diese Übermittlung in ein Drittland stützt sich Google auf die Standardvertragsklauseln der EU-Kommission (Art. 46 Abs. 2 lit. c DSGVO) als geeignete Garantie.</p>
                    <p>Rechtsgrundlage für den Einsatz der Werbe-Cookies und die damit verbundene Datenverarbeitung ist deine Einwilligung gemäß Art. 6 Abs. 1 lit. a DSGVO in Verbindung mit § 25 Abs. 1 TTDSG. Die Einwilligung wird über den beim ersten Aufruf eingeblendeten Einwilligungsbanner eingeholt; AdSense-Cookies werden erst nach deiner Zustimmung gesetzt. Du kannst deine Einwilligung jederzeit mit Wirkung für die Zukunft widerrufen, indem du deine Auswahl im Banner änderst.</p>
                    <p>Du kannst personalisierte Werbung außerdem dauerhaft in den Anzeigeneinstellungen von Google unter <a href="https://adssettings.google.com" target="_blank" rel="noopener">https://adssettings.google.com</a> deaktivieren. Weitere Informationen zur Datenverarbeitung durch Google findest du in der Datenschutzerklärung von Google unter <a href="https://policies.google.com/privacy" target="_blank" rel="noopener">https://policies.google.com/privacy</a>.</p>
                </section>

                <section class="legal-card reveal">
                    <h2>Webfonts und Icons</h2>
                    <p>Schriftarten und Icons werden für die Hauptseite lokal vom eigenen Server geladen. Eine Übermittlung an externe Font-Anbieter findet für diese lokal eingebundenen Ressourcen nicht statt.</p>
                    <p>Einzelne Demo-Vorlagen können noch externe Schrift- oder Icon-Quellen enthalten, wenn sie als Designvorschau dienen. Diese Vorlagen sollten vor produktiver Nutzung bereinigt oder entsprechend gekennzeichnet werden.</p>
                </section>

                <section id="cookies" class="legal-card reveal">
                    <h2>Cookies und Local Storage</h2>
                    <p>Die Website kann technisch notwendige Cookies oder Session-Speicher nutzen, etwa für den Warenkorb im Shop, Formularschutz, Session-Funktionen oder administrative Bereiche. Außerdem können einzelne Browser-Tools lokale Speicherung im Browser verwenden, wenn dies für ihre Funktion erforderlich ist.</p>
                    <p>Darüber hinaus werden über die eingebundene Werbung von Google AdSense Werbe-Cookies und ähnliche Technologien eingesetzt (siehe Abschnitt „Werbung &amp; Google AdSense"). Diese werden erst gesetzt, wenn du im Einwilligungsbanner zugestimmt hast. Deine Einwilligung kannst du jederzeit mit Wirkung für die Zukunft widerrufen, indem du die Auswahl im Banner anpasst.</p>
                    <p>Wenn du die Website über den Sprachschalter auf Englisch umstellst, wird Google Translate erst nach deiner aktiven Auswahl geladen. Dabei können technische Daten an Google übermittelt und ein Sprach-Cookie gespeichert werden, damit die Auswahl auf weiteren Seiten erhalten bleibt. Beim Zurückstellen auf Deutsch wird dieses Sprach-Cookie wieder entfernt.</p>
                </section>

                <section class="legal-card reveal">
                    <h2>Speicherdauer</h2>
                    <p>Personenbezogene Daten werden nur so lange gespeichert, wie dies für den jeweiligen Zweck erforderlich ist. Anfragen werden gelöscht, wenn sie erledigt sind und keine gesetzlichen Aufbewahrungspflichten oder berechtigten Interessen entgegenstehen.</p>
                    <p>Serverlogs werden nur so lange gespeichert, wie dies für Sicherheit und Fehleranalyse erforderlich ist. Über das Tool „PDF teilen" hochgeladene Dateien werden nach der von dir gewählten Frist automatisch gelöscht. Handels- oder steuerrechtliche Unterlagen, falls künftig echte Leistungen abgerechnet werden, können gesetzlichen Aufbewahrungspflichten unterliegen.</p>
                </section>

                <section class="legal-card reveal">
                    <h2>Empfänger und Kategorien von Empfängern</h2>
                    <p>Empfänger personenbezogener Daten können technische Dienstleister, Hosting-Anbieter, E-Mail-Anbieter, Werbedienstleister (Google AdSense, siehe oben), Zahlungs-/Versanddienstleister bei einem später produktiven Shop sowie Behörden im Rahmen gesetzlicher Pflichten sein.</p>
                    <p>Eine Weitergabe erfolgt nur, wenn sie für den jeweiligen Zweck erforderlich ist, eine gesetzliche Pflicht besteht oder eine geeignete Rechtsgrundlage vorliegt.</p>
                </section>

                <section class="legal-card reveal">
                    <h2>Drittlandübermittlung</h2>
                    <p>Eine Übermittlung in Drittländer findet statt, soweit dies bei einzelnen Diensten ausdrücklich beschrieben ist. Insbesondere bei der Einbindung von Google AdSense können Daten an die Google LLC in den USA übermittelt werden; diese Übermittlung erfolgt auf Grundlage der EU-Standardvertragsklauseln (siehe Abschnitt „Werbung &amp; Google AdSense").</p>
                    <p>Bei E-Mail-Kommunikation können je nach beteiligten Mailservern technische Übermittlungen außerhalb Deutschlands nicht vollständig ausgeschlossen werden.</p>
                </section>

                <section id="rechte" class="legal-card reveal">
                    <h2>Rechte betroffener Personen</h2>
                    <p>Du hast nach Maßgabe der DSGVO insbesondere folgende Rechte:</p>
                    <ul class="legal-list">
                        <li>Auskunft über die verarbeiteten personenbezogenen Daten</li>
                        <li>Berichtigung unrichtiger Daten</li>
                        <li>Löschung personenbezogener Daten</li>
                        <li>Einschränkung der Verarbeitung</li>
                        <li>Datenübertragbarkeit</li>
                        <li>Widerspruch gegen Verarbeitungen auf Grundlage berechtigter Interessen</li>
                        <li>Widerruf einer erteilten Einwilligung mit Wirkung für die Zukunft</li>
                    </ul>
                    <p>Zur Ausübung deiner Rechte genügt eine Nachricht an <a href="mailto:arthurkotsch@kotsch.tech">arthurkotsch@kotsch.tech</a>.</p>
                </section>

                <section class="legal-card reveal">
                    <h2>Beschwerderecht bei einer Aufsichtsbehörde</h2>
                    <p>Du hast das Recht, dich bei einer Datenschutzaufsichtsbehörde zu beschweren, insbesondere in dem Mitgliedstaat deines gewöhnlichen Aufenthalts, deines Arbeitsplatzes oder des Orts des mutmaßlichen Verstoßes.</p>
                </section>

                <section class="legal-card reveal">
                    <h2>Sicherheit der Verarbeitung</h2>
                    <p>Ich setze angemessene technische und organisatorische Maßnahmen ein, darunter HTTPS, Zugriffsschutz, regelmäßige Updates, begrenzte Speicherfristen und den Grundsatz, keine unnötigen Daten zu erheben.</p>
                    <p>Bitte sende keine sensiblen Daten über das Kontaktformular. Zugangsdaten sollten bei IT-Hilfe nach Möglichkeit selbst eingegeben und nach Abschluss der Unterstützung geändert werden.</p>
                </section>

                <section class="legal-card reveal">
                    <h2>Änderungen dieser Datenschutzerklärung</h2>
                    <p>Diese Datenschutzerklärung kann angepasst werden, wenn sich technische Abläufe, Dienste oder rechtliche Anforderungen ändern. Es gilt die jeweils auf dieser Website veröffentlichte Fassung.</p>
                    <p class="legal-updated">Stand: Juni 2026. Änderungen vorbehalten.</p>
                </section>
            </article>
        </div>
    </section>

    <section class="legal-cta">
        <div class="container reveal">
            <span>Datenschutzfrage?</span>
            <h2>Schreib direkt an Arthur.</h2>
            <p>Für Auskunft, Löschung, Berichtigung oder andere Datenschutzanliegen reicht eine kurze Nachricht.</p>
            <a href="mailto:arthurkotsch@kotsch.tech" class="btn-nav">E-Mail schreiben</a>
        </div>
    </section>

    <style>
        .legal-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0%; z-index: 200; background: linear-gradient(90deg, var(--primary), var(--accent)); box-shadow: 0 0 12px rgba(37,99,235,0.5); transition: width 0.1s linear; }

        .legal-hero { position: relative; padding: 168px 8% 90px; overflow: hidden; isolation: isolate; background: radial-gradient(circle at 50% -10%, var(--primary-soft), transparent 46%), linear-gradient(180deg, #ffffff 0%, #f4f7ff 100%); border-bottom: 1px solid #e6ecf6; }
        .legal-hero::before { content: ""; position: absolute; inset: 0; z-index: -2; background-image: linear-gradient(rgba(226,232,240,0.5) 1px, transparent 1px), linear-gradient(90deg, rgba(226,232,240,0.5) 1px, transparent 1px); background-size: 56px 56px; -webkit-mask-image: radial-gradient(circle at 50% 12%, #000, transparent 72%); mask-image: radial-gradient(circle at 50% 12%, #000, transparent 72%); }
        .legal-hero-orbs { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
        .legal-orb { position: absolute; border-radius: 50%; filter: blur(70px); opacity: 0.5; }
        .legal-orb-1 { width: 380px; height: 380px; top: -120px; left: 4%; background: radial-gradient(circle, rgba(37,99,235,0.4), transparent 70%); }
        .legal-orb-2 { width: 320px; height: 320px; top: 10px; right: 2%; background: radial-gradient(circle, rgba(124,58,237,0.34), transparent 70%); }
        .legal-hero-inner { display: grid; justify-items: start; }
        .legal-kicker { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 22px; padding: 9px 16px; border: 1px solid var(--ring-soft, rgba(37,99,235,0.18)); border-radius: 999px; background: rgba(255,255,255,0.72); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: var(--primary); font-weight: 800; font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.12em; }
        .legal-kicker-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success); animation: legalPulse 2.4s infinite; }
        @keyframes legalPulse { 0% { box-shadow: 0 0 0 0 rgba(16,185,129,0.5);} 70% { box-shadow: 0 0 0 8px rgba(16,185,129,0);} 100% { box-shadow: 0 0 0 0 rgba(16,185,129,0);} }
        .legal-hero h1 { max-width: 920px; margin: 0; color: var(--text-main); font-size: clamp(2.6rem, 7vw, 5.4rem); line-height: 0.98; letter-spacing: -0.04em; font-weight: 900; hyphens: auto; }
        .legal-hero .lead { max-width: 720px; margin-top: 22px; color: var(--text-muted); font-size: clamp(1.05rem, 2vw, 1.32rem); line-height: 1.65; }
        .legal-hero-sub { margin-top: 16px; color: #475569; font-weight: 700; line-height: 1.6; }
        .legal-hero-sub a { color: var(--primary); font-weight: 800; text-decoration: none; }
        .legal-hero-meta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
        .legal-hero-meta span { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 999px; background: #ffffff; border: 1px solid #e2e8f0; color: #334155; font-weight: 800; font-size: 0.88rem; box-shadow: 0 16px 40px -34px rgba(15,23,42,0.6); }
        .legal-hero-meta i { color: var(--primary); }
        .legal-hub-link { display: inline-flex; align-items: center; gap: 9px; margin-top: 24px; padding: 12px 20px; border-radius: 999px; background: #0f172a; color: #fff; font-weight: 800; text-decoration: none; transition: transform 0.2s, background 0.2s; }
        .legal-hub-link:hover { background: var(--primary); transform: translateY(-2px); }

        .legal-section { padding: 76px 8% 118px; background: #f8fafc; }
        .legal-layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 36px; align-items: start; }
        .legal-sidebar { position: sticky; top: 104px; display: grid; gap: 14px; }
        .legal-status { padding: 24px; border: 1px solid #e2e8f0; border-radius: 20px; background: #ffffff; box-shadow: 0 24px 60px -44px rgba(15,23,42,0.5); }
        .legal-status span { display: block; color: var(--primary); font-size: 0.74rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.1em; }
        .legal-status strong { display: block; margin: 6px 0 10px; color: #0f172a; font-size: 1.5rem; letter-spacing: -0.02em; }
        .legal-status p { margin: 0; color: #64748b; line-height: 1.65; font-size: 0.9rem; }
        .legal-toc { display: grid; padding: 12px; border: 1px solid #e2e8f0; border-radius: 20px; background: #ffffff; box-shadow: 0 24px 60px -44px rgba(15,23,42,0.5); }
        .legal-toc a { position: relative; padding: 11px 14px; border-radius: 12px; color: #475569; font-weight: 800; font-size: 0.9rem; text-decoration: none; transition: background 0.2s, color 0.2s; }
        .legal-toc a:hover { background: #eff4ff; color: var(--primary); }
        .legal-toc a.active { background: linear-gradient(120deg, var(--primary), var(--accent)); color: #fff; }
        .legal-sidebar-action { display: flex; align-items: center; gap: 10px; padding: 16px 18px; border-radius: 16px; color: #ffffff; background: #0f172a; font-weight: 900; text-decoration: none; transition: transform 0.2s, background 0.2s; }
        .legal-sidebar-action:hover { background: var(--primary); transform: translateY(-2px); }

        .legal-document { display: grid; gap: 18px; min-width: 0; counter-reset: legalcard; }
        .legal-notice { display: flex; gap: 14px; align-items: flex-start; padding: 20px 22px; border: 1px solid #c7d8ff; border-radius: 18px; background: linear-gradient(180deg, #f4f8ff, #eef4ff); color: #1e3a8a; }
        .legal-notice i { margin-top: 4px; color: var(--primary); }
        .legal-notice p { margin: 0; line-height: 1.65; font-weight: 700; }
        .legal-notice a { color: var(--primary); font-weight: 900; }
        .legal-summary-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
        .legal-summary { padding: 24px; border: 1px solid #e2e8f0; border-radius: 18px; background: #ffffff; box-shadow: 0 24px 60px -46px rgba(15,23,42,0.5); transition: transform 0.25s, box-shadow 0.25s; }
        .legal-summary:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -40px rgba(37,99,235,0.32); }
        .legal-summary i { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; margin-bottom: 16px; border-radius: 12px; background: linear-gradient(135deg, var(--primary-soft), rgba(124,58,237,0.12)); color: var(--primary); font-size: 1.05rem; }
        .legal-summary strong { display: block; color: #0f172a; font-size: 1.04rem; }
        .legal-summary p { margin: 8px 0 0; color: #64748b; line-height: 1.62; font-size: 0.92rem; }

        .legal-card { position: relative; padding: 36px 36px 34px; border: 1px solid #e2e8f0; border-radius: 22px; background: #ffffff; box-shadow: 0 26px 64px -50px rgba(15,23,42,0.55); scroll-margin-top: 100px; transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s; }
        .legal-card::before { counter-increment: legalcard; content: counter(legalcard, decimal-leading-zero); display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 10px; margin-bottom: 18px; border-radius: 12px; background: linear-gradient(135deg, var(--primary), var(--accent)); color: #fff; font-weight: 900; font-size: 0.92rem; letter-spacing: 0.04em; box-shadow: 0 12px 24px -12px rgba(37,99,235,0.6); }
        .legal-card:hover { transform: translateY(-3px); box-shadow: 0 34px 70px -46px rgba(37,99,235,0.3); border-color: #c7d8ff; }
        .legal-card-accent { border-color: #c7d8ff; background: linear-gradient(180deg, #ffffff 0%, #f5f8ff 100%); }
        .legal-card h2 { margin: 0 0 16px; color: #0f172a; font-size: clamp(1.4rem, 3vw, 2rem); line-height: 1.15; letter-spacing: -0.02em; }
        .legal-card p, .legal-card li, .legal-address { color: #475569; font-size: 1rem; line-height: 1.78; }
        .legal-card p { margin: 0 0 13px; }
        .legal-card p:last-child { margin-bottom: 0; }
        .legal-card a { color: var(--primary); font-weight: 800; text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 0.2s; }
        .legal-card a:hover { border-bottom-color: currentColor; }
        .legal-card strong { color: #0f172a; }
        .legal-card em { color: var(--accent); font-style: normal; font-weight: 700; }
        .legal-address { margin: 14px 0 0; padding: 20px; border-radius: 14px; border: 1px solid #e2e8f0; background: #f8fafc; font-style: normal; }
        .legal-list { margin: 0 0 16px; padding-left: 4px; list-style: none; display: grid; gap: 9px; }
        .legal-list li { position: relative; padding-left: 28px; }
        .legal-list li::before { content: "\f00c"; font-family: "Font Awesome 6 Free"; font-weight: 900; position: absolute; left: 0; top: 2px; color: var(--success); font-size: 0.82rem; }
        .legal-updated { color: #64748b !important; font-size: 0.9rem !important; font-weight: 800; }

        .legal-cta { padding: 84px 8%; text-align: center; background: radial-gradient(circle at 50% 0%, rgba(37,99,235,0.22), transparent 55%), #0b1220; color: #ffffff; }
        .legal-cta span { display: block; color: #86efac; font-weight: 900; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.78rem; }
        .legal-cta h2 { margin: 12px 0 12px; color: #ffffff; font-size: clamp(2rem, 4vw, 3.4rem); line-height: 1.05; letter-spacing: -0.02em; }
        .legal-cta p { max-width: 620px; margin: 0 auto 28px; color: #cbd5e1; line-height: 1.7; }
        .legal-cta .btn-nav { background: linear-gradient(120deg, var(--primary), var(--accent)); color: #ffffff; }

        @media (max-width: 980px) { .legal-layout { grid-template-columns: 1fr; } .legal-sidebar { position: static; } .legal-toc { grid-template-columns: repeat(2, minmax(0, 1fr)); } .legal-summary-grid { grid-template-columns: 1fr; } }
        @media (max-width: 640px) { .legal-hero { padding: 140px var(--mobile-pad) 60px; } .legal-section { padding: 52px var(--mobile-pad) 84px; } .legal-hero-meta span { width: 100%; } .legal-toc { grid-template-columns: 1fr; } .legal-card { padding: 26px; } .legal-cta { padding: 60px var(--mobile-pad); } }
    </style>

    <script>
        (function () {
            var bar = document.getElementById('legal-progress');
            var doc = document.getElementById('legal-doc');
            var tocLinks = Array.prototype.slice.call(document.querySelectorAll('#legal-toc a'));
            var sections = tocLinks.map(function (a) { return document.querySelector(a.getAttribute('href')); }).filter(Boolean);

            function onScroll() {
                if (bar && doc) {
                    var rect = doc.getBoundingClientRect();
                    var total = rect.height - window.innerHeight + 200;
                    var done = Math.min(Math.max(-rect.top + 200, 0), total);
                    bar.style.width = (total > 0 ? (done / total) * 100 : 0) + '%';
                }
                if (sections.length) {
                    var marker = window.innerHeight * 0.38;
                    var activeIdx = 0;
                    for (var i = 0; i < sections.length; i++) {
                        if (sections[i].getBoundingClientRect().top <= marker) { activeIdx = i; }
                    }
                    for (var j = 0; j < tocLinks.length; j++) {
                        tocLinks[j].classList.toggle('active', j === activeIdx);
                    }
                }
            }
            window.addEventListener('scroll', onScroll, { passive: true });
            window.addEventListener('resize', onScroll, { passive: true });
            onScroll();
        })();
    </script>
@endsection