<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Reiseplaner</title>
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&family=DM+Sans:wght@300;400;500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"/>
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" crossorigin=""></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.6.13/flatpickr.min.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.6.13/flatpickr.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.6.13/l10n/de.js"></script>
<script src="https://cdn.jsdelivr.net/npm/topojson@3.0.2/dist/topojson.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2/dist/umd/supabase.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/tesseract.js@5/dist/tesseract.min.js"></script>
<style>
:root {
  --bg:#f7f5f0; --surface:#fff; --surface2:#f0ede6; --border:#e2ddd5;
  --text:#1a1814; --text-muted:#8a857a;
  --accent:#2d5a3d; --accent-light:#e8f0ea;
  --accent2:#c17f3a; --accent2-light:#faf0e6;
  --danger:#c0392b; --danger-light:#fdecea;
  --shadow:0 2px 16px rgba(26,24,20,0.07); --shadow-lg:0 8px 40px rgba(26,24,20,0.12);
  --radius:12px; --radius-sm:6px;
  --font-display:'Cormorant Garamond',serif; --font-body:'DM Sans',sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0;}
body{font-family:var(--font-body);background:var(--bg);color:var(--text);min-height:100vh;font-size:15px;line-height:1.6;}
header{background:var(--surface);border-bottom:1px solid var(--border);padding:0 32px;display:flex;align-items:center;justify-content:space-between;height:64px;position:sticky;top:0;z-index:100;box-shadow:var(--shadow);}
.logo{font-family:var(--font-display);font-size:26px;font-weight:300;letter-spacing:.04em;}
.logo span{color:var(--accent);font-style:italic;}
.lang-toggle{display:flex;gap:4px;background:var(--surface2);border-radius:20px;padding:3px;}
.lang-toggle button{padding:4px 14px;border:none;border-radius:17px;cursor:pointer;font-family:var(--font-body);font-size:13px;font-weight:500;background:transparent;color:var(--text-muted);transition:all .2s;}
.lang-toggle button.active{background:var(--accent);color:white;}
/* ── TOP NAV ── */
#top-nav{background:var(--surface);border-bottom:1px solid var(--border);padding:0 24px;display:flex;gap:0;}
#top-nav button{padding:12px 20px;border:none;background:transparent;cursor:pointer;font-family:var(--font-body);font-size:15px;font-weight:500;color:var(--text-muted);border-bottom:3px solid transparent;transition:all .2s;display:flex;align-items:center;gap:7px;}
#top-nav button:hover{color:var(--text);}
#top-nav button.active{color:var(--accent);border-bottom-color:var(--accent);}

/* ── TRIP CONTEXT BAR ── */
#trip-ctx-bar{background:var(--accent);color:white;padding:0 24px;height:40px;display:none;align-items:center;justify-content:space-between;gap:16px;}
#trip-ctx-bar.visible{display:flex;}
#trip-ctx-info{display:flex;align-items:center;gap:10px;overflow:hidden;}
#trip-ctx-name{font-family:var(--font-display);font-size:17px;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#trip-ctx-dates{font-size:12px;opacity:.75;white-space:nowrap;}
#trip-ctx-close{background:rgba(255,255,255,.2);border:none;color:white;border-radius:var(--radius-sm);padding:4px 12px;font-family:var(--font-body);font-size:12px;cursor:pointer;white-space:nowrap;flex-shrink:0;}

/* ── SUB NAV ── */
#sub-nav{background:var(--surface);border-bottom:1px solid var(--border);padding:0 24px 0 220px;display:none;gap:0;overflow-x:auto;}
#sub-nav.visible{display:flex;}
#sub-nav button{padding:10px 16px;border:none;background:transparent;cursor:pointer;font-family:var(--font-body);font-size:13px;color:var(--text-muted);border-bottom:2px solid transparent;white-space:nowrap;transition:all .2s;display:flex;align-items:center;gap:5px;}
#sub-nav button:hover{color:var(--text);}
#sub-nav button.active{color:var(--accent);border-bottom-color:var(--accent);font-weight:500;}

/* ── APP BODY: sidebar + main ── */
#app-body{display:flex;min-height:calc(100vh - 180px);}

/* ── SIDEBAR ── */
#sidebar{width:220px;flex-shrink:0;background:var(--surface);border-right:1px solid var(--border);padding:20px 0;display:flex;flex-direction:column;gap:0;position:sticky;top:0;max-height:calc(100vh - 130px);overflow-y:auto;}
.sidebar-section-title{padding:8px 20px 4px;font-size:11px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.08em;}
.sidebar-trip-item{display:flex;align-items:center;gap:8px;padding:9px 20px;cursor:pointer;font-size:14px;color:var(--text-muted);border-left:3px solid transparent;transition:all .15s;}
.sidebar-trip-item:hover{background:var(--surface2);color:var(--text);}
.sidebar-trip-item.active{background:var(--accent-light);color:var(--accent);border-left-color:var(--accent);font-weight:500;}
.sidebar-trip-status{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
.sidebar-add-btn{margin:8px 16px 0;padding:7px 12px;border:1px dashed var(--border);border-radius:var(--radius-sm);background:transparent;cursor:pointer;font-family:var(--font-body);font-size:13px;color:var(--text-muted);text-align:left;transition:all .15s;}
.sidebar-add-btn:hover{border-color:var(--accent);color:var(--accent);}

/* ── COUNTRY TILES in sidebar ── */
.sidebar-country-item{display:flex;align-items:center;gap:8px;padding:9px 20px;cursor:pointer;font-size:14px;color:var(--text-muted);border-left:3px solid transparent;transition:all .15s;}
.sidebar-country-item:hover{background:var(--surface2);color:var(--text);}
.sidebar-country-item.active{background:var(--accent-light);color:var(--accent);border-left-color:var(--accent);font-weight:500;}
.sidebar-country-count{margin-left:auto;font-size:11px;background:var(--surface2);padding:1px 7px;border-radius:10px;}

/* ── MAIN CONTENT ── */
main{flex:1;padding:28px 32px;min-width:0;}

/* ── BACKLOG COUNTRY TILES ── */
.country-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:18px;margin-bottom:28px;}
.country-tile{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;cursor:pointer;transition:box-shadow .2s,transform .2s;}
.country-tile:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px);}
.country-tile-img{width:100%;height:110px;object-fit:cover;display:block;background:var(--surface2);}
.country-tile-img-ph{width:100%;height:110px;display:flex;align-items:center;justify-content:center;font-size:40px;background:linear-gradient(135deg,var(--surface2),var(--border));}
.country-tile-body{padding:12px 14px;}
.country-tile-name{font-family:var(--font-display);font-size:18px;font-weight:400;}
.country-tile-count{font-size:12px;color:var(--text-muted);margin-top:2px;}

/* ── BACKLOG COUNTRY DETAIL ── */
.country-detail-header{display:flex;align-items:center;gap:12px;margin-bottom:24px;}
.country-back-btn{padding:6px 14px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface2);cursor:pointer;font-family:var(--font-body);font-size:13px;color:var(--text-muted);}
.country-back-btn:hover{background:var(--border);}

@media(max-width:700px){
  #sidebar{display:none;}
  main{padding:18px 14px;}
}
.tab-panel{display:none;} .tab-panel.active{display:block;}
.section-header{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:24px;flex-wrap:wrap;gap:12px;}
.section-title{font-family:var(--font-display);font-size:36px;font-weight:300;line-height:1.1;}
.section-title small{display:block;font-family:var(--font-body);font-size:12px;color:var(--text-muted);letter-spacing:.08em;text-transform:uppercase;margin-bottom:4px;}
.btn{padding:9px 18px;border-radius:var(--radius-sm);border:none;cursor:pointer;font-family:var(--font-body);font-size:14px;font-weight:500;transition:all .15s;display:inline-flex;align-items:center;gap:6px;}
.btn-primary{background:var(--accent);color:white;} .btn-primary:hover{background:#234a31;}
.btn-secondary{background:var(--surface2);color:var(--text);border:1px solid var(--border);} .btn-secondary:hover{background:var(--border);}
.btn-danger{background:var(--danger-light);color:var(--danger);} .btn-danger:hover{background:#f5c6c3;}
.btn-sm{padding:5px 11px;font-size:13px;}
.btn-icon{padding:6px;border-radius:var(--radius-sm);background:transparent;border:1px solid var(--border);cursor:pointer;font-size:14px;transition:all .15s;} .btn-icon:hover{background:var(--surface2);}
.card{background:var(--surface);border-radius:var(--radius);border:1px solid var(--border);box-shadow:var(--shadow);overflow:hidden;}
.card-header{padding:16px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:12px;}
.card-body{padding:20px;}
.form-row{display:flex;gap:12px;flex-wrap:wrap;}
.form-group{display:flex;flex-direction:column;gap:5px;flex:1;min-width:130px;}
.form-group label{font-size:11px;font-weight:500;color:var(--text-muted);letter-spacing:.06em;text-transform:uppercase;}
.form-group input,.form-group select,.form-group textarea{padding:9px 12px;border:1px solid var(--border);border-radius:var(--radius-sm);font-family:var(--font-body);font-size:14px;background:var(--surface);color:var(--text);outline:none;transition:border-color .15s;}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:var(--accent);}
.form-group textarea{resize:vertical;min-height:68px;}
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(26,24,20,.45);z-index:1000;align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(3px);}
.modal-overlay.open{display:flex;}
.modal{background:var(--surface);border-radius:var(--radius);width:100%;max-width:540px;box-shadow:var(--shadow-lg);animation:slideUp .2s ease;max-height:90vh;display:flex;flex-direction:column;}
@keyframes slideUp{from{transform:translateY(20px);opacity:0;}to{transform:translateY(0);opacity:1;}}
.modal-header{padding:20px 24px 14px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;flex-shrink:0;}
.modal-header h3{font-family:var(--font-display);font-size:22px;font-weight:400;}
.modal-body{padding:20px 24px;display:flex;flex-direction:column;gap:14px;overflow-y:auto;}
.modal-footer{padding:14px 24px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:10px;flex-shrink:0;}
.badge{display:inline-flex;align-items:center;padding:3px 10px;border-radius:20px;font-size:12px;font-weight:500;gap:4px;}
.badge-green{background:var(--accent-light);color:var(--accent);}
.badge-orange{background:var(--accent2-light);color:var(--accent2);}
.badge-gray{background:var(--surface2);color:var(--text-muted);}
.badge-red{background:var(--danger-light);color:var(--danger);}
.trip-selector{display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);padding:5px 11px;font-size:14px;}
.trip-selector select{border:none;background:transparent;font-family:var(--font-body);font-size:14px;color:var(--text);outline:none;cursor:pointer;}
.trip-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(370px,1fr));gap:24px;}
.trip-card{background:var(--surface);border-radius:16px;border:1px solid var(--border);box-shadow:0 2px 10px rgba(0,0,0,.07);overflow:hidden;transition:box-shadow .25s,transform .25s;display:flex;flex-direction:column;}
.trip-card:hover{box-shadow:0 8px 32px rgba(0,0,0,.14);transform:translateY(-3px);}
.trip-card-banner{height:190px;display:flex;align-items:flex-end;padding:0 22px 18px;position:relative;}
.trip-card-banner-name{font-family:var(--font-display);font-size:26px;font-weight:400;color:rgba(255,255,255,.95);text-shadow:0 1px 6px rgba(0,0,0,.3);line-height:1.1;}
.trip-card-banner-badge{position:absolute;top:13px;right:14px;background:rgba(255,255,255,.88);color:var(--text);font-size:11px;padding:3px 10px;border-radius:20px;font-weight:600;letter-spacing:.2px;}
.trip-card-body{padding:18px 22px 14px;flex:1;}
.trip-card-dest{font-size:13px;color:var(--text-muted);margin-bottom:10px;}
.trip-card-meta{font-size:13px;color:var(--text-muted);display:flex;flex-wrap:wrap;gap:10px;margin-top:0;}
.trip-card-actions{padding:13px 22px;border-top:1px solid var(--border);display:flex;gap:8px;align-items:center;}
.progress-bar{height:6px;background:var(--surface2);border-radius:4px;overflow:hidden;margin-top:13px;}
.progress-fill{height:100%;background:var(--accent);border-radius:4px;transition:width .4s;}
.progress-fill.over{background:var(--danger);}

/* ── DESTINATIONS ── */
.dest-layout{display:grid;grid-template-columns:1fr 1fr;gap:24px;}
@media(max-width:820px){.dest-layout{grid-template-columns:1fr;}}
.dest-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(185px,1fr));gap:14px;}
.dest-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;position:relative;transition:box-shadow .2s,transform .2s;}
.dest-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px);}
.dest-card-img{width:100%;height:120px;object-fit:cover;display:block;}
.dest-card-placeholder{width:100%;height:120px;background:linear-gradient(135deg,var(--surface2),var(--border));display:flex;align-items:center;justify-content:center;font-size:32px;}
.dest-num{position:absolute;top:8px;left:8px;width:28px;height:28px;border-radius:50%;background:var(--accent);color:white;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;box-shadow:0 2px 8px rgba(0,0,0,.3);}
.dest-card-body{padding:10px 12px;}
.dest-card-name{font-weight:500;font-size:14px;margin-bottom:2px;}
.dest-card-loc{font-size:12px;color:var(--text-muted);}
.dest-card-actions{display:flex;gap:4px;padding:8px 12px;border-top:1px solid var(--border);}
.photo-credit{font-size:10px;color:var(--text-muted);padding:2px 4px;}

/* ── MAP ── */
.map-box{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);}
.map-box-header{padding:12px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;}

/* ── ROUTE ── */
.route-layout{display:grid;grid-template-columns:1fr 380px;gap:24px;}
@media(max-width:900px){.route-layout{grid-template-columns:1fr;}}
.route-list{display:flex;flex-direction:column;gap:12px;}
.route-item{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:14px 18px;display:flex;gap:14px;align-items:flex-start;box-shadow:var(--shadow);}
.route-day-circle{width:42px;height:42px;border-radius:50%;background:var(--accent);color:white;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;flex-shrink:0;}
.route-item-content{flex:1;}
.route-item-title{font-weight:500;margin-bottom:6px;}
.route-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px;}
.dest-chip{display:inline-flex;align-items:center;gap:5px;background:var(--accent-light);color:var(--accent);padding:3px 9px 3px 4px;border-radius:20px;font-size:12px;font-weight:500;}
.dest-chip-num{width:18px;height:18px;border-radius:50%;background:var(--accent);color:white;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;flex-shrink:0;}

/* ── COLLAPSIBLE ROUTE ITEMS ── */
.route-item{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;transition:box-shadow .2s,opacity .15s;}
.route-item.dragging{opacity:.35;border-style:dashed;}
.route-item.drag-over{border-color:var(--accent2);box-shadow:0 0 0 2px var(--accent2);}
.route-item-header{padding:14px 18px;display:flex;gap:14px;align-items:center;cursor:pointer;user-select:none;}
.route-item-header:hover{background:var(--surface2);}
.route-item-body{display:none;padding:0 18px 14px 74px;border-top:1px solid var(--border);}
.route-item-body.open{display:block;}
.route-item-toggle{font-size:12px;color:var(--text-muted);margin-left:auto;transition:transform .2s;flex-shrink:0;}
.route-item-toggle.open{transform:rotate(180deg);}

/* ── ACTIVITIES ── */
.activity-list{display:flex;flex-direction:column;gap:6px;margin-top:12px;}
.activity-item{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--surface);transition:all .15s;}
.activity-item.done{opacity:.55;}
.activity-item.done .act-name{text-decoration:line-through;}
.activity-cb{width:16px;height:16px;accent-color:var(--accent);cursor:pointer;flex-shrink:0;}
.act-prio{display:inline-flex;align-items:center;padding:2px 8px;border-radius:20px;font-size:11px;font-weight:600;flex-shrink:0;}
.act-prio-fix{background:#e8f0ea;color:#2d5a3d;}
.act-prio-flex{background:#faf0e6;color:#c17f3a;}
.act-prio-spontan{background:#f0ede6;color:#8a857a;}
.act-name{flex:1;font-size:14px;}
.act-actions{display:flex;gap:4px;flex-shrink:0;}
.act-add-row{display:flex;gap:8px;margin-top:10px;align-items:center;flex-wrap:wrap;}

/* ── DEST SELECT in route modal ── */
.dest-select-grid{display:flex;flex-direction:column;gap:4px;max-height:260px;overflow-y:auto;padding:2px;}
.dsi{border:1px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;transition:border-color .15s,background .15s;user-select:none;display:flex;align-items:center;gap:10px;padding:8px 12px;background:var(--surface);}
.dsi:hover{border-color:var(--accent);background:var(--accent-light);}
.dsi.selected{border:2px solid var(--accent);background:var(--accent-light);}
.dsi.dragging{opacity:.35;border-style:dashed;}
.dsi.drag-over{border-color:var(--accent2);background:var(--accent2-light);}
.dsi-handle{font-size:13px;color:var(--border);cursor:grab;flex-shrink:0;padding:0 1px;}
.dsi-num{width:22px;height:22px;border-radius:50%;background:var(--accent);color:white;display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex-shrink:0;flex-grow:0;}
.dsi-unsel{width:22px;height:22px;border-radius:50%;border:2px solid var(--border);flex-shrink:0;flex-grow:0;}
.dsi-info{flex:1;min-width:0;}
.dsi-name{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.dsi-sub{font-size:11px;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px;}
.dsi-check{font-size:13px;color:var(--accent);flex-shrink:0;font-weight:700;}
#r-mini-map{height:200px;border-radius:var(--radius-sm);border:1px solid var(--border);margin-top:6px;}
#r-mini-map.hidden{display:none;}
.r-excl-zone{border:2px dashed var(--border);border-radius:var(--radius-sm);padding:8px;margin-top:8px;min-height:44px;transition:border-color .15s,background .15s;}
.r-excl-zone.drag-over{border-color:var(--danger);background:#fff5f5;}
.r-excl-label{font-size:11px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px;display:flex;align-items:center;gap:5px;}
.dsi.dsi-excluded{opacity:.55;background:var(--surface2);}
.dsi.dsi-excluded .dsi-name{text-decoration:line-through;color:var(--text-muted);}
.dsi-restore{font-size:13px;color:var(--text-muted);cursor:pointer;flex-shrink:0;padding:0 3px;border:none;background:none;}

/* ── TAGESPLANUNG ── */
.dp-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:10px 14px;margin-bottom:8px;box-shadow:var(--shadow);}
.dp-header{display:flex;align-items:center;gap:10px;margin-bottom:2px;}
.dp-day-circle{width:32px;height:32px;border-radius:50%;background:var(--accent2);color:white;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;flex-shrink:0;}
.dp-route{margin-top:8px;padding:6px 10px;background:var(--accent-light);border-radius:var(--radius-sm);font-size:13px;color:var(--accent);font-weight:500;}
.dp-acts{margin-top:10px;display:flex;flex-direction:column;gap:4px;}
.dp-act-item{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:var(--radius-sm);background:var(--surface2);font-size:13px;}
.dp-act-item.done .dp-act-name{text-decoration:line-through;color:var(--text-muted);}
.dp-act-cb{width:15px;height:15px;cursor:pointer;flex-shrink:0;}
.dp-act-name{flex:1;}
.dp-act-add{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap;}
.dp-act-add input,.dp-act-add select{padding:7px 10px;border:1px solid var(--border);border-radius:var(--radius-sm);font-family:var(--font-body);font-size:13px;outline:none;background:var(--surface);color:var(--text);}
.dp-act-add input[type=text]{flex:1;min-width:120px;}
.stay-group{margin-bottom:16px;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);}
.stay-header{display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--border);border-bottom:none;padding:12px 14px;}
.stay-dot{width:4px;align-self:stretch;border-radius:2px;flex-shrink:0;}
.stay-title{font-weight:600;font-size:15px;}
.stay-meta{font-size:12px;color:var(--text-muted);}
.stay-acts-wrap{background:var(--surface2);border:1px solid var(--border);border-top:none;border-bottom:none;padding:8px 14px 10px 18px;}
.stay-act-chip{display:inline-flex;align-items:center;gap:5px;background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:3px 8px 3px 10px;font-size:12px;margin:2px;cursor:grab;user-select:none;}
.stay-act-chip.done{opacity:.5;text-decoration:line-through;}
.stay-days-wrap{border:1px solid var(--border);border-top:none;border-radius:0 0 var(--radius) var(--radius);overflow:hidden;}
.stay-days-wrap .dp-card{border-radius:0;border:none;border-bottom:1px solid var(--border);margin-bottom:0;padding-left:18px;}
.stay-days-wrap .dp-card:last-child{border-bottom:none;}
/* ── DAYPLAN CALENDAR ── */
.dp-cal-wrap{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:12px;margin-bottom:4px;}
.dp-cal-month-title{font-size:13px;font-weight:600;margin-bottom:8px;color:var(--text);}
.dp-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:0;}
.dp-cal-dn{text-align:center;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted);padding:3px 0 6px;}
.dp-cal-cell{height:32px;display:flex;align-items:center;justify-content:center;outline:none;}
.dp-cal-legend{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;padding-top:8px;border-top:1px solid var(--border);}
.dp-cal-legend-item{display:flex;align-items:center;gap:4px;font-size:10px;color:var(--text-muted);}
@media(max-width:700px){#panel-dayplan>div[style*="grid"]{grid-template-columns:1fr;}#dp-calendar{position:static!important;}}
.dp-cal-legend-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;}
/* ── DEST PICK MAP ── */
#dest-pick-map{height:180px;border-radius:var(--radius-sm);border:1px solid var(--border);margin-top:4px;background:var(--surface2);}
#dest-pick-map.hidden{display:none;}

/* ── DOKUMENTE ── */
.doc-grid{display:flex;flex-direction:column;gap:10px;}
.doc-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:14px 18px;display:flex;align-items:center;gap:14px;}
.doc-icon{font-size:28px;width:42px;text-align:center;flex-shrink:0;}
.doc-body{flex:1;min-width:0;}
.doc-type{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);margin-bottom:2px;}
.doc-holder{font-size:15px;font-weight:500;}
.doc-meta{font-size:12px;color:var(--text-muted);margin-top:3px;display:flex;gap:10px;flex-wrap:wrap;}
.doc-num{font-family:monospace;font-size:13px;color:var(--text);margin-top:4px;letter-spacing:.05em;}

/* ── BUDGET ── */
.budget-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px;margin-bottom:24px;}
.bstat{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px 20px;box-shadow:var(--shadow);}
.bstat-label{font-size:11px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.07em;margin-bottom:6px;}
.bstat-val{font-family:var(--font-display);font-size:26px;font-weight:300;}
.bstat-val.over{color:var(--danger);}
.exp-list{display:flex;flex-direction:column;gap:8px;}
.exp-item{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);padding:11px 14px;display:flex;align-items:center;gap:12px;}
.exp-icon{font-size:20px;width:32px;text-align:center;}
.exp-info{flex:1;}
.exp-name{font-weight:500;font-size:14px;}
.exp-cat{font-size:12px;color:var(--text-muted);}
.exp-amt{font-family:var(--font-display);font-size:17px;}

/* ── PACKING ── */
.pack-cat-block{margin-bottom:22px;}
.pack-cat-title{font-family:var(--font-display);font-size:20px;font-weight:400;margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;}
.pack-items{display:flex;flex-direction:column;gap:5px;}
.pack-item{display:flex;align-items:center;gap:10px;padding:8px 12px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);}
.pack-item.checked{opacity:.5;}
.pack-item.checked .pack-item-name{text-decoration:line-through;}
.pack-item input[type=checkbox]{width:15px;height:15px;accent-color:var(--accent);cursor:pointer;flex-shrink:0;}
.pack-item-name{flex:1;font-size:14px;}
.pack-qty{display:flex;align-items:center;gap:0;background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden;flex-shrink:0;}
.pack-qty button{border:none;background:none;padding:3px 8px;font-size:15px;line-height:1;cursor:pointer;color:var(--text-muted);}
.pack-qty button:hover{background:var(--accent-light);color:var(--accent);}
.pack-qty-val{font-size:13px;font-weight:600;min-width:22px;text-align:center;color:var(--text);}

/* ── ACCOMMODATION ── */
.accom-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:16px;}
.accom-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;}
.accom-head{background:var(--accent-light);padding:13px 16px;}
.accom-body{padding:14px 16px;display:flex;flex-direction:column;gap:5px;}
.accom-info{font-size:13px;color:var(--text-muted);}

/* ── BACKLOG ── */
.backlog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px;}
.bl-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px 18px;transition:box-shadow .2s;}
.bl-card:hover{box-shadow:var(--shadow-lg);}
.bl-title{font-family:var(--font-display);font-size:19px;font-weight:400;margin-bottom:5px;}
.bl-desc{font-size:13px;color:var(--text-muted);margin-bottom:8px;}
.bl-tags{display:flex;flex-wrap:wrap;gap:5px;}

/* ── TRANSPORT ── */
.transport-list{display:flex;flex-direction:column;gap:12px;}
.transport-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;}
.transport-card-head{padding:14px 18px;display:flex;align-items:center;gap:12px;}
.transport-icon{font-size:24px;width:40px;text-align:center;flex-shrink:0;}
.transport-info{flex:1;}
.transport-route{font-weight:600;font-size:15px;}
.transport-meta{font-size:13px;color:var(--text-muted);margin-top:2px;}
.transport-card-foot{padding:8px 18px;border-top:1px solid var(--border);display:flex;align-items:center;gap:8px;background:var(--surface2);}

/* ── EMPTY STATE ── */
.empty{text-align:center;padding:50px 20px;color:var(--text-muted);}
.empty-icon{font-size:44px;margin-bottom:14px;opacity:.5;}
.empty-title{font-family:var(--font-display);font-size:22px;font-weight:300;margin-bottom:6px;color:var(--text);}
.empty-sub{font-size:13px;}

/* ── BOOKING ALERTS ── */
.booking-alerts{display:flex;flex-direction:column;gap:10px;margin-bottom:20px;}
.alert-banner{border-radius:var(--radius-sm);padding:12px 16px;display:flex;align-items:flex-start;gap:12px;font-size:14px;animation:slideUp .2s ease;}
.alert-banner-icon{font-size:20px;flex-shrink:0;margin-top:1px;}
.alert-banner-body{flex:1;}
.alert-banner-title{font-weight:600;margin-bottom:2px;}
.alert-banner-detail{font-size:13px;opacity:.85;}
.alert-gap{background:#fef3cd;border:1px solid #f0c040;color:#856404;}
.alert-overlap{background:#fdecea;border:1px solid #f0a0a0;color:#7a1a14;}
.alert-ok{background:var(--accent-light);border:1px solid #a8d4b4;color:#1a4a28;}

/* timeline */
.accom-timeline{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px 24px;margin-bottom:20px;overflow-x:auto;}
.accom-timeline-title{font-family:var(--font-display);font-size:18px;font-weight:400;margin-bottom:14px;}
.timeline-track{position:relative;height:52px;min-width:600px;}
.timeline-bar{position:absolute;height:36px;top:8px;border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;color:white;overflow:hidden;white-space:nowrap;padding:0 6px;box-shadow:0 1px 4px rgba(0,0,0,.15);cursor:default;transition:opacity .15s;}
.timeline-bar:hover{opacity:.85;}
.timeline-axis{display:flex;justify-content:space-between;font-size:11px;color:var(--text-muted);margin-top:4px;min-width:600px;}
.timeline-gap-marker{position:absolute;height:36px;top:8px;background:repeating-linear-gradient(45deg,#fef3cd,#fef3cd 4px,#f0c04033 4px,#f0c04033 8px);border:1px dashed #f0c040;border-radius:4px;}

.flex{display:flex;} .gap-2{gap:8px;} .gap-3{gap:12px;} .items-center{align-items:center;} .justify-between{justify-content:space-between;} .text-muted{color:var(--text-muted);} .text-sm{font-size:13px;} .w-full{width:100%;} .mt-3{margin-top:12px;} .mt-4{margin-top:16px;}
::-webkit-scrollbar{width:5px;height:5px;} ::-webkit-scrollbar-track{background:var(--surface2);} ::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px;}
/* ── SHARE VIEW ── */
#share-view{display:none;min-height:100vh;background:var(--bg);font-family:var(--font-body);}
#share-view.active{display:block;}
.sv-header{background:var(--accent);color:white;padding:28px 32px 24px;}
.sv-trip-name{font-family:var(--font-display);font-size:36px;font-weight:400;margin:0 0 6px;}
.sv-meta{display:flex;flex-wrap:wrap;gap:12px;font-size:14px;opacity:.88;}
.sv-body{max-width:860px;margin:0 auto;padding:28px 24px;}
.sv-section{margin-bottom:36px;}
.sv-section-title{font-family:var(--font-display);font-size:22px;font-weight:400;margin-bottom:16px;padding-bottom:8px;border-bottom:2px solid var(--border);}
.sv-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px 20px;margin-bottom:12px;box-shadow:var(--shadow);}
.sv-card-title{font-weight:600;font-size:15px;margin-bottom:4px;}
.sv-card-sub{font-size:13px;color:var(--text-muted);}
.sv-dest-img{width:100%;max-height:180px;object-fit:cover;border-radius:var(--radius-sm);margin-bottom:10px;}
.sv-day{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:12px;overflow:hidden;}
.sv-day-header{background:var(--accent);color:white;padding:10px 18px;font-weight:600;font-size:14px;}
.sv-day-body{padding:14px 18px;font-size:14px;color:var(--text);white-space:pre-wrap;}
.sv-accom{display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:12px 16px;margin-bottom:10px;}
.sv-powered{text-align:center;padding:24px;font-size:12px;color:var(--text-muted);}
.sv-powered a{color:var(--accent);text-decoration:none;}

/* ── STICKY NOTES ── */
.notes-canvas-wrap{position:relative;width:100%;min-height:calc(100vh - 230px);background:var(--surface2);border-radius:12px;border:1px solid var(--border);background-image:radial-gradient(circle,rgba(0,0,0,.08) 1px,transparent 1px);background-size:24px 24px;}
.notes-topbar{display:flex;align-items:center;gap:8px;margin-bottom:12px;flex-wrap:wrap;}
.note-color-btn{width:28px;height:28px;border-radius:50%;border:2px solid rgba(0,0,0,.12);cursor:pointer;transition:transform .15s,box-shadow .15s;flex-shrink:0;}
.note-color-btn:hover{transform:scale(1.2);box-shadow:0 2px 8px rgba(0,0,0,.2);}
.note-card{position:absolute;display:flex;flex-direction:column;border-radius:12px;box-shadow:0 4px 20px rgba(0,0,0,.12),0 1px 4px rgba(0,0,0,.08);min-width:180px;min-height:100px;transition:box-shadow .2s;}
.note-card:hover{box-shadow:0 8px 32px rgba(0,0,0,.16),0 2px 8px rgba(0,0,0,.1);}
.note-card.dragging{box-shadow:0 16px 48px rgba(0,0,0,.22);z-index:100;transition:none;}
.note-handle{height:32px;border-radius:12px 12px 0 0;cursor:grab;display:flex;align-items:center;justify-content:space-between;padding:0 10px;flex-shrink:0;background:rgba(0,0,0,.08);}
.note-handle:active{cursor:grabbing;}
.note-handle-grip{color:rgba(0,0,0,.35);font-size:14px;letter-spacing:1px;}
.note-del{background:none;border:none;cursor:pointer;font-size:14px;padding:2px 4px;border-radius:4px;opacity:0;transition:opacity .15s;line-height:1;color:rgba(0,0,0,.5);}
.note-card:hover .note-del{opacity:1;}
.note-fmtbar{display:flex;align-items:center;gap:1px;padding:3px 8px;background:rgba(255,255,255,.4);border-bottom:1px solid rgba(0,0,0,.07);flex-shrink:0;backdrop-filter:blur(4px);}
.note-fmtbar button{background:none;border:none;cursor:pointer;font-size:12px;padding:3px 6px;border-radius:5px;color:rgba(0,0,0,.6);font-family:var(--font-body);line-height:1;transition:background .12s;}
.note-fmtbar button:hover{background:rgba(0,0,0,.1);}
.note-fmtbar select{font-size:11px;border:none;border-radius:5px;padding:2px 4px;background:rgba(0,0,0,.06);cursor:pointer;font-family:var(--font-body);color:rgba(0,0,0,.6);outline:none;}
.note-fmtbar .fmt-sep{width:1px;height:14px;background:rgba(0,0,0,.12);margin:0 3px;flex-shrink:0;}
.note-fmtbar input[type=color]{width:20px;height:20px;border:none;background:none;cursor:pointer;padding:0;border-radius:4px;}
.note-body{flex:1;padding:10px 12px;outline:none;font-size:14px;line-height:1.6;word-break:break-word;overflow-y:auto;cursor:text;color:rgba(0,0,0,.8);}
.note-body:empty::before{content:attr(data-ph);color:rgba(0,0,0,.28);pointer-events:none;font-style:italic;}
.note-resize{position:absolute;bottom:4px;right:4px;width:16px;height:16px;cursor:se-resize;opacity:0;transition:opacity .15s;display:flex;align-items:center;justify-content:center;color:rgba(0,0,0,.4);font-size:11px;}
.note-card:hover .note-resize{opacity:1;}
.notes-empty{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;color:rgba(0,0,0,.25);pointer-events:none;user-select:none;}
.notes-empty-icon{font-size:48px;margin-bottom:12px;}
.notes-empty-text{font-size:14px;font-family:var(--font-display);}

/* ── PACKING DRAG & SUGGEST ── */
.pack-item{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:8px;background:var(--surface);border:1px solid var(--border);margin-bottom:6px;transition:opacity .2s,background .15s;cursor:default;}
.pack-item.dragging{opacity:.4;}
.pack-item.drag-over{background:var(--accent-light);border-color:var(--accent);}
.pack-cat-block.drag-over-cat{background:var(--accent-light);border-radius:var(--radius);outline:2px dashed var(--accent);}
.pack-drag-handle{color:var(--text-muted);cursor:grab;font-size:13px;flex-shrink:0;padding:0 2px;user-select:none;}
.pack-drag-handle:active{cursor:grabbing;}
.pack-cat-suggestion{display:inline-flex;align-items:center;gap:6px;background:var(--surface2);color:var(--text);border:1px solid var(--border);border-radius:var(--radius-sm);padding:6px 14px;font-size:13px;font-weight:500;cursor:pointer;transition:background .15s;width:100%;justify-content:center;margin-top:6px;}
.pack-cat-suggestion:hover{background:var(--border);}

/* leaflet z-index — must be below modals */
.leaflet-pane{z-index:400 !important;}
.leaflet-top,.leaflet-bottom{z-index:401 !important;}
.leaflet-control{z-index:402 !important;}
/* flatpickr overrides */
.flatpickr-calendar{font-family:var(--font-body);border-radius:var(--radius);box-shadow:var(--shadow-lg);border:1px solid var(--border);}
.flatpickr-day.selected,.flatpickr-day.selected:hover{background:var(--accent);border-color:var(--accent);}
.flatpickr-day.inRange{background:var(--accent-light);border-color:var(--accent-light);color:var(--accent);}
.flatpickr-day.startRange,.flatpickr-day.endRange{background:var(--accent);border-color:var(--accent);}
.flatpickr-day:hover{background:var(--surface2);}
.flatpickr-months .flatpickr-month{background:var(--accent);color:white;border-radius:var(--radius) var(--radius) 0 0;}
.flatpickr-current-month,.flatpickr-monthDropdown-months{color:white;font-family:var(--font-display);font-size:16px;}
.flatpickr-current-month input.cur-year{color:white;}
.flatpickr-prev-month,.flatpickr-next-month{color:white !important;fill:white !important;}
.flatpickr-weekday{color:var(--text-muted);font-weight:500;}
.flatpickr-input{cursor:pointer;}
/* ── WORLD MAP ── */
#world-map-el{height:calc(100vh - 340px);min-height:360px;border-radius:var(--radius);overflow:hidden;border:1px solid var(--border);}
.world-tooltip{background:var(--text);color:white;border:none;border-radius:4px;font-family:var(--font-body);font-size:13px;padding:4px 8px;}
.visited-badge{display:inline-flex;align-items:center;gap:6px;background:var(--accent-light);color:var(--accent);padding:4px 14px;border-radius:20px;font-size:13px;font-weight:500;}
#visited-flags{display:flex;flex-wrap:wrap;gap:4px;padding:10px 14px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:10px;min-height:44px;align-items:center;}
#visited-flags .vflag{font-size:22px;cursor:pointer;line-height:1;transition:transform .15s;}
#visited-flags .vflag:hover{transform:scale(1.2);}
#country-list-panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:14px;margin-bottom:10px;}
#country-search{width:100%;padding:8px 12px;border:1px solid var(--border);border-radius:var(--radius-sm);font-family:var(--font-body);font-size:14px;outline:none;margin-bottom:10px;}
#country-search:focus{border-color:var(--accent);}
#country-checklist{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:2px;max-height:280px;overflow-y:auto;}
.country-check-item{display:flex;align-items:center;gap:8px;padding:5px 8px;border-radius:var(--radius-sm);cursor:pointer;transition:background .1s;}
.country-check-item:hover{background:var(--surface2);}
.country-check-item input{width:15px;height:15px;cursor:pointer;accent-color:var(--accent);}
.country-check-item .cf{font-size:18px;line-height:1;}
.country-check-item .cn{font-size:13px;}
/* ── AUTH ── */
.auth-pill{display:flex;align-items:center;gap:8px;padding:5px 12px;border:1px solid var(--border);border-radius:20px;font-size:13px;cursor:pointer;background:transparent;font-family:var(--font-body);color:var(--text-muted);transition:all .15s;}
.auth-pill:hover{border-color:var(--accent);color:var(--accent);}
.auth-pill.online{border-color:var(--accent);color:var(--accent);background:var(--accent-light);}
.auth-dot{width:7px;height:7px;border-radius:50%;background:var(--text-muted);}
.auth-pill.online .auth-dot{background:var(--accent);}
.auth-form-group{display:flex;flex-direction:column;gap:4px;margin-bottom:14px;}
.auth-form-group label{font-size:13px;font-weight:500;color:var(--text-muted);}
.auth-form-group input{padding:9px 12px;border:1px solid var(--border);border-radius:var(--radius-sm);font-family:var(--font-body);font-size:14px;outline:none;transition:border-color .15s;}
.auth-form-group input:focus{border-color:var(--accent);}
.auth-tabs{display:flex;gap:0;border-bottom:1px solid var(--border);margin-bottom:20px;}
.auth-tab{padding:10px 20px;border:none;background:transparent;cursor:pointer;font-family:var(--font-body);font-size:14px;font-weight:500;color:var(--text-muted);border-bottom:2px solid transparent;margin-bottom:-1px;transition:all .15s;}
.auth-tab.active{color:var(--accent);border-bottom-color:var(--accent);}
.auth-error{background:var(--danger-light);color:var(--danger);border-radius:var(--radius-sm);padding:8px 12px;font-size:13px;margin-bottom:12px;display:none;}
.sync-indicator{position:fixed;bottom:16px;right:16px;background:var(--accent);color:white;padding:6px 14px;border-radius:20px;font-size:12px;font-family:var(--font-body);box-shadow:var(--shadow);opacity:0;transition:opacity .3s;pointer-events:none;z-index:999;}
.sync-indicator.show{opacity:1;}
@media(max-width:600px){header,nav{padding-left:16px;padding-right:16px;}main{padding:18px 14px;}.section-title{font-size:28px;}}
</style>
</head>
<body>
<header>
  <div class="logo" onclick="showTopSection('dashboard')" style="cursor:pointer;">Travel<span>planer</span></div>
  <div style="display:flex;align-items:center;gap:10px;">
    <button onclick="openModal('modal-export')" style="padding:5px 12px;border:1px solid var(--border);border-radius:var(--radius-sm);background:transparent;font-family:var(--font-body);font-size:13px;cursor:pointer;color:var(--text-muted);">💾 Export</button>
    <button id="docs-btn" onclick="openModal('modal-docs')" style="display:none;padding:5px 12px;border:1px solid var(--border);border-radius:var(--radius-sm);background:transparent;font-family:var(--font-body);font-size:13px;cursor:pointer;color:var(--text-muted);" title="Meine Dokumente">🔒 Dokumente</button>
    <button class="auth-pill" id="auth-btn" onclick="openModal('modal-auth')"><span class="auth-dot"></span><span id="auth-label">Anmelden</span></button>
    <div class="lang-toggle">
      <button class="active" onclick="setLang('de')">DE</button>
      <button onclick="setLang('en')">EN</button>
    </div>
  </div>
</header>


<!-- TOP NAV: Dashboard | Reisen | Backlog | Weltkarte -->
<nav id="top-nav">
  <button class="active" onclick="showTopSection('dashboard')" id="topnav-dashboard">🏠 Dashboard</button>
  <button onclick="showTopSection('trips')" id="topnav-trips">✈️ Reisen</button>
  <button onclick="showTopSection('backlog')" id="topnav-backlog">⭐ Backlog</button>
  <button onclick="showTopSection('notes')" id="topnav-notes">📝 Notizen</button>
  <button onclick="showTopSection('worldmap')" id="topnav-worldmap">🌍 Weltkarte</button>
</nav>

<!-- TRIP CONTEXT BAR -->
<div id="trip-ctx-bar">
  <div id="trip-ctx-info">
    <span style="font-size:16px;">✈️</span>
    <span id="trip-ctx-name"></span>
    <span id="trip-ctx-dates"></span>
  </div>
  <div style="display:flex;gap:6px;flex-shrink:0;">
    <button onclick="openShareModal(activeTripId)" id="trip-share-btn" style="background:rgba(255,255,255,.2);border:none;color:white;border-radius:var(--radius-sm);padding:4px 12px;font-family:var(--font-body);font-size:12px;cursor:pointer;white-space:nowrap;">🔗 Teilen</button>
    <button onclick="clearTripCtx()" id="trip-ctx-close">✕ Übersicht</button>
  </div>
</div>

<!-- TRIP SUBMENU -->
<nav id="sub-nav">
  <button onclick="showTab('destinations')" id="tab-destinations">📍 Ziele</button>
  <button onclick="showTab('route')" id="tab-route">🗺️ Route</button>
  <button onclick="showTab('dayplan')" id="tab-dayplan">📅 Tagesplanung</button>
  <button onclick="showTab('budget')" id="tab-budget">💶 Budget</button>
  <button onclick="showTab('packing')" id="tab-packing">🎒 Packliste</button>
  <button onclick="showTab('accommodation')" id="tab-accom">🏨 Unterkunft</button>
  <button onclick="showTab('transport')" id="tab-transport">🚌 Transport</button>
  <button onclick="showTab('todo')" id="tab-todo">✅ Todo Liste</button>
  <button onclick="showTab('notes')" id="tab-notes">📝 Notizen</button>
</nav>

<!-- SHARE VIEW (read-only, shown when ?share= param present) -->
<div id="share-view"></div>

<div id="app-body">
<!-- SIDEBAR -->
<aside id="sidebar">
  <div id="sidebar-trips-section">
    <div class="sidebar-section-title">Reisen</div>
    <div id="sidebar-trips-list"></div>
    <button class="sidebar-add-btn" onclick="openModal('modal-trip')">+ Neue Reise</button>
  </div>
  <div id="sidebar-backlog-section" style="display:none;">
    <div class="sidebar-section-title">Länder</div>
    <div id="sidebar-countries-list"></div>
    <button class="sidebar-add-btn" onclick="openModal('modal-country')">+ Land hinzufügen</button>
  </div>
</aside>

<main>
<!-- DASHBOARD -->
<div class="tab-panel active" id="panel-dashboard">
  <div class="section-header">
    <div class="section-title"><small>Übersicht</small><span>Dashboard</span></div>
  </div>
  <div id="dashboard-content"></div>
</div>
<!-- TRIPS -->
<div class="tab-panel" id="panel-trips">
  <div class="section-header">
    <div class="section-title"><small data-i18n="trips_sub">Meine Abenteuer</small><span data-i18n="nav_trips">Reisen</span></div>
    <button class="btn btn-primary" onclick="openModal('modal-trip')">+ <span data-i18n="trip_add">Neue Reise</span></button>
  </div>
  <div id="trip-grid"></div>
</div>

<!-- DESTINATIONS -->
<div class="tab-panel" id="panel-destinations">
  <div class="section-header">
    <div class="section-title"><small data-i18n="dest_sub">Interessante Orte</small><span data-i18n="nav_dest">Ziele</span></div>
    <div class="flex gap-2 items-center">
      <button class="btn btn-secondary" onclick="openModal('modal-screenshot')">🗺️ Screenshot importieren</button>
      <button class="btn btn-primary" onclick="openModal('modal-dest')">+ <span data-i18n="dest_add">Ziel</span></button>
    </div>
  </div>
  <div class="dest-layout">
    <div class="dest-grid" id="dest-grid"></div>
    <div>
      <div class="map-box">
        <div class="map-box-header"><strong data-i18n="map_title">Karte</strong><span class="text-sm text-muted">Nummern = Reihenfolge &nbsp;·&nbsp; Klick = neues Ziel</span></div>
<div id="dest-map" style="height:420px;width:100%;border-radius:0 0 var(--radius) var(--radius);"></div>
      </div>
    </div>
  </div>
</div>

<!-- ROUTE -->
<div class="tab-panel" id="panel-route">
  <div class="section-header">
    <div class="section-title"><small data-i18n="route_sub">Tagesplanung</small><span data-i18n="nav_route">Route</span></div>
    <div class="flex gap-2 items-center">
      <button class="btn btn-secondary" onclick="openModal('modal-plan-screenshot')">📋 Planung importieren</button>
      <button class="btn btn-primary" onclick="openModal('modal-route')">+ Route</button>
    </div>
  </div>
  <div class="route-layout">
    <div class="route-list" id="route-list"></div>
<div id="route-map" style="height:420px;border-radius:var(--radius);overflow:hidden;border:1px solid var(--border);box-shadow:var(--shadow);"></div>
  </div>
</div>

<!-- TAGESPLANUNG -->
<div class="tab-panel" id="panel-dayplan">
  <div class="section-header">
    <div class="section-title"><small>Tag für Tag</small><span>Tagesplanung</span></div>
    <button class="btn btn-primary" onclick="openDayplanModal()">+ Tag</button>
  </div>
  <div style="display:grid;grid-template-columns:1fr 300px;gap:16px;align-items:start;">
    <div id="dayplan-list"></div>
    <div id="dp-calendar" style="position:sticky;top:16px;"></div>
  </div>
</div>

<!-- BUDGET -->
<div class="tab-panel" id="panel-budget">
  <div class="section-header">
    <div class="section-title"><small data-i18n="budget_sub">Ausgaben & Übersicht</small><span data-i18n="nav_budget">Budget</span></div>
    <div class="flex gap-2 items-center">
      <button class="btn btn-primary" onclick="openModal('modal-exp')">+ <span data-i18n="exp_add">Ausgabe</span></button>
    </div>
  </div>
  <div class="budget-stats" id="budget-stats"></div>
  <div class="card"><div class="card-header"><strong data-i18n="exp_title">Ausgaben</strong></div><div class="card-body"><div class="exp-list" id="exp-list"></div></div></div>
</div>

<!-- TRANSPORT -->
<div class="tab-panel" id="panel-transport">
  <div class="section-header">
    <div class="section-title"><small>Verbindungen & Transfers</small><span>Transport</span></div>
    <button class="btn btn-primary" onclick="openTransportModal()">+ Transport</button>
  </div>
  <div id="transport-list"></div>
</div>

<!-- PACKING -->
<div class="tab-panel" id="panel-packing">
  <div class="section-header">
    <div class="section-title"><small data-i18n="pack_sub">Nichts vergessen</small><span data-i18n="nav_packing">Packliste</span></div>
    <div class="flex gap-2 items-center">
      <button class="btn btn-secondary" onclick="openPackTemplates()">📋 Templates</button>
      <button class="btn btn-secondary" onclick="openModal('modal-pack-item')">+ Item</button>
      <button class="btn btn-primary" onclick="openModal('modal-pack-cat')">+ Kategorie</button>
    </div>
  </div>
  <div id="packing-content"></div>
</div>

<!-- ACCOMMODATION -->
<div class="tab-panel" id="panel-accommodation">
  <div class="section-header">
    <div class="section-title"><small data-i18n="accom_sub">Hotels & Unterkünfte</small><span data-i18n="nav_accom">Unterkunft</span></div>
    <div class="flex gap-2 items-center">
      <button class="btn btn-primary" onclick="openModal('modal-accom')">+ <span data-i18n="accom_add">Unterkunft</span></button>
    </div>
  </div>
  <div class="booking-alerts" id="booking-alerts"></div>
  <div id="accom-timeline-wrap"></div>
  <div class="accom-grid" id="accom-grid"></div>
</div>

<!-- TODO -->
<div class="tab-panel" id="panel-todo">
  <div class="section-header">
    <div class="section-title"><small>Aufgaben</small><span>Todo Liste</span></div>
    <button class="btn btn-primary" onclick="openTodoForm()">+ Todo</button>
  </div>
  <div id="todo-add-form" style="display:none;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:14px 16px;margin-bottom:16px;">
    <input type="text" id="todo-input" placeholder="Neue Aufgabe…" style="width:100%;padding:9px 12px;border:1px solid var(--border);border-radius:var(--radius-sm);font-family:var(--font-body);font-size:14px;background:var(--surface);color:var(--text);outline:none;box-sizing:border-box;margin-bottom:8px;" onkeydown="if(event.key==='Enter')saveTodo()">
    <input type="text" id="todo-date" placeholder="Datum (optional)" readonly style="width:100%;padding:9px 12px;border:1px solid var(--border);border-radius:var(--radius-sm);font-family:var(--font-body);font-size:14px;background:var(--surface);color:var(--text);outline:none;box-sizing:border-box;cursor:pointer;">
    <div style="display:flex;gap:8px;margin-top:10px;">
      <button class="btn btn-primary" onclick="saveTodo()">Hinzufügen</button>
      <button class="btn btn-secondary" onclick="closeTodoForm()">Abbrechen</button>
    </div>
  </div>
  <div id="todo-list"></div>
</div>

<!-- BACKLOG -->
<div class="tab-panel" id="panel-backlog">
  <!-- COUNTRY OVERVIEW -->
  <div id="backlog-countries-view">
    <div class="section-header">
      <div class="section-title"><small>Traumreisen</small><span>Backlog</span></div>
      <div class="flex gap-2">
        <button class="btn btn-secondary" onclick="openModal('modal-country')">+ Land</button>
        <button class="btn btn-primary" onclick="openModal('modal-backlog')">+ Idee</button>
      </div>
    </div>
    <div class="country-grid" id="country-grid"></div>
  </div>
  <!-- COUNTRY DETAIL -->
  <div id="backlog-country-detail" style="display:none;">
    <div class="country-detail-header">
      <button class="country-back-btn" onclick="showBacklogOverview()">← Zurück</button>
      <div class="section-title" style="font-size:28px;" id="country-detail-title"></div>
    </div>
    <div class="section-header">
      <div></div>
      <button class="btn btn-primary" onclick="openModal('modal-backlog')">+ Idee hinzufügen</button>
    </div>
    <div class="backlog-grid" id="backlog-grid"></div>
  </div>
</div>
<!-- NOTIZEN BOARD -->
<div class="tab-panel" id="panel-notes">
  <div class="section-header notes-topbar">
    <div class="section-title"><small id="notes-ctx-label">Allgemeine Notizen</small><span>Notizen</span></div>
    <div style="display:flex;gap:8px;flex-wrap:wrap;align-items:center;">
      <span style="font-size:13px;color:var(--text-muted);margin-right:2px;">+ Notiz:</span>
      <button class="note-color-btn" onclick="addNote('#fff9c4')" title="Gelb" style="background:#fff9c4;"></button>
      <button class="note-color-btn" onclick="addNote('#bbdefb')" title="Blau" style="background:#bbdefb;"></button>
      <button class="note-color-btn" onclick="addNote('#c8e6c9')" title="Grün" style="background:#c8e6c9;"></button>
      <button class="note-color-btn" onclick="addNote('#f8bbd0')" title="Rosa" style="background:#f8bbd0;"></button>
      <button class="note-color-btn" onclick="addNote('#ffe0b2')" title="Orange" style="background:#ffe0b2;"></button>
      <button class="note-color-btn" onclick="addNote('#e1bee7')" title="Lila" style="background:#e1bee7;"></button>
      <button class="note-color-btn" onclick="addNote('#ffffff')" title="Weiß" style="background:#ffffff;"></button>
    </div>
  </div>
  <div class="notes-canvas-wrap" id="notes-canvas">
    <div class="notes-empty" id="notes-empty">
      <div class="notes-empty-icon">📝</div>
      <div class="notes-empty-text">Wähle eine Farbe oben um eine Notiz hinzuzufügen</div>
    </div>
  </div>
</div>
<!-- WORLD MAP -->
<div class="tab-panel" id="panel-worldmap">
  <div class="section-header" style="margin-bottom:10px;">
    <div class="section-title"><small>Besuchte Länder</small><span>Weltkarte</span></div>
    <div style="display:flex;align-items:center;gap:8px;">
      <button class="btn btn-secondary" onclick="toggleCountryList()" id="country-list-toggle">📋 Länderliste</button>
      <div class="visited-badge">🌍 <span id="visited-count">0</span> Länder</div>
    </div>
  </div>
  <div id="visited-flags"><span style="color:var(--text-muted);font-size:13px;">Noch keine Länder besucht — klicke auf die Karte oder nutze die Länderliste.</span></div>
  <div id="country-list-panel" style="display:none;">
    <input type="text" id="country-search" placeholder="🔍 Land suchen…" oninput="renderCountryList(this.value)">
    <div id="country-checklist"></div>
  </div>
  <div id="world-map-el"></div>
  <p style="font-size:12px;color:var(--text-muted);margin-top:6px;">Klicke auf ein Land auf der Karte um es zu markieren.</p>
</div>
</main>
</div><!-- /app-body -->

<!-- SYNC INDICATOR -->
<div class="sync-indicator" id="sync-indicator">☁️ Gespeichert</div>

<!-- AUTH MODAL -->
<div class="modal-overlay" id="modal-auth">
  <div class="modal" style="max-width:420px;">
    <div class="modal-header"><h3>🔐 Konto</h3><button class="btn-icon" id="auth-close-btn" onclick="closeModal('modal-auth')" style="display:none;">✕</button></div>
    <div class="modal-body" id="auth-modal-body">
      <!-- logged out view -->
      <div id="auth-loggedout">
        <div class="auth-tabs">
          <button class="auth-tab active" onclick="switchAuthTab('login')">Anmelden</button>
          <button class="auth-tab" onclick="switchAuthTab('register')">Registrieren</button>
        </div>
        <div class="auth-error" id="auth-error"></div>
        <div class="auth-form-group">
          <label>E-Mail</label>
          <input type="email" id="auth-email" placeholder="deine@email.com" autocomplete="email"/>
        </div>
        <div class="auth-form-group">
          <label>Passwort</label>
          <input type="password" id="auth-password" placeholder="Passwort" autocomplete="current-password"/>
        </div>
        <button class="btn btn-primary w-full" id="auth-submit-btn" onclick="authSubmit()">Anmelden</button>
        <p style="font-size:12px;color:var(--text-muted);margin-top:12px;text-align:center;">Deine Daten werden verschlüsselt in der Cloud gespeichert und sind auf allen Geräten verfügbar.</p>
      </div>
      <!-- logged in view -->
      <div id="auth-loggedin" style="display:none;">
        <div style="text-align:center;padding:10px 0 20px;">
          <div style="font-size:40px;margin-bottom:8px;">✅</div>
          <div style="font-weight:500;margin-bottom:4px;" id="auth-user-email"></div>
          <div style="font-size:13px;color:var(--text-muted);">Daten werden automatisch synchronisiert.</div>
        </div>
        <button class="btn btn-secondary w-full" onclick="authLogout()">Abmelden</button>
      </div>
    </div>
  </div>
</div>

<!-- SHARE MODAL -->
<div class="modal-overlay" id="modal-share">
  <div class="modal-box" style="max-width:480px;">
    <div class="modal-header"><h3>🔗 Reise teilen</h3><button class="btn-icon" onclick="closeModal('modal-share')">✕</button></div>
    <div class="modal-body">
      <div id="share-status" style="font-size:13px;color:var(--text-muted);margin-bottom:12px;">Erstelle Link…</div>
      <div id="share-link-row" style="display:none;gap:8px;align-items:center;">
        <input id="share-link-input" type="text" readonly style="flex:1;padding:8px 10px;border:1px solid var(--border);border-radius:var(--radius-sm);font-size:13px;font-family:monospace;background:var(--surface2);color:var(--text);">
        <button class="btn btn-secondary" onclick="copyShareLink()" id="share-copy-btn">📋 Kopieren</button>
      </div>
      <div id="share-info" style="display:none;font-size:12px;color:var(--text-muted);margin-top:10px;line-height:1.6;">
        Der Link enthält: Reiseinfos, Ziele, Route, Tagesplanung und Unterkünfte (nur Name &amp; Ort).<br>
        Persönliche Daten (Preise, Buchungsnummern) werden nicht geteilt.
      </div>
    </div>
    <div class="modal-footer">
      <button class="btn btn-secondary" onclick="closeModal('modal-share')">Schließen</button>
      <button class="btn btn-primary" id="share-regen-btn" onclick="regenShareLink()" style="display:none;">🔄 Neu generieren</button>
    </div>
  </div>
</div>
<!-- EXPORT/IMPORT MODAL -->
<div class="modal-overlay" id="modal-export">
  <div class="modal">
    <div class="modal-header"><h3>💾 Daten exportieren / importieren</h3><button class="btn-icon" onclick="closeModal('modal-export')">✕</button></div>
    <div class="modal-body">
      <div style="display:flex;flex-direction:column;gap:10px;">
        <button class="btn btn-primary w-full" onclick="exportData()">⬇️ Alle Daten als JSON exportieren</button>
        <div style="border-top:1px solid var(--border);padding-top:12px;">
          <div style="font-size:13px;color:var(--text-muted);margin-bottom:8px;">⚠️ Import überschreibt alle bestehenden Daten!</div>
          <div class="form-group">
            <label>JSON-Datei importieren</label>
            <input type="file" id="import-file" accept=".json" onchange="importData(this)" style="padding:8px;border:1px solid var(--border);border-radius:var(--radius-sm);font-family:var(--font-body);font-size:13px;width:100%;">
          </div>
        </div>
        <div id="import-status" style="font-size:13px;"></div>
      </div>
    </div>
    <div class="modal-footer"><button class="btn btn-secondary" onclick="closeModal('modal-export')">Schließen</button></div>
  </div>
</div>

<!-- PACKING TEMPLATES MODAL -->
<div class="modal-overlay" id="modal-pack-templates">
  <div class="modal" style="max-width:600px;">
    <div class="modal-header">
      <h3 id="pt-modal-title">📋 Packlisten-Template</h3>
      <div style="display:flex;gap:6px;">
        <button class="btn btn-sm btn-secondary" id="pt-edit-toggle" onclick="toggleTemplateEdit()">✏️ Bearbeiten</button>
        <button class="btn-icon" onclick="closeModal('modal-pack-templates')">✕</button>
      </div>
    </div>
    <div class="modal-body">
      <div id="pt-apply-view">
        <div style="font-size:13px;color:var(--text-muted);margin-bottom:12px;">Wähle ein Template — Items werden zur aktuellen Packliste hinzugefügt.</div>
        <div style="display:grid;grid-template-columns:1fr 1fr;gap:10px;" id="template-grid"></div>
      </div>
      <div id="pt-edit-view" style="display:none;">
        <div style="font-size:13px;color:var(--text-muted);margin-bottom:12px;">Wähle ein Template zum Bearbeiten:</div>
        <select id="pt-edit-select" onchange="renderTemplateEditor()" style="width:100%;padding:8px;border:1px solid var(--border);border-radius:var(--radius-sm);font-family:var(--font-body);font-size:13px;background:var(--surface);margin-bottom:12px;"></select>
        <div id="pt-editor"></div>
      </div>
    </div>
    <div class="modal-footer"><button class="btn btn-secondary" onclick="closeModal('modal-pack-templates')">Schließen</button></div>
  </div>
</div>

<!-- MODALS -->
<div class="modal-overlay" id="modal-trip">
  <div class="modal">
    <div class="modal-header"><h3 id="trip-modal-title">✈️ Neue Reise</h3><button class="btn-icon" onclick="closeModal('modal-trip')">✕</button></div>
    <div class="modal-body">
      <input type="hidden" id="t-edit-id">
      <div class="form-group"><label>Name</label><input type="text" id="t-name" placeholder="Japan Rundreise"></div>
      <div class="form-row">
        <div class="form-group"><label>Ziel / Destination</label><input type="text" id="t-dest" placeholder="Tokyo, Kyoto..."></div>
        <div class="form-group"><label>Status</label><select id="t-status"><option value="active">Aktiv</option><option value="planned">Geplant</option><option value="done">Abgeschlossen</option></select></div>
      </div>
      <div class="form-row">
        <div class="form-group"><label>Start</label><input type="text" id="t-start" placeholder="TT.MM.JJJJ" readonly></div>
        <div class="form-group"><label>Ende</label><input type="text" id="t-end" placeholder="TT.MM.JJJJ" readonly></div>
      </div>
      <div class="form-row">
        <div class="form-group"><label>Budget (€)</label><input type="number" id="t-budget" placeholder="2000"></div>
        <div class="form-group"><label>Personen</label><input type="number" id="t-persons" value="1" min="1"></div>
      </div>
    </div>
    <div class="modal-footer"><button class="btn btn-secondary" onclick="closeModal('modal-trip')">Abbrechen</button><button class="btn btn-primary" onclick="saveTrip()">Speichern</button></div>
  </div>
</div>

<div class="modal-overlay" id="modal-dest">
  <div class="modal">
    <div class="modal-header"><h3 id="dest-modal-title">📍 Neues Ziel</h3><button class="btn-icon" onclick="closeModal('modal-dest')">✕</button></div>
    <div class="modal-body">
      <input type="hidden" id="d-edit-id">
      <div class="form-group"><label>Name des Ziels</label><input type="text" id="d-name" placeholder="Fushimi Inari Taisha"></div>
      <div class="form-row">
        <div class="form-group"><label>Stadt / City</label><input type="text" id="d-city" placeholder="Kyoto"></div>
        <div class="form-group"><label>Land / Country</label><input type="text" id="d-country" placeholder="Japan"></div>
      </div>
      <div class="form-row" style="align-items:flex-end;">
        <div class="form-group"><label>Breitengrad (Lat)</label><input type="number" id="d-lat" placeholder="34.9671" step="any" onchange="updateDestPickMapMarker()"></div>
        <div class="form-group"><label>Längengrad (Lng)</label><input type="number" id="d-lng" placeholder="135.7727" step="any" onchange="updateDestPickMapMarker()"></div>
        <button type="button" class="btn btn-secondary" id="d-geo-btn" onclick="geocodeDest()" style="flex-shrink:0;white-space:nowrap;">📍 Suchen</button>
      </div>
      <div id="d-geo-status" style="font-size:12px;color:var(--text-muted);margin-top:-8px;margin-bottom:4px;display:none;"></div>
      <div class="form-group">
        <label style="display:flex;align-items:center;gap:8px;">
          <span>Pin auf Karte setzen</span>
          <button type="button" class="btn btn-secondary btn-sm" onclick="toggleDestPickMap()" id="dest-pick-map-btn" style="padding:3px 8px;font-size:12px;">🗺️ Karte</button>
        </label>
        <div id="dest-pick-map" class="hidden"></div>
      </div>
      <div class="form-group"><label>Notizen</label><textarea id="d-notes" placeholder="Must-see! Früh morgens hingehen…"></textarea></div>
      <div id="d-photo-preview" style="display:none;margin-bottom:8px;position:relative;">
        <img id="d-photo-img" style="width:100%;height:120px;object-fit:cover;border-radius:var(--radius-sm);display:block;">
        <button onclick="clearDestPhoto()" style="position:absolute;top:6px;right:6px;background:rgba(0,0,0,.55);color:white;border:none;border-radius:50%;width:24px;height:24px;cursor:pointer;font-size:13px;line-height:1;">✕</button>
      </div>
      <label style="display:flex;align-items:center;justify-content:center;gap:8px;padding:9px 12px;border:1px dashed var(--border);border-radius:var(--radius-sm);cursor:pointer;font-size:13px;color:var(--text-muted);background:var(--surface2);">
        📷 Hochladen oder Strg+V zum Einfügen
        <input type="file" id="d-photo-file" accept="image/*" style="display:none" onchange="handleDestPhoto(this)">
      </label>
    </div>
    <div class="modal-footer"><button class="btn btn-secondary" onclick="closeModal('modal-dest')">Abbrechen</button><button class="btn btn-primary" onclick="saveDest()">Speichern</button></div>
  </div>
</div>

<div class="modal-overlay" id="modal-route">
  <div class="modal" style="max-width:600px;">
    <div class="modal-header"><h3 id="route-modal-title">🗺️ Neue Route</h3><button class="btn-icon" onclick="closeModal('modal-route')">✕</button></div>
    <div class="modal-body">
      <input type="hidden" id="r-edit-id">
      <input type="hidden" id="r-day" value="1">
      <input type="hidden" id="r-date" value="">
      <div class="form-group">
        <label style="display:flex;align-items:center;justify-content:space-between;">
          <span>Ziele auswählen (Mehrfachauswahl möglich)</span>
          <button type="button" class="btn btn-secondary btn-sm" onclick="toggleRouteMiniMap()" style="font-size:12px;padding:3px 8px;">🗺️ Karte</button>
        </label>
        <div id="r-mini-map" class="hidden"></div>
        <div class="dest-select-grid" id="r-dest-grid"></div>
        <div class="r-excl-zone" id="r-excl-zone"
          ondragover="dsiExclDragOver(event)"
          ondragleave="dsiExclDragLeave(event)"
          ondrop="dsiExclDrop(event)">
          <div class="r-excl-label">⊘ Hierher ziehen zum Ausschließen</div>
          <div id="r-excl-grid" style="display:flex;flex-direction:column;gap:4px;"></div>
        </div>
      </div>
      <div class="form-group">
        <label>Neues Ziel direkt hinzufügen</label>
        <div class="flex gap-2">
          <input type="text" id="r-new-dest" placeholder="z.B. Nishiki Market, Kyoto" style="flex:1;padding:9px 12px;border:1px solid var(--border);border-radius:var(--radius-sm);font-family:var(--font-body);font-size:14px;outline:none;">
          <button class="btn btn-secondary" onclick="addDestInRoute()">+ Add</button>
        </div>
      </div>
      <div class="form-group"><label>Notizen / Aktivitäten</label><textarea id="r-notes" placeholder="Transfer 09:00, Wanderung zum Leuchtturm…"></textarea></div>
      <div class="form-group">
        <label>Links (einer pro Zeile — Titel | URL)</label>
        <textarea id="r-links" placeholder="Naturpark Trail | https://natural.pt/…&#10;Bootstour | https://booking.com/…" style="min-height:70px;font-size:13px;"></textarea>
        <div style="font-size:11px;color:var(--text-muted);margin-top:3px;">Format: <strong>Titel | URL</strong> — oder einfach nur URL</div>
      </div>
    </div>
    <div class="modal-footer"><button class="btn btn-secondary" onclick="closeModal('modal-route')">Abbrechen</button><button class="btn btn-primary" onclick="saveRoute()">Speichern</button></div>
  </div>
</div>

<div class="modal-overlay" id="modal-exp">
  <div class="modal">
    <div class="modal-header"><h3 id="exp-modal-title">💶 Neue Ausgabe</h3><button class="btn-icon" onclick="closeModal('modal-exp')">✕</button></div>
    <div class="modal-body">
      <input type="hidden" id="e-edit-id">
      <div class="form-group"><label>Beschreibung</label><input type="text" id="e-name" placeholder="Zugticket Tokyo → Kyoto"></div>
      <div class="form-row">
        <div class="form-group"><label>Betrag (€)</label><input type="number" id="e-amt" placeholder="45.00" step="0.01"></div>
        <div class="form-group"><label>Kategorie</label><select id="e-cat"><option value="transport">🚆 Transport</option><option value="food">🍜 Food</option><option value="accommodation">🏨 Hotel</option><option value="activity">🎭 Aktivität</option><option value="shopping">🛍️ Shopping</option><option value="other">💳 Sonstiges</option></select></div>
      </div>
      <div class="form-group"><label>Datum</label><input type="text" id="e-date" placeholder="TT.MM.JJJJ" readonly></div>
    </div>
    <div class="modal-footer"><button class="btn btn-secondary" onclick="closeModal('modal-exp')">Abbrechen</button><button class="btn btn-primary" onclick="saveExp()">Speichern</button></div>
  </div>
</div>

<div class="modal-overlay" id="modal-pack-cat">
  <div class="modal">
    <div class="modal-header"><h3>Neue Kategorie</h3><button class="btn-icon" onclick="closeModal('modal-pack-cat')">✕</button></div>
    <div class="modal-body"><div class="form-group"><label>Name</label><input type="text" id="pc-name" placeholder="Kleidung"></div></div>
    <div class="modal-footer"><button class="btn btn-secondary" onclick="closeModal('modal-pack-cat')">Abbrechen</button><button class="btn btn-primary" onclick="savePackCat()">Speichern</button></div>
  </div>
</div>

<div class="modal-overlay" id="modal-pack-item">
  <div class="modal">
    <div class="modal-header"><h3>Neues Item</h3><button class="btn-icon" onclick="closeModal('modal-pack-item')">✕</button></div>
    <div class="modal-body">
      <div class="form-group">
        <label>Name</label>
        <input type="text" id="pi-name" placeholder="Reiseadapter" oninput="_packAutoSuggestCat(this.value)" autocomplete="off">
      </div>
      <div class="form-group">
        <label>Kategorie</label>
        <select id="pi-cat" onchange="_packCatManualChange()"></select>
        <div id="pi-cat-suggestion" style="display:none;"></div>
      </div>
    </div>
    <div class="modal-footer"><button class="btn btn-secondary" onclick="closeModal('modal-pack-item')">Abbrechen</button><button class="btn btn-primary" onclick="savePackItem()">Speichern</button></div>
  </div>
</div>

<div class="modal-overlay" id="modal-accom">
  <div class="modal" style="max-width:580px;">
    <div class="modal-header"><h3 id="accom-modal-title">🏨 Neue Unterkunft</h3><button class="btn-icon" onclick="closeModal('modal-accom')">✕</button></div>
    <div class="modal-body">
      <input type="hidden" id="a-edit-id">

      <!-- IMPORT TABS -->
      <div style="display:flex;gap:0;border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden;margin-bottom:2px;">
        <button id="itab-pdf" onclick="switchImportTab('pdf')" style="flex:1;padding:8px;border:none;background:var(--accent2);color:white;font-family:var(--font-body);font-size:13px;font-weight:500;cursor:pointer;">📄 PDF hochladen</button>
        <button id="itab-email" onclick="switchImportTab('email')" style="flex:1;padding:8px;border:none;background:var(--surface2);color:var(--text-muted);font-family:var(--font-body);font-size:13px;font-weight:500;cursor:pointer;border-left:1px solid var(--border);">✉️ E-Mail einfügen</button>
      </div>

      <!-- PDF UPLOAD -->
      <div id="itab-pdf-body" style="background:var(--accent2-light);border:1px solid #e8c99a;border-radius:var(--radius-sm);padding:12px 14px;">
        <div id="pdf-drop-zone" onclick="document.getElementById('a-pdf-input').click()" style="border:2px dashed #e8c99a;border-radius:var(--radius-sm);padding:20px;text-align:center;cursor:pointer;transition:all .2s;background:white;">
          <div style="font-size:28px;margin-bottom:6px;">📄</div>
          <div style="font-size:13px;font-weight:500;color:var(--text);">Bestätigungs-PDF hier ablegen</div>
          <div style="font-size:12px;color:var(--text-muted);margin-top:3px;">oder klicken zum Auswählen</div>
          <input type="file" id="a-pdf-input" accept=".pdf" style="display:none" onchange="handlePdfUpload(this)">
        </div>
        <div id="pdf-file-name" style="font-size:12px;color:var(--accent2);margin-top:6px;display:none;"></div>
        <div style="display:flex;align-items:center;gap:6px;margin-top:8px;flex-wrap:wrap;">
          <button class="btn btn-sm" id="a-pdf-parse-btn" onclick="parsePdf()" style="background:var(--accent2);color:white;border:none;display:none;">🤖 PDF auslesen</button>
          <button class="btn btn-sm" id="a-pdf-debug-btn" onclick="debugPdf()" style="background:var(--surface2);border:1px solid var(--border);display:none;font-size:11px;" title="Rohtext anzeigen">🔍 Debug</button>
          <span id="a-pdf-status" style="font-size:12px;color:var(--text-muted);"></span>
        </div>
        <pre id="a-pdf-debug-out" style="display:none;margin-top:8px;font-size:10px;background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:8px;max-height:180px;overflow-y:auto;white-space:pre-wrap;color:var(--text-muted);"></pre>
      </div>

      <!-- EMAIL PASTE -->
      <div id="itab-email-body" style="display:none;background:var(--accent2-light);border:1px solid #e8c99a;border-radius:var(--radius-sm);padding:12px 14px;">
        <textarea id="a-email-text" placeholder="Buchungsbestätigung von Booking.com, Airbnb, Hotels.com usw. hier reinkopieren…" style="width:100%;min-height:90px;padding:9px 12px;border:1px solid #e8c99a;border-radius:var(--radius-sm);font-family:var(--font-body);font-size:13px;background:white;outline:none;resize:vertical;"></textarea>
        <button class="btn btn-sm" id="a-parse-btn" onclick="parseBookingEmail()" style="margin-top:8px;background:var(--accent2);color:white;border:none;">🤖 E-Mail auslesen</button>
        <span id="a-parse-status" style="font-size:12px;color:var(--text-muted);margin-left:10px;"></span>
      </div>

      <!-- DIVIDER -->
      <div style="display:flex;align-items:center;gap:10px;color:var(--text-muted);font-size:12px;">
        <hr style="flex:1;border:none;border-top:1px solid var(--border);">
        <span>oder manuell ausfüllen</span>
        <hr style="flex:1;border:none;border-top:1px solid var(--border);">
      </div>

      <!-- MANUAL FIELDS -->
      <div class="form-group"><label>Name</label><input type="text" id="a-name" placeholder="Hotel Granvia Kyoto"></div>
      <div class="form-row">
        <div class="form-group"><label>Ort</label><input type="text" id="a-loc" placeholder="Kyoto"></div>
        <div class="form-group"><label>Typ</label><select id="a-type"><option value="hotel">🏨 Hotel</option><option value="hostel">🛏️ Hostel</option><option value="airbnb">🏠 Airbnb</option><option value="camping">⛺ Camping</option><option value="other">🏡 Andere</option></select></div>
      </div>
      <div class="form-row">
        <div class="form-group"><label>Check-in</label><input type="text" id="a-in" placeholder="TT.MM.JJJJ" readonly></div>
        <div class="form-group"><label>Check-out</label><input type="text" id="a-out" placeholder="TT.MM.JJJJ" readonly></div>
      </div>
      <div class="form-row">
        <div class="form-group"><label>Preis (€)</label><input type="number" id="a-price" placeholder="120"></div>
        <div class="form-group"><label>Status</label><select id="a-status"><option value="booked">✅ Gebucht</option><option value="pending">⏳ Ausstehend</option><option value="idea">💡 Idee</option></select></div>
      </div>
      <div class="form-group"><label>Booking Link / Bestätigungsnummer</label><input type="text" id="a-link" placeholder="https://booking.com/… oder Bestätigungsnr."></div>
    </div>
    <div class="modal-footer"><button class="btn btn-secondary" onclick="closeModal('modal-accom')">Abbrechen</button><button class="btn btn-primary" onclick="saveAccom()">Speichern</button></div>
  </div>
</div>

<div class="modal-overlay" id="modal-screenshot">
  <div class="modal" style="max-width:580px;">
    <div class="modal-header"><h3>🗺️ Route importieren</h3><button class="btn-icon" onclick="closeModal('modal-screenshot')">✕</button></div>
    <div class="modal-body">
      <!-- TABS -->
      <div style="display:flex;gap:8px;margin-bottom:14px;">
        <button id="ss-tab-text" class="btn btn-primary btn-sm" onclick="setSsTab('text')">📋 Text einfügen</button>
        <button id="ss-tab-img" class="btn btn-secondary btn-sm" onclick="setSsTab('img')">🖼️ Screenshot / OCR</button>
      </div>
      <!-- TEXT INPUT MODE -->
      <div id="ss-text-mode">
        <div style="font-size:13px;color:var(--text-muted);margin-bottom:8px;">Stopps aus Google Maps kopieren und einfügen — eine Zeile pro Stopp:</div>
        <textarea id="ss-text-input" rows="9" style="width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:var(--radius-sm);font-family:var(--font-body);font-size:13px;resize:vertical;outline:none;background:var(--surface);color:var(--text);" placeholder="Flughafen Lissabon-Portela&#10;Setúbal, Portugal&#10;Vila Nova de Milfontes, Portugal&#10;Castro Verde, Portugal&#10;Faro, Portugal"></textarea>
        <button class="btn btn-primary w-full" onclick="parseSsText()" style="margin-top:10px;">🔍 Stopps erkennen</button>
      </div>
      <!-- IMAGE / OCR MODE -->
      <div id="ss-img-mode" style="display:none;">
        <div id="ss-drop-zone" onclick="document.getElementById('ss-file-input').click()" style="border:2px dashed var(--border);border-radius:var(--radius-sm);padding:24px;text-align:center;cursor:pointer;transition:all .2s;background:var(--surface2);">
          <div style="font-size:36px;margin-bottom:8px;">🗺️</div>
          <div style="font-weight:500;color:var(--text);">Google Maps Screenshot hier ablegen</div>
          <div style="font-size:13px;color:var(--text-muted);margin-top:4px;">oder klicken zum Auswählen · JPG, PNG</div>
          <input type="file" id="ss-file-input" accept="image/*" style="display:none" onchange="handleSsUpload(this)">
        </div>
        <div id="ss-preview-wrap" style="display:none;">
          <img id="ss-preview-img" style="width:100%;max-height:200px;object-fit:cover;border-radius:var(--radius-sm);border:1px solid var(--border);" src="" alt="">
          <button class="btn btn-primary w-full" id="ss-analyze-btn" onclick="analyzeScreenshot()" style="margin-top:10px;">🤖 Stopps automatisch erkennen (OCR)</button>
          <span id="ss-status" style="font-size:13px;color:var(--text-muted);display:block;margin-top:6px;text-align:center;"></span>
        </div>
      </div>
      <!-- RESULTS (shared) -->
      <div id="ss-results" style="display:none;margin-top:12px;">
        <div style="font-size:13px;font-weight:600;color:var(--text);margin-bottom:8px;">Erkannte Stopps — markiere welche du übernehmen möchtest:</div>
        <div id="ss-stops-list" style="display:flex;flex-direction:column;gap:6px;max-height:240px;overflow-y:auto;"></div>
        <div style="margin-top:12px;font-size:12px;color:var(--text-muted);">* Koordinaten werden automatisch per Geocoding ergänzt (OpenStreetMap)</div>
      </div>
    </div>
    <div class="modal-footer">
      <button class="btn btn-secondary" onclick="closeModal('modal-screenshot')">Abbrechen</button>
      <button class="btn btn-primary" id="ss-import-btn" onclick="importScreenshotStops()" style="display:none;">✅ Ausgewählte importieren</button>
    </div>
  </div>
</div>

<div class="modal-overlay" id="modal-plan-screenshot">
  <div class="modal" style="max-width:580px;">
    <div class="modal-header"><h3>📋 Tagesplanung importieren</h3><button class="btn-icon" onclick="closeModal('modal-plan-screenshot')">✕</button></div>
    <div class="modal-body">
      <div id="ps-drop-zone" onclick="document.getElementById('ps-file-input').click()" style="border:2px dashed var(--border);border-radius:var(--radius-sm);padding:22px;text-align:center;cursor:pointer;transition:all .2s;background:var(--surface2);">
        <div style="font-size:34px;margin-bottom:8px;">📋</div>
        <div style="font-weight:500;color:var(--text);">Screenshot der Tagesplanung ablegen</div>
        <div style="font-size:13px;color:var(--text-muted);margin-top:4px;">Notizen, Listen, Google Docs Screenshots · JPG, PNG</div>
        <input type="file" id="ps-file-input" accept="image/*" style="display:none" onchange="handlePsUpload(this)">
      </div>
      <div id="ps-preview-wrap" style="display:none;">
        <img id="ps-preview-img" style="width:100%;max-height:180px;object-fit:cover;border-radius:var(--radius-sm);border:1px solid var(--border);" src="" alt="">
        <button class="btn btn-primary w-full" id="ps-analyze-btn" onclick="analyzePlanScreenshot()" style="margin-top:10px;">🤖 Tagesplan erkennen</button>
        <span id="ps-status" style="font-size:13px;color:var(--text-muted);display:block;margin-top:6px;text-align:center;"></span>
      </div>
      <div id="ps-results" style="display:none;">
        <div style="font-size:13px;font-weight:600;margin-bottom:8px;">Erkannte Etappen — klicke zum De-selektieren:</div>
        <div id="ps-days-list" style="display:flex;flex-direction:column;gap:6px;max-height:260px;overflow-y:auto;"></div>
      </div>
    </div>
    <div class="modal-footer">
      <button class="btn btn-secondary" onclick="closeModal('modal-plan-screenshot')">Abbrechen</button>
      <button class="btn btn-primary" id="ps-import-btn" onclick="importPlanDays()" style="display:none;">✅ Etappen importieren</button>
    </div>
  </div>
</div>

<!-- TRANSPORT MODAL -->
<div class="modal-overlay" id="modal-transport">
  <div class="modal">
    <div class="modal-header"><h3 id="transport-modal-title">🚌 Neuer Transport</h3><button class="btn-icon" onclick="closeModal('modal-transport')">✕</button></div>
    <div class="modal-body">
      <div class="form-row">
        <div class="form-group"><label>Typ</label>
          <select id="tr-type" onchange="trTypeChange()">
            <option value="flight">✈️ Flug</option>
            <option value="car">🚗 Mietauto</option>
            <option value="train">🚆 Zug</option>
            <option value="bus">🚌 Bus</option>
            <option value="ferry">⛴️ Fähre</option>
            <option value="taxi">🚕 Taxi/Transfer</option>
            <option value="other">🚀 Sonstiges</option>
          </select>
        </div>
        <div class="form-group"><label>Status</label>
          <select id="tr-status">
            <option value="booked">✅ Gebucht</option>
            <option value="pending">⏳ Ausstehend</option>
            <option value="idea">💡 Idee</option>
          </select>
        </div>
      </div>
      <div class="form-row" id="tr-from-row">
        <div class="form-group"><label id="tr-from-label">Von</label><input type="text" id="tr-from" placeholder="Lissabon"></div>
        <div class="form-group"><label id="tr-to-label">Nach</label><input type="text" id="tr-to" placeholder="Faro"></div>
      </div>
      <div class="form-row" id="tr-datetime-row">
        <div class="form-group"><label>Datum</label><input type="text" id="tr-date" placeholder="TT.MM.JJJJ" readonly></div>
        <div class="form-group"><label id="tr-time-label">Uhrzeit</label><input type="time" id="tr-time"></div>
      </div>
      <!-- Flug: Ankunftszeit -->
      <div class="form-row" id="tr-arr-row" style="display:none;">
        <div class="form-group"><label>Ankunftszeit</label><input type="time" id="tr-arr-time"></div>
        <div class="form-group"><label>Ankunftsdatum (+1, falls nötig)</label><input type="text" id="tr-arr-date" placeholder="TT.MM.JJJJ" readonly></div>
      </div>
      <!-- Flug: Zwischenstopps -->
      <div id="tr-stops-wrap" style="display:none;">
        <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;">
          <label style="font-size:12px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;">Zwischenstopps</label>
          <button type="button" onclick="addFlightStop()" style="font-size:12px;padding:3px 10px;background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;">+ Stopp</button>
        </div>
        <div id="tr-stops-list"></div>
      </div>
      <!-- Mietauto: Abholung / Rückgabe -->
      <div id="tr-car-wrap" style="display:none;">
        <div class="form-row">
          <div class="form-group"><label>Abholdatum</label><input type="text" id="tr-pickup-date" placeholder="TT.MM.JJJJ" readonly></div>
          <div class="form-group"><label>Abholzeit</label><input type="time" id="tr-pickup-time"></div>
        </div>
        <div class="form-group"><label>Abholort</label><input type="text" id="tr-pickup-loc" placeholder="Lissabon Airport T1"></div>
        <div class="form-row">
          <div class="form-group"><label>Rückgabedatum</label><input type="text" id="tr-return-date" placeholder="TT.MM.JJJJ" readonly></div>
          <div class="form-group"><label>Rückgabezeit</label><input type="time" id="tr-return-time"></div>
        </div>
        <div class="form-group"><label>Rückgabeort</label><input type="text" id="tr-return-loc" placeholder="Faro Airport"></div>
      </div>
      <div class="form-row">
        <div class="form-group"><label id="tr-provider-label">Anbieter / Flugnr.</label><input type="text" id="tr-provider" placeholder="TAP Air Portugal · TP1234"></div>
        <div class="form-group"><label>Preis (€)</label><input type="number" id="tr-price" placeholder="89" step="0.01"></div>
      </div>
      <div class="form-group"><label>Buchungs-Link / Bestätigung</label><input type="text" id="tr-link" placeholder="https://…"></div>
      <div class="form-group"><label>Notizen</label><textarea id="tr-notes" placeholder="Gepäck 20kg, Terminal 2…" style="min-height:56px;"></textarea></div>
    </div>
    <div class="modal-footer">
      <button class="btn btn-secondary" onclick="closeModal('modal-transport')">Abbrechen</button>
      <button class="btn btn-primary" onclick="saveTransport()">Speichern</button>
    </div>
  </div>
</div>

<!-- COUNTRY MODAL -->
<div class="modal-overlay" id="modal-country">
  <div class="modal">
    <div class="modal-header"><h3>🌍 Neues Land</h3><button class="btn-icon" onclick="closeModal('modal-country')">✕</button></div>
    <div class="modal-body">
      <div class="form-group"><label>Land / Country</label><input type="text" id="co-name" placeholder="Portugal"></div>
      <div class="form-group"><label>Flaggen-Emoji (optional)</label><input type="text" id="co-flag" placeholder="🇵🇹"></div>
      <div id="co-photo-preview" style="display:none;margin-top:8px;position:relative;">
        <img id="co-photo-img" style="width:100%;height:100px;object-fit:cover;border-radius:var(--radius-sm);display:block;">
        <button onclick="clearCountryPhoto()" style="position:absolute;top:6px;right:6px;background:rgba(0,0,0,.55);color:white;border:none;border-radius:50%;width:24px;height:24px;cursor:pointer;font-size:13px;line-height:1;">✕</button>
      </div>
      <label style="display:flex;align-items:center;justify-content:center;gap:8px;padding:9px 12px;border:1px dashed var(--border);border-radius:var(--radius-sm);cursor:pointer;font-size:13px;color:var(--text-muted);background:var(--surface2);margin-top:8px;">
        📷 Hochladen oder Strg+V
        <input type="file" id="co-photo-file" accept="image/*" style="display:none" onchange="handleCountryPhoto(this)">
      </label>
    </div>
    <div class="modal-footer">
      <button class="btn btn-secondary" onclick="closeModal('modal-country')">Abbrechen</button>
      <button class="btn btn-primary" onclick="saveCountry()">Speichern</button>
    </div>
  </div>
</div>

<div class="modal-overlay" id="modal-backlog">
  <div class="modal">
    <div class="modal-header"><h3>⭐ Neue Reiseidee</h3><button class="btn-icon" onclick="closeModal('modal-backlog')">✕</button></div>
    <div class="modal-body">
      <!-- INSTAGRAM IMPORT -->
      <div style="background:#fdf0f7;border:1px solid #e8b4d8;border-radius:var(--radius-sm);padding:12px 14px;">
        <div style="font-size:12px;font-weight:600;color:#9b4a7a;text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px;">📸 Instagram Link importieren</div>
        <div class="flex gap-2">
          <input type="text" id="bl-insta-url" placeholder="https://www.instagram.com/p/..." style="flex:1;padding:8px 11px;border:1px solid #e8b4d8;border-radius:var(--radius-sm);font-family:var(--font-body);font-size:13px;outline:none;background:white;">
          <button class="btn btn-sm" id="bl-insta-btn" onclick="importInstagram()" style="background:#9b4a7a;color:white;border:none;white-space:nowrap;">📥 Laden</button>
        </div>
        <div id="bl-insta-status" style="font-size:12px;color:var(--text-muted);margin-top:5px;"></div>
        <div id="bl-insta-preview" style="display:none;margin-top:8px;border-radius:var(--radius-sm);overflow:hidden;border:1px solid #e8b4d8;">
          <img id="bl-insta-img" style="width:100%;max-height:140px;object-fit:cover;display:block;" src="" alt="">
        </div>
      </div>
      <div style="display:flex;align-items:center;gap:10px;color:var(--text-muted);font-size:12px;">
        <hr style="flex:1;border:none;border-top:1px solid var(--border);"><span>oder manuell</span><hr style="flex:1;border:none;border-top:1px solid var(--border);">
      </div>
      <div class="form-group"><label>Land / Country</label><select id="bl-country"><option value="">— kein Land —</option></select></div>
      <div class="form-group"><label>Ziel / Ort</label><input type="text" id="bl-dest" placeholder="Lissabon, Algarve…"></div>
      <div class="form-row">
        <div class="form-group"><label>Priorität</label><select id="bl-prio"><option value="high">🔥 Hoch</option><option value="medium">⭐ Mittel</option><option value="low">💭 Niedrig</option></select></div>
        <div class="form-group"><label>Budget-Schätzung (€)</label><input type="number" id="bl-budget" placeholder="3000"></div>
      </div>
      <div class="form-group"><label>Notizen</label><textarea id="bl-notes" placeholder="Trekking, Gletscher…"></textarea></div>
      <div class="form-group"><label>Tags (komma-getrennt)</label><input type="text" id="bl-tags" placeholder="Natur, Abenteuer, Solo"></div>
    </div>
    <div class="modal-footer"><button class="btn btn-secondary" onclick="closeModal('modal-backlog')">Abbrechen</button><button class="btn btn-primary" onclick="saveBacklog()">Speichern</button></div>
  </div>
</div>

<script>
// ── i18n ──────────────────────────────────────────────────────────────────────
const i18n={
  de:{nav_trips:'Reisen',nav_dest:'Ziele',nav_route:'Route',nav_budget:'Budget',nav_packing:'Packliste',nav_accom:'Unterkunft',nav_backlog:'Backlog',trips_sub:'Meine Abenteuer',dest_sub:'Interessante Orte',route_sub:'Tagesplanung',budget_sub:'Ausgaben & Übersicht',pack_sub:'Nichts vergessen',accom_sub:'Hotels & Unterkünfte',backlog_sub:'Traumreisen',trip_add:'Neue Reise',dest_add:'Ziel',route_add:'Etappe',exp_add:'Ausgabe',accom_add:'Unterkunft',backlog_add:'Reiseidee',map_title:'Karte',map_hint:'Nummern = Reihenfolge',exp_title:'Alle Ausgaben',total_budget:'Gesamtbudget',spent:'Ausgegeben',remaining:'Verbleibend'},
  en:{nav_trips:'Trips',nav_dest:'Destinations',nav_route:'Route',nav_budget:'Budget',nav_packing:'Packing',nav_accom:'Accommodation',nav_backlog:'Backlog',trips_sub:'My Adventures',dest_sub:'Points of Interest',route_sub:'Day Planning',budget_sub:'Expenses & Overview',pack_sub:"Don't forget anything",accom_sub:'Hotels & Stays',backlog_sub:'Dream Destinations',trip_add:'New Trip',dest_add:'Destination',route_add:'Stage',exp_add:'Expense',accom_add:'Add Stay',backlog_add:'Travel Idea',map_title:'Map',map_hint:'Numbers = order',exp_title:'All Expenses',total_budget:'Total Budget',spent:'Spent',remaining:'Remaining'}
};
let lang='de';
function t(k){return i18n[lang][k]||k;}
function setLang(l){
  lang=l;
  document.querySelectorAll('.lang-toggle button').forEach(b=>b.classList.remove('active'));
  document.querySelector(`.lang-toggle button[onclick="setLang('${l}')"]`).classList.add('active');
  document.querySelectorAll('[data-i18n]').forEach(el=>{el.textContent=t(el.dataset.i18n);});
  renderAll();
}

// ── SUPABASE ──────────────────────────────────────────────────────────────────
const SUPA_URL='https://aplytdmfhllznkdlspfi.supabase.co';
const SUPA_KEY='eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImFwbHl0ZG1maGxsem5rZGxzcGZpIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NzUwNjA3NzQsImV4cCI6MjA5MDYzNjc3NH0.Skw4T6ZhZABxxUMPiKEjrCqyGI8u3tdTg8ruMuE-az4';
const supa=supabase.createClient(SUPA_URL,SUPA_KEY);
let supaUser=null;
let _syncTimer=null;

function showSyncIndicator(msg='☁️ Gespeichert'){
  const el=document.getElementById('sync-indicator');
  el.textContent=msg;el.classList.add('show');
  clearTimeout(_syncTimer);_syncTimer=setTimeout(()=>el.classList.remove('show'),2000);
}

async function syncToSupabase(){
  if(!supaUser)return;
  const{error}=await supa.from('user_state').upsert({user_id:supaUser.id,data:S,updated_at:new Date().toISOString()});
  if(!error)showSyncIndicator('☁️ Gespeichert');
}

async function loadFromSupabase(){
  if(!supaUser)return false;
  const{data,error}=await supa.from('user_state').select('data').eq('user_id',supaUser.id).maybeSingle();
  if(error||!data)return false;
  S=data.data;
  ['trips','dests','routes','exps','packCats','packItems','accoms','transports','backlog','countries','visitedCountries','dayplans','docs'].forEach(k=>{if(!Array.isArray(S[k]))S[k]=[];});
  if(!Array.isArray(S.stays))S.stays=[];
  if(!Array.isArray(S.notes))S.notes=[];
  localStorage.setItem(DB,JSON.stringify(S));
  return true;
}

function updateAuthUI(){
  const btn=document.getElementById('auth-btn');
  const label=document.getElementById('auth-label');
  const lo=document.getElementById('auth-loggedout');
  const li=document.getElementById('auth-loggedin');
  const docsBtn=document.getElementById('docs-btn');
  if(supaUser){
    btn.classList.add('online');label.textContent=supaUser.email.split('@')[0];
    lo.style.display='none';li.style.display='block';
    document.getElementById('auth-user-email').textContent=supaUser.email;
    if(docsBtn)docsBtn.style.display='';
  }else{
    btn.classList.remove('online');label.textContent='Anmelden';
    lo.style.display='block';li.style.display='none';
    if(docsBtn)docsBtn.style.display='none';
  }
}

let _authTab='login';
function switchAuthTab(tab){
  _authTab=tab;
  document.querySelectorAll('.auth-tab').forEach(b=>b.classList.remove('active'));
  document.querySelector(`.auth-tab[onclick="switchAuthTab('${tab}')"]`).classList.add('active');
  document.getElementById('auth-submit-btn').textContent=tab==='login'?'Anmelden':'Registrieren';
  document.getElementById('auth-error').style.display='none';
  document.getElementById('auth-password').autocomplete=tab==='login'?'current-password':'new-password';
}

async function authSubmit(){
  const email=document.getElementById('auth-email').value.trim();
  const password=document.getElementById('auth-password').value;
  const errEl=document.getElementById('auth-error');
  const btn=document.getElementById('auth-submit-btn');
  if(!email||!password){errEl.textContent='Bitte E-Mail und Passwort eingeben.';errEl.style.display='block';return;}
  btn.disabled=true;btn.textContent='Bitte warten…';errEl.style.display='none';
  let res;
  if(_authTab==='login'){
    res=await supa.auth.signInWithPassword({email,password});
  }else{
    res=await supa.auth.signUp({email,password});
  }
  if(res.error){
    errEl.textContent=res.error.message;errEl.style.display='block';
    btn.disabled=false;btn.textContent=_authTab==='login'?'Anmelden':'Registrieren';
    return;
  }
  if(_authTab==='register'&&!res.data.session){
    errEl.style.display='block';errEl.style.color='var(--accent)';
    errEl.textContent='✅ Bestätigungs-E-Mail gesendet! Bitte E-Mail bestätigen.';
    btn.disabled=false;btn.textContent='Registrieren';
    return;
  }
  supaUser=res.data.user;
  const hadData=await loadFromSupabase();
  if(!hadData)await syncToSupabase();
  document.getElementById('auth-close-btn').style.display='block';
  updateAuthUI();renderAll();closeModal('modal-auth');
}

async function authLogout(){
  await supa.auth.signOut();
  supaUser=null;updateAuthUI();requireLogin();
}

function requireLogin(){
  document.getElementById('auth-close-btn').style.display='none';
  openModal('modal-auth');
}

async function initSupabase(){
  const{data:{session}}=await supa.auth.getSession();
  if(session){
    supaUser=session.user;
    const hadData=await loadFromSupabase();
    if(hadData)renderAll();
    updateAuthUI();
    document.getElementById('auth-close-btn').style.display='block';
  } else {
    requireLogin();
  }
  supa.auth.onAuthStateChange((_event,session)=>{
    supaUser=session?.user||null;
    updateAuthUI();
    if(supaUser) document.getElementById('auth-close-btn').style.display='block';
    else requireLogin();
  });
}

// ── STATE ─────────────────────────────────────────────────────────────────────
const DB='wl_v3';
let S={trips:[],dests:[],routes:[],exps:[],packCats:[],packItems:[],accoms:[],transports:[],backlog:[],countries:[],visitedCountries:[],dayplans:[],docs:[]};
let _pendingPhoto=null;
let selDestIds=[],excludedDestIds=[];
let activeTripId=null;

function load(){
  try{const s=localStorage.getItem(DB);if(s)S=JSON.parse(s);}catch(e){}
  ['trips','dests','routes','exps','packCats','packItems','accoms','transports','backlog','countries','visitedCountries','dayplans','docs'].forEach(k=>{if(!Array.isArray(S[k]))S[k]=[];});
  if(!Array.isArray(S.stays))S.stays=[];
  if(!Array.isArray(S.todos))S.todos=[];
  if(!Array.isArray(S.notes))S.notes=[];
  if(!S.packTemplateOverrides)S.packTemplateOverrides={};
  const at=localStorage.getItem('wl_active_trip');
  if(at&&S.trips.find(t=>t.id===at)){activeTripId=at;applyTripCtx();}
}
function save(){
  localStorage.setItem(DB,JSON.stringify(S));
  if(supaUser)syncToSupabase();
}
function uid(){return Date.now().toString(36)+Math.random().toString(36).slice(2,6);}
function fc(n){return new Intl.NumberFormat('de-DE',{style:'currency',currency:'EUR'}).format(n||0);}
function emptyState(icon,title,sub){
  return `<div class="empty" style="grid-column:1/-1"><div class="empty-icon">${icon}</div><div class="empty-title">${title}</div><div class="empty-sub">${sub}</div></div>`;
}

// ── TRIP CONTEXT ──────────────────────────────────────────────────────────────
function setTripCtx(tripId){
  activeTripId=tripId;
  localStorage.setItem('wl_active_trip',tripId);
  if(activeTopSection!=='trips')showTopSection('trips');
  applyTripCtx();
  showTab('destinations');
}
function clearTripCtx(){
  activeTripId=null;
  localStorage.removeItem('wl_active_trip');
  document.getElementById('trip-ctx-bar').classList.remove('visible');
  document.getElementById('sub-nav').classList.remove('visible');
  document.querySelectorAll('#sub-nav button').forEach(b=>b.classList.remove('active'));
  showTopSection('trips');
}
function applyTripCtx(){
  const tp=S.trips.find(t=>t.id===activeTripId);if(!tp)return;
  document.getElementById('trip-ctx-bar').classList.add('visible');
  document.getElementById('sub-nav').classList.add('visible');
  document.getElementById('trip-ctx-name').textContent=tp.name;
  document.getElementById('trip-ctx-dates').textContent=tp.start&&tp.end?tp.start+' → '+tp.end:tp.start||'';
  renderSidebar();
}
// current trip id — always use this instead of selects
function ctid(){return activeTripId||'';}

// ── TOP SECTION SWITCH ────────────────────────────────────────────────────────
let activeTopSection='dashboard';
function showTopSection(section){
  activeTopSection=section;
  localStorage.setItem('wl_active_section',section);
  document.querySelectorAll('#top-nav button').forEach(b=>b.classList.remove('active'));
  document.getElementById('topnav-'+section).classList.add('active');
  if(section==='dashboard'){
    document.getElementById('sub-nav').classList.remove('visible');
    document.getElementById('trip-ctx-bar').classList.remove('visible');
    document.getElementById('sidebar').style.display='none';
    showTab('dashboard');
    renderDashboard();
  } else if(section==='worldmap'){
    document.getElementById('sub-nav').classList.remove('visible');
    document.getElementById('trip-ctx-bar').classList.remove('visible');
    document.getElementById('sidebar').style.display='none';
    showTab('worldmap');
    requestAnimationFrame(()=>requestAnimationFrame(()=>initWorldMap()));
  } else if(section==='backlog'){
    document.getElementById('sub-nav').classList.remove('visible');
    document.getElementById('trip-ctx-bar').classList.remove('visible');
    document.getElementById('sidebar').style.display='';
    document.getElementById('sidebar-trips-section').style.display='none';
    document.getElementById('sidebar-backlog-section').style.display='block';
    showTab('backlog');
  } else if(section==='notes'){
    document.getElementById('sub-nav').classList.remove('visible');
    document.getElementById('trip-ctx-bar').classList.remove('visible');
    document.getElementById('sidebar').style.display='none';
    document.getElementById('sidebar-backlog-section').style.display='none';
    showTab('notes');
    renderNotes(null);
  } else {
    document.getElementById('sidebar').style.display='';
    document.getElementById('sidebar-trips-section').style.display='block';
    document.getElementById('sidebar-backlog-section').style.display='none';
    if(activeTripId){
      document.getElementById('trip-ctx-bar').classList.add('visible');
      document.getElementById('sub-nav').classList.add('visible');
    }
    showTab('trips');
  }
  renderSidebar();
}

// ── SIDEBAR ───────────────────────────────────────────────────────────────────
function renderSidebar(){
  // Trips list
  const tlist=document.getElementById('sidebar-trips-list');
  const scMap={active:'#2d5a3d',planned:'#9ca3af',done:'#c17f3a'};
  tlist.innerHTML=S.trips.map(tp=>`
    <div class="sidebar-trip-item ${activeTripId===tp.id?'active':''}" onclick="setTripCtx('${tp.id}')">
      <span class="sidebar-trip-status" style="background:${scMap[tp.status]||'#9ca3af'}"></span>
      <span style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">${tp.name}</span>
    </div>`).join('') || '<div style="padding:8px 20px;font-size:13px;color:var(--text-muted);">Noch keine Reisen</div>';

  // Countries list
  const clist=document.getElementById('sidebar-countries-list');
  clist.innerHTML=S.countries.map(co=>{
    const count=S.backlog.filter(b=>b.countryId===co.id).length;
    return `<div class="sidebar-country-item ${activeCountryId===co.id?'active':''}" onclick="openCountry('${co.id}')">
      <span>${co.flag||'🌍'}</span>
      <span style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">${co.name}</span>
      <span class="sidebar-country-count">${count}</span>
    </div>`;
  }).join('') || '<div style="padding:8px 20px;font-size:13px;color:var(--text-muted);">Noch keine Länder</div>';
}
let dMap=null,rMap=null,dMarkers=[],rMarkers=[],rLines=[];

function _createMap(elId){
  if(typeof L==='undefined'){console.warn('Leaflet not loaded');return null;}
  const el=document.getElementById(elId);
  if(!el)return null;
  const map=L.map(el,{preferCanvas:true,zoomControl:true}).setView([20,10],2);
  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',{
    attribution:'© <a href="https://www.openstreetmap.org">OpenStreetMap</a>',
    maxZoom:19,
    crossOrigin:true
  }).addTo(map);
  return map;
}

function initDMap(){
  if(dMap){try{dMap.remove();}catch(e){} dMap=null; dMarkers=[];}
  dMap=_createMap('dest-map');
  if(dMap)dMap.on('click',e=>openDestFromMap(e.latlng.lat,e.latlng.lng));
  setTimeout(()=>{if(dMap)dMap.invalidateSize();},300);
}
async function openDestFromMap(lat,lng){
  openModal('modal-dest');
  document.getElementById('d-lat').value=lat.toFixed(5);
  document.getElementById('d-lng').value=lng.toFixed(5);
  const status=document.getElementById('d-geo-status');
  status.style.display='block';status.style.color='var(--text-muted)';status.textContent='📍 Ort wird ermittelt…';
  try{
    const r=await fetch(`https://nominatim.openstreetmap.org/reverse?lat=${lat}&lon=${lng}&format=json&accept-language=de`,{headers:{'Accept-Language':'de'}});
    const d=await r.json();
    const a=d.address||{};
    const name=d.name||a.tourism||a.amenity||a.natural||a.leisure||a.historic||a.building||a.neighbourhood||a.suburb||a.village||a.town||a.city||'';
    const city=a.city||a.town||a.village||a.municipality||a.county||'';
    const country=a.country||'';
    if(name)document.getElementById('d-name').value=name;
    if(city)document.getElementById('d-city').value=city;
    if(country)document.getElementById('d-country').value=country;
    status.textContent=name?`✅ ${name}${city?', '+city:''}`:'✅ Koordinaten gesetzt';
    status.style.color='var(--accent)';
  }catch(e){
    status.textContent='📍 Koordinaten gesetzt';
  }
}
function initRMap(){
  if(rMap){try{rMap.remove();}catch(e){} rMap=null; rMarkers=[];rLines=[];}
  rMap=_createMap('route-map');
  setTimeout(()=>{if(rMap)rMap.invalidateSize();},300);
}

function numIcon(n,color='#2d5a3d'){
  return L.divIcon({
    className:'',
    html:`<div style="width:30px;height:30px;border-radius:50%;background:${color};color:white;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;border:3px solid white;box-shadow:0 2px 8px rgba(0,0,0,.3);font-family:'DM Sans',sans-serif;">${n}</div>`,
    iconSize:[30,30],iconAnchor:[15,15]
  });
}
function refreshDMap(){
  if(!dMap)return;
  dMarkers.forEach(m=>{try{dMap.removeLayer(m);}catch(e){}});
  dMarkers=[];
  const tid=ctid();
  const ds=S.dests.filter(d=>d.tripId===tid&&d.lat&&d.lng);
  if(!ds.length){dMap.setView([20,10],2);return;}
  const pts=[];
  ds.forEach((d,i)=>{
    const m=L.marker([d.lat,d.lng],{icon:numIcon(i+1)})
      .addTo(dMap)
      .bindPopup(`<strong>${d.name}</strong>${d.city?'<br>📍 '+d.city:''}`);
    dMarkers.push(m);
    pts.push([d.lat,d.lng]);
  });
  setTimeout(()=>{
    if(!dMap)return;
    dMap.invalidateSize();
    ds.length===1?dMap.setView(pts[0],12):dMap.fitBounds(pts,{padding:[40,40]});
  },100);
}
function refreshRMap(){
  if(!rMap)return;
  rMarkers.forEach(m=>{try{rMap.removeLayer(m);}catch(e){}});
  rLines.forEach(l=>{try{rMap.removeLayer(l);}catch(e){}});
  rMarkers=[];rLines=[];
  const tid=ctid();
  const routes=S.routes.filter(r=>r.tripId===tid);
  const seen=[],pts=[];
  routes.forEach(r=>(r.destIds||[]).forEach(id=>{if(!seen.includes(id))seen.push(id);}));
  let rNum=0;
  seen.forEach((did)=>{
    const d=S.dests.find(x=>x.id===did);
    if(!d||!d.lat||!d.lng)return;
    rNum++;
    const m=L.marker([d.lat,d.lng],{icon:numIcon(rNum,'#c17f3a')})
      .addTo(rMap)
      .bindPopup(`<strong>${d.name}</strong>${d.city?'<br>📍 '+d.city:''}`);
    rMarkers.push(m);
    pts.push([d.lat,d.lng]);
  });
  if(pts.length>1){
    const l=L.polyline(pts,{color:'#c17f3a',weight:3,opacity:.7,dashArray:'8,6'}).addTo(rMap);
    rLines.push(l);
  }
  setTimeout(()=>{
    if(!rMap)return;
    rMap.invalidateSize();
    if(pts.length===1)rMap.setView(pts[0],11);
    else if(pts.length>1)rMap.fitBounds(pts,{padding:[40,40]});
    else rMap.setView([20,10],2);
  },100);
}

// ── TABS ──────────────────────────────────────────────────────────────────────
function showTab(tab){
  document.querySelectorAll('.tab-panel').forEach(p=>p.classList.remove('active'));
  // update sub-nav active state
  document.querySelectorAll('#sub-nav button').forEach(b=>b.classList.remove('active'));
  const subBtn=document.getElementById('tab-'+(tab==='accommodation'?'accom':tab));
  if(subBtn) subBtn.classList.add('active');
  if(tab==='destinations'){
    document.getElementById('panel-destinations').classList.add('active');
    renderDests();
    requestAnimationFrame(()=>requestAnimationFrame(()=>{initDMap();refreshDMap();}));
    return;
  }
  if(tab==='route'){
    document.getElementById('panel-route').classList.add('active');
    renderRoute();
    requestAnimationFrame(()=>requestAnimationFrame(()=>{initRMap();refreshRMap();}));
    return;
  }
  document.getElementById('panel-'+tab)?.classList.add('active');
  if(tab==='trips')renderTrips();
  else if(tab==='budget')renderBudget();
  else if(tab==='packing')renderPacking();
  else if(tab==='accommodation')renderAccom();
  else if(tab==='transport')renderTransport();
  else if(tab==='backlog')renderBacklog();
  else if(tab==='worldmap'){updateVisitedCount();updateVisitedFlags();}
  else if(tab==='dayplan'){renderDayplan();}
  else if(tab==='todo'){renderTodos();}
  else if(tab==='notes'){renderNotes(activeTripId);}
}

// ── WORLD MAP ─────────────────────────────────────────────────────────────────
let wMap=null,wGeoLayer=null;
const W_COLORS=['#c0392b','#e67e22','#f39c12','#27ae60','#2980b9','#8e44ad','#16a085','#d35400','#1abc9c','#c0392b','#2471a3','#a93226','#1e8449','#d68910','#6c3483'];
function wVisStyle(id){const i=Math.abs(parseInt(id)*2654435761>>>0)%W_COLORS.length;return{fillColor:W_COLORS[i],fillOpacity:0.75,color:'rgba(0,0,0,0.25)',weight:1};}
const W_DEF={fillColor:'#d8d4cc',fillOpacity:0.9,color:'#b0aca5',weight:0.5};
const CN={10:'Antarktika',74:'Bouvetinsel',86:'Brit. Territorium Ind. Ozean',136:'Kaimaninseln',162:'Weihnachtsinsel',166:'Kokosinseln',175:'Mayotte',184:'Cookinseln',238:'Falklandinseln',239:'Südgeorgien',254:'Französisch-Guayana',258:'Französisch-Polynesien',260:'Franz. Süd- und Antarktisgebiete',275:'Palästina',292:'Gibraltar',304:'Grönland',312:'Guadeloupe',316:'Guam',334:'Heard- und McDonald-Inseln',344:'Hongkong',446:'Macau',474:'Martinique',531:'Curaçao',533:'Aruba',534:'Sint Maarten',535:'Bonaire',540:'Neukaledonien',574:'Norfolkinsel',580:'Nördliche Marianen',581:'Amerikanisch-Ozeanien',583:'Mikronesien',584:'Marshallinseln',585:'Palau',630:'Puerto Rico',638:'Réunion',652:'Saint-Barthélemy',654:'St. Helena',660:'Anguilla',663:'Saint-Martin',666:'Saint-Pierre und Miquelon',740:'Suriname',744:'Svalbard und Jan Mayen',796:'Turks- und Caicosinseln',831:'Guernsey',832:'Jersey',833:'Isle of Man',850:'Amerikanische Jungferninseln',876:'Wallis und Futuna',4:'Afghanistan',8:'Albanien',12:'Algerien',24:'Angola',31:'Aserbaidschan',32:'Argentinien',36:'Australien',40:'Österreich',48:'Bahrain',50:'Bangladesch',51:'Armenien',56:'Belgien',64:'Bhutan',68:'Bolivien',70:'Bosnien & Herzegowina',72:'Botswana',76:'Brasilien',90:'Salomonen',96:'Brunei',100:'Bulgarien',104:'Myanmar',108:'Burundi',112:'Belarus',116:'Kambodscha',120:'Kamerun',124:'Kanada',132:'Kap Verde',140:'Zentralafrikanische Republik',144:'Sri Lanka',148:'Tschad',152:'Chile',156:'China',158:'Taiwan',170:'Kolumbien',174:'Komoren',178:'Kongo',180:'DR Kongo',188:'Costa Rica',191:'Kroatien',192:'Kuba',196:'Zypern',203:'Tschechien',204:'Benin',208:'Dänemark',218:'Ecuador',222:'El Salvador',226:'Äquatorialguinea',231:'Äthiopien',232:'Eritrea',233:'Estland',242:'Fidschi',246:'Finnland',250:'Frankreich',262:'Dschibuti',266:'Gabun',268:'Georgien',270:'Gambia',276:'Deutschland',288:'Ghana',296:'Kiribati',300:'Griechenland',304:'Grönland',320:'Guatemala',324:'Guinea',332:'Haiti',340:'Honduras',348:'Ungarn',352:'Island',356:'Indien',360:'Indonesien',364:'Iran',368:'Irak',372:'Irland',376:'Israel',380:'Italien',384:'Elfenbeinküste',388:'Jamaika',392:'Japan',398:'Kasachstan',400:'Jordanien',404:'Kenia',408:'Nordkorea',410:'Südkorea',414:'Kuwait',418:'Laos',422:'Libanon',426:'Lesotho',428:'Lettland',430:'Liberia',434:'Libyen',438:'Liechtenstein',440:'Litauen',442:'Luxemburg',450:'Madagaskar',454:'Malawi',458:'Malaysia',462:'Malediven',466:'Mali',470:'Malta',478:'Mauretanien',480:'Mauritius',484:'Mexiko',492:'Monaco',496:'Mongolei',499:'Montenegro',504:'Marokko',508:'Mosambik',512:'Oman',516:'Namibia',520:'Nauru',524:'Nepal',528:'Niederlande',548:'Vanuatu',554:'Neuseeland',558:'Nicaragua',562:'Niger',566:'Nigeria',578:'Norwegen',583:'Mikronesien',584:'Marshallinseln',585:'Palau',586:'Pakistan',591:'Panama',598:'Papua-Neuguinea',600:'Paraguay',604:'Peru',608:'Philippinen',616:'Polen',620:'Portugal',624:'Guinea-Bissau',626:'Timor-Leste',634:'Katar',642:'Rumänien',643:'Russland',646:'Ruanda',659:'St. Kitts und Nevis',662:'St. Lucia',670:'St. Vincent',674:'San Marino',678:'São Tomé und Príncipe',682:'Saudi-Arabien',686:'Senegal',688:'Serbien',690:'Seychellen',694:'Sierra Leone',702:'Singapur',703:'Slowakei',704:'Vietnam',705:'Slowenien',706:'Somalia',710:'Südafrika',716:'Simbabwe',724:'Spanien',728:'Südsudan',729:'Sudan',740:'Suriname',748:'Eswatini',752:'Schweden',756:'Schweiz',760:'Syrien',762:'Tadschikistan',764:'Thailand',768:'Togo',776:'Tonga',780:'Trinidad und Tobago',784:'Vereinigte Arabische Emirate',788:'Tunesien',792:'Türkei',795:'Turkmenistan',798:'Tuvalu',800:'Uganda',804:'Ukraine',807:'Nordmazedonien',818:'Ägypten',826:'Vereinigtes Königreich',834:'Tansania',840:'Vereinigte Staaten',854:'Burkina Faso',858:'Uruguay',862:'Venezuela',882:'Samoa',887:'Jemen',894:'Sambia'};
const CF={10:'AQ',74:'BV',86:'IO',136:'KY',162:'CX',166:'CC',175:'YT',184:'CK',238:'FK',239:'GS',254:'GF',258:'PF',260:'TF',275:'PS',292:'GI',304:'GL',312:'GP',316:'GU',334:'HM',344:'HK',446:'MO',474:'MQ',531:'CW',533:'AW',534:'SX',535:'BQ',540:'NC',574:'NF',580:'MP',581:'UM',583:'FM',584:'MH',585:'PW',630:'PR',638:'RE',652:'BL',654:'SH',660:'AI',663:'MF',666:'PM',740:'SR',744:'SJ',796:'TC',831:'GG',832:'JE',833:'IM',850:'VI',876:'WF',4:'AF',8:'AL',12:'DZ',24:'AO',31:'AZ',32:'AR',36:'AU',40:'AT',48:'BH',50:'BD',51:'AM',56:'BE',64:'BT',68:'BO',70:'BA',72:'BW',76:'BR',90:'SB',96:'BN',100:'BG',104:'MM',108:'BI',112:'BY',116:'KH',120:'CM',124:'CA',132:'CV',140:'CF',144:'LK',148:'TD',152:'CL',156:'CN',158:'TW',170:'CO',174:'KM',178:'CG',180:'CD',188:'CR',191:'HR',192:'CU',196:'CY',203:'CZ',204:'BJ',208:'DK',218:'EC',222:'SV',226:'GQ',231:'ET',232:'ER',233:'EE',242:'FJ',246:'FI',250:'FR',262:'DJ',266:'GA',268:'GE',270:'GM',276:'DE',288:'GH',296:'KI',300:'GR',320:'GT',324:'GN',332:'HT',340:'HN',348:'HU',352:'IS',356:'IN',360:'ID',364:'IR',368:'IQ',372:'IE',376:'IL',380:'IT',384:'CI',388:'JM',392:'JP',398:'KZ',400:'JO',404:'KE',408:'KP',410:'KR',414:'KW',418:'LA',422:'LB',426:'LS',428:'LV',430:'LR',434:'LY',438:'LI',440:'LT',442:'LU',450:'MG',454:'MW',458:'MY',462:'MV',466:'ML',470:'MT',478:'MR',480:'MU',484:'MX',492:'MC',496:'MN',499:'ME',504:'MA',508:'MZ',512:'OM',516:'NA',520:'NR',524:'NP',528:'NL',548:'VU',554:'NZ',558:'NI',562:'NE',566:'NG',578:'NO',583:'FM',584:'MH',585:'PW',586:'PK',591:'PA',598:'PG',600:'PY',604:'PE',608:'PH',616:'PL',620:'PT',624:'GW',626:'TL',634:'QA',642:'RO',643:'RU',646:'RW',659:'KN',662:'LC',670:'VC',674:'SM',678:'ST',682:'SA',686:'SN',688:'RS',690:'SC',694:'SL',702:'SG',703:'SK',704:'VN',705:'SI',706:'SO',710:'ZA',716:'ZW',724:'ES',728:'SS',729:'SD',740:'SR',748:'SZ',752:'SE',756:'CH',760:'SY',762:'TJ',764:'TH',768:'TG',776:'TO',780:'TT',784:'AE',788:'TN',792:'TR',795:'TM',798:'TV',800:'UG',804:'UA',807:'MK',818:'EG',826:'GB',834:'TZ',840:'US',854:'BF',858:'UY',862:'VE',882:'WS',887:'YE',894:'ZM'};
function countryFlag(id){const a2=CF[+id];if(!a2)return'';return[...a2].map(c=>String.fromCodePoint(0x1F1E6-65+c.charCodeAt(0))).join('');}
function _fixAntimeridian(geo){
  function fixRing(ring){
    for(let i=1;i<ring.length;i++){
      while(ring[i][0]-ring[i-1][0]>180)ring[i][0]-=360;
      while(ring[i][0]-ring[i-1][0]<-180)ring[i][0]+=360;
    }
    return ring;
  }
  geo.features.forEach(f=>{
    if(!f.geometry)return;
    if(f.geometry.type==='Polygon')f.geometry.coordinates=f.geometry.coordinates.map(fixRing);
    else if(f.geometry.type==='MultiPolygon')f.geometry.coordinates=f.geometry.coordinates.map(p=>p.map(fixRing));
  });
  return geo;
}
function initWorldMap(){
  if(wMap){setTimeout(()=>wMap.invalidateSize(),100);return;}
  const el=document.getElementById('world-map-el');
  if(!el)return;
  wMap=L.map(el,{preferCanvas:true,zoomControl:true,worldCopyJump:false}).setView([20,0],2);
  L.tileLayer('https://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}{r}.png',{
    attribution:'© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> © <a href="https://carto.com/">CARTO</a>',
    subdomains:'abcd',maxZoom:19
  }).addTo(wMap);
  fetch('https://cdn.jsdelivr.net/npm/world-atlas@2/countries-50m.json')
    .then(r=>r.json())
    .then(world=>{
      const geo=_fixAntimeridian(topojson.feature(world,world.objects.countries));
      wGeoLayer=L.geoJSON(geo,{
        style:f=>(S.visitedCountries||[]).includes(String(+f.id))?wVisStyle(+f.id):W_DEF,
        onEachFeature:(f,layer)=>{
          const name=CN[+f.id];
          if(name)layer.bindTooltip(name,{sticky:true,className:'world-tooltip'});
          layer.on('click',()=>toggleVisited(String(+f.id)));
        }
      }).addTo(wMap);
      updateVisitedCount();
    });
}
function toggleVisited(id){
  if(!S.visitedCountries)S.visitedCountries=[];
  const idx=S.visitedCountries.indexOf(id);
  if(idx===-1)S.visitedCountries.push(id);
  else S.visitedCountries.splice(idx,1);
  save();
  if(wGeoLayer){
    wGeoLayer.eachLayer(l=>{
      if(String(+l.feature.id)===id)l.setStyle(idx===-1?wVisStyle(+id):W_DEF);
    });
  }
  updateVisitedCount();
  updateVisitedFlags();
  if(document.getElementById('country-list-panel').style.display!=='none')renderCountryList(document.getElementById('country-search').value);
}
function updateVisitedCount(){
  const el=document.getElementById('visited-count');
  if(el)el.textContent=(S.visitedCountries||[]).length;
}
function updateVisitedFlags(){
  const el=document.getElementById('visited-flags');
  if(!el)return;
  const visited=S.visitedCountries||[];
  if(!visited.length){el.innerHTML='<span style="color:var(--text-muted);font-size:13px;">Noch keine Länder besucht — klicke auf die Karte oder nutze die Länderliste.</span>';return;}
  el.innerHTML=visited.map(id=>{
    const flag=countryFlag(+id);
    const name=CN[+id]||'#'+id;
    return flag?`<span class="vflag" title="${name}" onclick="toggleVisited('${id}')">${flag}</span>`:'';
  }).filter(Boolean).join('');
}
function renderCountryList(filter=''){
  const el=document.getElementById('country-checklist');
  if(!el)return;
  const visited=S.visitedCountries||[];
  const items=Object.entries(CN)
    .sort((a,b)=>a[1].localeCompare(b[1],'de'))
    .filter(([,name])=>!filter||name.toLowerCase().includes(filter.toLowerCase()));
  el.innerHTML=items.map(([id,name])=>{
    const checked=visited.includes(String(id));
    const flag=countryFlag(+id);
    return`<label class="country-check-item">
      <input type="checkbox" ${checked?'checked':''} onchange="toggleVisited('${id}')">
      <span class="cf">${flag}</span>
      <span class="cn">${name}</span>
    </label>`;
  }).join('');
}
function toggleCountryList(){
  const panel=document.getElementById('country-list-panel');
  const btn=document.getElementById('country-list-toggle');
  const open=panel.style.display==='none';
  panel.style.display=open?'block':'none';
  btn.textContent=open?'✕ Schließen':'📋 Länderliste';
  if(open){document.getElementById('country-search').value='';renderCountryList();}
}

// ── MODAL ─────────────────────────────────────────────────────────────────────
function openModal(id){
  document.getElementById(id).classList.add('open');
  if(id==='modal-pack-item')fillPackCatSel();
  if(id==='modal-route'){selDestIds=[];excludedDestIds=[];fillRouteDestGrid();}
  if(id==='modal-backlog')fillCountrySelect();
  if(id==='modal-docs'){resetDocForm();renderDocs();}
  if(id==='modal-dest'){
    _pendingPhoto=null;
    document.getElementById('d-photo-preview').style.display='none';
    document.getElementById('d-photo-file').value='';
    document.getElementById('d-edit-id').value='';
    document.getElementById('dest-modal-title').textContent='📍 Neues Ziel';
    ['d-name','d-city','d-country','d-lat','d-lng','d-notes'].forEach(fid=>document.getElementById(fid).value='');
  }
}
function closeModal(id){
  document.getElementById(id).classList.remove('open');
  if(id==='modal-dest'){
    const el=document.getElementById('dest-pick-map');
    if(el)el.classList.add('hidden');
    if(_destPickMap){_destPickMap.remove();_destPickMap=null;_destPickMarker=null;}
  }
  if(id==='modal-route'){
    const el=document.getElementById('r-mini-map');
    if(el)el.classList.add('hidden');
    if(_rMiniMap){_rMiniMap.remove();_rMiniMap=null;_rMiniMarkers=[];}
  }
  if(id==='modal-dayplan'){
    if(fpDayplanEnd)fpDayplanEnd.set('minDate',null);
  }
  if(id==='modal-accom'){
    document.getElementById('accom-modal-title').textContent='🏨 Neue Unterkunft';
    document.getElementById('a-edit-id').value='';
    ['a-name','a-loc','a-link'].forEach(f=>{const el=document.getElementById(f);if(el)el.value='';});
    document.getElementById('a-type').value='hotel';
    document.getElementById('a-price').value='';
    document.getElementById('a-status').value='booked';
    if(fpAccomIn)fpAccomIn.clear();
    if(fpAccomOut){fpAccomOut.set('minDate',null);fpAccomOut.clear();}
    document.getElementById('a-pdf-status').textContent='';
    const fn=document.getElementById('pdf-file-name');if(fn)fn.style.display='none';
    const pb=document.getElementById('a-pdf-parse-btn');if(pb)pb.style.display='none';
    const db=document.getElementById('a-pdf-debug-btn');if(db)db.style.display='none';
    const dbout=document.getElementById('a-pdf-debug-out');if(dbout)dbout.style.display='none';
    _pdfBase64=null;
  }
}
document.querySelectorAll('.modal-overlay').forEach(m=>m.addEventListener('click',e=>{if(e.target===m)closeModal(m.id);}));

// ── SELECTS (kept for screenshot import compatibility) ─────────────────────────
function fillSelects(){}
function sel(id){return document.getElementById(id)?.value||'';}
function setSel(id,v){const e=document.getElementById(id);if(e)e.value=v;}

// ── DASHBOARD ─────────────────────────────────────────────────────────────────
function renderDashboard(){
  const el=document.getElementById('dashboard-content');if(!el)return;
  const fmtIso=iso=>{if(!iso)return'';const[y,m,d]=iso.split('-');return`${d}.${m}.${y}`;};
  const tripGradients=[
    ['#155e3a','#27936b'],['#1d3d8c','#3b70d9'],['#6b21a8','#a855f7'],
    ['#9d174d','#ec4899'],['#0f5f6e','#0e9fac'],['#92400e','#d97706'],
    ['#7f1d1d','#dc2626'],['#1e3a5e','#4a90c4'],['#3d1a6e','#7c3aed'],
    ['#065f46','#059669'],
  ];
  const tripColor=id=>{let h=0;for(let i=0;i<id.length;i++)h=(h*31+id.charCodeAt(i))&0xffff;return tripGradients[h%tripGradients.length];};
  const sl={active:'Aktiv',done:'Abgeschlossen',planned:'Geplant'};
  const today=new Date();const todayStr=`${today.getFullYear()}-${String(today.getMonth()+1).padStart(2,'0')}-${String(today.getDate()).padStart(2,'0')}`;
  const totalTrips=S.trips.length;
  const activeTrips=S.trips.filter(t=>t.status==='active').length;
  const totalDests=S.dests.length;
  const totalSpent=S.exps.reduce((s,e)=>s+e.amount,0)+S.accoms.filter(a=>a.status!=='idea').reduce((s,a)=>s+a.price,0)+S.transports.filter(t=>t.status!=='idea').reduce((s,t)=>s+t.price,0);
  const upcomingTodos=(S.todos||[]).filter(t=>!t.done&&t.date&&t.date>=todayStr).sort((a,b)=>a.date.localeCompare(b.date)).slice(0,8);
  const upcomingTrips=S.trips.filter(t=>t.status!=='done'&&t.start).sort((a,b)=>a.start.localeCompare(b.start)).slice(0,4);
  const lbl=txt=>`<div style="font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--text-muted);margin-bottom:12px;">${txt}</div>`;
  const statCard=(icon,label,val)=>`<div style="background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:20px 22px;display:flex;flex-direction:column;gap:4px;"><div style="font-size:22px;">${icon}</div><div style="font-size:26px;font-weight:700;color:var(--text);line-height:1.1;">${val}</div><div style="font-size:13px;color:var(--text-muted);">${label}</div></div>`;
  const tripCard=tp=>{
    const spent=S.exps.filter(e=>e.tripId===tp.id).reduce((s,e)=>s+e.amount,0);
    const pct=tp.budget?Math.min(100,spent/tp.budget*100):0;
    const dCount=S.dests.filter(d=>d.tripId===tp.id).length;
    const dayCount=(tp.start&&tp.end)?Math.round((new Date(tp.end+'T12:00:00')-new Date(tp.start+'T12:00:00'))/86400000)+1:0;
    const [c1,c2]=tripColor(tp.id);
    const bannerStyle=`background:linear-gradient(135deg,${c1},${c2});`;
    const metaRow=(icon,text)=>`<div style="display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text-muted);padding:3px 0;"><span style="width:16px;text-align:center;flex-shrink:0;">${icon}</span><span>${text}</span></div>`;
    return `<div class="trip-card">
      <div class="trip-card-banner" style="${bannerStyle}">
        <span class="trip-card-banner-name">${tp.name}</span>
        <span class="trip-card-banner-badge">${sl[tp.status]}</span>
      </div>
      <div class="trip-card-body">
        ${tp.destination?`<div class="trip-card-dest">📍 ${tp.destination}</div>`:''}
        <div style="margin-top:${tp.destination?'6px':'0'};">
          ${tp.start?metaRow('📅',`${fmtIso(tp.start)}${tp.end?' – '+fmtIso(tp.end):''}`):''}
          ${dayCount?metaRow('🌙',`${dayCount} ${dayCount===1?'Tag':'Tage'}`):''}
          ${tp.persons>0?metaRow('👥',`${tp.persons} ${tp.persons===1?'Person':'Personen'}`):''}
          ${dCount?metaRow('📍',`${dCount} Ziele`):''}
        </div>
        ${tp.budget?`<div class="progress-bar"><div class="progress-fill ${spent>tp.budget?'over':''}" style="width:${pct}%"></div></div><div class="text-sm text-muted" style="margin-top:5px">${fc(spent)} von ${fc(tp.budget)}</div>`:''}
      </div>
      <div class="trip-card-actions">
        <button class="btn btn-primary" style="flex:1;font-size:14px;" onclick="setTripCtx('${tp.id}')">✈️ Reise öffnen</button>
        <button class="btn btn-secondary btn-sm" onclick="editTrip('${tp.id}')">✏️</button>
      </div>
    </div>`;
  };
  const todoRow=t=>`<div style="display:flex;align-items:center;gap:9px;padding:9px 0;border-bottom:1px solid var(--border);">
    <input type="checkbox" onchange="toggleTodo('${t.id}');renderDashboard();" style="width:15px;height:15px;flex-shrink:0;cursor:pointer;">
    <span style="flex:1;font-size:13px;">${t.text}</span>
    <span style="font-size:11px;color:${t.date<todayStr?'var(--danger)':'var(--text-muted)'};white-space:nowrap;">${fmtIso(t.date)}</span>
  </div>`;
  const countryPills=(S.countries||[]).map(c=>`<div style="display:inline-flex;align-items:center;gap:6px;background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:5px 12px;font-size:13px;"><span style="font-size:18px;">${c.flag||'🌍'}</span><span>${c.name}</span></div>`).join('');
  el.innerHTML=`
    <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px;margin-bottom:32px;">
      ${statCard('✈️','Reisen gesamt',totalTrips)}
      ${statCard('🟢','Aktive Reisen',activeTrips)}
      ${statCard('📍','Ziele gesamt',totalDests)}
      ${statCard('🌍','Länder besucht',S.countries.length)}
      ${statCard('💶','Ausgaben gesamt',fc(totalSpent))}
    </div>
    ${upcomingTrips.length?`<div style="margin-bottom:28px;">${lbl('Bevorstehende Reisen')}<div class="trip-grid">${upcomingTrips.map(tripCard).join('')}</div></div>`:''}
    ${upcomingTodos.length?`<div style="margin-bottom:28px;">${lbl('Nächste Todos')}<div style="background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:16px 18px;max-width:480px;">${upcomingTodos.map(todoRow).join('')}</div></div>`:''}
    ${S.countries.length?`<div style="margin-bottom:24px;">${lbl('Besuchte Länder')}<div style="display:flex;flex-wrap:wrap;gap:8px;">${countryPills}</div></div>`:''}
  `;
}
// ── TRIPS ─────────────────────────────────────────────────────────────────────
function delTrip(id){
  if(!confirm('Reise löschen? / Delete trip?'))return;
  S.trips=S.trips.filter(t=>t.id!==id);
  ['dests','routes','exps','packCats','packItems','accoms','transports'].forEach(k=>S[k]=S[k].filter(x=>x.tripId!==id));
  save();renderAll();
}
function renderTrips(){
  fillSelects();
  const g=document.getElementById('trip-grid');
  if(!S.trips.length){g.innerHTML=emptyState('✈️','Noch keine Reisen','Erstelle deine erste Reise!');return;}
  const sl={active:'Aktiv',done:'Abgeschlossen',planned:'Geplant'};
  const tripGradients=[
    ['#155e3a','#27936b'],['#1d3d8c','#3b70d9'],['#6b21a8','#a855f7'],
    ['#9d174d','#ec4899'],['#0f5f6e','#0e9fac'],['#92400e','#d97706'],
    ['#7f1d1d','#dc2626'],['#1e3a5e','#4a90c4'],['#3d1a6e','#7c3aed'],
    ['#065f46','#059669'],
  ];
  const tripColor=id=>{let h=0;for(let i=0;i<id.length;i++)h=(h*31+id.charCodeAt(i))&0xffff;return tripGradients[h%tripGradients.length];};
  const fmtIso=iso=>{if(!iso)return'';const[y,m,d]=iso.split('-');return`${d}.${m}.${y}`;};
  const cardHTML=tp=>{
    const spent=S.exps.filter(e=>e.tripId===tp.id).reduce((s,e)=>s+e.amount,0);
    const pct=tp.budget?Math.min(100,spent/tp.budget*100):0;
    const dCount=S.dests.filter(d=>d.tripId===tp.id).length;
    const dayCount=(tp.start&&tp.end)?Math.round((new Date(tp.end+'T12:00:00')-new Date(tp.start+'T12:00:00'))/86400000)+1:0;
    const [c1,c2]=tripColor(tp.id);
    const bannerStyle=`background:linear-gradient(135deg,${c1},${c2});${tp.status==='done'?'filter:saturate(.5) brightness(.85);':''}`;
    const metaRow=(icon,text)=>`<div style="display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text-muted);padding:3px 0;"><span style="width:16px;text-align:center;flex-shrink:0;">${icon}</span><span>${text}</span></div>`;
    return `<div class="trip-card">
      <div class="trip-card-banner" style="${bannerStyle}">
        <span class="trip-card-banner-name">${tp.name}</span>
        <span class="trip-card-banner-badge">${sl[tp.status]}</span>
      </div>
      <div class="trip-card-body">
        ${tp.destination?`<div class="trip-card-dest">📍 ${tp.destination}</div>`:''}
        <div style="margin-top:${tp.destination?'6px':'0'};">
          ${tp.start?metaRow('📅',`${fmtIso(tp.start)}${tp.end?' – '+fmtIso(tp.end):''}`):''}
          ${dayCount?metaRow('🌙',`${dayCount} ${dayCount===1?'Tag':'Tage'}`):''}
          ${tp.persons>0?metaRow('👥',`${tp.persons} ${tp.persons===1?'Person':'Personen'}`):''}
          ${dCount?metaRow('📍',`${dCount} Ziele`):''}
          ${tp.budget?metaRow('💶',fc(tp.budget)):''}
        </div>
        ${tp.budget?`<div class="progress-bar"><div class="progress-fill ${spent>tp.budget?'over':''}" style="width:${pct}%"></div></div><div class="text-sm text-muted" style="margin-top:5px">${fc(spent)} von ${fc(tp.budget)}</div>`:''}
      </div>
      <div class="trip-card-actions">
        <button class="btn btn-primary" style="flex:1;font-size:14px;" onclick="setTripCtx('${tp.id}')">✈️ Reise öffnen</button>
        <button class="btn btn-secondary btn-sm" onclick="openShareModal('${tp.id}')" title="Teilen">🔗</button>
        <button class="btn btn-secondary btn-sm" onclick="editTrip('${tp.id}')">✏️</button>
        <button class="btn btn-danger btn-sm" onclick="delTrip('${tp.id}')">🗑️</button>
      </div>
    </div>`;
  };
  const active=S.trips.filter(t=>t.status!=='done');
  const done=S.trips.filter(t=>t.status==='done');
  const sectionLabel=label=>`<div style="font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);margin:28px 0 12px;">✅ ${label}</div>`;
  g.innerHTML=`<div class="trip-grid">${active.length?active.map(cardHTML).join(''):emptyState('✈️','Noch keine Reisen','Erstelle deine erste Reise!')}</div>`
    +(done.length?sectionLabel('Abgeschlossene Reisen')+`<div class="trip-grid">${done.map(cardHTML).join('')}</div>`:'');
}

// ── DESTINATIONS ──────────────────────────────────────────────────────────────
function resizeImageToDataUrl(file,maxW,maxH,quality,cb){
  const reader=new FileReader();
  reader.onload=e=>{
    const img=new Image();
    img.onload=()=>{
      let w=img.width,h=img.height;
      if(w>maxW){h=Math.round(h*maxW/w);w=maxW;}
      if(h>maxH){w=Math.round(w*maxH/h);h=maxH;}
      const c=document.createElement('canvas');c.width=w;c.height=h;
      c.getContext('2d').drawImage(img,0,0,w,h);
      cb(c.toDataURL('image/jpeg',quality));
    };
    img.src=e.target.result;
  };
  reader.readAsDataURL(file);
}
function handleDestPhoto(input){
  const file=input.files[0];if(!file)return;
  resizeImageToDataUrl(file,900,600,0.82,url=>{
    _pendingPhoto={url,credit:''};
    document.getElementById('d-photo-img').src=url;
    document.getElementById('d-photo-preview').style.display='block';
  });
}
function clearDestPhoto(){
  _pendingPhoto=null;
  document.getElementById('d-photo-preview').style.display='none';
  document.getElementById('d-photo-file').value='';
}
function handleCountryPhoto(input){
  const file=input.files[0];if(!file)return;
  resizeImageToDataUrl(file,900,600,0.82,url=>{
    _coPhoto={url,credit:''};
    document.getElementById('co-photo-img').src=url;
    document.getElementById('co-photo-preview').style.display='block';
  });
}
function clearCountryPhoto(){
  _coPhoto=null;
  document.getElementById('co-photo-preview').style.display='none';
  document.getElementById('co-photo-file').value='';
}
document.addEventListener('paste',e=>{
  const items=e.clipboardData?.items;
  if(!items)return;
  const imgItem=Array.from(items).find(i=>i.type.startsWith('image/'));
  if(!imgItem)return;
  const destOpen=document.getElementById('modal-dest')?.classList.contains('open');
  const coOpen=document.getElementById('modal-country')?.classList.contains('open');
  if(!destOpen&&!coOpen)return;
  e.preventDefault();
  const file=imgItem.getAsFile();
  resizeImageToDataUrl(file,900,600,0.82,url=>{
    if(destOpen){
      _pendingPhoto={url,credit:''};
      document.getElementById('d-photo-img').src=url;
      document.getElementById('d-photo-preview').style.display='block';
    } else {
      _coPhoto={url,credit:''};
      document.getElementById('co-photo-img').src=url;
      document.getElementById('co-photo-preview').style.display='block';
    }
  });
});
function editDest(id){
  const d=S.dests.find(x=>x.id===id);if(!d)return;
  openModal('modal-dest');
  document.getElementById('dest-modal-title').textContent='📍 Ziel bearbeiten';
  document.getElementById('d-edit-id').value=id;
  document.getElementById('d-name').value=d.name;
  document.getElementById('d-city').value=d.city||'';
  document.getElementById('d-country').value=d.country||'';
  document.getElementById('d-lat').value=d.lat||'';
  document.getElementById('d-lng').value=d.lng||'';
  document.getElementById('d-notes').value=d.notes||'';
  if(d.photo){
    _pendingPhoto=d.photo;
    document.getElementById('d-photo-img').src=d.photo.url;
    document.getElementById('d-photo-preview').style.display='block';
  } else {
    _pendingPhoto=null;
    document.getElementById('d-photo-preview').style.display='none';
  }
}
async function geocodeDest(){
  const name=document.getElementById('d-name').value.trim();
  const city=document.getElementById('d-city').value.trim();
  const country=document.getElementById('d-country').value.trim();
  const q=[name,city,country].filter(Boolean).join(', ');
  if(!q)return;
  const btn=document.getElementById('d-geo-btn');
  const status=document.getElementById('d-geo-status');
  btn.disabled=true;btn.textContent='⏳';status.style.display='block';status.textContent='Suche…';
  try{
    const r=await fetch(`https://nominatim.openstreetmap.org/search?q=${encodeURIComponent(q)}&format=json&limit=1`,{headers:{'Accept-Language':'de'}});
    const data=await r.json();
    if(data.length){
      document.getElementById('d-lat').value=parseFloat(data[0].lat).toFixed(5);
      document.getElementById('d-lng').value=parseFloat(data[0].lon).toFixed(5);
      updateDestPickMapMarker();
      status.textContent='✅ Koordinaten gefunden: '+data[0].display_name.split(',').slice(0,2).join(',');
      status.style.color='var(--accent)';
    } else {
      status.textContent='❌ Nicht gefunden. Name oder Stadt anpassen.';
      status.style.color='var(--danger)';
    }
  }catch(e){status.textContent='❌ Fehler beim Suchen.';status.style.color='var(--danger)';}
  btn.disabled=false;btn.textContent='📍 Suchen';
}
let _destPickMap=null,_destPickMarker=null;
function toggleDestPickMap(){
  const el=document.getElementById('dest-pick-map');
  if(!el)return;
  const hidden=el.classList.contains('hidden');
  el.classList.toggle('hidden',!hidden);
  if(hidden){
    setTimeout(()=>{
      if(!_destPickMap){
        _destPickMap=L.map('dest-pick-map',{zoomControl:true});
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',{maxZoom:18}).addTo(_destPickMap);
        _destPickMap.on('click',e=>{
          const {lat,lng}=e.latlng;
          document.getElementById('d-lat').value=lat.toFixed(5);
          document.getElementById('d-lng').value=lng.toFixed(5);
          if(_destPickMarker)_destPickMarker.setLatLng(e.latlng);
          else{_destPickMarker=L.marker(e.latlng).addTo(_destPickMap);}
          // reverse geocode
          fetch(`https://nominatim.openstreetmap.org/reverse?lat=${lat}&lon=${lng}&format=json`,{headers:{'Accept-Language':'de'}})
            .then(r=>r.json()).then(d=>{
              if(d.address){
                const city=d.address.city||d.address.town||d.address.village||d.address.county||'';
                const country=d.address.country||'';
                if(city&&!document.getElementById('d-city').value)document.getElementById('d-city').value=city;
                if(country&&!document.getElementById('d-country').value)document.getElementById('d-country').value=country;
              }
            }).catch(()=>{});
        });
      }
      _destPickMap.invalidateSize();
      const lat=parseFloat(document.getElementById('d-lat').value);
      const lng=parseFloat(document.getElementById('d-lng').value);
      if(!isNaN(lat)&&!isNaN(lng)){
        _destPickMap.setView([lat,lng],13);
        if(_destPickMarker)_destPickMarker.setLatLng([lat,lng]);
        else{_destPickMarker=L.marker([lat,lng]).addTo(_destPickMap);}
      } else {
        _destPickMap.setView([20,10],2);
      }
    },80);
  }
}
function updateDestPickMapMarker(){
  if(!_destPickMap||document.getElementById('dest-pick-map').classList.contains('hidden'))return;
  const lat=parseFloat(document.getElementById('d-lat').value);
  const lng=parseFloat(document.getElementById('d-lng').value);
  if(!isNaN(lat)&&!isNaN(lng)){
    if(_destPickMarker)_destPickMarker.setLatLng([lat,lng]);
    else{_destPickMarker=L.marker([lat,lng]).addTo(_destPickMap);}
    _destPickMap.setView([lat,lng],13);
  }
}
function saveDest(){
  const tid=ctid();
  const name=document.getElementById('d-name').value.trim();
  if(!name||!tid)return;
  const eid=document.getElementById('d-edit-id').value;
  const obj={tripId:tid,name,city:document.getElementById('d-city').value.trim(),country:document.getElementById('d-country').value.trim(),lat:parseFloat(document.getElementById('d-lat').value)||null,lng:parseFloat(document.getElementById('d-lng').value)||null,notes:document.getElementById('d-notes').value.trim(),photo:_pendingPhoto||null};
  if(eid){Object.assign(S.dests.find(x=>x.id===eid),obj);}
  else{S.dests.push({id:uid(),...obj});}
  _pendingPhoto=null;
  save();closeModal('modal-dest');
  renderDests();refreshDMap();
}
function delDest(id){
  S.dests=S.dests.filter(d=>d.id!==id);
  S.routes.forEach(r=>{if(r.destIds)r.destIds=r.destIds.filter(did=>did!==id);});
  save();renderDests();refreshDMap();refreshRMap();
}
function renderDests(){
  fillSelects();
  const tid=ctid();
  const ds=S.dests.filter(d=>d.tripId===tid);
  const g=document.getElementById('dest-grid');
  if(!ds.length){g.innerHTML=emptyState('📍','Noch keine Ziele','Füge interessante Orte hinzu!');return;}
  g.innerHTML=ds.map((d,i)=>`<div class="dest-card">
    <div class="dest-num">${i+1}</div>
    ${d.photo?`<img class="dest-card-img" src="${d.photo.url}" alt="${d.name}" loading="lazy">`:`<div class="dest-card-placeholder">🏔️</div>`}
    <div class="dest-card-body">
      <div class="dest-card-name">${d.name}</div>
      <div class="dest-card-loc">${[d.city,d.country].filter(Boolean).join(', ')||'–'}</div>
      ${d.notes?`<div class="text-sm text-muted mt-3">${d.notes}</div>`:''}
      ${d.photo?`<div class="photo-credit">${d.photo.credit}</div>`:''}
    </div>
    <div class="dest-card-actions">
      ${d.lat&&d.lng?`<a href="${gmapsLink(d.lat,d.lng,d.name)}" target="_blank" class="btn btn-secondary btn-sm">🗺️ Maps</a>`:''}
      <button class="btn btn-secondary btn-sm" onclick="editDest('${d.id}')">✏️</button>
      <button class="btn btn-danger btn-sm" onclick="delDest('${d.id}')">🗑️</button>
    </div>
  </div>`).join('');
  refreshDMap();
}
function focusDest(id){
  const d=S.dests.find(x=>x.id===id);if(!d||!d.lat||!d.lng)return;
  if(!dMap)initDMap();
  dMap.setView([d.lat,d.lng],13);
}

// ── ROUTE ─────────────────────────────────────────────────────────────────────
let _dsiDragId=null;
function fillRouteDestGrid(){
  const tid=ctid();
  const ds=S.dests.filter(d=>d.tripId===tid);
  const g=document.getElementById('r-dest-grid');
  const eg=document.getElementById('r-excl-grid');
  const sectionLabel=(text,color='var(--text-muted)')=>
    `<div style="font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:${color};padding:4px 2px 2px;">${text}</div>`;
  if(!ds.length){g.innerHTML=`<div class="text-sm text-muted" style="padding:6px">Noch keine Ziele für diese Reise – direkt unten hinzufügen!</div>`;if(eg)eg.innerHTML='';return;}
  const selected=selDestIds.map(id=>ds.find(d=>d.id===id)).filter(Boolean);
  const available=ds.filter(d=>!selDestIds.includes(d.id)&&!excludedDestIds.includes(d.id));
  const tileHTML=d=>{
    const sel=selDestIds.includes(d.id);
    const num=selDestIds.indexOf(d.id)+1;
    const sub=[d.city,d.country].filter(Boolean).join(', ');
    return`<div class="dsi${sel?' selected':''}" id="dsi-${d.id}" draggable="true"
      onclick="toggleDestSel('${d.id}')"
      ondragstart="dsiDragStart(event,'${d.id}')"
      ondragover="dsiDragOver(event,'${d.id}')"
      ondragleave="dsiDragLeave(event,'${d.id}')"
      ondrop="dsiDrop(event,'${d.id}')">
      <span class="dsi-handle" draggable="false">≡</span>
      ${sel?`<div class="dsi-num">${num}</div>`:`<div class="dsi-unsel"></div>`}
      <div class="dsi-info">
        <div class="dsi-name">${d.name}</div>
        ${sub?`<div class="dsi-sub">${sub}</div>`:''}
      </div>
      ${sel?`<span class="dsi-check">✓</span>`:''}
    </div>`;
  };
  let html='';
  if(selected.length) html+=sectionLabel(`✓ In dieser Etappe (${selected.length})`, 'var(--accent)')+selected.map(tileHTML).join('');
  if(available.length) html+=(selected.length?`<div style="margin-top:6px;"></div>`:'')
    +sectionLabel(`Verfügbar (${available.length})`)+available.map(tileHTML).join('');
  g.innerHTML=html||`<div class="text-sm text-muted" style="padding:6px;">Alle Ziele sind ausgeschlossen.</div>`;
  // excluded zone tiles
  if(eg){
    const excl=excludedDestIds.map(id=>ds.find(d=>d.id===id)).filter(Boolean);
    eg.innerHTML=excl.map(d=>{
      const sub=[d.city,d.country].filter(Boolean).join(', ');
      return`<div class="dsi dsi-excluded" draggable="true"
        ondragstart="dsiDragStart(event,'${d.id}')"
        ondragover="dsiDragOver(event,'${d.id}')"
        ondragleave="dsiDragLeave(event,'${d.id}')"
        ondrop="dsiDrop(event,'${d.id}')">
        <span class="dsi-handle" draggable="false">≡</span>
        <div class="dsi-unsel" style="opacity:.4;"></div>
        <div class="dsi-info">
          <div class="dsi-name">${d.name}</div>
          ${sub?`<div class="dsi-sub">${sub}</div>`:''}
        </div>
        <button class="dsi-restore" onclick="removeExclusion('${d.id}')" title="Wieder verfügbar machen">↩</button>
      </div>`;
    }).join('');
  }
}
let _rMiniMap=null,_rMiniMarkers=[];
function toggleRouteMiniMap(){
  const el=document.getElementById('r-mini-map');if(!el)return;
  const hidden=el.classList.contains('hidden');
  el.classList.toggle('hidden',!hidden);
  if(hidden)setTimeout(initRouteMiniMap,80);
}
function initRouteMiniMap(){
  const el=document.getElementById('r-mini-map');if(!el||el.classList.contains('hidden'))return;
  if(_rMiniMap){_rMiniMap.remove();_rMiniMap=null;_rMiniMarkers=[];}
  _rMiniMap=L.map('r-mini-map',{zoomControl:true});
  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',{maxZoom:18}).addTo(_rMiniMap);
  refreshRouteMiniMap();
}
function refreshRouteMiniMap(){
  if(!_rMiniMap)return;
  _rMiniMarkers.forEach(m=>m.remove());_rMiniMarkers=[];
  const tid=ctid();
  const ds=S.dests.filter(d=>d.tripId===tid&&d.lat&&d.lng);
  if(!ds.length)return;
  const bounds=[];
  ds.forEach(d=>{
    const sel=selDestIds.includes(d.id);
    const num=selDestIds.indexOf(d.id)+1;
    const icon=L.divIcon({
      className:'',
      html:`<div style="width:28px;height:28px;border-radius:50%;background:${sel?'var(--accent)':'#aaa'};color:white;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;border:2px solid white;box-shadow:0 1px 4px rgba(0,0,0,.3);cursor:pointer;">${sel?num:'·'}</div>`,
      iconSize:[28,28],iconAnchor:[14,14]
    });
    const m=L.marker([d.lat,d.lng],{icon}).addTo(_rMiniMap);
    m.bindTooltip(d.name,{sticky:true});
    m.on('click',()=>{toggleDestSel(d.id);refreshRouteMiniMap();fillRouteDestGrid();});
    _rMiniMarkers.push(m);
    bounds.push([d.lat,d.lng]);
  });
  if(bounds.length)_rMiniMap.fitBounds(bounds,{padding:[20,20]});
}
function dsiExclDragOver(e){e.preventDefault();document.getElementById('r-excl-zone')?.classList.add('drag-over');}
function dsiExclDragLeave(e){document.getElementById('r-excl-zone')?.classList.remove('drag-over');}
function dsiExclDrop(e){
  e.preventDefault();
  document.getElementById('r-excl-zone')?.classList.remove('drag-over');
  if(!_dsiDragId)return;
  selDestIds=selDestIds.filter(x=>x!==_dsiDragId);
  if(!excludedDestIds.includes(_dsiDragId))excludedDestIds.push(_dsiDragId);
  _dsiDragId=null;
  fillRouteDestGrid();refreshRouteMiniMap();
}
function removeExclusion(id){
  excludedDestIds=excludedDestIds.filter(x=>x!==id);
  fillRouteDestGrid();refreshRouteMiniMap();
}
function dsiDragStart(e,id){_dsiDragId=id;setTimeout(()=>{const el=document.getElementById('dsi-'+id);if(el)el.classList.add('dragging');},0);}
function dsiDragOver(e,id){e.preventDefault();if(id===_dsiDragId)return;const el=document.getElementById('dsi-'+id);if(el)el.classList.add('drag-over');}
function dsiDragLeave(e,id){const el=document.getElementById('dsi-'+id);if(el)el.classList.remove('drag-over');}
function dsiDrop(e,targetId){
  e.preventDefault();
  const el=document.getElementById('dsi-'+targetId);if(el)el.classList.remove('drag-over');
  if(!_dsiDragId||_dsiDragId===targetId){_dsiDragId=null;return;}
  // reorder selDestIds if both are selected, otherwise just swap positions in the dests list
  const fromSel=selDestIds.includes(_dsiDragId),toSel=selDestIds.includes(targetId);
  if(fromSel&&toSel){
    const fi=selDestIds.indexOf(_dsiDragId),ti=selDestIds.indexOf(targetId);
    selDestIds.splice(fi,1);selDestIds.splice(ti,0,_dsiDragId);
  } else {
    // reorder in S.dests for the trip
    const tid=ctid();
    const all=S.dests.filter(d=>d.tripId===tid);
    const fi=all.findIndex(d=>d.id===_dsiDragId),ti=all.findIndex(d=>d.id===targetId);
    if(fi!==-1&&ti!==-1){
      const globalFi=S.dests.indexOf(all[fi]),globalTi=S.dests.indexOf(all[ti]);
      S.dests.splice(globalFi,1);S.dests.splice(globalTi,0,all[fi]);
      save();
    }
  }
  // if dragged from excluded zone back into main grid, remove exclusion
  excludedDestIds=excludedDestIds.filter(x=>x!==_dsiDragId);
  _dsiDragId=null;
  fillRouteDestGrid();
}
function toggleDestSel(id){
  // can only toggle if not excluded
  if(excludedDestIds.includes(id))return;
  if(selDestIds.includes(id))selDestIds=selDestIds.filter(x=>x!==id);
  else selDestIds.push(id);
  fillRouteDestGrid();
  refreshRouteMiniMap();
}
function addDestInRoute(){
  const name=document.getElementById('r-new-dest').value.trim();if(!name)return;
  const tid=ctid();if(!tid)return;
  const nd={id:uid(),tripId:tid,name,city:'',country:'',lat:null,lng:null,notes:'',photo:null};
  S.dests.push(nd);save();
  document.getElementById('r-new-dest').value='';
  fillRouteDestGrid();
  selDestIds.push(nd.id);
  setTimeout(()=>{const el=document.getElementById('dsi-'+nd.id);if(el)el.classList.add('selected');},40);
}
function saveRoute(){
  const tid=ctid();if(!tid)return;
  const linksRaw=document.getElementById('r-links').value.trim();
  const links=linksRaw?linksRaw.split('\n').map(l=>l.trim()).filter(Boolean).map(l=>{
    const parts=l.split('|').map(p=>p.trim());
    if(parts.length>=2)return{label:parts[0],url:parts[1]};
    try{const u=new URL(parts[0]);return{label:u.hostname.replace('www.',''),url:parts[0]};}
    catch(e){return{label:parts[0].slice(0,30),url:parts[0]};}
  }):[];
  S.routes.push({id:uid(),tripId:tid,day:parseInt(document.getElementById('r-day').value)||1,date:fpISO(fpRoute),notes:document.getElementById('r-notes').value.trim(),destIds:[...selDestIds],excludedDestIds:[...excludedDestIds],links,activities:[]});
  save();closeModal('modal-route');
  ['r-day','r-notes','r-links'].forEach(id=>document.getElementById(id).value='');
  clearDatepicker(fpRoute);
  selDestIds=[];excludedDestIds=[];renderRoute();refreshRMap();
}
function delRoute(id){S.routes=S.routes.filter(r=>r.id!==id);save();renderRoute();refreshRMap();}

// ── ROUTE ACTIVITIES (moved to Tagesplanung) ──────────────────────────────────

function toggleRouteExpand(routeId){
  const body=document.getElementById('rbody-'+routeId);
  const arrow=document.getElementById('rarrow-'+routeId);
  if(!body)return;
  const isOpen=body.classList.contains('open');
  body.classList.toggle('open',!isOpen);
  arrow.classList.toggle('open',!isOpen);
}

function renderRouteItem(routeId, keepOpen=false){
  const r=S.routes.find(x=>x.id===routeId);if(!r)return;
  const tid=ctid();
  const ds=S.dests.filter(d=>d.tripId===tid);
  const el=document.getElementById('ri-'+routeId);if(!el)return;
  const wasOpen=document.getElementById('rbody-'+routeId)?.classList.contains('open');
  el.innerHTML=buildRouteItemHTML(r,ds,keepOpen?wasOpen:false);
}

function routeTitle(r,ds){
  const dests=(r.destIds||[]).map(id=>ds.find(d=>d.id===id)).filter(Boolean);
  if(!dests.length){
    if(r.notes?.trim())return r.notes.trim().slice(0,40);
    const idx=S.routes.indexOf(r);
    return idx>=0?`Route ${idx+1}`:'Route';
  }
  if(dests.length===1)return dests[0].name;
  return`${dests[0].name} → ${dests[dests.length-1].name}`;
}
function buildRouteItemHTML(r, ds, isOpen=false){
  const chips=(r.destIds||[]).map((did,i)=>{
    const d=ds.find(x=>x.id===did);if(!d)return'';
    return `<span class="dest-chip"><span class="dest-chip-num">${i+1}</span>${d.name}</span>`;
  }).filter(Boolean).join('');

  const linkChips=(r.links||[]).map(lk=>
    `<a href="${lk.url}" target="_blank" style="display:inline-flex;align-items:center;gap:4px;background:var(--surface2);border:1px solid var(--border);border-radius:20px;padding:3px 10px;font-size:12px;font-weight:500;color:var(--accent);text-decoration:none;" onmouseover="this.style.background='var(--accent-light)'" onmouseout="this.style.background='var(--surface2)'">🔗 ${lk.label}</a>`
  ).join('');

  const destCount=(r.destIds||[]).length;
  const linkedDays=(S.dayplans||[]).filter(d=>d.routeId===r.id);
  const subtitle=[];
  if(destCount)subtitle.push(`${destCount} Ziel${destCount!==1?'e':''}`);
  if(linkedDays.length)subtitle.push(`📅 ${linkedDays.length} Tag${linkedDays.length!==1?'e':''} geplant`);

  return `
    <div class="route-item-header" onclick="toggleRouteExpand('${r.id}')">
      <div class="route-day-circle" style="font-size:18px;background:var(--accent2);">→</div>
      <div style="flex:1;min-width:0;">
        <div class="route-item-title" style="margin:0;">${routeTitle(r,ds)}</div>
        ${subtitle.length?`<div style="font-size:12px;color:var(--text-muted);margin-top:2px;">${subtitle.join(' · ')}</div>`:''}
      </div>
      <button class="btn-icon" style="flex-shrink:0;font-size:16px;" title="Tage planen" onclick="event.stopPropagation();toggleRouteDayAdd('${r.id}')">📅</button>
      <button class="btn-icon" style="flex-shrink:0;" onclick="event.stopPropagation();editRoute('${r.id}')">✏️</button>
      <button class="btn-icon" style="flex-shrink:0;" onclick="event.stopPropagation();delRoute('${r.id}')">🗑️</button>
      <span class="route-item-toggle ${isOpen?'open':''}\" id="rarrow-${r.id}">▼</span>
    </div>
    <div class="route-item-body ${isOpen?'open':''}" id="rbody-${r.id}">
      ${chips?`<div class="route-chips" style="margin-top:10px;">${chips}</div>`:''}
      ${r.notes?`<div class="text-sm text-muted" style="margin-top:8px;">${r.notes}</div>`:''}
      ${linkChips?`<div style="display:flex;flex-wrap:wrap;gap:5px;margin-top:8px;">${linkChips}</div>`:''}
      <div id="rdadd-${r.id}" style="display:none;margin-top:12px;padding:12px;background:var(--surface2);border-radius:var(--radius-sm);border:1px dashed var(--border);">
        <div style="font-size:12px;font-weight:600;color:var(--text-muted);margin-bottom:8px;text-transform:uppercase;letter-spacing:.05em;">📅 Tage aus dieser Etappe planen</div>
        <div style="display:flex;gap:8px;flex-wrap:wrap;align-items:flex-end;">
          <div style="display:flex;flex-direction:column;gap:3px;">
            <label style="font-size:11px;color:var(--text-muted);">Startdatum</label>
            <input type="date" id="rdadd-date-${r.id}" style="padding:7px 10px;border:1px solid var(--border);border-radius:var(--radius-sm);font-family:var(--font-body);font-size:13px;background:var(--surface);color:var(--text);outline:none;">
          </div>
          <div style="display:flex;flex-direction:column;gap:3px;">
            <label style="font-size:11px;color:var(--text-muted);">Anzahl Tage</label>
            <input type="number" id="rdadd-count-${r.id}" value="1" min="1" max="30" style="width:70px;padding:7px 10px;border:1px solid var(--border);border-radius:var(--radius-sm);font-family:var(--font-body);font-size:13px;background:var(--surface);color:var(--text);outline:none;">
          </div>
          <button class="btn btn-primary btn-sm" onclick="createDaysFromRoute('${r.id}')">+ Tage erstellen</button>
          ${linkedDays.length?`<button class="btn btn-secondary btn-sm" onclick="showTab('dayplan');closeAllRouteDayAdd()">→ Zur Tagesplanung (${linkedDays.length})</button>`:''}
        </div>
      </div>
    </div>`;
}


function toggleRouteDayAdd(routeId){
  const el=document.getElementById('rdadd-'+routeId);if(!el)return;
  const body=document.getElementById('rbody-'+routeId);
  const arrow=document.getElementById('rarrow-'+routeId);
  const showing=el.style.display==='none'||!el.style.display;
  el.style.display=showing?'block':'none';
  if(showing&&body&&!body.classList.contains('open')){
    body.classList.add('open');if(arrow)arrow.classList.add('open');
  }
}
function closeAllRouteDayAdd(){
  document.querySelectorAll('[id^="rdadd-"]').forEach(el=>el.style.display='none');
}
function createDaysFromRoute(routeId){
  const tid=ctid();if(!tid)return;
  if(!Array.isArray(S.stays))S.stays=[];
  const stayId=uid();
  S.stays.push({id:stayId,tripId:tid,routeId,activities:[]});
  const countEl=document.getElementById('rdadd-count-'+routeId);
  const dateEl=document.getElementById('rdadd-date-'+routeId);
  const count=Math.max(1,parseInt(countEl?.value)||1);
  const startDateVal=dateEl?.value; // YYYY-MM-DD from <input type="date">

  // find next day number
  const existing=(S.dayplans||[]).filter(d=>d.tripId===tid);
  let nextDay=(existing.length?Math.max(...existing.map(d=>d.day||0)):0)+1;

  // parse start date
  let startDate=startDateVal?new Date(startDateVal+'T12:00:00'):null;

  for(let i=0;i<count;i++){
    let dateStr='';
    if(startDate){
      const d=new Date(startDate);d.setDate(d.getDate()+i);
      dateStr=`${d.getFullYear()}-${String(d.getMonth()+1).padStart(2,'0')}-${String(d.getDate()).padStart(2,'0')}`;
    }
    S.dayplans.push({id:uid(),tripId:tid,day:nextDay+i,date:dateStr,routeId,stayId,notes:'',activities:[]});
  }
  save();
  renderRouteItem(routeId,true);
  renderDayplan();
  // show feedback
  const btn=document.querySelector(`#rdadd-${routeId} .btn-primary`);
  if(btn){const orig=btn.textContent;btn.textContent='✅ Erstellt!';setTimeout(()=>{btn.textContent=orig;},1500);}
}

let _riDragId=null;
function riDragStart(e,id){_riDragId=id;setTimeout(()=>{const el=document.getElementById('ri-'+id);if(el)el.classList.add('dragging');},0);}
function riDragEnd(id){const el=document.getElementById('ri-'+id);if(el)el.classList.remove('dragging');_riDragId=null;}
function riDragOver(e,id){e.preventDefault();if(id===_riDragId)return;const el=document.getElementById('ri-'+id);if(el)el.classList.add('drag-over');}
function riDragLeave(e,id){const el=document.getElementById('ri-'+id);if(el)el.classList.remove('drag-over');}
function riDrop(e,targetId){
  e.preventDefault();
  const el=document.getElementById('ri-'+targetId);if(el)el.classList.remove('drag-over');
  if(!_riDragId||_riDragId===targetId){_riDragId=null;return;}
  const tid=ctid();
  const tripRoutes=S.routes.filter(r=>r.tripId===tid);
  const fi=tripRoutes.findIndex(r=>r.id===_riDragId);
  const ti=tripRoutes.findIndex(r=>r.id===targetId);
  if(fi===-1||ti===-1){_riDragId=null;return;}
  const gFi=S.routes.indexOf(tripRoutes[fi]);
  const gTi=S.routes.indexOf(tripRoutes[ti]);
  S.routes.splice(gFi,1);
  S.routes.splice(gTi,0,tripRoutes[fi]);
  _riDragId=null;
  save();renderRoute();
}
function renderRoute(){
  fillSelects();
  const tid=ctid();
  const routes=S.routes.filter(r=>r.tripId===tid);
  const ds=S.dests.filter(d=>d.tripId===tid);
  const list=document.getElementById('route-list');
  if(!routes.length){list.innerHTML=emptyState('🗺️','Keine Etappen geplant','Füge Etappen zur Route hinzu.');return;}
  list.innerHTML=routes.map(r=>`<div class="route-item" id="ri-${r.id}" draggable="true"
    ondragstart="riDragStart(event,'${r.id}')"
    ondragend="riDragEnd('${r.id}')"
    ondragover="riDragOver(event,'${r.id}')"
    ondragleave="riDragLeave(event,'${r.id}')"
    ondrop="riDrop(event,'${r.id}')"
    style="cursor:grab;">${buildRouteItemHTML(r,ds,false)}</div>`).join('');
  if(rMap)refreshRMap();
}

// ── BUDGET ────────────────────────────────────────────────────────────────────
const catIcons={transport:'🚆',food:'🍜',accommodation:'🏨',activity:'🎭',shopping:'🛍️',other:'💳'};
function delExp(id){S.exps=S.exps.filter(e=>e.id!==id);save();renderBudget();}

// ── PACKING ───────────────────────────────────────────────────────────────────
function savePackCat(){
  const tid=ctid();const name=document.getElementById('pc-name').value.trim();
  if(!name||!tid)return;
  S.packCats.push({id:uid(),tripId:tid,name});save();closeModal('modal-pack-cat');renderPacking();
  document.getElementById('pc-name').value='';
}
function savePackItem(){
  const tid=ctid();const name=document.getElementById('pi-name').value.trim();const catId=document.getElementById('pi-cat').value;
  if(!name||!catId||!tid)return;
  _lastPackCatId=catId;
  S.packItems.push({id:uid(),tripId:tid,catId,name,checked:false});save();closeModal('modal-pack-item');renderPacking();
  document.getElementById('pi-name').value='';
}
function togglePack(id){const i=S.packItems.find(x=>x.id===id);if(i){i.checked=!i.checked;save();renderPacking();}}
function delPack(id){S.packItems=S.packItems.filter(i=>i.id!==id);save();renderPacking();}
function setPackQty(id,delta){const i=S.packItems.find(x=>x.id===id);if(!i)return;i.qty=Math.max(1,(i.qty||1)+delta);save();renderPacking();}
function fillPackCatSel(){
  const tid=ctid();
  const sel=document.getElementById('pi-cat');
  sel.innerHTML=S.packCats.filter(c=>c.tripId===tid).map(c=>`<option value="${c.id}">${c.name}</option>`).join('');
  _packCatAutoSelected=false;
  if(_lastPackCatId&&S.packCats.find(c=>c.id===_lastPackCatId&&c.tripId===tid))sel.value=_lastPackCatId;
  _packShowSuggestion(sel.value, false);
}
function renderPacking(){
  fillSelects();
  const tid=ctid();
  const cats=S.packCats.filter(c=>c.tripId===tid);
  const el=document.getElementById('packing-content');
  if(!cats.length){el.innerHTML=emptyState('🎒','Packliste leer','Füge Kategorien und Items hinzu.');return;}
  el.innerHTML=cats.map(cat=>{
    const items=S.packItems.filter(i=>i.catId===cat.id);
    const done=items.filter(i=>i.checked).length;
    return `<div class="pack-cat-block" id="pcat-${cat.id}"
      ondragover="_packCatDragOver(event,'${cat.id}')"
      ondragleave="_packCatDragLeave(event)"
      ondrop="_packDropOnCat(event,'${cat.id}')">
      <div class="pack-cat-title">${cat.name}<span class="badge badge-${done===items.length&&items.length>0?'green':'gray'}">${done}/${items.length}</span></div>
      <div class="pack-items">${items.map(item=>{
        const qty=item.qty||1;
        return`<div class="pack-item ${item.checked?'checked':''}" id="pitem-${item.id}"
          draggable="true"
          ondragstart="_packItemDragStart(event,'${item.id}')"
          ondragend="_packItemDragEnd(event)"
          ondragover="_packItemDragOver(event,'${item.id}')"
          ondragleave="_packItemDragLeave(event)"
          ondrop="_packDropOnItem(event,'${item.id}')">
          <span class="pack-drag-handle" title="Verschieben">⠿</span>
          <input type="checkbox" ${item.checked?'checked':''} onchange="togglePack('${item.id}')">
          <span class="pack-item-name">${item.name}${qty>1?` <span style="font-size:12px;color:var(--text-muted);">×${qty}</span>`:''}</span>
          <div class="pack-qty">
            <button onclick="setPackQty('${item.id}',-1)" title="weniger">−</button>
            <span class="pack-qty-val">${qty}</span>
            <button onclick="setPackQty('${item.id}',1)" title="mehr">+</button>
          </div>
          <button class="btn-icon" style="color:var(--text-muted);" onclick="delPack('${item.id}')" title="Entfernen">✕</button>
        </div>`;
      }).join('')}</div>
    </div>`;
  }).join('');
}

// ── PACKING DRAG & DROP ───────────────────────────────────────────────────────
let _packDragId = null;

function _packItemDragStart(e, itemId){
  _packDragId = itemId;
  e.dataTransfer.effectAllowed = 'move';
  e.dataTransfer.setData('text/plain', itemId);
  setTimeout(()=>document.getElementById('pitem-'+itemId)?.classList.add('dragging'), 0);
}
function _packItemDragEnd(e){
  document.querySelectorAll('.pack-item.dragging').forEach(el=>el.classList.remove('dragging'));
  document.querySelectorAll('.pack-item.drag-over').forEach(el=>el.classList.remove('drag-over'));
  document.querySelectorAll('.pack-cat-block.drag-over-cat').forEach(el=>el.classList.remove('drag-over-cat'));
}
function _packItemDragOver(e, targetId){
  e.preventDefault(); e.stopPropagation();
  e.dataTransfer.dropEffect = 'move';
  document.querySelectorAll('.pack-item.drag-over').forEach(el=>el.classList.remove('drag-over'));
  if(targetId !== _packDragId) document.getElementById('pitem-'+targetId)?.classList.add('drag-over');
}
function _packItemDragLeave(e){
  e.currentTarget.classList.remove('drag-over');
}
function _packDropOnItem(e, targetId){
  e.preventDefault(); e.stopPropagation();
  if(!_packDragId || _packDragId === targetId) return;
  const fromIdx = S.packItems.findIndex(i=>i.id===_packDragId);
  const toIdx   = S.packItems.findIndex(i=>i.id===targetId);
  if(fromIdx===-1||toIdx===-1) return;
  const targetCatId = S.packItems[toIdx].catId;
  S.packItems[fromIdx].catId = targetCatId; // move to target's category
  const [dragged] = S.packItems.splice(fromIdx, 1);
  const newTo = S.packItems.findIndex(i=>i.id===targetId);
  S.packItems.splice(newTo, 0, dragged);
  _packDragId = null;
  save(); renderPacking();
}
function _packCatDragOver(e, catId){
  e.preventDefault();
  e.dataTransfer.dropEffect = 'move';
  document.getElementById('pcat-'+catId)?.classList.add('drag-over-cat');
}
function _packCatDragLeave(e){
  // only remove if leaving the block itself, not a child
  if(!e.currentTarget.contains(e.relatedTarget)){
    e.currentTarget.classList.remove('drag-over-cat');
  }
}
function _packDropOnCat(e, catId){
  e.preventDefault();
  document.querySelectorAll('.pack-cat-block.drag-over-cat').forEach(el=>el.classList.remove('drag-over-cat'));
  if(!_packDragId) return;
  const item = S.packItems.find(i=>i.id===_packDragId);
  if(!item || item.catId === catId) return;
  item.catId = catId;
  _packDragId = null;
  save(); renderPacking();
}

// ── PACKING SMART CATEGORY SUGGESTION ────────────────────────────────────────
let _lastPackCatId = null;
let _packCatAutoSelected = false;

const _packKW = [
  {k:['hemd','shirt','hose','pant','jacke','jacket','schuhe','shoe','socken','sock','unterwäsch','underwear','pullover','sweater','short','kleid','dress','rock','skirt','mütze','hat','cap','handschuh','glove','gürtel','belt','bh','bikini','badehose','swimsuit','pyjama','schlafanzug','mantel','coat','regenjacke','raincoat','flip flop','legging','hoodie','stiefel','boot','sandal','sneaker','weste','vest'],cats:['kleidung','clothing','klamotten','bekleidung','anziehen']},
  {k:['reisepass','passport','personalausweis','ausweis','visum','visa','ticket','buchung','booking','führerschein','license','versicherung','insurance','kreditkarte','credit card','bargeld','cash','impfpass','vaccination','kranken','travel doc','hotel voucher','gutschein','voucher','ausdruck','print'],cats:['dokument','paper','unterlage','ausweis','pass']},
  {k:['zahncreme','toothpaste','zahnbürste','toothbrush','shampoo','duschgel','shower gel','deodorant','deo','rasierer','razor','rasier','sonnencreme','sunscreen','sonnenmilch','parfüm','perfume','handcreme','moisturizer','haarbürste','hairbrush','kamm','comb','wattestäbchen','cotton','feuchttücher','wipe','tampon','binde','pad','kondom','mundwasser','mouthwash','lippenstift','lipstick','mascara','makeup','schminke','nagel','nail','seife','soap','body lotion'],cats:['hygiene','toilette','toilettenartikel','körperpflege','beauty','bad']},
  {k:['laptop','computer','handy','phone','ladekabel','charger','kamera','camera','adapter','stecker','powerbank','kopfhörer','headphone','airpod','tablet','kindle','e-reader','usb','sd karte','memory card','drohne','drone','smartwatch','watch','navigation','gps','fernseher','tv'],cats:['technik','elektronik','electronic','tech','gerät','kabel']},
  {k:['tabletten','tablet','pille','pill','pflaster','band-aid','verband','bandage','schmerzmittel','painkiller','ibuprofen','paracetamol','aspirin','antibiotika','antibiotic','mückenschutz','bug spray','insektenschutz','mosquito','malaria','sonnenschutz','thermometer','fieber','fever','erste hilfe','first aid','tropfen','drops','creme','salbe','ointment','spritze','injektion','medizin','medicine'],cats:['medizin','apotheke','gesundheit','health','arznei','first aid','sanitär']},
  {k:['wasserflasche','water bottle','buch','book','roman','novel','tagebuch','journal','karten','map','reiseführer','guidebook','sonnenbril','sunglasses','regenschirm','umbrella','schloss','lock','vorhängeschloss','padlock','nackenkissen','neck pillow','ohrenstöpsel','earplugs','augenmaske','eye mask','wäscheklammer','clothespin','wäschebeutel','laundry bag','schlafsack','sleeping bag','zelt','tent','taschenlampe','flashlight','compass','kompass'],cats:['zubehör','sonstiges','extra','various','misc','anderes']},
];

function _packMatchCat(name, cats){
  const lower = name.toLowerCase();
  // try each keyword group
  for(const group of _packKW){
    if(group.k.some(w=>lower.includes(w))){
      // find best matching existing category
      const match = cats.find(c=>group.cats.some(gc=>c.name.toLowerCase().includes(gc)||gc.includes(c.name.toLowerCase())));
      if(match) return match;
    }
  }
  // fallback: any cat whose name is contained in item name
  return cats.find(c=>lower.includes(c.name.toLowerCase())) || null;
}

function _packCatManualChange(){
  _packCatAutoSelected=false;
  document.getElementById('pi-cat-suggestion').style.display='none';
}

function _packShowSuggestion(catId,isKeyword){
  const tid=ctid();
  const cats=S.packCats.filter(c=>c.tripId===tid);
  const cat=cats.find(c=>c.id===catId);
  const suggEl=document.getElementById('pi-cat-suggestion');
  if(!suggEl||!cat)return;
  const label=isKeyword?`💡 ${cat.name} — passt das?`:`↩ ${cat.name}`;
  suggEl.style.display='';
  suggEl.innerHTML=`<button type="button" class="pack-cat-suggestion" onclick="_packAcceptSuggest('${cat.id}')">${label}</button>`;
}

function _packAutoSuggestCat(name){
  const tid=ctid();
  const cats=S.packCats.filter(c=>c.tripId===tid);
  if(!cats.length)return;
  const sel=document.getElementById('pi-cat');
  const match=name.length>=2?_packMatchCat(name,cats):null;
  if(match){
    sel.value=match.id;
    _packCatAutoSelected=true;
    _packShowSuggestion(match.id,true);
  } else if(_packCatAutoSelected&&_lastPackCatId){
    sel.value=_lastPackCatId;
    _packCatAutoSelected=false;
    _packShowSuggestion(_lastPackCatId,false);
  } else if(sel.value){
    _packShowSuggestion(sel.value,false);
  }
}

function _packAcceptSuggest(catId){
  const sel=document.getElementById('pi-cat');
  if(sel)sel.value=catId;
  document.getElementById('pi-cat-suggestion').style.display='none';
}

// ── ACCOMMODATION ─────────────────────────────────────────────────────────────
const accomSB={booked:'badge-green',pending:'badge-orange',idea:'badge-gray'};
const accomSL={booked:'✅ Gebucht',pending:'⏳ Ausstehend',idea:'💡 Idee'};
const accomTI={hotel:'🏨',hostel:'🛏️',airbnb:'🏠',camping:'⛺',other:'🏡'};
function delAccom(id){S.accoms=S.accoms.filter(a=>a.id!==id);save();renderAccom();}
function renderAccom(){
  fillSelects();
  const tid=ctid();
  const g=document.getElementById('accom-grid');
  const accoms=S.accoms.filter(a=>a.tripId===tid);

  // ── CONFLICT DETECTION ──────────────────────────────────────────────────────
  const alertsEl=document.getElementById('booking-alerts');
  const timelineWrap=document.getElementById('accom-timeline-wrap');

  // only check accoms that have both dates and are booked/pending
  const dated=accoms.filter(a=>a.checkin&&a.checkout&&a.status!=='idea').map(a=>({
    ...a,
    inD:new Date(a.checkin),
    outD:new Date(a.checkout)
  })).sort((a,b)=>a.inD-b.inD);

  const alerts=[];
  const trip=S.trips.find(t=>t.id===tid);

  // check overlaps: two bookings overlap if one checkin is before other checkout
  for(let i=0;i<dated.length;i++){
    for(let j=i+1;j<dated.length;j++){
      const a=dated[i],b=dated[j];
      // overlap = a.in < b.out AND b.in < a.out
      if(a.inD<b.outD && b.inD<a.outD){
        const overlapStart=new Date(Math.max(a.inD,b.inD));
        const overlapEnd=new Date(Math.min(a.outD,b.outD));
        const nights=Math.round((overlapEnd-overlapStart)/(86400000));
        alerts.push({
          type:'overlap',
          title:`⚠️ Doppelte Buchung: ${nights} Nacht${nights>1?'e':''}`,
          detail:`„${a.name}" und „${b.name}" überschneiden sich vom ${fmt(overlapStart)} bis ${fmt(overlapEnd)}.`
        });
      }
    }
  }

  // check gap: trip start → first booking
  if(dated.length&&trip?.start){
    const tripStart=new Date(trip.start);
    const gap=Math.round((dated[0].inD-tripStart)/86400000);
    if(gap>0)alerts.push({type:'gap',title:`💭 Lücke am Anfang: ${gap} Nacht${gap>1?'e':''}`,detail:`Reisebeginn ${fmt(tripStart)}, aber erste Unterkunft erst ab ${fmt(dated[0].inD)} — ${gap} Nacht${gap>1?'e':''} ungebucht.`});
  }
  // check gaps: between consecutive bookings
  for(let i=0;i<dated.length-1;i++){
    const a=dated[i],b=dated[i+1];
    const gapNights=Math.round((b.inD-a.outD)/86400000);
    if(gapNights>0){
      alerts.push({
        type:'gap',
        title:`💭 Lücke: ${gapNights} Nacht${gapNights>1?'e':''}`,
        detail:`Zwischen „${a.name}" (Check-out ${fmt(a.outD)}) und „${b.name}" (Check-in ${fmt(b.inD)}) ${gapNights===1?'ist eine Nacht':'sind '+gapNights+' Nächte'} nicht gebucht.`
      });
    }
  }
  // check gap: last booking → trip end
  if(dated.length&&trip?.end){
    const tripEnd=new Date(trip.end);
    const gap=Math.round((tripEnd-dated[dated.length-1].outD)/86400000);
    if(gap>0)alerts.push({type:'gap',title:`💭 Lücke am Ende: ${gap} Nacht${gap>1?'e':''}`,detail:`Letzte Unterkunft bis ${fmt(dated[dated.length-1].outD)}, aber Reiseende erst ${fmt(tripEnd)} — ${gap} Nacht${gap>1?'e':''} ungebucht.`});
  }

  // render alerts
  if(!dated.length){
    alertsEl.innerHTML='';
  } else if(!alerts.length){
    alertsEl.innerHTML=`<div class="alert-banner alert-ok"><div class="alert-banner-icon">✅</div><div class="alert-banner-body"><div class="alert-banner-title">Alles gebucht</div><div class="alert-banner-detail">Keine Lücken oder Doppelbuchungen gefunden.</div></div></div>`;
  } else {
    alertsEl.innerHTML=alerts.map(a=>`<div class="alert-banner ${a.type==='overlap'?'alert-overlap':'alert-gap'}">
      <div class="alert-banner-icon">${a.type==='overlap'?'🔴':'🟡'}</div>
      <div class="alert-banner-body">
        <div class="alert-banner-title">${a.title}</div>
        <div class="alert-banner-detail">${a.detail}</div>
      </div>
    </div>`).join('');
  }

  // ── TIMELINE ────────────────────────────────────────────────────────────────
  if(dated.length>=2){
    const minD=dated[0].inD;
    const maxD=dated[dated.length-1].outD;
    const totalMs=maxD-minD||1;
    const colors=['#2d5a3d','#c17f3a','#3a6b8c','#8c3a6b','#5a3d8c','#3d8c5a'];

    // find gaps for markers
    const gapMarkers=[];
    for(let i=0;i<dated.length-1;i++){
      const a=dated[i],b=dated[i+1];
      const gapMs=b.inD-a.outD;
      if(gapMs>0){
        const left=((a.outD-minD)/totalMs*100).toFixed(2);
        const width=(gapMs/totalMs*100).toFixed(2);
        gapMarkers.push(`<div class="timeline-gap-marker" style="left:${left}%;width:${width}%" title="Lücke: ${Math.round(gapMs/86400000)} Nacht/Nächte"></div>`);
      }
    }

    const bars=dated.map((a,i)=>{
      const left=((a.inD-minD)/totalMs*100).toFixed(2);
      const width=((a.outD-a.inD)/totalMs*100).toFixed(2);
      const color=colors[i%colors.length];
      return `<div class="timeline-bar" style="left:${left}%;width:${width}%;background:${color};" title="${a.name}: ${fmt(a.inD)} → ${fmt(a.outD)}">${parseFloat(width)>8?a.name:''}</div>`;
    }).join('');

    // axis labels: start, middle, end
    const midD=new Date(minD.getTime()+totalMs/2);
    const axis=`<div class="timeline-axis"><span>${fmt(minD)}</span><span>${fmt(midD)}</span><span>${fmt(maxD)}</span></div>`;

    timelineWrap.innerHTML=`<div class="accom-timeline">
      <div class="accom-timeline-title">📅 Belegungs-Übersicht</div>
      <div style="overflow-x:auto;">
        <div class="timeline-track">${gapMarkers.join('')}${bars}</div>
        ${axis}
      </div>
    </div>`;
  } else {
    timelineWrap.innerHTML='';
  }

  // ── CARDS ───────────────────────────────────────────────────────────────────
  if(!accoms.length){g.innerHTML=emptyState('🏨','Keine Unterkünfte','Trage Hotels und Unterkünfte ein.');return;}

  // flag which cards have issues
  const overlapIds=new Set();
  alerts.filter(a=>a.type==='overlap').forEach(al=>{
    dated.forEach(a=>{if(al.detail.includes(a.name))overlapIds.add(a.id);});
  });

  g.innerHTML=accoms.map(a=>{
    const hasIssue=overlapIds.has(a.id);
    return `<div class="accom-card" style="${hasIssue?'border-color:#f0a0a0;':''}">
      <div class="accom-head" style="${hasIssue?'background:#fdecea;':''}">
        <div class="flex items-center justify-between">
          <strong>${accomTI[a.type]} ${a.name}</strong>
          <span class="badge ${accomSB[a.status]}">${accomSL[a.status]}</span>
        </div>
        ${a.location?`<div class="text-sm text-muted" style="margin-top:3px">📍 ${a.location}</div>`:''}
      </div>
      <div class="accom-body">
        ${a.checkin?`<div class="accom-info">📅 ${a.checkin} → ${a.checkout||'?'}</div>`:''}
        ${a.checkin&&a.checkout?`<div class="accom-info">🌙 ${Math.round((new Date(a.checkout)-new Date(a.checkin))/86400000)} Nächte</div>`:''}
        ${a.price?`<div class="accom-info">💶 ${fc(a.price)}</div>`:''}
        ${a.link?`<div class="accom-info">🔗 <a href="${a.link}" target="_blank" style="color:var(--accent)">Booking Link</a></div>`:''}
        <div style="margin-top:8px;display:flex;gap:6px;">
        <button class="btn btn-secondary btn-sm" onclick="editAccom('${a.id}')">✏️ Bearbeiten</button>
        <button class="btn btn-danger btn-sm" onclick="delAccom('${a.id}')">🗑️ Löschen</button>
      </div>
      </div>
    </div>`;
  }).join('');
}

function fmt(d){
  if(!d)return'?';
  return d.toLocaleDateString('de-DE',{day:'2-digit',month:'2-digit',year:'2-digit'});
}

// ── BACKLOG ───────────────────────────────────────────────────────────────────
const prioC={high:'badge-red',medium:'badge-orange',low:'badge-gray'};
const prioL={high:'🔥 Hoch',medium:'⭐ Mittel',low:'💭 Niedrig'};
// ── STICKY NOTES ──────────────────────────────────────────────────────────────
let _notesTripId = null; // null = global board

function renderNotes(tripId){
  _notesTripId = tripId;
  const canvas = document.getElementById('notes-canvas');
  const ctxLabel = document.getElementById('notes-ctx-label');
  if(!canvas) return;
  if(tripId){
    const trip = S.trips.find(t=>t.id===tripId);
    if(ctxLabel) ctxLabel.textContent = (trip ? trip.name : 'Reise') + ' – Notizen';
  } else {
    if(ctxLabel) ctxLabel.textContent = 'Allgemeine Notizen';
  }
  const notes = (S.notes||[]).filter(n=>n.tripId===(tripId||null));
  const empty = document.getElementById('notes-empty');
  if(empty) empty.style.display = notes.length ? 'none' : '';
  // Remove old note cards
  canvas.querySelectorAll('.note-card').forEach(el=>el.remove());
  // Render each note
  notes.forEach(n=>canvas.appendChild(_buildNoteEl(n)));
  // Ensure canvas is tall enough
  _notesResizeCanvas();
}

function _notesResizeCanvas(){
  const canvas = document.getElementById('notes-canvas');
  if(!canvas) return;
  const notes = (S.notes||[]).filter(n=>n.tripId===(_notesTripId||null));
  if(!notes.length){ canvas.style.minHeight = ''; return; }
  const maxBottom = Math.max(...notes.map(n=>(n.y||20)+(n.h||160)+40));
  canvas.style.minHeight = Math.max(400, maxBottom) + 'px';
}

function _buildNoteEl(n){
  const el = document.createElement('div');
  el.className = 'note-card';
  el.id = 'note-' + n.id;
  el.style.cssText = `left:${n.x||20}px;top:${n.y||20}px;width:${n.w||240}px;height:${n.h||160}px;background:${n.bg||'#fff9c4'};`;

  // drag handle
  const handle = document.createElement('div');
  handle.className = 'note-handle';
  const grip = document.createElement('span');
  grip.className = 'note-handle-grip';
  grip.textContent = '· · ·';
  const delBtn = document.createElement('button');
  delBtn.className = 'note-del';
  delBtn.textContent = '✕';
  delBtn.title = 'Löschen';
  delBtn.onmousedown = e=>e.stopPropagation();
  delBtn.onclick = e=>{ e.stopPropagation(); deleteNote(n.id); };
  handle.appendChild(grip);
  handle.appendChild(delBtn);
  _makeDraggable(handle, el, n);

  // format bar
  const fmtBar = document.createElement('div');
  fmtBar.className = 'note-fmtbar';
  fmtBar.innerHTML = `
    <button title="Fett" onmousedown="event.preventDefault();document.execCommand('bold')"><b>B</b></button>
    <button title="Kursiv" onmousedown="event.preventDefault();document.execCommand('italic')"><i>I</i></button>
    <button title="Unterstrichen" onmousedown="event.preventDefault();document.execCommand('underline')"><u>U</u></button>
    <span class="fmt-sep"></span>
    <select title="Schriftgröße" onchange="_notesFontSize(this.value);this.value=''">
      <option value="">Ag</option>
      <option value="12px">12</option>
      <option value="14px">14</option>
      <option value="16px">16</option>
      <option value="18px">18</option>
      <option value="22px">22</option>
    </select>
    <span class="fmt-sep"></span>
    <input type="color" title="Textfarbe" value="#000000" onchange="document.execCommand('foreColor',false,this.value)">
    <input type="color" title="Notizfarbe" value="${n.bg||'#fff9c4'}" onchange="_notesBg('${n.id}',this.value)">
  `;

  // body
  const body = document.createElement('div');
  body.className = 'note-body';
  body.contentEditable = 'true';
  body.setAttribute('data-ph', 'Schreib etwas…');
  body.innerHTML = n.content || '';
  body.addEventListener('input', _debounce(()=>{ n.content = body.innerHTML; save(); }, 600));

  // resize
  const resizer = document.createElement('div');
  resizer.className = 'note-resize';
  resizer.innerHTML = '&#9698;';
  _makeResizable(resizer, el, n);

  el.appendChild(handle);
  el.appendChild(fmtBar);
  el.appendChild(body);
  el.appendChild(resizer);
  return el;
}

function _noteDarken(hex){
  // darken a hex color slightly for the handle
  try{
    const r=parseInt(hex.slice(1,3),16),g=parseInt(hex.slice(3,5),16),b=parseInt(hex.slice(5,7),16);
    return `rgb(${Math.max(0,r-30)},${Math.max(0,g-30)},${Math.max(0,b-30)})`;
  }catch(e){return '#e0dcc8';}
}

function _notesFontSize(sz){
  if(!sz) return;
  const sel = window.getSelection();
  if(!sel || sel.rangeCount===0) return;
  document.execCommand('fontSize', false, '7');
  document.querySelectorAll('[size="7"]').forEach(el=>{el.removeAttribute('size');el.style.fontSize=sz;});
}

function _notesBg(id, color){
  const note = (S.notes||[]).find(n=>n.id===id);
  if(!note) return;
  note.bg = color;
  const el = document.getElementById('note-'+id);
  if(el){
    el.style.background = color;
    const handle = el.querySelector('.note-handle');
    if(handle) handle.style.background = _noteDarken(color);
  }
  save();
}

function _makeDraggable(handle, el, note){
  function startDrag(cx, cy){
    const canvas = document.getElementById('notes-canvas');
    const rect = canvas.getBoundingClientRect();
    // Offset from where user grabbed within the note
    const grabX = cx - rect.left - (note.x||0);
    const grabY = cy - rect.top  - (note.y||0);
    el.classList.add('dragging');
    el.style.zIndex = 99;

    function onMove(e){
      const mx = e.touches?e.touches[0].clientX:e.clientX;
      const my = e.touches?e.touches[0].clientY:e.clientY;
      const cr = canvas.getBoundingClientRect();
      note.x = Math.max(0, mx - cr.left - grabX);
      note.y = Math.max(0, my - cr.top  - grabY);
      el.style.left = note.x+'px';
      el.style.top  = note.y+'px';
    }
    function onUp(){
      el.classList.remove('dragging');
      el.style.zIndex = '';
      document.removeEventListener('mousemove', onMove);
      document.removeEventListener('mouseup', onUp);
      document.removeEventListener('touchmove', onMove);
      document.removeEventListener('touchend', onUp);
      _notesResizeCanvas();
      save();
    }
    document.addEventListener('mousemove', onMove);
    document.addEventListener('mouseup', onUp);
    document.addEventListener('touchmove', onMove, {passive:false});
    document.addEventListener('touchend', onUp);
  }
  handle.addEventListener('mousedown', e=>{ if(e.button!==0)return; e.preventDefault(); startDrag(e.clientX,e.clientY); });
  handle.addEventListener('touchstart', e=>{ e.preventDefault(); startDrag(e.touches[0].clientX,e.touches[0].clientY); }, {passive:false});
}

function _makeResizable(resizer, el, note){
  function startResize(cx, cy){
    const startW = note.w||240, startH = note.h||160;
    const startX = cx, startY = cy;
    function onMove(e){
      const cx2 = e.touches?e.touches[0].clientX:e.clientX;
      const cy2 = e.touches?e.touches[0].clientY:e.clientY;
      note.w = Math.max(180, startW + cx2 - startX);
      note.h = Math.max(100, startH + cy2 - startY);
      el.style.width  = note.w+'px';
      el.style.height = note.h+'px';
    }
    function onUp(){
      document.removeEventListener('mousemove', onMove);
      document.removeEventListener('mouseup', onUp);
      document.removeEventListener('touchmove', onMove);
      document.removeEventListener('touchend', onUp);
      _notesResizeCanvas();
      save();
    }
    document.addEventListener('mousemove', onMove);
    document.addEventListener('mouseup', onUp);
    document.addEventListener('touchmove', onMove, {passive:false});
    document.addEventListener('touchend', onUp);
  }
  resizer.addEventListener('mousedown', e=>{ e.stopPropagation(); e.preventDefault(); startResize(e.clientX,e.clientY); });
  resizer.addEventListener('touchstart', e=>{ e.stopPropagation(); e.preventDefault(); startResize(e.touches[0].clientX,e.touches[0].clientY); }, {passive:false});
}

function addNote(bg){
  if(!Array.isArray(S.notes)) S.notes=[];
  const canvas = document.getElementById('notes-canvas');
  // Offset new notes slightly so they don't stack perfectly
  const offset = (S.notes.filter(n=>n.tripId===(_notesTripId||null)).length % 6) * 24;
  const note = {
    id: 'n_'+Date.now(),
    tripId: _notesTripId||null,
    x: 20 + offset, y: 20 + offset,
    w: 240, h: 160,
    bg: bg||'#fff9c4',
    content: ''
  };
  S.notes.push(note);
  save();
  const el = _buildNoteEl(note);
  canvas.appendChild(el);
  // focus body
  setTimeout(()=>el.querySelector('.note-body')?.focus(), 50);
  document.getElementById('notes-empty').style.display = 'none';
  _notesResizeCanvas();
}

function deleteNote(id){
  S.notes = (S.notes||[]).filter(n=>n.id!==id);
  save();
  const el = document.getElementById('note-'+id);
  if(el) el.remove();
  const remaining = (S.notes||[]).filter(n=>n.tripId===(_notesTripId||null));
  if(!remaining.length){
    const empty = document.getElementById('notes-empty');
    if(empty) empty.style.display = '';
  }
  _notesResizeCanvas();
}

function _debounce(fn, ms){
  let t; return (...args)=>{ clearTimeout(t); t=setTimeout(()=>fn(...args),ms); };
}

// ── INSTAGRAM IMPORT ──────────────────────────────────────────────────────────
async function importInstagram(){
  const url=document.getElementById('bl-insta-url').value.trim();
  if(!url){return;}
  const btn=document.getElementById('bl-insta-btn');
  const status=document.getElementById('bl-insta-status');
  btn.textContent='⏳';btn.disabled=true;
  status.textContent='Lade Metadaten…';status.style.color='var(--text-muted)';

  try{
    // Try oEmbed endpoint — works for public posts without token
    const oembedUrl=`https://api.instagram.com/oembed/?url=${encodeURIComponent(url)}&maxwidth=400`;
    const res=await fetch(oembedUrl);
    if(!res.ok) throw new Error('oEmbed nicht verfügbar');
    const data=await res.json();

    // Fill form fields
    const title=data.title||'';
    const author=data.author_name||'';
    // Try to extract location from title/caption
    document.getElementById('bl-dest').value=title.slice(0,60);
    document.getElementById('bl-notes').value=`${title}\n\n📸 ${author} auf Instagram\n🔗 ${url}`.trim();

    // Extract hashtags as tags
    const tags=(title.match(/#[\w\u00C0-\u024F]+/g)||[]).map(t=>t.slice(1)).slice(0,6);
    document.getElementById('bl-tags').value=tags.join(', ');

    // Show thumbnail if available
    if(data.thumbnail_url){
      document.getElementById('bl-insta-img').src=data.thumbnail_url;
      document.getElementById('bl-insta-preview').style.display='block';
    }

    status.textContent='✅ Importiert! Felder prüfen und anpassen.';
    status.style.color='var(--accent)';

  }catch(e){
    // Fallback: just pre-fill the URL as note
    document.getElementById('bl-notes').value=`📸 Instagram: ${url}`;
    status.textContent='⚠️ Metadaten nicht ladbar (Instagram blockiert). URL wurde als Notiz gespeichert.';
    status.style.color='var(--accent2)';
  }finally{
    btn.textContent='📥 Laden';btn.disabled=false;
  }
}


// ── COUNTRIES & BACKLOG ───────────────────────────────────────────────────────
let activeCountryId=null;
let _coPhoto=null;

function saveCountry(){
  const name=document.getElementById('co-name').value.trim();if(!name)return;
  const flag=document.getElementById('co-flag').value.trim();
  S.countries.push({id:uid(),name,flag,photo:_coPhoto||null});
  _coPhoto=null;
  save();closeModal('modal-country');
  ['co-name','co-flag'].forEach(id=>document.getElementById(id).value='');
  document.getElementById('co-photo-preview').style.display='none';
  renderBacklog();renderSidebar();
}
function delCountry(id){
  if(!confirm('Land und alle Ideen darin löschen?'))return;
  S.countries=S.countries.filter(c=>c.id!==id);
  S.backlog=S.backlog.filter(b=>b.countryId!==id);
  save();renderBacklog();renderSidebar();
}
function openCountry(id){
  activeCountryId=id;
  showTab('backlog');
}
function showBacklogOverview(){
  activeCountryId=null;
  renderBacklog();
  renderSidebar();
}

function fillCountrySelect(){
  const sel=document.getElementById('bl-country');
  sel.innerHTML='<option value="">— kein Land —</option>'+
    S.countries.map(c=>`<option value="${c.id}">${c.flag||'🌍'} ${c.name}</option>`).join('');
  if(activeCountryId) sel.value=activeCountryId;
}

function saveBacklog(){
  const dest=document.getElementById('bl-dest').value.trim();if(!dest)return;
  const tags=document.getElementById('bl-tags').value.split(',').map(t=>t.trim()).filter(Boolean);
  const countryId=document.getElementById('bl-country').value||null;
  S.backlog.push({id:uid(),dest,countryId,priority:document.getElementById('bl-prio').value,budget:parseFloat(document.getElementById('bl-budget').value)||0,notes:document.getElementById('bl-notes').value.trim(),tags});
  save();closeModal('modal-backlog');renderBacklog();renderSidebar();
  ['bl-dest','bl-notes','bl-tags','bl-budget','bl-insta-url'].forEach(id=>document.getElementById(id).value='');
  document.getElementById('bl-insta-preview').style.display='none';
  document.getElementById('bl-insta-status').textContent='';
}
function delBacklog(id){S.backlog=S.backlog.filter(b=>b.id!==id);save();renderBacklog();renderSidebar();}
function promoteBacklog(id){
  const b=S.backlog.find(x=>x.id===id);if(!b)return;
  S.trips.push({id:uid(),name:b.dest,destination:b.dest,status:'planned',budget:b.budget,persons:1,start:'',end:''});
  S.backlog=S.backlog.filter(x=>x.id!==id);save();renderBacklog();renderSidebar();
  alert('Zur Reiseliste hinzugefügt!');
}

function renderBacklog(){
  // Country overview
  const countriesView=document.getElementById('backlog-countries-view');
  const detailView=document.getElementById('backlog-country-detail');

  if(!activeCountryId){
    countriesView.style.display='block';
    detailView.style.display='none';
    renderCountryGrid();
    return;
  }
  // Country detail
  countriesView.style.display='none';
  detailView.style.display='block';
  const co=S.countries.find(c=>c.id===activeCountryId);
  document.getElementById('country-detail-title').textContent=`${co?.flag||'🌍'} ${co?.name||''}`;
  const ideas=S.backlog.filter(b=>b.countryId===activeCountryId);
  const g=document.getElementById('backlog-grid');
  if(!ideas.length){g.innerHTML=emptyState('💭','Noch keine Ideen','Füge Ideen für dieses Land hinzu.');return;}
  const ord={high:0,medium:1,low:2};
  g.innerHTML=[...ideas].sort((a,b)=>ord[a.priority]-ord[b.priority]).map(b=>`<div class="bl-card">
    <div class="flex items-center justify-between gap-2" style="margin-bottom:5px">
      <div class="bl-title">📍 ${b.dest}</div>
      <span class="badge ${prioC[b.priority]}">${prioL[b.priority]}</span>
    </div>
    ${b.notes?`<div class="bl-desc">${b.notes}</div>`:''}
    ${b.budget?`<div class="text-sm text-muted" style="margin-bottom:8px">💶 ~${fc(b.budget)}</div>`:''}
    ${b.tags.length?`<div class="bl-tags">${b.tags.map(tg=>`<span class="badge badge-gray">${tg}</span>`).join('')}</div>`:''}
    <div class="flex gap-2" style="margin-top:10px">
      <button class="btn btn-primary btn-sm" onclick="promoteBacklog('${b.id}')">✈️ Als Reise planen</button>
      <button class="btn btn-danger btn-sm" onclick="delBacklog('${b.id}')">🗑️</button>
    </div>
  </div>`).join('');
  renderSidebar();
}

function renderCountryGrid(){
  const g=document.getElementById('country-grid');
  if(!S.countries.length){
    g.innerHTML=emptyState('🌍','Noch keine Länder','Füge Länder hinzu und sammle Reiseideen.');
    return;
  }
  g.innerHTML=S.countries.map(co=>{
    const count=S.backlog.filter(b=>b.countryId===co.id).length;
    return `<div class="country-tile" onclick="openCountry('${co.id}')">
      ${co.photo?`<img class="country-tile-img" src="${co.photo.url}" alt="${co.name}" loading="lazy">`:`<div class="country-tile-img-ph">${co.flag||'🌍'}</div>`}
      <div class="country-tile-body">
        <div class="country-tile-name">${co.flag||''} ${co.name}</div>
        <div class="country-tile-count">${count} Idee${count!==1?'n':''}</div>
      </div>
    </div>`;
  }).join('');
}

// ── BOOKING PARSER ────────────────────────────────────────────────────────────
let _pdfBase64=null;

function switchImportTab(tab){
  const isPdf=tab==='pdf';
  document.getElementById('itab-pdf-body').style.display=isPdf?'block':'none';
  document.getElementById('itab-email-body').style.display=isPdf?'none':'block';
  document.getElementById('itab-pdf').style.background=isPdf?'var(--accent2)':'var(--surface2)';
  document.getElementById('itab-pdf').style.color=isPdf?'white':'var(--text-muted)';
  document.getElementById('itab-email').style.background=isPdf?'var(--surface2)':'var(--accent2)';
  document.getElementById('itab-email').style.color=isPdf?'var(--text-muted)':'white';
}

function handlePdfUpload(input){
  const file=input.files[0];if(!file)return;
  const nameEl=document.getElementById('pdf-file-name');
  const parseBtn=document.getElementById('a-pdf-parse-btn');
  const dbgBtn=document.getElementById('a-pdf-debug-btn');
  nameEl.textContent='📄 '+file.name;nameEl.style.display='block';
  parseBtn.style.display='inline-flex';
  if(dbgBtn)dbgBtn.style.display='inline-flex';
  const reader=new FileReader();
  reader.onload=e=>{_pdfBase64=e.target.result.split(',')[1];};
  reader.readAsDataURL(file);
  // drag highlight reset
  document.getElementById('pdf-drop-zone').style.borderColor='#e8c99a';
  document.getElementById('pdf-drop-zone').style.background='white';
}

// drag & drop support
document.addEventListener('DOMContentLoaded',()=>{
  const dz=document.getElementById('pdf-drop-zone');
  if(!dz)return;
  dz.addEventListener('dragover',e=>{e.preventDefault();dz.style.borderColor='var(--accent2)';dz.style.background='var(--accent2-light)';});
  dz.addEventListener('dragleave',()=>{dz.style.borderColor='#e8c99a';dz.style.background='white';});
  dz.addEventListener('drop',e=>{
    e.preventDefault();dz.style.borderColor='#e8c99a';dz.style.background='white';
    const file=e.dataTransfer.files[0];
    if(file&&file.type==='application/pdf'){
      document.getElementById('a-pdf-input').files; // can't set, but we read directly
      const nameEl=document.getElementById('pdf-file-name');
      nameEl.textContent='📄 '+file.name;nameEl.style.display='block';
      document.getElementById('a-pdf-parse-btn').style.display='inline-flex';
      const db=document.getElementById('a-pdf-debug-btn');if(db)db.style.display='inline-flex';
      const reader=new FileReader();
      reader.onload=ev=>{_pdfBase64=ev.target.result.split(',')[1];};
      reader.readAsDataURL(file);
    }
  });
});

// ── LOCAL OCR / PARSE HELPERS ─────────────────────────────────────────────────
async function ocrImageText(base64, onProgress){
  const url=base64.startsWith('data:')?base64:`data:image/jpeg;base64,${base64}`;
  const worker=await Tesseract.createWorker('eng+deu',1,{logger:m=>{
    if(m.status==='recognizing text'&&onProgress)onProgress(Math.round(m.progress*100));
  }});
  const{data:{text}}=await worker.recognize(url);
  await worker.terminate();
  return text;
}

async function extractPdfText(base64){
  pdfjsLib.GlobalWorkerOptions.workerSrc='https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.worker.min.js';
  const bin=atob(base64);const arr=new Uint8Array(bin.length);
  for(let i=0;i<bin.length;i++)arr[i]=bin.charCodeAt(i);
  const pdf=await pdfjsLib.getDocument({data:arr}).promise;
  let text='';
  for(let i=1;i<=pdf.numPages;i++){
    const page=await pdf.getPage(i);
    const c=await page.getTextContent();
    // Reconstruct lines by grouping items with similar y-position
    const items=c.items.filter(x=>x.str&&x.str.trim());
    const lines=[];
    for(const item of items){
      const y=Math.round(item.transform[5]);
      let line=lines.find(l=>Math.abs(l.y-y)<4);
      if(!line){line={y,parts:[]};lines.push(line);}
      line.parts.push({x:item.transform[4],str:item.str});
    }
    lines.sort((a,b)=>b.y-a.y);
    for(const line of lines){
      line.parts.sort((a,b)=>a.x-b.x);
      text+=line.parts.map(p=>p.str).join(' ').trim()+'\n';
    }
    text+='\n';
  }
  return text;
}

function _flexDate(d,m,y){
  const MO={jan:1,january:1,januar:1,janeiro:1,feb:2,february:2,februar:2,fevereiro:2,mär:3,mar:3,march:3,märz:3,março:3,apr:4,april:4,abril:4,mai:5,may:5,maio:5,jun:6,june:6,juni:6,junho:6,jul:7,july:7,juli:7,julho:7,aug:8,august:8,agosto:8,sep:9,september:9,setembro:9,okt:10,oct:10,october:10,oktober:10,outubro:10,nov:11,november:11,novembro:11,dez:12,dec:12,december:12,dezember:12,dezembro:12};
  let dd=parseInt(d),mm=parseInt(m),yy=parseInt(y||new Date().getFullYear());
  if(isNaN(mm)){const k=String(m).toLowerCase().trim();mm=MO[k]||MO[k.slice(0,3)]||1;}
  if(dd>1000){[dd,yy]=[yy,dd];}
  if(isNaN(dd)||isNaN(mm)||isNaN(yy))return null;
  if(yy<100)yy+=2000;
  return`${yy}-${String(mm).padStart(2,'0')}-${String(dd).padStart(2,'0')}`;
}

function parseBookingText(text){
  const r={name:null,location:null,type:'hotel',checkin:null,checkout:null,price:null,currency:'EUR',confirmation:null,status:'booked'};
  const t=text.replace(/\r\n/g,'\n');
  const lines=t.split('\n').map(l=>l.trim()).filter(l=>l.length>0);

  // confirmation — require at least 6 chars AND contain digits (avoid matching plain words)
  // confirmation — same line OR next line after keyword
  const confKw='buchungs(?:nummer|-?nr)?|bestätigungs(?:nummer|-?nr)?|confirmation\\s*(?:number|no\\.?|nr\\.?)|reservations?(?:nummer)?|booking\\s*(?:number|no\\.?|id)|pin(?!\\s*code)';
  // booking ref: allow digits, dots, dashes, slashes (e.g. "5443.506.171", "ABC-12345")
  const confRefPat='([A-Z0-9][A-Z0-9.\\-/]{3,28})';
  const confSame=t.match(new RegExp(`(?:${confKw})[:\\s#]*${confRefPat}`,'i'));
  if(confSame){const v=confSame[1].replace(/[.\-/]+$/,'').trim();if(/\d/.test(v)&&!/^(NUMMER|NUMBER|NR|ID)$/i.test(v))r.confirmation=v;}
  if(!r.confirmation){
    for(let i=0;i<lines.length-1;i++){
      if(new RegExp(`^(${confKw})\\s*:?\\s*$`,'i').test(lines[i])||new RegExp(`(?:${confKw})\\s*:\\s*$`,'i').test(lines[i])){
        const nl=lines[i+1];
        if(/\d/.test(nl)&&nl.length<=30&&!/^(NUMMER|NUMBER)$/i.test(nl)){r.confirmation=nl.trim();break;}
      }
    }
  }
  // fallback: dotted numeric ref like "5443.506.171"
  if(!r.confirmation){const nb=t.match(/\b(\d{3,6}[.\-]\d{3,6}[.\-]\d{3,6})\b/);if(nb)r.confirmation=nb[1];}
  // fallback: bare long numeric ref (8-15 digits)
  if(!r.confirmation){const nb=t.match(/\b(\d{8,15})\b/);if(nb)r.confirmation=nb[1];}

  // dates — checks same line, next 1-3 lines after keyword, and proximity in raw text
  function findDate(keywords){
    const kw=keywords.join('|');
    // same line
    const m=t.match(new RegExp(`(?:${kw})[:\\s]*(?:[A-Za-z]+\\.?,?\\s*)?(\\d{1,2})[.\\/-](\\d{1,2})[.\\/-](\\d{4})`,'i'))
      ||t.match(new RegExp(`(?:${kw})[:\\s]*(\\d{4})-(\\d{2})-(\\d{2})`,'i'))
      ||t.match(new RegExp(`(?:${kw})[:\\s]*(?:[A-Za-z]+\\.?,?\\s*)?(\\d{1,2})\\.?\\s+([A-Za-zäöüÄÖÜ]+)\\.?\\s+(\\d{4})`,'i'));
    if(m)return m;
    // next 1-3 lines after keyword line (handles table layouts)
    for(let i=0;i<lines.length-1;i++){
      if(new RegExp(`^(${kw})\\s*:?\\s*$`,'i').test(lines[i])){
        for(let j=i+1;j<=Math.min(i+3,lines.length-1);j++){
          const nl=lines[j];
          const nm=nl.match(/^(?:[A-Za-z]+\.,?\s*)?(\d{1,2})[.\/-](\d{1,2})[.\/-](\d{4})/)
            ||nl.match(/^(\d{4})-(\d{2})-(\d{2})/)
            ||nl.match(/^(?:[A-Za-z]+\.,?\s*)?(\d{1,2})\s+([A-Za-zäöüÄÖÜ]+)\.?\s+(\d{4})/)
            ||nl.match(/(\d{1,2})[.\/-](\d{1,2})[.\/-](\d{4})/)
            ||nl.match(/(\d{4})-(\d{2})-(\d{2})/);
          if(nm)return nm;
        }
      }
    }
    // keyword anywhere in line followed within 50 chars by a date (tight window to avoid cross-matches)
    const proxM=t.match(new RegExp(`(?:${kw})[^\\n]{0,50}?(\\d{1,2})[.\\/-](\\d{1,2})[.\\/-](\\d{4})`,'i'))
      ||t.match(new RegExp(`(?:${kw})[^\\n]{0,50}?(\\d{4})-(\\d{2})-(\\d{2})`,'i'));
    if(proxM)return proxM;
    return null;
  }
  // === Booking.com card layout ===
  const allMonths='januar|january|janeiro|februar|february|fevereiro|märz|march|março|april|abril|mai|may|maio|juni|june|junho|juli|july|julho|august|agosto|september|setembro|oktober|october|outubro|november|novembro|dezember|december|dezembro|jan|feb|mär|mar|apr|jun|jul|aug|sep|okt|oct|nov|dez|dec';
  const monthRx=new RegExp(`^(${allMonths})$`,'i');
  const yr20=(t.match(/\b(20\d\d)\b/)||[])[1]||String(new Date().getFullYear());

  // Case A: "ANREISE ABREISE" on same line → "12 15 ..." → (other lines) → "MAI MAI"
  const combIdx=lines.findIndex(l=>/anreise/i.test(l)&&/abreise/i.test(l));
  if(combIdx>=0){
    for(let j=combIdx+1;j<=Math.min(combIdx+10,lines.length-1);j++){
      const nm=lines[j].match(/^(\d{1,2})\s+(\d{1,2})/);  // "12 15 ..." → first two numbers
      if(nm){
        for(let k=j+1;k<=Math.min(j+6,lines.length-1);k++){
          const mm=lines[k].match(new RegExp(`(${allMonths})\\s+(${allMonths})`,'i'));
          if(mm){
            if(!r.checkin)r.checkin=_flexDate(nm[1],mm[1],yr20);
            if(!r.checkout)r.checkout=_flexDate(nm[2],mm[2],yr20);
            break;
          }
        }
        break;
      }
    }
  }

  // Case B: separate lines "ANREISE\n12\nMAI" and "ABREISE\n15\nMAI"
  if(!r.checkin||!r.checkout){
    for(let i=0;i<lines.length-2;i++){
      const li=lines[i].toLowerCase().trim();
      const isCI=/^(anreise|check.?in|arrival)$/.test(li)||(/anreise|check.?in|arrival/.test(li)&&li.length<20);
      const isCO=/^(abreise|check.?out|departure)$/.test(li)||(/abreise|check.?out|departure/.test(li)&&li.length<20);
      if(!isCI&&!isCO)continue;
      for(let j=i+1;j<=Math.min(i+5,lines.length-2);j++){
        const dL=lines[j].trim(),mL=(lines[j+1]||'').trim();
        if(/^\d{1,2}$/.test(dL)&&monthRx.test(mL)){
          const iso=_flexDate(dL,mL,yr20);
          if(iso){if(isCI&&!r.checkin)r.checkin=iso;if(isCO&&!r.checkout)r.checkout=iso;}
          break;
        }
      }
    }
  }

  // Case C: classic inline format "Check-in: 12.05.2026"
  const ci=(!r.checkin)?findDate(['check[- ]?in','arrival','anreise']):null;
  if(ci)r.checkin=_flexDate(ci[1],ci[2],ci[3]);
  const co=(!r.checkout)?findDate(['check[- ]?out','departure','abreise']):null;
  if(co)r.checkout=_flexDate(co[1],co[2],co[3]);

  // price — prefer Gesamtbetrag; also handle "353,04 EUR" format
  const totalKw=`gesamtbetrag|gesamtpreis|total(?:\\s+(?:amount|price|betrag))?|sie\\s+bezahlen|zu\\s+zahlen|amount\\s+due|endbetrag`;
  const prTotal=t.match(new RegExp(`(?:${totalKw})[:\\s]*(?:EUR|USD|GBP|CHF|€)?\\s*([\\d]+[.,][\\d]{2})`,'i'))
    ||t.match(new RegExp(`([\\d]+[.,][\\d]{2})\\s*(?:EUR|USD|GBP|CHF|€)(?=.*(?:${totalKw}))`,'i'));
  if(prTotal){
    r.price=parseFloat(prTotal[1].replace(/\./g,'').replace(',','.'));
  } else {
    // collect all amounts (both "EUR 123,45" and "123,45 EUR"), take largest
    const allAmounts=[];
    for(const m of t.matchAll(/(?:EUR|USD|GBP|CHF|€)\s*([\d]+[.,][\d]{2})|(\d+[.,]\d{2})\s*(?:EUR|USD|GBP|CHF|€)/gi)){
      const v=parseFloat((m[1]||m[2]).replace(/\./g,'').replace(',','.'));
      if(!isNaN(v))allAmounts.push(v);
    }
    if(allAmounts.length)r.price=Math.max(...allAmounts);
  }
  const cu=t.match(/\b(EUR|USD|GBP|CHF)\b/);
  if(cu)r.currency=cu[1];

  // type
  if(/airbnb|apartment|ferienwohnung/i.test(t))r.type='airbnb';
  else if(/hostel/i.test(t))r.type='hostel';
  else if(/camping/i.test(t))r.type='camping';

  // hotel name — skip greetings, metadata, date-like lines, month/weekday-only lines
  const skipPat=/^(adresse|address|check|anreise|abreise|datum|date|preis|price|total|gesamt|buchung|booking|reserv|bestät|aufenth|nächte|night|zimmer|room|phone|tel|fax|email|http|www|©|pin|wifi|wlan|password|passwort|code|key|schlüssel|vielen dank|danke|dear|sehr geehrt|hallo|hi |ihre buchung|your booking|herzlichen|willkommen|\d{3,})/i;
  const monthOnlyRx=new RegExp(`^(${allMonths})(\\s+(${allMonths}))*$`,'i');
  const weekdayOnlyRx=/^(montag|dienstag|mittwoch|donnerstag|freitag|samstag|sonntag|monday|tuesday|wednesday|thursday|friday|saturday|sunday)(\s+\S+)*$/i;
  const nameLine=lines.find(l=>
    !skipPat.test(l)&&
    !/^\d/.test(l)&&
    l.length>=4&&l.length<=80&&
    !/^[^a-zA-ZäöüÄÖÜ]+$/.test(l)&&
    !/pin.?code|access.?code|wi.?fi|\d{1,2}\.\s*[A-Za-z]/i.test(l)&&
    !monthOnlyRx.test(l)&&
    !weekdayOnlyRx.test(l)
  );
  r.name=nameLine||null;

  // location — robust extraction, never return weekdays or street names
  const WEEKDAYS=/^(montag|dienstag|mittwoch|donnerstag|freitag|samstag|sonntag|monday|tuesday|wednesday|thursday|friday|saturday|sunday|mo\.|di\.|mi\.|do\.|fr\.|sa\.|so\.)/i;
  const streetPat=/^(rua |avenida |av\.|estrada |travessa |largo |praça |street |str\.|strasse |straße |gasse |weg |allee |boulevard |blvd\.|via |corso |calle |carrer |rue |chemin |km\s*\d|n°|nr\.?\s*\d)/i;
  function badLoc(s){
    if(!s)return true;
    const v=s.trim();
    if(WEEKDAYS.test(v))return true;
    if(streetPat.test(v))return true;
    if(/^\d/.test(v))return true;
    if(v.length>40)return true; // sentences not city names
    if(/\s{2,}/.test(v))return true; // multiple spaces = sentence fragment
    if(/\b(sie|ihr|eine|einen|werden|erhalten|bitte|können|haben|dass|durch|mehr|alle|beim)\b/i.test(v))return true; // German sentence words
    return false;
  }
  // 1. booking.com greeting "Buchung in CITY ist bestätigt"
  const inCity=t.match(/(?:buchung in|booking in|located in)\s+([A-ZÀ-Ža-zÀ-ž][^\n,!.]{2,30})(?:\s+ist\b|\s+is\b|\s+confirmed|!)/i);
  if(inCity&&!badLoc(inCity[1]))r.location=inCity[1].trim();
  // 2. postal code immediately followed by city on SAME LINE only (no newline crossing)
  if(!r.location){
    const plzSameLine=t.match(/\b(\d{3,5}(?:-\d{3,4})?)[ \t,]+([A-ZÀ-Ža-zÀ-ž][a-zÀ-ž][^\n,]{1,28})/);
    if(plzSameLine&&!badLoc(plzSameLine[2]))r.location=plzSameLine[2].trim();
  }
  // 3. postal code then city on NEXT LINE (one newline only)
  if(!r.location){
    const plzNextLine=t.match(/\b\d{3,5}(?:-\d{3,4})?\s*\n[ \t]*([A-ZÀ-Ža-zÀ-ž][a-zÀ-ž][^\n,]{1,28})/);
    if(plzNextLine&&!badLoc(plzNextLine[1]))r.location=plzNextLine[1].trim();
  }
  // 4. explicit keyword on same line
  if(!r.location){
    const cityKw=t.match(/(?:\bort\b|city|stadt|municipality|município)[:\s]+([A-ZÀ-Ža-zÀ-ž][^\n,]{2,40})/i);
    if(cityKw&&!badLoc(cityKw[1]))r.location=cityKw[1].trim();
  }
  // 5. address keyword → split by comma, take non-street non-number part
  if(!r.location){
    const addrM=t.match(/(?:adresse|address|property\s*address)[:\s]*([^\n]{5,120})/i);
    if(addrM){
      const parts=addrM[1].split(',').map(s=>s.trim()).filter(s=>s.length>2);
      const city=parts.find(p=>!badLoc(p));
      if(city)r.location=city;
    }
  }
  // 6. standalone "City, Country" line
  if(!r.location){
    for(const l of lines){
      const cm=l.match(/^([A-ZÀ-Ža-zÀ-ž][a-zÀ-žA-ZÀ-Ž\s-]{1,25}),\s*([A-ZÀ-Ža-zÀ-ž][a-zÀ-ž][a-zÀ-žA-ZÀ-Ž\s]{2,20})$/);
      if(cm&&!badLoc(cm[1])&&!badLoc(cm[2])&&l.length<=50){r.location=l.trim();break;}
    }
  }
  return r;
}

function parseRouteStopsFromText(text){
  const seen=new Set();
  return text.split('\n')
    .map(l=>l.trim())
    .map(l=>l.replace(/^[O0]\s*[|Il1]\s*/,'').trim())  // strip OCR artifacts from map waypoint icons
    .map(l=>l.replace(/^[•\-\d.;:]+\s*/,'').trim())
    .filter(l=>l.length>=4&&l.length<=80)
    .filter(l=>/[a-zA-ZäöüÄÖÜàáâèéêìíòóùúñ]{3,}/.test(l))
    .filter(l=>!/^(options|route|send|link|add|directions|via|google maps|distance|duration|traffic|min$|km$)/i.test(l))
    .filter(l=>!/^\d+[\.,]?\d*\s*(km|mi|m|min|h)$/i.test(l))
    .filter(l=>{if(seen.has(l.toLowerCase()))return false;seen.add(l.toLowerCase());return true;})
    .slice(0,15)
    .map(raw=>{
      // extract "City, Country" pattern
      const m=raw.match(/^(.+?),\s*([A-ZÀ-Ža-zÀ-ž][a-zÀ-ž]{2,}(?:\s[A-ZÀ-Ža-zÀ-ž][a-zÀ-ž]*)?)$/);
      if(m)return{name:m[1].trim(),city:m[1].trim(),country:m[2].trim(),selected:true};
      return{name:raw,city:'',country:'',selected:true};
    });
}

function parseDayPlanFromText(text){
  const lines=text.split('\n').map(l=>l.trim()).filter(Boolean);
  const days=[];let cur=null;
  for(const line of lines){
    const dm=line.match(/^(?:day|tag|dag)\s*(\d+)/i)||line.match(/^(\d+)\.\s*(?:day|tag)/i);
    if(dm){
      if(cur)days.push(cur);
      const di=parseInt(dm[1])||days.length+1;
      cur={day:di,date:null,notes:'',selected:true};
      const dr=line.match(/(\d{1,2})[.\/-](\d{1,2})[.\/-]?(\d{2,4})?/);
      if(dr)cur.date=_flexDate(dr[1],dr[2],dr[3]);
    }else if(cur&&line.length>3){
      cur.notes+=(cur.notes?' · ':'')+line;
    }else if(!cur&&line.length>5){
      cur={day:days.length+1,date:null,notes:line,selected:true};
    }
  }
  if(cur)days.push(cur);
  if(!days.length&&text.trim().length>10)days.push({day:1,date:null,notes:text.trim().slice(0,300),selected:true});
  return days;
}

async function debugPdf(){
  if(!_pdfBase64){alert('Bitte zuerst eine PDF-Datei auswählen.');return;}
  const out=document.getElementById('a-pdf-debug-out');
  const status=document.getElementById('a-pdf-status');
  status.textContent='Lese Text…';
  try{
    const text=await extractPdfText(_pdfBase64);
    out.textContent=text;
    out.style.display='block';
    status.textContent='';
  }catch(e){status.textContent='❌ '+e.message;}
}
async function parsePdf(){
  if(!_pdfBase64){alert('Bitte zuerst eine PDF-Datei auswählen.');return;}
  const btn=document.getElementById('a-pdf-parse-btn');
  const status=document.getElementById('a-pdf-status');
  btn.textContent='⏳ Lese PDF…';btn.disabled=true;status.textContent='Text wird extrahiert…';
  try{
    const text=await extractPdfText(_pdfBase64);
    try{
      const contentBlocks=[{type:'text',text:'Booking confirmation PDF:\n\n'+text}];
      await callBookingParser(contentBlocks,status,btn,'🤖 PDF auslesen');
    }catch(netErr){
      const parsed=parseBookingText(text);
      fillAccomForm(parsed);
      status.textContent='✅ Ausgelesen (lokal)';status.style.color='var(--accent)';
      btn.textContent='🤖 PDF auslesen';btn.disabled=false;
    }
  }catch(e){
    status.textContent='❌ '+e.message;status.style.color='var(--danger)';
    btn.textContent='🤖 PDF auslesen';btn.disabled=false;
  }
}

async function parseBookingEmail(){
  const text=document.getElementById('a-email-text').value.trim();
  if(!text){alert('Bitte erst den E-Mail-Text einfügen.');return;}
  const btn=document.getElementById('a-parse-btn');
  const status=document.getElementById('a-parse-status');
  btn.textContent='⏳ Lese E-Mail…';btn.disabled=true;status.textContent='';
  try{
    const contentBlocks=[{type:'text',text:'Booking confirmation email:\n\n'+text}];
    await callBookingParser(contentBlocks,status,btn,'🤖 E-Mail auslesen');
  }catch(netErr){
    const parsed=parseBookingText(text);
    fillAccomForm(parsed);
    status.textContent='✅ Ausgelesen (lokal)';status.style.color='var(--accent)';
    btn.textContent='🤖 E-Mail auslesen';btn.disabled=false;
  }
}

async function callBookingParser(contentBlocks,statusEl,btn,btnLabel){
  let dots=0;
  const anim=setInterval(()=>{dots=(dots+1)%4;statusEl.textContent='⏳ Verarbeite'+'.'.repeat(dots);statusEl.style.color='var(--text-muted)';},400);
  const timer=setTimeout(()=>{
    clearInterval(anim);
    statusEl.textContent='❌ Timeout — zu lange keine Antwort. Läuft die App auf einem Server?';
    statusEl.style.color='var(--danger)';
    btn.textContent=btnLabel;btn.disabled=false;
  },30000);
  try{
    const res=await fetch(`${SUPA_URL}/functions/v1/ai-proxy`,{
      method:'POST',
      headers:{'Content-Type':'application/json','Authorization':`Bearer ${SUPA_KEY}`},
      body:JSON.stringify({
        model:'claude-sonnet-4-20250514',
        max_tokens:500,
        system:`You are a booking confirmation parser. Extract information from hotel/accommodation booking confirmations and return ONLY valid JSON with these exact keys:
{"name":"hotel name","location":"city, country","type":"hotel|hostel|airbnb|camping|other","checkin":"YYYY-MM-DD","checkout":"YYYY-MM-DD","price":number_or_null,"currency":"EUR|USD|GBP|etc","confirmation":"confirmation number or URL","status":"booked"}
If a field is not found, use null. Dates must be in YYYY-MM-DD format. Price must be the total amount as a number or null. Return ONLY the JSON object, no other text.`,
        messages:[{role:'user',content:contentBlocks}]
      })
    });
    clearInterval(anim);clearTimeout(timer);
    if(!res.ok){
      const err=await res.json().catch(()=>({}));
      throw new Error(err.error?.message||`HTTP ${res.status}`);
    }
    const data=await res.json();
    const raw=data.content?.map(c=>c.text||'').join('').trim();
    let parsed;
    try{parsed=JSON.parse(raw.replace(/^```json|```$/g,'').trim());}
    catch(e){throw new Error('Antwort konnte nicht verarbeitet werden.');}
    fillAccomForm(parsed);
    statusEl.textContent='✅ Erfolgreich ausgelesen!';
    statusEl.style.color='var(--accent)';
  }catch(err){
    clearInterval(anim);clearTimeout(timer);
    throw err;
  }finally{
    btn.textContent=btnLabel;btn.disabled=false;
  }
}

function fillAccomForm(d){
  if(d.name) document.getElementById('a-name').value=d.name;
  if(d.location) document.getElementById('a-loc').value=d.location;
  if(d.type&&['hotel','hostel','airbnb','camping','other'].includes(d.type)) document.getElementById('a-type').value=d.type;
  const isoToDate=iso=>{if(!iso)return null;const p=iso.split('-');return p.length===3?new Date(+p[0],+p[1]-1,+p[2],12):null;};
  if(d.checkin&&fpAccomIn){const dt=isoToDate(d.checkin);if(dt)fpAccomIn.setDate(dt,false);}
  if(d.checkout&&fpAccomOut){fpAccomOut.set('minDate',null);const dt=isoToDate(d.checkout);if(dt)fpAccomOut.setDate(dt,false);}
  if(d.price!=null){document.getElementById('a-price').value=parseFloat(d.price)||'';}
  if(d.confirmation) document.getElementById('a-link').value=d.confirmation;
  if(d.status) document.getElementById('a-status').value=d.status||'booked';
}

// ── SCREENSHOT IMPORT ─────────────────────────────────────────────────────────
let _ssBase64=null;
let _ssStops=[];

function setSsTab(tab){
  document.getElementById('ss-text-mode').style.display=tab==='text'?'':'none';
  document.getElementById('ss-img-mode').style.display=tab==='img'?'':'none';
  document.getElementById('ss-tab-text').className='btn btn-sm '+(tab==='text'?'btn-primary':'btn-secondary');
  document.getElementById('ss-tab-img').className='btn btn-sm '+(tab==='img'?'btn-primary':'btn-secondary');
  document.getElementById('ss-results').style.display='none';
  document.getElementById('ss-import-btn').style.display='none';
}
function parseSsText(){
  const raw=document.getElementById('ss-text-input').value;
  const stops=parseRouteStopsFromText(raw);
  if(!stops.length){alert('Keine Ortsnamen erkannt. Bitte Stopps einfügen (eine Zeile pro Stopp).');return;}
  _ssStops=stops.map((s,i)=>({...s,idx:i,lat:null,lng:null}));
  renderSsStops();
  document.getElementById('ss-results').style.display='';
  document.getElementById('ss-import-btn').style.display='';
  const fakeStatus={textContent:''};
  geocodeAllStops(fakeStatus);
}

function handleSsUpload(input){
  const file=input.files[0];if(!file)return;
  const reader=new FileReader();
  reader.onload=e=>{
    _ssBase64=e.target.result.split(',')[1];
    document.getElementById('ss-preview-img').src=e.target.result;
    document.getElementById('ss-preview-wrap').style.display='block';
    document.getElementById('ss-results').style.display='none';
    document.getElementById('ss-import-btn').style.display='none';
    document.getElementById('ss-status').textContent='';
    _ssStops=[];
  };
  reader.readAsDataURL(file);
}

// Drag & drop for screenshot modal
document.addEventListener('DOMContentLoaded',()=>{
  const dz=document.getElementById('ss-drop-zone');
  if(!dz)return;
  dz.addEventListener('dragover',e=>{e.preventDefault();dz.style.borderColor='var(--accent)';dz.style.background='var(--accent-light)';});
  dz.addEventListener('dragleave',()=>{dz.style.borderColor='var(--border)';dz.style.background='var(--surface2)';});
  dz.addEventListener('drop',e=>{
    e.preventDefault();dz.style.borderColor='var(--border)';dz.style.background='var(--surface2)';
    const file=e.dataTransfer.files[0];
    if(file&&file.type.startsWith('image/')){
      const reader=new FileReader();
      reader.onload=ev=>{
        _ssBase64=ev.target.result.split(',')[1];
        document.getElementById('ss-preview-img').src=ev.target.result;
        document.getElementById('ss-preview-wrap').style.display='block';
        document.getElementById('ss-results').style.display='none';
        document.getElementById('ss-import-btn').style.display='none';
        _ssStops=[];
      };
      reader.readAsDataURL(file);
    }
  });
});

function cropLeftHalf(base64){
  return new Promise(resolve=>{
    const img=new Image();
    img.onload=()=>{
      const cropW=Math.round(img.width*0.45);
      const c=document.createElement('canvas');
      c.width=cropW;c.height=img.height;
      c.getContext('2d').drawImage(img,0,0,cropW,img.height,0,0,cropW,img.height);
      resolve(c.toDataURL('image/png'));
    };
    img.src=base64.startsWith('data:')?base64:`data:image/png;base64,${base64}`;
  });
}

async function analyzeScreenshot(){
  if(!_ssBase64){return;}
  const btn=document.getElementById('ss-analyze-btn');
  const status=document.getElementById('ss-status');
  btn.textContent='⏳ OCR läuft…';btn.disabled=true;
  status.textContent='Bild wird zugeschnitten & gelesen… (kann ~15s dauern)';status.style.color='var(--text-muted)';
  try{
    const cropped=await cropLeftHalf(_ssBase64);
    const text=await ocrImageText(cropped,pct=>{status.textContent=`OCR: ${pct}%…`;});
    const stops=parseRouteStopsFromText(text);
    if(!stops.length)throw new Error('Keine Ortsnamen erkannt. Tipp: Screenshot nur mit der linken Stoppliste machen.');
    _ssStops=stops.map((s,i)=>({...s,idx:i,lat:null,lng:null}));
    renderSsStops();
    status.textContent=`✅ ${stops.length} Stopps erkannt — Koordinaten werden geladen…`;
    await geocodeAllStops(status);
  }catch(err){
    status.textContent='❌ '+err.message;status.style.color='var(--danger)';
  }finally{
    btn.textContent='🔄 Erneut analysieren';btn.disabled=false;
  }
}

async function geocodeStop(stop){
  const q=encodeURIComponent([stop.name,stop.city,stop.country].filter(Boolean).join(', '));
  try{
    const r=await fetch(`https://nominatim.openstreetmap.org/search?q=${q}&format=json&limit=1`,{headers:{'Accept-Language':'de'}});
    const d=await r.json();
    if(d.length){return{lat:parseFloat(d[0].lat),lng:parseFloat(d[0].lon)};}
  }catch(e){}
  return null;
}

async function geocodeAllStops(statusEl){
  for(let i=0;i<_ssStops.length;i++){
    statusEl.textContent=`📍 Koordinaten: ${i+1}/${_ssStops.length} (${_ssStops[i].name})…`;
    const coords=await geocodeStop(_ssStops[i]);
    if(coords){_ssStops[i].lat=coords.lat;_ssStops[i].lng=coords.lng;}
    renderSsStops();
    // small delay to respect Nominatim rate limit
    await new Promise(r=>setTimeout(r,300));
  }
  statusEl.textContent=`✅ Fertig! ${_ssStops.filter(s=>s.lat).length}/${_ssStops.length} Stopps mit Koordinaten.`;
  statusEl.style.color='var(--accent)';
}

function renderSsStops(){
  const list=document.getElementById('ss-stops-list');
  document.getElementById('ss-results').style.display='block';
  document.getElementById('ss-import-btn').style.display='inline-flex';
  list.innerHTML=_ssStops.map((s,i)=>`
    <div style="display:flex;align-items:center;gap:10px;padding:8px 12px;background:${s.selected?'var(--accent-light)':'var(--surface2)'};border:1px solid ${s.selected?'#a8d4b4':'var(--border)'};border-radius:var(--radius-sm);cursor:pointer;transition:all .15s;" onclick="toggleSsStop(${i})">
      <div style="width:24px;height:24px;border-radius:50%;background:${s.selected?'var(--accent)':'var(--border)'};color:white;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex-shrink:0;">${i+1}</div>
      <div style="flex:1;">
        <div style="font-weight:500;font-size:14px;">${s.name}</div>
        ${s.city||s.country?`<div style="font-size:12px;color:var(--text-muted);">${[s.city,s.country].filter(Boolean).join(', ')}</div>`:''}
      </div>
      <div style="font-size:12px;color:${s.lat?'var(--accent)':'var(--text-muted)'};">
        ${s.lat?`📍 ${s.lat.toFixed(3)}, ${s.lng.toFixed(3)}`:'⏳ Geocoding…'}
      </div>
      <div style="font-size:16px;">${s.selected?'✅':'⬜'}</div>
    </div>`).join('');
}

function toggleSsStop(i){
  _ssStops[i].selected=!_ssStops[i].selected;
  renderSsStops();
}

async function importScreenshotStops(){
  const tid=ctid();
  if(!tid){alert('Bitte zuerst eine Reise auswählen.');return;}
  const toImport=_ssStops.filter(s=>s.selected);
  if(!toImport.length){alert('Keine Stopps ausgewählt.');return;}

  toImport.forEach(s=>{
    // avoid duplicates by name
    if(!S.dests.find(d=>d.tripId===tid&&d.name===s.name)){
      S.dests.push({
        id:uid(),tripId:tid,
        name:s.name,
        city:s.city||'',
        country:s.country||'',
        lat:s.lat||null,
        lng:s.lng||null,
        notes:'',photo:null
      });
    }
  });
  save();closeModal('modal-screenshot');
  renderDests();refreshDMap();
  // also ask if they want to create route stages
  if(confirm(`${toImport.length} Ziele importiert! Soll daraus auch gleich eine Route (je 1 Etappe pro Stopp) erstellt werden?`)){
    toImport.forEach((s,i)=>{
      const dest=S.dests.find(d=>d.tripId===tid&&d.name===s.name);
      if(dest){
        S.routes.push({id:uid(),tripId:tid,day:i+1,date:'',notes:'',destIds:[dest.id]});
      }
    });
    save();
    showTab('route');renderRoute();
  }
  // reset
  _ssBase64=null;_ssStops=[];
  document.getElementById('ss-preview-wrap').style.display='none';
  document.getElementById('ss-results').style.display='none';
  document.getElementById('ss-import-btn').style.display='none';
  document.getElementById('ss-status').textContent='';
  document.getElementById('ss-file-input').value='';
}

// ── PLAN SCREENSHOT IMPORT ────────────────────────────────────────────────────
let _psBase64=null;
let _psDays=[];

function handlePsUpload(input){
  const file=input.files[0];if(!file)return;
  const reader=new FileReader();
  reader.onload=e=>{
    _psBase64=e.target.result.split(',')[1];
    document.getElementById('ps-preview-img').src=e.target.result;
    document.getElementById('ps-preview-wrap').style.display='block';
    document.getElementById('ps-results').style.display='none';
    document.getElementById('ps-import-btn').style.display='none';
    document.getElementById('ps-status').textContent='';
    _psDays=[];
  };
  reader.readAsDataURL(file);
}

// drag & drop for plan screenshot
document.addEventListener('DOMContentLoaded',()=>{
  const dz=document.getElementById('ps-drop-zone');
  if(!dz)return;
  dz.addEventListener('dragover',e=>{e.preventDefault();dz.style.borderColor='var(--accent)';dz.style.background='var(--accent-light)';});
  dz.addEventListener('dragleave',()=>{dz.style.borderColor='var(--border)';dz.style.background='var(--surface2)';});
  dz.addEventListener('drop',e=>{
    e.preventDefault();dz.style.borderColor='var(--border)';dz.style.background='var(--surface2)';
    const file=e.dataTransfer.files[0];
    if(file&&file.type.startsWith('image/')){
      const reader=new FileReader();
      reader.onload=ev=>{
        _psBase64=ev.target.result.split(',')[1];
        document.getElementById('ps-preview-img').src=ev.target.result;
        document.getElementById('ps-preview-wrap').style.display='block';
        _psDays=[];document.getElementById('ps-results').style.display='none';
        document.getElementById('ps-import-btn').style.display='none';
      };
      reader.readAsDataURL(file);
    }
  });
});

async function analyzePlanScreenshot(){
  if(!_psBase64)return;
  const btn=document.getElementById('ps-analyze-btn');
  const status=document.getElementById('ps-status');
  btn.textContent='⏳ OCR läuft…';btn.disabled=true;
  status.textContent='Text wird aus Bild gelesen… (kann ~15s dauern)';status.style.color='var(--text-muted)';
  try{
    const text=await ocrImageText(_psBase64,pct=>{status.textContent=`OCR: ${pct}%…`;});
    const days=parseDayPlanFromText(text);
    if(!days.length)throw new Error('Kein Tagesplan erkannt. Bitte klareres Screenshot verwenden.');
    _psDays=days.map(d=>({...d,selected:true}));
    renderPsDays();
    status.textContent=`✅ ${days.length} Tage erkannt!`;status.style.color='var(--accent)';
  }catch(err){
    status.textContent='❌ '+err.message;status.style.color='var(--danger)';
  }finally{
    btn.textContent='🔄 Erneut analysieren';btn.disabled=false;
  }
}

function renderPsDays(){
  document.getElementById('ps-results').style.display='block';
  document.getElementById('ps-import-btn').style.display='inline-flex';
  const list=document.getElementById('ps-days-list');
  list.innerHTML=_psDays.map((d,i)=>`
    <div onclick="togglePsDay(${i})" style="padding:10px 12px;border-radius:var(--radius-sm);border:1px solid ${d.selected?'#a8d4b4':'var(--border)'};background:${d.selected?'var(--accent-light)':'var(--surface2)'};cursor:pointer;transition:all .15s;">
      <div style="display:flex;align-items:center;gap:8px;margin-bottom:${d.notes||d.links?.length?'5px':'0'}">
        <span style="width:26px;height:26px;border-radius:50%;background:${d.selected?'var(--accent)':'var(--border)'};color:white;display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex-shrink:0;">T${d.day}</span>
        <strong style="font-size:14px;">Tag ${d.day}${d.date?' · '+d.date:''}</strong>
        <span style="margin-left:auto;font-size:15px;">${d.selected?'✅':'⬜'}</span>
      </div>
      ${d.notes?`<div style="font-size:13px;color:var(--text-muted);padding-left:34px;">${d.notes}</div>`:''}
      ${d.links&&d.links.length?`<div style="display:flex;flex-wrap:wrap;gap:4px;margin-top:5px;padding-left:34px;">${d.links.map(lk=>`<span style="background:white;border:1px solid var(--border);border-radius:20px;padding:2px 8px;font-size:11px;color:var(--accent);">🔗 ${lk.label}</span>`).join('')}</div>`:''}
    </div>`).join('');
}

function togglePsDay(i){_psDays[i].selected=!_psDays[i].selected;renderPsDays();}

function importPlanDays(){
  const tid=ctid();
  if(!tid){alert('Bitte zuerst eine Reise im Routen-Tab auswählen.');closeModal('modal-plan-screenshot');showTab('route');return;}
  const toImport=_psDays.filter(d=>d.selected);
  if(!toImport.length){alert('Keine Tage ausgewählt.');return;}
  toImport.forEach(d=>{
    // avoid duplicate days
    if(!S.routes.find(r=>r.tripId===tid&&r.day===d.day)){
      S.routes.push({id:uid(),tripId:tid,day:d.day,date:d.date||'',notes:d.notes||'',destIds:[],links:d.links||[]});
    }
  });
  save();closeModal('modal-plan-screenshot');
  showTab('route');renderRoute();
  // reset
  _psBase64=null;_psDays=[];
  document.getElementById('ps-preview-wrap').style.display='none';
  document.getElementById('ps-results').style.display='none';
  document.getElementById('ps-import-btn').style.display='none';
  document.getElementById('ps-file-input').value='';
}

// ── TRANSPORT ─────────────────────────────────────────────────────────────────
const trIcons={flight:'✈️',car:'🚗',train:'🚆',bus:'🚌',ferry:'⛴️',taxi:'🚕',other:'🚀'};
const trLabels={flight:'Flug',car:'Mietauto',train:'Zug',bus:'Bus',ferry:'Fähre',taxi:'Taxi',other:'Sonstiges'};

let fpTransportArr=null,fpPickupDate=null,fpReturnDate=null;
function trTypeChange(){
  const t=document.getElementById('tr-type').value;
  const isFlight=t==='flight',isCar=t==='car';
  document.getElementById('tr-from-row').style.display=isCar?'none':'';
  document.getElementById('tr-datetime-row').style.display=isCar?'none':'';
  document.getElementById('tr-arr-row').style.display=isFlight?'':'none';
  document.getElementById('tr-stops-wrap').style.display=isFlight?'':'none';
  document.getElementById('tr-car-wrap').style.display=isCar?'':'none';
  const fromL=document.getElementById('tr-from-label');
  const toL=document.getElementById('tr-to-label');
  const timeL=document.getElementById('tr-time-label');
  const provL=document.getElementById('tr-provider-label');
  if(isFlight){fromL.textContent='Abflughafen';toL.textContent='Zielflughafen';timeL.textContent='Abflug';provL.textContent='Airline / Flugnr.';}
  else{fromL.textContent='Von';toL.textContent='Nach';timeL.textContent='Uhrzeit';provL.textContent='Anbieter';}
  if(isFlight&&!fpTransportArr)fpTransportArr=flatpickr('#tr-arr-date',{...fpBase});
  if(isCar){
    if(!fpPickupDate)fpPickupDate=flatpickr('#tr-pickup-date',{...fpBase});
    if(!fpReturnDate)fpReturnDate=flatpickr('#tr-return-date',{...fpBase});
  }
}
function addFlightStop(){
  const list=document.getElementById('tr-stops-list');
  const idx=list.children.length;
  const div=document.createElement('div');
  div.style.cssText='display:flex;gap:6px;margin-bottom:6px;align-items:center;';
  div.innerHTML=`<input type="text" placeholder="Ort (z.B. Frankfurt)" style="flex:1;padding:6px 8px;border:1px solid var(--border);border-radius:var(--radius-sm);font-size:13px;font-family:var(--font-body);background:var(--surface);" data-stop-loc="${idx}">
    <input type="time" style="width:90px;padding:6px 8px;border:1px solid var(--border);border-radius:var(--radius-sm);font-size:13px;font-family:var(--font-body);background:var(--surface);" data-stop-dep="${idx}" title="Abflug">
    <input type="time" style="width:90px;padding:6px 8px;border:1px solid var(--border);border-radius:var(--radius-sm);font-size:13px;font-family:var(--font-body);background:var(--surface);" data-stop-arr="${idx}" title="Ankunft">
    <button type="button" onclick="this.parentNode.remove()" style="border:none;background:none;cursor:pointer;color:var(--text-muted);font-size:16px;">✕</button>`;
  list.appendChild(div);
}
function getFlightStops(){
  const list=document.getElementById('tr-stops-list');
  return [...list.children].map(div=>({
    loc:div.querySelector('[data-stop-loc]')?.value||'',
    dep:div.querySelector('[data-stop-dep]')?.value||'',
    arr:div.querySelector('[data-stop-arr]')?.value||''
  })).filter(s=>s.loc||s.dep||s.arr);
}
function renderFlightStops(stops){
  document.getElementById('tr-stops-list').innerHTML='';
  (stops||[]).forEach(s=>{addFlightStop();const d=document.getElementById('tr-stops-list').lastElementChild;d.querySelector('[data-stop-loc]').value=s.loc||'';d.querySelector('[data-stop-dep]').value=s.dep||'';d.querySelector('[data-stop-arr]').value=s.arr||'';});
}
function openTransportModal(editId=null){
  if(!fpTransport)fpTransport=flatpickr('#tr-date',{...fpBase});
  const el=document.getElementById('transport-modal-title');
  if(editId){
    const tr=S.transports.find(x=>x.id===editId);if(!tr)return;
    el.textContent='🚌 Transport bearbeiten';
    document.getElementById('tr-type').value=tr.type;
    document.getElementById('tr-status').value=tr.status;
    document.getElementById('tr-from').value=tr.from||'';
    document.getElementById('tr-to').value=tr.to||'';
    document.getElementById('tr-provider').value=tr.provider||'';
    document.getElementById('tr-price').value=tr.price||'';
    document.getElementById('tr-link').value=tr.link||'';
    document.getElementById('tr-notes').value=tr.notes||'';
    document.getElementById('tr-time').value=tr.time||'';
    document.getElementById('tr-arr-time').value=tr.arrTime||'';
    document.getElementById('tr-pickup-loc').value=tr.pickupLoc||'';
    document.getElementById('tr-pickup-time').value=tr.pickupTime||'';
    document.getElementById('tr-return-loc').value=tr.returnLoc||'';
    document.getElementById('tr-return-time').value=tr.returnTime||'';
    if(tr.date&&fpTransport)fpTransport.setDate(tr.date,false);
    else{fpTransport.clear();fpTransport.input.value='';}
    if(tr.arrDate&&fpTransportArr)fpTransportArr.setDate(tr.arrDate,false);
    else if(fpTransportArr){fpTransportArr.clear();fpTransportArr.input.value='';}
    trTypeChange();
    if(fpPickupDate){tr.pickupDate?fpPickupDate.setDate(tr.pickupDate,false):(fpPickupDate.clear(),fpPickupDate.input.value='');}
    if(fpReturnDate){tr.returnDate?fpReturnDate.setDate(tr.returnDate,false):(fpReturnDate.clear(),fpReturnDate.input.value='');}
    renderFlightStops(tr.stops||[]);
    document.getElementById('tr-edit-id')||document.getElementById('modal-transport').querySelector('.modal-body').prepend(Object.assign(document.createElement('input'),{type:'hidden',id:'tr-edit-id'}));
    document.getElementById('tr-edit-id').value=editId;
  } else {
    el.textContent='🚌 Neuer Transport';
    ['tr-from','tr-to','tr-provider','tr-price','tr-link','tr-notes','tr-time','tr-arr-time','tr-pickup-loc','tr-pickup-time','tr-return-loc','tr-return-time'].forEach(id=>{const e=document.getElementById(id);if(e)e.value='';});
    [fpTransport,fpTransportArr,fpPickupDate,fpReturnDate].forEach(fp=>{if(fp){fp.clear();fp.input.value='';}});
    document.getElementById('tr-stops-list').innerHTML='';
    const eid=document.getElementById('tr-edit-id');if(eid)eid.value='';
    trTypeChange();
  }
  openModal('modal-transport');
}

function saveTransport(){
  const tid=ctid();if(!tid)return;
  const type=document.getElementById('tr-type').value;
  const from=document.getElementById('tr-from').value.trim();
  const to=document.getElementById('tr-to').value.trim();
  const pickupLoc=document.getElementById('tr-pickup-loc').value.trim();
  if(type!=='car'&&!from&&!to)return;
  if(type==='car'&&!pickupLoc)return;
  const eid=document.getElementById('tr-edit-id')?.value;
  const obj={
    tripId:tid,type,
    status:document.getElementById('tr-status').value,
    from,to,
    date:fpTransport?fpISO(fpTransport):'',
    time:document.getElementById('tr-time').value,
    arrTime:document.getElementById('tr-arr-time').value,
    arrDate:fpTransportArr?fpISO(fpTransportArr):'',
    stops:type==='flight'?getFlightStops():[],
    pickupLoc,
    pickupDate:fpPickupDate?fpISO(fpPickupDate):'',
    pickupTime:document.getElementById('tr-pickup-time').value,
    returnLoc:document.getElementById('tr-return-loc').value.trim(),
    returnDate:fpReturnDate?fpISO(fpReturnDate):'',
    returnTime:document.getElementById('tr-return-time').value,
    provider:document.getElementById('tr-provider').value.trim(),
    price:parseFloat(document.getElementById('tr-price').value)||0,
    link:document.getElementById('tr-link').value.trim(),
    notes:document.getElementById('tr-notes').value.trim(),
  };
  if(eid){Object.assign(S.transports.find(x=>x.id===eid),obj);}
  else{S.transports.push({id:uid(),...obj});}
  save();closeModal('modal-transport');renderTransport();renderBudget();
}
function delTransport(id){S.transports=S.transports.filter(x=>x.id!==id);save();renderTransport();renderBudget();}

function renderTransport(){
  const tid=ctid();
  const list=document.getElementById('transport-list');
  const items=S.transports.filter(x=>x.tripId===tid).sort((a,b)=>((a.date||a.pickupDate||'')>(b.date||b.pickupDate||''))?1:-1);
  if(!items.length){list.innerHTML=emptyState('🚌','Noch kein Transport','Füge Flüge, Züge und Transfers hinzu.');return;}
  const sb={booked:'badge-green',pending:'badge-orange',idea:'badge-gray'};
  const sl={booked:'✅ Gebucht',pending:'⏳ Ausstehend',idea:'💡 Idee'};
  list.innerHTML=`<div class="transport-list">`+items.map(tr=>`
    <div class="transport-card">
      <div class="transport-card-head">
        <div class="transport-icon">${trIcons[tr.type]||'🚀'}</div>
        <div class="transport-info">
          <div class="transport-route">${tr.type==='car'?(tr.pickupLoc||'Abholort')+' → '+(tr.returnLoc||'Rückgabeort'):((tr.from||'?')+' → '+(tr.to||'?'))}</div>
          <div class="transport-meta">
            ${tr.type==='car'?(tr.pickupDate?'📅 '+tr.pickupDate:'')+(tr.pickupTime?' ⏰ '+tr.pickupTime:'')+(tr.returnDate?' – '+tr.returnDate:''):(tr.date?'📅 '+tr.date:'')+' '+(tr.time?'⏰ '+tr.time:'')} ${tr.provider?'· '+tr.provider:''}
          </div>
        </div>
        <div style="display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex-shrink:0;">
          <span class="badge ${sb[tr.status]}">${sl[tr.status]}</span>
          ${tr.price?`<span style="font-family:var(--font-display);font-size:16px;">${fc(tr.price)}</span>`:''}
        </div>
      </div>
      <div class="transport-card-foot">
        ${tr.link?`<a href="${tr.link}" target="_blank" style="color:var(--accent);font-size:12px;text-decoration:none;">🔗 Buchung</a>`:''}
        ${tr.notes?`<span style="font-size:12px;color:var(--text-muted);flex:1;">${tr.notes}</span>`:''}
        <button class="btn btn-secondary btn-sm" onclick="openTransportModal('${tr.id}')">✏️</button>
        <button class="btn btn-danger btn-sm" onclick="delTransport('${tr.id}')">🗑️</button>
      </div>
    </div>`).join('')+`</div>`;
}

// ── EDIT FUNCTIONS ────────────────────────────────────────────────────────────
function editTrip(id){
  const tp=S.trips.find(x=>x.id===id);if(!tp)return;
  document.getElementById('trip-modal-title').textContent='✈️ Reise bearbeiten';
  document.getElementById('t-edit-id').value=id;
  document.getElementById('t-name').value=tp.name;
  document.getElementById('t-dest').value=tp.destination||'';
  document.getElementById('t-status').value=tp.status||'active';
  document.getElementById('t-budget').value=tp.budget||'';
  document.getElementById('t-persons').value=tp.persons||1;
  if(tp.start&&fpTripStart)fpTripStart.setDate(new Date(tp.start),false);
  if(tp.end&&fpTripEnd)fpTripEnd.setDate(new Date(tp.end),false);
  openModal('modal-trip');
}
function editExp(id){
  const e=S.exps.find(x=>x.id===id);if(!e)return;
  document.getElementById('exp-modal-title').textContent='💶 Ausgabe bearbeiten';
  document.getElementById('e-edit-id').value=id;
  document.getElementById('e-name').value=e.name;
  document.getElementById('e-amt').value=e.amount;
  document.getElementById('e-cat').value=e.category;
  if(e.date&&fpExp)fpExp.setDate(new Date(e.date),false);
  openModal('modal-exp');
}
function editAccom(id){
  const a=S.accoms.find(x=>x.id===id);if(!a)return;
  document.getElementById('accom-modal-title').textContent='🏨 Unterkunft bearbeiten';
  document.getElementById('a-edit-id').value=id;
  document.getElementById('a-name').value=a.name;
  document.getElementById('a-loc').value=a.location||'';
  document.getElementById('a-type').value=a.type||'hotel';
  document.getElementById('a-price').value=a.price||'';
  document.getElementById('a-status').value=a.status||'booked';
  document.getElementById('a-link').value=a.link||'';
  openModal('modal-accom');
  if(fpAccomIn)fpAccomIn.clear();
  if(fpAccomOut){fpAccomOut.set('minDate',null);fpAccomOut.clear();}
  const toDate=iso=>{const[y,m,d]=iso.split('-');return new Date(+y,+m-1,+d,12);};
  setTimeout(()=>{
    if(a.checkin&&fpAccomIn)fpAccomIn.setDate(toDate(a.checkin),false);
    if(a.checkout&&fpAccomOut)fpAccomOut.setDate(toDate(a.checkout),false);
  },0);
}

// ── UPDATED SAVE FUNCTIONS with edit support ───────────────────────────────────
function saveTrip(){
  const name=document.getElementById('t-name').value.trim();if(!name)return;
  const eid=document.getElementById('t-edit-id').value;
  const obj={name,destination:document.getElementById('t-dest').value.trim(),status:document.getElementById('t-status').value,start:fpISO(fpTripStart),end:fpISO(fpTripEnd),budget:parseFloat(document.getElementById('t-budget').value)||0,persons:parseInt(document.getElementById('t-persons').value)||1};
  if(eid){Object.assign(S.trips.find(x=>x.id===eid),obj);}
  else{S.trips.push({id:uid(),...obj});}
  save();closeModal('modal-trip');renderAll();
  document.getElementById('t-edit-id').value='';
  document.getElementById('trip-modal-title').textContent='✈️ Neue Reise';
  ['t-name','t-dest','t-budget'].forEach(id=>document.getElementById(id).value='');
  clearDatepicker(fpTripStart);clearDatepicker(fpTripEnd);
}
function saveExp(){
  const tid=ctid();
  const name=document.getElementById('e-name').value.trim();
  const amt=parseFloat(document.getElementById('e-amt').value);
  if(!name||!amt||!tid)return;
  const eid=document.getElementById('e-edit-id').value;
  const obj={tripId:tid,name,amount:amt,category:document.getElementById('e-cat').value,date:fpISO(fpExp)};
  if(eid){Object.assign(S.exps.find(x=>x.id===eid),obj);}
  else{S.exps.push({id:uid(),...obj});}
  save();closeModal('modal-exp');renderBudget();
  document.getElementById('e-edit-id').value='';
  document.getElementById('exp-modal-title').textContent='💶 Neue Ausgabe';
  ['e-name','e-amt'].forEach(id=>document.getElementById(id).value='');
  clearDatepicker(fpExp);
}
function saveAccom(){
  const tid=ctid();const name=document.getElementById('a-name').value.trim();if(!name||!tid)return;
  const eid=document.getElementById('a-edit-id').value;
  const obj={tripId:tid,name,location:document.getElementById('a-loc').value.trim(),type:document.getElementById('a-type').value,checkin:fpISO(fpAccomIn),checkout:fpISO(fpAccomOut),price:parseFloat(document.getElementById('a-price').value)||0,status:document.getElementById('a-status').value,link:document.getElementById('a-link').value.trim()};
  if(eid){Object.assign(S.accoms.find(x=>x.id===eid),obj);}
  else{S.accoms.push({id:uid(),...obj});}
  save();closeModal('modal-accom');renderAccom();
  document.getElementById('a-edit-id').value='';
  document.getElementById('accom-modal-title').textContent='🏨 Neue Unterkunft';
  document.getElementById('a-name').value='';
  clearDatepicker(fpAccomIn);clearDatepicker(fpAccomOut);
}

// ── DATEPICKER INIT ───────────────────────────────────────────────────────────
const fpBase={locale:'de',dateFormat:'d.m.Y',altInput:false,disableMobile:false,appendTo:document.body};
function fpISO(fp){return fp?.selectedDates[0]?fp.formatDate(fp.selectedDates[0],'Y-m-d'):'';}
let fpTripStart,fpTripEnd,fpAccomIn,fpAccomOut,fpRoute,fpExp,fpTransport,fpDayplan,fpDayplanEnd,fpDayplanEdit,fpTodo;
function initDatepickers(){
  fpTripStart=flatpickr('#t-start',{...fpBase,onChange(dates){if(!dates[0])return;fpTripEnd.jumpToDate(dates[0]);fpTripEnd.open();fpTripEnd.set('minDate',dates[0]);}});
  fpTripEnd=flatpickr('#t-end',{...fpBase});
  fpAccomIn=flatpickr('#a-in',{...fpBase,onChange(dates){if(!dates[0])return;fpAccomOut.jumpToDate(dates[0]);fpAccomOut.open();fpAccomOut.set('minDate',dates[0]);}});
  fpAccomOut=flatpickr('#a-out',{...fpBase});
  fpRoute=flatpickr('#r-date',{...fpBase});
  fpExp=flatpickr('#e-date',{...fpBase});
  fpDayplan=flatpickr('#dp-date',{...fpBase,onChange(dates){if(dates[0]&&fpDayplanEnd)fpDayplanEnd.set('minDate',dates[0]);}});
  fpDayplanEnd=flatpickr('#dp-date-end',{...fpBase});
  fpDayplanEdit=flatpickr('#dp-date-edit',{...fpBase});
  fpTodo=flatpickr('#todo-date',{...fpBase});
}
function clearDatepicker(fp){if(fp)fp.clear();}

// ── UPDATED BUDGET (includes accoms + transports) ─────────────────────────────
function renderBudget(){
  const tid=ctid();
  const tp=S.trips.find(t=>t.id===tid);
  const exps=S.exps.filter(e=>e.tripId===tid);
  const accoms=S.accoms.filter(a=>a.tripId===tid&&a.status!=='idea');
  const transports=S.transports.filter(x=>x.tripId===tid&&x.status!=='idea');
  const accomTotal=accoms.reduce((s,a)=>s+a.price,0);
  const transportTotal=transports.reduce((s,x)=>s+x.price,0);
  const expTotal=exps.reduce((s,e)=>s+e.amount,0);
  const autoTotal=accomTotal+transportTotal;
  const total=expTotal+autoTotal;
  const budget=tp?tp.budget:0;
  const rem=budget-total;

  document.getElementById('budget-stats').innerHTML=`
    <div class="bstat"><div class="bstat-label">Gesamtbudget</div><div class="bstat-val">${fc(budget)}</div></div>
    <div class="bstat"><div class="bstat-label">Ausgaben</div><div class="bstat-val">${fc(expTotal)}</div></div>
    <div class="bstat"><div class="bstat-label">🏨 Unterkünfte</div><div class="bstat-val">${fc(accomTotal)}</div></div>
    <div class="bstat"><div class="bstat-label">🚌 Transport</div><div class="bstat-val">${fc(transportTotal)}</div></div>
    <div class="bstat"><div class="bstat-label">Gesamt ausgegeben</div><div class="bstat-val ${total>budget?'over':''}">${fc(total)}</div><div class="progress-bar"><div class="progress-fill ${total>budget?'over':''}" style="width:${budget?Math.min(100,total/budget*100):0}%"></div></div></div>
    <div class="bstat"><div class="bstat-label">Verbleibend</div><div class="bstat-val ${rem<0?'over':''}">${fc(Math.abs(rem))}${rem<0?' ⚠️':''}</div></div>`;

  const list=document.getElementById('exp-list');
  // combine all for display
  const allItems=[
    ...accoms.map(a=>({id:a.id,name:a.name,amount:a.price,category:'accommodation',date:a.checkin,src:'accom'})),
    ...transports.map(x=>({id:x.id,name:`${trIcons[x.type]} ${x.from}→${x.to}`,amount:x.price,category:'transport',date:x.date,src:'transport'})),
    ...exps.map(e=>({...e,src:'exp'})),
  ].filter(x=>x.amount).sort((a,b)=>(b.date||'')>(a.date||'')?1:-1);

  if(!allItems.length){list.innerHTML=emptyState('💶','Keine Ausgaben','Trage Ausgaben, Unterkünfte und Transport ein.');return;}
  list.innerHTML=allItems.map(e=>`<div class="exp-item" style="cursor:${e.src==='exp'?'pointer':'default'};" ${e.src==='exp'?`onclick="editExp('${e.id}')"`:e.src==='accom'?`onclick="editAccom('${e.id}')"`:e.src==='transport'?`onclick="openTransportModal('${e.id}')"`:''}>
    <div class="exp-icon">${catIcons[e.category]||'💳'}</div>
    <div class="exp-info"><div class="exp-name">${e.name}${e.src!=='exp'?` <span style="font-size:10px;color:var(--text-muted);background:var(--surface2);padding:1px 6px;border-radius:10px;">${e.src==='accom'?'Unterkunft':'Transport'}</span>`:''}</div><div class="exp-cat">${e.date?'📅 '+e.date:''}</div></div>
    <div class="exp-amt">${fc(e.amount)}</div>
    <div style="font-size:12px;color:var(--text-muted);">✏️</div>
  </div>`).join('');
}

// ── ROUTE EDIT ────────────────────────────────────────────────────────────────
function editRoute(routeId){
  const r=S.routes.find(x=>x.id===routeId);if(!r)return;
  document.getElementById('route-modal-title').textContent='🗺️ Route bearbeiten';
  document.getElementById('r-edit-id').value=routeId;
  document.getElementById('r-day').value=r.day;
  document.getElementById('r-notes').value=r.notes||'';
  document.getElementById('r-links').value=(r.links||[]).map(l=>l.label&&l.url!==l.label?`${l.label} | ${l.url}`:l.url).join('\n');
  if(r.date&&fpRoute)fpRoute.setDate(r.date);
  selDestIds=[...(r.destIds||[])];
  excludedDestIds=[...(r.excludedDestIds||[])];
  fillRouteDestGrid();
  setTimeout(()=>{
    (r.destIds||[]).forEach(did=>{
      const el=document.getElementById('dsi-'+did);
      if(el)el.classList.add('selected');
    });
  },50);
  openModal('modal-route');
}

// Update saveRoute to support edit
const _origSaveRoute=saveRoute;
// override already defined saveRoute to support edit ID
function saveRoute(){
  const tid=ctid();if(!tid)return;
  const linksRaw=document.getElementById('r-links').value.trim();
  const links=linksRaw?linksRaw.split('\n').map(l=>l.trim()).filter(Boolean).map(l=>{
    const parts=l.split('|').map(p=>p.trim());
    if(parts.length>=2)return{label:parts[0],url:parts[1]};
    try{const u=new URL(parts[0]);return{label:u.hostname.replace('www.',''),url:parts[0]};}
    catch(e){return{label:parts[0].slice(0,30),url:parts[0]};}
  }):[];
  const eid=document.getElementById('r-edit-id').value;
  const obj={tripId:tid,day:parseInt(document.getElementById('r-day').value)||1,date:fpRoute?fpISO(fpRoute):'',notes:document.getElementById('r-notes').value.trim(),destIds:[...selDestIds],excludedDestIds:[...excludedDestIds],links};
  if(eid){
    const existing=S.routes.find(x=>x.id===eid);
    if(existing){Object.assign(existing,obj);if(!existing.activities)existing.activities=[];}
  } else {
    S.routes.push({id:uid(),activities:[],...obj});
  }
  save();closeModal('modal-route');
  document.getElementById('r-edit-id').value='';
  document.getElementById('route-modal-title').textContent='🗺️ Neue Route';
  ['r-day','r-notes','r-links'].forEach(id=>document.getElementById(id).value='');
  clearDatepicker(fpRoute);
  selDestIds=[];excludedDestIds=[];renderRoute();refreshRMap();
}

// ── EXPORT / IMPORT ───────────────────────────────────────────────────────────
function exportData(){
  const json=JSON.stringify(S,null,2);
  const blob=new Blob([json],{type:'application/json'});
  const url=URL.createObjectURL(blob);
  const a=document.createElement('a');
  a.href=url;
  a.download=`reiseplaner-export-${new Date().toISOString().slice(0,10)}.json`;
  a.click();
  URL.revokeObjectURL(url);
}
function importData(input){
  const file=input.files[0];if(!file)return;
  const reader=new FileReader();
  reader.onload=e=>{
    try{
      const data=JSON.parse(e.target.result);
      // validate basic structure
      if(!data.trips||!Array.isArray(data.trips))throw new Error('Ungültige Datei');
      S=data;
      // migrate missing arrays
      ['trips','dests','routes','exps','packCats','packItems','accoms','transports','backlog','countries','visitedCountries','dayplans','docs'].forEach(k=>{if(!Array.isArray(S[k]))S[k]=[];});
      if(!Array.isArray(S.stays))S.stays=[];
      save();renderAll();
      document.getElementById('import-status').innerHTML='<span style="color:var(--accent)">✅ Import erfolgreich!</span>';
    }catch(err){
      document.getElementById('import-status').innerHTML=`<span style="color:var(--danger)">❌ Fehler: ${err.message}</span>`;
    }
  };
  reader.readAsText(file);
}

// ── PACKING TEMPLATES ─────────────────────────────────────────────────────────
const PACK_TEMPLATES={
  'Strand 🏖️':{
    'Kleidung':['Badehose/Bikini','Shorts','T-Shirts','Sonnenhut','Flip Flops','Leichter Pullover'],
    'Pflege & Gesundheit':['Sonnencreme SPF 50','After-Sun','Insektenspray','Wasserfeste Sonnenbrille'],
    'Strand':['Strandtuch','Wasserrucksack','Wasserflasche','Snorkeling Set'],
    'Technik':['Kamera','Aufladekabel','iPad','Adapter','USB Stick','Kartenleser','Powerbank'],
    'Dokumente & Sonstiges':['Reisepass','Führerschein','Kreditkarte'],
  },
  'Winter / Ski ⛷️':{
    'Kleidung':['Skijacke','Skihose','Thermounterwäsche','Fleecepullover','Skihandschuhe','Mütze','Skisocken'],
    'Equipment':['Skibrille','Helm','Skipass','Liftpass-Hülle'],
    'Pflege':['Lippenpflege','Sonnencreme (Berge)','Handcreme'],
    'Technik':['Kamera','Aufladekabel','iPad','Adapter','USB Stick','Kartenleser','Powerbank'],
    'Dokumente & Sonstiges':['Reisepass','Führerschein','Kreditkarte'],
  },
  'Wandern 🥾':{
    'Kleidung':['Wanderschuhe','Wanderhose','Regenjacke','Funktionsshirts','Wollsocken'],
    'Ausrüstung':['Rucksack','Trinkblase/Flasche','Wanderstöcke','Kompass/Karte','Stirnlampe'],
    'Notfall':['Erste-Hilfe-Set','Blasenpflaster','Sonnencreme','Insektenspray'],
    'Technik':['Kamera','Aufladekabel','iPad','Adapter','USB Stick','Kartenleser','Powerbank'],
    'Dokumente & Sonstiges':['Reisepass','Führerschein','Kreditkarte'],
  },
  'Städtereise 🏙️':{
    'Kleidung':['Komfortable Schuhe','Smart-Casual Outfit','Regenjacke','Kulturbeutel'],
    'Technik':['Kamera','Aufladekabel','iPad','Adapter','USB Stick','Kartenleser','Powerbank'],
    'Dokumente & Sonstiges':['Reisepass','Führerschein','Kreditkarte'],
  },
  'Camping ⛺':{
    'Schlafen':['Schlafsack','Isomatte','Zelt','Kopfkissen'],
    'Küche':['Campingkocher','Gaskartusche','Besteck','Teller/Becher','Küchenrolle'],
    'Ausrüstung':['Taschenlampe','Batterien','Taschenmesser','Seile','Klappspaten'],
    'Technik':['Kamera','Aufladekabel','iPad','Adapter','USB Stick','Kartenleser','Powerbank'],
    'Dokumente & Sonstiges':['Reisepass','Führerschein','Kreditkarte'],
  },
  'Flugreise ✈️':{
    'Handgepäck':['Reisepass','Boardingpass','Kopfhörer','Nackenkissen','Augenmaske'],
    'Komfort':['Zahnbürste','Deodorant','Lippenpflege','Wechselshirt'],
    'Technik':['Kamera','Aufladekabel','iPad','Adapter','USB Stick','Kartenleser','Powerbank'],
    'Dokumente & Sonstiges':['Reisepass','Führerschein','Kreditkarte'],
  },
};

function getEffectiveTemplate(name){
  const overrides=S.packTemplateOverrides||{};
  const base=PACK_TEMPLATES[name]||{};
  const ovr=overrides[name]||{};
  const result={};
  const allCats=new Set([...Object.keys(base),...Object.keys(ovr)]);
  allCats.forEach(cat=>{
    const baseItems=base[cat]||[];
    const removed=ovr[cat]?.removed||[];
    const added=ovr[cat]?.added||[];
    const items=[...baseItems.filter(i=>!removed.includes(i)),...added];
    if(items.length)result[cat]=items;
  });
  return result;
}
let _ptEditMode=false;
function toggleTemplateEdit(){
  _ptEditMode=!_ptEditMode;
  document.getElementById('pt-apply-view').style.display=_ptEditMode?'none':'block';
  document.getElementById('pt-edit-view').style.display=_ptEditMode?'block':'none';
  document.getElementById('pt-edit-toggle').textContent=_ptEditMode?'← Zurück':'✏️ Bearbeiten';
  if(_ptEditMode){
    const sel=document.getElementById('pt-edit-select');
    sel.innerHTML=Object.keys(PACK_TEMPLATES).map(n=>`<option value="${n}">${n}</option>`).join('');
    renderTemplateEditor();
  }
}
function renderTemplateEditor(){
  const name=document.getElementById('pt-edit-select').value;
  const tmpl=getEffectiveTemplate(name);
  const editorEl=document.getElementById('pt-editor');
  let html='';
  Object.entries(tmpl).forEach(([cat,items])=>{
    html+=`<div style="margin-bottom:12px;">
      <div style="font-size:11px;font-weight:700;text-transform:uppercase;color:var(--text-muted);margin-bottom:4px;">${cat}</div>
      <div>${items.map(item=>`
        <div style="display:flex;align-items:center;gap:6px;padding:3px 0;border-bottom:1px solid var(--border);">
          <span style="flex:1;font-size:13px;">${item}</span>
          <button onclick="removeTplItem('${name}','${cat}','${item.replace(/'/g,"\\'")}')" style="border:none;background:none;cursor:pointer;color:var(--text-muted);font-size:13px;">✕</button>
        </div>`).join('')}</div>
      <div style="display:flex;gap:4px;margin-top:6px;">
        <input id="pt-add-${cat.replace(/\s/g,'_')}" type="text" placeholder="Item hinzufügen…" style="flex:1;padding:5px 8px;border:1px solid var(--border);border-radius:var(--radius-sm);font-size:12px;font-family:var(--font-body);background:var(--surface);"
          onkeydown="if(event.key==='Enter')addTplItem('${name}','${cat}',this.id)">
        <button onclick="addTplItem('${name}','${cat}','pt-add-${cat.replace(/\s/g,'_')}')" style="padding:5px 10px;background:var(--accent);color:white;border:none;border-radius:var(--radius-sm);font-size:12px;cursor:pointer;">+</button>
      </div>
    </div>`;
  });
  editorEl.innerHTML=html;
}
function removeTplItem(tplName,cat,item){
  if(!S.packTemplateOverrides)S.packTemplateOverrides={};
  if(!S.packTemplateOverrides[tplName])S.packTemplateOverrides[tplName]={};
  if(!S.packTemplateOverrides[tplName][cat])S.packTemplateOverrides[tplName][cat]={removed:[],added:[]};
  const ovr=S.packTemplateOverrides[tplName][cat];
  // if it's an added item, just remove from added list
  ovr.added=ovr.added.filter(i=>i!==item);
  // if it's a base item, mark as removed
  if((PACK_TEMPLATES[tplName]?.[cat]||[]).includes(item)&&!ovr.removed.includes(item))ovr.removed.push(item);
  save();renderTemplateEditor();
}
function addTplItem(tplName,cat,inputId){
  const input=document.getElementById(inputId);
  const val=input?.value.trim();if(!val)return;
  if(!S.packTemplateOverrides)S.packTemplateOverrides={};
  if(!S.packTemplateOverrides[tplName])S.packTemplateOverrides[tplName]={};
  if(!S.packTemplateOverrides[tplName][cat])S.packTemplateOverrides[tplName][cat]={removed:[],added:[]};
  S.packTemplateOverrides[tplName][cat].added.push(val);
  save();input.value='';renderTemplateEditor();
}
function openPackTemplates(){
  _ptEditMode=false;
  document.getElementById('pt-apply-view').style.display='block';
  document.getElementById('pt-edit-view').style.display='none';
  document.getElementById('pt-edit-toggle').textContent='✏️ Bearbeiten';
  const grid=document.getElementById('template-grid');
  grid.innerHTML=Object.keys(PACK_TEMPLATES).map(name=>{
    const tmpl=getEffectiveTemplate(name);
    const count=Object.values(tmpl).flat().length;
    return`<div onclick="applyTemplate('${name}')" style="border:1px solid var(--border);border-radius:var(--radius-sm);padding:14px;cursor:pointer;transition:all .15s;text-align:center;" onmouseover="this.style.background='var(--accent-light)';this.style.borderColor='var(--accent)'" onmouseout="this.style.background='';this.style.borderColor='var(--border)'">
      <div style="font-size:26px;margin-bottom:4px;">${name.split(' ').pop()}</div>
      <div style="font-size:13px;font-weight:500;">${name.split(' ').slice(0,-1).join(' ')}</div>
      <div style="font-size:11px;color:var(--text-muted);margin-top:2px;">${count} Items</div>
    </div>`;}).join('');
  openModal('modal-pack-templates');
}

function applyTemplate(name){
  const tid=ctid();if(!tid)return;
  const template=getEffectiveTemplate(name);
  let added=0;
  Object.entries(template).forEach(([catName,items])=>{
    // find or create category
    let cat=S.packCats.find(c=>c.tripId===tid&&c.name===catName);
    if(!cat){cat={id:uid(),tripId:tid,name:catName};S.packCats.push(cat);}
    items.forEach(itemName=>{
      if(!S.packItems.find(i=>i.catId===cat.id&&i.name===itemName)){
        S.packItems.push({id:uid(),tripId:tid,catId:cat.id,name:itemName,checked:false});
        added++;
      }
    });
  });
  save();closeModal('modal-pack-templates');renderPacking();
  if(added>0)alert(`✅ ${added} Items hinzugefügt!`);
}

// ── GOOGLE MAPS LINKS (auto from coordinates) ─────────────────────────────────
function gmapsLink(lat,lng,name){
  return `https://www.google.com/maps/search/?api=1&query=${lat},${lng}&query_place_id=${encodeURIComponent(name||'')}`;
}

// ── INSTAGRAM IMPORT ─────────────────────────────────────────────────────────
async function importInstagram(){
  const url=document.getElementById('bl-insta-url').value.trim();
  if(!url)return;
  const btn=document.getElementById('bl-insta-btn');
  const status=document.getElementById('bl-insta-status');
  btn.textContent='⏳';btn.disabled=true;
  status.textContent='Lade Metadaten…';status.style.color='var(--text-muted)';

  // Parse og: meta tags from raw HTML string
  function parseOgMeta(html){
    const get=(prop)=>{
      const re1=new RegExp('<meta[^>]+property=["\\\']og:'+prop+'["\\\'][^>]+content=["\\\']([^"\\\']+)["\\\']','i');
      const re2=new RegExp('<meta[^>]+content=["\\\']([^"\\\']+)["\\\'][^>]+property=["\\\']og:'+prop+'["\\\']','i');
      const m=html.match(re1)||html.match(re2);
      return m?m[1].replace(/&amp;/g,'&').replace(/&quot;/g,'"').replace(/&#39;/g,"'").trim():'';
    };
    return{title:get('title'),description:get('description'),image:get('image')};
  }

  // Fill backlog form with extracted data
  function applyInstaData(title,author,description,thumbnailUrl){
    const allText=title+' '+description;
    const tags=(allText.match(/#[\w\u00C0-\u024F]+/g)||[]).map(t=>t.slice(1)).slice(0,6);
    const cleanTitle=title.replace(/#[\w\u00C0-\u024F]+/g,'').trim();
    document.getElementById('bl-dest').value=cleanTitle.slice(0,60);
    const noteLines=[title,author?'📸 '+author+' auf Instagram':'','🔗 '+url].filter(Boolean);
    document.getElementById('bl-notes').value=noteLines.join('\n\n');
    document.getElementById('bl-tags').value=tags.join(', ');
    if(thumbnailUrl){
      document.getElementById('bl-insta-img').src=thumbnailUrl;
      document.getElementById('bl-insta-preview').style.display='block';
    }
    const searchText=(allText+' '+tags.join(' ')).toLowerCase();
    const matched=S.countries.find(co=>searchText.includes(co.name.toLowerCase()));
    if(matched){
      document.getElementById('bl-country').value=matched.id;
      status.textContent='✅ Importiert & Land erkannt: '+(matched.flag||'')+' '+matched.name;
    }else{
      status.textContent='✅ Importiert! Land ggf. manuell auswählen.';
    }
    status.style.color='var(--accent)';
  }

  try{
    let loaded=false;

    // Method 1: Instagram oEmbed (works for some public posts)
    try{
      const res=await fetch('https://api.instagram.com/oembed/?url='+encodeURIComponent(url)+'&maxwidth=400');
      if(res.ok){
        const data=await res.json();
        if(data.title||data.author_name){
          applyInstaData(data.title||'',data.author_name||'','',data.thumbnail_url||'');
          loaded=true;
        }
      }
    }catch(e){}

    // Method 2: CORS proxy → fetch Instagram page → parse Open Graph meta tags
    if(!loaded){
      status.textContent='Lade via Proxy…';
      try{
        const proxyUrl='https://api.allorigins.win/get?url='+encodeURIComponent(url);
        const controller=new AbortController();
        const tid=setTimeout(()=>controller.abort(),10000);
        const res=await fetch(proxyUrl,{signal:controller.signal});
        clearTimeout(tid);
        if(res.ok){
          const data=await res.json();
          const og=parseOgMeta(data.contents||'');
          if(og.title||og.description){
            // og:title format: "Username on Instagram: \'caption...\'"
            let title=og.title,author='';
            const m=og.title.match(/^(.+?)\s+on Instagram:\s*["\'](.*)["\']/i);
            if(m){author=m[1];title=m[2]||og.title;}
            if(!title)title=og.description.slice(0,80);
            applyInstaData(title,author,og.description,og.image);
            loaded=true;
          }
        }
      }catch(e){}
    }

    if(!loaded){
      document.getElementById('bl-notes').value='📸 Instagram: '+url;
      status.textContent='⚠️ Post nicht auslesbar (Privatprofil?). URL als Notiz gespeichert.';
      status.style.color='var(--accent2)';
    }
  }catch(e){
    document.getElementById('bl-notes').value='📸 Instagram: '+url;
    status.textContent='⚠️ Fehler beim Import. URL als Notiz gespeichert.';
    status.style.color='var(--accent2)';
  }finally{
    btn.textContent='📥 Laden';btn.disabled=false;
  }
}

// ── TRIP SHARING ──────────────────────────────────────────────────────────────
let _shareCurrentTripId = null;
const SHARE_TABLE = 'trip_shares';

function _buildShareSnapshot(tripId){
  const trip = S.trips.find(t=>t.id===tripId);
  if(!trip) return null;
  const dests = (S.dests||[]).filter(d=>d.tripId===tripId).map(d=>({
    name:d.name, notes:d.notes, lat:d.lat, lng:d.lng, photo:d.photo||null
  }));
  const routes = (S.routes||[]).filter(r=>r.tripId===tripId).map(r=>({
    from:r.from, to:r.to, transport:r.transport, duration:r.duration,
    distance:r.distance, notes:r.notes, date:r.date
  }));
  const dayplans = (S.dayplans||[]).filter(d=>d.tripId===tripId).map(d=>({
    day:d.day, date:d.date, title:d.title, notes:d.notes
  }));
  const accoms = (S.accoms||[]).filter(a=>a.tripId===tripId).map(a=>({
    name:a.name, location:a.location, type:a.type,
    checkin:a.checkin, checkout:a.checkout
    // deliberately omit: price, confirmation, link, status
  }));
  return {
    trip:{
      name:trip.name, destination:trip.destination, start:trip.start, end:trip.end,
      description:trip.description||'', persons:trip.persons||0
    },
    dests, routes, dayplans, accoms,
    generatedAt: new Date().toISOString()
  };
}

function _genUUID(){
  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g,c=>{
    const r=Math.random()*16|0;return(c==='x'?r:(r&0x3|0x8)).toString(16);
  });
}

async function openShareModal(tripId){
  _shareCurrentTripId = tripId;
  const statusEl = document.getElementById('share-status');
  const linkRow = document.getElementById('share-link-row');
  const linkInput = document.getElementById('share-link-input');
  const regenBtn = document.getElementById('share-regen-btn');
  const infoEl = document.getElementById('share-info');
  // Reset UI
  statusEl.textContent = 'Erstelle Link…';
  statusEl.style.color = 'var(--text-muted)';
  linkRow.style.display = 'none';
  regenBtn.style.display = 'none';
  infoEl.style.display = 'none';
  openModal('modal-share');
  await _doShareTrip(tripId, linkInput, linkRow, regenBtn, infoEl, statusEl);
}

async function regenShareLink(){
  const tripId = _shareCurrentTripId;
  if(!tripId) return;
  const statusEl = document.getElementById('share-status');
  const linkRow = document.getElementById('share-link-row');
  const linkInput = document.getElementById('share-link-input');
  const regenBtn = document.getElementById('share-regen-btn');
  const infoEl = document.getElementById('share-info');
  statusEl.textContent = 'Generiere neuen Link…';
  statusEl.style.color = 'var(--text-muted)';
  linkRow.style.display = 'none';
  regenBtn.style.display = 'none';
  await _doShareTrip(tripId, linkInput, linkRow, regenBtn, infoEl, statusEl, true);
}

async function _doShareTrip(tripId, linkInput, linkRow, regenBtn, infoEl, statusEl, forceNew){
  const snapshot = _buildShareSnapshot(tripId);
  if(!snapshot){ statusEl.textContent='❌ Reise nicht gefunden.'; return; }
  try{
    const shareId = _genUUID();
    const {error} = await supa.from(SHARE_TABLE).insert({id:shareId, data:snapshot});
    if(error){
      if(error.code==='42P01'||error.message?.includes('does not exist')){
        statusEl.innerHTML='❌ Tabelle fehlt. Bitte in Supabase ausführen:<br><code style="font-size:11px;background:var(--surface2);padding:4px 8px;border-radius:4px;display:block;margin-top:6px;user-select:all">'+
          'CREATE TABLE trip_shares (id TEXT PRIMARY KEY, data JSONB NOT NULL, created_at TIMESTAMPTZ DEFAULT NOW());<br>'+
          'ALTER TABLE trip_shares ENABLE ROW LEVEL SECURITY;<br>'+
          'CREATE POLICY "pub_read" ON trip_shares FOR SELECT USING (true);<br>'+
          'CREATE POLICY "pub_insert" ON trip_shares FOR INSERT WITH CHECK (true);'+
          '</code>';
        statusEl.style.color='var(--danger)';
      } else {
        throw error;
      }
      return;
    }
    const base = window.location.origin + window.location.pathname;
    const shareUrl = base + '?share=' + shareId;
    linkInput.value = shareUrl;
    linkRow.style.display = 'flex';
    regenBtn.style.display = '';
    infoEl.style.display = '';
    statusEl.textContent = '✅ Link erstellt!';
    statusEl.style.color = 'var(--accent)';
  }catch(e){
    statusEl.textContent = '❌ Fehler: ' + (e.message||'Unbekannter Fehler');
    statusEl.style.color = 'var(--danger)';
  }
}

async function copyShareLink(){
  const input = document.getElementById('share-link-input');
  const btn = document.getElementById('share-copy-btn');
  try{
    await navigator.clipboard.writeText(input.value);
    btn.textContent = '✅ Kopiert!';
    setTimeout(()=>btn.textContent='📋 Kopieren', 2000);
  }catch(e){
    input.select();
    document.execCommand('copy');
    btn.textContent = '✅ Kopiert!';
    setTimeout(()=>btn.textContent='📋 Kopieren', 2000);
  }
}

// ── SHARE READ-ONLY VIEW ──────────────────────────────────────────────────────
async function checkShareParam(){
  const params = new URLSearchParams(window.location.search);
  const shareId = params.get('share');
  if(!shareId) return false;
  // Hide main app, show share view
  document.getElementById('app-header').style.display='none';
  document.getElementById('top-nav').style.display='none';
  document.getElementById('trip-ctx-bar').style.display='none';
  document.getElementById('sub-nav').style.display='none';
  document.getElementById('app-body').style.display='none';
  const sv = document.getElementById('share-view');
  sv.classList.add('active');
  sv.innerHTML = '<div style="padding:60px;text-align:center;color:var(--text-muted);">⏳ Lade geteilte Reise…</div>';
  try{
    const {data, error} = await supa.from(SHARE_TABLE).select('data').eq('id', shareId).single();
    if(error||!data) throw new Error('Nicht gefunden');
    _renderShareView(data.data, sv);
  }catch(e){
    sv.innerHTML = '<div style="padding:60px;text-align:center;"><div style="font-size:48px;margin-bottom:16px;">😕</div><div style="font-size:18px;color:var(--text-muted);">Dieser Link ist nicht mehr gültig oder wurde entfernt.</div></div>';
  }
  return true;
}

function _renderShareView(snap, container){
  const tr = snap.trip||{};
  const dests = snap.dests||[];
  const routes = snap.routes||[];
  const dayplans = snap.dayplans||[];
  const accoms = snap.accoms||[];

  const fmtDate = iso=>{
    if(!iso) return '';
    const [y,m,d] = iso.split('-');
    return `${d}.${m}.${y}`;
  };
  const transportIcon = t=>({plane:'✈️',bus:'🚌',train:'🚂',car:'🚗',bike:'🚲',walk:'🚶',boat:'⛵',other:'🔀'}[t]||'🔀');

  let html = `
    <div class="sv-header">
      <div class="sv-trip-name">${_esc(tr.name||'Reise')}</div>
      <div class="sv-meta">
        ${tr.destination?`<span>📍 ${_esc(tr.destination)}</span>`:''}
        ${tr.start?`<span>📅 ${fmtDate(tr.start)}${tr.end?' – '+fmtDate(tr.end):''}</span>`:''}
        ${tr.persons>0?`<span>👥 ${tr.persons} ${tr.persons===1?'Person':'Personen'}</span>`:''}
        ${dests.length?`<span>📍 ${dests.length} Ziele</span>`:''}
      </div>
      ${tr.description?`<div style="margin-top:12px;font-size:15px;opacity:.9;">${_esc(tr.description)}</div>`:''}
    </div>
    <div class="sv-body">`;

  // Destinations
  if(dests.length){
    html += `<div class="sv-section"><div class="sv-section-title">📍 Ziele</div>`;
    dests.forEach(d=>{
      html += `<div class="sv-card">
        ${d.photo?`<img class="sv-dest-img" src="${_esc(d.photo)}" alt="">`:'' }
        <div class="sv-card-title">${_esc(d.name||'')}</div>
        ${d.notes?`<div class="sv-card-sub" style="margin-top:6px;white-space:pre-wrap;">${_esc(d.notes)}</div>`:''}
      </div>`;
    });
    html += `</div>`;
  }

  // Route
  if(routes.length){
    html += `<div class="sv-section"><div class="sv-section-title">🗺️ Route</div>`;
    routes.forEach(r=>{
      html += `<div class="sv-card">
        <div class="sv-card-title">${transportIcon(r.transport)} ${_esc(r.from||'')} → ${_esc(r.to||'')}</div>
        <div class="sv-card-sub">
          ${r.date?fmtDate(r.date)+' &nbsp;':''} 
          ${r.duration?r.duration+' &nbsp;':''}
          ${r.distance?r.distance:''}
        </div>
        ${r.notes?`<div class="sv-card-sub" style="margin-top:6px;">${_esc(r.notes)}</div>`:''}
      </div>`;
    });
    html += `</div>`;
  }

  // Day plans
  if(dayplans.length){
    const sorted = [...dayplans].sort((a,b)=>{
      if(a.date&&b.date) return a.date.localeCompare(b.date);
      return (a.day||0)-(b.day||0);
    });
    html += `<div class="sv-section"><div class="sv-section-title">📅 Tagesplanung</div>`;
    sorted.forEach(dp=>{
      const label = dp.date ? `Tag ${dp.day||''}  ·  ${fmtDate(dp.date)}` : `Tag ${dp.day||''}`;
      html += `<div class="sv-day">
        <div class="sv-day-header">${_esc(label)}${dp.title?' – '+_esc(dp.title):''}</div>
        ${dp.notes?`<div class="sv-day-body">${_esc(dp.notes)}</div>`:'<div class="sv-day-body" style="color:var(--text-muted);font-style:italic;">Keine Notizen</div>'}
      </div>`;
    });
    html += `</div>`;
  }

  // Accommodations (name + location only)
  if(accoms.length){
    const accomTypeIcon = t=>({hotel:'🏨',hostel:'🛏️',airbnb:'🏠',camping:'⛺',other:'🏡'}[t]||'🏨');
    html += `<div class="sv-section"><div class="sv-section-title">🏨 Unterkünfte</div>`;
    accoms.forEach(a=>{
      html += `<div class="sv-accom">
        <span style="font-size:22px;">${accomTypeIcon(a.type)}</span>
        <div>
          <div style="font-weight:600;font-size:14px;">${_esc(a.name||'')}</div>
          <div style="font-size:13px;color:var(--text-muted);">
            ${a.location?'📍 '+_esc(a.location)+'  ':''}
            ${a.checkin?'📅 '+fmtDate(a.checkin)+(a.checkout?' – '+fmtDate(a.checkout):''):''}
          </div>
        </div>
      </div>`;
    });
    html += `</div>`;
  }

  const genDate = snap.generatedAt ? new Date(snap.generatedAt).toLocaleDateString('de-DE') : '';
  html += `<div class="sv-powered">Erstellt mit <a href="${window.location.origin+window.location.pathname}" target="_blank">Travel Planer</a>${genDate?' · '+genDate:''}</div>`;
  html += `</div>`;
  container.innerHTML = html;
}

function _esc(s){ return String(s||'').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;'); }

// ── DAYPLAN CALENDAR ──────────────────────────────────────────────────────────
let _dpView='both';
function setDpView(v){_dpView=v;}
function renderDayplanCalendar(){
  const calEl=document.getElementById('dp-calendar');if(!calEl)return;
  const tid=ctid();
  const trip=S.trips.find(t=>t.id===tid);
  const rawPlans=(S.dayplans||[]).filter(d=>d.tripId===tid);
  const routes=S.routes.filter(r=>r.tripId===tid);
  const dests=S.dests.filter(d=>d.tripId===tid);
  // Normalize any date string to ISO YYYY-MM-DD
  function toISO(str){
    if(!str)return '';
    if(/^\d{4}-\d{2}-\d{2}$/.test(str))return str; // already ISO
    const m=str.match(/^(\d{1,2})\.(\d{1,2})\.(\d{4})$/);
    if(m)return`${m[3]}-${m[2].padStart(2,'0')}-${m[1].padStart(2,'0')}`;
    return '';
  }
  // Resolve dates: use dp.date or compute from trip.start + day offset
  const plans=rawPlans.map(dp=>{
    const iso=toISO(dp.date);
    if(iso)return{...dp,date:iso};
    if(trip?.start){
      const base=new Date(trip.start+'T12:00:00');
      const d=new Date(base);d.setDate(d.getDate()+(dp.day-1));
      return{...dp,date:`${d.getFullYear()}-${String(d.getMonth()+1).padStart(2,'0')}-${String(d.getDate()).padStart(2,'0')}`};
    }
    return dp;
  }).filter(dp=>dp.date).sort((a,b)=>a.date.localeCompare(b.date));
  if(!plans.length){calEl.innerHTML='';return;}
  // Assign a stable color per routeId (same route always same color)
  const SEG_COLORS=['#3a7bd5','#27ae60','#9b59b6','#16a085','#e74c3c','#f39c12','#2471a3','#1e8449','#8e44ad','#c0392b'];
  const NO_ROUTE_COLOR='#b0a898';
  const routeColorMap={};let ci=0;
  routes.forEach(r=>{routeColorMap[r.id]=SEG_COLORS[ci++%SEG_COLORS.length];});
  // Build segments: consecutive runs with same routeId
  const segments=[];let cur=null;
  plans.forEach(dp=>{
    if(!cur||cur.routeId!==dp.routeId){
      const r=dp.routeId?routes.find(x=>x.id===dp.routeId):null;
      const color=dp.routeId?(routeColorMap[dp.routeId]||SEG_COLORS[0]):NO_ROUTE_COLOR;
      const label=r?('📍 '+routeTitle(r,dests)):'📅 Kein Ort';
      cur={routeId:dp.routeId,color,label,dates:[]};
      segments.push(cur);
    }
    cur.dates.push(dp.date);
  });
  // dateMap — also store dpId for click-to-popup
  const dateMap={};
  segments.forEach(seg=>seg.dates.forEach(date=>{
    const dp=plans.find(p=>p.date===date);
    dateMap[date]={color:seg.color,label:seg.label,dpId:dp?.id};
  }));
  const _t=new Date();const today=`${_t.getFullYear()}-${String(_t.getMonth()+1).padStart(2,'0')}-${String(_t.getDate()).padStart(2,'0')}`;
  const allDates=Object.keys(dateMap).sort();
  const startDate=new Date(allDates[0]),endDate=new Date(allDates[allDates.length-1]);
  const MN=['Januar','Februar','März','April','Mai','Juni','Juli','August','September','Oktober','November','Dezember'];
  const DN=['Mo','Di','Mi','Do','Fr','Sa','So'];
  let html='';
  // render months
  let d=new Date(startDate.getFullYear(),startDate.getMonth(),1);
  while(d<=endDate){
    const yr=d.getFullYear(),mo=d.getMonth();
    const firstCol=((new Date(yr,mo,1).getDay()+6)%7);
    const daysInMonth=new Date(yr,mo+1,0).getDate();
    let cells=DN.map(n=>`<div class="dp-cal-dn">${n}</div>`).join('');
    for(let i=0;i<firstCol;i++)cells+=`<div class="dp-cal-cell"></div>`;
    for(let day=1;day<=daysInMonth;day++){
      const ds=`${yr}-${String(mo+1).padStart(2,'0')}-${String(day).padStart(2,'0')}`;
      const col=(firstCol+day-1)%7;
      const info=dateMap[ds];
      if(info){
        const _pd=new Date(yr,mo,day-1),_nd=new Date(yr,mo,day+1);
        const prevDs=`${_pd.getFullYear()}-${String(_pd.getMonth()+1).padStart(2,'0')}-${String(_pd.getDate()).padStart(2,'0')}`;
        const nextDs=`${_nd.getFullYear()}-${String(_nd.getMonth()+1).padStart(2,'0')}-${String(_nd.getDate()).padStart(2,'0')}`;
        const prevSame=col>0&&dateMap[prevDs]?.color===info.color;
        const nextSame=col<6&&dateMap[nextDs]?.color===info.color;
        const pc=(!prevSame&&!nextSame)?'pn':(!prevSame&&nextSame)?'ps':(prevSame&&!nextSame)?'pe':'pm';
        const isToday=ds===today;
        const br=pc==='pn'?'border-radius:999px;margin:0 3px;':pc==='ps'?'border-radius:999px 0 0 999px;margin-left:3px;':pc==='pe'?'border-radius:0 999px 999px 0;margin-right:3px;':'';
        cells+=`<div class="dp-cal-cell" tabindex="-1" onclick="openDpPopup('${info.dpId||''}','${ds}')" title="${info.label}" style="cursor:pointer;background:${info.color};${br}">
          <span style="font-size:11px;font-weight:${isToday?'800':'600'};color:white;">${day}</span>
        </div>`;
      } else {
        const isToday=ds===today;
        cells+=`<div class="dp-cal-cell"><span style="font-size:11px;${isToday?'font-weight:700;color:var(--accent);':'color:var(--text-muted);'}">${day}</span></div>`;
      }
    }
    html+=`<div class="dp-cal-wrap"><div class="dp-cal-month-title">${MN[mo]} ${yr}</div><div class="dp-cal-grid">${cells}</div></div>`;
    d.setMonth(d.getMonth()+1);
  }
  // legend — deduplicate by routeId
  const seen=new Set();
  const legendItems=segments.filter(s=>{const k=s.routeId||'__none__';if(seen.has(k))return false;seen.add(k);return true;});
  const legend=legendItems.map(s=>`<div class="dp-cal-legend-item"><div class="dp-cal-legend-dot" style="background:${s.color};"></div><span>${s.label}</span></div>`).join('');
  calEl.innerHTML=html+(legend?`<div class="dp-cal-legend">${legend}</div>`:'');
}

// ── TODO ──────────────────────────────────────────────────────────────────────
function openTodoForm(){document.getElementById('todo-add-form').style.display='block';document.getElementById('todo-input').focus();}
function closeTodoForm(){document.getElementById('todo-add-form').style.display='none';document.getElementById('todo-input').value='';if(fpTodo)fpTodo.clear();}
function saveTodo(){
  const tid=ctid();if(!tid)return;
  const text=document.getElementById('todo-input').value.trim();if(!text)return;
  const date=fpISO(fpTodo)||'';
  if(!Array.isArray(S.todos))S.todos=[];
  S.todos.push({id:uid(),tripId:tid,text,date,done:false});
  save();closeTodoForm();renderTodos();
}
function toggleTodo(id){
  const t=(S.todos||[]).find(x=>x.id===id);if(!t)return;
  t.done=!t.done;save();renderTodos();
}
function delTodo(id){
  S.todos=(S.todos||[]).filter(x=>x.id!==id);save();renderTodos();
}
function renderTodos(){
  const tid=ctid();
  const list=document.getElementById('todo-list');if(!list)return;
  const todos=(S.todos||[]).filter(t=>t.tripId===tid);
  if(!todos.length){list.innerHTML=`<div style="text-align:center;padding:32px;color:var(--text-muted);font-size:14px;">Keine Todos vorhanden.</div>`;return;}
  const fmtDate=iso=>{if(!iso)return'';const[y,m,d]=iso.split('-');return`${d}.${m}.${y}`;};
  const sortByDate=(a,b)=>{if(!a.date&&!b.date)return 0;if(!a.date)return 1;if(!b.date)return-1;return a.date.localeCompare(b.date);};
  const open=todos.filter(t=>!t.done).sort(sortByDate),done=todos.filter(t=>t.done);
  const today=new Date();const todayStr=`${today.getFullYear()}-${String(today.getMonth()+1).padStart(2,'0')}-${String(today.getDate()).padStart(2,'0')}`;
  const row=t=>{
    const overdue=t.date&&!t.done&&t.date<todayStr;
    const dateBadge=t.date?`<span style="font-size:11px;padding:2px 8px;background:${overdue?'var(--danger-light)':'var(--surface2)'};color:${overdue?'var(--danger)':'var(--text-muted)'};border-radius:10px;white-space:nowrap;flex-shrink:0;">📅 ${fmtDate(t.date)}</span>`:'';
    return `<div style="display:flex;align-items:center;gap:10px;padding:11px 14px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);margin-bottom:6px;${t.done?'opacity:.55':''}">
      <input type="checkbox" ${t.done?'checked':''} onchange="toggleTodo('${t.id}')" style="width:16px;height:16px;flex-shrink:0;cursor:pointer;">
      <span style="flex:1;font-size:14px;${t.done?'text-decoration:line-through;color:var(--text-muted)':''}">${t.text}</span>
      ${dateBadge}
      <button onclick="delTodo('${t.id}')" style="border:none;background:none;cursor:pointer;color:var(--text-muted);font-size:16px;line-height:1;padding:0 2px;">🗑️</button>
    </div>`;
  };
  list.innerHTML=open.map(row).join('')+(done.length?`<div style="font-size:11px;font-weight:600;text-transform:uppercase;color:var(--text-muted);letter-spacing:.07em;margin:16px 0 8px;">Erledigt</div>`+done.map(row).join(''):'');
}

// ── DOKUMENTE ─────────────────────────────────────────────────────────────────
const DOC_ICONS={Reisepass:'🛂',Personalausweis:'🪪',Führerschein:'🚗',Kreditkarte:'💳',Krankenversicherung:'🏥',Impfpass:'💉',Sonstiges:'📄'};
function renderDocs(){
  const list=document.getElementById('doc-list');if(!list)return;
  const docs=S.docs||[];
  if(!docs.length){list.innerHTML=`<div style="text-align:center;padding:20px;color:var(--text-muted);font-size:14px;">Noch keine Dokumente hinterlegt.</div>`;return;}
  const today=new Date();
  list.innerHTML=docs.map(d=>{
    const exp=d.expiry?new Date(d.expiry):null;
    const expired=exp&&exp<today;
    const soon=exp&&!expired&&(exp-today)<90*24*3600*1000;
    const expLabel=d.expiry?`Gültig bis ${d.expiry.split('-').reverse().join('.')}`:'';
    const expStyle=expired?'color:var(--danger);font-weight:600;':soon?'color:var(--accent2);font-weight:600;':'';
    return`<div class="doc-card">
      <div class="doc-icon">${DOC_ICONS[d.type]||'📄'}</div>
      <div class="doc-body">
        <div class="doc-type">${d.type}</div>
        <div class="doc-holder">${d.holder||'—'}</div>
        ${d.number?`<div class="doc-num">${d.number}</div>`:''}
        <div class="doc-meta">
          ${expLabel?`<span style="${expStyle}">${expired?'⚠️ Abgelaufen — ':soon?'⏳ Bald ablaufend — ':''}${expLabel}</span>`:''}
          ${d.notes?`<span>${d.notes}</span>`:''}
        </div>
      </div>
      <div style="display:flex;flex-direction:column;gap:4px;flex-shrink:0;">
        <button class="btn-icon" onclick="editDoc('${d.id}')">✏️</button>
        <button class="btn-icon" onclick="delDoc('${d.id}')">🗑️</button>
      </div>
    </div>`;
  }).join('');
}
function saveDoc(){
  const eid=document.getElementById('doc-edit-id').value;
  const obj={type:document.getElementById('doc-type').value,holder:document.getElementById('doc-holder').value.trim(),number:document.getElementById('doc-number').value.trim(),expiry:document.getElementById('doc-expiry').value,notes:document.getElementById('doc-notes').value.trim()};
  if(!S.docs)S.docs=[];
  if(eid){const d=S.docs.find(x=>x.id===eid);if(d)Object.assign(d,obj);}
  else S.docs.push({id:uid(),...obj});
  save();resetDocForm();renderDocs();
}
function editDoc(id){
  const d=(S.docs||[]).find(x=>x.id===id);if(!d)return;
  document.getElementById('doc-edit-id').value=id;
  document.getElementById('doc-type').value=d.type;
  document.getElementById('doc-holder').value=d.holder||'';
  document.getElementById('doc-number').value=d.number||'';
  document.getElementById('doc-expiry').value=d.expiry||'';
  document.getElementById('doc-notes').value=d.notes||'';
}
function delDoc(id){if(!confirm('Dokument löschen?'))return;S.docs=(S.docs||[]).filter(d=>d.id!==id);save();renderDocs();}
function resetDocForm(){
  ['doc-edit-id','doc-holder','doc-number','doc-expiry','doc-notes'].forEach(id=>{const el=document.getElementById(id);if(el)el.value='';});
  const t=document.getElementById('doc-type');if(t)t.value='Reisepass';
}

// Stay activities
function addStayAct(stayId){
  const stay=(S.stays||[]).find(s=>s.id===stayId);if(!stay)return;
  if(!stay.activities)stay.activities=[];
  const nameEl=document.getElementById('stay-act-name-'+stayId);
  const prioEl=document.getElementById('stay-act-prio-'+stayId);
  const name=nameEl?.value.trim();if(!name)return;
  stay.activities.push({id:uid(),name,prio:prioEl?.value||'spontan',done:false});
  save();renderDayplan();
}
function toggleStayAct(stayId,actId){
  const stay=(S.stays||[]).find(s=>s.id===stayId);if(!stay)return;
  const act=(stay.activities||[]).find(a=>a.id===actId);if(!act)return;
  act.done=!act.done;save();renderDayplan();
}
function delStayAct(stayId,actId){
  const stay=(S.stays||[]).find(s=>s.id===stayId);if(!stay)return;
  stay.activities=(stay.activities||[]).filter(a=>a.id!==actId);
  save();renderDayplan();
}
function delStay(stayId){
  if(!confirm('Aufenthalt und alle zugehörigen Tage löschen?'))return;
  S.stays=(S.stays||[]).filter(s=>s.id!==stayId);
  S.dayplans=(S.dayplans||[]).filter(d=>d.stayId!==stayId);
  save();renderDayplan();
}
let _dragAct=null;
function dragDpAct(e,dpId,actId){
  const dp=(S.dayplans||[]).find(d=>d.id===dpId);
  const act=(dp?.activities||[]).find(a=>a.id===actId);
  if(!act)return;
  _dragAct={srcType:'day',srcId:dpId,actId,act};
  e.dataTransfer.setData('text/plain',actId);
  e.dataTransfer.effectAllowed='move';
}
function dragStayAct(e,stayId,actId){
  const stay=(S.stays||[]).find(s=>s.id===stayId);
  const act=(stay?.activities||[]).find(a=>a.id===actId);
  if(!act)return;
  _dragAct={srcType:'stay',srcId:stayId,actId,act};
  e.dataTransfer.setData('text/plain',actId);
  e.dataTransfer.effectAllowed='move';
}
function dropDpAct(e,tgtDpId){
  e.preventDefault();
  if(!_dragAct)return;
  if(_dragAct.srcType==='day'&&_dragAct.srcId===tgtDpId){_dragAct=null;return;}
  if(_dragAct.srcType==='day'){
    const src=(S.dayplans||[]).find(d=>d.id===_dragAct.srcId);
    if(src)src.activities=(src.activities||[]).filter(a=>a.id!==_dragAct.actId);
  } else {
    const src=(S.stays||[]).find(s=>s.id===_dragAct.srcId);
    if(src)src.activities=(src.activities||[]).filter(a=>a.id!==_dragAct.actId);
  }
  const tgt=(S.dayplans||[]).find(d=>d.id===tgtDpId);
  if(tgt){if(!tgt.activities)tgt.activities=[];tgt.activities.push({..._dragAct.act});}
  _dragAct=null;save();renderDayplan();
}
function dropToStay(e,tgtStayId){
  e.preventDefault();
  if(!_dragAct)return;
  if(_dragAct.srcType==='stay'&&_dragAct.srcId===tgtStayId){_dragAct=null;return;}
  if(_dragAct.srcType==='day'){
    const src=(S.dayplans||[]).find(d=>d.id===_dragAct.srcId);
    if(src)src.activities=(src.activities||[]).filter(a=>a.id!==_dragAct.actId);
  } else {
    const src=(S.stays||[]).find(s=>s.id===_dragAct.srcId);
    if(src)src.activities=(src.activities||[]).filter(a=>a.id!==_dragAct.actId);
  }
  const tgt=(S.stays||[]).find(s=>s.id===tgtStayId);
  if(tgt){if(!tgt.activities)tgt.activities=[];tgt.activities.push({..._dragAct.act});}
  _dragAct=null;save();renderDayplan();
}
// ── INIT ──────────────────────────────────────────────────────────────────────
function renderAll(){renderTrips();renderDests();renderRoute();renderDayplan();renderBudget();renderPacking();renderAccom();renderTransport();renderBacklog();renderSidebar();}
load();renderAll();
document.addEventListener('DOMContentLoaded',async()=>{
  const isShare = await checkShareParam();
  if(!isShare){
    initDatepickers();
    showTopSection(localStorage.getItem('wl_active_section')||'dashboard');
  }
});
// ── TAGESPLANUNG ──────────────────────────────────────────────────────────────
function addDpAct(dpId){
  const dp=(S.dayplans||[]).find(d=>d.id===dpId);if(!dp)return;
  if(!dp.activities)dp.activities=[];
  const nameEl=document.getElementById('dpact-name-'+dpId);
  const prioEl=document.getElementById('dpact-prio-'+dpId);
  const name=nameEl?.value.trim();if(!name)return;
  dp.activities.push({id:uid(),name,prio:prioEl?.value||'spontan',done:false});
  save();nameEl.value='';renderDayplan();
}
function toggleDpAct(dpId,actId){
  const dp=(S.dayplans||[]).find(d=>d.id===dpId);if(!dp)return;
  const act=dp.activities?.find(a=>a.id===actId);if(!act)return;
  act.done=!act.done;save();renderDayplan();
}
function delDpAct(dpId,actId){
  const dp=(S.dayplans||[]).find(d=>d.id===dpId);if(!dp)return;
  dp.activities=dp.activities.filter(a=>a.id!==actId);save();renderDayplan();
}
function cycleDpActPrio(dpId,actId){
  const order=['fix','flex','spontan'];
  const dp=(S.dayplans||[]).find(d=>d.id===dpId);if(!dp)return;
  const act=dp.activities?.find(a=>a.id===actId);if(!act)return;
  act.prio=order[(order.indexOf(act.prio)+1)%3];
  save();renderDayplan();
}
function renderDayplan(){
  const tid=ctid();
  const list=document.getElementById('dayplan-list');
  if(!list)return;
  const allPlans=(S.dayplans||[]).filter(d=>d.tripId===tid).sort((a,b)=>a.day-b.day);
  const stays=(S.stays||[]).filter(s=>s.tripId===tid);
  const routes=S.routes.filter(r=>r.tripId===tid);
  const dests=S.dests.filter(d=>d.tripId===tid);
  if(!allPlans.length&&!stays.length){
    list.innerHTML=`<div style="text-align:center;padding:40px 20px;color:var(--text-muted);">Noch keine Tage geplant.<br><small>Füge Tage hinzu und verknüpfe sie mit einer Route.</small></div>`;
    renderDayplanCalendar();setDpView(_dpView);return;
  }
  const prioMap={fix:{cls:'act-prio-fix',label:'Fix'},flex:{cls:'act-prio-flex',label:'Flexibel'},spontan:{cls:'act-prio-spontan',label:'Spontan'}};
  const prioIcon={fix:'🟢',flex:'🟡',spontan:'⚪'};
  function dayCardHTML(dp,isGrouped){
    const route=dp.routeId?routes.find(r=>r.id===dp.routeId):null;
    const routeLabel=(!isGrouped&&route)?`<div class="dp-route">🚗 ${routeTitle(route,dests)}</div>`:'';
    const acts=dp.activities||[];
    const sortedActs=[...acts].sort((a,b)=>({fix:0,flex:1,spontan:2}[a.prio]||0)-({fix:0,flex:1,spontan:2}[b.prio]||0));
    const actHTML=sortedActs.map(act=>`
      <div class="dp-act-item ${act.done?'done':''}" draggable="true" ondragstart="dragDpAct(event,'${dp.id}','${act.id}')">
        <input class="dp-act-cb" type="checkbox" ${act.done?'checked':''} onchange="toggleDpAct('${dp.id}','${act.id}')">
        <span class="act-prio ${prioMap[act.prio]?.cls||'act-prio-spontan'}" style="cursor:pointer;font-size:11px;" onclick="cycleDpActPrio('${dp.id}','${act.id}')">${prioMap[act.prio]?.label||'Spontan'}</span>
        <span class="dp-act-name">${act.name}</span>
        <button class="btn-icon" style="font-size:11px;padding:2px 5px;" onclick="delDpAct('${dp.id}','${act.id}')">✕</button>
      </div>`).join('');
    const doneCount=acts.filter(a=>a.done).length;
    const actSummary=acts.length?`<span style="font-size:12px;color:var(--text-muted);margin-left:4px;">${doneCount}/${acts.length}</span>`:'';
    return`<div class="dp-card" id="dpc-${dp.id}" ondragover="event.preventDefault()" ondrop="dropDpAct(event,'${dp.id}')">
      <div class="dp-header">
        <div class="dp-day-circle">T${dp.day}</div>
        <div style="flex:1;min-width:0;">
          <div style="font-weight:500;font-size:15px;">Tag ${dp.day}${dp.date?` · <span style="color:var(--text-muted);font-weight:400;">${dp.date.includes('-')?dp.date.split('-').reverse().join('.'):dp.date}</span>`:''}${actSummary}</div>
        </div>
        <button class="btn-icon" onclick="editDayplan('${dp.id}')">✏️</button>
        <button class="btn-icon" onclick="delDayplan('${dp.id}')">🗑️</button>
      </div>
      ${routeLabel}
      ${dp.notes?`<div style="font-size:13px;color:var(--text-muted);margin-top:8px;white-space:pre-wrap;">${dp.notes}</div>`:''}
      ${acts.length?`<div class="dp-acts">${actHTML}</div>`:''}
      <div class="dp-act-add">
        <input type="text" id="dpact-name-${dp.id}" placeholder="Aktivität hinzufügen…" onkeydown="if(event.key==='Enter')addDpAct('${dp.id}')">
        <select id="dpact-prio-${dp.id}">
          <option value="fix">🟢 Fix</option>
          <option value="flex">🟡 Flexibel</option>
          <option value="spontan">⚪ Spontan</option>
        </select>
        <button class="btn btn-primary btn-sm" onclick="addDpAct('${dp.id}')">+ Add</button>
      </div>
    </div>`;
  }
  const SEG_COLORS=['#3a7bd5','#27ae60','#9b59b6','#16a085','#e74c3c','#f39c12','#2471a3','#1e8449'];
  const stayColorMap={};stays.forEach((s,i)=>{stayColorMap[s.id]=SEG_COLORS[i%SEG_COLORS.length];});
  const staysSorted=[...stays].sort((a,b)=>{
    const aMin=Math.min(...allPlans.filter(d=>d.stayId===a.id).map(d=>d.day||999),999);
    const bMin=Math.min(...allPlans.filter(d=>d.stayId===b.id).map(d=>d.day||999),999);
    return aMin-bMin;
  });
  const rendered=new Set();
  let html='';
  staysSorted.forEach(stay=>{
    const days=allPlans.filter(d=>d.stayId===stay.id);
    days.forEach(d=>rendered.add(d.id));
    const route=stay.routeId?routes.find(r=>r.id===stay.routeId):null;
    const title=route?routeTitle(route,dests):'Aufenthalt';
    const color=stayColorMap[stay.id]||'var(--accent)';
    const acts=stay.activities||[];
    const chipsHTML=acts.map(a=>`<div class="stay-act-chip ${a.done?'done':''}" draggable="true" ondragstart="dragStayAct(event,'${stay.id}','${a.id}')">
      ${prioIcon[a.prio]||'⚪'} ${a.name}
      <button onclick="toggleStayAct('${stay.id}','${a.id}')" style="border:none;background:none;cursor:pointer;font-size:11px;" title="Erledigt">✓</button>
      <button onclick="delStayAct('${stay.id}','${a.id}')" style="border:none;background:none;cursor:pointer;color:var(--text-muted);font-size:11px;">✕</button>
    </div>`).join('');
    html+=`<div class="stay-group">
      <div class="stay-header">
        <div class="stay-dot" style="background:${color};"></div>
        <div style="flex:1;">
          <div class="stay-title">${title}</div>
          <div class="stay-meta">${days.length} Tag${days.length!==1?'e':''}</div>
        </div>
        <button class="btn-icon" onclick="editStay('${stay.id}')" title="Aufenthalt bearbeiten">✏️</button>
        <button class="btn-icon" onclick="delStay('${stay.id}')" title="Aufenthalt löschen">🗑️</button>
      </div>
      <div class="stay-acts-wrap" ondragover="event.preventDefault()" ondrop="dropToStay(event,'${stay.id}')">
        <div style="font-size:10px;font-weight:700;text-transform:uppercase;color:var(--text-muted);letter-spacing:.07em;margin-bottom:6px;">Aktivitäten</div>
        <div>${chipsHTML}</div>
        <div style="display:flex;gap:4px;margin-top:6px;">
          <input id="stay-act-name-${stay.id}" type="text" placeholder="Aktivität für diesen Ort…" style="flex:1;padding:5px 8px;border:1px solid var(--border);border-radius:var(--radius-sm);font-size:12px;font-family:var(--font-body);background:var(--surface);color:var(--text);" onkeydown="if(event.key==='Enter')addStayAct('${stay.id}')">
          <select id="stay-act-prio-${stay.id}" style="padding:5px 4px;border:1px solid var(--border);border-radius:var(--radius-sm);font-size:12px;font-family:var(--font-body);background:var(--surface);color:var(--text);">
            <option value="fix">🟢 Fix</option><option value="flex">🟡 Flex</option><option value="spontan" selected>⚪ Spontan</option>
          </select>
          <button onclick="addStayAct('${stay.id}')" style="padding:5px 10px;background:var(--accent);color:white;border:none;border-radius:var(--radius-sm);font-size:12px;cursor:pointer;">+</button>
        </div>
      </div>
      <div class="stay-days-wrap">${days.map(dp=>dayCardHTML(dp,true)).join('')}</div>
    </div>`;
  });
  allPlans.filter(d=>!rendered.has(d.id)).forEach(dp=>{html+=dayCardHTML(dp,false);});
  list.innerHTML=html;
  renderDayplanCalendar();
  setDpView(_dpView);
}
function refreshDpPopupBody(dpId){
  const dp=(S.dayplans||[]).find(d=>d.id===dpId);
  const bodyEl=document.getElementById('dp-popup-body');
  if(!dp||!bodyEl)return;
  const acts=dp.activities||[];
  const prioMap={fix:{icon:'🟢',label:'Fix'},flex:{icon:'🟡',label:'Flex'},spontan:{icon:'⚪',label:'Spontan'}};
  const prioOpts=['fix','flex','spontan'].map(p=>`<option value="${p}">${prioMap[p].icon} ${prioMap[p].label}</option>`).join('');
  const actsHtml=acts.map(a=>`
    <div style="display:flex;align-items:center;gap:6px;padding:4px 0;border-bottom:1px solid var(--border);">
      <input type="checkbox" ${a.done?'checked':''} onchange="toggleDpAct('${dpId}','${a.id}');refreshDpPopupBody('${dpId}')" style="flex-shrink:0;">
      <span style="flex:1;font-size:13px;${a.done?'text-decoration:line-through;opacity:.5;':''}">
        <span style="font-size:11px;">${prioMap[a.prio]?.icon||'⚪'}</span> ${a.name}
      </span>
      <button onclick="delDpAct('${dpId}','${a.id}');refreshDpPopupBody('${dpId}')" style="border:none;background:none;cursor:pointer;color:var(--text-muted);font-size:13px;padding:0 2px;">✕</button>
    </div>`).join('');
  const notesHtml=dp.notes?`<div style="background:var(--surface2);border-radius:var(--radius-sm);padding:6px 8px;margin-bottom:8px;white-space:pre-wrap;color:var(--text-muted);font-size:12px;">${dp.notes}</div>`:'';
  bodyEl.innerHTML=`
    ${notesHtml}
    ${actsHtml?`<div style="margin-bottom:8px;">${actsHtml}</div>`:''}
    <div style="display:flex;gap:4px;margin-top:6px;">
      <input id="dp-pop-act-name-${dpId}" type="text" placeholder="Aktivität…" style="flex:1;padding:5px 8px;border:1px solid var(--border);border-radius:var(--radius-sm);font-size:12px;font-family:var(--font-body);background:var(--surface);color:var(--text);outline:none;"
        onkeydown="if(event.key==='Enter')addDpActPopup('${dpId}')">
      <select id="dp-pop-act-prio-${dpId}" style="padding:5px 4px;border:1px solid var(--border);border-radius:var(--radius-sm);font-size:12px;font-family:var(--font-body);background:var(--surface);color:var(--text);">${prioOpts}</select>
      <button onclick="addDpActPopup('${dpId}')" style="padding:5px 10px;background:var(--accent);color:white;border:none;border-radius:var(--radius-sm);font-size:12px;cursor:pointer;">+</button>
    </div>`;
}
function addDpActPopup(dpId){
  const dp=(S.dayplans||[]).find(d=>d.id===dpId);if(!dp)return;
  if(!dp.activities)dp.activities=[];
  const nameEl=document.getElementById('dp-pop-act-name-'+dpId);
  const prioEl=document.getElementById('dp-pop-act-prio-'+dpId);
  const name=nameEl?.value.trim();if(!name)return;
  dp.activities.push({id:uid(),name,prio:prioEl?.value||'spontan',done:false});
  save();
  nameEl.value='';
  refreshDpPopupBody(dpId);
  nameEl.focus();
}
function openDpPopup(dpId,ds){
  const pop=document.getElementById('dp-popup');if(!pop)return;
  const dp=dpId?(S.dayplans||[]).find(d=>d.id===dpId):null;
  const tid=ctid();
  const routes=S.routes.filter(r=>r.tripId===tid);
  const dests=S.dests.filter(d=>d.tripId===tid);
  // header
  const colorEl=document.getElementById('dp-popup-dot');
  const titleEl=document.getElementById('dp-popup-title');
  const subEl=document.getElementById('dp-popup-sub');
  if(dp){
    const route=dp.routeId?routes.find(r=>r.id===dp.routeId):null;
    const routeColor=dp.routeId?(()=>{const SEG=['#3a7bd5','#27ae60','#9b59b6','#16a085','#e74c3c','#f39c12','#2471a3','#1e8449','#8e44ad','#c0392b'];const ri=routes.findIndex(r=>r.id===dp.routeId);return SEG[ri%SEG.length]||'var(--accent)';})():'var(--accent)';
    colorEl.style.background=routeColor;
    titleEl.textContent=`Tag ${dp.day}${dp.date?' · '+dp.date.split('-').reverse().join('.'):''}`;
    subEl.textContent=route?routeTitle(route,dests):'Kein Ort';
    const stay=dp?.stayId?(S.stays||[]).find(s=>s.id===dp.stayId):null;
    if(stay)subEl.textContent+=' · '+([...new Set((S.dayplans||[]).filter(d=>d.stayId===stay.id).map(d=>d.day))].length)+' Tage';
    // body
    refreshDpPopupBody(dpId);
    document.getElementById('dp-popup-edit-btn').onclick=()=>{closeDpPopup();editDayplan(dpId);};
  } else {
    colorEl.style.background='var(--accent)';
    titleEl.textContent=ds.split('-').reverse().join('.');
    subEl.textContent='Kein Eintrag';
    document.getElementById('dp-popup-body').innerHTML='';
    document.getElementById('dp-popup-edit-btn').onclick=()=>{closeDpPopup();openDayplanModal();};
  }
  // position near click
  const ev=window.event;
  const x=ev?.clientX||200,y=ev?.clientY||200;
  const pw=340,ph=200;
  pop.style.left=Math.min(x+8,window.innerWidth-pw-16)+'px';
  pop.style.top=Math.min(y+8,window.innerHeight-ph-16)+'px';
  pop.style.display='block';
  // close on outside click
  setTimeout(()=>document.addEventListener('click',_dpPopupOutside,{once:true}),50);
}
function _dpPopupOutside(e){
  const pop=document.getElementById('dp-popup');
  if(pop&&!pop.contains(e.target))closeDpPopup();
}
function closeDpPopup(){
  const pop=document.getElementById('dp-popup');if(pop)pop.style.display='none';
  document.removeEventListener('click',_dpPopupOutside);
}
function openDayplanModal(){
  document.querySelector('#modal-dayplan .modal-header h3').textContent='📅 Neuer Aufenthalt';
  document.getElementById('dp-edit-id').value='';
  document.getElementById('dp-stay-id').value='';
  document.getElementById('dp-notes').value='';
  document.getElementById('dp-range-row').style.display='';
  document.getElementById('dp-single-row').style.display='none';
  document.getElementById('dp-date').value='';
  document.getElementById('dp-date-end').value='';
  if(fpDayplan)fpDayplan.clear();
  if(fpDayplanEnd){fpDayplanEnd.set('minDate',null);fpDayplanEnd.clear();}
  fillDayplanRouteSelect();
  document.getElementById('dp-route').value='';
  openModal('modal-dayplan');
}
function fillDayplanRouteSelect(){
  const tid=ctid();
  const routes=S.routes.filter(r=>r.tripId===tid);
  const dests=S.dests.filter(d=>d.tripId===tid);
  const sel=document.getElementById('dp-route');
  sel.innerHTML=`<option value="">— Kein Ort —</option>`+routes.map(r=>`<option value="${r.id}">${routeTitle(r,dests)}</option>`).join('');
}
function isoDateRange(startIso,endIso){
  const dates=[];
  const s=new Date(startIso+'T12:00:00'),e=new Date((endIso||startIso)+'T12:00:00');
  for(let d=new Date(s);d<=e;d.setDate(d.getDate()+1)){
    dates.push(`${d.getFullYear()}-${String(d.getMonth()+1).padStart(2,'0')}-${String(d.getDate()).padStart(2,'0')}`);
  }
  return dates;
}
function saveDayplan(){
  const tid=ctid();if(!tid)return;
  const eid=document.getElementById('dp-edit-id').value;
  const sid=document.getElementById('dp-stay-id').value;
  const routeId=document.getElementById('dp-route').value||null;
  const notes=document.getElementById('dp-notes').value.trim();
  if(eid){
    // edit single day
    const ex=(S.dayplans||[]).find(d=>d.id===eid);if(!ex)return;
    const dateIso=fpDayplanEdit?fpISO(fpDayplanEdit):'';
    Object.assign(ex,{day:parseInt(document.getElementById('dp-day').value)||ex.day,date:dateIso||ex.date,routeId,notes});
    save();closeModal('modal-dayplan');renderDayplan();return;
  }
  if(sid){
    // edit existing stay date range + route
    const stay=(S.stays||[]).find(s=>s.id===sid);if(!stay)return;
    const startIso=fpDayplan?fpISO(fpDayplan):'';
    const endIso=fpDayplanEnd?fpISO(fpDayplanEnd):'';
    if(!startIso)return;
    stay.routeId=routeId;
    const newDates=isoDateRange(startIso,endIso||startIso);
    const existing=(S.dayplans||[]).filter(d=>d.stayId===sid).sort((a,b)=>(a.date||'').localeCompare(b.date||''));
    const existingByDate=Object.fromEntries(existing.map(d=>[d.date,d]));
    // remove days no longer in range
    S.dayplans=(S.dayplans||[]).filter(d=>!(d.stayId===sid&&!newDates.includes(d.date)));
    // add missing days
    const maxDay=Math.max(...(S.dayplans||[]).filter(d=>d.tripId===tid).map(d=>d.day||0),0);
    let ctr=maxDay+1;
    newDates.filter(dt=>!existingByDate[dt]).forEach(dt=>{
      S.dayplans.push({id:uid(),tripId:tid,day:ctr++,date:dt,routeId,stayId:sid,notes:'',activities:[]});
    });
    // update routeId on existing days
    (S.dayplans||[]).filter(d=>d.stayId===sid).forEach(d=>{d.routeId=routeId;});
    save();closeModal('modal-dayplan');renderDayplan();return;
  }
  // new: range
  const startIso=fpDayplan?fpISO(fpDayplan):'';
  const endIso=fpDayplanEnd?fpISO(fpDayplanEnd):'';
  if(!startIso)return;
  const existingDays=(S.dayplans||[]).filter(d=>d.tripId===tid);
  const nextDay=(existingDays.length?Math.max(...existingDays.map(d=>d.day||0)):0)+1;
  if(endIso&&endIso>startIso){
    if(!Array.isArray(S.stays))S.stays=[];
    const stayId=uid();
    S.stays.push({id:stayId,tripId:tid,routeId,activities:[]});
    const dates=isoDateRange(startIso,endIso);
    dates.forEach((dt,i)=>{S.dayplans.push({id:uid(),tripId:tid,day:nextDay+i,date:dt,routeId,stayId,notes:i===0?notes:'',activities:[]});});
  } else {
    S.dayplans.push({id:uid(),tripId:tid,day:nextDay,date:startIso,routeId,notes,activities:[]});
  }
  save();closeModal('modal-dayplan');renderDayplan();
}
function editStay(stayId){
  const stay=(S.stays||[]).find(s=>s.id===stayId);if(!stay)return;
  const days=(S.dayplans||[]).filter(d=>d.stayId===stayId).sort((a,b)=>(a.date||'').localeCompare(b.date||''));
  // Auto-fix corrupted dates from old timezone bug: days after the first got wrong dates
  if(days.length>1){
    const needsFix=days.some((d,i)=>{
      if(!i)return false;
      const prev=new Date(days[i-1].date+'T12:00:00'),cur=new Date(d.date+'T12:00:00');
      return Math.round((cur-prev)/86400000)!==1;
    });
    if(needsFix){
      days.forEach((d,i)=>{
        const nd=new Date(days[0].date+'T12:00:00');nd.setDate(nd.getDate()+i);
        d.date=`${nd.getFullYear()}-${String(nd.getMonth()+1).padStart(2,'0')}-${String(nd.getDate()).padStart(2,'0')}`;
      });
      save();
    }
  }
  document.querySelector('#modal-dayplan .modal-header h3').textContent='📅 Aufenthalt bearbeiten';
  document.getElementById('dp-edit-id').value='';
  document.getElementById('dp-stay-id').value=stayId;
  document.getElementById('dp-range-row').style.display='';
  document.getElementById('dp-single-row').style.display='none';
  document.getElementById('dp-notes').value='';
  fillDayplanRouteSelect();
  document.getElementById('dp-route').value=stay.routeId||'';
  openModal('modal-dayplan');
  if(fpDayplan)fpDayplan.clear();
  if(fpDayplanEnd){fpDayplanEnd.set('minDate',null);fpDayplanEnd.clear();}
  if(days.length>0){
    const toDate=iso=>{const[y,m,d]=iso.split('-');return new Date(+y,+m-1,+d,12);};
    setTimeout(()=>{
      if(fpDayplan&&days[0].date)fpDayplan.setDate(toDate(days[0].date),false);
      if(fpDayplanEnd&&days[days.length-1].date)fpDayplanEnd.setDate(toDate(days[days.length-1].date),false);
    },0);
  }
}
function editDayplan(id){
  const dp=(S.dayplans||[]).find(d=>d.id===id);if(!dp)return;
  document.querySelector('#modal-dayplan .modal-header h3').textContent='📅 Tag bearbeiten';
  document.getElementById('dp-range-row').style.display='none';
  document.getElementById('dp-single-row').style.display='';
  document.getElementById('dp-stay-id').value='';
  openModal('modal-dayplan');
  document.getElementById('dp-edit-id').value=id;
  document.getElementById('dp-day').value=dp.day;
  document.getElementById('dp-notes').value=dp.notes||'';
  fillDayplanRouteSelect();
  document.getElementById('dp-route').value=dp.routeId||'';
  if(dp.date&&fpDayplanEdit){const iso=dp.date.match(/^(\d{1,2})\.(\d{1,2})\.(\d{4})$/)?`${dp.date.split('.')[2]}-${dp.date.split('.')[1]}-${dp.date.split('.')[0]}`:dp.date;fpDayplanEdit.setDate(iso,false);}
  else if(fpDayplanEdit){fpDayplanEdit.clear();document.getElementById('dp-date-edit').value='';}
}
function delDayplan(id){
  if(!confirm('Tag löschen?'))return;
  S.dayplans=(S.dayplans||[]).filter(d=>d.id!==id);
  save();renderDayplan();
}

initSupabase();
</script>

<div class="modal-overlay" id="modal-dayplan">
  <div class="modal" style="max-width:500px;">
    <div class="modal-header"><h3>📅 Tag planen</h3><button class="btn-icon" onclick="closeModal('modal-dayplan')">✕</button></div>
    <div class="modal-body">
      <input type="hidden" id="dp-edit-id">
      <input type="hidden" id="dp-stay-id">
      <!-- new mode: date range -->
      <div id="dp-range-row" class="form-row">
        <div class="form-group"><label>Datum von</label><input type="text" id="dp-date" placeholder="TT.MM.JJJJ" readonly></div>
        <div class="form-group"><label>Datum bis <span style="font-weight:400;color:var(--text-muted)">(optional)</span></label><input type="text" id="dp-date-end" placeholder="TT.MM.JJJJ" readonly></div>
      </div>
      <!-- edit mode: single date + day nr -->
      <div id="dp-single-row" class="form-row" style="display:none;">
        <div class="form-group"><label>Tag Nr.</label><input type="number" id="dp-day" placeholder="1" min="1"></div>
        <div class="form-group"><label>Datum</label><input type="text" id="dp-date-edit" placeholder="TT.MM.JJJJ" readonly></div>
      </div>
      <div class="form-group">
        <label>Route / Ort (optional)</label>
        <select id="dp-route" style="width:100%;padding:9px 12px;border:1px solid var(--border);border-radius:var(--radius-sm);font-family:var(--font-body);font-size:14px;background:var(--surface);color:var(--text);outline:none;"><option value="">— Kein Ort —</option></select>
      </div>
      <div class="form-group">
        <label>Notizen</label>
        <textarea id="dp-notes" rows="3" style="width:100%;padding:9px 12px;border:1px solid var(--border);border-radius:var(--radius-sm);font-family:var(--font-body);font-size:14px;resize:vertical;outline:none;background:var(--surface);color:var(--text);" placeholder="Was ist für diesen Tag geplant?"></textarea>
      </div>
    </div>
    <div class="modal-footer">
      <button class="btn btn-secondary" onclick="closeModal('modal-dayplan')">Abbrechen</button>
      <button class="btn btn-primary" onclick="saveDayplan()">Speichern</button>
    </div>
  </div>
</div>

<div id="dp-popup" style="display:none;position:fixed;z-index:2000;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:0 8px 32px rgba(0,0,0,.18);min-width:260px;max-width:340px;padding:0;overflow:hidden;">
  <div id="dp-popup-header" style="padding:12px 14px 10px;display:flex;align-items:center;gap:8px;">
    <div id="dp-popup-dot" style="width:10px;height:10px;border-radius:50%;flex-shrink:0;"></div>
    <div style="flex:1;min-width:0;">
      <div id="dp-popup-title" style="font-weight:600;font-size:14px;"></div>
      <div id="dp-popup-sub" style="font-size:12px;color:var(--text-muted);margin-top:1px;"></div>
    </div>
    <button class="btn-icon" onclick="closeDpPopup()" style="flex-shrink:0;">✕</button>
  </div>
  <div id="dp-popup-body" style="padding:0 14px 12px;font-size:13px;"></div>
  <div style="padding:8px 14px 12px;display:flex;gap:6px;border-top:1px solid var(--border);margin-top:4px;">
    <button class="btn btn-primary btn-sm" id="dp-popup-edit-btn" onclick="">✏️ Bearbeiten</button>
    <button class="btn btn-secondary btn-sm" onclick="closeDpPopup()">Schließen</button>
  </div>
</div>

<div class="modal-overlay" id="modal-docs">
  <div class="modal" style="max-width:560px;">
    <div class="modal-header"><h3>🔒 Meine Dokumente</h3><button class="btn-icon" onclick="closeModal('modal-docs')">✕</button></div>
    <div class="modal-body">
      <div class="doc-grid" id="doc-list"></div>
      <div style="border:1px dashed var(--border);border-radius:var(--radius);padding:16px;margin-top:4px;">
        <div style="font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);margin-bottom:10px;">+ Dokument hinzufügen</div>
        <input type="hidden" id="doc-edit-id">
        <div class="form-row">
          <div class="form-group">
            <label>Typ</label>
            <select id="doc-type" style="width:100%;padding:9px 12px;border:1px solid var(--border);border-radius:var(--radius-sm);font-family:var(--font-body);font-size:14px;background:var(--surface);color:var(--text);outline:none;">
              <option value="Reisepass">🛂 Reisepass</option>
              <option value="Personalausweis">🪪 Personalausweis</option>
              <option value="Führerschein">🚗 Führerschein</option>
              <option value="Kreditkarte">💳 Kreditkarte</option>
              <option value="Krankenversicherung">🏥 Krankenversicherung</option>
              <option value="Impfpass">💉 Impfpass</option>
              <option value="Sonstiges">📄 Sonstiges</option>
            </select>
          </div>
          <div class="form-group">
            <label>Inhaber</label>
            <input type="text" id="doc-holder" placeholder="Max Mustermann">
          </div>
        </div>
        <div class="form-row">
          <div class="form-group">
            <label>Nummer / ID</label>
            <input type="text" id="doc-number" placeholder="C1234567" autocomplete="off">
          </div>
          <div class="form-group">
            <label>Gültig bis</label>
            <input type="date" id="doc-expiry">
          </div>
        </div>
        <div class="form-group">
          <label>Notizen</label>
          <input type="text" id="doc-notes" placeholder="Ausgestellt in Berlin, Behörde…">
        </div>
        <div style="display:flex;gap:8px;justify-content:flex-end;margin-top:4px;">
          <button class="btn btn-secondary btn-sm" onclick="resetDocForm()">Abbrechen</button>
          <button class="btn btn-primary btn-sm" onclick="saveDoc()">Speichern</button>
        </div>
      </div>
      <p style="font-size:11px;color:var(--text-muted);margin-top:10px;text-align:center;">🔒 Dokumente werden verschlüsselt in deinem Konto gespeichert und sind nur für dich sichtbar.</p>
    </div>
  </div>
</div>
</body>
</html>