/* ============================================================================
   Africa Twin Club — Design-System
   Basis: TeddyBuzz Brand Guidelines V2 (Liquid Glass)
   Dunkel = Glass-Dark + mehr Gold · Hell = Africa-Twin-Tricolore (rot/blau/gold/weiss)
   ============================================================================ */

:root{
  /* Basis (Dunkel) */
  --bg0:#070b16; --bg1:#0b1326; --ink:#eef2f8; --mut:#9fb0c6;
  /* Akzente */
  --blue:#3b7bf0; --teal:#13b48f; --gold:#e8b84b; --violet:#8a6cf0;
  --at-red:#e2454d; --at-blue:#5b8fe0;
  /* Signatur-Akzent (Dunkel = Gold) */
  --accent:#e8b84b; --accent-2:#c9912f; --accent-ink:#1a1405;
  --accent-grad:linear-gradient(135deg,#f0c764,#c9912f);
  /* Status */
  --ok:#28c878; --warn:#e6b755; --error:#f87171;
  /* Liquid-Glass Tint */
  --glass-1:rgba(255,255,255,.03); --glass-2:rgba(255,255,255,.06);
  --glass-3:rgba(255,255,255,.10); --glass-4:rgba(255,255,255,.16);
  --glass-live:var(--glass-2);
  --line:rgba(255,255,255,.14);
  /* Licht & Tiefe */
  --hl-top:rgba(255,255,255,.24); --hl-bottom:rgba(255,255,255,.05);
  --sheen:rgba(255,255,255,.10); --elev:0 18px 50px rgba(0,0,0,.45);
  /* Aurora (Dunkel: gold-betont) */
  --aurora:
    radial-gradient(1200px 820px at 82% -12%, rgba(232,184,75,.20), transparent 60%),
    radial-gradient(1000px 760px at 6% 4%, rgba(59,123,240,.16), transparent 55%),
    radial-gradient(900px 760px at 60% 120%, rgba(226,69,77,.12), transparent 60%);
  --mark-color:rgba(255,255,255,.05);
  --mark-opacity:.085;
  /* Typografie */
  --font-display:'Marcellus',Georgia,serif;
  --font-body:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-mono:'Space Mono',monospace;
  /* Spacing 8px-Skala */
  --sp-1:8px; --sp-2:16px; --sp-3:24px; --sp-4:32px; --sp-6:48px; --sp-8:64px;
  /* Radien */
  --r-pill:999px; --r-xl:22px; --r-lg:18px; --r-md:12px; --r-sm:8px;
  --max:1180px;
}

html[data-theme="light"]{
  /* Africa-Twin-Tricolore: Weiss-Basis, Honda-Rot, Rally-Blau, Gold */
  --bg0:#faf8f3; --bg1:#ece7dc; --ink:#15233b; --mut:#5a6678;
  --blue:#123a86; --teal:#0f8f72; --gold:#b78a2a; --violet:#6b53c9;
  --at-red:#d5202a; --at-blue:#123a86;
  --accent:#d5202a; --accent-2:#b01722; --accent-ink:#ffffff;
  --accent-grad:linear-gradient(135deg,#e23a40,#b01722);
  --glass-1:rgba(18,42,90,.025); --glass-2:rgba(18,42,90,.05);
  --glass-3:rgba(18,42,90,.08); --glass-4:rgba(18,42,90,.12);
  --line:rgba(18,42,90,.14);
  --hl-top:rgba(255,255,255,.85); --hl-bottom:rgba(18,42,90,.04);
  --sheen:rgba(255,255,255,.6); --elev:0 14px 40px rgba(30,50,90,.14);
  --aurora:
    radial-gradient(1150px 800px at 84% -12%, rgba(213,32,42,.12), transparent 58%),
    radial-gradient(1000px 760px at 4% 2%, rgba(18,58,134,.12), transparent 56%),
    radial-gradient(900px 760px at 62% 122%, rgba(201,162,53,.16), transparent 60%);
  --mark-color:rgba(18,42,90,.045);
  --mark-opacity:.07;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-body); color:var(--ink); line-height:1.6;
  -webkit-font-smoothing:antialiased; min-height:100vh;
  background:var(--aurora), linear-gradient(180deg,var(--bg0),var(--bg1));
  background-attachment:fixed;
  padding-bottom:var(--sp-8);
}

/* dezentes Wing-Mark im Hintergrund */
.bg-mark{
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:var(--accent);
  opacity:var(--mark-opacity);
  -webkit-mask:url("../logo/at-logo-mask.png") center 44% / min(125vw,1480px) no-repeat;
          mask:url("../logo/at-logo-mask.png") center 44% / min(125vw,1480px) no-repeat;
}

/* ====== Liquid Glass ====== */
.lg{
  position:relative; background:var(--glass-live); border:1px solid var(--line);
  border-radius:var(--r-lg);
  -webkit-backdrop-filter:blur(20px) saturate(1.7); backdrop-filter:blur(20px) saturate(1.7);
  box-shadow:var(--elev), inset 0 1px 0 var(--hl-top), inset 0 -1px 0 var(--hl-bottom);
}
.lg::after{content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(135deg,var(--sheen),transparent 42%); mix-blend-mode:screen}
@media (prefers-reduced-transparency:reduce){ .lg{backdrop-filter:none;background:var(--bg1)} .lg::after{display:none} }
@media (prefers-contrast:more){ .lg{border-color:var(--ink)} }
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} .lg::after{opacity:.5} }

