/* ============ Design tokens (mirrors resources/css/app.css @theme) ============ */
:root{
  --font-main:"Nocturne Serif","Iowan Old Style",Georgia,"Times New Roman",serif;
  --font-data:ui-sans-serif,system-ui,-apple-system,sans-serif;
  --primary-base:rgb(13 34 64);
  --primary:var(--primary-base);
  --primary-90:color-mix(in oklch,var(--primary-base) 88%,black);
  --surface:#fff;
  --surface-muted:color-mix(in oklch,var(--primary-base) 4%,white);
  --border:color-mix(in oklch,var(--primary-base) 14%,white);
  --border-strong:color-mix(in oklch,var(--primary-base) 40%,white);
  --text:color-mix(in oklch,var(--primary-base) 90%,black);
  --text-muted:color-mix(in oklch,var(--primary-base) 55%,white);
  --st-0:#6b7280; --st-1:#2a9d3e; --st-2:#e07b00; --st-none:var(--primary); --st-fail:#b3261e;
  --touch:2.75rem;
  --t-fast:120ms cubic-bezier(.2,0,0,1);
  --t-med:150ms cubic-bezier(.2,0,0,1);
}
*{border-radius:0!important;box-shadow:none!important;box-sizing:border-box}
html{font-family:var(--font-main);color:var(--text)}
body{margin:0;background:var(--surface-muted)}
#map{height:100dvh}

/* ---- micro-label + data typography ---- */
.lbl{font-family:var(--font-data);font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--text-muted)}
.data,input,textarea,select,button,table{font-family:var(--font-data);font-variant-numeric:tabular-nums}
input,select,textarea{font-size:max(1rem,16px)}

/* ---- flat buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;
  min-height:var(--touch);padding:0 1.1rem;border:1px solid var(--primary);
  background:var(--primary);color:#fff;font-size:.8rem;letter-spacing:.08em;
  text-transform:uppercase;cursor:pointer;text-decoration:none;
  transition:background var(--t-fast),transform var(--t-fast)}
.btn:hover{background:var(--primary-90)}
.btn:active{transform:translateY(1px)}
.btn.ghost{background:transparent;color:var(--primary)}
.btn.ghost:hover{background:var(--surface-muted)}
.btn.ghost.on{border-color:#f5c518;color:#b8860b}
.btn.sm{min-height:2rem;padding:0 .7rem;font-size:.7rem}
:focus-visible{outline:2px solid var(--primary);outline-offset:2px}

/* ---- login ---- */
#login-veil{position:fixed;inset:0;background:color-mix(in oklch,var(--primary-base) 55%,transparent);
  display:flex;align-items:center;justify-content:center;z-index:2000}
#login-card{background:var(--surface);border:1px solid var(--border-strong);
  width:min(92vw,380px);padding:2.2rem 2rem}
#login-card h1{font-family:var(--font-main);font-weight:500;font-size:1.9rem;margin:0 0 1.6rem;color:var(--primary)}
#login-card label{display:block;margin-bottom:1rem}
#login-card input{width:100%;border:1px solid var(--border);padding:.65rem .75rem;margin-top:.3rem;background:var(--surface)}
#login-card input:focus{border-color:var(--primary);outline:none}
#login-card .btn{width:100%;margin-top:.4rem}

/* ---- topbar / search omnibox ---- */
#omnibar{position:fixed;left:50%;bottom:max(14px,env(safe-area-inset-bottom));transform:translateX(-50%);
  z-index:1100;width:min(94vw,720px)}
#omnibar .bar{display:flex;align-items:stretch;background:var(--surface);border:1px solid var(--border-strong)}
#omnibar input[type=search]{flex:1;border:0;padding:.7rem .9rem;background:transparent;min-width:0}
#omnibar input:focus{outline:none}
#omnibar .count{align-self:center;padding:0 .8rem;white-space:nowrap}
#omnibar .bar>button,#omnibar .bar .menu-wrap>button{border:0;border-left:1px solid var(--border);background:var(--surface);
  padding:0 .9rem;cursor:pointer;transition:background var(--t-fast)}
#omnibar .bar>button:hover,#omnibar .bar .menu-wrap>button:hover{background:var(--surface-muted)}
.menu-wrap{position:relative;display:flex}
#btn-account,#btn-filter{display:flex;align-items:center;justify-content:center}
#account-menu{display:none;position:absolute;right:0;bottom:calc(100% + 8px);min-width:170px;
  background:var(--surface);border:1px solid var(--border-strong);z-index:1150}
