Till Heidrich
87d11ae4d7
- 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)
1586 lines
95 KiB
HTML
1586 lines
95 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<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;}
|
||
:root{
|
||
--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%;scroll-behavior:smooth;}
|
||
body{background:var(--cream);color:var(--text);font-family:'Inter',sans-serif;font-size:14px;min-height:100vh;padding-bottom:70px;}
|
||
|
||
/* ===== 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;min-height:16px;font-weight:500;}
|
||
|
||
/* ===== 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;}
|
||
|
||
/* ===== 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;}
|
||
|
||
/* ===== 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);}
|
||
|
||
/* ===== 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);}
|
||
|
||
/* ===== MAIN CONTENT ===== */
|
||
.main{max-width:1200px;margin:0 auto;padding:20px 24px 0;}
|
||
|
||
/* ===== 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;}
|
||
|
||
/* ===== 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;}
|
||
|
||
/* ===== 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);}
|
||
|
||
/* ===== 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;}
|
||
|
||
.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;}
|
||
|
||
/* 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;}
|
||
|
||
/* 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;}
|
||
|
||
/* 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);}
|
||
|
||
/* 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;}
|
||
|
||
/* ===== 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;}
|
||
|
||
/* ===== SECTION DIVIDER ===== */
|
||
.section-gap{margin-top:28px;}
|
||
|
||
/* ===== 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);}
|
||
|
||
/* ===== 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{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;}
|
||
|
||
/* ===== 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;}
|
||
|
||
/* ===== 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);}
|
||
|
||
/* ===== 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:#7C3AED;}
|
||
.family .hist-dot{background:var(--blue);}
|
||
.storno .hist-dot{background:var(--subtle);}
|
||
.hist-em{font-size:18px;flex-shrink:0;}
|
||
.hist-content{flex:1;}
|
||
.hist-name{font-size:13px;font-weight:700;}
|
||
.hist-loc{font-size:11px;color:var(--muted);}
|
||
.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-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;}
|
||
.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);}
|
||
|
||
/* ===== 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;}
|
||
|
||
/* ===== 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);}
|
||
|
||
/* 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-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"> </div>
|
||
</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>
|
||
</nav>
|
||
|
||
<!-- FAB -->
|
||
<button class="fab" onclick="openModal()" title="Idee einreichen">+</button>
|
||
|
||
<!-- TOAST -->
|
||
<div class="toast" id="toast">Gespeichert</div>
|
||
|
||
<!-- 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()">✕</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">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>
|
||
<button class="modal-submit" onclick="submitIdea()">Idee einreichen 🚀</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ======== 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 & 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>
|
||
|
||
<!-- STATS BAR -->
|
||
<div class="stats-bar">
|
||
<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>
|
||
|
||
<!-- 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>
|
||
|
||
<!-- 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>
|
||
|
||
<!-- 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>
|
||
|
||
<!-- SPÄTER SECTION -->
|
||
<div class="section-gap">
|
||
<div class="section-head"><span class="section-title">⏳ Bucket List & 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>
|
||
|
||
<!-- 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>
|
||
|
||
<!-- ======== 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>
|
||
// ===== AUTH =====
|
||
(function(){if(sessionStorage.getItem('f24')==='1'){document.getElementById('gate').style.display='none';init();}})();
|
||
function auth(){
|
||
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').textContent='Falsches Passwort. Tipp: Frag Frieda! 🐾';
|
||
document.getElementById('pw').style.borderColor='var(--coral)';
|
||
setTimeout(()=>{document.getElementById('pw').style.borderColor='';},1500);
|
||
}
|
||
}
|
||
|
||
// ===== 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 =====
|
||
function navTo(tab,btn){
|
||
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');
|
||
// sync both navbars
|
||
document.querySelectorAll(`[onclick*="navTo('${tab}'"]`).forEach(b=>b.classList.add('active'));
|
||
if(tab==='abstimmung')buildVoteTable();
|
||
}
|
||
|
||
// ===== 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';
|
||
});
|
||
}
|
||
|
||
// ===== VIEW TOGGLE =====
|
||
function setView(mode,btn){
|
||
document.querySelectorAll('.view-btn').forEach(b=>b.classList.remove('active'));
|
||
btn.classList.add('active');
|
||
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='');
|
||
}
|
||
}
|
||
|
||
// ===== 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);}
|
||
}
|
||
|
||
// ===== SORT =====
|
||
function sortCards(mode){/* placeholder for future sort logic */}
|
||
|
||
// ===== FAV =====
|
||
function toggleFav(btn,id){
|
||
const liked=btn.classList.toggle('liked');
|
||
btn.textContent=liked?'❤️':'🤍';
|
||
updateStats();
|
||
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;
|
||
}
|
||
|
||
// ===== 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'},
|
||
];
|
||
|
||
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]);
|
||
}
|
||
|
||
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);
|
||
}
|
||
});
|
||
}
|
||
|
||
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'❓';
|
||
}
|
||
|
||
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('');
|
||
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;
|
||
}
|
||
|
||
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!'));
|
||
}
|
||
|
||
// ===== 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-row').forEach(r=>{
|
||
r.style.display=(type==='ALL'||r.dataset.type===type)?'':'none';
|
||
});
|
||
document.querySelectorAll('#hl .hist-year-label').forEach(y=>{
|
||
let found=false;
|
||
let el=y.nextElementSibling;
|
||
while(el&&el.classList&&el.classList.contains('hist-row')){
|
||
if(el.style.display!=='none')found=true;
|
||
el=el.nextElementSibling;
|
||
}
|
||
y.style.display=found?'':'none';
|
||
});
|
||
}
|
||
|
||
// ===== 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='');
|
||
}
|
||
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();}
|
||
|
||
// ===== TOAST =====
|
||
function showToast(msg){
|
||
const t=document.getElementById('toast');
|
||
t.textContent=msg;t.classList.add('show');
|
||
clearTimeout(t._to);t._to=setTimeout(()=>t.classList.remove('show'),2500);
|
||
}
|
||
|
||
window.addEventListener('load',()=>{if(sessionStorage.getItem('f24')==='1')init();});
|
||
</script>
|
||
</body>
|
||
</html>
|