<!DOCTYPE html>
<html class="scroll-smooth" lang="de">
<head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>Erfolge | {{ .Site.Data.homepage.siteTitle | default .Site.Title }}</title>
<link href="https://fonts.googleapis.com" rel="preconnect"/>
<link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect"/>
<link href="https://fonts.googleapis.com/css2?family=Lexend:wght@300;400;500;600;700;800;900&family=Be+Vietnam+Pro:wght@300;400;500;600;700&display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<script id="tailwind-config">
  tailwind.config = {
    darkMode: "class",
    theme: {
      extend: {
        "colors": {
          "tertiary-container": "#ffffff", "surface-bright": "#f5f6f7",
          "on-tertiary-container": "#636262", "error-dim": "#a70138",
          "on-surface-variant": "#595c5d", "surface-tint": "#b30065",
          "surface-container-highest": "#dadddf", "on-secondary-fixed-variant": "#7d21a4",
          "inverse-on-surface": "#9b9d9e", "inverse-surface": "#0c0f10",
          "surface-container": "#e6e8ea", "surface": "#f5f6f7",
          "primary-fixed": "#ff6ea9", "surface-container-low": "#eff1f2",
          "secondary": "#8930b0", "tertiary": "#5c5b5b",
          "on-secondary": "#ffedff", "secondary-dim": "#7c20a3",
          "secondary-container": "#f0c1ff", "surface-dim": "#d1d5d7",
          "primary": "#b30065", "on-primary-fixed": "#000000",
          "surface-container-high": "#e0e3e4", "primary-fixed-dim": "#ff4e9e",
          "primary-dim": "#9d0058", "outline": "#757778",
          "error": "#b41340", "outline-variant": "#abadae",
          "secondary-fixed": "#f0c1ff", "secondary-fixed-dim": "#eaaeff",
          "tertiary-fixed-dim": "#f3f0ef", "on-surface": "#2c2f30",
          "on-tertiary-fixed-variant": "#6e6d6d", "on-tertiary": "#f5f2f1",
          "tertiary-fixed": "#ffffff", "background": "#f5f6f7",
          "on-primary": "#ffeff2", "surface-container-lowest": "#ffffff",
          "inverse-primary": "#ff479c", "primary-container": "#ff6ea9",
          "on-primary-fixed-variant": "#5c0031", "on-secondary-container": "#72129a",
          "error-container": "#f74b6d", "surface-variant": "#dadddf",
          "on-background": "#2c2f30", "on-error": "#ffefef",
          "on-tertiary-fixed": "#515050", "tertiary-dim": "#504f4f",
          "on-primary-container": "#4b0027", "on-secondary-fixed": "#580079",
          "on-error-container": "#510017"
        },
        "borderRadius": {
          "DEFAULT": "1rem", "lg": "2rem", "xl": "3rem", "full": "9999px"
        },
        "fontFamily": {
          "headline": ["Lexend"], "body": ["Be Vietnam Pro"], "label": ["Be Vietnam Pro"]
        }
      },
    },
  }
