harheimertc/pages/tt-regeln.vue

<template>
  <div class="min-h-full py-16 bg-gray-50">
    <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
      <h1 class="text-4xl sm:text-5xl font-display font-bold text-gray-900 mb-6">
        Tischtennis-Regeln
      </h1>
      <div class="w-24 h-1 bg-primary-600 mb-8" />

      <p class="text-xl text-gray-600 mb-12">
        Offizielle Regeln und Bestimmungen für den Tischtennissport
      </p>

      <!-- Offizielle Regeln -->
      <div class="grid md:grid-cols-2 gap-8 mb-12 items-stretch">
        <!-- ITTF-Reglement -->
        <div class="bg-white rounded-xl shadow-lg p-8 border border-gray-100 flex flex-col h-full">
          <div class="flex items-center mb-6">
            <div class="w-12 h-12 bg-gradient-to-br from-blue-500 to-blue-600 rounded-xl flex items-center justify-center mr-4">
              <Globe :size="24" class="text-white" />
            </div>
            <div>
              <h2 class="text-2xl font-display font-bold text-gray-900">Offizielles ITTF-Reglement</h2>
              <p class="text-gray-600">Internationale Tischtennis-Regeln</p>
            </div>
          </div>
          
          <p class="text-gray-700 mb-6 leading-relaxed flex-grow">
            Die offiziellen Regeln des Internationalen Tischtennis-Verbands (ITTF) 
            gelten weltweit für alle Wettkämpfe und Turniere.
          </p>
          
          <div class="space-y-4 mt-auto">
            <a
              href="https://www.tischtennis.de/dttb/regeln-satzung/satzung-ordnungen.html"
              target="_blank"
              class="block w-full px-6 py-4 bg-primary-600 hover:bg-primary-700 text-white font-bold rounded-lg transition-colors text-center text-lg border-2 border-primary-600 shadow-lg"
            >
              🔗 Offizielle ITTF-Regeln aufrufen
            </a>
            <div class="text-center">
              <p class="text-sm text-gray-600 font-medium">
                Deutsche Übersetzung auf tischtennis.de
              </p>
              <p class="text-xs text-gray-500 mt-1">
                Internationale Tischtennis-Regeln A & B
              </p>
            </div>
          </div>
        </div>

        <!-- Vereinfachte Regeln -->
        <div class="bg-white rounded-xl shadow-lg p-8 border border-gray-100 flex flex-col h-full">
          <div class="flex items-center mb-6">
            <div class="w-12 h-12 bg-gradient-to-br from-primary-500 to-primary-600 rounded-xl flex items-center justify-center mr-4">
              <FileText :size="24" class="text-white" />
            </div>
            <div>
              <h2 class="text-2xl font-display font-bold text-gray-900">Tischtennis-Regeln Light</h2>
              <p class="text-gray-600">Vereinfachte Übersicht</p>
            </div>
          </div>
          
          <p class="text-gray-700 mb-6 leading-relaxed flex-grow">
            Eine kompakte Übersicht der wichtigsten Tischtennis-Regeln 
            für Einsteiger und Hobbyspieler. Diese vereinfachte Version 
            erklärt die Grundlagen verständlich und übersichtlich.
          </p>
          
          <div class="space-y-3 mt-auto">
            <a
              href="/documents/Tischtennisregeln light.pdf"
              target="_blank"
              download
              class="block w-full px-6 py-4 bg-primary-600 hover:bg-primary-700 text-white font-bold rounded-lg transition-colors text-center text-lg border-2 border-primary-600 shadow-lg"
            >
              ⬇️ Regeln Light herunterladen
            </a>
            <p class="text-sm text-gray-500 text-center">
              PDF-Dokument (vereinfachte Fassung)
            </p>
          </div>
        </div>
      </div>

      <!-- Grundregeln Übersicht -->
      <div class="bg-white rounded-xl shadow-lg p-8 mb-12">
        <h2 class="text-3xl font-display font-bold text-gray-900 mb-8 text-center">
          Grundregeln im Überblick
        </h2>
        
        <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
          <div class="text-center p-6 bg-gray-50 rounded-lg">
            <div class="w-16 h-16 bg-primary-100 rounded-full flex items-center justify-center mx-auto mb-4">
              <Target :size="32" class="text-primary-600" />
            </div>
            <h3 class="text-xl font-semibold text-gray-900 mb-2">Spielfeld</h3>
            <p class="text-gray-600 text-sm">
              Tisch: 2,74m × 1,525m, Höhe: 76cm<br>
              Netz: 15,25cm hoch
            </p>
          </div>

          <div class="text-center p-6 bg-gray-50 rounded-lg">
            <div class="w-16 h-16 bg-primary-100 rounded-full flex items-center justify-center mx-auto mb-4">
              <Circle :size="32" class="text-primary-600" />
            </div>
            <h3 class="text-xl font-semibold text-gray-900 mb-2">Ball</h3>
            <p class="text-gray-600 text-sm">
              Durchmesser: 40mm<br>
              Gewicht: 2,7g
            </p>
          </div>

          <div class="text-center p-6 bg-gray-50 rounded-lg">
            <div class="w-16 h-16 bg-primary-100 rounded-full flex items-center justify-center mx-auto mb-4">
              <Zap :size="32" class="text-primary-600" />
            </div>
            <h3 class="text-xl font-semibold text-gray-900 mb-2">Schläger</h3>
            <p class="text-gray-600 text-sm">
              Belag: schwarz + farbig<br>
              (rot, grün, pink, blau, gelb, lila)<br>
              Holz: mindestens 85%
            </p>
          </div>

          <div class="text-center p-6 bg-gray-50 rounded-lg">
            <div class="w-16 h-16 bg-primary-100 rounded-full flex items-center justify-center mx-auto mb-4">
              <Play :size="32" class="text-primary-600" />
            </div>
            <h3 class="text-xl font-semibold text-gray-900 mb-2">Aufschlag</h3>
            <p class="text-gray-600 text-sm">
              Ball muss sichtbar hochgeworfen werden<br>
              Mindestens 16cm Höhe
            </p>
          </div>

          <div class="text-center p-6 bg-gray-50 rounded-lg">
            <div class="w-16 h-16 bg-primary-100 rounded-full flex items-center justify-center mx-auto mb-4">
              <Trophy :size="32" class="text-primary-600" />
            </div>
            <h3 class="text-xl font-semibold text-gray-900 mb-2">Satz</h3>
            <p class="text-gray-600 text-sm">
              Gewinn bei 11 Punkten<br>
              Mindestens 2 Punkte Vorsprung
            </p>
          </div>

          <div class="text-center p-6 bg-gray-50 rounded-lg">
            <div class="w-16 h-16 bg-primary-100 rounded-full flex items-center justify-center mx-auto mb-4">
              <Users :size="32" class="text-primary-600" />
            </div>
            <h3 class="text-xl font-semibold text-gray-900 mb-2">Spiel</h3>
            <p class="text-gray-600 text-sm">
              Best of 5 oder 7 Sätze<br>
              Wechsel alle 2 Punkte
            </p>
          </div>
        </div>
      </div>

      <!-- Zusätzliche Informationen -->
      <div class="bg-gradient-to-r from-primary-600 to-primary-700 rounded-xl p-8 text-white">
        <h3 class="text-2xl font-display font-bold mb-6 flex items-center">
          <BookOpen :size="28" class="mr-3" />
          Weitere Informationen
        </h3>
        <div class="space-y-4">
          <p class="text-primary-100 leading-relaxed">
            Die offiziellen ITTF-Regeln werden regelmäßig aktualisiert und gelten für alle 
            internationalen Wettkämpfe. Für regionale Turniere können abweichende 
            Bestimmungen gelten.
          </p>
          <p class="text-primary-100 leading-relaxed">
            Bei Fragen zu spezifischen Regeln wenden Sie sich an den 
            <a href="https://www.tischtennis.de" target="_blank" class="underline hover:text-white">
              Deutschen Tischtennis-Bund (DTTB)
            </a> oder Ihren regionalen Verband.
          </p>
          <div class="mt-6 text-center">
            <a
              href="https://www.tischtennis.de/dttb/regeln-satzung/satzung-ordnungen.html"
              target="_blank"
              class="inline-flex items-center px-8 py-4 bg-primary-600 hover:bg-primary-700 text-white font-bold rounded-lg transition-colors text-lg border-2 border-primary-600 shadow-lg"
            >
              🔗 Alle DTTB-Regeln und Ordnungen
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { Globe, FileText, Download, ExternalLink, Target, Circle, Zap, Play, Trophy, Users, BookOpen } from 'lucide-vue-next'

useHead({
  title: 'TT-Regeln - Harheimer TC',
})
</script>