#account-menu.open{display:block}
#account-menu button{display:block;width:100%;text-align:left;border:0;background:none;
  padding:.65rem .9rem;cursor:pointer;font-family:var(--font-data);font-size:.82rem;
  color:var(--text);border-bottom:1px solid var(--border);transition:background var(--t-fast)}
#account-menu button:last-child{border-bottom:0}
#account-menu button:hover{background:var(--surface-muted)}
#ac-list{display:none;background:var(--surface);border:1px solid var(--border-strong);border-bottom:0;
  max-height:260px;overflow-y:auto}
#ac-list.open{display:block}
.ac-item{display:flex;justify-content:space-between;align-items:baseline;gap:.6rem;padding:.55rem .9rem;
  cursor:pointer;font-family:var(--font-data);font-size:.85rem;border-bottom:1px solid var(--border)}
.ac-item:last-child{border-bottom:0}
.ac-item:hover,.ac-item.hi{background:var(--surface-muted)}
.ac-item small{color:var(--text-muted);font-size:.72rem;white-space:nowrap}
.ac-item.ac-create{color:var(--primary);font-weight:600}
.ac-existing{color:var(--primary);text-decoration:underline;font-size:.72rem;white-space:nowrap}
#ah-list{display:none;border:1px solid var(--border);border-top:0;margin:-.8rem 0 .8rem;max-height:220px;overflow-y:auto}
#ah-list.open{display:block}
#chips{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:.45rem}
.chip{display:inline-flex;align-items:center;gap:.4rem;background:var(--primary);color:#fff;
  font-family:var(--font-data);font-size:.72rem;letter-spacing:.05em;padding:.3rem .6rem;cursor:pointer;
  animation:chip-in var(--t-med) both}
@keyframes chip-in{from{opacity:0;transform:translateY(4px)}to{opacity:1}}
#filterpanel{background:var(--surface);border:1px solid var(--border-strong);border-bottom:0;
  padding:1.2rem;display:none;grid-template-columns:1fr 1fr;gap:1.3rem 1.4rem;
  max-height:calc(100dvh - 160px);overflow-y:auto}
#filterpanel.open{display:grid}
#filterpanel .grp.wide{grid-column:1/-1}
#filterpanel .grp>div:first-child{margin-bottom:.5rem}
#filterpanel .range{display:flex;gap:.4rem}
#filterpanel .range input{width:100%;border:1px solid var(--border);padding:.4rem}
#filterpanel .opts{display:flex;flex-wrap:wrap;gap:.3rem}
.opt{border:1px solid var(--border);background:var(--surface);padding:.3rem .55rem;cursor:pointer;
  font-family:var(--font-data);font-size:.75rem;transition:all var(--t-fast)}
.opt.on{background:var(--primary);border-color:var(--primary);color:#fff}
.opt .sq{display:inline-block;width:9px;height:9px;margin-right:.35rem;vertical-align:0}

/* ---- square markers ---- */
.mk{width:14px;height:14px;border:1.5px solid #fff;background:var(--st-none)}
.mk.s0{background:var(--st-0)}.mk.s1{background:var(--st-1)}.mk.s2{background:var(--st-2)}.mk.s9{background:var(--st-fail)}
.mk.drop{animation:mk-drop .45s cubic-bezier(.2,0,.1,1) both}
@keyframes mk-drop{0%{opacity:0;transform:translateY(-26px)}78%{opacity:1;transform:translateY(0)}88%{transform:translateY(-2px)}100%{transform:translateY(0)}}
.cluster{background:var(--primary);color:#fff;border:1.5px solid #fff;
  display:flex;align-items:center;justify-content:center;font-family:var(--font-data);
  font-size:.75rem;font-weight:600}
.cluster.drop{animation:mk-drop .45s cubic-bezier(.2,0,.1,1) both}

/* ---- modal ---- */
dialog#modal{border:1px solid var(--border-strong);padding:0;width:min(94vw,750px);
  max-height:88dvh;background:var(--surface);display:flex;flex-direction:column}
dialog#modal::backdrop{background:color-mix(in oklch,var(--primary-base) 45%,transparent)}
dialog#modal[open]{animation:dlg-in var(--t-med) both}
@keyframes dlg-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media(max-width:640px){
  dialog#modal{width:100vw;max-width:100vw;margin:auto 0 0;max-height:92dvh;border:0;border-top:2px solid var(--primary)}
  dialog#modal[open]{animation:sheet-in .2s cubic-bezier(.2,0,0,1) both}
  @keyframes sheet-in{from{transform:translateY(30%)}to{transform:none}}
}

/* Standard layout: banner, tabs, scrollable content - in that order, like
   before the gallery feature existed. Clicking the banner (JS toggles
   dialog#modal.gallery) swaps it to a full-height photo view instead: banner
   grows via flex/JS-computed height, tabbody is hidden (display:none removes
   it from the flex flow entirely), so tabs end up sitting right after the
   grown banner - i.e. pinned to the bottom, with no layout math beyond that. */
#banner{order:1}
#tabs{order:2}
#subtabs{order:3}
#tabbody{order:4}
dialog#modal.gallery #banner{flex:1}
dialog#modal.gallery #tabbody{display:none}

/* ---- banner / photo slideshow ---- */
#banner{position:relative;flex:none;height:200px;background:var(--primary);overflow:hidden;
  cursor:pointer;transition:height .4s cubic-bezier(.2,0,0,1)}
