/* Statistics dashboard: layout on top of the profile pages' corporate CSS (shell.py). */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.toolbar{position:relative;margin-top:16px;display:flex;flex-direction:column;gap:10px}
.toolbar-row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.toolbar-row .spot{flex:1 1 420px}
.spot{position:relative;display:flex;align-items:center;gap:10px;background:var(--card);border:1px solid var(--line2);border-radius:14px;padding:4px 10px 4px 14px;min-width:0}
.spot:focus-within{border-color:var(--ac);box-shadow:0 0 0 3px rgba(var(--acr),.12)}
.spot .mag{color:var(--faint);flex:none}
.spot input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:400 15px var(--font);color:var(--ink);padding:9px 0}
.spot input::placeholder{color:var(--ghost2)}
.spot-results{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:60;background:var(--card);border:1px solid var(--line2);border-radius:14px;box-shadow:0 18px 50px rgba(14,143,82,.14);overflow:hidden}
.spot-item{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--line);cursor:pointer;color:var(--ink);text-decoration:none}
.spot-item:last-child{border-bottom:0}
.spot-item:hover,.spot-item.on{background:var(--tint2)}
.spot-badge{font:600 10.5px var(--mono);color:var(--muted);background:var(--bg2);border-radius:6px;padding:3px 7px;white-space:nowrap}
.spot-badge.firma{color:var(--ach);background:var(--tint)}
.spot-label{min-width:0;font-size:14px}
.spot-n{margin-left:auto;font:500 12px var(--mono);color:var(--faint);white-space:nowrap}
.spot-item.console .spot-label{color:var(--ach);font-weight:600}
.years{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);white-space:nowrap}
.years .sep{color:var(--faint)}
.years input{width:146px;border:1px solid var(--line2);border-radius:8px;padding:8px 10px;font:400 14px var(--font);color:var(--ink);background:var(--card)}
.df{position:relative;display:inline-flex;min-width:0}
.df-ph{display:none}
.years input:focus{outline:0;border-color:var(--ac);box-shadow:0 0 0 3px rgba(var(--acr),.12)}
.years .x{border:0;background:none;color:var(--faint);font-size:18px;line-height:1;cursor:pointer;padding:2px 6px;border-radius:6px}
.years .x:hover{color:#b4432f;background:var(--tint2)}
.filters-toggle{display:none}
.filters{display:flex;gap:10px;align-items:center;padding-top:12px;border-top:1px solid var(--line)}
.dropdowns{display:flex;flex-wrap:wrap;gap:8px;flex:1;min-width:0}
.dd{position:relative;flex:1 1 108px}
.dd-btn{display:flex;width:100%;align-items:center;justify-content:space-between;gap:8px;font:500 13.5px var(--font);color:var(--ink2);background:var(--card);border:1px solid var(--line2);border-radius:8px;padding:9px 12px;cursor:pointer;white-space:nowrap}
.dd-btn .t{overflow:hidden;text-overflow:ellipsis;min-width:0}
.dd-btn:hover,.dd-btn.open{border-color:var(--ac);color:var(--ach)}
.dd-btn.has{background:var(--tint);border-color:var(--ac);color:var(--ach)}
.dd-btn svg{flex:none;transition:transform .15s}
.dd-btn.open svg{transform:rotate(180deg)}
.dd-menu{position:fixed;z-index:70;background:var(--card);border:1px solid var(--line2);border-radius:14px;box-shadow:0 18px 50px rgba(14,143,82,.14);max-height:min(420px,70vh);overflow-y:auto;padding:6px;min-width:220px}
.dd-menu label{display:flex;align-items:center;gap:9px;padding:7px 10px;border-radius:8px;cursor:pointer;font-size:13.5px;color:var(--ink)}
.dd-menu label .ot{flex:1;min-width:0;white-space:normal;line-height:1.3}
.dd-menu label:hover{background:var(--tint2)}
.dd-menu input{accent-color:var(--ac);width:15px;height:15px;margin:0}
.dd-menu .grp{font:700 10.5px var(--font);letter-spacing:.04em;text-transform:uppercase;color:var(--faint);padding:8px 10px 4px}
.dd-menu .sub{padding-left:22px;border-left:1px solid var(--line);margin-left:13px}
.dd-menu .sub label{font-size:12.5px;color:var(--ink2)}
.dd-menu .sub .sub label{font-size:12px;color:var(--muted)}
.dd-row{display:flex;align-items:center;gap:2px}
.dd-row label{flex:1}
.dd-x{flex:none;border:0;background:none;color:var(--faint);cursor:pointer;padding:7px 4px;border-radius:6px;display:inline-flex;align-items:center}
.dd-x:hover{color:var(--ach);background:var(--tint2)}
.dd-x svg{transition:transform .15s}
.dd-x.open svg{transform:rotate(90deg)}
.dd-x-spacer{flex:none;width:20px}
.dd-search{position:sticky;top:0;background:var(--card);padding:4px 4px 8px;z-index:1}
.dd-search input{width:100%;border:1px solid var(--line2);border-radius:9px;padding:8px 10px;font:400 13.5px var(--font);color:var(--ink)}
.dd-search input:focus{outline:0;border-color:var(--ac)}
.dd-hint{font-size:11px;color:var(--ach);padding:0 10px 6px}
.filter-actions{display:flex;gap:8px;flex:none;padding-left:12px;border-left:1px solid var(--line2)}
.filter-actions button{font:600 13.5px var(--font);border-radius:8px;padding:9px 14px;cursor:pointer;border:1px solid var(--line2);background:var(--card);color:var(--ink2);white-space:nowrap}
.filter-actions button:hover{border-color:var(--ac);color:var(--ach)}
.filter-actions button.primary{background:var(--ac);border-color:var(--ac);color:#fff}
.filter-actions button.primary:hover{background:var(--ach)}
.filter-actions button.primary.dirty{box-shadow:0 0 0 4px rgba(var(--acr),.18)}
.chips{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.chip{display:inline-flex;align-items:center;gap:6px;font:500 12.5px var(--font);color:var(--ach);background:var(--tint);border:1px solid rgba(var(--acr),.3);border-radius:999px;padding:4px 6px 4px 11px}
.chip button{border:0;background:none;color:inherit;cursor:pointer;line-height:1;padding:2px 4px;border-radius:50%;font-size:14px}
.chip button:hover{background:rgba(var(--acr),.15)}
.chips .clear{font:500 12.5px var(--font);color:var(--muted);background:none;border:1px solid var(--line2);border-radius:999px;padding:5px 11px;cursor:pointer}
.chips .clear:hover{border-color:#b4432f;color:#b4432f}
.chips a.handoff{display:inline-flex;align-items:center;gap:6px;font:600 12.5px var(--font);color:#fff;background:var(--ac);border-radius:999px;padding:6px 13px;text-decoration:none}
.chips a.handoff:hover{background:var(--ach)}
.chips a.handoff.approx{background:var(--card);color:var(--ach);border:1px solid var(--ac)}
.dd-menu label .cnt{margin-left:auto;font:500 11.5px var(--mono);color:var(--faint)}
.dd-menu input[type=radio]{accent-color:var(--ac);width:15px;height:15px;margin:0}
.related-sec .st-nav{margin-top:10px}
.tiles{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;margin-top:18px}
.tile{background:var(--card);border:1px solid var(--line);border-radius:14px;display:flex;flex-direction:column;min-height:400px;position:relative;min-width:0}
.tile.wide{grid-column:1/-1}
.tile-h{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:14px 18px;border-bottom:1px solid var(--line)}
.tile-h h2{font:600 15px var(--font);margin:0;color:var(--ink);letter-spacing:-.01em}
.tile-h>*{display:flex;gap:8px;align-items:center}
.seg{display:inline-flex;background:var(--bg2);border-radius:999px;padding:2px}
.seg button{font:600 11.5px var(--font);color:var(--muted);background:none;border:0;border-radius:999px;padding:4px 10px;cursor:pointer;white-space:nowrap}
.seg button.on{background:var(--ac);color:#fff}
.seg button:hover:not(.on){color:var(--ach)}
.tile-cta{font:600 12px var(--font);color:var(--muted);background:transparent;border:1px solid var(--line2);border-radius:999px;padding:4px 11px;white-space:nowrap;opacity:.72;transition:all .15s}
.tile-cta:hover{color:var(--ach);border-color:var(--ac);opacity:1}
.tile-cta.on{color:#fff;background:var(--ac);border-color:var(--ac);opacity:1;box-shadow:0 1px 6px rgba(var(--acr),.28)}
.tile-cta.on:hover{background:var(--ach)}
.list{flex:1;overflow-y:auto;min-height:0;max-height:340px}
.tile.loading::after{content:"";position:absolute;inset:0;background:rgba(245,246,247,.55);border-radius:14px;z-index:5}
.row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 18px;cursor:pointer;border-left:3px solid transparent}
.row:hover{background:var(--tint2)}
.row.on{background:var(--tint);border-left-color:var(--ac)}
.row .nm{flex:1;font-size:14px;color:var(--ink2);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row.on .nm{color:var(--ach);font-weight:600}
.row .ct{display:flex;align-items:center;gap:10px;flex:none}
.row .ct i{display:block;width:64px;height:6px;border-radius:3px;background:var(--tint)}
.row .ct i b{display:block;height:100%;border-radius:3px;background:var(--ac)}
.row .ct span{font:500 13px var(--mono);color:var(--muted);min-width:58px;text-align:right}
.tree .row{padding-left:8px}
.tree .tg{border:0;background:none;color:var(--faint);cursor:pointer;width:26px;height:26px;border-radius:6px;display:inline-flex;align-items:center;justify-content:center;flex:none}
.tree .tg:hover{background:var(--tint2);color:var(--ach)}
.tree .tg svg{transition:transform .15s}
.tree .tg.open svg{transform:rotate(90deg)}
.tree .sub{display:none;background:var(--bg2)}
.tree .sub.open{display:block}
.tree .sub .row{padding-left:34px}
.tree .sub .row .nm{font-size:13px}
.tree .sub .sub .row{padding-left:60px;background:var(--bg)}
.tree .sub .sub .row .nm{font-size:12.5px;color:var(--muted)}
.chart{flex:1;position:relative;padding:14px 16px 4px;min-height:260px;min-width:0;width:100%}
.chart.tall{min-height:300px}
.chart canvas{max-width:100%}
.foot{font-size:11.5px;color:var(--faint);text-align:center;margin:0;padding:4px 14px 12px}
.ssr-note{font-size:12.5px;color:var(--muted);padding:0 18px 12px;margin:0}
.js .ssr,.js .ssr-note{display:none}
table.st.ssr{margin:8px 18px;width:calc(100% - 36px)}
.matrix{padding:12px 16px;overflow-x:auto}
.matrix table{width:100%;border-collapse:separate;border-spacing:3px;table-layout:fixed;min-width:560px}
.matrix th,.matrix td{font-size:12px;text-align:center;padding:8px 4px;border-radius:7px}
.matrix th{color:var(--muted);font-weight:500}
.matrix th.corner{font-size:10.5px;line-height:1.4;width:110px;text-align:right;padding-right:8px}
.matrix td{cursor:pointer;font-weight:600;color:var(--ink);transition:transform .12s}
.matrix td:hover{transform:scale(1.08);outline:2px solid var(--ac)}
.matrix td.on{outline:3px solid var(--ach)}
.matrix td.z{color:var(--ghost2);cursor:default}
.matrix td.z:hover{transform:none;outline:0}
.map-wrap{position:relative;padding:8px 10px 10px}
.map{width:100%;height:420px}
.map svg{width:100%;height:100%;display:block;cursor:grab;touch-action:pan-y}
.map svg.grabbing{cursor:grabbing}
.map path{cursor:pointer;transition:fill .12s;vector-effect:non-scaling-stroke}
.map path:hover{filter:brightness(1.12)}
.map-tip{position:absolute;pointer-events:none;z-index:30;background:var(--card);border:1px solid var(--line2);border-radius:9px;padding:6px 10px;font-size:12.5px;color:var(--muted);white-space:nowrap;box-shadow:0 8px 24px rgba(14,143,82,.14)}
.map-tip b{display:block;color:var(--ink);font-size:13.5px}
.map-legend{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:center;padding:8px 8px 0;font-size:11.5px;color:var(--muted)}
.map-legend .ti{font-weight:600;color:var(--ink2);margin-right:4px}
.map-legend i{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:5px;vertical-align:-2px;border:1px solid rgba(0,0,0,.06)}
/* The density legend and the zoom controls share the line below the map, legend left + zoom right. */
.map-foot{display:flex;align-items:center;justify-content:space-between;gap:10px 16px;flex-wrap:wrap;padding:10px 8px 0}
.map-foot .map-legend{padding:0;flex:1 1 auto;min-width:0}
.map-foot .seg[data-zoom="map"]{flex:none}
/* Center the Bundesländer/Kreise toggle in the map tile header (h2 left, CTA right stay in flow). */
@media(min-width:641px){
  #tile-map .tile-h{position:relative}
  #tile-map .tile-h>.seg[data-seg="map"]{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);margin:0}
}
.agentblock code{font:400 12.5px var(--mono);background:var(--tint2);border:1px solid var(--line);border-radius:6px;padding:2px 6px}
.agentblock p{margin:0;font-size:14px;color:var(--ink2);line-height:1.7}
.empty{padding:28px;text-align:center;color:var(--faint);font-size:13px}
@media(max-width:900px){.tiles{grid-template-columns:minmax(0,1fr)}.tile.wide{grid-column:auto}.dropdowns{flex-wrap:wrap}.dd{flex:1 1 160px}}
@media(max-width:640px){
  html,body{overflow-x:hidden;max-width:100%}
  .toolbar,.toolbar-row,.filters,.dropdowns{min-width:0;max-width:100%}
  /* Dissolve the toolbar-row so search + dates become direct children of the (column) toolbar;
     then order them so the date range sits inside the collapsible filter panel (see below). */
  .toolbar-row{display:contents}
  .toolbar-row .spot{flex:0 0 auto;width:100%;max-width:100%;order:1}
  .filters-toggle{order:2}
  .years{order:3}
  .filters{order:4}
  .chips{order:5}
  /* The date pickers are hidden by default on mobile and revealed with the rest of the filters
     only once the user opens the "Filter" panel (desktop keeps them inline next to the search). */
  .toolbar .years{display:none}
  .toolbar:has(.filters.open) .years{display:grid}
  /* Native <input type=date> will not flex-shrink on iOS WebKit and expands the whole row
     (which then clips the full-width search box too). A grid track forces them to the column
     width, so it can never overflow. Label left, date input fills the rest, two stacked rows. */
  .years{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:8px;white-space:normal}
  .years .df{display:block;width:100%;min-width:0}
  /* Calendar icon = clear "this is a date picker" cue; iOS shows no indicator on its own. */
  .years input{width:100%;min-width:0;max-width:100%;padding-right:42px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%238a8f8c' stroke-width='2' stroke-linecap='round'%3E%3Crect x='3' y='4.5' width='18' height='17' rx='2'/%3E%3Cpath d='M16 2.5v4M8 2.5v4M3 10h18'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 13px center;background-size:18px}
  /* Use our own calendar icon, hide the native one (iOS shows none anyway, Chromium would double). */
  .years input::-webkit-calendar-picker-indicator{opacity:0}
  /* Hide the native format text while the field is empty and unfocused, so only our "Datum wählen"
     overlay shows; the real value (and the native format while editing) stays visible. */
  .years input:not(.has-value):not(:focus){color:transparent}
  /* Overlay placeholder for the empty field (iOS shows an empty box otherwise). Hidden once a date
     is set or while the field is focused (then the native format shows). */
  .years .df-ph{display:block;position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--ghost2);font-size:16px;pointer-events:none}
  .years .df input.has-value~.df-ph,.years .df input:focus~.df-ph{display:none}
  .years .x{justify-self:start}
  .filters-toggle{display:block;font:600 14px var(--font);color:var(--ink);background:var(--card);border:1px solid var(--line2);border-radius:12px;padding:11px;cursor:pointer}
  .filters{display:none;border-top:0;padding-top:0}.filters.open{display:flex;flex-direction:column}
  .dropdowns{display:grid;grid-template-columns:1fr 1fr;width:100%}
  .filter-actions{border-left:0;padding-left:0}
  .dd-btn{max-width:none;width:100%;justify-content:space-between}
  .filter-actions{width:100%}.filter-actions button.primary{flex:1}
  .tile-cta{display:none}
  .map{height:300px}
  .row .ct i{display:none}
  .years input,.spot input{font-size:16px}
  .chart canvas{touch-action:pan-y}
}