/* ====== Header / Nav ====== */
.nav{
  position:sticky; top:12px; z-index:1000; max-width:var(--max);
  margin:12px auto 0; display:flex; align-items:center; gap:var(--sp-2);
  padding:8px 14px; border-radius:var(--r-pill);
}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink)}
.brand-mark{width:44px; height:44px; border-radius:50%; overflow:hidden; flex:none; display:grid; place-items:center;
  background:radial-gradient(circle at 50% 35%, var(--glass-4), var(--glass-1));
  border:1px solid var(--line); box-shadow:inset 0 1px 0 var(--hl-top), 0 2px 8px rgba(0,0,0,.18)}
.brand-teddy{width:100%; height:100%; object-fit:cover}
.brand-wing{width:30px; height:auto; color:var(--accent)}
.brand-name{display:flex; flex-direction:column; line-height:1.04; font-family:var(--font-display); font-size:18px; white-space:nowrap}
.brand-pre{font-family:var(--font-mono); font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--accent); margin-bottom:2px}
.brand-name b{font-weight:400; color:var(--accent)}

.tabs{display:flex; gap:4px; flex:1; justify-content:center; min-width:0}
.tab{
  display:inline-flex; align-items:center; gap:7px; text-decoration:none;
  color:var(--mut); font-size:14px; font-weight:600;
  padding:9px 15px; border-radius:var(--r-pill); min-height:42px;
  border:1px solid transparent; transition:color .15s, background .15s, border-color .15s;
}
.tab .ic{width:18px; height:18px}
.tab:hover{color:var(--ink)}
.tab.active{color:var(--accent-ink); background:var(--accent-grad);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 4px 14px rgba(0,0,0,.25)}
html[data-theme="light"] .tab.active{color:#fff}

.nav-actions{display:flex; gap:6px; align-items:center}
.iconbtn{
  display:inline-flex; align-items:center; justify-content:center;
  width:42px; height:42px; border-radius:var(--r-pill);
  border:1px solid var(--line); background:var(--glass-2); color:var(--ink);
  cursor:pointer; font:inherit; transition:background .15s, border-color .15s;
}
.iconbtn:hover{background:var(--glass-3); border-color:var(--accent)}
.iconbtn .ic{width:19px; height:19px}
.lang-label{font-family:var(--font-mono); font-size:12px; font-weight:700; letter-spacing:.06em}
.ic{width:20px; height:20px; display:inline-block; vertical-align:middle}
.ic-lg{width:34px; height:34px}
/* Theme-Icon: zeige Mond im Dunkeln, Sonne im Hellen */
.ic-sun{display:none} html[data-theme="light"] .ic-moon{display:none}
html[data-theme="light"] .ic-sun{display:inline-block}

/* ====== Layout / Sections ====== */
main{max-width:var(--max); margin:0 auto; padding:var(--sp-4) var(--sp-3) 0}
.view{animation:fade .25s ease}
@keyframes fade{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}}
.section-head{display:flex; align-items:flex-end; justify-content:space-between; gap:var(--sp-2); flex-wrap:wrap; margin-bottom:var(--sp-3)}
.eyebrow{font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:.16em; color:var(--accent); display:flex; align-items:center; gap:8px; margin-bottom:8px}
.eyebrow::before{content:''; width:22px; height:2px; background:var(--accent)}
h1.title{font-family:var(--font-display); font-weight:400; font-size:clamp(1.9rem,4.4vw,3rem); line-height:1.08}
h2.title{font-family:var(--font-display); font-weight:400; font-size:clamp(1.4rem,2.6vw,2rem); line-height:1.15}
.sub{color:var(--mut); max-width:64ch}

