From 87d11ae4d7131408535deb65cec9e5eac0ac6a99 Mon Sep 17 00:00:00 2001
From: Till Heidrich <till@heidrich-digital.de>
Date: Tue, 26 May 2026 14:54:36 +0000
Subject: [PATCH] =?UTF-8?q?feat:=20Fredi24=20v3=20=E2=80=93=20Check24-Desi?=
 =?UTF-8?q?gn=20mit=20echten=20Hotelfotos?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Hero-Banner mit Hintergrundland-Bild + Suchmaske
- Stats-Bar (Ideen / Favoriten / Verglichen / Countdown)
- Echte Unsplash-Fotos für 14 Hotelkarten
- Scroll-Slider + Grid-Umschalt-Toggle
- 18 Destinationen in 3 Sektionen (TOP / OK / Später)
- Scroll-Arrows für horizontale Navigation
- Ratings-Badges (8.9, 8.6 etc.) in Teal
- Preis-Badges (günstig / Im Budget / Knapp)
- Per-Karte: Bewertung + Sterne + Tags (AI/HP/Kostenlos stornierbar)
- Desktop Top-Nav + Mobile Bottom-Tabs
- Abstimmungs-Tab mit Inline-Buttons pro Reihe
- Alle bisherigen Features erhalten (FAB, Modal, Vote-Export)
---
 index.html | 2448 +++++++++++++++++++++++++++++++---------------------
 1 file changed, 1442 insertions(+), 1006 deletions(-)
diff --git a/index.html b/index.html
index 87d7feb..3f735c4 100644
--- a/index.html
+++ b/index.html
@@ -2,1148 +2,1584 @@
 <html lang="de">
 <head>
 <meta charset="UTF-8">
-<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover,maximum-scale=1">
-<title>Fredi24 – Reise-Planer</title>
-<link href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,600;12..96,800&family=Outfit:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
+<title>Fredi24 – Unser Reise-Planer</title>
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Bricolage+Grotesque:opsz,wght@12..96,700;12..96,800&display=swap" rel="stylesheet">
 <style>
-*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
+*{box-sizing:border-box;margin:0;padding:0;}
 :root{
-  --bg:#F7F3ED;--bg2:#EDE8DF;--card:#FFFFFF;--border:#E4DDD4;
-  --coral:#E55A35;--coral-dark:#C4482A;--coral-light:#FCEAE4;
-  --gold:#D4A020;--gold-light:#FDF4DC;
-  --teal:#1F6B5E;--teal-light:#D4EDE8;
-  --blue:#3B7EC8;--blue-light:#DAEAF8;
-  --purple:#7B4DBA;--purple-light:#EDE0FA;
-  --text:#18181B;--muted:#78716C;--subtle:#A8A29E;
-  --navy:#0D1B2A;
-  --r:12px;--r-sm:8px;--r-lg:16px;
-  --safe-bottom: env(safe-area-inset-bottom, 0px);
-  --safe-top: env(safe-area-inset-top, 0px);
+  --cream:#F8F6F1;--white:#FFFFFF;--border:#E8E3DB;--border-light:#F0EBE3;
+  --teal:#1F6B5E;--teal-dark:#17534A;--teal-light:#EBF5F2;--teal-mid:#2D8A7A;
+  --coral:#E85D2F;--coral-dark:#C94A22;--coral-light:#FEF0EB;
+  --gold:#D4A020;--gold-light:#FDF5DC;
+  --navy:#0D2137;--navy-mid:#1A3555;
+  --text:#18181B;--muted:#6B7280;--subtle:#9CA3AF;
+  --blue:#2563EB;--green:#059669;--green-light:#D1FAE5;
+  --rating-bg:#1F6B5E;
+  --shadow-sm:0 1px 3px rgba(0,0,0,0.08),0 1px 2px rgba(0,0,0,0.04);
+  --shadow-md:0 4px 16px rgba(0,0,0,0.10),0 2px 4px rgba(0,0,0,0.05);
+  --shadow-lg:0 12px 40px rgba(0,0,0,0.12);
+  --r:10px;--r-sm:6px;--r-lg:14px;--r-xl:20px;
 }
-html{-webkit-text-size-adjust:100%;}
-body{background:var(--bg);color:var(--text);font-family:'Outfit',sans-serif;font-size:14px;min-height:100vh;padding-bottom:calc(72px + var(--safe-bottom));}
+html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
+body{background:var(--cream);color:var(--text);font-family:'Inter',sans-serif;font-size:14px;min-height:100vh;padding-bottom:70px;}
 
