/* HABITAT 2026 — Companion */
:root {
  --green: #00BC08;
  --greige: #CED2C2;
  --black: #000;
  --ink: #0c0c0c;
  --panel: #141414;
  --line: #2a2a2a;
  --text: #f2f2ee;
  --radius: 10px;
  --headH: 58px;
  --tabsH: 46px;
  --pxPerMin: 2.2px; /* Timetable-Maßstab */
}
* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
[hidden] { display:none !important; }
html, body { height:100%; }
body {
  background: var(--black);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  display:flex; flex-direction:column;
  min-height:100dvh;
}
button { font-family:inherit; cursor:pointer; }
a { color: var(--green); }

/* ---------- Topbar ---------- */
.topbar {
  height:var(--headH);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 14px; gap:10px;
  border-bottom:1px solid var(--line);
  background:var(--black);
  position:sticky; top:0; z-index:50;
}
.brand-name { display:block; font-weight:900; font-size:19px; letter-spacing:.06em; line-height:1.05; }
.brand-name b { color:var(--green); font-weight:900; }
.brand-sub { display:block; font-size:10px; letter-spacing:.22em; color:#9a9d92; font-weight:600; }
.live-pill {
  display:flex; align-items:center; gap:7px;
  background:var(--green); color:#000;
  font-weight:800; font-size:11px; letter-spacing:.08em;
  padding:6px 11px; border-radius:999px;
  max-width:52vw; white-space:nowrap; overflow:hidden;
}
.live-pill #livePillText { overflow:hidden; text-overflow:ellipsis; }
.live-dot { width:8px; height:8px; border-radius:50%; background:#000; animation:pulse 1.4s infinite; flex:none; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.25} }

/* ---------- Tabs ---------- */
.tabs {
  height:var(--tabsH);
  display:flex;
  border-bottom:1px solid var(--line);
  background:var(--black);
  position:sticky; top:var(--headH); z-index:50;
}
.tab {
  flex:1; background:none; border:none; color:#8b8e84;
  font-weight:800; font-size:13px; letter-spacing:.14em;
  border-bottom:3px solid transparent;
}
.tab.active { color:var(--text); border-bottom-color:var(--green); }

/* ---------- Views ---------- */
.view { display:none; flex:1 1 auto; min-height:0; flex-direction:column; }
.view.active { display:flex; }

/* ---------- Timetable ---------- */
.tt-toolbar {
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:10px 14px;
}
.seg { display:flex; background:var(--panel); border:1px solid var(--line); border-radius:999px; padding:3px; }
.seg button {
  background:none; border:none; color:#9a9d92;
  font-weight:700; font-size:11px; letter-spacing:.1em;
  padding:6px 12px; border-radius:999px;
}
.seg button.active { background:var(--greige); color:#000; }
.btn-now {
  background:var(--green); color:#000; border:none;
  font-weight:800; font-size:12px; letter-spacing:.08em;
  padding:8px 14px; border-radius:999px;
}
.tt-scroll {
  overflow:auto; flex:1 1 auto; min-height:0;
  overscroll-behavior-x:contain;
  border-top:1px solid var(--line);
  position:relative;
}
.tt-inner { position:relative; width:max-content; }
.tt-timehead {
  display:flex; position:sticky; top:0; z-index:30;
  background:var(--black);
  border-bottom:1px solid var(--line);
  margin-left:92px;
  height:40px;
}
.tt-hour {
  flex:none; font-size:11px; font-weight:700; color:#9a9d92;
  border-left:1px solid var(--line);
  padding:4px 0 0 5px; position:relative;
}
.tt-hour .d { display:block; font-size:9px; letter-spacing:.14em; color:var(--green); font-weight:800; }
.tt-row { display:flex; position:relative; height:64px; border-bottom:1px solid #171717; }
.tt-rowlabel {
  position:sticky; left:0; z-index:20;
  flex:none; width:92px;
  display:flex; align-items:center;
  padding-left:14px;
  font-weight:900; font-size:11px; letter-spacing:.12em;
  background:linear-gradient(90deg, #000 78%, transparent);
  cursor:pointer;
}
.tt-lane { position:relative; flex:none; }
.tt-act {
  position:absolute; top:7px; bottom:7px;
  border:none; border-radius:7px;
  font-weight:800; font-size:11px; line-height:1.15;
  padding:4px 7px;
  display:flex; flex-direction:column; align-items:flex-start; justify-content:center;
  text-align:left;
  overflow:hidden;
  color:#000;
}
.tt-act .t { font-size:9px; font-weight:700; opacity:.72; white-space:nowrap; }
.tt-act .n { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.tt-act.c-green { background:var(--green); }
.tt-act.c-greige { background:var(--greige); }
.tt-act.c-black { background:#191919; color:var(--green); outline:1px solid var(--green); }
.tt-act.live-now { box-shadow:0 0 0 2px #fff inset; }
.tt-act .badge {
  font-size:8px; font-weight:900; letter-spacing:.1em;
  background:rgba(0,0,0,.78); color:#fff;
  padding:1px 5px; border-radius:4px; margin-bottom:2px;
}
.tt-act.c-black .badge { background:var(--green); color:#000; }
.tt-nowline {
  position:absolute; top:0; bottom:0; width:2px;
  background:#fff; z-index:25; pointer-events:none;
}
.tt-nowlabel {
  position:sticky; top:44px;
  display:inline-block;
  background:#fff; color:#000;
  font-size:9px; font-weight:900; letter-spacing:.08em;
  padding:2px 6px; border-radius:4px;
  transform:translateX(-50%);
}
.tt-hint { padding:8px 14px 12px; font-size:11px; color:#70746a; }

/* ---------- Karte ---------- */
#view-map { position:relative; }
.map-stage {
  position:relative; flex:1 1 auto; min-height:0;
  overflow:hidden; background:#000;
  touch-action:none;
}
.map-pan { position:absolute; transform-origin:0 0; will-change:transform; }
.map-pan img { display:block; width:100%; height:auto; user-select:none; -webkit-user-drag:none; pointer-events:none; }
.map-overlay { position:absolute; inset:0; }
.map-marker {
  position:absolute; transform:translate(-50%,-100%);
  background:var(--green); color:#000; border:2px solid #000;
  font-weight:900; font-size:11px; letter-spacing:.06em;
  padding:4px 8px; border-radius:7px;
  white-space:nowrap;
  box-shadow:0 2px 10px rgba(0,0,0,.5);
}
.map-marker::after {
  content:''; position:absolute; left:50%; top:100%;
  transform:translateX(-50%);
  border:6px solid transparent; border-top-color:#000;
}
.map-marker.minor { background:var(--greige); font-weight:700; }
.map-marker .live { display:block; font-size:8px; font-weight:800; max-width:130px; overflow:hidden; text-overflow:ellipsis; }
.map-me {
  position:absolute; transform:translate(-50%,-50%); pointer-events:none;
}
.map-me .acc {
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  border-radius:50%; background:rgba(0,140,255,.15); border:1px solid rgba(0,140,255,.45);
}
.map-me .dot {
  position:relative; width:16px; height:16px; border-radius:50%;
  background:#0a84ff; border:3px solid #fff;
  box-shadow:0 0 12px rgba(10,132,255,.9);
}
.map-ctrls {
  position:absolute; right:12px; bottom:44px; z-index:10;
  display:flex; flex-direction:column; gap:8px;
}
.map-ctrls button {
  width:44px; height:44px; border-radius:12px;
  background:rgba(20,20,20,.92); color:#fff;
  border:1px solid var(--line); font-size:20px; font-weight:700;
}
#btnLocate.active { background:var(--green); color:#000; }
.map-toast {
  position:absolute; left:50%; bottom:52px; transform:translateX(-50%);
  background:#fff; color:#000; font-size:12px; font-weight:700;
  padding:8px 14px; border-radius:999px; z-index:11;
  max-width:86%; text-align:center;
}
.map-disclaimer {
  position:absolute; left:12px; bottom:10px;
  font-size:10px; color:#8b8e84; z-index:10;
  background:rgba(0,0,0,.55); padding:3px 8px; border-radius:6px;
}

/* ---------- Acts ---------- */
.acts-toolbar {
  display:flex; gap:10px; padding:12px 14px; align-items:center;
}
#actSearch {
  flex:1; background:var(--panel); border:1px solid var(--line);
  color:var(--text); border-radius:999px;
  padding:9px 16px; font-size:14px; outline:none;
}
#actSearch:focus { border-color:var(--green); }
.acts-list { padding:0 14px 20px; overflow-y:auto; }
.act-card {
  width:100%;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  background:var(--panel); border:1px solid var(--line);
  border-radius:var(--radius);
  padding:12px 14px; margin-bottom:8px;
  color:var(--text); text-align:left;
}
.act-card:active { background:#1d1d1d; }
.act-card .nm { font-weight:800; font-size:14px; letter-spacing:.02em; }
.act-card .meta { display:flex; gap:6px; margin-top:4px; flex-wrap:wrap; }
.chip {
  font-size:10px; font-weight:800; letter-spacing:.08em;
  padding:2px 8px; border-radius:5px;
  background:#242424; color:#b9bcb0;
}
.chip.floor { background:var(--green); color:#000; }
.chip.live-chip { background:#fff; color:#000; }
.act-card .arrow { color:#565a50; font-size:18px; flex:none; }

/* ---------- Sheet ---------- */
.sheet-backdrop {
  position:fixed; inset:0; background:rgba(0,0,0,.6);
  z-index:90; backdrop-filter:blur(2px);
}
.sheet {
  position:fixed; left:0; right:0; bottom:0; z-index:100;
  background:#101010; border-top:2px solid var(--green);
  border-radius:18px 18px 0 0;
  max-height:82dvh;
  display:flex; flex-direction:column;
  animation:up .22s ease-out;
}
@keyframes up { from { transform:translateY(40px); opacity:.4 } to { transform:none; opacity:1 } }
.sheet-handle { width:44px; height:4px; background:#333; border-radius:2px; margin:10px auto 2px; flex:none; }
.sheet-content { overflow-y:auto; padding:12px 18px calc(20px + env(safe-area-inset-bottom)); }
.sheet h2 { font-size:22px; font-weight:900; letter-spacing:.02em; line-height:1.1; margin:6px 0 4px; }
.sheet .when { color:var(--green); font-weight:800; font-size:13px; letter-spacing:.04em; }
.sheet .meta { display:flex; gap:6px; margin:10px 0 2px; flex-wrap:wrap; }
.sheet .desc { color:#c9ccc0; font-size:14px; line-height:1.55; margin:12px 0 4px; white-space:pre-line; }
.linkrow { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.linkbtn {
  display:inline-flex; align-items:center; gap:7px;
  text-decoration:none; font-weight:800; font-size:12px; letter-spacing:.03em;
  padding:9px 13px; border-radius:9px;
  border:1px solid var(--line); color:var(--text); background:#191919;
}
.linkbtn.spotify { background:#1DB954; color:#000; border-color:#1DB954; }
.linkbtn.apple   { background:#fff; color:#000; border-color:#fff; }
.linkbtn.sc      { background:#f50; color:#000; border-color:#f50; }
.actionrow { display:flex; gap:8px; margin-top:16px; }
.actionrow button {
  flex:1; background:none; border:1px solid var(--green); color:var(--green);
  font-weight:800; font-size:12px; letter-spacing:.06em;
  padding:11px; border-radius:9px;
}
.sheet .search-note { font-size:10px; color:#70746a; margin-top:8px; }

/* ---------- Suche ---------- */
.topbar-right { display:flex; align-items:center; gap:8px; }
.btn-search {
  width:38px; height:38px; border-radius:10px; flex:none;
  background:var(--panel); border:1px solid var(--line); color:var(--text);
  display:flex; align-items:center; justify-content:center;
}
.btn-standalone { text-decoration:none; font-size:17px; font-weight:800; color:var(--green); }
.search-overlay {
  position:fixed; inset:0; z-index:120;
  background:rgba(0,0,0,.88); backdrop-filter:blur(3px);
  display:flex; flex-direction:column;
  padding:14px; padding-top:max(14px, env(safe-area-inset-top));
}
.search-head {
  display:flex; align-items:center; gap:10px;
  background:var(--panel); border:1px solid var(--green);
  border-radius:12px; padding:4px 12px;
  max-width:640px; width:100%; margin:0 auto; flex:none;
}
.search-head svg { color:#9a9d92; flex:none; }
#globalSearch {
  flex:1; background:none; border:none; outline:none;
  color:var(--text); font-size:16px; padding:11px 0;
}
#searchClose {
  background:none; border:none; color:#9a9d92; font-size:16px; padding:8px;
}
.search-results {
  overflow-y:auto; margin:10px auto 0; max-width:640px; width:100%;
}
.search-tip { color:#70746a; font-size:13px; padding:14px 6px; }
.search-group {
  font-size:10px; font-weight:900; letter-spacing:.18em; color:var(--green);
  padding:14px 6px 6px;
}
.search-item {
  display:flex; flex-direction:column; gap:2px; width:100%;
  background:var(--panel); border:1px solid var(--line);
  border-radius:10px; padding:10px 14px; margin-bottom:6px;
  color:var(--text); text-align:left;
}
.search-item:hover, .search-item:focus { border-color:var(--green); }
.si-main { font-weight:800; font-size:14px; }
.si-sub { font-size:11px; color:#9a9d92; }
.si-live { color:var(--green); }

/* ---------- Sterne / Favoriten ---------- */
.star-btn {
  flex:none; width:38px; height:38px;
  display:inline-flex; align-items:center; justify-content:center;
  background:none; border:none; border-radius:50%;
  font-size:22px; line-height:1; color:#565a50; cursor:pointer;
}
.star-btn.on { color:var(--green); }
.star-btn.big { font-size:28px; width:44px; height:44px; }
.sheet-titlerow { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; }
.tt-act .favstar { display:none; color:inherit; }
.tt-act.fav .favstar { display:inline; }
.tt-act.c-black.fav .favstar { color:var(--green); }
.tab-plan { position:relative; }
.plan-count {
  display:inline-block; margin-left:5px;
  background:var(--green); color:#000;
  font-size:10px; font-weight:900;
  min-width:16px; height:16px; line-height:16px;
  border-radius:8px; padding:0 4px; vertical-align:2px;
}

/* ---------- Mein Plan ---------- */
.plan-list { padding:12px 14px 24px; overflow-y:auto; max-width:760px; width:100%; margin:0 auto; }
.plan-day {
  font-size:11px; font-weight:900; letter-spacing:.2em; color:var(--green);
  padding:14px 2px 8px;
}
.plan-card {
  display:flex; align-items:center; gap:14px; width:100%;
  background:var(--panel); border:1px solid var(--line);
  border-radius:var(--radius); padding:12px 10px 12px 14px; margin-bottom:8px;
  color:var(--text); text-align:left;
}
.plan-card.past { opacity:.42; }
.plan-time {
  display:flex; flex-direction:column; align-items:center; flex:none;
  font-weight:900; font-size:14px; min-width:48px;
  border-right:2px solid var(--green); padding-right:12px;
}
.plan-time-end { font-size:11px; font-weight:600; color:#9a9d92; }
.plan-main { flex:1; min-width:0; }
.plan-main .nm { font-weight:800; font-size:15px; }
.plan-main .meta { display:flex; gap:6px; margin-top:5px; flex-wrap:wrap; }
.chip.clash { background:#3a2a00; color:#ffcf4d; }
.plan-empty {
  text-align:center; color:#9a9d92; font-size:14px; line-height:1.6;
  padding:48px 24px; max-width:420px; margin:0 auto;
  display:flex; flex-direction:column; gap:10px; align-items:center;
}
.plan-empty-star { font-size:52px; color:#333; line-height:1; }
.plan-empty b { color:var(--text); }

/* ---------- POI-Highlight auf Karte ---------- */
.map-marker.poi-flash { background:#fff; z-index:5; }
.map-marker.poi-flash::after { border-top-color:#fff; }
.poi-ring {
  position:absolute; left:50%; top:calc(100% + 6px);
  width:14px; height:14px; border-radius:50%;
  border:3px solid #fff;
  transform:translate(-50%,-50%);
  animation:poiPulse 1.6s ease-out infinite;
  pointer-events:none;
}
@keyframes poiPulse {
  0% { opacity:1; transform:translate(-50%,-50%) scale(.7); }
  100% { opacity:0; transform:translate(-50%,-50%) scale(2.6); }
}

/* ---------- Footer ---------- */
.foot {
  border-top:1px solid var(--line);
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  font-size:11px; color:#70746a;
}

/* ---------- Schmale Screens ---------- */
@media (max-width: 430px) {
  .tab { font-size:11px; letter-spacing:.07em; }
  .brand-name { font-size:17px; }
}

/* ---------- Desktop ---------- */
@media (min-width: 760px) {
  :root { --pxPerMin: 2.8px; }
  .brand-name { font-size:24px; }
  .tab { font-size:14px; }
  .tt-row { height:76px; }
  .tt-rowlabel { width:130px; font-size:13px; }
  .tt-timehead { margin-left:130px; }
  .tt-act { font-size:12px; }
  .acts-list { display:grid; grid-template-columns:repeat(auto-fill,minmax(310px,1fr)); gap:10px; }
  .act-card { margin-bottom:0; }
  .sheet { left:50%; right:auto; transform:translateX(-50%); width:640px; border:2px solid var(--green); border-radius:18px; bottom:24px; }
}