.loading{display:flex; align-items:center; gap:12px; padding:22px; max-width:340px; margin:40px auto}
.spin{width:18px; height:18px; border:2px solid var(--line); border-top-color:var(--accent); border-radius:50%; animation:spin .8s linear infinite; flex:none}
@keyframes spin{to{transform:rotate(360deg)}}

/* ====== Filterbar ====== */
.filterbar{display:flex; gap:var(--sp-1); flex-wrap:wrap; align-items:center; padding:10px 12px; margin-bottom:var(--sp-3)}
.chip{
  display:inline-flex; align-items:center; gap:6px; min-height:40px; padding:6px 14px;
  border-radius:var(--r-pill); border:1px solid var(--line); background:var(--glass-1);
  color:var(--mut); font-size:13.5px; font-weight:600; cursor:pointer; transition:all .15s;
}
.chip:hover{color:var(--ink); border-color:var(--accent)}
.chip.active{color:var(--accent-ink); background:var(--accent-grad); border-color:transparent}
html[data-theme="light"] .chip.active{color:#fff}
.filterbar .sep{flex:1}
.search{display:flex; align-items:center; gap:8px; min-height:40px; padding:4px 14px; border-radius:var(--r-pill); border:1px solid var(--line); background:var(--glass-1)}
.search input{background:transparent; border:none; outline:none; color:var(--ink); font:inherit; font-size:14px; width:170px}
.search input::placeholder{color:var(--mut)}

/* ====== Touren-Grid ====== */
.tours-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:var(--sp-3)}
.tour-card{
  display:flex; flex-direction:column; overflow:hidden; cursor:pointer;
  text-decoration:none; color:var(--ink); padding:0; transition:transform .18s, box-shadow .18s;
}
.tour-card:hover{transform:translateY(-3px)}
.tc-cover{position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--glass-3)}
.tc-cover img{width:100%; height:100%; object-fit:cover; display:block}
.tc-cover::after{content:''; position:absolute; inset:0; background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.55))}
.tc-badge{position:absolute; top:12px; left:12px; z-index:2; display:inline-flex; align-items:center; gap:6px;
  font-family:var(--font-mono); font-size:11px; font-weight:700; letter-spacing:.05em;
  padding:5px 11px; border-radius:var(--r-pill); background:var(--accent-grad); color:var(--accent-ink);
  box-shadow:0 4px 12px rgba(0,0,0,.3)}