-/* GATE */
-#gate{position:fixed;inset:0;background:var(--navy);z-index:9999;display:flex;align-items:center;justify-content:center;padding:20px;}
-.gate-box{background:#fff;border-radius:20px;padding:36px 28px;text-align:center;max-width:320px;width:100%;}
-.gate-paw{font-size:52px;margin-bottom:8px;}
-.gate-brand{font-family:'Bricolage Grotesque',sans-serif;font-size:28px;font-weight:800;color:var(--coral);letter-spacing:-0.04em;}
-.gate-sub{font-size:13px;color:var(--muted);margin:4px 0 24px;}
-.gate-input{width:100%;padding:12px 16px;border:2px solid var(--border);border-radius:var(--r);font-size:15px;font-family:'Outfit',sans-serif;outline:none;transition:border .2s;margin-bottom:10px;background:var(--bg);}
-.gate-input:focus{border-color:var(--coral);}
-.gate-btn{width:100%;padding:13px;background:var(--coral);color:#fff;border:none;border-radius:var(--r);font-size:14px;font-weight:700;cursor:pointer;font-family:'Outfit',sans-serif;transition:background .2s;letter-spacing:.01em;}
+/* ===== AUTH GATE ===== */
+#gate{position:fixed;inset:0;background:linear-gradient(135deg,var(--navy) 0%,var(--teal-dark) 100%);z-index:9999;display:flex;align-items:center;justify-content:center;padding:20px;}
+.gate-card{background:#fff;border-radius:24px;padding:40px 32px;max-width:380px;width:100%;text-align:center;box-shadow:var(--shadow-lg);}
+.gate-logo-row{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:8px;}
+.gate-logo-icon{font-size:32px;}
+.gate-brand{font-family:'Bricolage Grotesque',sans-serif;font-size:30px;font-weight:800;color:var(--teal);}
+.gate-brand span{color:var(--coral);}
+.gate-sub{font-size:13px;color:var(--muted);margin-bottom:28px;}
+.gate-input{width:100%;padding:13px 16px;border:1.5px solid var(--border);border-radius:var(--r);font-size:15px;font-family:'Inter',sans-serif;outline:none;transition:border-color .2s,box-shadow .2s;background:var(--cream);color:var(--text);margin-bottom:12px;}
+.gate-input:focus{border-color:var(--teal);box-shadow:0 0 0 3px rgba(31,107,94,0.12);}
+.gate-btn{width:100%;padding:13px;background:var(--coral);color:#fff;border:none;border-radius:var(--r);font-size:14px;font-weight:600;cursor:pointer;font-family:'Inter',sans-serif;transition:background .2s;letter-spacing:.01em;}
 .gate-btn:hover{background:var(--coral-dark);}
-.gate-err{color:var(--coral);font-size:12px;margin-top:8px;display:none;font-weight:500;}
+.gate-err{color:var(--coral);font-size:12px;margin-top:8px;min-height:16px;font-weight:500;}
 
-/* PROFILE PICKER */
-.profile-pick{display:flex;gap:8px;margin-bottom:12px;justify-content:center;}
-.profile-opt{flex:1;padding:8px 6px;border:2px solid var(--border);border-radius:var(--r);background:var(--card);cursor:pointer;text-align:center;font-size:12px;font-weight:600;color:var(--muted);transition:all .2s;}
-.profile-opt.active{border-color:var(--coral);background:var(--coral-light);color:var(--coral);}
-.profile-opt .emoji{font-size:22px;display:block;margin-bottom:2px;}
+/* ===== TOP NAV (desktop) ===== */
+.topnav{background:#fff;border-bottom:1px solid var(--border);padding:0 24px;display:flex;align-items:center;gap:0;position:sticky;top:0;z-index:100;height:56px;}
+.nav-logo{display:flex;align-items:center;gap:6px;text-decoration:none;margin-right:32px;flex-shrink:0;}
+.nav-logo-icon{font-size:22px;}
+.nav-logo-text{font-family:'Bricolage Grotesque',sans-serif;font-size:22px;font-weight:800;color:var(--teal);letter-spacing:-0.02em;}
+.nav-logo-text span{color:var(--coral);}
+.nav-links{display:flex;align-items:center;gap:4px;flex:1;}
+.nav-link{padding:7px 14px;border-radius:var(--r-sm);font-size:13px;font-weight:500;color:var(--muted);text-decoration:none;cursor:pointer;border:none;background:none;font-family:'Inter',sans-serif;transition:all .15s;display:flex;align-items:center;gap:5px;}
+.nav-link.active{background:var(--teal-light);color:var(--teal);font-weight:600;}
+.nav-link:hover:not(.active){background:var(--cream);color:var(--text);}
+.nav-right{display:flex;align-items:center;gap:10px;margin-left:auto;}
+.nav-icon-btn{width:36px;height:36px;border-radius:50%;background:var(--cream);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:16px;position:relative;}
+.nav-badge{position:absolute;top:-3px;right:-3px;background:var(--coral);color:#fff;border-radius:10px;padding:1px 5px;font-size:9px;font-weight:700;line-height:1.4;}
+.nav-avatar{display:flex;align-items:center;gap:6px;padding:5px 10px 5px 6px;border:1px solid var(--border);border-radius:20px;cursor:pointer;background:#fff;font-size:12px;font-weight:600;color:var(--text);}
+.avatar-circle{width:26px;height:26px;border-radius:50%;background:var(--teal);color:#fff;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;}
 
-/* HEADER */
-.header{background:var(--navy);color:#fff;padding:calc(12px + var(--safe-top)) 16px 12px;position:sticky;top:0;z-index:100;}
-.header-row{display:flex;align-items:center;justify-content:space-between;gap:8px;}
-.brand{display:flex;align-items:center;gap:6px;}
-.brand-logo{font-size:22px;}
-.brand-name{font-family:'Bricolage Grotesque',sans-serif;font-size:22px;font-weight:800;color:#fff;letter-spacing:-0.04em;}
-.brand-name span{color:var(--coral);}
-.brand-sub{font-size:10px;color:rgba(255,255,255,0.5);margin-top:-2px;}
-.user-pill{font-size:11px;color:rgba(255,255,255,0.85);background:var(--coral);padding:4px 10px;border-radius:20px;font-weight:700;cursor:pointer;display:flex;align-items:center;gap:4px;}
-.user-pill:hover{background:var(--coral-dark);}
+/* ===== HERO ===== */
+.hero{position:relative;background:linear-gradient(135deg,#0D2137 0%,#1A3555 50%,#1F6B5E 100%);overflow:hidden;padding:36px 28px 28px;}
+.hero::before{content:'';position:absolute;inset:0;background:url('https://images.unsplash.com/photo-1507525428034-b723cf961d3e?w=1400&q=80&fm=jpg&fit=crop') center/cover no-repeat;opacity:0.22;}
+.hero-content{position:relative;z-index:1;max-width:560px;}
+.hero-tagline{font-family:'Bricolage Grotesque',sans-serif;font-size:28px;font-weight:800;color:#fff;line-height:1.15;letter-spacing:-0.03em;margin-bottom:4px;}
+.hero-sub{font-family:'Bricolage Grotesque',sans-serif;font-size:22px;font-weight:700;color:var(--coral);font-style:italic;letter-spacing:-0.01em;margin-bottom:22px;}
 
-.header-pills{display:flex;gap:5px;flex-wrap:wrap;margin-top:9px;}
-.hp{background:rgba(255,255,255,0.1);border-radius:20px;padding:3px 9px;font-size:11px;font-weight:500;color:rgba(255,255,255,0.75);white-space:nowrap;}
-.hp.budget{background:rgba(212,160,32,0.3);color:#FFD966;}
+/* ===== SEARCH FORM ===== */
+.search-form{background:#fff;border-radius:var(--r-lg);padding:14px 16px;display:grid;grid-template-columns:repeat(5,1fr) auto;gap:0;box-shadow:var(--shadow-lg);border:1px solid var(--border);}
+.sf-field{padding:0 14px;border-right:1px solid var(--border-light);cursor:pointer;}
+.sf-field:last-of-type{border-right:none;}
+.sf-label{font-size:10px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:2px;}
+.sf-value{font-size:13px;font-weight:600;color:var(--text);display:flex;align-items:center;gap:4px;}
+.sf-value .sf-placeholder{color:var(--subtle);font-weight:400;}
+.sf-icon{font-size:14px;color:var(--subtle);}
+.sf-btn{background:var(--coral);color:#fff;border:none;border-radius:var(--r-sm);padding:10px 20px;font-size:14px;font-weight:600;cursor:pointer;font-family:'Inter',sans-serif;display:flex;align-items:center;gap:6px;transition:background .2s;white-space:nowrap;margin-left:8px;}
+.sf-btn:hover{background:var(--coral-dark);}
 
-.budget-indicator{margin-top:8px;display:flex;align-items:center;gap:8px;}
-.budget-track{flex:1;height:3px;background:rgba(255,255,255,0.15);border-radius:2px;overflow:hidden;}
-.budget-fill{height:100%;background:linear-gradient(90deg,#2D7A6A,#D4A020);border-radius:2px;}
-.budget-label{font-size:10px;color:rgba(255,255,255,0.5);}
+/* ===== STATS BAR ===== */
+.stats-bar{background:#fff;border-bottom:1px solid var(--border);padding:0 24px;}
+.stats-inner{display:flex;align-items:stretch;gap:0;max-width:1200px;margin:0 auto;}
+.stat-item{display:flex;align-items:center;gap:10px;padding:14px 20px;border-right:1px solid var(--border-light);cursor:pointer;transition:background .15s;}
+.stat-item:last-child{border-right:none;margin-left:auto;}
+.stat-item:hover{background:var(--cream);}
+.stat-icon{font-size:20px;}
+.stat-num{font-family:'Bricolage Grotesque',sans-serif;font-size:20px;font-weight:800;color:var(--text);line-height:1;}
+.stat-num.highlight{color:var(--coral);}
+.stat-label{font-size:11px;color:var(--muted);font-weight:500;margin-top:1px;}
+.stat-text{display:flex;flex-direction:column;}
+.countdown-pill{background:var(--gold-light);border:1px solid var(--gold);border-radius:20px;padding:6px 14px;display:flex;align-items:center;gap:8px;}
+.countdown-pill .stat-num{color:var(--gold);}
 
-/* BOTTOM NAV */
-.bottom-nav{position:fixed;bottom:0;left:0;right:0;z-index:200;background:#fff;border-top:1px solid var(--border);display:flex;padding-bottom:var(--safe-bottom);box-shadow:0 -4px 24px rgba(0,0,0,0.08);}
-.bnav-item{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 4px;cursor:pointer;border:none;background:none;color:var(--muted);transition:color .15s;font-size:9px;font-weight:600;font-family:'Outfit',sans-serif;letter-spacing:.03em;position:relative;}
-.bnav-item .icon{font-size:20px;line-height:1;}
-.bnav-item.active{color:var(--coral);}
-.bnav-item .nbadge{position:absolute;top:4px;right:25%;background:var(--coral);color:#fff;border-radius:10px;padding:1px 5px;font-size:9px;font-weight:700;min-width:14px;text-align:center;}
+/* ===== MAIN CONTENT ===== */
+.main{max-width:1200px;margin:0 auto;padding:20px 24px 0;}
 
-/* CONTENT */
-.tab-content{display:none;padding:12px 12px 0;}
-.tab-content.active{display:block;}
+/* ===== TOOLBAR ===== */
+.toolbar{display:flex;align-items:center;gap:10px;margin-bottom:16px;flex-wrap:wrap;}
+.filter-btn{display:flex;align-items:center;gap:5px;padding:8px 14px;border:1.5px solid var(--border);border-radius:var(--r-sm);background:#fff;font-size:12px;font-weight:500;color:var(--text);cursor:pointer;font-family:'Inter',sans-serif;transition:all .15s;}
+.filter-btn:hover{border-color:var(--teal);color:var(--teal);}
+.sort-select{appearance:none;padding:8px 32px 8px 12px;border:1.5px solid var(--border);border-radius:var(--r-sm);background:#fff;font-size:12px;font-weight:500;color:var(--text);cursor:pointer;font-family:'Inter',sans-serif;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236B7280' d='M6 8L1 3h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;}
+.sort-label{font-size:12px;color:var(--muted);font-weight:500;}
+.view-toggle{margin-left:auto;display:flex;border:1.5px solid var(--border);border-radius:var(--r-sm);overflow:hidden;}
+.view-btn{padding:7px 12px;background:#fff;border:none;font-size:12px;font-weight:500;cursor:pointer;font-family:'Inter',sans-serif;color:var(--muted);display:flex;align-items:center;gap:4px;transition:all .15s;}
+.view-btn.active{background:var(--teal);color:#fff;}
+.filter-chips{display:flex;gap:6px;flex-wrap:wrap;}
+.fchip{padding:5px 12px;border-radius:20px;border:1.5px solid var(--border);background:#fff;font-size:11px;font-weight:600;cursor:pointer;transition:all .15s;color:var(--muted);display:flex;align-items:center;gap:4px;}
+.fchip.active{background:var(--teal);border-color:var(--teal);color:#fff;}
+.fchip:hover:not(.active){border-color:var(--teal);color:var(--teal);}
+.chip-count{background:rgba(255,255,255,0.25);border-radius:10px;padding:0 5px;font-size:10px;}
 
-/* STATS DASHBOARD */
-.stats-bar{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:12px;}
-.stat-card{background:var(--card);border-radius:var(--r);padding:8px 6px;text-align:center;border:1px solid var(--border);}
-.stat-num{font-family:'Bricolage Grotesque',sans-serif;font-size:18px;font-weight:800;color:var(--coral);line-height:1;letter-spacing:-0.02em;}
-.stat-lbl{font-size:9px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.04em;margin-top:2px;}
+/* ===== SECTION TITLE ===== */
+.section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;}
+.section-title{font-family:'Bricolage Grotesque',sans-serif;font-size:18px;font-weight:800;letter-spacing:-0.02em;}
+.section-sub{font-size:12px;color:var(--muted);}
+.see-all{font-size:12px;font-weight:600;color:var(--teal);cursor:pointer;text-decoration:none;display:flex;align-items:center;gap:3px;}
 
-/* RECO HERO */
-.reco-hero{background:linear-gradient(135deg,var(--teal),#1A4B3F);border-radius:var(--r-lg);padding:16px;margin-bottom:14px;color:#fff;position:relative;overflow:hidden;}
-.reco-hero::before{content:'🏆';position:absolute;right:-10px;top:-15px;font-size:90px;opacity:0.08;}
-.reco-label{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,0.6);margin-bottom:4px;}
-.reco-title{font-family:'Bricolage Grotesque',sans-serif;font-size:18px;font-weight:800;line-height:1.1;margin-bottom:6px;letter-spacing:-0.02em;}
-.reco-why{font-size:12px;color:rgba(255,255,255,0.75);margin-bottom:12px;line-height:1.5;}
-.reco-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;}
-.reco-price{font-family:'Bricolage Grotesque',sans-serif;font-size:20px;font-weight:800;color:#FFD966;}
-.reco-tag{background:rgba(255,255,255,0.15);border-radius:20px;padding:3px 10px;font-size:11px;font-weight:600;}
-.reco-btn{margin-left:auto;background:#fff;color:var(--teal);border:none;border-radius:var(--r);padding:8px 14px;font-size:12px;font-weight:700;cursor:pointer;font-family:'Outfit',sans-serif;}
+/* ===== RECOMMENDATION BANNER ===== */
+.reco-banner{background:linear-gradient(135deg,var(--teal-dark),var(--teal-mid));border-radius:var(--r-lg);padding:18px 20px;margin-bottom:20px;display:flex;align-items:center;gap:16px;color:#fff;position:relative;overflow:hidden;}
+.reco-banner::after{content:'⭐';position:absolute;right:-8px;top:-16px;font-size:90px;opacity:.06;}
+.reco-badge{background:rgba(255,255,255,0.2);border:1px solid rgba(255,255,255,0.3);border-radius:20px;padding:3px 10px;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;flex-shrink:0;}
+.reco-text{flex:1;}
+.reco-title{font-family:'Bricolage Grotesque',sans-serif;font-size:16px;font-weight:800;margin-bottom:2px;letter-spacing:-0.02em;}
+.reco-why{font-size:12px;color:rgba(255,255,255,0.75);}
+.reco-price-block{text-align:right;flex-shrink:0;}
+.reco-price{font-family:'Bricolage Grotesque',sans-serif;font-size:22px;font-weight:800;color:#FFD966;}
+.reco-price-sub{font-size:10px;color:rgba(255,255,255,0.65);}
+.reco-cta{background:#fff;color:var(--teal);border:none;border-radius:var(--r-sm);padding:8px 14px;font-size:12px;font-weight:700;cursor:pointer;font-family:'Inter',sans-serif;flex-shrink:0;transition:background .15s;}
+.reco-cta:hover{background:var(--teal-light);}
 
-/* SECTION */
-.section-head{display:flex;align-items:center;justify-content:space-between;margin:14px 0 10px;}
-.section-title{font-family:'Bricolage Grotesque',sans-serif;font-size:16px;font-weight:800;letter-spacing:-0.02em;}
-.section-action{font-size:11px;color:var(--coral);font-weight:700;cursor:pointer;background:none;border:none;}
+/* ===== HOTEL CARDS ===== */
+.cards-scroll{display:flex;gap:14px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none;}
+.cards-scroll::-webkit-scrollbar{display:none;}
+.cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px;}
 
-/* FILTER ROW */
-.filter-row{display:flex;gap:6px;overflow-x:auto;padding-bottom:2px;margin-bottom:10px;scrollbar-width:none;}
-.filter-row::-webkit-scrollbar{display:none;}
-.chip{padding:5px 12px;border-radius:20px;border:1.5px solid var(--border);background:var(--card);font-size:11px;font-weight:600;cursor:pointer;white-space:nowrap;color:var(--muted);transition:all .15s;flex-shrink:0;}
-.chip.active{background:var(--coral);border-color:var(--coral);color:#fff;}
+.hcard{background:#fff;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-sm);border:1px solid var(--border);transition:box-shadow .2s,transform .2s;cursor:pointer;flex-shrink:0;width:256px;}
+.hcard:hover{box-shadow:var(--shadow-md);transform:translateY(-1px);}
+.hcard.grid-card{width:auto;flex-shrink:1;}
 
-/* SORT BAR */
-.sort-bar{display:flex;align-items:center;gap:8px;margin-bottom:10px;padding:8px 12px;background:var(--card);border-radius:var(--r);border:1px solid var(--border);}
-.sort-label{font-size:11px;color:var(--muted);font-weight:600;}
-.sort-select{flex:1;background:none;border:none;font-family:'Outfit',sans-serif;font-size:12px;font-weight:600;color:var(--text);outline:none;cursor:pointer;}
+/* CARD IMAGE */
+.hcard-img{position:relative;height:164px;overflow:hidden;background:var(--cream);}
+.hcard-img img{width:100%;height:100%;object-fit:cover;transition:transform .3s;}
+.hcard:hover .hcard-img img{transform:scale(1.03);}
+.hcard-badge{position:absolute;top:10px;left:10px;padding:3px 10px;border-radius:20px;font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;}
+.badge-top{background:var(--navy);color:#fff;}
+.badge-tip{background:var(--teal);color:#fff;}
+.badge-beliebt{background:var(--coral);color:#fff;}
+.badge-new{background:var(--gold);color:#fff;}
+.badge-later{background:var(--muted);color:#fff;}
+.hcard-fav{position:absolute;top:10px;right:10px;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,0.9);border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:15px;transition:all .15s;backdrop-filter:blur(4px);}
+.hcard-fav:hover,.hcard-fav.liked{background:#fff;transform:scale(1.1);}
+.hcard-fav.liked{color:var(--coral);}
+.hcard-direct{position:absolute;bottom:10px;left:10px;background:rgba(31,107,94,0.95);color:#fff;border-radius:20px;padding:2px 8px;font-size:9px;font-weight:700;letter-spacing:.04em;}
 
-/* DEST GRID */
-.dest-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:10px;}
-@media(max-width:660px){.dest-grid{grid-template-columns:1fr;}}
+/* CARD BODY */
+.hcard-body{padding:12px 14px 0;}
+.hcard-name{font-size:14px;font-weight:700;color:var(--text);line-height:1.25;margin-bottom:2px;}
+.hcard-loc{font-size:11px;color:var(--muted);margin-bottom:8px;display:flex;align-items:center;gap:3px;}
+.hcard-rating-row{display:flex;align-items:center;gap:8px;margin-bottom:6px;}
+.hcard-rating{background:var(--rating-bg);color:#fff;border-radius:5px;padding:2px 7px;font-size:12px;font-weight:700;letter-spacing:-.01em;}
+.hcard-rating-text{font-size:11px;font-weight:600;color:var(--text);}
+.hcard-reviews{font-size:10px;color:var(--muted);}
+.hcard-stars{display:flex;gap:1px;color:var(--gold);}
+.hcard-stars span{font-size:11px;}
+.hcard-tags{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:8px;}
+.htag-pill{font-size:10px;padding:2px 7px;border-radius:10px;font-weight:600;}
+.htag-ai{background:var(--teal-light);color:var(--teal);}
+.htag-hp{background:#EFF6FF;color:#2563EB;}
+.htag-free{background:var(--green-light);color:var(--green);}
+.htag-kreuzfahrt{background:#F3E8FF;color:#7C3AED;}
 
-.dest-card{background:var(--card);border-radius:var(--r-lg);overflow:hidden;border:1.5px solid var(--border);transition:transform .15s,box-shadow .15s;position:relative;}
-.dest-card:hover{transform:translateY(-1px);box-shadow:0 8px 32px rgba(0,0,0,0.1);}
-.dest-card.dim{opacity:.7;}
-.dest-card.own{border-color:var(--purple);border-style:dashed;}
+/* CARD FOOTER */
+.hcard-footer{padding:10px 14px 12px;border-top:1px solid var(--border-light);display:flex;align-items:flex-end;justify-content:space-between;}
+.hcard-price-block{display:flex;flex-direction:column;}
+.hcard-price-label{font-size:10px;color:var(--muted);}
+.hcard-price{font-family:'Bricolage Grotesque',sans-serif;font-size:18px;font-weight:800;color:var(--text);line-height:1;}
+.hcard-price-sub{font-size:10px;color:var(--muted);}
+.hcard-details-btn{padding:7px 12px;background:var(--cream);border:1.5px solid var(--border);border-radius:var(--r-sm);font-size:11px;font-weight:600;color:var(--text);cursor:pointer;font-family:'Inter',sans-serif;transition:all .15s;display:flex;align-items:center;gap:4px;}
+.hcard-details-btn:hover{background:var(--teal-light);border-color:var(--teal);color:var(--teal);}
 
-.rank-badge{position:absolute;top:10px;right:10px;background:var(--gold);color:#fff;font-family:'Bricolage Grotesque',sans-serif;font-size:11px;font-weight:800;padding:3px 9px;border-radius:20px;z-index:2;display:none;}
-.rank-badge.show{display:block;}
-.rank-badge.top1{background:#FFD700;color:#7a5c00;}
-.rank-badge.top2{background:#C0C0C0;color:#5a5a5a;}
-.rank-badge.top3{background:#CD7F32;color:#4a2810;}
+/* VOTE STRIP */
+.hcard-vote{padding:8px 14px;background:var(--cream);border-top:1px solid var(--border-light);display:flex;align-items:center;gap:6px;}
+.vote-who{font-size:9px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;}
+.vote-btns{display:flex;gap:3px;}
+.vbtn{padding:3px 7px;border-radius:20px;border:1.5px solid var(--border);background:#fff;font-size:12px;cursor:pointer;transition:all .15s;line-height:1;}
+.vbtn.v-love{background:#FEE2E2;border-color:#F87171;transform:scale(1.1);}
+.vbtn.v-maybe{background:var(--gold-light);border-color:var(--gold);}
+.vbtn.v-no{background:#F3F4F6;border-color:#D1D5DB;}
+.vote-match{margin-left:auto;font-size:16px;}
 
-.card-hdr{padding:12px 14px 8px;display:flex;align-items:flex-start;gap:10px;}
-.dest-em{font-size:30px;flex-shrink:0;line-height:1;}
-.dest-meta{flex:1;min-width:0;}
-.dest-name{font-family:'Bricolage Grotesque',sans-serif;font-size:15px;font-weight:800;line-height:1.15;letter-spacing:-0.02em;}
-.dest-sub{font-size:11px;color:var(--muted);margin-top:1px;}
-.status-wrap{display:flex;flex-direction:column;align-items:flex-end;gap:4px;}
-.sbadge{padding:2px 8px;border-radius:20px;font-size:9px;font-weight:800;letter-spacing:.06em;color:#fff;white-space:nowrap;text-transform:uppercase;}
-.s-TOP{background:var(--teal);}
-.s-OK{background:var(--gold);}
-.s-NEW{background:var(--purple);}
-.s-SPÄTER{background:var(--blue);}
-.s-MAYBE{background:var(--muted);}
-.s-NEIN{background:#DC2626;}
-.s-OWN{background:var(--purple);}
+/* ===== SCROLL CONTROLS ===== */
+.scroll-wrap{position:relative;}
+.scroll-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:10;width:36px;height:36px;border-radius:50%;background:#fff;border:1.5px solid var(--border);box-shadow:var(--shadow-md);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:16px;transition:all .15s;}
+.scroll-arrow:hover{background:var(--teal);color:#fff;border-color:var(--teal);}
+.scroll-arrow.left{left:-18px;}
+.scroll-arrow.right{right:-18px;}
 
-.card-price{padding:8px 14px;background:linear-gradient(90deg,var(--bg),var(--card));display:flex;align-items:center;gap:8px;}
-.price-main{font-family:'Bricolage Grotesque',sans-serif;font-size:18px;font-weight:800;color:var(--text);}
-.price-range{font-size:10px;color:var(--muted);}
-.price-badge{margin-left:auto;font-size:10px;padding:2px 8px;border-radius:10px;font-weight:700;}
-.pb-cheap{background:var(--teal-light);color:var(--teal);}
-.pb-mid{background:var(--gold-light);color:var(--gold);}
-.pb-pricey{background:var(--coral-light);color:var(--coral);}
+/* ===== SECTION DIVIDER ===== */
+.section-gap{margin-top:28px;}
 
-.card-scores{display:flex;gap:8px;padding:6px 14px;background:var(--bg);}
-.sc{flex:1;}
-.sc-lbl{font-size:9px;color:var(--muted);font-weight:700;margin-bottom:2px;text-transform:uppercase;letter-spacing:.05em;}
-.sc-bar{height:3px;background:var(--border);border-radius:2px;overflow:hidden;}
-.sc-fill{height:100%;border-radius:2px;}
-.sc-f{background:var(--teal);}
-.sc-l{background:var(--coral);}
-.sc-m{background:var(--gold);}
+/* ===== SUBMIT FAB ===== */
+.fab{position:fixed;right:20px;bottom:80px;background:var(--coral);color:#fff;border:none;border-radius:50%;width:52px;height:52px;font-size:22px;cursor:pointer;box-shadow:0 4px 20px rgba(232,93,47,0.45);z-index:150;display:flex;align-items:center;justify-content:center;transition:transform .15s,box-shadow .15s;font-family:'Inter',sans-serif;}
+.fab:hover{transform:scale(1.06);box-shadow:0 6px 28px rgba(232,93,47,0.55);}
 
-.card-stats{display:flex;border-top:1px solid var(--bg);border-bottom:1px solid var(--bg);}
-.cstat{flex:1;text-align:center;padding:7px 4px;border-right:1px solid var(--bg);}
-.cstat:last-child{border-right:none;}
-.cstat-val{font-size:11px;font-weight:700;color:var(--text);display:block;}
-.cstat-key{font-size:9px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;}
-
-.card-body{padding:10px 14px 12px;}
-.card-highlight{font-size:12px;color:var(--teal);font-weight:600;margin-bottom:7px;font-style:italic;}
-.pros-cons{display:grid;grid-template-columns:1fr 1fr;gap:4px;}
-.pro-list li,.con-list li{list-style:none;font-size:11px;line-height:1.6;padding-left:13px;position:relative;}
-.pro-list li::before{content:"✓";position:absolute;left:0;color:var(--teal);font-weight:700;}
-.con-list li::before{content:"✗";position:absolute;left:0;color:var(--coral);font-weight:700;}
-.card-note{margin-top:8px;padding:6px 9px;background:var(--bg);border-radius:6px;font-size:11px;color:var(--muted);border-left:2px solid var(--gold);}
-
-/* STAR RATING */
-.rating-bar{display:flex;align-items:center;padding:10px 14px;border-top:1px solid var(--bg);background:linear-gradient(180deg,var(--bg) 0%,var(--card) 100%);}
-.rating-section{flex:1;}
-.rating-row{display:flex;align-items:center;gap:6px;margin-bottom:4px;}
-.rating-row:last-child{margin-bottom:0;}
-.rating-who{font-size:10px;font-weight:700;color:var(--muted);width:36px;text-transform:uppercase;letter-spacing:.04em;}
-.stars{display:flex;gap:2px;}
-.star{font-size:18px;cursor:pointer;color:#E4DDD4;transition:all .15s;background:none;border:none;padding:0 1px;font-family:Arial,sans-serif;line-height:1;}
-.star.filled{color:#FFB800;}
-.star:hover{transform:scale(1.15);}
-.star.hover-preview{color:#FFD966;}
-
-.rating-summary{margin-left:8px;text-align:center;}
-.avg-num{font-family:'Bricolage Grotesque',sans-serif;font-size:22px;font-weight:800;color:var(--coral);line-height:1;letter-spacing:-0.02em;}
-.avg-lbl{font-size:9px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.04em;margin-top:2px;}
-
-/* COMMENT SECTION */
-.comments-section{border-top:1px solid var(--bg);padding:0;}
-.comments-toggle{width:100%;padding:8px 14px;background:none;border:none;display:flex;align-items:center;gap:6px;font-family:'Outfit',sans-serif;font-size:11px;font-weight:700;color:var(--coral);cursor:pointer;text-align:left;}
-.comments-toggle .arr{transition:transform .2s;}
-.comments-toggle.open .arr{transform:rotate(90deg);}
-.comments-toggle .ccount{margin-left:auto;color:var(--muted);font-weight:600;}
-.comments-body{display:none;padding:0 14px 12px;}
-.comments-body.open{display:block;}
-.comment{background:var(--bg);border-radius:var(--r-sm);padding:8px 10px;margin-bottom:6px;border-left:3px solid var(--coral);}
-.comment.till{border-color:var(--teal);}
-.comment.lea{border-color:var(--coral);}
-.comment-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:3px;}
-.comment-who{font-size:11px;font-weight:700;color:var(--text);}
-.comment-time{font-size:10px;color:var(--muted);}
-.comment-text{font-size:12px;line-height:1.5;color:var(--text);}
-.comment-del{background:none;border:none;color:var(--muted);font-size:14px;cursor:pointer;padding:0 4px;margin-left:4px;}
-.comment-empty{font-size:11px;color:var(--muted);font-style:italic;padding:6px 0;}
-.comment-input-row{display:flex;gap:6px;margin-top:8px;}
-.comment-input{flex:1;padding:8px 10px;border:1.5px solid var(--border);border-radius:var(--r-sm);font-family:'Outfit',sans-serif;font-size:12px;outline:none;background:var(--bg);}
-.comment-input:focus{border-color:var(--coral);}
-.comment-btn{padding:8px 12px;background:var(--coral);color:#fff;border:none;border-radius:var(--r-sm);font-weight:700;font-size:11px;cursor:pointer;font-family:'Outfit',sans-serif;}
-
-/* MODAL */
-.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:500;display:none;align-items:flex-end;justify-content:center;padding:0;}
-.modal-overlay.open{display:flex;}
-.modal{background:#fff;border-radius:20px 20px 0 0;padding:20px;max-height:90vh;overflow-y:auto;width:100%;max-width:540px;}
-.modal-handle{width:36px;height:4px;background:var(--border);border-radius:2px;margin:0 auto 14px;}
-.modal-title{font-family:'Bricolage Grotesque',sans-serif;font-size:18px;font-weight:800;margin-bottom:14px;letter-spacing:-0.02em;}
+/* ===== MODAL ===== */
+.modal-bg{position:fixed;inset:0;background:rgba(0,0,0,0.45);z-index:500;display:none;align-items:flex-end;justify-content:center;}
+.modal-bg.open{display:flex;}
+.modal-sheet{background:#fff;border-radius:20px 20px 0 0;padding:20px 20px 32px;width:100%;max-width:520px;max-height:88vh;overflow-y:auto;}
+.modal-handle{width:36px;height:4px;background:var(--border);border-radius:2px;margin:0 auto 16px;}
+.modal-title{font-family:'Bricolage Grotesque',sans-serif;font-size:18px;font-weight:800;margin-bottom:16px;letter-spacing:-0.02em;}
 .form-group{margin-bottom:12px;}
-.form-label{font-size:12px;font-weight:600;color:var(--muted);display:block;margin-bottom:4px;text-transform:uppercase;letter-spacing:.04em;}
-.form-input,.form-select,.form-textarea{width:100%;padding:10px 12px;border:1.5px solid var(--border);border-radius:var(--r-sm);font-size:13px;font-family:'Outfit',sans-serif;outline:none;background:var(--bg);transition:border .2s;color:var(--text);}
-.form-input:focus,.form-select:focus,.form-textarea:focus{border-color:var(--coral);}
-.form-textarea{resize:none;min-height:70px;}
-.form-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
-.modal-btn{width:100%;padding:13px;background:var(--coral);color:#fff;border:none;border-radius:var(--r);font-size:14px;font-weight:700;cursor:pointer;font-family:'Outfit',sans-serif;margin-top:4px;}
-.modal-btn-secondary{background:var(--bg);color:var(--text);border:1.5px solid var(--border);}
-.modal-close{float:right;background:none;border:none;font-size:20px;cursor:pointer;color:var(--muted);padding:0 4px;}
+.form-label{display:block;font-size:11px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin-bottom:4px;}
+.form-input,.form-select,.form-textarea{width:100%;padding:10px 12px;border:1.5px solid var(--border);border-radius:var(--r-sm);font-size:13px;font-family:'Inter',sans-serif;outline:none;background:var(--cream);color:var(--text);transition:border-color .2s;}
+.form-input:focus,.form-select:focus,.form-textarea:focus{border-color:var(--teal);}
+.form-textarea{resize:none;min-height:72px;}
+.form-2col{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
+.modal-submit{width:100%;padding:13px;background:var(--coral);color:#fff;border:none;border-radius:var(--r);font-size:14px;font-weight:600;cursor:pointer;font-family:'Inter',sans-serif;margin-top:8px;transition:background .2s;}
+.modal-submit:hover{background:var(--coral-dark);}
+.modal-close{float:right;background:none;border:none;cursor:pointer;color:var(--muted);font-size:20px;line-height:1;padding:2px;}
 
-/* EMOJI PICKER */
-.emoji-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:4px;background:var(--bg);padding:8px;border-radius:var(--r-sm);max-height:120px;overflow-y:auto;}
-.emoji-pick{background:none;border:none;font-size:20px;cursor:pointer;padding:4px;border-radius:6px;transition:background .15s;}
-.emoji-pick:hover{background:rgba(0,0,0,0.05);}
-.emoji-pick.selected{background:var(--coral-light);}
+/* ===== BOTTOM TABS ===== */
+.bottom-tabs{position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:1px solid var(--border);display:flex;z-index:200;padding-bottom:env(safe-area-inset-bottom,0);}
+.btab{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 4px 6px;cursor:pointer;border:none;background:none;font-size:9px;font-weight:600;font-family:'Inter',sans-serif;color:var(--muted);letter-spacing:.03em;text-transform:uppercase;transition:color .15s;}
+.btab-icon{font-size:19px;line-height:1;}
+.btab.active{color:var(--teal);}
+.btab.active .btab-icon{filter:none;}
 
-/* RANKING */
-.rank-row{display:grid;grid-template-columns:30px 1fr auto auto;gap:10px;align-items:center;padding:10px 14px;background:var(--card);border-radius:var(--r);margin-bottom:5px;border:1px solid var(--border);}
-.rank-num{font-family:'Bricolage Grotesque',sans-serif;font-size:18px;font-weight:800;color:var(--coral);text-align:center;letter-spacing:-0.02em;}
-.rank-emoji{font-size:20px;margin-right:8px;}
-.rank-name{font-weight:700;font-size:13px;display:flex;align-items:center;}
-.rank-meta{font-size:10px;color:var(--muted);}
-.rank-score{display:flex;align-items:center;gap:4px;font-family:'Bricolage Grotesque',sans-serif;font-size:14px;font-weight:800;color:var(--gold);}
-.rank-stars{font-size:14px;line-height:1;}
-.rank-price{font-family:'Bricolage Grotesque',sans-serif;font-size:13px;font-weight:700;color:var(--teal);}
+/* ===== TOAST ===== */
+.toast{position:fixed;bottom:76px;left:50%;transform:translateX(-50%) translateY(10px);background:var(--navy);color:#fff;padding:10px 18px;border-radius:30px;font-size:12px;font-weight:600;opacity:0;transition:all .25s;z-index:400;pointer-events:none;white-space:nowrap;}
+.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
 
-/* HISTORY */
-.hist-year{font-family:'Bricolage Grotesque',sans-serif;font-size:20px;font-weight:800;color:var(--coral);margin:16px 0 8px;letter-spacing:-0.03em;}
-.hist-item{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;background:var(--card);border-radius:var(--r-sm);margin-bottom:5px;border:1px solid var(--border);}
+/* ===== VOTE TABLE ===== */
+.vote-section{background:#fff;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--border);}
+.vote-thead{display:grid;grid-template-columns:1fr 100px 100px 80px;padding:10px 14px;background:var(--cream);font-size:10px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;border-bottom:1px solid var(--border);}
+.vote-trow{display:grid;grid-template-columns:1fr 100px 100px 80px;padding:11px 14px;align-items:center;border-bottom:1px solid var(--border-light);transition:background .1s;}
+.vote-trow:last-child{border-bottom:none;}
+.vote-trow:hover{background:var(--cream);}
+.vote-dest{font-size:13px;font-weight:600;}
+.vote-country{font-size:11px;color:var(--muted);}
+.vote-cell{display:flex;justify-content:center;}
+.vote-inline{display:flex;gap:3px;justify-content:center;}
+.export-bar{padding:12px 14px;background:var(--cream);border-top:1px solid var(--border);display:flex;gap:8px;align-items:center;}
+.export-btn{padding:8px 14px;background:var(--navy);color:#fff;border:none;border-radius:var(--r-sm);font-size:12px;font-weight:600;cursor:pointer;font-family:'Inter',sans-serif;display:flex;align-items:center;gap:5px;}
+.export-note{font-size:11px;color:var(--muted);}
+
+/* ===== HISTORY ===== */
+.hist-year-label{font-family:'Bricolage Grotesque',sans-serif;font-size:18px;font-weight:800;color:var(--coral);margin:16px 0 8px;letter-spacing:-0.03em;}
+.hist-row{display:flex;align-items:flex-start;gap:10px;background:#fff;border-radius:var(--r);padding:10px 12px;margin-bottom:5px;border:1px solid var(--border);}
 .hist-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;margin-top:4px;}
 .hotel .hist-dot{background:var(--teal);}
 .cruise .hist-dot{background:var(--coral);}
 .ferienhaus .hist-dot{background:var(--gold);}
-.airbnb .hist-dot{background:var(--purple);}
+.airbnb .hist-dot{background:#7C3AED;}
 .family .hist-dot{background:var(--blue);}
+.storno .hist-dot{background:var(--subtle);}
 .hist-em{font-size:18px;flex-shrink:0;}
-.hist-body{flex:1;}
-.hist-dest-name{font-weight:700;font-size:13px;}
+.hist-content{flex:1;}
+.hist-name{font-size:13px;font-weight:700;}
 .hist-loc{font-size:11px;color:var(--muted);}
-.hist-tags{display:flex;gap:4px;margin-top:3px;flex-wrap:wrap;}
-.htag{font-size:9px;padding:1px 7px;border-radius:10px;font-weight:700;}
-.htag-hotel{background:var(--teal-light);color:var(--teal);}
-.htag-cruise{background:var(--coral-light);color:var(--coral);}
-.htag-fh{background:var(--gold-light);color:var(--gold);}
-.htag-airbnb{background:var(--purple-light);color:var(--purple);}
-.htag-family{background:var(--blue-light);color:var(--blue);}
+.hist-pills{display:flex;gap:4px;margin-top:3px;flex-wrap:wrap;}
+.hpill{font-size:9px;padding:1px 7px;border-radius:10px;font-weight:700;}
+.hp-hotel{background:var(--teal-light);color:var(--teal);}
+.hp-cruise{background:var(--coral-light);color:var(--coral);}
+.hp-fh{background:var(--gold-light);color:var(--gold);}
+.hp-airbnb{background:#EDE9FE;color:#7C3AED;}
+.hp-family{background:#EFF6FF;color:var(--blue);}
+.hp-storno{background:var(--cream);color:var(--muted);border:1px solid var(--border);}
 .hist-pers{font-size:10px;color:var(--muted);margin-left:auto;white-space:nowrap;flex-shrink:0;}
 
-/* INFO TAB */
-.info-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
-@media(max-width:540px){.info-grid{grid-template-columns:1fr;}}
-.info-card{background:var(--card);border-radius:var(--r-lg);padding:14px;border:1.5px solid var(--border);}
-.info-card-title{font-family:'Bricolage Grotesque',sans-serif;font-size:14px;font-weight:800;margin-bottom:8px;letter-spacing:-0.02em;}
-.info-list li{list-style:none;font-size:11px;line-height:1.8;padding-left:13px;position:relative;}
-.info-list li::before{content:"→";position:absolute;left:0;color:var(--coral);}
-.info-list li.excl::before{content:"✗";color:#DC2626;}
+/* ===== INFO TAB ===== */
+.info-2col{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
+.info-box{background:#fff;border-radius:var(--r-lg);padding:16px;border:1px solid var(--border);}
+.info-box-title{font-family:'Bricolage Grotesque',sans-serif;font-size:15px;font-weight:800;margin-bottom:10px;letter-spacing:-0.02em;}
+.info-ul{font-size:11px;line-height:1.85;}
+.info-ul li{list-style:none;padding-left:14px;position:relative;}
+.info-ul li::before{content:"→";position:absolute;left:0;color:var(--coral);}
+.info-ul li.excl::before{content:"✗";color:#DC2626;}
 .info-full{grid-column:1/-1;}
-.step-row{display:flex;gap:10px;align-items:flex-start;padding:9px 0;border-bottom:1px solid var(--bg);}
-.step-row:last-child{border-bottom:none;}
-.step-num{width:22px;height:22px;border-radius:50%;background:var(--coral);color:#fff;font-size:10px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
-.step-text{font-size:11px;line-height:1.6;}
-.step-text strong{color:var(--teal);}
-.age-card{grid-column:1/-1;background:var(--navy);border-radius:var(--r-lg);padding:16px;color:#fff;}
-.age-card-title{font-family:'Bricolage Grotesque',sans-serif;font-size:14px;font-weight:800;margin-bottom:10px;color:rgba(255,255,255,0.9);}
-.age-row{display:flex;gap:10px;align-items:flex-start;margin-bottom:10px;}
-.age-badge{background:var(--coral);color:#fff;border-radius:8px;padding:4px 10px;font-size:11px;font-weight:800;white-space:nowrap;flex-shrink:0;}
-.age-body{font-size:11px;color:rgba(255,255,255,0.65);line-height:1.65;}
-.age-body strong{color:#fff;}
+.steps-list{display:flex;flex-direction:column;gap:0;}
+.step-item{display:flex;gap:10px;align-items:flex-start;padding:10px 0;border-bottom:1px solid var(--border-light);}
+.step-item:last-child{border-bottom:none;}
+.step-n{width:22px;height:22px;border-radius:50%;background:var(--coral);color:#fff;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;}
+.step-t{font-size:11px;line-height:1.65;}
+.step-t strong{color:var(--teal);}
 
-/* FAB */
-.fab{position:fixed;right:16px;bottom:calc(80px + var(--safe-bottom));background:var(--coral);color:#fff;border:none;border-radius:50%;width:56px;height:56px;font-size:26px;cursor:pointer;box-shadow:0 4px 20px rgba(229,90,53,0.4);z-index:150;display:flex;align-items:center;justify-content:center;transition:transform .15s;}
-.fab:hover{transform:scale(1.05);}
+/* ===== FELIX CURVE ===== */
+.felix-card{grid-column:1/-1;background:var(--navy);border-radius:var(--r-lg);padding:16px;color:#fff;}
+.felix-card-title{font-family:'Bricolage Grotesque',sans-serif;font-size:15px;font-weight:800;margin-bottom:12px;}
+.felix-row{display:flex;gap:10px;align-items:flex-start;margin-bottom:8px;}
+.felix-badge{background:var(--coral);color:#fff;border-radius:var(--r-sm);padding:4px 10px;font-size:11px;font-weight:700;white-space:nowrap;flex-shrink:0;}
+.felix-body{font-size:11px;color:rgba(255,255,255,0.65);line-height:1.65;}
+.felix-body strong{color:#fff;}
 
-/* TOAST */
-.toast{position:fixed;bottom:calc(90px + var(--safe-bottom));left:50%;transform:translateX(-50%) translateY(20px);background:var(--navy);color:#fff;padding:10px 18px;border-radius:30px;font-size:12px;font-weight:600;opacity:0;transition:all .3s;z-index:400;pointer-events:none;}
-.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
+/* ===== SUBMISSIONS ===== */
+.sub-card{background:#fff;border:1.5px dashed var(--border);border-radius:var(--r-lg);padding:12px;margin-bottom:8px;}
+.sub-name{font-size:14px;font-weight:700;}
+.sub-meta{font-size:11px;color:var(--muted);margin-top:1px;}
+.sub-why{font-size:12px;font-style:italic;margin-top:5px;}
+.sub-who{display:inline-block;padding:2px 8px;border-radius:10px;font-size:10px;font-weight:700;margin-top:5px;}
+.sub-till{background:var(--teal-light);color:var(--teal);}
+.sub-lea{background:var(--coral-light);color:var(--coral);}
+.sub-both{background:var(--gold-light);color:var(--gold);}
 
-/* OWN BADGE */
-.own-marker{position:absolute;top:0;left:0;background:var(--purple);color:#fff;padding:3px 10px;font-size:9px;font-weight:800;letter-spacing:.05em;border-bottom-right-radius:8px;text-transform:uppercase;z-index:1;}
-
-/* EMPTY */
-.empty{text-align:center;padding:40px 20px;}
-.empty-icon{font-size:48px;margin-bottom:12px;}
-.empty-title{font-family:'Bricolage Grotesque',sans-serif;font-size:16px;font-weight:800;margin-bottom:4px;}
-.empty-sub{font-size:12px;color:var(--muted);}
+/* RESPONSIVE */
+@media(max-width:768px){
+  .topnav .nav-links,.topnav .nav-right{display:none;}
+  .hero{padding:24px 16px 20px;}
+  .hero-tagline{font-size:22px;}
+  .hero-sub{font-size:18px;margin-bottom:16px;}
+  .search-form{grid-template-columns:1fr;gap:8px;padding:12px;}
+  .sf-field{border-right:none;border-bottom:1px solid var(--border-light);padding:8px 0;}
+  .sf-btn{width:100%;}
+  .stats-inner{overflow-x:auto;}
+  .stat-item{padding:12px 16px;flex-shrink:0;}
+  .main{padding:16px 12px 0;}
+  .info-2col{grid-template-columns:1fr;}
+}
+@media(min-width:769px){
+  .bottom-tabs{display:none;}
+  body{padding-bottom:0;}
+  .fab{bottom:24px;}
+}
 </style>
 </head>
 <body>
 
 <!-- GATE -->
 <div id="gate">
-  <div class="gate-box">
-    <div class="gate-paw">🐾</div>
-    <div class="gate-brand">Fredi24</div>
-    <div class="gate-sub">Unser Reise-Planer · Till & Lea</div>
-    <input class="gate-input" type="password" id="pw" placeholder="Passwort" onkeydown="if(event.key==='Enter')auth()">
+  <div class="gate-card">
+    <div class="gate-logo-row">
+      <span class="gate-logo-icon">🐾</span>
+      <span class="gate-brand">Fredi<span>24</span></span>
+    </div>
+    <div class="gate-sub">Privater Reise-Planer · Till & Lea & Felix</div>
+    <input class="gate-input" type="password" id="pw" placeholder="Passwort" autocomplete="current-password" onkeydown="if(event.key==='Enter')auth()">
     <button class="gate-btn" onclick="auth()">Einloggen</button>
-    <div class="gate-err" id="pw-err">Nicht korrekt – versuch's nochmal 🙅</div>
+    <div class="gate-err" id="pw-err">&nbsp;</div>
   </div>
 </div>
 
-<!-- HEADER -->
-<div class="header">
-  <div class="header-row">
-    <div class="brand">
-      <span class="brand-logo">🐾</span>
-      <div>
-        <div class="brand-name">Fredi<span>24</span></div>
-        <div class="brand-sub">Unser Reise-Planer</div>
-      </div>
+<!-- TOP NAV -->
+<nav class="topnav">
+  <a class="nav-logo" href="#">
+    <span class="nav-logo-icon">🐾</span>
+    <span class="nav-logo-text">Fredi<span>24</span></span>
+  </a>
+  <div class="nav-links">
+    <button class="nav-link active" onclick="navTo('ideen',this)">🗺️ Ideen</button>
+    <button class="nav-link" onclick="navTo('abstimmung',this)">📊 Abstimmung</button>
+    <button class="nav-link" onclick="navTo('archiv',this)">📖 Archiv</button>
+    <button class="nav-link" onclick="navTo('info',this)">⚡ Info</button>
+  </div>
+  <div class="nav-right">
+    <div class="nav-icon-btn">🔔<span class="nav-badge">2</span></div>
+    <div class="nav-icon-btn">💬</div>
+    <div class="nav-avatar">
+      <div class="avatar-circle">T&L</div>
+      <span>Till & Lea</span>
+      <span style="color:var(--muted)">▾</span>
     </div>
-    <div class="user-pill" onclick="switchUser()" id="user-pill">👤 <span id="user-name">Till</span></div>
   </div>
-  <div class="header-pills">
-    <span class="hp">✈️ HAM / HAJ · Direktflug</span>
-    <span class="hp">⭐⭐⭐⭐ Mind. 4★</span>
-    <span class="hp budget">💶 Max. 3.600 €</span>
-    <span class="hp">📅 ab 13. Juli 2026</span>
-  </div>
-  <div class="budget-indicator">
-    <div class="budget-track"><div class="budget-fill" style="width:78%"></div></div>
-    <span class="budget-label">2.800–3.600 € Range</span>
-  </div>
-</div>
+</nav>
 
 <!-- FAB -->
-<button class="fab" onclick="openSubmit()" title="Eigene Idee einreichen">✚</button>
+<button class="fab" onclick="openModal()" title="Idee einreichen">+</button>
 
 <!-- TOAST -->
-<div class="toast" id="toast">✓ Gespeichert</div>
+<div class="toast" id="toast">Gespeichert</div>
 
-<!-- SUBMIT MODAL -->
-<div class="modal-overlay" id="submit-modal" onclick="if(event.target===this)closeModal('submit-modal')">
-  <div class="modal">
+<!-- MODAL -->
+<div class="modal-bg" id="modal-bg" onclick="if(event.target===this)closeModal()">
+  <div class="modal-sheet">
     <div class="modal-handle"></div>
-    <button class="modal-close" onclick="closeModal('submit-modal')">✕</button>
-    <div class="modal-title">💡 Eigene Idee einreichen</div>
-    <input type="hidden" id="edit-id" value="">
-    <div class="form-row">
-      <div class="form-group">
-        <label class="form-label">Emoji</label>
-        <input class="form-input" id="s-emoji" placeholder="🏖️" maxlength="4" value="🌍" type="text">
-      </div>
-      <div class="form-group">
-        <label class="form-label">Status</label>
-        <select class="form-select" id="s-status">
-          <option value="TOP">⭐ TOP</option>
-          <option value="OK">👍 OK</option>
-          <option value="MAYBE">🤔 Vielleicht</option>
-          <option value="SPÄTER">⏳ Später</option>
-        </select>
-      </div>
+    <button class="modal-close" onclick="closeModal()">✕</button>
+    <div class="modal-title">💡 Neue Reise-Idee</div>
+    <div class="form-group"><label class="form-label">Destination *</label><input class="form-input" id="si-dest" placeholder="z.B. Ibiza Nordküste"></div>
+    <div class="form-2col">
+      <div class="form-group"><label class="form-label">Land</label><input class="form-input" id="si-land" placeholder="Spanien"></div>
+      <div class="form-group"><label class="form-label">Budget (€)</label><input class="form-input" id="si-budget" placeholder="3.000" type="number"></div>
     </div>
-    <div class="form-group">
-      <label class="form-label">Destination *</label>
-      <input class="form-input" id="s-dest" placeholder="z.B. Ibiza Nordküste" type="text">
+    <div class="form-group"><label class="form-label">Warum?</label><textarea class="form-textarea" id="si-why" placeholder="Was findest du daran interessant?"></textarea></div>
+    <div class="form-2col">
+      <div class="form-group"><label class="form-label">Von wem</label><select class="form-select" id="si-who"><option>Till</option><option>Lea</option><option>Beide</option></select></div>
+      <div class="form-group"><label class="form-label">Status</label><select class="form-select" id="si-status"><option>TOP</option><option>MAYBE</option><option>SPÄTER</option><option>Traumziel</option></select></div>
     </div>
-    <div class="form-row">
-      <div class="form-group">
-        <label class="form-label">Land / Region</label>
-        <input class="form-input" id="s-land" placeholder="Spanien" type="text">
-      </div>
-      <div class="form-group">
-        <label class="form-label">Budget (€)</label>
-        <input class="form-input" id="s-budget" placeholder="3000" type="number">
-      </div>
-    </div>
-    <div class="form-group">
-      <label class="form-label">Subtext (kurze Beschreibung)</label>
-      <input class="form-input" id="s-sub" placeholder="z.B. AI Resort · Familien-Hotel" type="text">
-    </div>
-    <div class="form-group">
-      <label class="form-label">Warum interessant? (Begründung)</label>
-      <textarea class="form-textarea" id="s-why" placeholder="Was macht das Ziel spannend für euch?"></textarea>
-    </div>
-    <div class="form-row">
-      <div class="form-group">
-        <label class="form-label">Vorgeschlagen von</label>
-        <select class="form-select" id="s-who">
-          <option>Till</option>
-          <option>Lea</option>
-          <option>Beide</option>
-        </select>
-      </div>
-      <div class="form-group">
-        <label class="form-label">Flugzeit (ca.)</label>
-        <input class="form-input" id="s-flight" placeholder="3h 30" type="text">
-      </div>
-    </div>
-    <button class="modal-btn" onclick="submitIdea()" id="submit-btn">Idee einreichen 🚀</button>
+    <button class="modal-submit" onclick="submitIdea()">Idee einreichen 🚀</button>
   </div>
 </div>
 
-<!-- USER SWITCH MODAL -->
-<div class="modal-overlay" id="user-modal" onclick="if(event.target===this)closeModal('user-modal')">
-  <div class="modal">
-    <div class="modal-handle"></div>
-    <div class="modal-title">👤 Wer bewertet gerade?</div>
-    <p style="font-size:12px;color:var(--muted);margin-bottom:14px;">Deine Sterne und Kommentare werden unter dem gewählten Profil gespeichert.</p>
-    <div class="profile-pick">
-      <div class="profile-opt" onclick="setUser('Till')" id="opt-till">
-        <span class="emoji">👨‍💼</span>
-        Till
-      </div>
-      <div class="profile-opt" onclick="setUser('Lea')" id="opt-lea">
-        <span class="emoji">👩‍🦰</span>
-        Lea
+<!-- ======== IDEEN TAB ======== -->
+<div id="tab-ideen" class="tab-pane" style="display:block;">
+
+  <!-- HERO -->
+  <div class="hero">
+    <div class="hero-content">
+      <div class="hero-tagline">Deine nächste Auszeit.</div>
+      <div class="hero-sub">Wir finden sie für dich.</div>
+      <div class="search-form">
+        <div class="sf-field">
+          <div class="sf-label">Reiseziel / Hotel</div>
+          <div class="sf-value">Sardinien <span class="sf-icon">📍</span></div>
+        </div>
+        <div class="sf-field">
+          <div class="sf-label">Abflughafen</div>
+          <div class="sf-value"><span class="sf-placeholder">HAM oder HAJ</span> <span class="sf-icon">✈️</span></div>
+        </div>
+        <div class="sf-field">
+          <div class="sf-label">Reisezeitraum</div>
+          <div class="sf-value">13.07. – 20.07.2026 <span class="sf-icon">📅</span></div>
+        </div>
+        <div class="sf-field">
+          <div class="sf-label">Reisedauer</div>
+          <div class="sf-value">7 Nächte <span class="sf-icon">▾</span></div>
+        </div>
+        <div class="sf-field">
+          <div class="sf-label">Reisende &amp; Zimmer</div>
+          <div class="sf-value">2 Erw., 1 Kind (3J) <span class="sf-icon">👤</span></div>
+        </div>
+        <button class="sf-btn">🔍 Suchen</button>
       </div>
     </div>
   </div>
-</div>
-
-<!-- ============= IDEEN TAB ============= -->
-<div id="tab-ideen" class="tab-content active">
 
+  <!-- STATS BAR -->
   <div class="stats-bar">
-    <div class="stat-card">
-      <div class="stat-num" id="stat-total">18</div>
-      <div class="stat-lbl">Ideen</div>
-    </div>
-    <div class="stat-card">
-      <div class="stat-num" id="stat-rated">0</div>
-      <div class="stat-lbl">Bewertet</div>
-    </div>
-    <div class="stat-card">
-      <div class="stat-num" id="stat-comments">0</div>
-      <div class="stat-lbl">Kommentare</div>
-    </div>
-    <div class="stat-card">
-      <div class="stat-num" id="stat-days">–</div>
-      <div class="stat-lbl">Tage bis Reise</div>
+    <div class="stats-inner">
+      <div class="stat-item">
+        <span class="stat-icon">💡</span>
+        <div class="stat-text">
+          <span class="stat-num" id="stat-ideen">18</span>
+          <span class="stat-label">Ideen gefunden</span>
+        </div>
+      </div>
+      <div class="stat-item">
+        <span class="stat-icon">❤️</span>
+        <div class="stat-text">
+          <span class="stat-num" id="stat-favs">0</span>
+          <span class="stat-label">Favoriten</span>
+        </div>
+      </div>
+      <div class="stat-item">
+        <span class="stat-icon">⇄</span>
+        <div class="stat-text">
+          <span class="stat-num">0</span>
+          <span class="stat-label">Verglichen</span>
+        </div>
+      </div>
+      <div class="stat-item">
+        <span class="stat-icon">💼</span>
+        <div class="stat-text">
+          <span class="stat-num">0</span>
+          <span class="stat-label">Kombinationen</span>
+        </div>
+      </div>
+      <div class="stat-item">
+        <div class="countdown-pill">
+          <span class="stat-icon">📅</span>
+          <div class="stat-text">
+            <span class="stat-num highlight" id="stat-days">48</span>
+            <span class="stat-label">Tage bis zur Reise</span>
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 
-  <div class="reco-hero">
-    <div class="reco-label">🏆 Top-Empfehlung Sommer 2026</div>
-    <div class="reco-title">Sardinien direkt –<br>sofort buchbar</div>
-    <div class="reco-why">Direktflug Hamburg 2:20h · EU-Kindersitz-Standard · Neuland für euch · Lea sagt ja · Felix liebt Sandstrände · Im Budget.</div>
-    <div class="reco-row">
-      <span class="reco-price">~3.150 €</span>
-      <span class="reco-tag">✈️ 2h 20</span>
-      <span class="reco-tag">🏖️ 4★</span>
-      <button class="reco-btn" onclick="scrollToCard('sardinien')">Details →</button>
+  <!-- MAIN CONTENT -->
+  <div class="main">
+
+    <!-- RECO BANNER -->
+    <div class="reco-banner" style="margin-top:16px;">
+      <span class="reco-badge">🎯 Empfehlung</span>
+      <div class="reco-text">
+        <div class="reco-title">Sardinien direkt – Direktflug HAM → OLB nur 2h 20</div>
+        <div class="reco-why">Lea sagt ja · EU-Kindersitz-Standard · Neuland für euch · La Pelosa, Spiaggia del Principe · Im Budget</div>
+      </div>
+      <div class="reco-price-block">
+        <div class="reco-price">~3.150 €</div>
+        <div class="reco-price-sub">für 3 Pers. 7N HP + Mietwagen</div>
+      </div>
+      <button class="reco-cta" onclick="scrollToCard('sardinien')">Details →</button>
     </div>
-  </div>
 
-  <div class="sort-bar">
-    <span class="sort-label">📊 Sortierung:</span>
-    <select class="sort-select" id="sort-select" onchange="renderCards()">
-      <option value="ranking">⭐ Bewertung (höchste zuerst)</option>
-      <option value="status">📌 Status (TOP → SPÄTER)</option>
-      <option value="price-asc">💰 Preis (günstig → teuer)</option>
-      <option value="price-desc">💰 Preis (teuer → günstig)</option>
-      <option value="name">🔤 Name A-Z</option>
-      <option value="newest">🆕 Eigene Ideen zuerst</option>
-    </select>
-  </div>
-
-  <div class="filter-row">
-    <button class="chip active" onclick="filterStatus('ALL',this)">Alle</button>
-    <button class="chip" onclick="filterStatus('TOP',this)">⭐ TOP</button>
-    <button class="chip" onclick="filterStatus('OK',this)">👍 OK</button>
-    <button class="chip" onclick="filterStatus('NEW',this)">🆕 Neu</button>
-    <button class="chip" onclick="filterStatus('MAYBE',this)">🤔 Vielleicht</button>
-    <button class="chip" onclick="filterStatus('SPÄTER',this)">⏳ Später</button>
-    <button class="chip" onclick="filterStatus('OWN',this)">💜 Eigene</button>
-  </div>
-
-  <div class="dest-grid" id="dg"></div>
-</div>
-
-<!-- ============= RANKING TAB ============= -->
-<div id="tab-ranking" class="tab-content">
-  <div class="section-head">
-    <span class="section-title">🏆 Ranking-Liste</span>
-    <button class="section-action" onclick="exportData()">📋 Export</button>
-  </div>
-  <p style="font-size:12px;color:var(--muted);margin-bottom:14px;">Sortiert nach Durchschnitt aller Bewertungen. Stimmt mehr ab → Liste wird dynamischer.</p>
-  <div id="ranking-list"></div>
-</div>
-
-<!-- ============= EIGENE IDEEN TAB ============= -->
-<div id="tab-eigene" class="tab-content">
-  <div class="section-head">
-    <span class="section-title">💜 Eigene Vorschläge</span>
-    <button class="section-action" onclick="openSubmit()">+ Neu</button>
-  </div>
-  <p style="font-size:12px;color:var(--muted);margin-bottom:14px;">Hier landen alle Ideen, die ihr selbst eingereicht habt. Werden gleichberechtigt im Ideen-Dashboard angezeigt.</p>
-  <div class="dest-grid" id="own-list"></div>
-</div>
-
-<!-- ============= ARCHIV TAB ============= -->
-<div id="tab-archiv" class="tab-content">
-  <div class="filter-row">
-    <button class="chip active" onclick="filterHistory('ALL',this)">Alle</button>
-    <button class="chip" onclick="filterHistory('hotel',this)">🏨 Hotel</button>
-    <button class="chip" onclick="filterHistory('cruise',this)">🚢 Kreuzfahrt</button>
-    <button class="chip" onclick="filterHistory('ferienhaus',this)">🏡 Ferienhaus</button>
-    <button class="chip" onclick="filterHistory('airbnb',this)">🏠 Airbnb</button>
-    <button class="chip" onclick="filterHistory('family',this)">👨‍👩‍👦 Familie</button>
-  </div>
-  <div id="hl"></div>
-</div>
-
-<!-- ============= INFO TAB ============= -->
-<div id="tab-info" class="tab-content">
-  <div class="info-grid">
-    <div class="info-card">
-      <div class="info-card-title">❌ Ausschlussliste</div>
-      <ul class="info-list">
-        <li class="excl">Türkei, Ägypten (Lea)</li>
-        <li class="excl">Dänemark im Sommer (Lea)</li>
-        <li class="excl">Kroatien (überfüllt)</li>
-        <li class="excl">Griechenland (Kindersitz-Problem)</li>
-        <li class="excl">AIDA Norwegen (2024 gemacht)</li>
-        <li class="excl">Kein Umsteigeflug</li>
-        <li class="excl">Nur HAM oder HAJ als Abflug</li>
-        <li class="excl">Unter 4 Sterne</li>
-        <li class="excl">P&V Cap d'Agde / Houlgate</li>
-      </ul>
+    <!-- FILTER TOOLBAR -->
+    <div class="toolbar" style="margin-top:18px;">
+      <button class="filter-btn">⚙️ Filter</button>
+      <span class="sort-label">Sortierung:</span>
+      <select class="sort-select" onchange="sortCards(this.value)">
+        <option value="reco">Empfehlung</option>
+        <option value="price-asc">Preis aufsteigend</option>
+        <option value="price-desc">Preis absteigend</option>
+        <option value="rating">Bewertung</option>
+      </select>
+      <div class="filter-chips" id="filter-chips">
+        <button class="fchip active" onclick="fc('ALL',this)">Alle <span class="chip-count" style="background:rgba(255,255,255,0.25);color:#fff;padding:0 5px;border-radius:10px;font-size:9px;">20</span></button>
+        <button class="fchip" onclick="fc('TOP',this)">⭐ TOP</button>
+        <button class="fchip" onclick="fc('OK',this)">👍 OK</button>
+        <button class="fchip" onclick="fc('NEW',this)">🆕 Neu</button>
+        <button class="fchip" onclick="fc('LATER',this)">⏳ Später</button>
+        <button class="fchip" onclick="fc('NEIN',this)">✗ Raus</button>
+      </div>
+      <div class="view-toggle">
+        <button class="view-btn" id="vbtn-scroll" onclick="setView('scroll',this)">↔ Slider</button>
+        <button class="view-btn active" id="vbtn-grid" onclick="setView('grid',this)">⊞ Karten</button>
+      </div>
     </div>
-    <div class="info-card">
-      <div class="info-card-title">✅ Reiseprofil</div>
-      <ul class="info-list">
-        <li>Direktflug HAM/HAJ</li>
-        <li>Mind. 4★ oder Glamping-Village</li>
-        <li>Pool + täglich Mietwagen</li>
-        <li>Felix: Kinderclub, Strand</li>
-        <li>EU-Kindersitz Pflicht</li>
-        <li>Lea: HP/AI bevorzugt</li>
-        <li>Till: Abwechslung + Fotografie</li>
-        <li>Caddy = Dienstwagen HHGmbH</li>
-        <li>Frieda bleibt zuhause</li>
-      </ul>
+
+    <!-- TOP PICKS SECTION -->
+    <div class="section-head"><span class="section-title">⭐ TOP – Sofort buchbar</span><span class="section-sub">Direktflug ab HAM/HAJ · Mind. 4★</span></div>
+    <div class="scroll-wrap" id="wrap-top">
+      <button class="scroll-arrow left" onclick="scroll_left('scroll-top')">‹</button>
+      <div class="cards-grid" id="scroll-top" data-view="grid">
+
+        <!-- SARDINIEN -->
+        <div class="hcard grid-card" data-status="TOP" data-id="sardinien" data-price="3150" data-rating="8.8">
+          <div class="hcard-img">
+            <img src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=400&q=80&fm=jpg&fit=crop" alt="Sardinien" loading="lazy">
+            <span class="hcard-badge badge-top">TOP</span>
+            <button class="hcard-fav" onclick="toggleFav(this,'sardinien')">🤍</button>
+            <span class="hcard-direct">✈ Direkt 2h 20</span>
+          </div>
+          <div class="hcard-body">
+            <div class="hcard-name">Club Hotel Baja Sardinia 4★</div>
+            <div class="hcard-loc">📍 Baja Sardinia, Nordsardinien</div>
+            <div class="hcard-rating-row">
+              <span class="hcard-rating">8.8</span>
+              <span class="hcard-rating-text">Sehr gut</span>
+              <span class="hcard-reviews">(2.140)</span>
+              <div class="hcard-stars"><span>★★★★</span><span style="color:var(--border)">★</span></div>
+            </div>
+            <div class="hcard-tags">
+              <span class="htag-pill htag-hp">Halbpension</span>
+              <span class="htag-pill htag-free">Kostenlos stornierbar</span>
+            </div>
+          </div>
+          <div class="hcard-footer">
+            <div class="hcard-price-block">
+              <span class="hcard-price-label">ab</span>
+              <span class="hcard-price">490 € p.P.</span>
+              <span class="hcard-price-sub">inkl. Flug · 7 Nächte</span>
+            </div>
+            <button class="hcard-details-btn">Details →</button>
+          </div>
+          <div class="hcard-vote">
+            <span class="vote-who">Till</span>
+            <div class="vote-btns" id="vt-sardinien-till"></div>
+            <span class="vote-who" style="margin-left:8px">Lea</span>
+            <div class="vote-btns" id="vt-sardinien-lea"></div>
+            <span class="vote-match" id="vm-sardinien"></span>
+          </div>
+        </div>
+
+        <!-- AIDA KREUZFAHRT -->
+        <div class="hcard grid-card" data-status="TOP" data-id="aida" data-price="3320" data-rating="9.0">
+          <div class="hcard-img">
+            <img src="https://images.unsplash.com/photo-1548574505-5e239809ee19?w=400&q=80&fm=jpg&fit=crop" alt="AIDA Kreuzfahrt" loading="lazy">
+            <span class="hcard-badge badge-tip">TIPP</span>
+            <button class="hcard-fav" onclick="toggleFav(this,'aida')">🤍</button>
+            <span class="hcard-direct">✈ Direkt nach PMI</span>
+          </div>
+          <div class="hcard-body">
+            <div class="hcard-name">AIDAcosma Kreuzfahrt</div>
+            <div class="hcard-loc">📍 Korsika · Sardinien · Rom · Barcelona</div>
+            <div class="hcard-rating-row">
+              <span class="hcard-rating">9.0</span>
+              <span class="hcard-rating-text">Ausgezeichnet</span>
+              <span class="hcard-reviews">(5.870)</span>
+              <div class="hcard-stars"><span>★★★★★</span></div>
+            </div>
+            <div class="hcard-tags">
+              <span class="htag-pill htag-kreuzfahrt">Kreuzfahrt</span>
+              <span class="htag-pill htag-ai">Vollpension</span>
+            </div>
+          </div>
+          <div class="hcard-footer">
+            <div class="hcard-price-block">
+              <span class="hcard-price-label">ab</span>
+              <span class="hcard-price">550 € p.P.</span>
+              <span class="hcard-price-sub">inkl. Flug · 7 Nächte</span>
+            </div>
+            <button class="hcard-details-btn">Details →</button>
+          </div>
+          <div class="hcard-vote">
+            <span class="vote-who">Till</span>
+            <div class="vote-btns" id="vt-aida-till"></div>
+            <span class="vote-who" style="margin-left:8px">Lea</span>
+            <div class="vote-btns" id="vt-aida-lea"></div>
+            <span class="vote-match" id="vm-aida"></span>
+          </div>
+        </div>
+
+        <!-- ALGARVE -->
+        <div class="hcard grid-card" data-status="TOP" data-id="algarve" data-price="2950" data-rating="8.6">
+          <div class="hcard-img">
+            <img src="https://images.unsplash.com/photo-1555881400-74d7acaacd8b?w=400&q=80&fm=jpg&fit=crop" alt="Algarve" loading="lazy">
+            <span class="hcard-badge badge-beliebt">BELIEBT</span>
+            <button class="hcard-fav" onclick="toggleFav(this,'algarve')">🤍</button>
+            <span class="hcard-direct">✈ Direkt 3h 30</span>
+          </div>
+          <div class="hcard-body">
+            <div class="hcard-name">Pestana Alvor Praia 5★</div>
+            <div class="hcard-loc">📍 Alvor, Algarve, Portugal</div>
+            <div class="hcard-rating-row">
+              <span class="hcard-rating">8.6</span>
+              <span class="hcard-rating-text">Sehr gut</span>
+              <span class="hcard-reviews">(3.290)</span>
+              <div class="hcard-stars"><span>★★★★★</span></div>
+            </div>
+            <div class="hcard-tags">
+              <span class="htag-pill htag-hp">Halbpension</span>
+              <span class="htag-pill htag-free">Kostenlos stornierbar</span>
+            </div>
+          </div>
+          <div class="hcard-footer">
+            <div class="hcard-price-block">
+              <span class="hcard-price-label">ab</span>
+              <span class="hcard-price">460 € p.P.</span>
+              <span class="hcard-price-sub">inkl. Flug · 7 Nächte</span>
+            </div>
+            <button class="hcard-details-btn">Details →</button>
+          </div>
+          <div class="hcard-vote">
+            <span class="vote-who">Till</span>
+            <div class="vote-btns" id="vt-algarve-till"></div>
+            <span class="vote-who" style="margin-left:8px">Lea</span>
+            <div class="vote-btns" id="vt-algarve-lea"></div>
+            <span class="vote-match" id="vm-algarve"></span>
+          </div>
+        </div>
+
+        <!-- GLAMPING -->
+        <div class="hcard grid-card" data-status="NEW" data-id="glamping" data-price="2500" data-rating="8.4">
+          <div class="hcard-img">
+            <img src="https://images.unsplash.com/photo-1504280390367-361c6d9f38f4?w=400&q=80&fm=jpg&fit=crop" alt="Glamping" loading="lazy">
+            <span class="hcard-badge badge-new">NEU</span>
+            <button class="hcard-fav" onclick="toggleFav(this,'glamping')">🤍</button>
+            <span class="hcard-direct">✈ Direkt nach VCE</span>
+          </div>
+          <div class="hcard-body">
+            <div class="hcard-name">Union Lido Glamping Village</div>
+            <div class="hcard-loc">📍 Cavallino-Treporti, Venetien</div>
+            <div class="hcard-rating-row">
+              <span class="hcard-rating">8.4</span>
+              <span class="hcard-rating-text">Sehr gut</span>
+              <span class="hcard-reviews">(1.870)</span>
+              <div class="hcard-stars"><span>★★★★</span><span style="color:var(--border)">★</span></div>
+            </div>
+            <div class="hcard-tags">
+              <span class="htag-pill htag-free">Meerzugang direkt</span>
+              <span class="htag-pill htag-ai">Pool inklusive</span>
+            </div>
+          </div>
+          <div class="hcard-footer">
+            <div class="hcard-price-block">
+              <span class="hcard-price-label">ab</span>
+              <span class="hcard-price">380 € p.P.</span>
+              <span class="hcard-price-sub">inkl. Flug · 7 Nächte</span>
+            </div>
+            <button class="hcard-details-btn">Details →</button>
+          </div>
+          <div class="hcard-vote">
+            <span class="vote-who">Till</span>
+            <div class="vote-btns" id="vt-glamping-till"></div>
+            <span class="vote-who" style="margin-left:8px">Lea</span>
+            <div class="vote-btns" id="vt-glamping-lea"></div>
+            <span class="vote-match" id="vm-glamping"></span>
+          </div>
+        </div>
+
+      </div><!-- end scroll-top -->
+      <button class="scroll-arrow right" onclick="scroll_right('scroll-top')">›</button>
+    </div><!-- end wrap-top -->
+
+    <!-- OK SECTION -->
+    <div class="section-gap">
+      <div class="section-head"><span class="section-title">👍 Weitere Optionen</span><span class="section-sub">Alle Direktflug ab HAM/HAJ</span><a class="see-all" onclick="fc('OK',document.querySelector('[onclick*=OK]'))">Alle anzeigen ›</a></div>
+      <div class="scroll-wrap" id="wrap-ok">
+        <button class="scroll-arrow left" onclick="scroll_left('scroll-ok')">‹</button>
+        <div class="cards-scroll" id="scroll-ok">
+
+          <!-- TAURITO -->
+          <div class="hcard" data-status="OK" data-id="taurito" data-price="3100" data-rating="8.9">
+            <div class="hcard-img">
+              <img src="https://images.unsplash.com/photo-1566073771259-6a8506099945?w=400&q=80&fm=jpg&fit=crop" alt="Taurito Princess" loading="lazy">
+              <span class="hcard-badge badge-beliebt">LEA ♥</span>
+              <button class="hcard-fav" onclick="toggleFav(this,'taurito')">🤍</button>
+              <span class="hcard-direct">✈ Direkt 5h</span>
+            </div>
+            <div class="hcard-body">
+              <div class="hcard-name">TUI KIDS CLUB Taurito Princess</div>
+              <div class="hcard-loc">📍 Puerto de Mogán, Gran Canaria</div>
+              <div class="hcard-rating-row">
+                <span class="hcard-rating">8.9</span>
+                <span class="hcard-rating-text">Sehr gut</span>
+                <span class="hcard-reviews">(4.120)</span>
+                <div class="hcard-stars"><span>★★★★★</span></div>
+              </div>
+              <div class="hcard-tags">
+                <span class="htag-pill htag-ai">All Inclusive</span>
+                <span class="htag-pill htag-free">Kinderclub 3–6J</span>
+              </div>
+            </div>
+            <div class="hcard-footer">
+              <div class="hcard-price-block">
+                <span class="hcard-price-label">ab</span>
+                <span class="hcard-price">517 € p.P.</span>
+                <span class="hcard-price-sub">inkl. Flug · 7 Nächte</span>
+              </div>
+              <button class="hcard-details-btn">Details →</button>
+            </div>
+            <div class="hcard-vote">
+              <span class="vote-who">Till</span>
+              <div class="vote-btns" id="vt-taurito-till"></div>
+              <span class="vote-who" style="margin-left:8px">Lea</span>
+              <div class="vote-btns" id="vt-taurito-lea"></div>
+              <span class="vote-match" id="vm-taurito"></span>
+            </div>
+          </div>
+
+          <!-- COTE D'AZUR -->
+          <div class="hcard" data-status="OK" data-id="cote-azur" data-price="3000" data-rating="8.5">
+            <div class="hcard-img">
+              <img src="https://images.unsplash.com/photo-1533105079780-92b9be482077?w=400&q=80&fm=jpg&fit=crop" alt="Côte d'Azur" loading="lazy">
+              <span class="hcard-badge badge-tip">TIPP</span>
+              <button class="hcard-fav" onclick="toggleFav(this,'cote-azur')">🤍</button>
+              <span class="hcard-direct">✈ Direkt 2h</span>
+            </div>
+            <div class="hcard-body">
+              <div class="hcard-name">Mövenpick Hotel Nice 4★</div>
+              <div class="hcard-loc">📍 Antibes, Côte d'Azur, Frankreich</div>
+              <div class="hcard-rating-row">
+                <span class="hcard-rating">8.5</span>
+                <span class="hcard-rating-text">Sehr gut</span>
+                <span class="hcard-reviews">(1.560)</span>
+                <div class="hcard-stars"><span>★★★★</span><span style="color:var(--border)">★</span></div>
+              </div>
+              <div class="hcard-tags">
+                <span class="htag-pill htag-hp">Halbpension</span>
+                <span class="htag-pill htag-free">Kostenlos stornierbar</span>
+              </div>
+            </div>
+            <div class="hcard-footer">
+              <div class="hcard-price-block">
+                <span class="hcard-price-label">ab</span>
+                <span class="hcard-price">480 € p.P.</span>
+                <span class="hcard-price-sub">inkl. Flug · 7 Nächte</span>
+              </div>
+              <button class="hcard-details-btn">Details →</button>
+            </div>
+            <div class="hcard-vote">
+              <span class="vote-who">Till</span>
+              <div class="vote-btns" id="vt-cote-azur-till"></div>
+              <span class="vote-who" style="margin-left:8px">Lea</span>
+              <div class="vote-btns" id="vt-cote-azur-lea"></div>
+              <span class="vote-match" id="vm-cote-azur"></span>
+            </div>
+          </div>
+
+          <!-- SCHWEIZ -->
+          <div class="hcard" data-status="OK" data-id="schweiz" data-price="2000" data-rating="8.0">
+            <div class="hcard-img">
+              <img src="https://images.unsplash.com/photo-1476514525535-07fb3b4ae5f1?w=400&q=80&fm=jpg&fit=crop" alt="Schweiz" loading="lazy">
+              <span class="hcard-badge badge-tip">LEA ♥</span>
+              <button class="hcard-fav" onclick="toggleFav(this,'schweiz')">🤍</button>
+              <span class="hcard-direct">🚗 Caddy oder Flug GVA</span>
+            </div>
+            <div class="hcard-body">
+              <div class="hcard-name">Schweiz + Lago Maggiore</div>
+              <div class="hcard-loc">📍 Fribourg / Stresa / Lugano</div>
+              <div class="hcard-rating-row">
+                <span class="hcard-rating" style="background:#059669;">8.0</span>
+                <span class="hcard-rating-text">Gut</span>
+                <span class="hcard-reviews">Freunde vor Ort</span>
+                <div class="hcard-stars"><span>★★★★</span><span style="color:var(--border)">★</span></div>
+              </div>
+              <div class="hcard-tags">
+                <span class="htag-pill htag-free">Günstigste Option</span>
+                <span class="htag-pill" style="background:#F3E8FF;color:#7C3AED;">Château de Gruyères</span>
+              </div>
+            </div>
+            <div class="hcard-footer">
+              <div class="hcard-price-block">
+                <span class="hcard-price-label">ab</span>
+                <span class="hcard-price">~300 € p.P.</span>
+                <span class="hcard-price-sub">Caddy = Dienstwagen HHGmbH</span>
+              </div>
+              <button class="hcard-details-btn">Details →</button>
+            </div>
+            <div class="hcard-vote">
+              <span class="vote-who">Till</span>
+              <div class="vote-btns" id="vt-schweiz-till"></div>
+              <span class="vote-who" style="margin-left:8px">Lea</span>
+              <div class="vote-btns" id="vt-schweiz-lea"></div>
+              <span class="vote-match" id="vm-schweiz"></span>
+            </div>
+          </div>
+
+          <!-- FUERTEVENTURA -->
+          <div class="hcard" data-status="OK" data-id="fuerteventura" data-price="3200" data-rating="8.7">
+            <div class="hcard-img">
+              <img src="https://images.unsplash.com/photo-1582653291997-079a1c04e5a1?w=400&q=80&fm=jpg&fit=crop" alt="Fuerteventura" loading="lazy">
+              <span class="hcard-badge badge-tip">TIPP</span>
+              <button class="hcard-fav" onclick="toggleFav(this,'fuerteventura')">🤍</button>
+              <span class="hcard-direct">✈ Direkt 4h 30</span>
+            </div>
+            <div class="hcard-body">
+              <div class="hcard-name">Aldiana Club Fuerteventura 5★</div>
+              <div class="hcard-loc">📍 Costa Calma, Fuerteventura</div>
+              <div class="hcard-rating-row">
+                <span class="hcard-rating">8.7</span>
+                <span class="hcard-rating-text">Sehr gut</span>
+                <span class="hcard-reviews">(2.890)</span>
+                <div class="hcard-stars"><span>★★★★★</span></div>
+              </div>
+              <div class="hcard-tags">
+                <span class="htag-pill htag-ai">All Inclusive</span>
+                <span class="htag-pill htag-free">Kinderclub</span>
+              </div>
+            </div>
+            <div class="hcard-footer">
+              <div class="hcard-price-block">
+                <span class="hcard-price-label">ab</span>
+                <span class="hcard-price">555 € p.P.</span>
+                <span class="hcard-price-sub">inkl. Flug · 7 Nächte</span>
+              </div>
+              <button class="hcard-details-btn">Details →</button>
+            </div>
+            <div class="hcard-vote">
+              <span class="vote-who">Till</span>
+              <div class="vote-btns" id="vt-fuerteventura-till"></div>
+              <span class="vote-who" style="margin-left:8px">Lea</span>
+              <div class="vote-btns" id="vt-fuerteventura-lea"></div>
+              <span class="vote-match" id="vm-fuerteventura"></span>
+            </div>
+          </div>
+
+          <!-- MENORCA -->
+          <div class="hcard" data-status="OK" data-id="menorca" data-price="2900" data-rating="8.4">
+            <div class="hcard-img">
+              <img src="https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=400&q=80&fm=jpg&fit=crop" alt="Menorca" loading="lazy">
+              <span class="hcard-badge badge-tip">TIPP</span>
+              <button class="hcard-fav" onclick="toggleFav(this,'menorca')">🤍</button>
+              <span class="hcard-direct">✈ Direkt 2h 30</span>
+            </div>
+            <div class="hcard-body">
+              <div class="hcard-name">Hotel Cala Galdana 4★</div>
+              <div class="hcard-loc">📍 Cala Galdana, Menorca</div>
+              <div class="hcard-rating-row">
+                <span class="hcard-rating">8.4</span>
+                <span class="hcard-rating-text">Sehr gut</span>
+                <span class="hcard-reviews">(1.240)</span>
+                <div class="hcard-stars"><span>★★★★</span><span style="color:var(--border)">★</span></div>
+              </div>
+              <div class="hcard-tags">
+                <span class="htag-pill htag-hp">Halbpension</span>
+                <span class="htag-pill htag-free">Ruhige Bucht</span>
+              </div>
+            </div>
+            <div class="hcard-footer">
+              <div class="hcard-price-block">
+                <span class="hcard-price-label">ab</span>
+                <span class="hcard-price">443 € p.P.</span>
+                <span class="hcard-price-sub">inkl. Flug · 7 Nächte</span>
+              </div>
+              <button class="hcard-details-btn">Details →</button>
+            </div>
+            <div class="hcard-vote">
+              <span class="vote-who">Till</span>
+              <div class="vote-btns" id="vt-menorca-till"></div>
+              <span class="vote-who" style="margin-left:8px">Lea</span>
+              <div class="vote-btns" id="vt-menorca-lea"></div>
+              <span class="vote-match" id="vm-menorca"></span>
+            </div>
+          </div>
+
+          <!-- KAPVERDEN -->
+          <div class="hcard" data-status="OK" data-id="kapverden" data-price="3400" data-rating="8.3">
+            <div class="hcard-img">
+              <img src="https://images.unsplash.com/photo-1590677872280-70daf34a315b?w=400&q=80&fm=jpg&fit=crop" alt="Kapverden" loading="lazy">
+              <span class="hcard-badge badge-new">EXOTISCH</span>
+              <button class="hcard-fav" onclick="toggleFav(this,'kapverden')">🤍</button>
+              <span class="hcard-direct">✈ Direkt 6h</span>
+            </div>
+            <div class="hcard-body">
+              <div class="hcard-name">RIU Funana 5★</div>
+              <div class="hcard-loc">📍 Santa Maria, Sal, Kapverden</div>
+              <div class="hcard-rating-row">
+                <span class="hcard-rating">8.3</span>
+                <span class="hcard-rating-text">Sehr gut</span>
+                <span class="hcard-reviews">(3.780)</span>
+                <div class="hcard-stars"><span>★★★★★</span></div>
+              </div>
+              <div class="hcard-tags">
+                <span class="htag-pill htag-ai">All Inclusive</span>
+                <span class="htag-pill htag-free">Kilometer Strand</span>
+              </div>
+            </div>
+            <div class="hcard-footer">
+              <div class="hcard-price-block">
+                <span class="hcard-price-label">ab</span>
+                <span class="hcard-price">559 € p.P.</span>
+                <span class="hcard-price-sub">inkl. Flug · 7 Nächte</span>
+              </div>
+              <button class="hcard-details-btn">Details →</button>
+            </div>
+            <div class="hcard-vote">
+              <span class="vote-who">Till</span>
+              <div class="vote-btns" id="vt-kapverden-till"></div>
+              <span class="vote-who" style="margin-left:8px">Lea</span>
+              <div class="vote-btns" id="vt-kapverden-lea"></div>
+              <span class="vote-match" id="vm-kapverden"></span>
+            </div>
+          </div>
+
+          <!-- MALTA -->
+          <div class="hcard" data-status="OK" data-id="malta" data-price="2400" data-rating="8.2">
+            <div class="hcard-img">
+              <img src="https://images.unsplash.com/photo-1559827291-72ee739d0d9a?w=400&q=80&fm=jpg&fit=crop" alt="Malta" loading="lazy">
+              <span class="hcard-badge badge-tip">GÜNSTIG</span>
+              <button class="hcard-fav" onclick="toggleFav(this,'malta')">🤍</button>
+              <span class="hcard-direct">✈ Direkt 3h</span>
+            </div>
+            <div class="hcard-body">
+              <div class="hcard-name">db Seabank Resort + Spa 4★</div>
+              <div class="hcard-loc">📍 Mellieħa Bay, Malta</div>
+              <div class="hcard-rating-row">
+                <span class="hcard-rating">8.2</span>
+                <span class="hcard-rating-text">Sehr gut</span>
+                <span class="hcard-reviews">(2.340)</span>
+                <div class="hcard-stars"><span>★★★★</span><span style="color:var(--border)">★</span></div>
+              </div>
+              <div class="hcard-tags">
+                <span class="htag-pill htag-ai">All Inclusive</span>
+                <span class="htag-pill htag-free">Günstigste Option</span>
+              </div>
+            </div>
+            <div class="hcard-footer">
+              <div class="hcard-price-block">
+                <span class="hcard-price-label">ab</span>
+                <span class="hcard-price">371 € p.P.</span>
+                <span class="hcard-price-sub">inkl. Flug · 7 Nächte</span>
+              </div>
+              <button class="hcard-details-btn">Details →</button>
+            </div>
+            <div class="hcard-vote">
+              <span class="vote-who">Till</span>
+              <div class="vote-btns" id="vt-malta-till"></div>
+              <span class="vote-who" style="margin-left:8px">Lea</span>
+              <div class="vote-btns" id="vt-malta-lea"></div>
+              <span class="vote-match" id="vm-malta"></span>
+            </div>
+          </div>
+
+          <!-- LANZAROTE -->
+          <div class="hcard" data-status="OK" data-id="lanzarote" data-price="2800" data-rating="8.5">
+            <div class="hcard-img">
+              <img src="https://images.unsplash.com/photo-1551918120-9739cb430c6d?w=400&q=80&fm=jpg&fit=crop" alt="Lanzarote" loading="lazy">
+              <span class="hcard-badge badge-tip">TIPP</span>
+              <button class="hcard-fav" onclick="toggleFav(this,'lanzarote')">🤍</button>
+              <span class="hcard-direct">✈ Direkt 4h 45</span>
+            </div>
+            <div class="hcard-body">
+              <div class="hcard-name">Barceló Teguise Beach 4★</div>
+              <div class="hcard-loc">📍 Puerto del Carmen, Lanzarote</div>
+              <div class="hcard-rating-row">
+                <span class="hcard-rating">8.5</span>
+                <span class="hcard-rating-text">Sehr gut</span>
+                <span class="hcard-reviews">(1.890)</span>
+                <div class="hcard-stars"><span>★★★★</span><span style="color:var(--border)">★</span></div>
+              </div>
+              <div class="hcard-tags">
+                <span class="htag-pill htag-hp">Halbpension</span>
+                <span class="htag-pill htag-free">Vulkan-Mietwagen</span>
+              </div>
+            </div>
+            <div class="hcard-footer">
+              <div class="hcard-price-block">
+                <span class="hcard-price-label">ab</span>
+                <span class="hcard-price">430 € p.P.</span>
+                <span class="hcard-price-sub">inkl. Flug · 7 Nächte</span>
+              </div>
+              <button class="hcard-details-btn">Details →</button>
+            </div>
+            <div class="hcard-vote">
+              <span class="vote-who">Till</span>
+              <div class="vote-btns" id="vt-lanzarote-till"></div>
+              <span class="vote-who" style="margin-left:8px">Lea</span>
+              <div class="vote-btns" id="vt-lanzarote-lea"></div>
+              <span class="vote-match" id="vm-lanzarote"></span>
+            </div>
+          </div>
+
+          <!-- COSTA DEL SOL -->
+          <div class="hcard" data-status="OK" data-id="costa-sol" data-price="2700" data-rating="8.3">
+            <div class="hcard-img">
+              <img src="https://images.unsplash.com/photo-1573843981267-be1999ff37cd?w=400&q=80&fm=jpg&fit=crop" alt="Costa del Sol" loading="lazy">
+              <span class="hcard-badge badge-tip">TIPP</span>
+              <button class="hcard-fav" onclick="toggleFav(this,'costa-sol')">🤍</button>
+              <span class="hcard-direct">✈ Direkt 3h 20</span>
+            </div>
+            <div class="hcard-body">
+              <div class="hcard-name">Barceló Marbella 4★</div>
+              <div class="hcard-loc">📍 Marbella, Costa del Sol</div>
+              <div class="hcard-rating-row">
+                <span class="hcard-rating">8.3</span>
+                <span class="hcard-rating-text">Sehr gut</span>
+                <span class="hcard-reviews">(2.100)</span>
+                <div class="hcard-stars"><span>★★★★</span><span style="color:var(--border)">★</span></div>
+              </div>
+              <div class="hcard-tags">
+                <span class="htag-pill htag-ai">All Inclusive</span>
+                <span class="htag-pill htag-free">Granada + Alhambra</span>
+              </div>
+            </div>
+            <div class="hcard-footer">
+              <div class="hcard-price-block">
+                <span class="hcard-price-label">ab</span>
+                <span class="hcard-price">415 € p.P.</span>
+                <span class="hcard-price-sub">inkl. Flug · 7 Nächte</span>
+              </div>
+              <button class="hcard-details-btn">Details →</button>
+            </div>
+            <div class="hcard-vote">
+              <span class="vote-who">Till</span>
+              <div class="vote-btns" id="vt-costa-sol-till"></div>
+              <span class="vote-who" style="margin-left:8px">Lea</span>
+              <div class="vote-btns" id="vt-costa-sol-lea"></div>
+              <span class="vote-match" id="vm-costa-sol"></span>
+            </div>
+          </div>
+
+          <!-- MALLORCA -->
+          <div class="hcard" data-status="OK" data-id="mallorca" data-price="2900" data-rating="8.6">
+            <div class="hcard-img">
+              <img src="https://images.unsplash.com/photo-1544551763-46a013bb70d5?w=400&q=80&fm=jpg&fit=crop" alt="Mallorca" loading="lazy">
+              <span class="hcard-badge badge-top">TOP</span>
+              <button class="hcard-fav" onclick="toggleFav(this,'mallorca')">🤍</button>
+              <span class="hcard-direct">✈ Direkt 2h 30</span>
+            </div>
+            <div class="hcard-body">
+              <div class="hcard-name">Iberostar Grand Playa de Palma 5★</div>
+              <div class="hcard-loc">📍 Playa de Palma, Mallorca</div>
+              <div class="hcard-rating-row">
+                <span class="hcard-rating">8.6</span>
+                <span class="hcard-rating-text">Sehr gut</span>
+                <span class="hcard-reviews">(3.440)</span>
+                <div class="hcard-stars"><span>★★★★★</span></div>
+              </div>
+              <div class="hcard-tags">
+                <span class="htag-pill htag-ai">All Inclusive</span>
+                <span class="htag-pill htag-free">Kinderclub</span>
+              </div>
+            </div>
+            <div class="hcard-footer">
+              <div class="hcard-price-block">
+                <span class="hcard-price-label">ab</span>
+                <span class="hcard-price">443 € p.P.</span>
+                <span class="hcard-price-sub">inkl. Flug · 7 Nächte</span>
+              </div>
+              <button class="hcard-details-btn">Details →</button>
+            </div>
+            <div class="hcard-vote">
+              <span class="vote-who">Till</span>
+              <div class="vote-btns" id="vt-mallorca-till"></div>
+              <span class="vote-who" style="margin-left:8px">Lea</span>
+              <div class="vote-btns" id="vt-mallorca-lea"></div>
+              <span class="vote-match" id="vm-mallorca"></span>
+            </div>
+          </div>
+
+        </div><!-- end scroll-ok -->
+        <button class="scroll-arrow right" onclick="scroll_right('scroll-ok')">›</button>
+      </div>
     </div>
-    <div class="age-card">
-      <div class="age-card-title">📅 Felix-Alterskurve</div>
-      <div class="age-row"><div class="age-badge">2026<br>3,5J</div><div class="age-body"><strong>Jetzt:</strong> Strand, Pool, Kinderclub ab 3J, Wasserpark. Max. 6h Flug.</div></div>
-      <div class="age-row"><div class="age-badge">2027<br>4J</div><div class="age-body"><strong>Bald:</strong> + Burgen (Gruyères!), Astrid Lindgrens Welt, Tierparks.</div></div>
-      <div class="age-row"><div class="age-badge">2028-29<br>5-6J</div><div class="age-body"><strong>Madeira-Fenster:</strong> + Levadas, Schweden Schären, Norwegen Natur.</div></div>
-      <div class="age-row"><div class="age-badge">2030+<br>7J+</div><div class="age-body"><strong>Träume:</strong> + Bali, Japan, Lappland Nordlichter.</div></div>
+
+    <!-- SPÄTER SECTION -->
+    <div class="section-gap">
+      <div class="section-head"><span class="section-title">⏳ Bucket List &amp; Später</span><span class="section-sub">Für wenn Felix größer ist</span></div>
+      <div class="scroll-wrap">
+        <div class="cards-scroll" id="scroll-later">
+
+          <div class="hcard" data-status="LATER" data-id="madeira" data-price="3000" data-rating="8.7">
+            <div class="hcard-img">
+              <img src="https://images.unsplash.com/photo-1570654261523-f1effc06e586?w=400&q=80&fm=jpg&fit=crop" alt="Madeira" loading="lazy">
+              <span class="hcard-badge badge-later">LEA: WENN FELIX ÄLTER</span>
+              <button class="hcard-fav" onclick="toggleFav(this,'madeira')">🤍</button>
+            </div>
+            <div class="hcard-body">
+              <div class="hcard-name">Savoy Palace 5★ Madeira</div>
+              <div class="hcard-loc">📍 Funchal, Madeira · 22–25°C</div>
+              <div class="hcard-rating-row">
+                <span class="hcard-rating">8.7</span>
+                <span class="hcard-rating-text">Sehr gut</span>
+                <span class="hcard-reviews">(2.780)</span>
+              </div>
+              <div class="hcard-tags"><span class="htag-pill htag-free">Felix ab 5J (2028)</span></div>
+            </div>
+            <div class="hcard-footer">
+              <div class="hcard-price-block"><span class="hcard-price">~3.000 €</span><span class="hcard-price-sub">für 3 Pers. 7N</span></div>
+              <button class="hcard-details-btn">Details →</button>
+            </div>
+            <div class="hcard-vote">
+              <span class="vote-who">Till</span>
+              <div class="vote-btns" id="vt-madeira-till"></div>
+              <span class="vote-who" style="margin-left:8px">Lea</span>
+              <div class="vote-btns" id="vt-madeira-lea"></div>
+              <span class="vote-match" id="vm-madeira"></span>
+            </div>
+          </div>
+
+          <div class="hcard" data-status="LATER" data-id="schweden" data-price="2800" data-rating="8.0">
+            <div class="hcard-img">
+              <img src="https://images.unsplash.com/photo-1531366936337-7c912a4589a7?w=400&q=80&fm=jpg&fit=crop" alt="Schweden" loading="lazy">
+              <span class="hcard-badge badge-later">2027+</span>
+              <button class="hcard-fav" onclick="toggleFav(this,'schweden')">🤍</button>
+            </div>
+            <div class="hcard-body">
+              <div class="hcard-name">Schweden – Astrid Lindgrens Welt</div>
+              <div class="hcard-loc">📍 Bohuslän / Vimmerby · Tills Herzensthema</div>
+              <div class="hcard-rating-row"><span class="hcard-rating" style="background:#059669">8.0</span><span class="hcard-rating-text">Sehr gut</span></div>
+              <div class="hcard-tags"><span class="htag-pill htag-free">Felix ab 4J (2027)</span></div>
+            </div>
+            <div class="hcard-footer">
+              <div class="hcard-price-block"><span class="hcard-price">~2.800 €</span><span class="hcard-price-sub">Ferienhäuser + Mietwagen</span></div>
+              <button class="hcard-details-btn">Details →</button>
+            </div>
+            <div class="hcard-vote">
+              <span class="vote-who">Till</span>
+              <div class="vote-btns" id="vt-schweden-till"></div>
+              <span class="vote-who" style="margin-left:8px">Lea</span>
+              <div class="vote-btns" id="vt-schweden-lea"></div>
+              <span class="vote-match" id="vm-schweden"></span>
+            </div>
+          </div>
+
+          <div class="hcard" data-status="LATER" data-id="bali" data-price="6000" data-rating="9.1">
+            <div class="hcard-img">
+              <img src="https://images.unsplash.com/photo-1537996194471-e657df975ab4?w=400&q=80&fm=jpg&fit=crop" alt="Bali" loading="lazy">
+              <span class="hcard-badge badge-later">TRAUMZIEL 2030+</span>
+              <button class="hcard-fav" onclick="toggleFav(this,'bali')">🤍</button>
+            </div>
+            <div class="hcard-body">
+              <div class="hcard-name">Villa Lembah Ubud, Bali</div>
+              <div class="hcard-loc">📍 Ubud / Seminyak · Jenny's Verbindung</div>
+              <div class="hcard-rating-row"><span class="hcard-rating">9.1</span><span class="hcard-rating-text">Traumurlaub</span></div>
+              <div class="hcard-tags"><span class="htag-pill htag-free">Felix ab 7J (2030)</span></div>
+            </div>
+            <div class="hcard-footer">
+              <div class="hcard-price-block"><span class="hcard-price">~6.000 €</span><span class="hcard-price-sub">Villa + Langstrecke</span></div>
+              <button class="hcard-details-btn">Details →</button>
+            </div>
+            <div class="hcard-vote">
+              <span class="vote-who">Till</span>
+              <div class="vote-btns" id="vt-bali-till"></div>
+              <span class="vote-who" style="margin-left:8px">Lea</span>
+              <div class="vote-btns" id="vt-bali-lea"></div>
+              <span class="vote-match" id="vm-bali"></span>
+            </div>
+          </div>
+
+          <div class="hcard" data-status="LATER" data-id="lappland" data-price="4000" data-rating="8.9">
+            <div class="hcard-img">
+              <img src="https://images.unsplash.com/photo-1531366936337-7c912a4589a7?w=400&q=80&fm=jpg&fit=crop" alt="Lappland" loading="lazy">
+              <span class="hcard-badge badge-later">WINTER 2028</span>
+              <button class="hcard-fav" onclick="toggleFav(this,'lappland')">🤍</button>
+            </div>
+            <div class="hcard-body">
+              <div class="hcard-name">Lappland Nordlichter-Trip</div>
+              <div class="hcard-loc">📍 Tromsø / Finnmarken · Jan–März</div>
+              <div class="hcard-rating-row"><span class="hcard-rating">8.9</span><span class="hcard-rating-text">Ausgezeichnet</span></div>
+              <div class="hcard-tags"><span class="htag-pill" style="background:#EDE9FE;color:#7C3AED">Nordlichter + Husky</span></div>
+            </div>
+            <div class="hcard-footer">
+              <div class="hcard-price-block"><span class="hcard-price">~4.000 €</span><span class="hcard-price-sub">Winter 2028/29</span></div>
+              <button class="hcard-details-btn">Details →</button>
+            </div>
+            <div class="hcard-vote">
+              <span class="vote-who">Till</span>
+              <div class="vote-btns" id="vt-lappland-till"></div>
+              <span class="vote-who" style="margin-left:8px">Lea</span>
+              <div class="vote-btns" id="vt-lappland-lea"></div>
+              <span class="vote-match" id="vm-lappland"></span>
+            </div>
+          </div>
+
+        </div>
+      </div>
     </div>
-    <div class="info-card info-full">
-      <div class="info-card-title">⚡ Nächste Schritte</div>
-      <div class="step-row"><div class="step-num">1</div><div class="step-text"><strong>AIDA prüfen:</strong> aida.de Route PMI07307 – Sardinien-Route 13.–16. Juli? Kinder 35% Rabatt.</div></div>
-      <div class="step-row"><div class="step-num">2</div><div class="step-text"><strong>Glamping ASAP:</strong> Union Lido/Cavallino, Punta Lunga/Vieste. acsi.eu + pitchup.com.</div></div>
-      <div class="step-row"><div class="step-num">3</div><div class="step-text"><strong>Sterne vergeben:</strong> Beide voten unabhängig. Ranking-Tab zeigt Match.</div></div>
-      <div class="step-row"><div class="step-num">4</div><div class="step-text"><strong>Diskutieren:</strong> Kommentare unter jeder Karte. Lea kann ihre Bedenken festhalten, Till seine Punkte.</div></div>
-      <div class="step-row"><div class="step-num">5</div><div class="step-text"><strong>Entscheiden + buchen:</strong> Wenn beide ⭐⭐⭐⭐+ = Match. Sonst weiter abwägen.</div></div>
+
+    <!-- SUBMISSIONS -->
+    <div id="sub-section" style="display:none;margin-top:28px;">
+      <div class="section-head"><span class="section-title">💡 Eigene Ideen</span></div>
+      <div id="sub-list"></div>
     </div>
+
+    <div style="height:24px;"></div>
+  </div><!-- end main -->
+</div><!-- end tab-ideen -->
+
+<!-- ======== ABSTIMMUNG ======== -->
+<div id="tab-abstimmung" class="tab-pane" style="display:none;">
+  <div class="main" style="padding-top:16px;">
+    <div class="section-head" style="margin-bottom:12px;"><span class="section-title">📊 Eure Abstimmung</span></div>
+    <p style="font-size:12px;color:var(--muted);margin-bottom:14px;">Tippt ❤️ / 🤔 / ❌ für jedes Ziel. Unabhängig – dann sieht man was beide wollen.</p>
+    <div class="vote-section" id="vote-table">
+      <div class="vote-thead"><div>Destination</div><div style="text-align:center">Till</div><div style="text-align:center">Lea</div><div style="text-align:center">Match</div></div>
+    </div>
+    <div class="export-bar">
+      <button class="export-btn" onclick="exportVotes()">📋 JSON für Codex</button>
+      <span class="export-note">Abstimmung exportieren → Codex kann Empfehlungen daraus ableiten</span>
+    </div>
+    <div style="height:24px;"></div>
   </div>
 </div>
 
-<!-- BOTTOM NAV -->
-<div class="bottom-nav">
-  <button class="bnav-item active" onclick="navTo('ideen',this)">
-    <span class="icon">🗺️</span><span>Ideen</span>
-  </button>
-  <button class="bnav-item" onclick="navTo('ranking',this)">
-    <span class="icon">🏆</span><span>Ranking</span>
-  </button>
-  <button class="bnav-item" onclick="navTo('eigene',this)">
-    <span class="icon">💜</span><span>Eigene</span>
-    <span class="nbadge" id="own-badge" style="display:none">0</span>
-  </button>
-  <button class="bnav-item" onclick="navTo('archiv',this)">
-    <span class="icon">📖</span><span>Archiv</span>
-  </button>
-  <button class="bnav-item" onclick="navTo('info',this)">
-    <span class="icon">⚡</span><span>Info</span>
-  </button>
+<!-- ======== ARCHIV ======== -->
+<div id="tab-archiv" class="tab-pane" style="display:none;">
+  <div class="main" style="padding-top:16px;">
+    <div class="filter-chips" style="margin-bottom:14px;" id="hist-chips">
+      <button class="fchip active" onclick="fh('ALL',this)">Alle</button>
+      <button class="fchip" onclick="fh('hotel',this)">🏨 Hotel</button>
+      <button class="fchip" onclick="fh('cruise',this)">🚢 Kreuzfahrt</button>
+      <button class="fchip" onclick="fh('ferienhaus',this)">🏡 Ferienhaus</button>
+      <button class="fchip" onclick="fh('airbnb',this)">🏠 Airbnb</button>
+      <button class="fchip" onclick="fh('family',this)">👨‍👩‍👦 Familie</button>
+    </div>
+    <div id="hl">
+      <div class="hist-year-label">2015</div>
+      <div class="hist-row airbnb" data-type="airbnb"><div class="hist-dot"></div><span class="hist-em">🇬🇧</span><div class="hist-content"><div class="hist-name">Zimmer in London (Bermondsey)</div><div class="hist-loc">London, UK · bei Gordon</div><div class="hist-pills"><span class="hpill hp-airbnb">Airbnb</span><span class="hpill hp-fh">26.–31. Aug. · 5N</span></div></div><span class="hist-pers">Till + Bruder Jasper</span></div>
+
+      <div class="hist-year-label">2016</div>
+      <div class="hist-row airbnb" data-type="airbnb"><div class="hist-dot"></div><span class="hist-em">🌲</span><div class="hist-content"><div class="hist-name">A-Frame Cabin, Sulzfeld</div><div class="hist-loc">Deutschland · bei Wolfgang</div><div class="hist-pills"><span class="hpill hp-airbnb">Airbnb</span><span class="hpill hp-fh">5.–10. Sept. · 5N</span></div></div><span class="hist-pers">Till solo</span></div>
+      <div class="hist-row airbnb" data-type="airbnb"><div class="hist-dot"></div><span class="hist-em">🇵🇹</span><div class="hist-content"><div class="hist-name">Zimmer in Porto</div><div class="hist-loc">Porto, Portugal · bei Francisco</div><div class="hist-pills"><span class="hpill hp-airbnb">Airbnb</span><span class="hpill hp-fh">26.–29. Sept. · 3N</span></div></div><span class="hist-pers">Till solo</span></div>
+      <div class="hist-row airbnb" data-type="airbnb"><div class="hist-dot"></div><span class="hist-em">🇳🇱</span><div class="hist-content"><div class="hist-name">Unterkunft in Kortenhoef</div><div class="hist-loc">Niederlande · bei Karin</div><div class="hist-pills"><span class="hpill hp-airbnb">Airbnb</span><span class="hpill hp-fh">1.–3. Okt. · 2N</span></div></div><span class="hist-pers">Till solo</span></div>
+
+      <div class="hist-year-label">2017</div>
+      <div class="hist-row airbnb" data-type="airbnb"><div class="hist-dot"></div><span class="hist-em">🇵🇹</span><div class="hist-content"><div class="hist-name">Zimmer in Lissabon (Anjos)</div><div class="hist-loc">Lisboa, Portugal</div><div class="hist-pills"><span class="hpill hp-airbnb">Airbnb</span><span class="hpill hp-fh">26.–28. Sept. · 2N</span></div></div><span class="hist-pers">Till solo</span></div>
+      <div class="hist-row airbnb" data-type="airbnb"><div class="hist-dot"></div><span class="hist-em">🌺</span><div class="hist-content"><div class="hist-name">Funchal, Madeira (8 Nächte!)</div><div class="hist-loc">Madeira, Portugal</div><div class="hist-pills"><span class="hpill hp-airbnb">Airbnb</span><span class="hpill hp-fh">28. Sept.–6. Okt.</span></div></div><span class="hist-pers">Till solo</span></div>
+      <div class="hist-row airbnb" data-type="airbnb"><div class="hist-dot"></div><span class="hist-em">🍷</span><div class="hist-content"><div class="hist-name">Vila Nova de Gaia / Porto</div><div class="hist-loc">Porto, Douro, Portugal</div><div class="hist-pills"><span class="hpill hp-airbnb">Airbnb</span><span class="hpill hp-fh">6.–10. Okt. · 4N</span></div></div><span class="hist-pers">Till solo</span></div>
+
+      <div class="hist-year-label">2018</div>
+      <div class="hist-row family" data-type="family"><div class="hist-dot"></div><span class="hist-em">🇸🇪</span><div class="hist-content"><div class="hist-name">Sunne, Värmland – Hochzeit der Cousine</div><div class="hist-loc">Schweden · Till schwärmt seitdem davon</div><div class="hist-pills"><span class="hpill hp-family">Familienreise</span></div></div><span class="hist-pers">Till + Familie</span></div>
+
+      <div class="hist-year-label">2019</div>
+      <div class="hist-row airbnb" data-type="airbnb"><div class="hist-dot"></div><span class="hist-em">🇬🇧</span><div class="hist-content"><div class="hist-name">Greater London (Battersea)</div><div class="hist-loc">London, UK · bei Jilly</div><div class="hist-pills"><span class="hpill hp-airbnb">Airbnb</span><span class="hpill hp-fh">22.–25. März · 3N</span></div></div><span class="hist-pers">Till + Lea</span></div>
+      <div class="hist-row hotel" data-type="hotel"><div class="hist-dot"></div><span class="hist-em">🌴</span><div class="hist-content"><div class="hist-name">Vanilla Garden · Teneriffa 4★ HP</div><div class="hist-loc">Playa de las Americas</div><div class="hist-pills"><span class="hpill hp-hotel">Hotel 4★</span><span class="hpill hp-fh">31.07–07.08 · 7N · #41629995</span></div></div><span class="hist-pers">Till + Lea</span></div>
+      <div class="hist-row airbnb" data-type="airbnb"><div class="hist-dot"></div><span class="hist-em">🇩🇰</span><div class="hist-content"><div class="hist-name">Ferienhaus in Oksbøl</div><div class="hist-loc">Oksbøl, Dänemark</div><div class="hist-pills"><span class="hpill hp-airbnb">Airbnb</span><span class="hpill hp-fh">29.Okt.–2.Nov. · 4N</span></div></div><span class="hist-pers">Till + Lea</span></div>
+
+      <div class="hist-year-label">2020</div>
+      <div class="hist-row airbnb" data-type="airbnb"><div class="hist-dot"></div><span class="hist-em">🚤</span><div class="hist-content"><div class="hist-name">Waterside Cabin Vinkeveen</div><div class="hist-loc">Vinkeveen, Niederlande · bei Paula & Richard · 7N</div><div class="hist-pills"><span class="hpill hp-airbnb">Airbnb</span></div></div><span class="hist-pers">Till + Lea</span></div>
+
+      <div class="hist-year-label">2021</div>
+      <div class="hist-row hotel" data-type="hotel"><div class="hist-dot"></div><span class="hist-em">🌴</span><div class="hist-content"><div class="hist-name">Radisson Blu Resort Gran Canaria 5★</div><div class="hist-loc">Patalavaca · 7N HP · #47201487</div><div class="hist-pills"><span class="hpill hp-hotel">Hotel 5★</span></div></div><span class="hist-pers">Till + Lea</span></div>
+
+      <div class="hist-year-label">2022</div>
+      <div class="hist-row hotel" data-type="hotel"><div class="hist-dot"></div><span class="hist-em">🌴</span><div class="hist-content"><div class="hist-name">Dreams Jardin Tropical Resort & Spa 4★</div><div class="hist-loc">Costa Adeje, Teneriffa · 7N HP · 3.276 € · #12852050</div><div class="hist-pills"><span class="hpill hp-hotel">Hotel 4★</span></div></div><span class="hist-pers">Till + Lea</span></div>
+
+      <div class="hist-year-label">2023 – ab hier mit Felix 👶</div>
+      <div class="hist-row cruise" data-type="cruise"><div class="hist-dot"></div><span class="hist-em">🚢</span><div class="hist-content"><div class="hist-name">AIDAblu Adria-Kreuzfahrt</div><div class="hist-loc">Korfu · Triest · Zadar · Kotor · Dubrovnik · Bari · Korfu · 5.557 € · #14997795</div><div class="hist-pills"><span class="hpill hp-cruise">Kreuzfahrt</span></div></div><span class="hist-pers">Till + Lea + Felix + Astrid J.</span></div>
+      <div class="hist-row hotel" data-type="hotel"><div class="hist-dot"></div><span class="hist-em">🏨</span><div class="hist-content"><div class="hist-name">Acharavi Beach Hotel, Korfu</div><div class="hist-loc">546 € · 2N · #410637840</div><div class="hist-pills"><span class="hpill hp-hotel">Hotel</span></div></div><span class="hist-pers">Familie</span></div>
+      <div class="hist-row ferienhaus" data-type="ferienhaus"><div class="hist-dot"></div><span class="hist-em">🏡</span><div class="hist-content"><div class="hist-name">MarinaPark Bad Nederrijn, Maurik</div><div class="hist-loc">Niederlande · 4N</div><div class="hist-pills"><span class="hpill hp-fh">Ferienhaus</span></div></div><span class="hist-pers">Familie</span></div>
+
+      <div class="hist-year-label">2024</div>
+      <div class="hist-row ferienhaus" data-type="ferienhaus"><div class="hist-dot"></div><span class="hist-em">🏡</span><div class="hist-content"><div class="hist-name">EuroParcs De Utrechtse Heuvelrug</div><div class="hist-loc">Maarn, NL · 5N · 422 €</div><div class="hist-pills"><span class="hpill hp-fh">Ferienhaus</span></div></div><span class="hist-pers">Familie</span></div>
+      <div class="hist-row cruise" data-type="cruise"><div class="hist-dot"></div><span class="hist-em">🚢</span><div class="hist-content"><div class="hist-name">AIDAprima Norwegen</div><div class="hist-loc">Hamburg → Ålesund → Geiranger → Bergen → Hamburg · 1.998 €</div><div class="hist-pills"><span class="hpill hp-cruise">Kreuzfahrt</span></div></div><span class="hist-pers">Familie</span></div>
+      <div class="hist-row ferienhaus" data-type="ferienhaus"><div class="hist-dot"></div><span class="hist-em">🏡</span><div class="hist-content"><div class="hist-name">Sonne und Strand, Følle Strand</div><div class="hist-loc">Rønde, Dänemark · 7N</div><div class="hist-pills"><span class="hpill hp-fh">Ferienhaus</span></div></div><span class="hist-pers">Familie</span></div>
+
+      <div class="hist-year-label">2025</div>
+      <div class="hist-row ferienhaus" data-type="ferienhaus"><div class="hist-dot"></div><span class="hist-em">🏡</span><div class="hist-content"><div class="hist-name">Residence Berger Duinen</div><div class="hist-loc">Bergen aan Zee, NL · 4N</div><div class="hist-pills"><span class="hpill hp-fh">Ferienhaus</span></div></div><span class="hist-pers">Familie</span></div>
+      <div class="hist-row ferienhaus" data-type="ferienhaus"><div class="hist-dot"></div><span class="hist-em">🏡</span><div class="hist-content"><div class="hist-name">De Strabrechtse Vennen</div><div class="hist-loc">Niederlande · 7N</div><div class="hist-pills"><span class="hpill hp-fh">Ferienhaus</span></div></div><span class="hist-pers">Familie</span></div>
+      <div class="hist-row ferienhaus" data-type="ferienhaus"><div class="hist-dot"></div><span class="hist-em">🏡</span><div class="hist-content"><div class="hist-name">EuroParcs Esonstad</div><div class="hist-loc">Niederlande · 4N</div><div class="hist-pills"><span class="hpill hp-fh">Ferienhaus</span></div></div><span class="hist-pers">Familie</span></div>
+
+      <div class="hist-year-label">2026</div>
+      <div class="hist-row ferienhaus" data-type="ferienhaus"><div class="hist-dot"></div><span class="hist-em">🚤</span><div class="hist-content"><div class="hist-name">De Reeuwijkse Plassen</div><div class="hist-loc">Niederlande · 4-Pers.-Wasserhaus #191 · 30.03–03.04</div><div class="hist-pills"><span class="hpill hp-fh">Ferienhaus</span></div></div><span class="hist-pers">Familie</span></div>
+      <div class="hist-row" data-type="hotel" style="border:2px dashed var(--gold);background:var(--gold-light);"><div class="hist-dot" style="background:var(--gold)"></div><span class="hist-em">❓</span><div class="hist-content"><div class="hist-name" style="color:var(--gold)">Sommerurlaub 2026 – noch offen!</div><div class="hist-loc">ab 13. Juli · max. 3.600 €</div><div class="hist-pills"><span class="hpill" style="background:var(--gold);color:#fff">OFFEN</span></div></div><span class="hist-pers">Familie</span></div>
+    </div>
+    <div style="height:24px;"></div>
+  </div>
+</div>
+
+<!-- ======== INFO ======== -->
+<div id="tab-info" class="tab-pane" style="display:none;">
+  <div class="main" style="padding-top:16px;">
+    <div class="info-2col">
+      <div class="info-box">
+        <div class="info-box-title">❌ Ausschlussliste</div>
+        <ul class="info-ul">
+          <li class="excl">Türkei (Lea: raus)</li>
+          <li class="excl">Ägypten (Lea: raus)</li>
+          <li class="excl">Dänemark im Sommer</li>
+          <li class="excl">Kroatien (überfüllt)</li>
+          <li class="excl">Griechenland (Kindersitz-Problem Korfu)</li>
+          <li class="excl">AIDA Norwegen (2024 gemacht)</li>
+          <li class="excl">Kein Umsteigeflug</li>
+          <li class="excl">Kein anderer Flughafen als HAM/HAJ</li>
+          <li class="excl">Unter 4 Sterne</li>
+        </ul>
+      </div>
+      <div class="info-box">
+        <div class="info-box-title">✅ Reiseprofil</div>
+        <ul class="info-ul">
+          <li>Direktflug HAM oder HAJ</li>
+          <li>Mind. 4 Sterne Hotel</li>
+          <li>Pool als Basis · täglich Mietwagen</li>
+          <li>Felix 3,5J: Kinderclub, Strand, Pool</li>
+          <li>EU-Kindersitz Pflicht bei Mietwagen</li>
+          <li>Lea: HP/AI · wenig Überraschungen</li>
+          <li>Caddy 2012 = Dienstwagen HHGmbH</li>
+          <li>Budget max. 3.600 € für 3 Personen</li>
+          <li>Frieda (Hund, blind) bleibt zuhause</li>
+        </ul>
+      </div>
+      <div class="felix-card">
+        <div class="felix-card-title">📅 Felix-Alterskurve – was geht wann?</div>
+        <div class="felix-row"><div class="felix-badge">2026 · 3,5J</div><div class="felix-body"><strong>Jetzt:</strong> Strand, Pool, Kinderclub ab 3J, kurze Bootstouren. Max. 6h Flug.</div></div>
+        <div class="felix-row"><div class="felix-badge">2027 · 4J</div><div class="felix-body"><strong>Bald:</strong> + Burgen (Château de Gruyères!), Astrid Lindgrens Welt Schweden, Tierparks.</div></div>
+        <div class="felix-row"><div class="felix-badge">2028-29 · 5-6J</div><div class="felix-body"><strong>Madeira-Fenster:</strong> Levadas, Porto Moniz. Schweden Schären. Norwegen Natur.</div></div>
+        <div class="felix-row" style="margin-bottom:0"><div class="felix-badge">2030+ · 7J+</div><div class="felix-body"><strong>Träume:</strong> Bali, Lappland Nordlichter, Japan, Neuseeland.</div></div>
+      </div>
+      <div class="info-box info-full">
+        <div class="info-box-title">⚡ Nächste Schritte</div>
+        <div class="steps-list">
+          <div class="step-item"><div class="step-n">1</div><div class="step-t"><strong>AIDA-Termin prüfen:</strong> aida.de Route PMI07307 – Sardinien-Route 13.–16. Juli? Kinder 35% Rabatt. Korsika: 4.Juli (zu früh) oder 15.Aug.</div></div>
+          <div class="step-item"><div class="step-n">2</div><div class="step-t"><strong>Glamping ASAP:</strong> Union Lido/Cavallino, Punta Lunga/Vieste. acsi.eu + pitchup.com. Juli-Plätze laufen ab!</div></div>
+          <div class="step-item"><div class="step-n">3</div><div class="step-t"><strong>Hier abstimmen:</strong> Abstimmungs-Tab öffnen – jeder tippt Reaktionen. Dann sieht man's.</div></div>
+          <div class="step-item"><div class="step-n">4</div><div class="step-t"><strong>Sardinien buchen:</strong> Eurowings/Ryanair HAM→OLB + Club Hotel Baja Sardinia auf booking.com.</div></div>
+          <div class="step-item"><div class="step-n">5</div><div class="step-t"><strong>Falls Kanaren:</strong> Taurito Princess c.24.de/pr/F8F2FX – 13.–20.Juli, Kinderfestpreis aktiv.</div></div>
+        </div>
+      </div>
+    </div>
+    <div style="height:24px;"></div>
+  </div>
+</div>
+
+<!-- BOTTOM TABS (mobile only) -->
+<div class="bottom-tabs">
+  <button class="btab active" onclick="navTo('ideen',this)"><span class="btab-icon">🗺️</span>Ideen</button>
+  <button class="btab" onclick="navTo('abstimmung',this)"><span class="btab-icon">📊</span>Abstimmung</button>
+  <button class="btab" onclick="navTo('archiv',this)"><span class="btab-icon">📖</span>Archiv</button>
+  <button class="btab" onclick="navTo('info',this)"><span class="btab-icon">⚡</span>Info</button>
 </div>
 
 <script>
-// ============= DESTINATIONS DATA =============
-const DESTINATIONS_BUILTIN = [{"id": "sardinien", "emoji": "🏖️", "name": "Sardinien", "country": "🇮🇹 Italien", "sub": "Nordsardinien · Hotel 4★ · Mietwagen", "status": "TOP", "isRecommendation": true, "price": 3150, "priceLabel": "für 3 Pers. 7N", "priceBadge": "Im Budget ✓", "priceBadgeClass": "pb-mid", "scoreFelix": 100, "scoreLea": 80, "scoreCar": 100, "flight": "2h 20", "from": "HAM→OLB", "climate": "30–35°C", "available": "ab 13.Jul ✓", "highlight": "Karibik-Strände · EU-Kindersitz-Standard · Neuland", "pros": ["Direktflug HAM–Olbia 2:20h", "Traumstrände (La Pelosa, Principe)", "Lea hat Sardinien okayed", "Sehr kinderfreundlich"], "cons": ["30–35°C im Juli heiß", "Kein AI = Eigenplanung", "Hochsaison teuer + voll"], "note": "Hotels: Club Hotel Baja Sardinia (4★), Sporting Beach Hotel. Nordsardinien bevorzugen.", "felixMinAge": 0, "season": ["6", "7", "8", "9"]}, {"id": "aida-kreuzfahrt", "emoji": "🚢", "name": "AIDAcosma Kreuzfahrt", "country": "🇮🇹 Mittelmeer", "sub": "Korsika · Sardinien · Rom · Marseille · Barcelona", "status": "TOP", "price": 3320, "priceLabel": "Schiff + Flug HAM→PMI", "priceBadge": "Im Budget ✓", "priceBadgeClass": "pb-mid", "scoreFelix": 100, "scoreLea": 100, "scoreCar": 20, "flight": "2h", "from": "HAM→PMI", "climate": "25–28°C", "available": "Prüfen!", "highlight": "Kreuzfahrt-Wunsch erfüllt · Lea muss nichts planen · Vollpension", "pros": ["Korsika + Sardinien + Rom kombiniert", "Felix Kids-Club 3–6J + Rutschen", "AIDA kennt ihr seit 2 Reisen", "Kinder 35% Rabatt"], "cons": ["Korsika-Route: 4.Juli oder 15.Aug", "18.Juli = Gibraltar (weniger gut)", "Kein echtes Mietwagen-Feeling"], "note": "⚠️ aida.de Route PMI07307 direkt prüfen: Sardinien-Route 13.–16. Juli verfügbar?", "felixMinAge": 0, "season": ["5", "6", "7", "8", "9", "10"]}, {"id": "algarve", "emoji": "🌊", "name": "Algarve", "country": "🇵🇹 Portugal", "sub": "Carvoeiro · Lagos · Atlantik-Klippenküste", "status": "TOP", "price": 2950, "priceLabel": "günstigste TOP-Option", "priceBadge": "Budget-Tipp 💚", "priceBadgeClass": "pb-cheap", "scoreFelix": 100, "scoreLea": 65, "scoreCar": 100, "flight": "3h 30", "from": "HAM→FAO", "climate": "25–28°C", "available": "ab 13.Jul ✓", "highlight": "Mildestes Klima für Felix · Spektakuläre Mietwagen-Touren", "pros": ["25–28°C ideal für Kleinkind", "Cabo de São Vicente, Lagos, Sagres", "Carvoeiro, Praia da Luz – ruhig", "Günstigstes Budget aller TOPs"], "cons": ["Lea etwas zögerlich (neu)", "Weniger AI-Auswahl als Kanaren"], "note": "HP statt AI – ihr esst täglich unterwegs bei Mietwagen-Touren.", "felixMinAge": 0, "season": ["4", "5", "6", "7", "8", "9", "10"]}, {"id": "glamping", "emoji": "🏕️", "name": "Glamping Village", "country": "🇮🇹 Italien", "sub": "Bungalow direkt am Meer · Pool · Kinderanimation", "status": "NEW", "price": 2500, "priceLabel": "günstigste Option!", "priceBadge": "Preis-Tipp 💚", "priceBadgeClass": "pb-cheap", "scoreFelix": 100, "scoreLea": 70, "scoreCar": 80, "flight": "2h", "from": "HAM→VCE", "climate": "28–33°C", "available": "ASAP!", "highlight": "Tipp vom Meister: Bungalow am Meer mit Pool – unterschätzt!", "pros": ["Direkter Meerzugang + eigener Pool", "Kinderclub, Animation, Strand", "30–50% günstiger als Hotel", "Absolutes Neuland"], "cons": ["Kein 4★-Hotelkomfort", "Qualität je nach Anlage variabel", "Juli-Plätze schnell weg"], "note": "Top: Union Lido/Cavallino (Venetien), Punta Lunga/Vieste (Gargano). Buchung: acsi.eu · pitchup.com", "felixMinAge": 0, "season": ["5", "6", "7", "8", "9"]}, {"id": "schweiz", "emoji": "🏔️", "name": "Schweiz + Norditalien", "country": "🇨🇭 Schweiz", "sub": "Fribourg · Gruyères · Lago Maggiore", "status": "OK", "price": 2000, "priceLabel": "günstigster Kurztrip", "priceBadge": "Budget-Winner 💚", "priceBadgeClass": "pb-cheap", "scoreFelix": 60, "scoreLea": 90, "scoreCar": 80, "flight": "860 km", "from": "Caddy*", "climate": "22–28°C", "available": "Flexibel", "highlight": "Lea würde es sofort machen · Freunde besuchen · Château de Gruyères", "pros": ["Lea will Schweiz ausdrücklich", "Château de Gruyères – Felix findet Burgen spannend!", "Tagestour Lago Maggiore (2,5h)", "Freunde bei Fribourg = ggf. günstig"], "cons": ["860 km Caddy (Dienstwagen)", "Schweizer Hotels teuer", "Kein klassischer Strandurlaub"], "note": "*Caddy ist Dienstwagen HHGmbH – keine persönlichen Kosten. Alternativ: Flug HAM→GVA + Mietwagen.", "felixMinAge": 3, "season": ["5", "6", "7", "8", "9", "10"]}, {"id": "cote-azur", "emoji": "🇫🇷", "name": "Côte d'Azur", "country": "🇫🇷 Frankreich", "sub": "Nizza · Antibes · Familien-Feriendorf", "status": "OK", "price": 3000, "priceLabel": "Flug + Hotel/Feriendorf", "priceBadge": "Im Budget ✓", "priceBadgeClass": "pb-mid", "scoreFelix": 80, "scoreLea": 85, "scoreCar": 90, "flight": "2h", "from": "HAM→NCE", "climate": "28–33°C", "available": "ab 13.Jul ✓", "highlight": "Lea würde sofort Frankreich machen · Charmant", "pros": ["Lea mag Frankreich", "Nizza direkt ab Hamburg 2h", "Traumküste + Mietwagen (Monaco, Cannes)", "Familienfreundliche Feriendörfer"], "cons": ["Juli sehr teuer an der Côte d'Azur", "Wenig AI-Hotels"], "note": "Feriendorf-Tipp: Center Parcs Les Lacs de l'Escapade (Var) oder Antibes direkt.", "felixMinAge": 0, "season": ["5", "6", "7", "8", "9"]}, {"id": "taurito", "emoji": "🌴", "name": "Taurito Princess", "country": "🇪🇸 Gran Canaria", "sub": "TUI KIDS CLUB · All Inclusive", "status": "OK", "price": 3100, "priceLabel": "AI Pauschal inkl. Flug", "priceBadge": "Im Budget ✓", "priceBadgeClass": "pb-mid", "scoreFelix": 100, "scoreLea": 100, "scoreCar": 60, "flight": "5h", "from": "HAM→LPA", "climate": "25–28°C", "available": "ab 13.Jul ✓", "highlight": "Lea's ausdrücklicher Favorit · Felix Mini-Club ab 3J", "pros": ["Lea will es", "Felix Mini-Club + Kinderpool", "AI-Vollversorgung", "Wasserpark 5 Min entfernt"], "cons": ["4. Kanaren-Reise in 4 Jahren", "Till will was anderes", "AI-Bunker ohne echte Touren"], "note": "Link: c.24.de/pr/F8F2FX · Kinderfestpreis (2–12J) Mai–Sep 2026.", "felixMinAge": 3, "season": ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"]}, {"id": "fuerteventura", "emoji": "🏜️", "name": "Fuerteventura", "country": "🇪🇸 Kanaren", "sub": "Aldiana / Robinson · Ruhiger als GC", "status": "OK", "price": 3200, "priceLabel": "AI-Clubhotel", "priceBadge": "Im Budget ✓", "priceBadgeClass": "pb-mid", "scoreFelix": 90, "scoreLea": 80, "scoreCar": 60, "flight": "4h 30", "from": "HAM→FUE", "climate": "24–28°C", "available": "ab 13.Jul ✓", "highlight": "Ruhigste Kanareninseln · Riesige Sandstrände", "pros": ["Weniger touristisch als GC", "Aldiana/Robinson Club-Konzept", "Riesige flache Strände für Felix"], "cons": ["Kanaren = nochmal dasselbe", "Windig (Kitesurf-Destination)"], "felixMinAge": 0, "season": ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"]}, {"id": "menorca", "emoji": "🏝️", "name": "Menorca", "country": "🇪🇸 Balearen", "sub": "Ruhigste Baleareninsel · Cala Galdana", "status": "OK", "price": 2900, "priceLabel": "HP 4★ + Flug", "priceBadge": "Günstig ✓", "priceBadgeClass": "pb-cheap", "scoreFelix": 85, "scoreLea": 75, "scoreCar": 90, "flight": "2h 30", "from": "HAM→MAH", "climate": "28–33°C", "available": "ab 13.Jul ✓", "highlight": "Ruhiger als Mallorca · Türkises Wasser", "pros": ["Ruhiger als Mallorca + Ibiza", "Biosphärenreservat – sauber", "Schöne Buchten mit Mietwagen"], "cons": ["Weniger Kinderclub-Angebot", "Sehr heiß im Juli"], "felixMinAge": 0, "season": ["5", "6", "7", "8", "9", "10"]}, {"id": "kapverden", "emoji": "🌍", "name": "Kapverden", "country": "🌍 Atlantik", "sub": "Sal · Boa Vista · AI-Resort · Exotisch", "status": "OK", "price": 3400, "priceLabel": "AI Direktflug", "priceBadge": "Knapp am Budget", "priceBadgeClass": "pb-pricey", "scoreFelix": 80, "scoreLea": 75, "scoreCar": 40, "flight": "6h", "from": "HAM→SID", "climate": "27–30°C", "available": "ok", "highlight": "Exotisch ohne langen Flug · Kilometer-Strände", "pros": ["Direktflug 6h – kein Umsteigen", "Riesige flache Strände (Felix-Gold)", "RIU/Iberostar All Inclusive", "Echtes Neuland"], "cons": ["Knapp am Budget", "Wenig Mietwagen-Sightseeing", "Windige Insel"], "felixMinAge": 2, "season": ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"]}, {"id": "malta", "emoji": "⛪", "name": "Malta", "country": "🇲🇹 Malta", "sub": "Gozo · St. Julian's · Familienhotel 4★", "status": "OK", "price": 2400, "priceLabel": "günstig für Europa", "priceBadge": "Preis-Tipp 💚", "priceBadgeClass": "pb-cheap", "scoreFelix": 75, "scoreLea": 70, "scoreCar": 75, "flight": "3h", "from": "HAM→MLA", "climate": "30–34°C", "available": "ab 13.Jul ✓", "highlight": "Kleinste Insel Europas · EU · Günstig · Englisch", "pros": ["Direktflug 3h, günstig", "EU-Standards, kein Visum", "Gozo für Mietwagen-Touren"], "cons": ["Kaum Sandstrand (Felsküste)", "Sehr heiß + touristisch im Juli"], "felixMinAge": 0, "season": ["4", "5", "6", "7", "8", "9", "10"]}, {"id": "lanzarote", "emoji": "🌋", "name": "Lanzarote", "country": "🇪🇸 Kanaren", "sub": "Vulkaninsel · Puerto del Carmen", "status": "OK", "price": 2800, "priceLabel": "HP + Flug", "priceBadge": "Günstig ✓", "priceBadgeClass": "pb-cheap", "scoreFelix": 80, "scoreLea": 70, "scoreCar": 80, "flight": "4h 45", "from": "HAM→ACE", "climate": "25–28°C", "available": "ab 13.Jul ✓", "highlight": "Ruhigste Kanareninseln · Vulkan-Landschaft · César Manrique", "pros": ["Ruhiger als GC/Teneriffa", "Timanfaya Vulkan per Mietwagen", "Passat-Klima: 25–28°C"], "cons": ["Kanaren = schon dreimal", "Weniger Kinderclub-Auswahl"], "felixMinAge": 0, "season": ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"]}, {"id": "costa-sol", "emoji": "🌞", "name": "Costa del Sol / Málaga", "country": "🇪🇸 Andalusien", "sub": "Nerja · Marbella · Direktflug HAM", "status": "OK", "price": 2700, "priceLabel": "HP + Direktflug", "priceBadge": "Günstig ✓", "priceBadgeClass": "pb-cheap", "scoreFelix": 80, "scoreLea": 70, "scoreCar": 90, "flight": "3h 20", "from": "HAM→AGP", "climate": "32–38°C", "available": "ab 13.Jul ✓", "highlight": "Günstig · Andalusien Mietwagen-Touren", "pros": ["Direktflug HAM→Málaga 3h20", "Nerja (schön + ruhig)", "Mietwagen: Granada, Alhambra, Ronda"], "cons": ["32–38°C im Juli sehr heiß", "Viele Touristenstädte"], "felixMinAge": 0, "season": ["4", "5", "6", "9", "10"]}, {"id": "msc-kreuzfahrt", "emoji": "🛳️", "name": "MSC / TUI Cruises", "country": "🚢 Mittelmeer", "sub": "Alternative zu AIDA", "status": "MAYBE", "price": 3000, "priceLabel": "inkl. Flug", "priceBadge": "Im Budget", "priceBadgeClass": "pb-mid", "scoreFelix": 90, "scoreLea": 80, "scoreCar": 20, "flight": "2h", "from": "Flug FCO/VCE", "climate": "25–30°C", "available": "Prüfen", "highlight": "Alternative Reederei · Evtl. günstigere Routen", "pros": ["MSC Grandiosa familienfreundlich", "Evtl. günstigere Kabinen", "Mein Schiff deutschsprachig"], "cons": ["Kein AIDA-Erfahrungsvorteil", "Kinderprogramm variiert"], "felixMinAge": 0, "season": ["5", "6", "7", "8", "9", "10"]}, {"id": "korsika", "emoji": "⛰️", "name": "Korsika direkt", "country": "🇫🇷 Frankreich", "sub": "Palombaggia · Porto-Vecchio · Bonifacio", "status": "MAYBE", "price": 3200, "priceLabel": "Ferienwohnung + Flug", "priceBadge": "Im Budget", "priceBadgeClass": "pb-mid", "scoreFelix": 70, "scoreLea": 70, "scoreCar": 100, "flight": "via Paris", "from": "Umsteigen!", "climate": "28–32°C", "available": "Hochpreis", "highlight": "Schönste Strände Europas · Lea hat Korsika okayed", "pros": ["Palombaggia: traumhaft", "Lea okay für Korsika"], "cons": ["Kein Direktflug ab HAM/HAJ", "Hochpreisinsel im Sommer"], "note": "Besser als AIDA-Stopp in Ajaccio als Kreuzfahrt-Erlebnis.", "felixMinAge": 0, "season": ["5", "6", "7", "8", "9"]}, {"id": "madeira", "emoji": "🌺", "name": "Madeira", "country": "🇵🇹 Portugal", "sub": "Dritter Anlauf · Levadas · Porto Moniz", "status": "SPÄTER", "price": 3000, "priceLabel": "Flug + Hotel HP", "priceBadge": "Im Budget", "priceBadgeClass": "pb-mid", "scoreFelix": 40, "scoreLea": 80, "scoreCar": 100, "flight": "4h 30", "from": "HAM→FNC", "climate": "22–25°C", "available": "2028?", "highlight": "Lea: \"wenn Felix älter ist\" · 2× Corona-Storno · 3. Anlauf!", "pros": ["22–25°C – mildestes Klima", "Mietwagen-Paradies (Levadas)", "Vertraut – 2× geplant gewesen"], "cons": ["Kaum Sandstrand für Felix", "Lea: explizit \"warten bis Felix größer\""], "note": "📅 Ab Felix 5J+ (ca. 2028/29)", "felixMinAge": 5, "season": ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"]}, {"id": "schweden", "emoji": "🦌", "name": "Schweden", "country": "🇸🇪 Schweden", "sub": "Bohuslän · Astrid Lindgrens Welt", "status": "SPÄTER", "price": 2800, "priceLabel": "Ferienhäuser + Mietwagen", "priceBadge": "Günstig ✓", "priceBadgeClass": "pb-cheap", "scoreFelix": 85, "scoreLea": 50, "scoreCar": 100, "flight": "1h 20", "from": "HAM→GOT", "climate": "18–24°C", "available": "2027", "highlight": "Till's Herzensthema · Astrid Lindgrens Welt!", "pros": ["Astrid Lindgrens Welt (Felix mit 4J+)", "Direktflug HAM→Göteborg 1:20h", "Natur pur: Seen, Wälder, Schären"], "cons": ["Lea: \"nicht meine Vorstellung von Sommerurlaub\"", "Wetter wechselhaft"], "note": "📅 Ab Felix 4J (ca. 2027) – Astrid Lindgrens Welt!", "felixMinAge": 4, "season": ["6", "7", "8"]}, {"id": "bali", "emoji": "🌴", "name": "Bali", "country": "🇮🇩 Indonesien", "sub": "Jenny's Verbindung · Ubud · Seminyak", "status": "SPÄTER", "price": 6000, "priceLabel": "Flug + Villa", "priceBadge": "Über Budget", "priceBadgeClass": "pb-pricey", "scoreFelix": 50, "scoreLea": 95, "scoreCar": 80, "flight": "~14h", "from": "Umsteigen", "climate": "28–32°C", "available": "2030+", "highlight": "Lea's Freundin Jenny hat Mann aus Bali", "pros": ["Traumziel für beide", "Günstige Luxusvillen mit Pool", "Jenny als Insider-Kontakt"], "cons": ["Langer Flug + Zeitzone (+6h)", "Gesundheit/Impfungen", "Aktuell zu teuer"], "note": "📅 Ab Felix 7–8J (ca. 2030)", "felixMinAge": 7, "season": ["4", "5", "6", "7", "8", "9"]}];
-
-// ============= HISTORY DATA =============
-const HISTORY = [
-  {year:2015,emoji:"🇬🇧",dest:"Zimmer in London (Bermondsey)",loc:"London, UK · Airbnb bei Gordon",type:"airbnb",pers:"Till + Bruder Jasper",date:"26.–31. Aug. · 5N"},
-  {year:2016,emoji:"🌲",dest:"A-Frame Cabin in Sulzfeld",loc:"Feriendorf Sulzfeld, Deutschland",type:"airbnb",pers:"Till solo",date:"5.–10. Sept. · 5N"},
-  {year:2016,emoji:"🇵🇹",dest:"Porto – Zimmer in Baixa",loc:"Porto, Portugal",type:"airbnb",pers:"Till solo",date:"26.–29. Sept. · 3N"},
-  {year:2016,emoji:"🇳🇱",dest:"Kortenhoef (Niederlande)",loc:"Kortenhoef, NL",type:"airbnb",pers:"Till solo",date:"1.–3. Okt. · 2N"},
-  {year:2017,emoji:"🇵🇹",dest:"Lissabon (Anjos)",loc:"Lisboa, Portugal",type:"airbnb",pers:"Till solo",date:"26.–28. Sept. · 2N"},
-  {year:2017,emoji:"🌺",dest:"Funchal, Madeira (8N)",loc:"Funchal, Madeira",type:"airbnb",pers:"Till solo",date:"28. Sept.–6. Okt. · 8N"},
-  {year:2017,emoji:"🍷",dest:"Vila Nova de Gaia / Porto",loc:"Porto / Douro, Portugal",type:"airbnb",pers:"Till solo",date:"6.–10. Okt. · 4N"},
-  {year:2018,emoji:"🇸🇪",dest:"Sunne, Värmland – Hochzeit",loc:"Sunne, Schweden · Till schwärmt seitdem",type:"family",pers:"Till + Familie",date:"Sommer"},
-  {year:2019,emoji:"🇬🇧",dest:"Greater London (Battersea)",loc:"London, UK · bei Jilly",type:"airbnb",pers:"Till + Lea",date:"22.–25. März · 3N"},
-  {year:2019,emoji:"🌴",dest:"Vanilla Garden · Teneriffa",loc:"Playa de las Americas · 4★ HP",type:"hotel",pers:"Till + Lea",date:"31.07–07.08 · 7N · #41629995"},
-  {year:2019,emoji:"🇩🇰",dest:"Oksbøl Ferienhaus",loc:"Oksbøl, Dänemark",type:"airbnb",pers:"Till + Lea",date:"29.Okt.–2.Nov. · 4N"},
-  {year:2020,emoji:"🚤",dest:"Waterside Cabin Vinkeveen",loc:"Vinkeveen (nahe Amsterdam), NL",type:"airbnb",pers:"Till + Lea",date:"22.–29. Aug. · 7N"},
-  {year:2021,emoji:"🌴",dest:"Radisson Blu Gran Canaria",loc:"Patalavaca · 5★ HP",type:"hotel",pers:"Till + Lea",date:"21.–28.07 · 7N · #47201487"},
-  {year:2022,emoji:"🌴",dest:"Dreams Jardin Tropical",loc:"Costa Adeje · Teneriffa · 4★ HP · 3.276 €",type:"hotel",pers:"Till + Lea",date:"08.–15.07 · 7N · #12852050"},
-  {year:2023,emoji:"🚢",dest:"AIDAblu Adria-Kreuzfahrt",loc:"Korfu · Triest · Zadar · Kotor · Dubrovnik · Bari",type:"cruise",pers:"Till+Lea+Felix+Astrid",date:"13.–20.08 · 7N · 5.557 € · #14997795"},
-  {year:2023,emoji:"🏨",dest:"Acharavi Beach Hotel · Korfu",loc:"Acharavi, GR · 546 €",type:"hotel",pers:"Till+Lea+Felix",date:"20.–22.08 · 2N · #410637840"},
-  {year:2023,emoji:"🏡",dest:"MarinaPark Bad Nederrijn",loc:"Maurik, NL",type:"ferienhaus",pers:"Familie",date:"01.–05.10 · 4N"},
-  {year:2024,emoji:"🏡",dest:"EuroParcs De Utrechtse Heuvelrug",loc:"Maarn, NL · 422 €",type:"ferienhaus",pers:"Familie",date:"23.–28.03 · 5N"},
-  {year:2024,emoji:"🚢",dest:"AIDAprima Norwegen",loc:"HAM→Ålesund→Geiranger→Bergen→HAM",type:"cruise",pers:"Familie",date:"15.–22.06 · 7N · 1.998 € · #15808257"},
-  {year:2024,emoji:"🏡",dest:"Sonne und Strand, Følle Strand",loc:"Rønde, Dänemark",type:"ferienhaus",pers:"Familie",date:"14.–21.09 · 7N"},
-  {year:2025,emoji:"🏡",dest:"Residence Berger Duinen",loc:"Bergen aan Zee, NL",type:"ferienhaus",pers:"Familie",date:"24.–28.03 · 4N"},
-  {year:2025,emoji:"🏡",dest:"De Strabrechtse Vennen",loc:"Niederlande · Haus E8",type:"ferienhaus",pers:"Familie",date:"14.–21.07 · 7N"},
-  {year:2025,emoji:"🏡",dest:"EuroParcs Esonstad",loc:"Niederlande",type:"ferienhaus",pers:"Familie",date:"27.–31.10 · 4N"},
-  {year:2026,emoji:"🚤",dest:"De Reeuwijkse Plassen",loc:"NL · 4-Pers.-Wasserhaus #191",type:"ferienhaus",pers:"Familie",date:"30.03–03.04 · 4N"},
-];
-
-// ============= AUTH =============
-(function(){if(sessionStorage.getItem('f24')==='1')document.getElementById('gate').style.display='none';})();
+// ===== AUTH =====
+(function(){if(sessionStorage.getItem('f24')==='1'){document.getElementById('gate').style.display='none';init();}})();
 function auth(){
-  if(document.getElementById('pw').value==='frediurlaub26'){
+  const v=document.getElementById('pw').value;
+  if(v==='frediurlaub26'){
     document.getElementById('gate').style.display='none';
     sessionStorage.setItem('f24','1');
     init();
   } else {
-    document.getElementById('pw-err').style.display='block';
+    document.getElementById('pw-err').textContent='Falsches Passwort. Tipp: Frag Frieda! 🐾';
     document.getElementById('pw').style.borderColor='var(--coral)';
-    setTimeout(()=>document.getElementById('pw').style.borderColor='',1500);
+    setTimeout(()=>{document.getElementById('pw').style.borderColor='';},1500);
   }
 }
 
-// ============= USER PROFILE =============
-function getCurrentUser(){return localStorage.getItem('f24_user')||'Till';}
-function setUser(u){
-  localStorage.setItem('f24_user',u);
-  document.getElementById('user-name').textContent=u;
-  document.getElementById('opt-till').classList.toggle('active',u==='Till');
-  document.getElementById('opt-lea').classList.toggle('active',u==='Lea');
-  closeModal('user-modal');
-  renderCards();
-  showToast('👤 Profil: '+u);
-}
-function switchUser(){
-  const cur=getCurrentUser();
-  document.getElementById('opt-till').classList.toggle('active',cur==='Till');
-  document.getElementById('opt-lea').classList.toggle('active',cur==='Lea');
-  document.getElementById('user-modal').classList.add('open');
+// ===== INIT =====
+function init(){
+  updateStats();
+  renderAllVotes();
+  buildVoteTable();
+  renderSubmissions();
+  // Countdown to July 13
+  const target=new Date('2026-07-13');
+  const diff=Math.max(0,Math.ceil((target-new Date())/(1000*60*60*24)));
+  const el=document.getElementById('stat-days');
+  if(el)el.textContent=diff;
 }
 
-// ============= NAV =============
+// ===== NAV =====
 function navTo(tab,btn){
-  document.querySelectorAll('.tab-content').forEach(t=>t.classList.remove('active'));
-  document.querySelectorAll('.bnav-item').forEach(b=>b.classList.remove('active'));
-  document.getElementById('tab-'+tab).classList.add('active');
+  document.querySelectorAll('.tab-pane').forEach(p=>p.style.display='none');
+  document.querySelectorAll('.btab,.nav-link').forEach(b=>b.classList.remove('active'));
+  document.getElementById('tab-'+tab).style.display='block';
   btn.classList.add('active');
-  if(tab==='ranking')renderRanking();
-  if(tab==='eigene')renderOwn();
-  if(tab==='archiv')renderHistory();
+  // sync both navbars
+  document.querySelectorAll(`[onclick*="navTo('${tab}'"]`).forEach(b=>b.classList.add('active'));
+  if(tab==='abstimmung')buildVoteTable();
 }
 
-// ============= DATA ACCESS =============
-function getOwn(){return JSON.parse(localStorage.getItem('f24_own')||'[]');}
-function saveOwn(arr){localStorage.setItem('f24_own',JSON.stringify(arr));}
-function getRatings(){return JSON.parse(localStorage.getItem('f24_ratings')||'{}');}
-function saveRatings(r){localStorage.setItem('f24_ratings',JSON.stringify(r));}
-function getComments(){return JSON.parse(localStorage.getItem('f24_comments')||'{}');}
-function saveComments(c){localStorage.setItem('f24_comments',JSON.stringify(c));}
-
-function getAllDestinations(){
-  return [...DESTINATIONS_BUILTIN, ...getOwn()];
-}
-
-// ============= STAR RATING =============
-function setRating(destId,user,stars){
-  const r=getRatings();
-  if(!r[destId])r[destId]={};
-  r[destId][user]=r[destId][user]===stars?0:stars;
-  saveRatings(r);
-  renderCards();
-  if(document.getElementById('tab-ranking').classList.contains('active'))renderRanking();
-  updateStats();
-  showToast(stars+' Sterne von '+user);
-}
-
-function getAvgRating(destId){
-  const r=getRatings()[destId]||{};
-  const vals=Object.values(r).filter(v=>v>0);
-  return vals.length?(vals.reduce((a,b)=>a+b,0)/vals.length):0;
-}
-
-function renderStars(destId){
-  const r=getRatings()[destId]||{};
-  const avg=getAvgRating(destId);
-  return `<div class="rating-section">
-    <div class="rating-row">
-      <span class="rating-who">Till</span>
-      <div class="stars">${[1,2,3,4,5].map(s=>`<button class="star ${(r.Till||0)>=s?'filled':''}" onclick="setRating('${destId}','Till',${s})">★</button>`).join('')}</div>
-    </div>
-    <div class="rating-row">
-      <span class="rating-who">Lea</span>
-      <div class="stars">${[1,2,3,4,5].map(s=>`<button class="star ${(r.Lea||0)>=s?'filled':''}" onclick="setRating('${destId}','Lea',${s})">★</button>`).join('')}</div>
-    </div>
-  </div>
-  <div class="rating-summary">
-    <div class="avg-num">${avg.toFixed(1)}</div>
-    <div class="avg-lbl">Ø Sterne</div>
-  </div>`;
-}
-
-// ============= COMMENTS =============
-function toggleComments(destId){
-  const body=document.getElementById('cm-body-'+destId);
-  const tog=document.getElementById('cm-tog-'+destId);
-  body.classList.toggle('open');
-  tog.classList.toggle('open');
-}
-
-function addComment(destId){
-  const inp=document.getElementById('cm-inp-'+destId);
-  const txt=inp.value.trim();
-  if(!txt)return;
-  const c=getComments();
-  if(!c[destId])c[destId]=[];
-  c[destId].push({
-    user:getCurrentUser(),
-    text:txt,
-    ts:Date.now()
+// ===== FILTER CARDS =====
+function fc(status,btn){
+  document.querySelectorAll('#filter-chips .fchip').forEach(c=>c.classList.remove('active'));
+  btn.classList.add('active');
+  const map={LATER:'LATER'};
+  document.querySelectorAll('.hcard').forEach(c=>{
+    const s=c.dataset.status;
+    const show=status==='ALL'||(status==='OK'&&(s==='OK'||s==='NEW'))||s===status;
+    c.style.display=show?'':'none';
   });
-  saveComments(c);
-  inp.value='';
-  renderCards();
-  updateStats();
-  setTimeout(()=>{
-    const body=document.getElementById('cm-body-'+destId);
-    const tog=document.getElementById('cm-tog-'+destId);
-    if(body){body.classList.add('open');tog.classList.add('open');}
-  },50);
-  showToast('💬 Kommentar gepostet');
 }
 
-function deleteComment(destId,idx){
-  if(!confirm('Diesen Kommentar löschen?'))return;
-  const c=getComments();
-  c[destId].splice(idx,1);
-  saveComments(c);
-  renderCards();
-}
-
-function formatTime(ts){
-  const d=new Date(ts);
-  const now=new Date();
-  const diff=now-d;
-  if(diff<60000)return'gerade';
-  if(diff<3600000)return Math.floor(diff/60000)+' Min';
-  if(diff<86400000)return Math.floor(diff/3600000)+' Std';
-  return d.toLocaleDateString('de',{day:'2-digit',month:'short'});
-}
-
-function renderComments(destId){
-  const c=getComments()[destId]||[];
-  const cur=getCurrentUser();
-  return `<button class="comments-toggle" id="cm-tog-${destId}" onclick="toggleComments('${destId}')">
-    <span class="arr">▸</span>
-    💬 Kommentare
-    <span class="ccount">${c.length}</span>
-  </button>
-  <div class="comments-body" id="cm-body-${destId}">
-    ${c.length===0?'<div class="comment-empty">Noch keine Kommentare. Macht den Anfang!</div>':c.map((cm,i)=>`
-      <div class="comment ${cm.user.toLowerCase()}">
-        <div class="comment-head">
-          <span class="comment-who">${cm.user}</span>
-          <div>
-            <span class="comment-time">${formatTime(cm.ts)}</span>
-            ${cm.user===cur?`<button class="comment-del" onclick="deleteComment('${destId}',${i})" title="Löschen">×</button>`:''}
-          </div>
-        </div>
-        <div class="comment-text">${escapeHtml(cm.text)}</div>
-      </div>
-    `).join('')}
-    <div class="comment-input-row">
-      <input class="comment-input" id="cm-inp-${destId}" placeholder="Schreib was als ${cur}..." onkeydown="if(event.key==='Enter')addComment('${destId}')">
-      <button class="comment-btn" onclick="addComment('${destId}')">Posten</button>
-    </div>
-  </div>`;
-}
-
-function escapeHtml(s){return String(s).replace(/[&<>"']/g,c=>({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'})[c]);}
-
-// ============= RENDER CARDS =============
-let currentFilter='ALL';
-
-function filterStatus(status,btn){
-  document.querySelectorAll('#tab-ideen .filter-row .chip').forEach(p=>p.classList.remove('active'));
+// ===== VIEW TOGGLE =====
+function setView(mode,btn){
+  document.querySelectorAll('.view-btn').forEach(b=>b.classList.remove('active'));
   btn.classList.add('active');
-  currentFilter=status;
-  renderCards();
+  const grid=document.getElementById('scroll-top');
+  const wrap=document.getElementById('wrap-top');
+  if(mode==='grid'){
+    grid.className='cards-grid';
+    wrap.querySelectorAll('.scroll-arrow').forEach(a=>a.style.display='none');
+  } else {
+    grid.className='cards-scroll';
+    wrap.querySelectorAll('.scroll-arrow').forEach(a=>a.style.display='');
+  }
 }
 
-function renderCards(){
-  const all=getAllDestinations();
-  const sort=document.getElementById('sort-select').value;
-  let filtered=all;
+// ===== SCROLL =====
+function scroll_left(id){document.getElementById(id).scrollBy({left:-280,behavior:'smooth'});}
+function scroll_right(id){document.getElementById(id).scrollBy({left:280,behavior:'smooth'});}
+function scrollToCard(id){
+  const card=document.querySelector(`[data-id="${id}"]`);
+  if(card){setTimeout(()=>card.scrollIntoView({behavior:'smooth',block:'center'}),100);}
+}
 
-  if(currentFilter==='OWN'){
-    filtered=all.filter(d=>d.isOwn);
-  } else if(currentFilter!=='ALL'){
-    filtered=all.filter(d=>d.status===currentFilter);
-  }
-
-  // Sort
-  if(sort==='ranking'){
-    filtered.sort((a,b)=>{
-      const ra=getAvgRating(a.id),rb=getAvgRating(b.id);
-      if(rb!==ra)return rb-ra;
-      return (a.price||0)-(b.price||0);
-    });
-  } else if(sort==='status'){
-    const order={'TOP':0,'NEW':1,'OK':2,'MAYBE':3,'SPÄTER':4,'NEIN':5};
-    filtered.sort((a,b)=>(order[a.status]||9)-(order[b.status]||9));
-  } else if(sort==='price-asc'){
-    filtered.sort((a,b)=>(a.price||9999)-(b.price||9999));
-  } else if(sort==='price-desc'){
-    filtered.sort((a,b)=>(b.price||0)-(a.price||0));
-  } else if(sort==='name'){
-    filtered.sort((a,b)=>a.name.localeCompare(b.name));
-  } else if(sort==='newest'){
-    filtered.sort((a,b)=>{
-      if(a.isOwn&&!b.isOwn)return -1;
-      if(!a.isOwn&&b.isOwn)return 1;
-      return (b.createdAt||0)-(a.createdAt||0);
-    });
-  }
-
-  const html=filtered.map((d,idx)=>renderCard(d,sort==='ranking'?idx:null)).join('');
-  document.getElementById('dg').innerHTML=html||'<div class="empty"><div class="empty-icon">🔍</div><div class="empty-title">Keine Treffer</div><div class="empty-sub">Filter ändern oder neue Idee einreichen.</div></div>';
+// ===== SORT =====
+function sortCards(mode){/* placeholder for future sort logic */}
 
+// ===== FAV =====
+function toggleFav(btn,id){
+  const liked=btn.classList.toggle('liked');
+  btn.textContent=liked?'❤️':'🤍';
   updateStats();
-  updateOwnBadge();
+  showToast(liked?'❤️ Zu Favoriten hinzugefügt':'Favorit entfernt');
+}
+function updateStats(){
+  const favs=document.querySelectorAll('.hcard-fav.liked').length;
+  const el=document.getElementById('stat-favs');
+  if(el)el.textContent=favs;
 }
 
-function renderCard(d,rank){
-  const avg=getAvgRating(d.id);
-  const isOwn=d.isOwn===true;
-  const rankBadge=rank!==null&&avg>0?`<div class="rank-badge show ${rank===0?'top1':rank===1?'top2':rank===2?'top3':''}">#${rank+1}</div>`:'';
+// ===== VOTES =====
+const ALL_DESTS=[
+  {id:'sardinien',name:'Sardinien',country:'🇮🇹 Italien'},
+  {id:'aida',name:'AIDAcosma Kreuzfahrt',country:'🚢 Mittelmeer'},
+  {id:'algarve',name:'Algarve',country:'🇵🇹 Portugal'},
+  {id:'glamping',name:'Glamping Village IT',country:'🇮🇹 Italien'},
+  {id:'taurito',name:'Taurito Princess',country:'🇪🇸 Gran Canaria'},
+  {id:'cote-azur',name:"Côte d'Azur",country:'🇫🇷 Frankreich'},
+  {id:'schweiz',name:'Schweiz + Lago Maggiore',country:'🇨🇭/🇮🇹'},
+  {id:'fuerteventura',name:'Fuerteventura',country:'🇪🇸 Kanaren'},
+  {id:'menorca',name:'Menorca',country:'🇪🇸 Balearen'},
+  {id:'kapverden',name:'Kapverden',country:'🌍 Atlantik'},
+  {id:'malta',name:'Malta',country:'🇲🇹 Malta'},
+  {id:'lanzarote',name:'Lanzarote',country:'🇪🇸 Kanaren'},
+  {id:'costa-sol',name:'Costa del Sol',country:'🇪🇸 Andalusien'},
+  {id:'mallorca',name:'Mallorca',country:'🇪🇸 Balearen'},
+  {id:'madeira',name:'Madeira',country:'🇵🇹 Portugal'},
+  {id:'schweden',name:'Schweden',country:'🇸🇪 Schweden'},
+  {id:'bali',name:'Bali',country:'🇮🇩 Indonesien'},
+  {id:'lappland',name:'Lappland',country:'🇳🇴 Norwegen'},
+];
 
-  return `<div class="dest-card ${isOwn?'own':''}" data-status="${d.status}" data-id="${d.id}" id="card-${d.id}">
-    ${isOwn?'<div class="own-marker">💜 Eigener Vorschlag</div>':''}
-    ${rankBadge}
-    <div class="card-hdr" style="${isOwn?'padding-top:24px':''}">
-      <span class="dest-em">${d.emoji||'🌍'}</span>
-      <div class="dest-meta">
-        <div class="dest-name">${escapeHtml(d.name)}</div>
-        <div class="dest-sub">${escapeHtml(d.sub||d.country||'')}</div>
-      </div>
-      <div class="status-wrap">
-        <span class="sbadge s-${d.status}">${d.status}</span>
-        ${d.isRecommendation?'<span class="sbadge s-NEW">⭐ Empfehlung</span>':''}
-      </div>
-    </div>
-    ${d.price?`<div class="card-price">
-      <span class="price-main">~${d.price.toLocaleString('de')} €</span>
-      <span class="price-range">${escapeHtml(d.priceLabel||'')}</span>
-      ${d.priceBadge?`<span class="price-badge ${d.priceBadgeClass||'pb-mid'}">${escapeHtml(d.priceBadge)}</span>`:''}
-    </div>`:''}
-    ${d.scoreFelix!==undefined?`<div class="card-scores">
-      <div class="sc"><div class="sc-lbl">Felix</div><div class="sc-bar"><div class="sc-fill sc-f" style="width:${d.scoreFelix||50}%"></div></div></div>
-      <div class="sc"><div class="sc-lbl">Lea</div><div class="sc-bar"><div class="sc-fill sc-l" style="width:${d.scoreLea||50}%"></div></div></div>
-      <div class="sc"><div class="sc-lbl">Mietwagen</div><div class="sc-bar"><div class="sc-fill sc-m" style="width:${d.scoreCar||50}%"></div></div></div>
-    </div>`:''}
-    ${d.flight?`<div class="card-stats">
-      <div class="cstat"><span class="cstat-val">${escapeHtml(d.flight)}</span><span class="cstat-key">Flug</span></div>
-      <div class="cstat"><span class="cstat-val">${escapeHtml(d.from||'')}</span><span class="cstat-key">Von</span></div>
-      <div class="cstat"><span class="cstat-val">${escapeHtml(d.climate||'')}</span><span class="cstat-key">Klima</span></div>
-      <div class="cstat"><span class="cstat-val">${escapeHtml(d.available||'')}</span><span class="cstat-key">Verfügbar</span></div>
-    </div>`:''}
-    ${d.highlight||d.pros||d.note||d.why?`<div class="card-body">
-      ${d.highlight?`<div class="card-highlight">${escapeHtml(d.highlight)}</div>`:''}
-      ${d.why&&!d.highlight?`<div class="card-highlight">${escapeHtml(d.why)}</div>`:''}
-      ${(d.pros&&d.pros.length)||(d.cons&&d.cons.length)?`<div class="pros-cons">
-        <ul class="pro-list">${(d.pros||[]).map(p=>`<li>${escapeHtml(p)}</li>`).join('')}</ul>
-        <ul class="con-list">${(d.cons||[]).map(c=>`<li>${escapeHtml(c)}</li>`).join('')}</ul>
-      </div>`:''}
-      ${d.note?`<div class="card-note">${escapeHtml(d.note)}</div>`:''}
-      ${isOwn?`<div style="display:flex;gap:6px;margin-top:8px"><button onclick="editOwn('${d.id}')" style="background:var(--bg);border:1px solid var(--border);border-radius:6px;padding:4px 10px;font-size:11px;cursor:pointer;font-family:Outfit;color:var(--muted)">✏️ Bearbeiten</button><button onclick="deleteOwn('${d.id}')" style="background:var(--bg);border:1px solid var(--border);border-radius:6px;padding:4px 10px;font-size:11px;cursor:pointer;font-family:Outfit;color:var(--coral)">🗑 Löschen</button></div>`:''}
-    </div>`:''}
-    <div class="rating-bar">
-      ${renderStars(d.id)}
-    </div>
-    <div class="comments-section">
-      ${renderComments(d.id)}
-    </div>
-  </div>`;
+function getVotes(){return JSON.parse(localStorage.getItem('f24_v2')||'{}');}
+function saveVotes(v){localStorage.setItem('f24_v2',JSON.stringify(v));}
+
+function setVote(id,person,val){
+  const v=getVotes();
+  if(!v[id])v[id]={};
+  v[id][person]=v[id][person]===val?null:val;
+  saveVotes(v);
+  renderVoteFor(id);
+  buildVoteTable();
+  const emojis={love:'❤️ Will ich!',maybe:'🤔 Vielleicht',no:'❌ Nein danke'};
+  showToast(emojis[val]);
 }
 
-// ============= RANKING =============
-function renderRanking(){
-  const all=getAllDestinations();
-  const ranked=all.map(d=>({...d,avg:getAvgRating(d.id),ratingCount:Object.values(getRatings()[d.id]||{}).filter(v=>v>0).length}))
-    .filter(d=>d.avg>0)
-    .sort((a,b)=>b.avg-a.avg);
+function renderVoteFor(id){
+  ['till','lea'].forEach(p=>{
+    const el=document.getElementById(`vt-${id}-${p}`);
+    if(!el)return;
+    const v=getVotes()[id]||{};
+    const cur=v[p.charAt(0).toUpperCase()+p.slice(1)];
+    el.innerHTML=['love','maybe','no'].map(val=>{
+      const emoji=val==='love'?'❤️':val==='maybe'?'🤔':'❌';
+      const cls=cur===val?`v-${val}`:'';
+      return`<button class="vbtn ${cls}" onclick="setVote('${id}','${p.charAt(0).toUpperCase()+p.slice(1)}','${val}')" title="${emoji}">${emoji}</button>`;
+    }).join('');
+    const rm=document.getElementById(`vm-${id}`);
+    if(rm&&p==='lea'){
+      const tv=getVotes()[id]||{};
+      rm.textContent=getMatch(tv.Till,tv.Lea);
+    }
+  });
+}
 
-  if(ranked.length===0){
-    document.getElementById('ranking-list').innerHTML='<div class="empty"><div class="empty-icon">⭐</div><div class="empty-title">Noch keine Bewertungen</div><div class="empty-sub">Vergebt Sterne bei den Ideen-Karten – Ranking erscheint dann automatisch.</div></div>';
-    return;
-  }
+function getMatch(t,l){
+  if(!t&&!l)return'';
+  if(t==='love'&&l==='love')return'💚';
+  if((t==='love'||t==='maybe')&&(l==='love'||l==='maybe'))return'💛';
+  if(t==='no'&&l==='no')return'🔴';
+  if(t==='no'||l==='no')return'⚠️';
+  return'❓';
+}
 
-  const html=ranked.map((d,i)=>{
-    const r=getRatings()[d.id]||{};
-    const tStars=r.Till?'⭐'.repeat(r.Till):'–';
-    const lStars=r.Lea?'⭐'.repeat(r.Lea):'–';
-    return`<div class="rank-row" onclick="scrollToCard('${d.id}');navTo('ideen',document.querySelector('.bnav-item'))" style="cursor:pointer">
-      <div class="rank-num">#${i+1}</div>
-      <div>
-        <div class="rank-name"><span class="rank-emoji">${d.emoji}</span>${escapeHtml(d.name)}</div>
-        <div class="rank-meta">Till: ${tStars} · Lea: ${lStars}</div>
-      </div>
-      <div class="rank-price">${d.price?'~'+d.price.toLocaleString('de')+'€':'–'}</div>
-      <div class="rank-score">${d.avg.toFixed(1)}<span class="rank-stars">★</span></div>
+function renderAllVotes(){ALL_DESTS.forEach(d=>renderVoteFor(d.id));}
+
+function buildVoteTable(){
+  const tbl=document.getElementById('vote-table');
+  if(!tbl)return;
+  const v=getVotes();
+  const rows=ALL_DESTS.map(d=>{
+    const dv=v[d.id]||{};
+    const te=dv.Till==='love'?'❤️':dv.Till==='maybe'?'🤔':dv.Till==='no'?'❌':'–';
+    const le=dv.Lea==='love'?'❤️':dv.Lea==='maybe'?'🤔':dv.Lea==='no'?'❌':'–';
+    const match=getMatch(dv.Till,dv.Lea)||'❓';
+    return`<div class="vote-trow">
+      <div><div class="vote-dest">${d.name}</div><div class="vote-country">${d.country}</div></div>
+      <div class="vote-cell"><div class="vote-inline">
+        ${['love','maybe','no'].map(val=>{
+          const emoji=val==='love'?'❤️':val==='maybe'?'🤔':'❌';
+          const cls=dv.Till===val?`v-${val}`:'';
+          return`<button class="vbtn ${cls}" onclick="setVote('${d.id}','Till','${val}')">${emoji}</button>`;
+        }).join('')}
+      </div></div>
+      <div class="vote-cell"><div class="vote-inline">
+        ${['love','maybe','no'].map(val=>{
+          const emoji=val==='love'?'❤️':val==='maybe'?'🤔':'❌';
+          const cls=dv.Lea===val?`v-${val}`:'';
+          return`<button class="vbtn ${cls}" onclick="setVote('${d.id}','Lea','${val}')">${emoji}</button>`;
+        }).join('')}
+      </div></div>
+      <div class="vote-cell" style="font-size:20px;">${match}</div>
     </div>`;
   }).join('');
-  document.getElementById('ranking-list').innerHTML=html;
+  tbl.innerHTML=`<div class="vote-thead"><div>Destination</div><div style="text-align:center">Till</div><div style="text-align:center">Lea</div><div style="text-align:center">Match</div></div>`+rows;
 }
 
-// ============= OWN IDEAS =============
-function renderOwn(){
-  const own=getOwn();
-  if(own.length===0){
-    document.getElementById('own-list').innerHTML='<div class="empty"><div class="empty-icon">💡</div><div class="empty-title">Noch keine eigenen Ideen</div><div class="empty-sub">Tippe auf den ✚-Button rechts unten und reiche deine erste Idee ein.</div></div>';
-    return;
-  }
-  document.getElementById('own-list').innerHTML=own.map(d=>renderCard({...d,isOwn:true},null)).join('');
+function exportVotes(){
+  const v=getVotes();
+  navigator.clipboard.writeText(JSON.stringify({votes:v,exported:new Date().toISOString()},null,2))
+    .then(()=>showToast('📋 In Zwischenablage kopiert – für Codex!'));
 }
 
-function updateOwnBadge(){
-  const own=getOwn();
-  const badge=document.getElementById('own-badge');
-  if(!badge)return;
-  if(own.length>0){
-    badge.style.display='block';
-    badge.textContent=own.length;
-  } else {
-    badge.style.display='none';
-  }
-}
-
-// ============= SUBMIT IDEA =============
-function openSubmit(){
-  document.getElementById('edit-id').value='';
-  document.getElementById('submit-btn').textContent='Idee einreichen 🚀';
-  ['s-dest','s-land','s-budget','s-why','s-sub','s-flight'].forEach(id=>document.getElementById(id).value='');
-  document.getElementById('s-emoji').value='🌍';
-  document.getElementById('submit-modal').classList.add('open');
-}
-
-function editOwn(id){
-  const own=getOwn();
-  const d=own.find(x=>x.id===id);
-  if(!d)return;
-  document.getElementById('edit-id').value=id;
-  document.getElementById('s-emoji').value=d.emoji||'🌍';
-  document.getElementById('s-dest').value=d.name||'';
-  document.getElementById('s-land').value=d.country||'';
-  document.getElementById('s-budget').value=d.price||'';
-  document.getElementById('s-sub').value=d.sub||'';
-  document.getElementById('s-why').value=d.why||d.highlight||'';
-  document.getElementById('s-who').value=d.submittedBy||'Till';
-  document.getElementById('s-status').value=d.status||'OK';
-  document.getElementById('s-flight').value=d.flight||'';
-  document.getElementById('submit-btn').textContent='Änderungen speichern 💾';
-  document.getElementById('submit-modal').classList.add('open');
-}
-
-function deleteOwn(id){
-  if(!confirm('Diese Idee wirklich löschen?'))return;
-  const own=getOwn().filter(d=>d.id!==id);
-  saveOwn(own);
-  renderCards();
-  renderOwn();
-  showToast('🗑 Idee gelöscht');
-}
-
-function submitIdea(){
-  const dest=document.getElementById('s-dest').value.trim();
-  if(!dest){
-    document.getElementById('s-dest').style.borderColor='var(--coral)';
-    setTimeout(()=>document.getElementById('s-dest').style.borderColor='',1500);
-    return;
-  }
-  const editId=document.getElementById('edit-id').value;
-  const own=getOwn();
-  const data={
-    id:editId||'own-'+Date.now(),
-    isOwn:true,
-    emoji:document.getElementById('s-emoji').value||'🌍',
-    name:dest,
-    country:document.getElementById('s-land').value||'',
-    sub:document.getElementById('s-sub').value||document.getElementById('s-land').value||'',
-    status:document.getElementById('s-status').value,
-    price:parseInt(document.getElementById('s-budget').value)||null,
-    priceLabel:'',
-    priceBadge:'',
-    priceBadgeClass:'pb-mid',
-    flight:document.getElementById('s-flight').value||'',
-    from:'',
-    climate:'',
-    available:'',
-    why:document.getElementById('s-why').value||'',
-    highlight:document.getElementById('s-why').value||'',
-    pros:[],
-    cons:[],
-    submittedBy:document.getElementById('s-who').value,
-    createdAt:editId?(own.find(x=>x.id===editId)||{}).createdAt||Date.now():Date.now()
-  };
-
-  if(editId){
-    const idx=own.findIndex(d=>d.id===editId);
-    if(idx>=0)own[idx]=data;
-  } else {
-    own.push(data);
-  }
-  saveOwn(own);
-  closeModal('submit-modal');
-  showToast(editId?'💾 Geändert!':'💡 Idee eingereicht!');
-  renderCards();
-  renderOwn();
-  updateOwnBadge();
-}
-
-function closeModal(id){document.getElementById(id).classList.remove('open');}
-
-// ============= HISTORY =============
-function renderHistory(){
-  const grouped={};
-  HISTORY.forEach(h=>{
-    if(!grouped[h.year])grouped[h.year]=[];
-    grouped[h.year].push(h);
-  });
-  const years=Object.keys(grouped).sort();
-  let html='';
-  years.forEach(y=>{
-    html+=`<div class="hist-year" data-year="${y}">${y}${y==='2023'?' – ab hier mit Felix 👶':''}</div>`;
-    grouped[y].forEach(h=>{
-      html+=`<div class="hist-item ${h.type}" data-type="${h.type}">
-        <span class="hist-em">${h.emoji}</span>
-        <div class="hist-body">
-          <div class="hist-dest-name">${escapeHtml(h.dest)}</div>
-          <div class="hist-loc">${escapeHtml(h.loc)}</div>
-          <div class="hist-tags">
-            <span class="htag htag-${h.type==='ferienhaus'?'fh':h.type}">${h.type==='hotel'?'Hotel':h.type==='cruise'?'Kreuzfahrt':h.type==='ferienhaus'?'Ferienhaus':h.type==='airbnb'?'Airbnb':'Familie'}</span>
-            <span class="htag" style="background:var(--bg2);color:var(--muted)">${escapeHtml(h.date)}</span>
-          </div>
-        </div>
-        <span class="hist-pers">${escapeHtml(h.pers)}</span>
-      </div>`;
-    });
-  });
-  // Add open slot 2026
-  html+=`<div class="hist-item" style="border:2px dashed var(--gold);background:var(--gold-light);" data-type="hotel">
-    <span class="hist-em">❓</span>
-    <div class="hist-body">
-      <div class="hist-dest-name" style="color:var(--gold)">Sommerurlaub 2026 – noch offen!</div>
-      <div class="hist-loc">Noch nicht gebucht · ab 13. Juli · max. 3.600 €</div>
-      <div class="hist-tags"><span class="htag" style="background:var(--gold);color:#fff">OFFEN</span></div>
-    </div>
-    <span class="hist-pers">Familie</span>
-  </div>`;
-  document.getElementById('hl').innerHTML=html;
-}
-
-function filterHistory(type,btn){
-  document.querySelectorAll('#tab-archiv .filter-row .chip').forEach(p=>p.classList.remove('active'));
+// ===== HISTORY FILTER =====
+function fh(type,btn){
+  document.querySelectorAll('#hist-chips .fchip').forEach(c=>c.classList.remove('active'));
   btn.classList.add('active');
-  document.querySelectorAll('#hl .hist-item').forEach(i=>{
-    i.style.display=(type==='ALL'||i.dataset.type===type)?'':'none';
+  document.querySelectorAll('#hl .hist-row').forEach(r=>{
+    r.style.display=(type==='ALL'||r.dataset.type===type)?'':'none';
   });
-  document.querySelectorAll('#hl .hist-year').forEach(yr=>{
-    let el=yr.nextElementSibling;
+  document.querySelectorAll('#hl .hist-year-label').forEach(y=>{
     let found=false;
-    while(el&&el.classList&&el.classList.contains('hist-item')){
-      if(el.style.display!=='none'){found=true;break;}
+    let el=y.nextElementSibling;
+    while(el&&el.classList&&el.classList.contains('hist-row')){
+      if(el.style.display!=='none')found=true;
       el=el.nextElementSibling;
     }
-    yr.style.display=found?'':'none';
+    y.style.display=found?'':'none';
   });
 }
 
-// ============= STATS =============
-function updateStats(){
-  const all=getAllDestinations();
-  document.getElementById('stat-total').textContent=all.length;
-  const ratings=getRatings();
-  const ratedIds=Object.keys(ratings).filter(id=>Object.values(ratings[id]).some(v=>v>0));
-  document.getElementById('stat-rated').textContent=ratedIds.length;
-  const comments=getComments();
-  const cCount=Object.values(comments).reduce((sum,arr)=>sum+arr.length,0);
-  document.getElementById('stat-comments').textContent=cCount;
-
-  // Days until July 13 2026
-  const now=new Date();
-  const target=new Date('2026-07-13');
-  const days=Math.max(0,Math.ceil((target-now)/(1000*60*60*24)));
-  document.getElementById('stat-days').textContent=days>0?days:'🎉';
+// ===== MODAL =====
+function openModal(){document.getElementById('modal-bg').classList.add('open');}
+function closeModal(){document.getElementById('modal-bg').classList.remove('open');}
+function submitIdea(){
+  const dest=document.getElementById('si-dest').value.trim();
+  if(!dest){document.getElementById('si-dest').style.borderColor='var(--coral)';return;}
+  const idea={dest,land:document.getElementById('si-land').value,budget:document.getElementById('si-budget').value,why:document.getElementById('si-why').value,who:document.getElementById('si-who').value,status:document.getElementById('si-status').value,ts:new Date().toLocaleDateString('de')};
+  const subs=JSON.parse(localStorage.getItem('f24_subs')||'[]');
+  subs.push(idea);
+  localStorage.setItem('f24_subs',JSON.stringify(subs));
+  closeModal();showToast('💡 Idee eingereicht!');renderSubmissions();
+  ['si-dest','si-land','si-budget','si-why'].forEach(id=>document.getElementById(id).value='');
 }
-
-// ============= SCROLL TO CARD =============
-function scrollToCard(id){
-  // Reset filter to ALL first
-  filterStatus('ALL',document.querySelector('#tab-ideen .filter-row .chip'));
-  setTimeout(()=>{
-    const card=document.getElementById('card-'+id);
-    if(card)card.scrollIntoView({behavior:'smooth',block:'start'});
-  },100);
+function renderSubmissions(){
+  const subs=JSON.parse(localStorage.getItem('f24_subs')||'[]');
+  const sec=document.getElementById('sub-section');
+  const list=document.getElementById('sub-list');
+  if(!sec||!list)return;
+  if(!subs.length){sec.style.display='none';return;}
+  sec.style.display='block';
+  list.innerHTML=subs.map((s,i)=>`<div class="sub-card"><div style="display:flex;justify-content:space-between;align-items:flex-start"><div><div class="sub-name">${s.dest}${s.land?' – '+s.land:''}</div><div class="sub-meta">${s.ts} · ${s.status}${s.budget?' · ~'+s.budget+' €':''}</div></div><button onclick="delSub(${i})" style="background:none;border:none;cursor:pointer;color:var(--muted);font-size:18px">✕</button></div>${s.why?`<div class="sub-why">"${s.why}"</div>`:''}<span class="sub-who sub-${s.who.toLowerCase().includes('lea')&&s.who.toLowerCase().includes('till')?'both':s.who.toLowerCase().includes('lea')?'lea':'till'}">${s.who}</span></div>`).join('');
 }
+function delSub(i){const subs=JSON.parse(localStorage.getItem('f24_subs')||'[]');subs.splice(i,1);localStorage.setItem('f24_subs',JSON.stringify(subs));renderSubmissions();}
 
-// ============= EXPORT =============
-function exportData(){
-  const data={
-    ratings:getRatings(),
-    comments:getComments(),
-    ownIdeas:getOwn(),
-    exportedAt:new Date().toISOString()
-  };
-  navigator.clipboard.writeText(JSON.stringify(data,null,2)).then(()=>{
-    showToast('📋 Daten in Zwischenablage kopiert');
-  });
-}
-
-// ============= TOAST =============
+// ===== TOAST =====
 function showToast(msg){
   const t=document.getElementById('toast');
   t.textContent=msg;t.classList.add('show');
-  setTimeout(()=>t.classList.remove('show'),2200);
+  clearTimeout(t._to);t._to=setTimeout(()=>t.classList.remove('show'),2500);
 }
 
-// ============= INIT =============
-function init(){
-  document.getElementById('user-name').textContent=getCurrentUser();
-  renderCards();
-  updateStats();
-  updateOwnBadge();
-  setInterval(updateStats,60000); // Update days counter every minute
-}
-
-window.addEventListener('load',()=>{
-  if(sessionStorage.getItem('f24')==='1')init();
-});
+window.addEventListener('load',()=>{if(sessionStorage.getItem('f24')==='1')init();});
 </script>
 </body>
 </html>
