diff --git a/index.html b/index.html
index 44d2469..2bf281d 100644
--- a/index.html
+++ b/index.html
@@ -3,10 +3,9 @@
 <head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
-<title>JGA Prag 2026 – Übersicht</title>
-<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'>
+<title>🍻 JGA Prag 2026 – Die letzte Reise vor dem Altar</title>
 <link rel="manifest" href="manifest.json">
-<meta name="theme-color" content="#3b82f6">
+<meta name="theme-color" content="#d4a017">
 <meta name="apple-mobile-web-app-capable" content="yes">
 <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
 <meta name="apple-mobile-web-app-title" content="JGA Prag">
@@ -15,429 +14,839 @@
   // Theme-Toggle: localStorage > System-Preference > Dark
   (function() {
     const saved = localStorage.getItem('jga-theme');
-    const sysDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
-    const theme = saved || (sysDark ? 'dark' : 'dark');  // Default Dark
+    const theme = saved || 'dark';
     document.documentElement.setAttribute('data-theme', theme);
   })();
 </script>
-<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🧭</text></svg>">
+<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🍻</text></svg>">
 <style>
-  /* ====== Theme-Variablen ====== */
+  /* ============================================================
+     THEME — JGA-Farben: Bordeaux (Akzent), Gold (Highlights), tiefes Schwarz
+     ============================================================ */
   :root, [data-theme="dark"] {
-    --bg: #1c1c1f;
-    --card-bg: #26262a;
-    --card-border: #353539;
-    --text: #e8e8ea;
-    --text-muted: #999;
-    --text-dim: #666;
-    --accent: #3b82f6;
-    --accent-hover: #2563eb;
-    --info-bg: #26262a;
-    --info-label: #888;
-    --footer-border: #2a2a2d;
-    --footer-text: #666;
+    --bg: #0e0c0f;
+    --bg-2: #18141a;
+    --bg-3: #221a23;
+    --card-bg: #1d1822;
+    --card-bg-hover: #261e2c;
+    --card-border: #2d2532;
+    --card-border-hover: #4a3a55;
+    --text: #f1ebe4;
+    --text-strong: #fff8e7;
+    --text-muted: #a89e93;
+    --text-dim: #756d65;
+    --accent: #d4a017;        /* Royal Gold */
+    --accent-bright: #f6c544;
+    --accent-dim: #8a6914;
+    --bordeaux: #8b1538;      /* Bordeaux / Burgund */
+    --bordeaux-bright: #b81e4a;
+    --success: #2dd36f;
+    --danger: #eb445a;
+    --shadow: 0 4px 20px rgba(0,0,0,0.4);
+    --shadow-strong: 0 12px 40px rgba(0,0,0,0.55);
+    --glow-gold: 0 0 24px rgba(212,160,23,0.35);
+    --glow-bordeaux: 0 0 24px rgba(139,21,56,0.35);
+    /* Kategorie-Farben */
+    --cat-base: #f6c544;       /* Gold — Hotel/Base */
+    --cat-action: #ef4444;     /* Rot — Action */
+    --cat-fun: #a855f7;        /* Lila — Fun/Games */
+    --cat-nacht: #6366f1;      /* Indigo — Nachtleben */
+    --cat-stadt: #14b8a6;      /* Teal — Sightseeing */
   }
   [data-theme="light"] {
-    --bg: #f5f5f7;
+    --bg: #fdf8f0;             /* Cremig warm */
+    --bg-2: #f5ecdc;
+    --bg-3: #ebe0cc;
     --card-bg: #ffffff;
-    --card-border: #e0e0e3;
-    --text: #1a1a1a;
-    --text-muted: #555;
-    --text-dim: #888;
-    --accent: #2563eb;
-    --accent-hover: #1d4ed8;
-    --info-bg: #ffffff;
-    --info-label: #6b6b6b;
-    --footer-border: #e0e0e3;
-    --footer-text: #888;
+    --card-bg-hover: #fdf8f0;
+    --card-border: #e8dcc6;
+    --card-border-hover: #d4a017;
+    --text: #2a1f1a;
+    --text-strong: #1a0e0a;
+    --text-muted: #6b5d4f;
+    --text-dim: #968879;
+    --accent: #b8860b;
+    --accent-bright: #d4a017;
+    --accent-dim: #8a6914;
+    --bordeaux: #8b1538;
+    --bordeaux-bright: #a0122f;
+    --success: #1e8e3e;
+    --danger: #c5223a;
+    --shadow: 0 4px 20px rgba(101, 67, 33, 0.12);
+    --shadow-strong: 0 12px 40px rgba(101, 67, 33, 0.18);
+    --glow-gold: 0 0 24px rgba(212,160,23,0.25);
+    --glow-bordeaux: 0 0 24px rgba(139,21,56,0.2);
+    --cat-base: #b8860b;
+    --cat-action: #dc2626;
+    --cat-fun: #9333ea;
+    --cat-nacht: #4f46e5;
+    --cat-stadt: #0d9488;
   }
 
   * { box-sizing: border-box; }
   html, body {
     margin: 0; padding: 0;
-    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
     background: var(--bg);
     color: var(--text);
     min-height: 100vh;
-    transition: background 0.3s, color 0.3s;
+    overflow-x: hidden;
+    transition: background 0.4s, color 0.4s;
   }
 
+  /* ===== Animierter Hintergrund ===== */
+  body::before {
+    content: '';
+    position: fixed;
+    inset: 0;
+    background:
+      radial-gradient(circle at 20% 10%, rgba(212,160,23,0.12), transparent 40%),
+      radial-gradient(circle at 80% 30%, rgba(139,21,56,0.10), transparent 50%),
+      radial-gradient(circle at 40% 90%, rgba(168,85,247,0.08), transparent 45%);
+    pointer-events: none;
+    z-index: -1;
+    animation: bgPulse 18s ease-in-out infinite;
+  }
+  @keyframes bgPulse {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.6; }
+  }
+
+  /* Emoji in Originalfarbe */
+  .emoji {
+    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", emoji;
+  }
+
+  /* ===== Container ===== */
   .container {
     max-width: 1400px;
     margin: 0 auto;
-    padding: 40px 24px;
+    padding: 32px 24px 80px;
   }
 