html[data-theme="light"] .tc-badge{color:#fff}
.tc-count{position:absolute; bottom:12px; right:12px; z-index:2; display:flex; gap:6px}
.tc-count span{display:inline-flex; align-items:center; gap:4px; font-family:var(--font-mono); font-size:11px;
  color:#fff; background:rgba(0,0,0,.45); padding:4px 9px; border-radius:var(--r-pill); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px)}
.tc-count .ic{width:13px; height:13px}
.tc-body{padding:var(--sp-2) var(--sp-3) var(--sp-3)}
.tc-body h3{font-family:var(--font-display); font-weight:400; font-size:1.35rem; line-height:1.12; margin-bottom:6px}
.tc-summary{font-size:.9rem; color:var(--mut); line-height:1.55; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.tc-stats{display:flex; gap:14px; margin-top:12px; padding-top:12px; border-top:1px solid var(--line); font-family:var(--font-mono); font-size:12px; color:var(--mut)}
.tc-stats b{color:var(--accent); font-weight:700}

/* ====== Tour-Detail ====== */
.back-link{display:inline-flex; align-items:center; gap:6px; color:var(--mut); text-decoration:none; font-size:14px; font-weight:600; margin-bottom:var(--sp-2)}
.back-link:hover{color:var(--accent)}
.detail-head{padding:var(--sp-4); margin-bottom:var(--sp-3)}
.detail-summary{margin-top:12px; color:var(--mut); max-width:70ch; line-height:1.7}
.detail-stats{display:flex; flex-wrap:wrap; gap:var(--sp-3); margin-top:var(--sp-3)}
.stat{display:flex; flex-direction:column; gap:2px}
.stat .v{font-family:var(--font-display); font-size:1.5rem; color:var(--ink)}
.stat .k{font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:.1em; color:var(--mut)}
.stat .v b{color:var(--accent); font-weight:400}
.detail-places{display:flex; flex-wrap:wrap; gap:6px; margin-top:var(--sp-2)}
.place-pill{display:inline-flex; align-items:center; gap:5px; font-size:12.5px; color:var(--mut); padding:4px 11px; border-radius:var(--r-pill); border:1px solid var(--line); background:var(--glass-1)}
.place-pill .ic{width:13px; height:13px; color:var(--accent)}

.detail-map{height:min(660px,72vh); border-radius:var(--r-lg); overflow:hidden; margin-bottom:var(--sp-3); border:1px solid var(--line)}
.detail-sort{display:flex; gap:6px; flex-wrap:wrap; align-items:center; margin-top:var(--sp-2)}
.detail-sort .tb-label{font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--mut)}
.detail-places .place-pill[draggable="true"]{cursor:grab}
.detail-places .place-pill.dragging{opacity:.4}
.detail-places .place-pill.dragover{outline:2px solid var(--accent); outline-offset:2px}

.media-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:var(--sp-2)}
.media-item{position:relative; aspect-ratio:4/3; border-radius:var(--r-md); overflow:hidden; cursor:pointer; background:var(--glass-3); border:1px solid var(--line)}
.media-item img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .3s}
.media-item:hover img{transform:scale(1.05)}
.media-item .play-badge{position:absolute; inset:0; display:flex; align-items:center; justify-content:center}
.media-item .play-badge .ic{width:46px; height:46px; color:#fff; filter:drop-shadow(0 2px 8px rgba(0,0,0,.6))}
.media-item .mi-place{position:absolute; left:0; right:0; bottom:0; padding:18px 10px 7px; font-size:11.5px; color:#fff;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.7)); display:flex; align-items:center; gap:4px}
.media-item .mi-place .ic{width:12px; height:12px; flex:none}
.media-item .mi-note-dot{position:absolute; top:8px; right:8px; width:9px; height:9px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 2px rgba(0,0,0,.3)}

/* ====== Karte (Vollansicht) ====== */
.map-wrap{position:relative; height:calc(100vh - 150px); min-height:440px; border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line)}
#map, .detail-map .lmap{width:100%; height:100%}
.map-switch{position:absolute; top:12px; left:12px; right:12px; z-index:500; display:flex; gap:8px; flex-wrap:wrap; padding:8px; max-width:max-content}
.map-switch .chip{background:var(--glass-3)}

/* Leaflet-Anpassungen */
.leaflet-container{background:var(--bg1); font-family:var(--font-body)}
.leaflet-popup-content-wrapper{background:var(--bg1); color:var(--ink); border-radius:var(--r-md); border:1px solid var(--line)}
.leaflet-popup-tip{background:var(--bg1)}
.leaflet-popup-content{margin:10px 12px; font-size:13px}
.leaflet-popup-content img, .pop-thumb{border-radius:10px; width:300px; max-width:72vw; height:220px; object-fit:cover; display:block; margin-bottom:8px}
.atc-marker{background:var(--accent); width:14px; height:14px; border-radius:50% 50% 50% 0; transform:rotate(-45deg); border:2px solid #fff; box-shadow:0 2px 6px rgba(0,0,0,.4)}
html[data-theme="light"] .leaflet-tile{filter:none}
html[data-theme="dark"] .leaflet-tile{filter:brightness(.78) contrast(1.05) saturate(.9)}

/* ====== Kalender ====== */
.cal-head{display:flex; align-items:center; gap:var(--sp-2); margin-bottom:var(--sp-3)}
.cal-head .nav-btns{display:flex; gap:6px; margin-left:auto}
.cal-month-label{font-family:var(--font-display); font-size:1.5rem; min-width:200px}
.calendar{padding:var(--sp-2)}
.cal-weekdays{display:grid; grid-template-columns:repeat(7,1fr); gap:6px; margin-bottom:6px}
.cal-weekdays span{text-align:center; font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--mut); padding:4px}
.cal-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:6px}
.cal-cell{aspect-ratio:1/.92; border-radius:var(--r-md); border:1px solid var(--line); background:var(--glass-1); padding:7px 8px; position:relative; display:flex; flex-direction:column}
.cal-cell.empty{background:transparent; border-color:transparent}
.cal-cell .d{font-family:var(--font-mono); font-size:12px; color:var(--mut)}
.cal-cell.today{border-color:var(--accent)}
.cal-cell.today .d{color:var(--accent); font-weight:700}
.cal-cell.has-tour{cursor:pointer; transition:transform .12s}
.cal-cell.has-tour:hover{transform:scale(1.04); z-index:5}
.cal-cell.tour-start{box-shadow:inset 3px 0 0 var(--tour-c)}
.cal-bar{margin-top:auto; display:flex; flex-direction:column; gap:3px}
.cal-tag{font-size:10px; font-weight:700; color:#fff; background:var(--tour-c); border-radius:5px; padding:2px 5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:1.3}
.cal-dot{width:7px; height:7px; border-radius:50%; background:var(--tour-c)}
/* Hover-Vorschau */
.cal-cell .cal-preview{position:absolute; top:calc(100% + 8px); left:50%; transform:translateX(-50%) scale(.96);
  width:208px; opacity:0; pointer-events:none; transition:opacity .15s, transform .15s; z-index:50; border-radius:var(--r-md); overflow:hidden}
.cal-cell.has-tour:hover .cal-preview{opacity:1; transform:translateX(-50%) scale(1)}
.cal-preview img{width:100%; height:84px; object-fit:cover; display:block}
.cal-preview .cp-body{padding:8px 10px}
.cal-preview h4{font-family:var(--font-display); font-weight:400; font-size:.95rem; margin-bottom:2px}
.cal-preview p{font-size:11px; color:var(--mut); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.cal-monthtours{margin-top:var(--sp-3); display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:var(--sp-2)}
.cal-tourrow{display:flex; gap:10px; padding:8px; align-items:center; cursor:pointer; text-decoration:none; color:var(--ink)}
.cal-tourrow img{width:62px; height:46px; border-radius:8px; object-fit:cover; flex:none}
.cal-tourrow .ct-c{width:4px; align-self:stretch; border-radius:3px; background:var(--tour-c); flex:none}
.cal-tourrow h4{font-family:var(--font-display); font-weight:400; font-size:1rem; line-height:1.1}
.cal-tourrow small{color:var(--mut); font-size:11.5px; font-family:var(--font-mono)}

/* ====== Modal / Lightbox ====== */
.modal{position:fixed; inset:0; z-index:2000; display:flex; align-items:center; justify-content:center;
  background:rgba(4,7,14,.78); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); padding:var(--sp-3)}
.modal[hidden]{display:none}
.modal-close{position:absolute; top:18px; right:18px; z-index:10}
.lb-stage{max-width:min(1100px,92vw); max-height:74vh; display:flex; align-items:center; justify-content:center}
.lb-stage img, .lb-stage video{max-width:100%; max-height:74vh; border-radius:var(--r-md); box-shadow:0 24px 70px rgba(0,0,0,.6); display:block}
.lb-nav{position:absolute; top:50%; transform:translateY(-50%); width:48px; height:48px}
.lb-prev{left:18px} .lb-next{right:18px}
.lb-panel{position:absolute; left:50%; bottom:20px; transform:translateX(-50%); width:min(620px,92vw); padding:14px 16px; display:flex; flex-direction:column; gap:8px}
.lb-meta{display:flex; gap:18px; flex-wrap:wrap; font-size:13px; color:var(--mut)}
.lb-meta>span{display:inline-flex; align-items:center; gap:6px}
.lb-meta .ic{width:15px; height:15px; color:var(--accent)}
.lb-note{width:100%; background:var(--glass-1); border:1px solid var(--line); border-radius:var(--r-sm);
  color:var(--ink); font:inherit; font-size:14px; padding:8px 10px; resize:vertical; outline:none}
.lb-note:focus{border-color:var(--accent)}

/* ====== Uploader ====== */
.up-card{max-width:760px; width:100%; max-height:90vh; overflow:auto; padding:var(--sp-4); position:relative}
.up-card h2{font-family:var(--font-display); font-weight:400; font-size:1.6rem; margin-bottom:6px}
.up-sub{color:var(--mut); font-size:.92rem; margin-bottom:var(--sp-3); max-width:60ch}
.dropzone{display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; cursor:pointer;
  border:2px dashed var(--line); border-radius:var(--r-lg); padding:var(--sp-6) var(--sp-3); color:var(--mut);
  transition:border-color .15s, background .15s}
.dropzone:hover, .dropzone.drag{border-color:var(--accent); background:var(--glass-1); color:var(--ink)}
.dropzone .ic-lg{color:var(--accent)}
.dropzone small{font-size:11.5px; opacity:.8}
.up-progress{display:flex; align-items:center; gap:10px; margin-top:var(--sp-2); font-size:13px; color:var(--mut)}
.up-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(128px,1fr)); gap:10px; margin-top:var(--sp-2); max-height:360px; overflow:auto}
.up-grid .uptile{position:relative; aspect-ratio:4/3; border-radius:10px; overflow:hidden; border:1px solid var(--line)}
.up-grid img{width:100%; height:100%; object-fit:cover}
.up-grid .geo{position:absolute; bottom:3px; left:3px; width:14px; height:14px; color:#fff; filter:drop-shadow(0 1px 2px #000)}
.up-grid .nogeo{position:absolute; inset:0; background:rgba(248,113,113,.3)}

/* Empty-State */
.empty{text-align:center; padding:var(--sp-8) var(--sp-3); color:var(--mut)}
.empty .ic-lg{color:var(--accent); margin-bottom:12px}
.empty h2{font-family:var(--font-display); font-weight:400; font-size:1.5rem; color:var(--ink); margin-bottom:8px}
.empty code{font-family:var(--font-mono); background:var(--glass-3); padding:2px 8px; border-radius:6px; color:var(--ink)}

/* ====== Buttons ====== */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:10px 22px;
  border-radius:var(--r-pill); border:none; cursor:pointer; font:inherit; font-weight:700;
  color:var(--accent-ink); background:var(--accent-grad);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25), 0 6px 18px rgba(0,0,0,.3)}