#banner .slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  opacity:0;pointer-events:none;transition:opacity .5s ease}
#banner .slide.on{opacity:1;pointer-events:auto}
/* .nav itself is just the click area - the whole edge strip (full banner
   height), not a small centered chip, so an edge click always lands on
   prev/next. .next stops short of the close button's 2.4rem corner
   (top:0,right:0,2.4rem) so it can never steal a click meant for it.
   The visible chip (background, hover) lives only on the inner .nav-ico,
   which is small and centered - the strip itself stays invisible. */
#banner .nav{position:absolute;top:0;bottom:0;z-index:2;width:3.6rem;border:0;
  background:transparent;color:#fff;cursor:pointer;padding:0;
  display:flex;align-items:center;justify-content:center;opacity:0;
  transition:opacity var(--t-fast)}
#banner:hover .nav{opacity:1}
#banner .nav.prev{left:0}
#banner .nav.next{right:0;top:2.4rem}
#banner .nav-ico{display:flex;align-items:center;justify-content:center;width:2.1rem;height:2.1rem;
  background:rgb(6 15 28/.4);font-size:1.3rem;line-height:1;transition:background var(--t-fast)}
#banner .nav:hover .nav-ico{background:rgb(6 15 28/.65)}
#banner .ov{position:absolute;inset:auto 0 0 0;z-index:1;padding:2.4rem 1.3rem .9rem;
  background:linear-gradient(transparent,rgb(6 15 28/.82));color:#fff}
#banner .dots{display:flex;gap:.35rem;margin-bottom:.55rem}
#banner .dot{width:6px;height:6px;flex:none;border:0;padding:0;border-radius:50%!important;
  background:rgb(255 255 255/.45);cursor:pointer;transition:background var(--t-fast),transform var(--t-fast)}
#banner .dot.on{background:#fff;transform:scale(1.35)}
#banner h2{font-family:var(--font-main);font-weight:500;font-size:1.45rem;margin:0;line-height:1.15}
#banner .sub{font-family:var(--font-data);font-size:.8rem;opacity:.85;margin-top:.15rem}
#banner .badge{position:absolute;top:0;left:0;z-index:2;padding:.35rem .6rem;color:#fff;
  font-family:var(--font-data);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase}
#banner .close{position:absolute;top:0;right:0;z-index:2;border:0;background:rgb(6 15 28/.55);color:#fff;
  width:2.4rem;height:2.4rem;font-size:1.15rem;cursor:pointer;transition:background var(--t-fast)}
#banner .close:hover{background:rgb(6 15 28/.8)}
/* Sits directly left of the close button - same corner treatment, a .15rem
   gap between them - clear of the .nav.next hit zone (which starts below
   this row, see #banner .nav.next's top offset). */
#banner .fav-btn{position:absolute;top:0;right:2.55rem;z-index:2;border:0;background:rgb(6 15 28/.55);
  color:#fff;width:2.4rem;height:2.4rem;font-size:1.2rem;cursor:pointer;transition:background var(--t-fast)}
#banner .fav-btn:hover{background:rgb(6 15 28/.8)}
/* Sits directly left of the favorite icon, same row/spacing pattern. It's an
   <a download> (not a <button>) so the click is a real file download, not a
   new tab/window - see the "a" in banner.onclick's closest('button, a')
   guard, which keeps this from also triggering the banner's gallery toggle. */