-  header {
-    text-align: center;
-    margin-bottom: 48px;
-  }
-  h1 {
-    font-size: 42px;
-    margin: 0 0 12px 0;
-    color: var(--text);
-    font-weight: 700;
-  }
-  .subtitle {
-    font-size: 18px;
-    color: var(--text-muted);
-    margin: 0;
-  }
-  .badge {
-    display: inline-block;
-    background: rgba(59, 130, 246, 0.15);
-    color: var(--accent);
-    padding: 4px 12px;
-    border-radius: 12px;
-    font-size: 13px;
-    margin-top: 12px;
-    border: 1px solid rgba(59, 130, 246, 0.3);
-  }
-
-  /* Theme-Toggle Button */
+  /* ===== Theme-Toggle ===== */
   .theme-toggle {
     position: fixed;
-    top: 16px;
-    right: 16px;
-    width: 44px; height: 44px;
+    top: 20px; right: 20px;
+    width: 48px; height: 48px;
     border-radius: 50%;
     background: var(--card-bg);
-    border: 1px solid var(--card-border);
-    color: var(--text);
-    font-size: 20px;
+    border: 2px solid var(--accent);
+    color: var(--accent-bright);
+    font-size: 22px;
     cursor: pointer;
     z-index: 100;
-    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
-    transition: all 0.2s;
+    box-shadow: var(--shadow);
+    transition: all 0.3s;
     display: flex; align-items: center; justify-content: center;
   }
   .theme-toggle:hover {
-    transform: rotate(15deg) scale(1.1);
-    border-color: var(--accent);
+    transform: rotate(20deg) scale(1.1);
+    box-shadow: var(--glow-gold);
   }
 
