@extends('layouts.app')

@section('content')
    <!-- =============================================
         1. HEADER SECTION
         ============================================= -->
    <header style="padding: 160px 8% 60px; background: var(--bg-gray); border-bottom: 1px solid #e2e8f0;">
        <div class="container reveal active">
            <span class="label">Rechtliche Absicherung</span>
            <h1>Rechtliche Hinweise</h1>
            <p class="lead" style="max-width: 650px;">Impressum, Haftungsausschlüsse und Nutzungsbedingungen für Software und Hardware-Komponenten.</p>
        </div>
    </header>

    <!-- =============================================
         2. MAIN CONTENT (Optimiertes Layout)
         ============================================= -->
    <section style="padding: 80px 8% 120px;">
        <div class="container">
            <!-- Grid-Anpassung: Linke Spalte schmaler für kleineres Bild -->
            <div style="display: grid; grid-template-columns: 300px 1fr; gap: 60px; align-items: start;" class="reveal">
                
                <!-- LINKER BEREICH: PROFIL (KLEINER) -->
                <div style="position: sticky; top: 120px;">
                    <div style="background: white; border-radius: 20px; border: 1px solid #e2e8f0; overflow: hidden; box-shadow: var(--shadow-soft);">
                        <div style="width: 100%; height: 300px; background: #f1f5f9; position: relative;">
                            <!-- Bild ist jetzt kleiner skaliert -->
                            <img src="{{ asset('img/arthur-kotsch.jpg') }}" alt="Arthur Kotsch" style="width: 100%; height: 100%; object-fit: cover;">
                        </div>
                        
                        <div style="padding: 20px;">
                            <h3 style="font-size: 1.1rem; margin-bottom: 5px;">Arthur Kotsch</h3>
                            <p style="color: var(--primary); font-weight: 700; font-size: 0.8rem; text-transform: uppercase;">Informatik-Student</p>
                            <p style="font-size: 0.8rem; color: var(--text-gray); line-height: 1.5; margin-top: 15px;">
                                Diese Präsenz dient der Vorstellung studentischer Projekte und der Finanzierung von Forschungsmitteln im Bereich Digital Engineering.
                            </p>
                        </div>
                    </div>
                </div>

                <!-- RECHTER BEREICH: RECHTLICHER SCHUTZSCHILD (MASSIV) -->
                <div style="line-height: 1.7; font-size: 0.95rem;">
                    
                    <!-- 1. ANGABEN GEMÄSS § 5 TMG -->
                    <div style="margin-bottom: 40px;">
                        <h4 class="label">Anbieterkennzeichnung</h4>
                        <p style="font-size: 1.1rem; font-weight: 700;">Arthur Kotsch</p>
                        <p>
                            Brückenstraße 4<br>
                            09350 Lichtenstein<br>
                            Deutschland
                        </p>
                        <p style="margin-top: 10px;">
                            <strong>Kontakt:</strong><br>
                            E-Mail: <a href="mailto:kotsch.tech@icloud.com" style="color: var(--primary); text-decoration: none;">kotsch.tech@icloud.com</a>
                        </p>
                    </div>

                    <!-- 2. STEUERLICHER STATUS -->
                    <div style="margin-bottom: 40px; padding: 20px; background: #fffbeb; border-radius: 12px; border: 1px solid #fef3c7;">
                        <h4 style="font-size: 0.9rem; font-weight: 800; color: #92400e; margin-bottom: 10px; text-transform: uppercase;">Steuerhinweis</h4>
                        <p style="color: #92400e; font-size: 0.9rem;">
                            Als Kleinunternehmer im Sinne von <strong>§ 19 Abs. 1 UStG</strong> wird keine Umsatzsteuer berechnet und folglich auf Rechnungen nicht ausgewiesen.
                        </p>
                    </div>

                    <!-- 3. HAFTUNG FÜR INHALTE (STANDARD) -->
                    <div style="margin-bottom: 40px;">
                        <h4 class="label">Haftung für Inhalte</h4>
                        <p style="font-size: 0.9rem; color: var(--text-gray);">
                            Als Diensteanbieter bin ich gemäß § 7 Abs.1 TMG für eigene Inhalte auf diesen Seiten nach den allgemeinen Gesetzen verantwortlich. Nach §§ 8 bis 10 TMG bin ich jedoch nicht verpflichtet, übermittelte oder gespeicherte fremde Informationen zu überwachen oder nach Umständen zu forschen, die auf eine rechtswidrige Tätigkeit hinweisen.
                        </p>
                    </div>

                    <!-- 4. TOTALER HAFTUNGSAUSSCHLUSS SOFTWARE (DEIN SCHILD) -->
                    <div style="margin-bottom: 40px; padding: 25px; background: #fef2f2; border-radius: 15px; border: 1px solid #fee2e2;">
                        <h4 style="font-size: 0.9rem; font-weight: 800; color: #dc2626; margin-bottom: 10px; text-transform: uppercase;">Software-Haftungsausschluss</h4>
                        <p style="color: #991b1b; font-size: 0.85rem; font-weight: 500;">
                            <strong>1. Bereitstellung "wie besehen":</strong> Sämtliche Software (Windows-Tools, Android-Apps, Skripte) wird ohne Mängelgewähr zur Verfügung gestellt. Es wird keine Garantie für die Funktionalität, Fehlerfreiheit oder Kompatibilität übernommen.<br><br>
                            <strong>2. Risiko:</strong> Die Nutzung der Software erfolgt ausdrücklich auf eigenes Risiko des Anwenders. <br><br>
                            <strong>3. Haftungsausschluss:</strong> In keinem Fall haftet der Anbieter für direkte, indirekte, zufällige oder Folgeschäden jeglicher Art, die aus der Nutzung oder Unmöglichkeit der Nutzung entstehen (insbesondere Datenverlust, Hardwaredefekte, Systemabstürze oder Betriebsunterbrechungen).
                        </p>
                    </div>

                    <!-- 5. TOTALER HAFTUNGSAUSSCHLUSS HARDWARE (DEIN SCHILD) -->
                    <div style="margin-bottom: 40px; padding: 25px; background: #fef2f2; border-radius: 15px; border: 1px solid #fee2e2;">
                        <h4 style="font-size: 0.9rem; font-weight: 800; color: #dc2626; margin-bottom: 10px; text-transform: uppercase;">Sicherheitshinweise Hardware</h4>
                        <p style="color: #991b1b; font-size: 0.85rem; font-weight: 500;">
                            <strong>1. Bestimmung:</strong> Die angebotenen Komponenten (ESP32-Kits, Werkzeuge, IoT-Module) sind ausschließlich für Lehr-, Forschungs- und Bastelzwecke im Niederspannungsbereich bestimmt.<br><br>
                            <strong>2. Keine Haftung für Unfälle:</strong> Ich übernehme keinerlei Haftung für Schäden an Eigentum oder Personen, die durch unsachgemäße Verkabelung, Kurzschlüsse, Überhitzung oder mangelnde elektrotechnische Fachkenntnis entstehen. <br><br>
                            <strong>3. Warnung:</strong> Der Käufer ist allein verantwortlich für die Einhaltung geltender Sicherheitsnormen (z.B. VDE).
                        </p>
                    </div>

                    <!-- 6. URHEBERRECHT -->
                    <div style="margin-bottom: 40px;">
                        <h4 class="label">Urheberrecht</h4>
                        <p style="font-size: 0.9rem; color: var(--text-gray);">
                            Die durch mich erstellten Inhalte, Codes und Werke auf diesen Seiten unterliegen dem deutschen Urheberrecht. Die Vervielfältigung, Bearbeitung, Verbreitung und jede Art der Verwertung außerhalb der Grenzen des Urheberrechtes bedürfen der schriftlichen Zustimmung.
                        </p>
                    </div>

                    <!-- 7. VERANTWORTLICH NACH MSTV -->
                    <div style="margin-bottom: 40px;">
                        <h4 class="label">Inhaltlich Verantwortlich</h4>
                        <p>
                            Arthur Kotsch (Anschrift wie oben)<br>
                            Gemäß § 18 Abs. 2 MStV.
                        </p>
                    </div>

                </div>
            </div>
        </div>
    </section>

    <!-- FOOTER INFO -->
    <section style="background: var(--bg-gray); padding: 40px 0; text-align: center;">
        <div class="container">
            <p style="font-size: 0.75rem; color: #94a3b8; max-width: 600px; margin: 0 auto; letter-spacing: 0.5px;">
                KOTSCH.TECH ist ein unabhängiges Projekt. Alle genannten Markennamen (Windows, Android) sind Eigentum ihrer jeweiligen Inhaber und werden hier nur zu beschreibenden Zwecken verwendet.
            </p>
        </div>
    </section>
@endsection