#banner .dl-btn{position:absolute;top:0;right:5.1rem;z-index:2;border:0;background:rgb(6 15 28/.55);
  color:#fff;width:2.4rem;height:2.4rem;font-size:1.1rem;cursor:pointer;transition:background var(--t-fast);
  display:flex;align-items:center;justify-content:center;text-decoration:none}
#banner .dl-btn:hover{background:rgb(6 15 28/.8)}
#banner .fav-btn.on{color:#f5c518}

/* ---- tabs: bottom nav bar ---- */
#tabs{display:flex;flex:none;border-bottom:1px solid var(--border);overflow-x:auto}
#tabs button{flex:1;min-height:var(--touch);border:0;background:none;cursor:pointer;
  font-family:var(--font-data);font-size:.78rem;letter-spacing:.07em;text-transform:uppercase;
  color:var(--text-muted);position:relative;white-space:nowrap;padding:0 .9rem;transition:color var(--t-fast)}
#tabs button.on{color:var(--text)}
/* Dropdown triggers (Karten, Grundbuch, Mehr) need less padding than plain
   tabs - full tab padding pushed "Mehr" too close to the modal's right edge. */
#tabs button[data-group]{padding:0 .55rem}
#tabs button.on::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--primary)}
/* Horizontal submenu strip for tab-bar groups (Karten, Grundbuch, Mehr) -
   same visual language as #tabs itself (a real row of tab-like buttons, not
   a floating dropdown box), slides open directly underneath it. Items are
   natural-width (not flex:1 like the top-level tabs) and justify to
   whichever side of #tabs the trigger sits on - see openSubtabs() in
   map.js, which toggles .align-end, so e.g. "Mehr" at the right edge opens
   a right-aligned strip instead of one starting at the far-left edge. */
#subtabs{display:flex;flex:none;height:0;overflow:hidden;background:var(--surface-muted);
  transition:height var(--t-med)}
#subtabs.open{height:2.7rem;border-bottom:1px solid var(--border)}
#subtabs.align-end{justify-content:flex-end}
#subtabs button{flex:none;min-height:2.7rem;border:0;background:none;cursor:pointer;
  font-family:var(--font-data);font-size:.74rem;letter-spacing:.05em;text-transform:uppercase;
  color:var(--text-muted);white-space:nowrap;padding:0 1rem;transition:color var(--t-fast)}
#subtabs button.on{color:var(--primary)}
#subtabs button:hover{color:var(--text)}
#tabbody{flex:1;min-height:0;overflow-y:auto;padding:1.2rem 1.3rem 1.4rem}
.pane{display:none;animation:pane-in var(--t-med) both}
.pane.on{display:block}
@keyframes pane-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

table.facts{width:100%;border-collapse:collapse;font-size:.88rem}
table.facts td{padding:.45rem .1rem;border-bottom:1px solid var(--border);vertical-align:top}
table.facts td:last-child{text-align:right}
h3.sect{font-family:var(--font-main);font-weight:500;font-size:1.05rem;margin:1.3rem 0 .5rem}
h3.sect:first-child{margin-top:0}

