@extends('layouts.app')

@section('robots', 'noindex,follow')

@section('title', 'Webhosting | kotsch.tech')
@section('meta_description', 'Kleines, ehrlich begrenztes Hosting-Angebot aus Sachsen: Managed Web-Hosting, vServer und DSGVO-konforme Auftragsverarbeitung mit persönlicher Betreuung.')

@section('content')
    <header class="hub-hero">
        <div class="container reveal active">
            <span class="hub-kicker"><i class="fas fa-server"></i> Kleines Hosting</span>
            <h1>Kleines Hosting.<br><span>Ehrlich begrenzt.</span></h1>
            <p class="lead">
                Ein kleines Hosting-Angebot für überschaubare Projekte. Kein Enterprise-Versprechen, sondern persönliche Betreuung, klare Grenzen und transparente Datenschutz-Abstimmung.
            </p>
        </div>
    </header>

    <section class="hub-section">
        <div class="container">
            <div class="hub-card-grid">
                <article class="hub-card reveal">
                    <div class="hub-card-icon"><i class="fas fa-gem"></i></div>
                    <span class="hub-card-kicker">Managed Web-Hosting</span>
                    <h2>Für kleine Webseiten</h2>
                    <p>Für Vereine, Portfolios, kleine Projektseiten oder einfache Webauftritte. Einrichtung, HTTPS und Wartung werden projektbezogen abgestimmt.</p>
                    <a href="/kontakt?subject=Managed-Hosting-Anfrage" class="hub-card-link">Anfragen <i class="fas fa-arrow-right"></i></a>
                </article>

                <article class="hub-card reveal">
                    <div class="hub-card-icon"><i class="fas fa-terminal"></i></div>
                    <span class="hub-card-kicker">vServer / VPS</span>
                    <h2>Für überschaubare Setups</h2>
                    <p>Für kleine technische Projekte mit klar definierten Ressourcen. Verfügbarkeit, Backups, Zugriffsschutz und Verantwortlichkeiten werden vorher geklärt.</p>
                    <a href="/kontakt?subject=vServer-Anfrage" class="hub-card-link">VM anfragen <i class="fas fa-arrow-right"></i></a>
                </article>

                <article class="hub-card reveal">
                    <div class="hub-card-icon"><i class="fas fa-file-signature"></i></div>
                    <span class="hub-card-kicker">DSGVO / AVV</span>
                    <h2>Auftragsverarbeitung prüfen</h2>
                    <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>
                </article>
            </div>
        </div>
    </section>

    <section style="padding: 92px 5%; background: #ffffff;">
        <div class="container reveal">
            <div class="hosting-info-box">
                <h2>Was vorher geklärt wird</h2>
                <ul>
                    <li>Welche personenbezogenen Daten verarbeitet werden</li>
                    <li>Wer Verantwortlicher und wer Auftragsverarbeiter ist</li>
                    <li>Welche Speicherfristen, Backups und Zugriffe nötig sind</li>
                    <li>Welche technischen Maßnahmen sinnvoll und realistisch sind</li>
                    <li>Ob ein AV-Vertrag nach Art. 28 DSGVO erforderlich ist</li>
                </ul>
            </div>
        </div>
    </section>

    <style>
        .hosting-info-box { padding: 34px; border: 1px solid #e2e8f0; border-radius: 24px; background: #f8fafc; box-shadow: var(--shadow-soft); }
        .hosting-info-box h2 { margin: 0 0 18px; color: #0f172a; font-size: clamp(1.8rem, 4vw, 2.8rem); }
        .hosting-info-box ul { margin: 0; padding-left: 22px; color: #475569; line-height: 1.9; font-weight: 650; }
    </style>
@endsection