-  /* Emoji global in Original-Farbe */
-  .card-icon, h1, .badge, .info-item .label {
-    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Segoe UI Symbol", emoji, sans-serif;
-  }
-
-  /* Karten-Grid */
-  .cards {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
-    gap: 20px;
-    margin-bottom: 48px;
-  }
-
-  .card {
-    background: var(--card-bg);
+  /* ============================================================
+     HERO
+     ============================================================ */
+  .hero {
+    text-align: center;
+    padding: 48px 16px 56px;
+    margin-bottom: 40px;
+    position: relative;
+    border-radius: 24px;
+    background:
+      linear-gradient(135deg, rgba(139,21,56,0.25) 0%, rgba(212,160,23,0.15) 50%, rgba(139,21,56,0.25) 100%),
+      var(--bg-2);
     border: 1px solid var(--card-border);
-    border-radius: 12px;
-    padding: 28px;
-    transition: all 0.3s ease;
-    display: flex;
-    flex-direction: column;
+    overflow: hidden;
   }
-  .card:hover {
-    transform: translateY(-2px);
-    border-color: var(--accent);
+  .hero::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: repeating-linear-gradient(
+      45deg,
+      transparent 0px,
+      transparent 20px,
+      rgba(212,160,23,0.03) 20px,
+      rgba(212,160,23,0.03) 21px
+    );
+    pointer-events: none;
   }
-  .card-icon {
+  .hero-crown {
     font-size: 48px;
-    margin-bottom: 16px;
+    margin-bottom: 8px;
+    display: block;
+    filter: drop-shadow(0 4px 12px rgba(212,160,23,0.5));
+    animation: bobUp 3s ease-in-out infinite;
+  }
+  @keyframes bobUp {
+    0%, 100% { transform: translateY(0) rotate(-5deg); }
+    50% { transform: translateY(-8px) rotate(5deg); }
+  }
+  .hero h1 {
+    font-size: clamp(40px, 7vw, 72px);
+    margin: 0 0 8px 0;
+    font-weight: 900;
+    letter-spacing: -1px;
+    background: linear-gradient(135deg, var(--accent-bright) 0%, #fff8e7 50%, var(--bordeaux-bright) 100%);
+    -webkit-background-clip: text;
+    background-clip: text;
+    -webkit-text-fill-color: transparent;
+    text-shadow: 0 0 40px rgba(212,160,23,0.3);
     line-height: 1;
   }
-  .card h2 {
-    margin: 0 0 8px 0;
-    font-size: 20px;
-    color: var(--text);
+  .hero .sub {
+    font-size: clamp(16px, 2.2vw, 22px);
+    color: var(--text-strong);
+    margin: 0 0 4px 0;
     font-weight: 600;
+    letter-spacing: 0.5px;
   }
-  .card .description {
+  .hero .where {
+    font-size: clamp(18px, 2.5vw, 26px);
+    color: var(--accent-bright);
+    margin: 8px 0 16px;
+    font-weight: 700;
+  }
+  .hero-meta {
+    display: inline-flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    justify-content: center;
+    margin-top: 8px;
+  }
+  .hero-chip {
+    background: rgba(212,160,23,0.12);
+    color: var(--accent-bright);
+    padding: 6px 14px;
+    border-radius: 999px;
+    font-size: 13px;
+    font-weight: 600;
+    border: 1px solid rgba(212,160,23,0.35);
+  }
+  .hero-chip.hotel {
+    background: rgba(246,197,68,0.18);
+    border-color: var(--accent-bright);
+  }
+
+  /* ===== Section-Title ===== */
+  .section {
+    margin-bottom: 56px;
+  }
+  .section-title {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    font-size: clamp(20px, 3vw, 28px);
+    margin: 0 0 20px;
+    font-weight: 800;
+    letter-spacing: -0.3px;
+  }
+  .section-title .bar {
+    flex: 1;
+    height: 2px;
+    background: linear-gradient(90deg, var(--accent) 0%, transparent 100%);
+    border-radius: 1px;
+  }
+  .section-subtitle {
     color: var(--text-muted);
     font-size: 14px;
-    line-height: 1.6;
-    margin: 0 0 16px 0;
-    flex: 1;
-  }
-  .card .open-btn {
-    display: inline-block;
-    padding: 10px 20px;
-    background: var(--accent);
-    color: #fff;
-    text-decoration: none;
-    border-radius: 6px;
-    font-weight: 500;
-    text-align: center;
-    transition: background 0.2s;
-  }
-  .card .open-btn:hover {
-    background: var(--accent-hover);
+    margin: -10px 0 20px 36px;
   }
 
-  /* Section Header */
-  .section-title {
-    font-size: 22px;
-    margin: 48px 0 24px 0;
-    color: var(--text);
-    font-weight: 600;
-  }
-
-  /* Info-Block */
-  .info-grid {
+  /* ============================================================
+     INFO BAR — Trip-Übersicht (kompakt)
+     ============================================================ */
+  .trip-info {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
-    gap: 16px;
-    margin-bottom: 32px;
+    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+    gap: 12px;
+    margin-bottom: 40px;
   }
-  .info-item {
-    background: var(--info-bg);
-    border-left: 3px solid var(--accent);
-    padding: 16px;
-    border-radius: 4px;
+  .trip-pill {
+    background: var(--card-bg);
+    border: 1px solid var(--card-border);
+    border-radius: 14px;
+    padding: 14px 16px;
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    transition: all 0.2s;
   }
-  .info-item .label {
-    font-size: 12px;
-    color: var(--info-label);
+  .trip-pill:hover { transform: translateY(-2px); border-color: var(--accent); }
+  .trip-pill .icon { font-size: 24px; }
+  .trip-pill .text { flex: 1; }
+  .trip-pill .label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; }
+  .trip-pill .value { font-size: 15px; color: var(--text-strong); font-weight: 700; margin-top: 2px; }
+
+  /* ============================================================
+     HAUPT-CARDS — groß, mit Akzentfarbe links
+     ============================================================ */
+  .cards-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+    gap: 18px;
+  }
+  .big-card {
+    background: var(--card-bg);
+    border: 1px solid var(--card-border);
+    border-radius: 16px;
+    padding: 0;
+    overflow: hidden;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    text-decoration: none;
+    color: var(--text);
+    cursor: pointer;
+  }
+  .big-card::before {
+    content: '';
+    position: absolute;
+    top: 0; left: 0; right: 0;
+    height: 4px;
+    background: var(--card-color, var(--accent));
+    box-shadow: 0 0 16px var(--card-color, var(--accent));
+    opacity: 0.7;
+  }
+  .big-card:hover {
+    transform: translateY(-4px);
+    background: var(--card-bg-hover);
+    border-color: var(--card-color, var(--accent));
+    box-shadow: 0 12px 32px rgba(0,0,0,0.3), 0 0 0 1px var(--card-color, var(--accent));
+  }
+  .big-card .body { padding: 22px 22px 18px; flex: 1; }
+  .big-card .top {
+    display: flex;
+    align-items: center;
+    gap: 14px;
+    margin-bottom: 14px;
+  }
+  .big-card .icon-wrap {
+    width: 56px; height: 56px;
+    border-radius: 14px;
+    background: linear-gradient(135deg, var(--card-color, var(--accent)) 0%, color-mix(in srgb, var(--card-color, var(--accent)) 60%, black) 100%);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 30px;
+    flex-shrink: 0;
+    box-shadow: 0 6px 20px rgba(0,0,0,0.3);
+  }
+  .big-card h3 {
+    margin: 0;
+    font-size: 20px;
+    color: var(--text-strong);
+    font-weight: 800;
+    letter-spacing: -0.2px;
+  }
+  .big-card .tag {
+    font-size: 11px;
+    text-transform: uppercase;
+    letter-spacing: 1.2px;
+    color: var(--card-color, var(--accent));
+    font-weight: 700;
+    margin-top: 2px;
+  }
+  .big-card .desc {
+    color: var(--text-muted);
+    font-size: 14px;
+    line-height: 1.55;
+    margin: 0;
+  }
+  .big-card .cta {
+    padding: 14px 22px;
+    border-top: 1px solid var(--card-border);
+    background: rgba(0,0,0,0.15);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-weight: 700;
+    font-size: 14px;
+    color: var(--card-color, var(--accent));
+    transition: all 0.3s;
+  }
+  [data-theme="light"] .big-card .cta { background: rgba(0,0,0,0.03); }
+  .big-card:hover .cta {
+    background: var(--card-color, var(--accent));
+    color: #fff;
+  }
+  .big-card .cta .arrow {
+    font-size: 18px;
+    transition: transform 0.3s;
+  }
+  .big-card:hover .cta .arrow { transform: translateX(4px); }
+
+  /* ============================================================
+     LOCATION CARDS (kompakter, mit Kategorie-Farbe)
+     ============================================================ */
+  .loc-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+    gap: 14px;
+  }
+  .loc-card {
+    background: var(--card-bg);
+    border: 1px solid var(--card-border);
+    border-left: 4px solid var(--cat-color, var(--cat-action));
+    border-radius: 12px;
+    padding: 16px 18px;
+    transition: all 0.25s;
+    text-decoration: none;
+    color: var(--text);
+    display: block;
+    position: relative;
+    overflow: hidden;
+  }
+  .loc-card::after {
+    content: '';
+    position: absolute;
+    top: 0; right: 0;
+    width: 80px; height: 80px;
+    background: radial-gradient(circle, var(--cat-color, var(--cat-action)) 0%, transparent 70%);
+    opacity: 0.08;
+    border-radius: 50%;
+    transform: translate(30px, -30px);
+  }
+  .loc-card:hover {
+    transform: translateX(3px);
+    background: var(--card-bg-hover);
+    border-color: var(--cat-color);
+    border-left-color: var(--cat-color);
+    box-shadow: 0 6px 20px rgba(0,0,0,0.25);
+  }
+  .loc-card .head {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    margin-bottom: 8px;
+  }
+  .loc-card .emoji { font-size: 28px; }
+  .loc-card h4 {
+    margin: 0;
+    font-size: 16px;
+    font-weight: 700;
+    color: var(--text-strong);
+  }
+  .loc-card .meta {
+    font-size: 11px;
+    color: var(--cat-color);
     text-transform: uppercase;
     letter-spacing: 1px;
-    margin-bottom: 4px;
+    font-weight: 700;
+    margin-top: 1px;
   }
-  .info-item .value {
-    font-size: 16px;
-    color: var(--text);
-    font-weight: 600;
+  .loc-card .addr {
+    font-size: 13px;
+    color: var(--text-muted);
+    line-height: 1.5;
+    margin: 0;
+  }
+  .loc-card .price {
+    display: inline-block;
+    margin-top: 8px;
+    background: var(--cat-color);
+    color: #fff;
+    padding: 3px 10px;
+    border-radius: 999px;
+    font-size: 12px;
+    font-weight: 700;
   }
 
-  /* Quick Links */
-  .quick-links {
+  /* ============================================================
+     KATEGORIE-LABELS (für Location-Sektionen)
+     ============================================================ */
+  .cat-legend {
     display: flex;
+    gap: 14px;
     flex-wrap: wrap;
-    gap: 10px;
-    margin-bottom: 32px;
+    margin-bottom: 18px;
+    font-size: 12px;
+    color: var(--text-muted);
   }
-  .quick-links a {
+  .cat-legend span {
     display: inline-flex;
     align-items: center;
     gap: 6px;
-    padding: 8px 14px;
-    background: #26262a;
-    color: #e8e8ea;
-    text-decoration: none;
-    border-radius: 6px;
-    font-size: 14px;
-    border: 1px solid #353539;
-    transition: all 0.2s;
   }
-  .quick-links a:hover {
-    background: #2d2d31;
-    border-color: #3b82f6;
+  .cat-legend .dot {
+    width: 10px; height: 10px; border-radius: 50%;
   }
 
+  /* ============================================================
+     FOOTER
+     ============================================================ */
   footer {
     text-align: center;
-    padding: 32px 0 16px 0;
-    color: var(--footer-text);
-    font-size: 12px;
-    border-top: 1px solid var(--footer-border);
-    margin-top: 48px;
+    padding: 32px 16px;
+    color: var(--text-dim);
+    font-size: 13px;
+    border-top: 1px solid var(--card-border);
+    margin-top: 56px;
   }
   footer a {
-    color: var(--accent) !important;
+    color: var(--accent);
+    text-decoration: none;
+    font-weight: 600;
+  }
+  footer a:hover { text-decoration: underline; }
+
+  /* ============================================================
+     CONFETTI (klein, beim Card-Klick)
+     ============================================================ */
+  .confetti {
+    position: fixed;
+    width: 8px;
+    height: 8px;
+    pointer-events: none;
+    z-index: 1000;
+    border-radius: 2px;
   }
 
+  /* ============================================================
+     RESPONSIVE
+     ============================================================ */
   @media (max-width: 600px) {
-    h1 { font-size: 32px; }
-    .container { padding: 24px 16px; }
-    .card-icon { font-size: 40px; }
+    .container { padding: 20px 16px 60px; }
+    .hero { padding: 36px 16px 40px; }
+    .theme-toggle { top: 14px; right: 14px; width: 42px; height: 42px; font-size: 18px; }
+    .big-card .icon-wrap { width: 48px; height: 48px; font-size: 26px; }
+    .big-card h3 { font-size: 18px; }
+    .cards-grid { grid-template-columns: 1fr; }
+    .loc-grid { grid-template-columns: 1fr; }
   }
 </style>
 </head>
 <body>
+
+<button class="theme-toggle" id="theme-toggle" aria-label="Theme wechseln" title="Light/Dark Mode">🌙</button>
+
 <div class="container">
 
-  <button class="theme-toggle" id="theme-toggle" aria-label="Theme wechseln" title="Light/Dark Mode">🌙</button>
-
-  <header>
-    <h1>🧭 JGA Prag 2026</h1>
-    <p class="subtitle">Interaktive Karten, Wetter-Vorschau & Packliste für den Junggesellenabschied</p>
-    <div class="badge">📅 25.–26. Juli 2026 · 👥 8 Personen · 🏨 Hotel Uno Prague</div>
-  </header>
-
-  <!-- Trip Overview -->
-  <div class="section-title">Trip-Übersicht</div>
-  <div class="info-grid">
-    <div class="info-item">
-      <div class="label">📅 Datum</div>
-      <div class="value">25.–26. Juli 2026</div>
+  <!-- ===== HERO ===== -->
+  <section class="hero">
+    <span class="hero-crown">👑</span>
+    <h1>JGA Prag 2026</h1>
+    <p class="where emoji">🍺 Die letzte Reise vor dem Altar 🍺</p>
+    <p class="sub">25.–26. Juli · 8 Jungs · Eine Mission</p>
+    <div class="hero-meta">
+      <span class="hero-chip emoji">📅 25.07.2026</span>
+      <span class="hero-chip emoji">👥 8 Pers.</span>
+      <span class="hero-chip hotel emoji">🏨 Hotel Uno Prague</span>
     </div>
-    <div class="info-item">
-      <div class="label">👥 Gruppe</div>
-      <div class="value">8 Personen</div>
-    </div>
-    <div class="info-item">
-      <div class="label">🏨 Hotel</div>
-      <div class="value">Hotel Uno Prague</div>
-    </div>
-    <div class="info-item">
-      <div class="label">🚋 Tram</div>
-      <div class="value">Na Hroudě (3 Min Fußweg)</div>
-    </div>
-  </div>
+  </section>
 
-  <!-- Karten -->
-  <div class="section-title">🗺️ Interaktive Karten</div>
-  <div class="cards">
+  <!-- ===== TRIP-ÜBERSICHT (Quick-Info kompakt) ===== -->
+  <section class="trip-info">
+    <div class="trip-pill">
+      <span class="icon emoji">📅</span>
+      <div class="text">
+        <div class="label">Datum</div>
+        <div class="value">25.–26. Juli</div>
+      </div>
+    </div>
+    <div class="trip-pill">
+      <span class="icon emoji">👥</span>
+      <div class="text">
+        <div class="label">Gruppe</div>
+        <div class="value">8 Jungs</div>
+      </div>
+    </div>
+    <div class="trip-pill">
+      <span class="icon emoji">🏨</span>
+      <div class="text">
+        <div class="label">Basis</div>
+        <div class="value">Hotel Uno Prague</div>
+      </div>
+    </div>
+    <div class="trip-pill">
+      <span class="icon emoji">🚋</span>
+      <div class="text">
+        <div class="label">Tram</div>
+        <div class="value">Na Hroudě · 3 Min</div>
+      </div>
+    </div>
+  </section>
 
-    <div class="card">
-      <div class="card-icon">🗺️</div>
-      <h2>Tourenplan</h2>
-      <p class="description">
-        Basis-Karte mit allen 11 Locations (Hotel + 10 Attraktionen).
-        Emoji-Marker, Popups mit Adressen und Preisen, Dark Mode.
-      </p>
-      <a href="tourenplan.html" class="open-btn">Karte öffnen →</a>
+  <!-- ===== QUICK-ACCESS: Karten + Tools in einer Section ===== -->
+  <section class="section">
+    <h2 class="section-title"><span class="emoji">⚡</span><span>Quick-Access</span><span class="bar"></span></h2>
+    <p class="section-subtitle">Die wichtigsten Tools für unterwegs — ein Klick weg</p>
+
+    <div class="cards-grid">
+      <!-- Karten -->
+      <a href="tourenplan.html" class="big-card" style="--card-color:#f6c544;" data-confetti>
+        <div class="body">
+          <div class="top">
+            <div class="icon-wrap emoji">🗺️</div>
+            <div>
+              <h3>Tourenplan</h3>
+              <div class="tag">Karte · Basis</div>
+            </div>
+          </div>
+          <p class="desc">Alle 11 Locations auf einer Karte. Emoji-Marker, Preise, Adressen — direkt im Popup.</p>
+        </div>
+        <div class="cta"><span>Karte öffnen</span><span class="arrow">→</span></div>
+      </a>
+
+      <a href="tourenplan-mit-tram.html" class="big-card" style="--card-color:#6366f1;" data-confetti>
+        <div class="body">
+          <div class="top">
+            <div class="icon-wrap emoji">🚋</div>
+            <div>
+              <h3>Tourenplan + Tram</h3>
+              <div class="tag">Karte · ÖPNV</div>
+            </div>
+          </div>
+          <p class="desc">Erweitert um 7 Tram-Linien + 3 Metro-Linien + 15 Haltestellen. Mit Ticket-Info.</p>
+        </div>
+        <div class="cta"><span>Karte öffnen</span><span class="arrow">→</span></div>
+      </a>
+
+      <!-- Tools -->
+      <a href="wetter.html" class="big-card" style="--card-color:#14b8a6;" data-confetti>
+        <div class="body">
+          <div class="top">
+            <div class="icon-wrap emoji">🌤️</div>
+            <div>
+              <h3>Wetter-Vorschau</h3>
+              <div class="tag">Planung</div>
+            </div>
+          </div>
+          <p class="desc">Historische Mittelwerte + Live-Wetterlinks + Packliste-Tipps für Prag im Juli.</p>
+        </div>
+        <div class="cta"><span>Wetter öffnen</span><span class="arrow">→</span></div>
+      </a>
+
+      <a href="packliste.html" class="big-card" style="--card-color:#f97316;" data-confetti>
+        <div class="body">
+          <div class="top">
+            <div class="icon-wrap emoji">🎒</div>
+            <div>
+              <h3>Packliste</h3>
+              <div class="tag">Checkliste</div>
+            </div>
+          </div>
+          <p class="desc">Interaktive Checkliste mit Fortschrittsbalken. Speichert automatisch im Browser.</p>
+        </div>
+        <div class="cta"><span>Packliste öffnen</span><span class="arrow">→</span></div>
+      </a>
+
+      <a href="countdown.html" class="big-card" style="--card-color:#d4a017;" data-confetti>
+        <div class="body">
+          <div class="top">
+            <div class="icon-wrap emoji">⏱️</div>
+            <div>
+              <h3>JGA-Countdown</h3>
+              <div class="tag">Live</div>
+            </div>
+          </div>
+          <p class="desc">Countdown bis zum großen Tag. Share-Button für Social Media, Vorbereitungs-Fortschritt.</p>
+        </div>
+        <div class="cta"><span>Countdown öffnen</span><span class="arrow">→</span></div>
+      </a>
+
+      <a href="trinkspiel.html" class="big-card" style="--card-color:#a855f7;" data-confetti>
+        <div class="body">
+          <div class="top">
+            <div class="icon-wrap emoji">🃏</div>
+            <div>
+              <h3>Trinkspiele</h3>
+              <div class="tag">Spaß · 5 Spiele</div>
+            </div>
+          </div>
+          <p class="desc">Kings, Ride the Bus, Ring of Fire + mehr. Kartenflip-Animation, Spieler-Tracker.</p>
+        </div>
+        <div class="cta"><span>Spiele öffnen</span><span class="arrow">→</span></div>
+      </a>
+
+      <a href="strafen.html" class="big-card" style="--card-color:#ef4444;" data-confetti>
+        <div class="body">
+          <div class="top">
+            <div class="icon-wrap emoji">🎲</div>
+            <div>
+              <h3>Strafen-Generator</h3>
+              <div class="tag">Würfel</div>
+            </div>
+          </div>
+          <p class="desc">50 Strafen auf 4 Tiers — würfeln mit Tier-Weighting. Bräutigam, Zufällig oder Gruppe.</p>
+        </div>
+        <div class="cta"><span>Würfeln öffnen</span><span class="arrow">→</span></div>
+      </a>
+
+      <a href="memory.html" class="big-card" style="--card-color:#ec4899;" data-confetti>
+        <div class="body">
+          <div class="top">
+            <div class="icon-wrap emoji">📖</div>
+            <div>
+              <h3>Memory-Buch</h3>
+              <div class="tag">Erinnerungen</div>
+            </div>
+          </div>
+          <p class="desc">Digitales Gästebuch. Fotos, Texte, Moods, Reactions, Location-Tags — als JSON-Backup.</p>
+        </div>
+        <div class="cta"><span>Buch öffnen</span><span class="arrow">→</span></div>
+      </a>
+    </div>
+  </section>
+
+  <!-- ===== HOTEL / BASIS ===== -->
+  <section class="section">
+    <h2 class="section-title"><span class="emoji">🏨</span><span>Unsere Basis</span><span class="bar"></span></h2>
+
+    <a href="https://www.unoprague.cz" target="_blank" rel="noopener" class="loc-card" style="--cat-color:var(--cat-base);">
+      <div class="head">
+        <span class="emoji">🏨</span>
+        <div>
+          <h4>Hotel Uno Prague</h4>
+          <div class="meta">Übernachtung</div>
+        </div>
+      </div>
+      <p class="addr">Štěchovická 2296/2a, Praha 10 – Strašnice</p>
+      <span class="price">🔗 Website öffnen</span>
+    </a>
+  </section>
+
+  <!-- ===== DIE 10 LOCATIONS ===== -->
+  <section class="section">
+    <h2 class="section-title"><span class="emoji">🎯</span><span>Die 10 Locations</span><span class="bar"></span></h2>
+    <div class="cat-legend">
+      <span><span class="dot" style="background:var(--cat-action);"></span> Action</span>
+      <span><span class="dot" style="background:var(--cat-fun);"></span> Fun &amp; Games</span>
+      <span><span class="dot" style="background:var(--cat-nacht);"></span> Nachtleben</span>
+      <span><span class="dot" style="background:var(--cat-stadt);"></span> Sightseeing</span>
     </div>
 
-    <div class="card">
-      <div class="card-icon">🚋</div>
-      <h2>Tourenplan + Tram & Metro</h2>
-      <p class="description">
-        Erweiterte Version mit 7 Tram-Linien + 3 Metro-Linien (A/B/C) + 15 Haltestellen.
-        Mit 🎫 Ticket-Button für ÖPNV-Preise & Gruppenkauf.
-      </p>
-      <a href="tourenplan-mit-tram.html" class="open-btn">Karte öffnen →</a>
+    <div class="loc-grid">
+      <a href="https://endorfin.cz/en/escape-games/" target="_blank" rel="noopener" class="loc-card" style="--cat-color:var(--cat-fun);">
+        <div class="head">
+          <span class="emoji">🔐</span>
+          <div>
+            <h4>Endorfin Escape Games</h4>
+            <div class="meta">Fun · 2 Teams</div>
+          </div>
+        </div>
+        <p class="addr">Petrohradská 216/3, Praha 10</p>
+        <span class="price">ca. 20 € p.P./1h</span>
+      </a>
+
+      <a href="https://kartplanet.cz/en/" target="_blank" rel="noopener" class="loc-card" style="--cat-color:var(--cat-action);">
+        <div class="head">
+          <span class="emoji">🏎️</span>
+          <div>
+            <h4>KartPlanet Praha</h4>
+            <div class="meta">Action · Indoor</div>
+          </div>
+        </div>
+        <p class="addr">Mezitraťová, Praha 9 – Hrdlořezy</p>
+        <span class="price">ca. 15 € p.P./10min</span>
+      </a>
+
+      <a href="https://levelsprague.com/de/minigolf/" target="_blank" rel="noopener" class="loc-card" style="--cat-color:var(--cat-fun);">
+        <div class="head">
+          <span class="emoji">⛳</span>
+          <div>
+            <h4>Level Prague Minigolf</h4>
+            <div class="meta">Fun · Indoor</div>
+          </div>
+        </div>
+        <p class="addr">Národní 63/26, Praha 1 (im Máj)</p>
+        <span class="price">ca. 25 € p.P./1h</span>
+      </a>
+
+      <a href="https://www.ovcin.cz/" target="_blank" rel="noopener" class="loc-card" style="--cat-color:var(--cat-fun);">
+        <div class="head">
+          <span class="emoji">🎳</span>
+          <div>
+            <h4>Bowling Ovčín</h4>
+            <div class="meta">Fun · Restaurant</div>
+          </div>
+        </div>
+        <p class="addr">Záběhlická 82, Praha 10 – Záběhlice</p>
+        <span class="price">ca. 6 € p.P./2h</span>
+      </a>
+
+      <a href="https://www.mysteriumtours.com/de/prag/prager-geister-tour/" target="_blank" rel="noopener" class="loc-card" style="--cat-color:var(--cat-stadt);">
+        <div class="head">
+          <span class="emoji">👻</span>
+          <div>
+            <h4>Mysterium Geister-Tour</h4>
+            <div class="meta">Sightseeing · Abend</div>
+          </div>
+        </div>
+        <p class="addr">Treffpunkt: Cartier, Pařížská / Altstädter Ring</p>
+        <span class="price">ca. 20 € p.P./2h</span>
+      </a>
+
+      <a href="https://www.pragueranger.cz/de/" target="_blank" rel="noopener" class="loc-card" style="--cat-color:var(--cat-action);">
+        <div class="head">
+          <span class="emoji">🎯</span>
+          <div>
+            <h4>Prague Ranger</h4>
+            <div class="meta">Action · Outdoor</div>
+          </div>
+        </div>
+        <p class="addr">Shuttle ab Lublaňská 1729/23, Praha 2</p>
+        <span class="price">ca. 100-200 € p.P./3-4h</span>
+      </a>
+
+      <a href="https://beerboatsprague.com/de/Prague-Beer-Boat-Tour" target="_blank" rel="noopener" class="loc-card" style="--cat-color:var(--cat-nacht);">
+        <div class="head">
+          <span class="emoji">⛵</span>
+          <div>
+            <h4>Beer Boat Prague</h4>
+            <div class="meta">Nachtleben · Treta</div>
+          </div>
+        </div>
+        <p class="addr">Start: Štefánikův most</p>
+        <span class="price">ca. 45 € p.P./1h · Bier inkl.</span>
+      </a>
+
+      <a href="https://www.paintballgame.cz/" target="_blank" rel="noopener" class="loc-card" style="--cat-color:var(--cat-action);">
+        <div class="head">
+          <span class="emoji">🎨</span>
+          <div>
+            <h4>Paintball Game Praha</h4>
+            <div class="meta">Action · Outdoor</div>
+          </div>
+        </div>
+        <p class="addr">Pod Císařkou, Praha 5 – Buďánka</p>
+        <span class="price">ca. 24 € p.P./1h · Reball</span>
+      </a>
+
+      <a href="https://mercurialaser.cz/en/pankrac/" target="_blank" rel="noopener" class="loc-card" style="--cat-color:var(--cat-action);">
+        <div class="head">
+          <span class="emoji">🔫</span>
+          <div>
+            <h4>Mercuria Laser Game Pankrác</h4>
+            <div class="meta">Action · Indoor</div>
+          </div>
+        </div>
+        <p class="addr">Budějovická 409/1a, Praha 4 (unter Bauhaus)</p>
+        <span class="price">ca. 7 € p.P./20min</span>
+      </a>
+
+      <a href="https://enigma.swallnet.com/index.php/odkaz-mistra-hvezdare-en/" target="_blank" rel="noopener" class="loc-card" style="--cat-color:var(--cat-stadt);">
+        <div class="head">
+          <span class="emoji">🔍</span>
+          <div>
+            <h4>Enigma Outdoor Adventure</h4>
+            <div class="meta">Sightseeing · App-Spiel</div>
+          </div>
+        </div>
+        <p class="addr">Stadtweit · Mobile-App Mystery</p>
+        <span class="price">ca. 5 € p.P./1-2h</span>
+      </a>
     </div>
-
-  </div>
-
-  <!-- Planungs-Tools -->
-  <div class="section-title">🧰 Planungs-Tools</div>
-  <div class="cards">
-
-    <div class="card">
-      <div class="card-icon">🌤️</div>
-      <h2>Wetter-Vorschau</h2>
-      <p class="description">
-        Historische Mittelwerte + Live-Links zu Wetterdiensten.
-        Packliste-Tipps und Schlechtwetter-Alternativen inklusive.
-      </p>
-      <a href="wetter.html" class="open-btn">Wetter öffnen →</a>
-    </div>
-
-    <div class="card">
-      <div class="card-icon">🎒</div>
-      <h2>Packliste</h2>
-      <p class="description">
-        Interaktive Checkliste mit Fortschrittsbalken. Speichert dein Häkchen
-        automatisch im Browser. Druckbar als PDF.
-      </p>
-      <a href="packliste.html" class="open-btn">Packliste öffnen →</a>
-    </div>
-
-    <div class="card">
-      <div class="card-icon">⏱️</div>
-      <h2>JGA-Countdown</h2>
-      <p class="description">
-        Großer Live-Countdown bis zum 25. Juli 2026 mit Tagen/Stunden/Minuten/Sekunden.
-        Vorbereitungsfortschritt + Teilen-Button für Social Media.
-      </p>
-      <a href="countdown.html" class="open-btn">Countdown öffnen →</a>
-    </div>
-
-  </div>
-
-  <!-- Locations Übersicht -->
-  <div class="section-title">🏨 Unsere Basis</div>
-  <div class="cards">
-
-    <div class="card">
-      <div class="card-icon">🏨</div>
-      <h2>Hotel Uno Prague</h2>
-      <p class="description">Štěchovická 2296/2a, Praha 10 – Strašnice. Unsere Basis.</p>
-      <a href="https://www.unoprague.cz" target="_blank" rel="noopener" class="open-btn">🔗 Website öffnen</a>
-    </div>
-
-  </div>
-
-  <div class="section-title">📍 Die 10 Locations</div>
-  <div class="cards">
-
-    <div class="card">
-      <div class="card-icon">🔐</div>
-      <h2>Endorfin Escape Games</h2>
-      <p class="description">Petrohradská 216/3, Praha 10. 5 Räume, max. 5 Pers/Raum → 2 Teams.</p>
-      <a href="https://endorfin.cz/en/escape-games/" target="_blank" rel="noopener" class="open-btn">🔗 Website öffnen</a>
-    </div>
-
-    <div class="card">
-      <div class="card-icon">🏎️</div>
-      <h2>KartPlanet Praha</h2>
-      <p class="description">Mezitraťová, Praha 9 – Hrdlořezy. Indoor Go-Kart.</p>
-      <a href="https://kartplanet.cz/en/" target="_blank" rel="noopener" class="open-btn">🔗 Website öffnen</a>
-    </div>
-
-    <div class="card">
-      <div class="card-icon">⛳</div>
-      <h2>Level Prague Minigolf</h2>
-      <p class="description">Národní 63/26, Praha 1 (im Máj – House of Fun). Indoor.</p>
-      <a href="https://levelsprague.com/de/minigolf/" target="_blank" rel="noopener" class="open-btn">🔗 Website öffnen</a>
-    </div>
-
-    <div class="card">
-      <div class="card-icon">🎳</div>
-      <h2>Bowling Ovčín</h2>
-      <p class="description">Záběhlická 82, Praha 10 – Záběhlice. Bowling + Billard + Restaurant.</p>
-      <a href="https://www.ovcin.cz/" target="_blank" rel="noopener" class="open-btn">🔗 Website öffnen</a>
-    </div>
-
-    <div class="card">
-      <div class="card-icon">👻</div>
-      <h2>Mysterium Geister-Tour</h2>
-      <p class="description">Treffpunkt: Cartier, Ecke Pařížská / Altstädter Ring. Start 19:45 / 20:00 / 20:15.</p>
-      <a href="https://www.mysteriumtours.com/de/prag/prager-geister-tour/" target="_blank" rel="noopener" class="open-btn">🔗 Website öffnen</a>
-    </div>
-
-    <div class="card">
-      <div class="card-icon">🎯</div>
-      <h2>Prague Ranger</h2>
-      <p class="description">Shuttle-Pickup Lublaňská 1729/23, Praha 2. Outdoor-Schießstand.</p>
-      <a href="https://www.pragueranger.cz/de/" target="_blank" rel="noopener" class="open-btn">🔗 Website öffnen</a>
-    </div>
-
-    <div class="card">
-      <div class="card-icon">⛵</div>
-      <h2>Beer Boat Prague</h2>
-      <p class="description">Start: Štefánikův most. Tretboot-Biertour mit privatem Kapitän.</p>
-      <a href="https://beerboatsprague.com/de/Prague-Beer-Boat-Tour" target="_blank" rel="noopener" class="open-btn">🔗 Website öffnen</a>
-    </div>
-
-    <div class="card">
-      <div class="card-icon">🎨</div>
-      <h2>Paintball Game Praha</h2>
-      <p class="description">Pod Císařkou, Praha 5 – Buďánka. Reball (kein Schmerz).</p>
-      <a href="https://www.paintballgame.cz/" target="_blank" rel="noopener" class="open-btn">🔗 Website öffnen</a>
-    </div>
-
-    <div class="card">
-      <div class="card-icon">🔫</div>
-      <h2>Mercuria Laser Game Pankrác</h2>
-      <p class="description">Budějovická 409/1a, Praha 4 (unter Bauhaus, neben Penny).</p>
-      <a href="https://mercurialaser.cz/en/pankrac/" target="_blank" rel="noopener" class="open-btn">🔗 Website öffnen</a>
-    </div>
-
-    <div class="card">
-      <div class="card-icon">🔍</div>
-      <h2>Enigma Outdoor Adventure</h2>
-      <p class="description">Stadtweites Mobile-App Mystery-Spiel. Kein fester Treffpunkt.</p>
-      <a href="https://enigma.swallnet.com/index.php/odkaz-mistra-hvezdare-en/" target="_blank" rel="noopener" class="open-btn">🔗 Website öffnen</a>
-    </div>
-
-  </div>
+  </section>
 
   <footer>
     <p>Stand: <span id="build-date"></span></p>
-    <p style="margin-top:8px;"><a href="https://pid.cz/en/" target="_blank" rel="noopener" style="color:#60a5fa;text-decoration:none;">🚋 Prag ÖPNV (PID) — Fahrpläne & Tickets</a></p>
+    <p style="margin-top:8px;">
+      <a href="https://pid.cz/en/" target="_blank" rel="noopener">🚋 Prag ÖPNV (PID) — Fahrpläne &amp; Tickets</a>
+    </p>
   </footer>
 
 </div>
@@ -445,7 +854,7 @@
 <script>
   document.getElementById('build-date').textContent = new Date().toLocaleDateString('de-DE', { year: 'numeric', month: 'long', day: 'numeric' });
 
-  // Theme-Toggle
+  /* ===== Theme-Toggle ===== */
   const themeBtn = document.getElementById('theme-toggle');
   function updateThemeIcon() {
     const cur = document.documentElement.getAttribute('data-theme') || 'dark';
@@ -460,16 +869,42 @@
     localStorage.setItem('jga-theme', next);
     updateThemeIcon();
   });
-</script>
-<script>
-  // PWA Service Worker registrieren
+
+  /* ===== Confetti bei Card-Klicks (nur Quick-Access) ===== */
+  const CONFETTI_COLORS = ['#f6c544', '#d4a017', '#8b1538', '#b81e4a', '#ec4899', '#a855f7', '#14b8a6'];
+  document.querySelectorAll('[data-confetti]').forEach(card => {
+    card.addEventListener('click', (e) => {
+      const rect = card.getBoundingClientRect();
+      const cx = rect.left + rect.width / 2;
+      const cy = rect.top + rect.height / 2;
+      for (let i = 0; i < 14; i++) {
+        const c = document.createElement('div');
+        c.className = 'confetti';
+        c.style.left = cx + 'px';
+        c.style.top = cy + 'px';
+        c.style.background = CONFETTI_COLORS[Math.floor(Math.random() * CONFETTI_COLORS.length)];
+        document.body.appendChild(c);
+        const angle = (Math.PI * 2 * i) / 14 + Math.random() * 0.5;
+        const velocity = 80 + Math.random() * 100;
+        const dx = Math.cos(angle) * velocity;
+        const dy = Math.sin(angle) * velocity - 60;
+        const rot = (Math.random() - 0.5) * 720;
+        c.animate([
+          { transform: `translate(0,0) rotate(0deg)`, opacity: 1 },
+          { transform: `translate(${dx}px, ${dy + 200}px) rotate(${rot}deg)`, opacity: 0 }
+        ], { duration: 900 + Math.random() * 300, easing: 'cubic-bezier(0.25, 0.46, 0.45, 0.94)' });
+        setTimeout(() => c.remove(), 1300);
+      }
+    });
+  });
+
+  /* ===== PWA Service Worker ===== */
   if ('serviceWorker' in navigator) {
     window.addEventListener('load', () => {
-      navigator.serviceWorker.register('./sw.js')
-        .then(reg => console.log('[PWA] SW registered:', reg.scope))
-        .catch(err => console.warn('[PWA] SW registration failed:', err));
+      navigator.serviceWorker.register('./sw.js').catch(() => {});
     });
   }
 </script>
+
 </body>
-</html>
+</html>
\ No newline at end of file