html[data-theme="light"] .btn{color:#fff}
.btn.ghost{background:transparent; border:1px solid var(--line); color:var(--ink); font-weight:600; box-shadow:none}

/* ====== Responsive ====== */
@media (max-width:720px){
  .nav{top:0; margin-top:0; border-radius:0; padding:8px 12px}
  .brand-name{font-size:16px}
  .tab span{display:none}
  .tab{padding:9px 12px}
  main{padding:var(--sp-3) var(--sp-2) 0}
  .map-wrap{height:calc(100vh - 120px)}
  .cal-tag{font-size:0; padding:0; height:5px; border-radius:3px}
  .cal-cell .d{font-size:11px}
}
@media (max-width:420px){
  .brand-name{display:none}
  .cal-grid{gap:3px} .cal-weekdays{gap:3px}
}

/* ============================================================================
   V2 — Neue Tour, Sortierung (Filter), Drag & Drop, editierbares Detail
   ============================================================================ */
.tour-card.new-card{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  min-height:230px; border:2px dashed var(--line); background:var(--glass-1); cursor:pointer; text-align:center; padding:24px; color:var(--mut)}
.tour-card.new-card:hover{border-color:var(--accent); color:var(--ink); transform:translateY(-3px)}
.tour-card.new-card .ic-lg{color:var(--accent)}
.tour-card.new-card .nc-title{font-family:var(--font-display); font-size:1.3rem; color:var(--ink)}
.tour-card.new-card small{font-size:.82rem; max-width:26ch}

.media-toolbar{display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin:0 0 var(--sp-2)}
.media-toolbar .tb-label{font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--mut)}
.media-toolbar .sep{width:1px; height:22px; background:var(--line); margin:0 2px}
.media-hint{font-size:12px; color:var(--mut); margin:0 0 var(--sp-2); display:flex; align-items:center; gap:6px}
.media-hint .ic{width:14px; height:14px; color:var(--accent)}