</script>
<style>
  .material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; }
  .text-glass-gradient {
    background: linear-gradient(135deg, #b30065, #ff6ea9);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .editorial-shadow { box-shadow: 0 24px 40px -10px rgba(44, 47, 48, 0.06); }
</style>
</head>
<body class="bg-surface font-body text-on-surface">

<!-- TopAppBar -->
<header class="bg-white/70 dark:bg-zinc-900/70 backdrop-blur-lg fixed top-0 left-0 w-full z-50 shadow-xl shadow-pink-500/5">
  <div class="flex justify-between items-center h-20 px-6 md:px-12 max-w-screen-2xl mx-auto">
    <a href="/" class="text-2xl font-black text-pink-600 dark:text-pink-400 italic font-headline tracking-tight uppercase">{{ .Site.Data.homepage.siteTitle | default .Site.Title }}</a>
    <nav class="hidden md:flex items-center space-x-8 font-headline tracking-tight uppercase font-bold">
      <a class="text-zinc-600 dark:text-zinc-400 font-medium hover:text-pink-500 dark:hover:text-pink-300 transition-colors duration-300" href="/">Home</a>
      <a class="text-zinc-600 dark:text-zinc-400 font-medium hover:text-pink-500 dark:hover:text-pink-300 transition-colors duration-300" href="/galerie/">Galerie</a>
      <a class="text-zinc-600 dark:text-zinc-400 font-medium hover:text-pink-500 dark:hover:text-pink-300 transition-colors duration-300" href="/uebermich/">Über mich</a>
      <a class="text-pink-600 dark:text-pink-400 border-b-2 border-pink-500 pb-1" href="/erfolge/">Erfolge</a>
      <a class="text-zinc-600 dark:text-zinc-400 font-medium hover:text-pink-500 dark:hover:text-pink-300 transition-colors duration-300" href="/gaestebuch/">Gästebuch</a>
    </nav>
    <button class="bg-gradient-to-br from-primary to-primary-container text-on-primary px-8 py-3 rounded-xl font-bold font-headline uppercase tracking-wider scale-95 active:scale-90 transition-transform">
      Kontakt
    </button>
  </div>
</header>

{{ $e := .Site.Data.erfolge }}

<main class="pt-32 pb-20">
  <!-- Hero -->
  <section class="max-w-7xl mx-auto px-6 mb-24">
    <div class="grid grid-cols-1 lg:grid-cols-12 gap-12 items-center">
      <div class="lg:col-span-7">
        <span class="text-primary font-bold tracking-[0.2em] uppercase text-sm mb-4 block">{{ $e.hero.badge }}</span>
        <h1 class="text-6xl md:text-8xl font-headline font-extrabold text-on-surface leading-[0.9] tracking-tighter mb-8">
          {{ $e.hero.heading_main }} <span class="text-glass-gradient">{{ $e.hero.heading_colored }}</span>
        </h1>
        <p class="text-xl text-on-surface-variant leading-relaxed max-w-xl">
          {{ $e.hero.description }}
        </p>
      </div>
      <div class="lg:col-span-5 relative">
        <div class="aspect-[4/5] rounded-xl overflow-hidden editorial-shadow bg-surface-container-highest">
          {{ if $e.hero.image }}
          <img class="w-full h-full object-cover" src="/erfolge-img/{{ $e.hero.image }}" alt="{{ $e.hero.rang_value }} beim Wettkampf"/>
          {{ else }}
          <div class="w-full h-full bg-surface-container-high flex items-center justify-center">
            <span class="material-symbols-outlined text-surface-variant" style="font-size:6rem;">sports_martial_arts</span>
          </div>
          {{ end }}
        </div>
        <div class="absolute -bottom-10 -left-10 bg-white p-8 rounded-lg editorial-shadow hidden md:block">
          <div class="flex items-center gap-4">
            <div class="w-12 h-12 rounded-full bg-secondary flex items-center justify-center text-on-secondary">
              <span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">workspace_premium</span>
            </div>
            <div>
              <div class="text-sm font-bold uppercase tracking-widest text-secondary">{{ $e.hero.rang_label }}</div>
              <div class="text-2xl font-headline font-black text-on-surface">{{ $e.hero.rang_value }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- Alle Erfolge aus Content-Dateien -->
  <section class="bg-surface-container-low py-24 rounded-t-[5rem]">
    <div class="max-w-7xl mx-auto px-6">
      <h2 class="text-4xl font-headline font-bold text-on-surface mb-16">Alle Erfolge</h2>
      <div class="grid grid-cols-1 md:grid-cols-2 gap-8 items-start">
        {{ range (where .Site.RegularPages "Section" "erfolge") }}
        <div class="erfolg-card bg-surface-container-lowest rounded-xl editorial-shadow relative overflow-hidden group transition-all duration-500 hover:shadow-xl">
          <!-- Immer sichtbar -->
          <div class="p-8 relative z-10">
            <div class="flex items-center gap-4 mb-5">
              <div class="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center flex-shrink-0">
                <span class="material-symbols-outlined text-2xl text-primary" style="font-variation-settings: 'FILL' 1;">military_tech</span>
              </div>
              <span class="bg-secondary text-white px-4 py-1 rounded-full text-xs font-bold uppercase tracking-widest">{{ .Params.rang | default "Highlight" }}</span>
            </div>
            <h3 class="text-2xl font-headline font-bold text-on-surface mb-3">{{ .Title }}</h3>
            <p class="text-on-surface-variant leading-relaxed mb-6">{{ .Summary }}</p>
            <button onclick="toggleErfolg(this)"
              class="flex items-center gap-2 text-primary font-bold text-sm font-headline uppercase tracking-wider hover:gap-3 transition-all">
              <span class="btn-label">Mehr lesen</span>
              <span class="material-symbols-outlined transition-transform duration-300 text-base">expand_more</span>
            </button>
          </div>
          <!-- Aufklappbarer Inhalt -->
          <div class="erfolg-body overflow-hidden transition-all duration-500 ease-in-out" style="max-height:0">
            <div class="px-8 pb-8 border-t border-surface-container-high">
              <div class="pt-6 text-on-surface-variant leading-relaxed space-y-4 text-base">
                {{ .Content }}
              </div>
            </div>
          </div>
          <span class="material-symbols-outlined absolute -bottom-10 -right-10 text-[12rem] text-surface-container-high opacity-10 group-hover:opacity-20 transition-opacity pointer-events-none">sports_martial_arts</span>
        </div>
        {{ end }}
      </div>
    </div>
  </section>

  <script>
  function toggleErfolg(btn) {
    var card = btn.closest('.erfolg-card');
    var body = card.querySelector('.erfolg-body');
    var icon = btn.querySelector('.material-symbols-outlined');
    var label = btn.querySelector('.btn-label');
    var isOpen = body.style.maxHeight && body.style.maxHeight !== '0px';
    if (isOpen) {
      body.style.maxHeight = '0';
      icon.style.transform = '';
      label.textContent = 'Mehr lesen';
    } else {
      body.style.maxHeight = body.scrollHeight + 'px';
      icon.style.transform = 'rotate(180deg)';
      label.textContent = 'Weniger anzeigen';
    }
  }
  </script>

  <!-- Meilensteine Bento Grid -->
  <section class="max-w-7xl mx-auto px-6 mt-24">
    <h2 class="text-5xl font-headline font-black mb-16 tracking-tight">MEILENSTEINE DES <span class="text-primary italic">ERFOLGS</span></h2>
    <div class="grid grid-cols-1 md:grid-cols-3 gap-8">

      <!-- Große Karte: Haupt-Meilenstein -->
      <div class="md:col-span-2 bg-surface-container-lowest rounded-xl p-10 editorial-shadow flex flex-col justify-between relative overflow-hidden group">
        <div class="relative z-10">
          <div class="flex items-center gap-4 mb-6">
            <span class="material-symbols-outlined text-4xl text-primary" style="font-variation-settings: 'FILL' 1;">military_tech</span>
            <span class="font-headline font-extrabold text-2xl uppercase italic">{{ $e.meilenstein.event }}</span>
          </div>
          <h3 class="text-4xl font-headline font-bold text-on-surface mb-4">{{ $e.meilenstein.platz }}</h3>
          <p class="text-on-surface-variant max-w-md text-lg">{{ $e.meilenstein.beschreibung }}</p>
        </div>
        <div class="mt-12 flex items-center gap-6 relative z-10">
          <div>
            <div class="text-3xl font-black text-on-surface">{{ $e.meilenstein.jahr }}</div>
            <div class="text-xs uppercase tracking-widest font-bold text-primary">{{ $e.meilenstein.ort }}</div>
          </div>
          <div class="h-10 w-[1px] bg-outline-variant/30"></div>
          <div>
            <div class="text-3xl font-black text-on-surface">{{ $e.meilenstein.kategorie }}</div>
            <div class="text-xs uppercase tracking-widest font-bold text-primary">Kategorie</div>
          </div>
        </div>
        <span class="material-symbols-outlined absolute -bottom-10 -right-10 text-[15rem] text-surface-container opacity-20 group-hover:opacity-30 transition-opacity">sports_martial_arts</span>
      </div>

      <!-- Weitere Auszeichnungen -->
      <div class="bg-primary rounded-xl p-8 text-on-primary flex flex-col gap-8 shadow-2xl shadow-primary/20">
        <h4 class="font-headline font-bold text-xl border-b border-on-primary/20 pb-4">Weitere Auszeichnungen</h4>
        {{ $icons := slice "star" "emoji_events" "rewarded_ads" "workspace_premium" "military_tech" "sports_martial_arts" }}
        {{ range $i, $a := $e.weitere_auszeichnungen }}
        <div class="flex gap-4">
          <div class="w-10 h-10 rounded-full bg-white/20 flex items-center justify-center shrink-0">
            <span class="material-symbols-outlined text-xl">{{ index $icons (mod $i (len $icons)) }}</span>
          </div>
          <div>
            <p class="font-bold">{{ $a.titel }}</p>
            <p class="text-sm opacity-80">{{ $a.detail }}</p>
            {{ if $a.beschreibung }}
            <p class="text-xs opacity-70 mt-1 leading-relaxed">{{ $a.beschreibung }}</p>
            {{ end }}
          </div>
        </div>
        {{ end }}
      </div>

      <!-- Stats -->
      {{ $stats := $e.stats }}
      {{ with index $stats 0 }}
      <div class="bg-secondary-container rounded-xl p-8 flex flex-col justify-center gap-2">
        <span class="text-on-secondary-container font-headline font-black text-6xl italic">{{ .wert }}</span>
        <span class="text-secondary font-bold uppercase tracking-[0.2em] text-sm">{{ .label }}</span>
      </div>
      {{ end }}
      {{ with index $stats 1 }}
      <div class="bg-surface-container-highest rounded-xl p-8 flex flex-col justify-center gap-2">
        <span class="text-on-surface font-headline font-black text-6xl italic">{{ .wert }}</span>
        <span class="text-on-surface-variant font-bold uppercase tracking-[0.2em] text-sm">{{ .label }}</span>
      </div>
      {{ end }}
      {{ with index $stats 2 }}
      <div class="bg-white rounded-xl p-8 editorial-shadow flex flex-col justify-center gap-2 border-t-4 border-pink-500">
        <span class="text-pink-600 font-headline font-black text-6xl italic">{{ .wert }}</span>
        <span class="text-zinc-500 font-bold uppercase tracking-[0.2em] text-sm">{{ .label }}</span>
      </div>
      {{ end }}

    </div>
  </section>

  <!-- Zitat -->
  <section class="max-w-4xl mx-auto px-6 py-32 text-center">
    <span class="material-symbols-outlined text-primary text-6xl mb-8" style="font-variation-settings: 'FILL' 1;">format_quote</span>
    <blockquote class="text-3xl md:text-5xl font-headline font-bold text-on-surface leading-tight tracking-tight italic">
      "{{ $e.zitat.text }}"
    </blockquote>
    <p class="mt-8 font-bold uppercase tracking-widest text-on-surface-variant">— {{ $e.zitat.autor }}</p>
  </section>
</main>

<!-- Footer -->
<footer class="bg-zinc-50 dark:bg-zinc-950 w-full rounded-t-[3rem] mt-20">
  <div class="flex flex-col md:flex-row justify-between items-center py-12 px-8 max-w-7xl mx-auto gap-6 text-sm tracking-wide">
    <div class="text-lg font-bold text-zinc-900 dark:text-zinc-100 font-headline uppercase italic">{{ .Site.Data.homepage.siteTitle | default .Site.Title }}</div>
    <div class="flex gap-8 text-zinc-500">
      <a class="hover:text-pink-500 hover:underline decoration-pink-500 decoration-2 underline-offset-4 transition-opacity" href="#">Instagram</a>
      <a class="hover:text-pink-500 hover:underline decoration-pink-500 decoration-2 underline-offset-4 transition-opacity" href="#">YouTube</a>
      <a class="hover:text-pink-500 hover:underline decoration-pink-500 decoration-2 underline-offset-4 transition-opacity" href="#">Email</a>
    </div>
    <div class="text-zinc-500 opacity-80">© 2024 {{ .Site.Data.homepage.siteTitle | default .Site.Title }}. Alle Rechte vorbehalten.</div>
  </div>
</footer>

</body>
</html>