/* owners / extracts */
.owner{display:flex;align-items:stretch;gap:.8rem;padding:0;border-bottom:1px solid var(--border);font-size:.88rem}
.owner .pct{flex:none;width:3rem;display:flex;align-items:center;justify-content:center;text-align:center;
  background:var(--primary);color:#fff;font-family:var(--font-data);font-size:.78rem;font-weight:600}
.owner .who{font-family:var(--font-data);flex:1;padding:.6rem 0}
.owner .who small{display:block;color:var(--text-muted);font-size:.75rem;margin-top:.1rem}
.owner .deed{flex:none;display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:.4rem;padding:.6rem .2rem .6rem 0}
.transit-stop{display:flex;align-items:center;gap:.7rem;padding:.55rem 0;border-bottom:1px solid var(--border);font-size:.85rem;font-family:var(--font-data)}
.transit-stop:last-child{border-bottom:0}
.transit-icon{flex:none;width:1.7rem;height:1.7rem;border-radius:50%!important;display:flex;align-items:center;justify-content:center}
.transit-stop .meta{flex:1;min-width:0}
.transit-stop .meta small{display:block;color:var(--text-muted);font-size:.75rem;margin-top:.1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.transit-stop .dist{flex:none;color:var(--text-muted);font-size:.78rem;white-space:nowrap}
/* "Mehr" context tabs: Baumkataster tree markers + Solarpotenzial summary */
.tree-ico{font-size:15px;line-height:22px;text-align:center;text-shadow:0 1px 2px rgb(0 0 0/.45)}
.solar-bar{display:flex;height:9px;background:var(--surface-muted);border:1px solid var(--border);
  margin-bottom:.45rem;overflow:hidden}
.solar-bar span{display:block;height:100%}
.solar-dot{display:inline-block;width:.6rem;height:.6rem;vertical-align:baseline}
/* "3D" tab: custom control cluster over the Cesium canvas - same circular
   chip language as #banner's close/fav-btn/nav-ico, not Cesium's own widget
   style, so it reads as part of this app rather than a bolted-on library. */
.d3-controls{position:absolute;top:.6rem;right:.6rem;z-index:10;display:flex;flex-direction:column;
  align-items:flex-end;gap:.6rem}
.d3-ctrl{width:2.1rem;height:2.1rem;flex:none;border:0;border-radius:50%!important;background:rgb(6 15 28/.55);
  color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:1.05rem;
  line-height:1;transition:background var(--t-fast)}
.d3-ctrl:hover{background:rgb(6 15 28/.8)}
.d3-zoomgroup{display:flex;flex-direction:column;gap:.35rem}
.d3-compass{position:relative}
.d3-needle{transition:transform .1s linear}
.d3-deg{position:absolute;top:2.4rem;right:0;font-size:.62rem;color:#fff;background:rgb(6 15 28/.55);
  padding:.1rem .35rem;font-family:var(--font-data);white-space:nowrap}
.extract{display:flex;align-items:flex-start;gap:.6rem;padding:.6rem 0;border-bottom:1px solid var(--border);font-size:.82rem;font-family:var(--font-data)}
.extract .meta{flex:1;display:flex;flex-direction:column;gap:.2rem}
.extract .meta small{color:var(--text-muted)}
.extract .actions{display:flex;gap:.4rem;flex:none}
.ex-dot{width:8px;height:8px;flex:none;margin-top:.4rem;background:var(--st-none)}
.ex-dot.ex-success{background:var(--st-1)}
.ex-dot.ex-pending{background:var(--st-2)}
.ex-dot.ex-failed{background:var(--st-fail)}
.ex-dot.ex-not_found{background:var(--st-0)}
.fav-star{flex:none;color:#f5c518;cursor:pointer;font-size:1rem;line-height:1;margin-top:-.05rem}
.ex-summary{display:flex;gap:1.6rem;flex-wrap:wrap;margin-bottom:1.1rem;padding-bottom:1.1rem;border-bottom:1px solid var(--border)}
.ex-summary .data{font-size:1.15rem;margin-top:.2rem}
.ex-house{color:var(--primary);text-decoration:underline}

/* comments */
.comment{padding:.75rem 0;border-bottom:1px solid var(--border)}
.comment .body{font-family:var(--font-main);font-size:.95rem;line-height:1.5;margin-top:.25rem}
#comment-form{display:flex;flex-direction:column;gap:.5rem;margin-top:1rem}
#comment-form textarea{border:1px solid var(--border);padding:.6rem;min-height:70px;resize:vertical}
#comment-form .btn{align-self:flex-end}

/* stars burst (square stars) */
.star{position:fixed;width:7px;height:7px;background:var(--primary);pointer-events:none;z-index:3000;
  animation:star-fly .6s cubic-bezier(.15,.6,.3,1) both}
.star.gold{background:#c9a227}
@keyframes star-fly{from{opacity:1;transform:translate(0,0) rotate(0)}
  to{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(160deg)}}

/* add-house / profile dialogs */
dialog.flat{border:1px solid var(--border-strong);padding:1.4rem;width:min(92vw,420px);
  max-height:calc(100dvh - 2rem);overflow-y:auto}
dialog.flat::backdrop{background:rgb(6 15 28/.4)}
dialog.flat label{display:block;margin-bottom:.8rem}
dialog.flat input{width:100%;border:1px solid var(--border);padding:.55rem;margin-top:.25rem}
.ez-form label{display:block;margin-bottom:.8rem}
.ez-form input{width:100%;border:1px solid var(--border);padding:.55rem;margin-top:.25rem}
dialog.flat h2{font-family:var(--font-main);font-weight:500;margin:0 0 1rem;font-size:1.3rem}

.leaflet-container{font-family:var(--font-data)}
@media (prefers-reduced-motion:reduce){
  *,#banner img{animation:none!important;transition:none!important}
}