.media-grid.editable .media-item{cursor:grab}
.media-item.dragging{opacity:.35}
.media-item.dragover{outline:3px solid var(--accent); outline-offset:2px}
.media-item .order-num{position:absolute; top:8px; left:8px; z-index:3; min-width:22px; height:22px; padding:0 6px;
  display:inline-flex; align-items:center; justify-content:center; border-radius:var(--r-pill);
  font-family:var(--font-mono); font-size:11px; font-weight:700; color:var(--accent-ink); background:var(--accent); box-shadow:0 1px 4px rgba(0,0,0,.4)}
html[data-theme="light"] .media-item .order-num{color:#fff}

.detail-title-input{font-family:var(--font-display); font-weight:400; font-size:clamp(1.7rem,4vw,2.6rem); line-height:1.08;
  background:transparent; border:none; border-bottom:1px dashed transparent; color:var(--ink); width:100%; outline:none; padding:2px 0}
.detail-title-input:hover{border-bottom-color:var(--line)} .detail-title-input:focus{border-bottom-color:var(--accent)}
.detail-summary-edit{margin-top:10px}
.detail-toprow{display:flex; align-items:center; gap:10px; margin-bottom:6px}
.badge-user{display:inline-flex; align-items:center; gap:5px; font-family:var(--font-mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); border:1px solid var(--line); border-radius:var(--r-pill); padding:3px 9px}
.tour-del{margin-left:auto; color:var(--mut)}
.tour-del:hover{color:var(--error); border-color:var(--error)}

.nt-field{margin-bottom:var(--sp-2)}
.nt-field label{display:block; font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--mut); margin-bottom:6px}
.nt-input{width:100%; background:var(--glass-1); border:1px solid var(--line); border-radius:var(--r-md); padding:11px 13px; font-size:15px; color:var(--ink); outline:none; font-family:inherit}
.nt-input:focus{border-color:var(--accent)}
.up-actions{display:flex; gap:10px; justify-content:flex-end; margin-top:var(--sp-3); align-items:center}
.up-actions .count{margin-right:auto; font-size:13px; color:var(--mut)}
.btn[disabled]{opacity:.45; cursor:not-allowed}
.uptile .order-num{position:absolute; top:3px; left:3px; min-width:18px; height:18px; font-size:10px; padding:0 4px;
  display:inline-flex; align-items:center; justify-content:center; border-radius:var(--r-pill); background:var(--accent); color:var(--accent-ink); font-family:var(--font-mono); font-weight:700}

/* ============================================================================
   V3 — nummerierte Marker, Fortschritt, Speicheranzeige, Diagnose, Kalender-Fix
   ============================================================================ */
/* Nummerierte Karten-Marker (runder Pin, Zahl aufrecht) */
.atc-marker.num{width:28px; height:28px; border-radius:50%; border:2px solid #fff; box-shadow:0 2px 7px rgba(0,0,0,.45);
  display:flex; align-items:center; justify-content:center; color:#fff; font-family:var(--font-mono); font-weight:700; font-size:12px; line-height:1}
.leaflet-div-icon{background:transparent; border:none}
.leaflet-tooltip{background:var(--bg1); color:var(--ink); border:1px solid var(--line); border-radius:8px; font-family:var(--font-body); font-size:12px; box-shadow:var(--elev); padding:5px 9px}
.leaflet-tooltip-top::before{border-top-color:var(--line)}

/* Upload-Fortschritt */
.up-progress{display:block; margin-top:var(--sp-2)}
.up-prog-row{display:flex; align-items:center; gap:10px; font-size:13px; color:var(--mut); margin-bottom:8px}
.up-prog-row b{color:var(--ink)}
.up-bar-track{height:7px; border-radius:var(--r-pill); background:var(--glass-3); overflow:hidden}
.up-bar{display:block; height:100%; width:0; background:var(--accent-grad); transition:width .25s ease}

/* Speicheranzeige in Touren */
.storage-line{display:flex; align-items:center; gap:12px; margin:0 0 var(--sp-2); padding:8px 14px; border-radius:var(--r-pill);
  background:var(--glass-1); border:1px solid var(--line); font-size:12.5px; color:var(--mut)}
.storage-line .sl-label{display:flex; align-items:center; gap:7px; white-space:nowrap}
.storage-line .sl-label .ic{width:15px; height:15px; color:var(--accent)}
.storage-line b{color:var(--ink); font-weight:700}
.sl-track{flex:1; height:7px; min-width:60px; border-radius:var(--r-pill); background:var(--glass-3); overflow:hidden}
.sl-fill{display:block; height:100%; background:var(--accent-grad); border-radius:var(--r-pill)}
.sl-pct{font-family:var(--font-mono); font-weight:700; color:var(--ink); white-space:nowrap}

/* Diagnose / Admin */
.diag-list{padding:6px}
.diag-head{padding:12px 14px; font-size:14px; color:var(--mut); border-bottom:1px solid var(--line); margin-bottom:4px}
.diag-head b{font-family:var(--font-display); font-size:1.2rem; color:var(--accent); margin-right:4px}
.diag-row{display:flex; align-items:center; gap:12px; padding:11px 14px; border-radius:var(--r-md)}
.diag-row:hover{background:var(--glass-1)}
.diag-dot{width:11px; height:11px; border-radius:50%; flex:none; box-shadow:0 0 0 3px var(--glass-2)}
.diag-row.ok .diag-dot{background:var(--ok)}
.diag-row.warn .diag-dot{background:var(--warn)}
.diag-row.bad .diag-dot{background:var(--error)}
.diag-name{flex:1; font-size:14px; color:var(--ink)}
.diag-val{font-family:var(--font-mono); font-size:12px; color:var(--mut); text-align:right}
.diag-row.bad .diag-val{color:var(--error)}

/* Kalender: kompakter statt riesig-leer (Fix) */
.cal-grid .cal-cell{aspect-ratio:auto; min-height:90px}
@media(max-width:720px){ .cal-grid .cal-cell{min-height:58px} }

/* ============================================================================
   V4 — Login / Konto
   ============================================================================ */
.iconbtn.authed{color:var(--accent-ink); background:var(--accent); border-color:transparent}
html[data-theme="light"] .iconbtn.authed{color:#fff}
#authmodal .up-card h2{font-family:var(--font-display); font-weight:400; font-size:1.5rem; margin-bottom:6px}
.auth-oauth{display:flex; flex-direction:column; gap:8px; margin:14px 0 0}
.oauth-btn{width:100%; justify-content:center}
.auth-div{display:flex; align-items:center; gap:10px; color:var(--mut); font-size:12px; margin:14px 0}
.auth-div::before, .auth-div::after{content:""; flex:1; height:1px; background:var(--line)}
.auth-msg{font-size:13px; color:var(--mut); margin-top:10px; min-height:18px}
.hp{position:absolute!important; left:-9999px!important; width:1px; height:1px; opacity:0; pointer-events:none}