:root{
  --ink:#0c211c; --ink-2:#1a332d; --muted:#2f4a44; --muted2:#3d5650;
  --paper:#ffffff; --paper-2:#f4f8f7; --line:#cfdcd7;
  --mint:#0CB897; --mint-dk:#056b58; --mint-soft:#e6f7f2;
  --amber:#a65d00; --amber-soft:#fdf3e2;
  --map-bg:#eaf1ee;
  --dur:200ms; --ease:cubic-bezier(.16,1,.3,1);
  --shadow:0 18px 50px rgba(4,30,24,.28); --shadow-sm:0 6px 18px rgba(4,30,24,.12);
  --deep-h:46vh;   /* Hoehe des unteren Info-Bereichs im Tiefenmodus */
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;font-family:'Noto Sans',Verdana,Arial,Helvetica,sans-serif;
  background:var(--map-bg);color:var(--ink);-webkit-font-smoothing:antialiased}
#map{position:absolute;inset:0}
.maplibregl-ctrl-attrib{font-size:11px;opacity:.9}
.tnum{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
.hidden{display:none!important}

/* Ladebildschirm: liegt ueber der (leeren) Karte, bis alle Daten im Browser sind.
   Blockiert Klicks auf die Karte, damit niemand vor Datenankunft einen Standort setzt. */
#loading{position:absolute;inset:0;z-index:30;display:flex;align-items:center;justify-content:center;padding:24px;
  background:rgba(247,250,249,.62);color:var(--muted);font-size:14px;transition:opacity .45s,visibility .45s}
#loading.off{opacity:0;visibility:hidden}
.load-card{width:340px;max-width:100%;padding:28px 28px 24px;text-align:center;background:#fff;
  border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);
  display:flex;flex-direction:column;align-items:center;gap:18px}
.load-ring{position:relative;width:96px;height:96px;margin-top:2px}
.load-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.load-ring circle{fill:none;stroke-width:6;stroke-linecap:round}
.load-ring .track{stroke:var(--line)}
.load-ring .bar{stroke:var(--mint-dk);stroke-dasharray:263.9;stroke-dashoffset:263.9;transition:stroke-dashoffset .25s linear}
/* Gesamtgroesse unbekannt (kein Content-Length, keine Angabe vom Plugin): Ring kreist statt zu fuellen */
.load-ring.indet .bar{stroke-dashoffset:198;transition:none;animation:spin 1.1s linear infinite;transform-origin:50% 50%}
.load-ring.indet .load-pct{display:none}
.load-pct{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:17px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:-.2px}
.load-step{margin:0;font-size:14.5px;font-weight:600;color:var(--ink);line-height:1.4;min-height:1.4em}
.load-sub{margin:-8px 0 0;font-size:12.5px;color:var(--muted);line-height:1.5}
.load-err{margin:0;font-size:13.5px;color:var(--ink-2);line-height:1.5}
.spin{width:22px;height:22px;border-radius:50%;border:2.5px solid rgba(12,33,28,.12);border-top-color:var(--mint);
  animation:spin .8s linear infinite}
.spin{width:22px;height:22px;border-radius:50%;border:2.5px solid rgba(12,33,28,.12);border-top-color:var(--mint);
  animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- Zentraler Einstieg ---------- */
#entry{position:absolute;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;
  padding:24px;pointer-events:none;transition:opacity var(--dur) var(--ease)}
.entry-stack{display:flex;flex-direction:column;align-items:center;width:560px;max-width:100%;pointer-events:none}
.entry-card{position:relative;pointer-events:auto;width:100%;
  padding:28px 28px 22px;text-align:center;background:#fff;border:1px solid var(--line);
  border-radius:18px;box-shadow:var(--shadow);
  transform:translateY(0);transition:transform var(--dur) var(--ease),opacity var(--dur) var(--ease)}
@keyframes cardIn{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
/* Einstieg erst, wenn die Daten da sind; die Karte faehrt dann ein */
body:not(.data-ready) #entry{visibility:hidden;opacity:0}
body.data-ready .entry-card{animation:cardIn .7s var(--ease)}
body.selected #entry{display:none}
@media (prefers-reduced-motion: reduce){.entry-card{animation:none}}
.kicker{font-size:11.5px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:var(--mint-dk);margin-bottom:14px}
.entry-card h1{font-size:22px;line-height:1.3;font-weight:800;letter-spacing:-.3px;margin:0 0 16px;color:var(--ink)}
.brand{display:flex;flex-direction:column;align-items:center;gap:8px}
.brand img,.brand svg{display:block;height:36px;width:auto;max-width:100%}
.brand .slogan{margin:0;font-size:13px;font-weight:700;color:var(--ink-2);letter-spacing:.01em}
.entry-card .brand{margin-bottom:18px}
.p-brand{padding:4px 0 16px;margin-bottom:4px;border-bottom:1px solid var(--line)}
.p-brand img,.p-brand svg{display:block;width:100%;height:auto}

/* Animierte Maus-Klick-Geste: Cursor klickt -> Punkt erscheint -> Welle nach aussen */
.click-anim{position:relative;width:90px;height:76px;margin:14px auto 8px;pointer-events:none}
.click-anim .spot{position:absolute;left:40%;top:36%;width:12px;height:12px;transform:translate(-50%,-50%)}
.click-anim .dot{position:absolute;inset:0;border-radius:50%;background:var(--mint);
  box-shadow:0 1px 4px rgba(12,184,151,.5);transform:scale(0);opacity:0;
  animation:spotPop 2.6s var(--ease) infinite}
.click-anim .spot::after{content:'';position:absolute;inset:0;border-radius:50%;border:2px solid var(--mint);
  opacity:0;animation:spotWave 2.6s var(--ease) infinite}
.click-anim .cursor{position:absolute;left:40%;top:36%;width:24px;height:28px;
  fill:#1c3b33;stroke:#fff;stroke-width:1.3;filter:drop-shadow(0 3px 5px rgba(20,40,34,.28));
  animation:curMove 2.6s var(--ease) infinite}
@keyframes spotPop{0%,42%{transform:scale(0);opacity:0}50%{transform:scale(1.25);opacity:1}
  58%{transform:scale(1);opacity:1}88%{transform:scale(1);opacity:1}100%{transform:scale(1);opacity:0}}
@keyframes spotWave{0%,44%{transform:scale(.4);opacity:0}52%{opacity:.7}82%,100%{transform:scale(3.6);opacity:0}}
@keyframes curMove{
  0%{transform:translate(9px,13px) scale(1)}
  34%{transform:translate(0,0) scale(1)}
  44%{transform:translate(0,0) scale(.82)}
  56%{transform:translate(0,0) scale(1)}
  80%{transform:translate(0,0) scale(1)}
  100%{transform:translate(9px,13px) scale(1)}
}
.cta{margin:0;font-size:15px;font-weight:600;color:var(--ink-2);pointer-events:none;
  text-shadow:
    -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff,
    0 2px 10px rgba(247,250,249,.95)}
/* Adress-Suchfeld im Startbildschirm muss klickbar sein (Karte darunter nicht) */
.entry-field{pointer-events:auto;max-width:100%;margin:0 auto;text-align:left;
  animation:entryPulse 2.8s ease-out infinite}
@keyframes entryPulse{
  0%{box-shadow:0 0 0 0 rgba(12,184,151,.4)}
  70%{box-shadow:0 0 0 14px rgba(12,184,151,0)}
  100%{box-shadow:0 0 0 0 rgba(12,184,151,0)}
}
.field.entry-field:focus-within{animation:none}
body.selected .entry-field{animation:none}
.src{font-size:10.5px;color:var(--muted2);margin-top:16px;line-height:1.5}
@media (prefers-reduced-motion: reduce){
  .click-anim .dot,.click-anim .spot::after,.click-anim .cursor{animation:none}
  .click-anim .dot{transform:scale(1);opacity:1}
  .click-anim .cursor{transform:translate(0,0)}
  .entry-field{animation:none}
}

/* Suchfeld */
.field{position:relative;display:flex;align-items:center;gap:8px;background:var(--paper);border:1.5px solid var(--line);
  border-radius:13px;padding:0 12px;transition:border-color var(--dur),box-shadow var(--dur)}
.field.big{padding:2px 14px}
.field:focus-within{border-color:var(--mint);box-shadow:0 0 0 4px var(--mint-soft)}
.field .ic{width:19px;height:19px;flex:none;fill:none;stroke:var(--muted);stroke-width:2;stroke-linecap:round}
.field input{flex:1;min-width:0;background:transparent;border:0;outline:0;color:var(--ink);font-family:inherit;font-weight:500;
  font-size:16px;padding:13px 2px}
.field.big input{font-size:16px;padding:15px 2px}
.field input::placeholder{color:var(--muted);opacity:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.entry-field input::placeholder{white-space:normal;line-height:1.3;overflow:visible;text-overflow:unset}
/* Autocomplete-Dropdown */
.ac-dd{position:fixed;z-index:9999;background:var(--paper);
  border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);overflow:hidden;max-height:300px;overflow-y:auto}
.ac-item{padding:14px 16px;font-size:15px;color:var(--ink);cursor:pointer;line-height:1.35;
  min-height:44px;border-bottom:1px solid var(--paper-2)}
.ac-item:last-child{border-bottom:0}
.ac-item:hover,.ac-item.on{background:var(--mint-soft)}
.ac-item.ac-busy,.ac-item.ac-busy:hover{color:var(--muted);cursor:default;background:var(--paper)}
/* Google-Maps Autocomplete-Dropdown (haengt an body) – ueber alle Panels legen */
.pac-container{z-index:9999!important;border-radius:12px;margin-top:6px;border:1px solid var(--line);
  box-shadow:var(--shadow);font-family:'Noto Sans',Verdana,Arial,Helvetica,sans-serif;background:var(--paper)}
.pac-item{padding:12px 14px;font-size:15px;color:var(--ink);cursor:pointer;min-height:44px;border-top:1px solid var(--paper-2)}
.pac-item:hover,.pac-item-selected{background:var(--mint-soft)}
.pac-item-query{font-size:13.5px;color:var(--ink);font-weight:600}

.pinmark{width:10px;height:10px;border-radius:50%;flex:none}
.pinmark.a{background:var(--mint)}
.pinmark.b{background:var(--amber)}
.clearx{background:none;border:0;color:var(--muted2);font-size:20px;cursor:pointer;padding:0 2px;line-height:1}
.clearx:hover{color:var(--ink)}

/* Segmented control */
.seg{display:flex;gap:4px;background:var(--paper-2);border:1px solid var(--line);border-radius:11px;padding:4px;margin-top:14px}
.seg button{flex:1;border:0;background:transparent;color:var(--muted);font-family:inherit;font-weight:600;font-size:13.5px;
  padding:10px 8px;border-radius:8px;cursor:pointer;transition:all var(--dur) var(--ease)}
.seg button:hover{color:var(--ink)}
.seg button.active{background:var(--paper);color:var(--ink);box-shadow:var(--shadow-sm)}
.seg.sm button{font-size:12.5px;padding:8px 6px}
.entry-card .seg{background:rgba(255,255,255,.42);border-color:rgba(255,255,255,.5)}
.entry-card .seg button.active{background:#fff}

/* ---------- Ergebnis-Panel ---------- */
#panel{position:absolute;top:0;left:0;z-index:10;width:420px;max-width:94vw;height:100%;
  display:none;flex-direction:column;gap:12px;padding:18px 16px 0;overflow:hidden;background:var(--paper);
  box-shadow:var(--shadow);transform:translateX(-16px);opacity:0}
body.selected #panel{display:flex;animation:slideIn var(--dur) var(--ease) forwards}
@keyframes slideIn{to{transform:translateX(0);opacity:1}}
#result{flex:1;min-height:0;overflow-y:auto}
#result::-webkit-scrollbar{width:8px}
#result::-webkit-scrollbar-thumb{background:var(--line);border-radius:8px}

.p-head{display:flex;align-items:center;gap:10px}
.back{flex:none;width:44px;height:44px;border-radius:11px;border:1px solid var(--line);background:var(--paper);
  color:var(--ink);font-size:20px;cursor:pointer;transition:all var(--dur)}
.back:hover{background:var(--paper-2);border-color:var(--mint)}
.head-addr{flex:1;display:flex;align-items:center;gap:9px;min-width:0;padding:0 4px;
  font-size:14.5px;font-weight:700;color:var(--ink);line-height:1.3}
.head-addr>span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hint{font-size:13px;color:var(--muted);background:var(--mint-soft);border:1px solid #cdeee4;
  border-radius:10px;padding:10px 12px;line-height:1.4}
.hint b{color:var(--mint-dk)}

.p-controls{display:flex;flex-direction:column;gap:10px}
/* Umbruch erlaubt: mit dem 500-m-Chip sind es sieben Knoepfe, die im 404-px-Panel und
   erst recht auf dem Telefon nicht mehr sicher in eine Zeile passen. */
.radius{display:flex;align-items:center;justify-content:space-between;gap:6px 10px;flex-wrap:wrap}
.radius>span{font-size:12px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);font-weight:700}
.chips{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.chips button{border:1px solid var(--line);background:var(--paper);color:var(--ink-2);font-family:inherit;font-weight:600;
  font-size:14px;padding:10px 13px;min-height:44px;min-width:44px;border-radius:10px;cursor:pointer;transition:all var(--dur) var(--ease)}
.chips button:hover{color:var(--ink);border-color:var(--mint-dk)}
.chips button.active{background:var(--mint-dk);border-color:var(--mint-dk);color:#fff}

/* Result */
#result{display:flex;flex-direction:column;gap:12px}
.card{background:var(--paper);border:1px solid var(--line);border-radius:15px;padding:15px}
.addr{display:flex;align-items:flex-start;gap:8px;font-size:13.5px;font-weight:600;line-height:1.35;color:var(--ink)}
.addr .tag{font-size:10px;font-weight:800;padding:2px 7px;border-radius:6px;flex:none;margin-top:1px}
.addr .tag.a{background:var(--mint-soft);color:var(--mint-dk)}
.addr .tag.b{background:var(--amber-soft);color:var(--amber)}
.blocktitle{font-size:12px;text-transform:uppercase;letter-spacing:.7px;color:var(--muted);font-weight:700;
  margin:0 0 11px;display:flex;align-items:center;gap:8px}
.blocktitle::after{content:'';flex:1;height:1px;background:var(--line)}

.kpis{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.kpi{background:var(--paper-2);border:1px solid var(--line);border-radius:11px;padding:11px 12px}
.kpi .v{font-size:21px;font-weight:800;letter-spacing:-.5px;line-height:1.1;color:var(--ink)}
.kpi .l{font-size:12px;color:var(--muted);margin-top:4px;line-height:1.3}
.kpi .bench{font-size:10.5px;margin-top:7px;font-weight:600;display:flex;align-items:center;gap:5px;color:var(--muted)}
.kpi .bench .delta{padding:1px 6px;border-radius:6px}
.delta.good{background:var(--mint-soft);color:var(--mint-dk)}
.delta.tough{background:var(--amber-soft);color:var(--amber)}
.delta.flat{background:var(--paper-2);color:var(--muted)}
/* Orte – editorial Liste mit Hairline-Trennern (kein Akzentbalken, kein Slide) */
.orte{display:flex;flex-direction:column}
.orte .row{position:relative;display:flex;align-items:baseline;gap:12px;width:100%;padding:14px 2px;min-height:44px;cursor:pointer;
  text-align:left;background:none;border:0;border-top:1px solid var(--line)}
.orte .row:first-child{border-top:0}
.orte .row .name{flex:1;font-size:13.5px;font-weight:600;color:var(--ink)}
.orte .row .name small{display:block;color:var(--muted2);font-weight:500;font-size:11px;margin-top:2px}
.orte .row .val{text-align:right;white-space:nowrap}
.orte .row .val b{font-size:14.5px;font-weight:700;color:var(--ink)}
.orte .row .val small{display:block;color:var(--mint-dk);font-size:11px;font-weight:600;margin-top:2px}
.orte .row:hover .name,.orte .row:hover .val b{color:var(--mint-dk)}
.orte .none{font-size:12px;color:var(--muted);font-style:italic;padding:4px 2px}
.lead{font-size:12px;color:var(--muted);line-height:1.5}

.btn{width:100%;border:1.5px solid var(--mint-dk);background:var(--mint-dk);color:#fff;font-family:inherit;font-weight:700;
  font-size:15px;padding:14px;min-height:48px;border-radius:11px;cursor:pointer;transition:all var(--dur) var(--ease)}
.btn:hover{background:var(--mint-dk);border-color:var(--mint-dk)}
.btn.ghost{background:transparent;color:var(--mint-dk)}
.btn.ghost:hover{background:var(--mint-soft);color:var(--mint-dk)}

/* Vergleichstabelle */
.cmp{width:100%;border-collapse:collapse;font-size:12.5px}
.cmp th,.cmp td{padding:9px 8px;text-align:right;border-bottom:1px solid var(--line)}
.cmp th:first-child,.cmp td:first-child{text-align:left;color:var(--muted);font-weight:500}
.cmp thead th{font-size:11px;font-weight:800}
.cmp thead th.a{color:var(--mint-dk)}
.cmp thead th.b{color:var(--amber)}
.cmp td .vv{font-weight:800;font-size:14px;color:var(--ink)}
.cmp td.win{background:var(--mint-soft);border-radius:6px}
.cmp td.win .vv{color:var(--mint-dk)}
.cmp .sec td{padding-top:13px;border-bottom:0;color:var(--muted2);font-size:10.5px;text-transform:uppercase;letter-spacing:.7px;font-weight:700}

.p-foot{flex:none;font-size:12.5px;color:var(--muted);line-height:1.5;
  padding:12px 0 calc(14px + env(safe-area-inset-bottom));border-top:1px solid var(--line);background:var(--paper)}
.p-foot p{margin:0}
/* In WordPress sitzt unten links der runde Usercentrics-Button (Privatsphaere).
   Footer-Text und Links ruecken auf dieser Seite nach rechts, damit nichts verdeckt wird. */
body.bod-standortradar .p-foot{padding-left:72px}
.p-legal{display:flex;gap:8px 18px;flex-wrap:wrap;margin-top:6px}
.p-legal a{color:var(--mint-dk);font-weight:700;text-decoration:none;
  min-height:44px;display:inline-flex;align-items:center}
.p-legal a:hover{text-decoration:underline}

/* Karten-Marker (Puls) */
.mk{position:relative;width:16px;height:16px}
.mk .dot{position:absolute;inset:0;border-radius:50%;background:#fff;border:2.5px solid var(--mint);box-shadow:0 1px 6px rgba(0,0,0,.5)}
.mk.b .dot{border-color:var(--amber)}
.mk .ring{position:absolute;inset:0;border-radius:50%;border:2px solid var(--mint);animation:ring 2s var(--ease) infinite}
.mk.b .ring{border-color:var(--amber)}
/* Tiefenmodus: gefuellter Standort-Punkt + Label (Nummer + Ort) statt nur Farbe */
.mk-deep .dot{background:var(--locc,var(--mint));border-color:#fff;box-shadow:0 1px 5px rgba(0,0,0,.35)}
.mk-deep .ring{border-color:var(--locc,var(--mint))}
/* Pille in der DUNKLEN Standortfarbe (--loccd): weisser Text kommt damit auf
   >= 4,5:1 Kontrast (WCAG 2 AA), die hellen Farben waren zu schwach lesbar. */
.mk-deep .mk-label{position:absolute;left:50%;bottom:calc(100% + 7px);transform:translateX(-50%);
  background:var(--loccd,var(--locc,var(--mint)));color:#fff;font-size:11px;font-weight:700;line-height:1;white-space:nowrap;
  padding:4px 8px;border-radius:999px;box-shadow:0 3px 10px rgba(4,30,24,.28);pointer-events:none;letter-spacing:.1px}
.mk-deep .mk-label::after{content:'';position:absolute;left:50%;top:100%;transform:translateX(-50%);
  border:4px solid transparent;border-top-color:var(--loccd,var(--locc,var(--mint)))}
@keyframes ring{0%{transform:scale(.7);opacity:.7}100%{transform:scale(3);opacity:0}}

/* Tiefen-Marker als "Radar": rotierender Suchstrahl + nach aussen laufender Puls.
   Der Kreis ist geographisch an den Einzugsradius gekoppelt (Groesse setzt
   sizeDeepMarkers in app.js), der Sweep bestreicht also exakt das Analysegebiet. */
/* WICHTIG: position:absolute beibehalten (kommt von .maplibregl-marker). Mit
   position:relative ruecken mehrere Marker im Layout-Fluss untereinander ->
   Marker 2 haengt dann um die Hoehe von Marker 1 zu tief (Punkt nicht im Kreiszentrum). */
.mk-radar{position:absolute;top:0;left:0;width:76px;height:76px;pointer-events:none}
.mk-radar .r-dot{position:absolute;left:50%;top:50%;width:12px;height:12px;
  transform:translate(-50%,-50%);border-radius:50%;background:var(--locc,var(--mint));
  border:2.5px solid #fff;box-shadow:0 1px 6px rgba(0,0,0,.4)}
/* innere Distanzringe (der aeussere Kreis kommt von der Einzugsgebiets-Linie) */
.mk-radar .r-grid{position:absolute;inset:25%;border-radius:50%;
  border:1px solid color-mix(in srgb,var(--locc,var(--mint)) 42%,transparent)}
.mk-radar .r-grid::before{content:'';position:absolute;inset:33%;border-radius:50%;
  border:1px solid color-mix(in srgb,var(--locc,var(--mint)) 34%,transparent)}
.mk-radar .r-sweep{position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 0deg,
    transparent 0deg,transparent 235deg,
    color-mix(in srgb,var(--locc,var(--mint)) 4%,transparent) 275deg,
    color-mix(in srgb,var(--locc,var(--mint)) 42%,transparent) 356deg,
    color-mix(in srgb,var(--locc,var(--mint)) 85%,transparent) 360deg);
  animation:rsweep 3.2s linear infinite}
.mk-radar .r-pulse{position:absolute;inset:0;border-radius:50%;
  border:2px solid var(--locc,var(--mint));animation:rpulse 3.2s ease-out infinite}
/* Label haengt am Zentrum (nicht am Rand des grossen Kreises) */
.mk-radar .mk-label{bottom:auto;left:50%;top:50%;
  transform:translate(-50%,calc(-100% - 13px))}
@keyframes rsweep{to{transform:rotate(360deg)}}
@keyframes rpulse{0%{transform:scale(.1);opacity:.75}75%{opacity:0}100%{transform:scale(1.06);opacity:0}}

/* deck tooltip */
.deck-tooltip{font-size:12px!important;background:#fff!important;color:var(--ink)!important;
  border:1px solid var(--line)!important;border-radius:9px!important;padding:9px 11px!important;
  max-width:250px;line-height:1.5;font-family:'Noto Sans',Verdana,Arial,Helvetica,sans-serif!important;box-shadow:var(--shadow)!important}

/* Maßstab (ScaleControl) anpassen */
.maplibregl-ctrl-scale {
  background-color: rgba(255, 255, 255, 0.85);
  border: 2px solid var(--ink);
  border-top: none;
  color: var(--ink);
  font-weight: 700;
  font-size: 11px;
  padding: 2px 6px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

/* ---------- Modus-Umschalter (Standort <-> Tiefenanalyse) ---------- */
#modeSwitch{position:absolute;z-index:16;top:18px;left:50%;transform:translateX(-50%);
  display:flex;gap:4px;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);
  border:1px solid var(--line);border-radius:12px;padding:4px;box-shadow:var(--shadow-sm)}
#modeSwitch button{border:0;background:transparent;color:var(--muted);font-family:inherit;font-weight:700;
  font-size:13.5px;padding:9px 16px;border-radius:9px;cursor:pointer;transition:all var(--dur) var(--ease);white-space:nowrap}
#modeSwitch button:hover{color:var(--ink)}
#modeSwitch button.active{background:var(--mint);color:#fff;box-shadow:0 4px 12px rgba(12,184,151,.32)}

/* In der Tiefenanalyse: Einstieg + Standort-Panel weg, Tiefen-Panel an */
body.mode-tief #entry{opacity:0;pointer-events:none}
body.mode-tief #panel{display:none!important}
#deepPanel{display:none}
body.mode-tief #deepPanel{display:flex}

/* Tiefenmodus: Karte bleibt voll hoch (sonst rechnet das deck.gl-Overlay mit anderer
   Canvas-Hoehe als Maplibre -> Marker/Kreis-Versatz). Panel liegt nur darueber. */
body.mode-tief #deepPanel{top:auto;bottom:0;left:0;right:0;width:100%;max-width:none;height:var(--deep-h);
  box-shadow:0 -14px 40px rgba(4,30,24,.16);animation:riseUp var(--dur) var(--ease) forwards}
/* Maplibre-Bedienelemente ueber das Panel heben */
body.mode-tief .maplibregl-ctrl-bottom-right{bottom:var(--deep-h)}
@keyframes riseUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
/* Bedienleiste horizontal direkt unter der Karte */
body.mode-tief .p-head{display:none}
body.mode-tief #deepPanel .p-controls{flex-direction:row;flex-wrap:wrap;align-items:center;gap:10px 16px;
  position:sticky;top:-16px;z-index:3;margin:-16px -16px 2px;padding:16px 16px 10px;
  background:var(--paper);border-bottom:1px solid var(--line)}
body.mode-tief #deepPanel .radius{display:flex;align-items:center;gap:8px}
body.mode-tief #deepPanel .ctl-row{flex:1;min-width:280px}
body.mode-tief #deepPanel #deepSearchField{flex:1;min-width:180px}
body.mode-tief .deep-hint{display:none}
body.mode-tief #deepPanel .p-foot{display:none}

/* Marker je Modus ein-/ausblenden (Standort-Marker vs. Tiefen-Marker) */
body.mode-tief .mk-std{display:none!important}
body.mode-standort .mk-deep{display:none!important}

/* ---------- Tiefenanalyse-Panel ---------- */
#deepPanel{position:absolute;top:0;left:0;z-index:10;width:430px;max-width:96vw;height:100%;
  flex-direction:column;gap:12px;padding:16px;overflow-y:auto;background:var(--paper);
  box-shadow:var(--shadow);animation:slideIn var(--dur) var(--ease) forwards}
#deepPanel::-webkit-scrollbar{width:8px}
#deepPanel::-webkit-scrollbar-thumb{background:var(--line);border-radius:8px}
.pinmark.deep{background:linear-gradient(135deg,var(--mint),var(--amber))}
.field.sm input{font-size:14px;padding:11px 2px}
.deep-hint{margin:0;font-size:11px;color:var(--muted2);line-height:1.45}

#deepBody{display:flex;flex-direction:column;gap:12px}
.deep-empty{font-size:13px;color:var(--muted);background:var(--mint-soft);border:1px solid #cdeee4;
  border-radius:11px;padding:13px 14px;line-height:1.5}
/* Standort-Karten nebeneinander (Tiefenmodus, untere Leiste) */
.loc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:12px;align-items:start}

/* Standort-Karte: Trennung ueber Weissraum + sanfte Elevation statt Rahmen/Links-Strip */
.loc-card{background:var(--paper);border-radius:14px;padding:13px 14px 12px;box-shadow:var(--shadow-sm)}
.loc-head{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.loc-tag{flex:none;width:24px;height:24px;border-radius:8px;display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:800;color:#fff;background:var(--locc,var(--mint))}
.loc-id{flex:1;min-width:0}
.loc-name{font-size:17px;font-weight:800;letter-spacing:-.3px;line-height:1.2;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.loc-meta{color:var(--muted);font-weight:500;font-size:11.5px;margin-top:1px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.loc-rm{flex:none;border:0;background:none;color:var(--muted2);font-size:18px;line-height:1;cursor:pointer;padding:2px 4px}
.loc-rm:hover{color:var(--amber)}
/* Kennzahlen als eine kompakte Flaeche mit Haarlinien (kein Karten-in-Karten, wenig Padding) */
.loc-metrics{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);
  border-radius:10px;overflow:hidden;margin-bottom:10px}
.loc-m{background:var(--paper-2);padding:7px 10px}
.loc-m .v{font-size:15px;font-weight:800;letter-spacing:-.3px;line-height:1.15;color:var(--ink);
  display:flex;align-items:baseline;gap:3px}
.loc-m .l{font-size:10px;color:var(--muted);margin-top:2px;line-height:1.2}
.loc-m .v2{font-size:11px;font-weight:600;color:var(--muted);margin-top:2px;display:flex;align-items:baseline;gap:3px}
.loc-m .v2 b{color:var(--ink-2);font-weight:800}

.loc-sub{font-size:10.5px;text-transform:uppercase;letter-spacing:.8px;color:var(--muted2);font-weight:700;margin:2px 0 6px}
.demo-row{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;padding:6px 0;border-top:1px solid var(--line)}
.demo-row:first-of-type{border-top:0}
.demo-row .dl{color:var(--muted)}
.demo-row .dv{font-weight:700;color:var(--ink);text-align:right}
.demo-row .dv small{font-weight:500;color:var(--muted2)}

/* Standort-Kurzbeschreibung (online recherchiert) */
.loc-brief{font-size:12.5px;line-height:1.55;color:var(--ink-2);background:var(--paper-2);
  border-radius:10px;padding:10px 12px;margin-bottom:11px}
.loc-brief.loading{display:flex;align-items:center;gap:8px;color:var(--muted);font-style:italic}
.spin-sm{flex:none;width:13px;height:13px;border-radius:50%;border:2px solid var(--line);
  border-top-color:var(--mint);animation:spin .7s linear infinite}
.cdist{color:var(--muted2);font-weight:600}

.comp-main .cm{font-size:12px;color:var(--muted);margin-top:2px;display:flex;align-items:center;gap:5px}
.comp-main .cm b{color:var(--ink-2);font-weight:700}
/* Auto-Basis-Recherche: Status + Basisdaten inline */
.comp-base{font-size:11.5px;color:var(--ink-2);margin-top:4px;line-height:1.4;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.comp-base .bdot{flex:none;width:7px;height:7px;border-radius:50%;background:var(--muted2)}
.comp-base.loading .bdot{background:var(--mint);animation:bpulse 1s ease-in-out infinite}
.comp-base.done .bdot{background:var(--mint)}
.comp-base.err .bdot{background:var(--amber)}
.comp-base.na{color:var(--muted2)}
.comp-base .bk{color:var(--muted)}
.comp-base b{color:var(--ink);font-weight:700}
@keyframes bpulse{0%,100%{opacity:.35}50%{opacity:1}}
.comp-research{flex:none;border:1.5px solid var(--mint);background:var(--mint-soft);color:var(--mint-dk);
  font-family:inherit;font-weight:700;font-size:10.5px;padding:6px 9px;border-radius:8px;cursor:pointer;white-space:nowrap;
  transition:all var(--dur)}
.comp-research:hover{background:var(--mint);color:#fff}
.comp-research:disabled{opacity:.6;cursor:default}

/* N-Spalten-Vergleich */
.cmpN{width:100%;border-collapse:collapse;font-size:13px;table-layout:fixed}
.cmpN th,.cmpN td{padding:7px 10px;text-align:right;border-bottom:1px solid var(--line)}
.cmpN th:first-child,.cmpN td:first-child{text-align:left;color:var(--ink-2);font-weight:600;width:240px;
  font-size:12.5px;line-height:1.3}
.cmpN thead th{font-size:11px;font-weight:800}
.cmpN td .vv{font-weight:700;font-size:15px;color:var(--ink)}
.cmpN .sec td{padding-top:14px;border-bottom:0;color:var(--muted2);font-size:10px;text-transform:uppercase;letter-spacing:.6px;font-weight:700}
.cmpN .colchip{display:inline-block;width:9px;height:9px;border-radius:3px;vertical-align:middle;margin-right:4px}

/* "+ Standort"-Knopf: nur mobil sichtbar (klappt dort das Suchfeld auf) */
.madd{display:none}

/* Schwerpunkt-Dropdown + Adressfeld in einer Reihe */
.ctl-row{display:flex;gap:8px;align-items:stretch}
.ctl-row .field.sm{flex:1;min-width:0}
.selctl{flex:none;max-width:46%;border:1.5px solid var(--line);border-radius:13px;background:var(--paper);
  color:var(--ink);font-family:inherit;font-weight:600;font-size:13px;padding:0 30px 0 12px;cursor:pointer;
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235f7d75' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 9px center;background-size:15px}
.selctl:focus{outline:0;border-color:var(--mint);box-shadow:0 0 0 4px var(--mint-soft)}

/* Tiefenanalyse: eine konsolidierte, dichte Matrix (Spalte = Standort) */
.cmp-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -3px}
.cmpN thead th{vertical-align:bottom;padding-bottom:9px}
.cmpN thead th:first-child{width:240px}
.cmpN thead th .th-loc{display:flex;align-items:center;gap:6px}
.cmpN thead th .loc-tag.sm{width:22px;height:22px;border-radius:7px;font-size:12px}
.cmpN thead th .th-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  text-align:left;font-size:15px;font-weight:800;letter-spacing:-.2px;color:var(--ink)}
.cmpN thead th .th-sub{text-align:left;color:var(--muted);font-weight:500;font-size:11px;margin-top:3px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cmpN thead th .loc-rm{flex:none;font-size:16px;padding:0 1px}

/* Zahlenzellen: große Werte, Bestwert über Schriftgewicht (kein Deko-Grün) */
.cmpN td.num{text-align:right;vertical-align:middle}
.cmpN td.num .vv{font-weight:500;font-size:16px;color:var(--ink);letter-spacing:-.3px;font-variant-numeric:tabular-nums}
.cmpN td.num.best .vv{font-weight:800}
.cmpN td.num .vv.na{color:var(--muted2);font-weight:500;font-size:14px}

/* Section-Kopf mit Icon + Quelle (Vertrauen) */
.cmpN .sec td{padding-top:16px}
.cmpN .sec .sec-h{display:inline-flex;align-items:center;gap:6px;color:var(--ink-2);font-size:11px;
  text-transform:uppercase;letter-spacing:.6px;font-weight:800}
.cmpN .sec .sec-i{width:15px;height:15px;fill:none;stroke:var(--mint);stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;flex:none}
.cmpN .sec .sec-src{display:block;color:var(--muted2);font-size:10px;font-weight:500;
  text-transform:none;letter-spacing:0;margin-top:3px;line-height:1.4}

/* Text-Zellen (Beschreibung, Konkurrenz) linksbuendig, umbrechend */
.cmpN td.dcell{text-align:left;vertical-align:top;white-space:normal;font-size:12px;line-height:1.5;color:var(--ink-2)}
.cmpN td.dcell .cn2{display:block;font-weight:700;color:var(--ink);font-size:12.5px}
.cmpN td.dcell .cl2{display:block;color:var(--muted);font-size:11px;margin-top:1px}
.cmpN td.dcell .dmuted{color:var(--muted2);font-style:italic}
.cmpN td.dcell .dbadge{margin:4px 0 0;margin-left:0}
.lq-load{color:var(--mint-dk);font-weight:600}

/* ---------- Tiefenrecherche-Bericht ---------- */
#research{position:absolute;inset:0;z-index:30;display:flex;align-items:center;justify-content:center;
  padding:24px;background:rgba(8,24,20,.42);backdrop-filter:blur(3px);animation:fadein var(--dur) ease}
@keyframes fadein{from{opacity:0}to{opacity:1}}
.rs-card{position:relative;width:620px;max-width:100%;max-height:88vh;overflow-y:auto;background:var(--paper);
  border-radius:18px;box-shadow:var(--shadow);padding:26px 28px 24px;animation:cardIn .4s var(--ease)}
.rs-x{position:absolute;top:14px;right:16px;border:0;background:none;font-size:24px;line-height:1;color:var(--muted2);cursor:pointer}
.rs-x:hover{color:var(--ink)}
.rs-head{font-size:11.5px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--mint-dk);margin-bottom:4px}
.rs-title{font-size:21px;font-weight:800;letter-spacing:-.4px;line-height:1.2;color:var(--ink);margin:0 0 4px;padding-right:24px}
.rs-meta{font-size:12px;color:var(--muted);margin-bottom:16px}
.rs-loading{display:flex;flex-direction:column;align-items:center;gap:14px;padding:46px 0;color:var(--muted);font-size:13.5px;text-align:center}
.rs-sec{margin-top:18px}
.rs-sec h4{font-size:11px;text-transform:uppercase;letter-spacing:.9px;color:var(--muted2);font-weight:700;margin:0 0 9px;
  display:flex;align-items:center;gap:8px}
.rs-sec h4::after{content:'';flex:1;height:1px;background:var(--line)}
.rs-sec p{font-size:13.5px;line-height:1.6;color:var(--ink-2);margin:0 0 8px}
.rs-chips{display:flex;flex-wrap:wrap;gap:6px}
.rs-chip{font-size:12px;font-weight:600;background:var(--mint-soft);color:var(--mint-dk);padding:5px 10px;border-radius:20px}
.rs-kv{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:13px}
.rs-kv .k{color:var(--muted);font-weight:600}
.rs-kv .v{color:var(--ink);font-weight:600}
.rs-err{background:var(--amber-soft);color:#9a5a12;border-radius:11px;padding:13px 14px;font-size:13px;line-height:1.5}
.rs-raw{font-size:12px;line-height:1.6;white-space:pre-wrap;color:var(--ink-2);background:var(--paper-2);
  border:1px solid var(--line);border-radius:10px;padding:12px}
.rs-ul{margin:0 0 4px;padding-left:18px;font-size:13px;line-height:1.55;color:var(--ink-2)}
.rs-ul li{margin:0 0 4px}
.rs-subsec{margin:0 0 10px}
.rs-subsec:last-child{margin-bottom:0}
.rs-sublbl{display:block;font-size:11.5px;font-weight:700;color:var(--muted);margin:0 0 4px}
.rs-meta-sec .rs-kv{font-size:12px;color:var(--muted)}
.rs-meta-sec .rs-kv .v{font-weight:500;color:var(--muted)}

/* ---------- Insta-Modus (?insta=1): Reel-tauglicher Ausschnitt ---------- */
/* Ohne jede Bedienung: kein "+ Standort", keine Controls, keine Karten-Elemente.
   Safe Zones: Hook unter der IG-Kopfzeile, Tabellen-Ende ueber Caption/Aktionsleiste,
   Sprecher-Kreis links (rechts liegt die Reels-Aktionsleiste). */
#hook,#speaker,#credit{display:none}
/* Quellenzeile am oberen Bildrand: zwischen Statusleiste und Reels-Kopfzeile, mittig
   (links steht "Reels", rechts das Kamera-Symbol). Unten waere sie vom Sprecher-Bild
   verdeckt. Klein und in Regular, gelesen werden soll der Hook. */
body.insta #credit{display:block;position:absolute;z-index:12;left:0;right:0;
  top:calc(env(safe-area-inset-top) + 4.6vh);text-align:center;
  font-size:calc(9.5*var(--u));font-weight:400;letter-spacing:.1px;color:var(--ink);
  text-shadow:0 1px 4px rgba(0,0,0,.55);pointer-events:none}
/* Hook im typischen IG-Text-Overlay-Look: Hintergrund nur hinter den Textzeilen
   (box-decoration-break:clone), kein durchgehender Kasten. */
/* Seitenabstand beachtet, dass das Zeilen-Padding der Spans (14px) ueber den
   Textkasten hinausragt -> Pillen enden trotzdem mit Luft zur Bildkante. */
body.insta #hook{display:block;position:absolute;z-index:12;top:calc(env(safe-area-inset-top) + 11.5vh);
  /* Volle Breite (nur die schmale 4,5-%-Zone links und rechts): der Hook soll wirken.
     Er endet dafuer oberhalb von 26 % der Hoehe, wo die Reels-Aktionsleiste beginnt.
     Die 24px sind der Startwert, fitInstaHook() verkleinert bei langen Ortsnamen. */
  left:max(30px,4.5%);right:max(30px,4.5%);text-align:center;font-size:24px;line-height:1.36;
  /* Schwarz auf Weiss, unabhaengig vom Dark Mode: der Hook liegt auf der Karte, nicht
     auf dem Panel, und soll dort mit vollem Kontrast stehen. */
  font-weight:800;letter-spacing:-.35px;color:#000}
/* Der Hook beginnt unter der Instagram-Kopfzone: obere 210-250 von 1920 px.
   11,5vh liegt knapp unter der 220-px-Marke der meisten Angaben und laesst Puffer. */
body.insta #hook span{display:inline;background:#fff;padding:6px 14px;
  border-radius:12px;-webkit-box-decoration-break:clone;box-decoration-break:clone;
  box-shadow:var(--shadow-sm)}
/* Sprecher-Kreis bewusst NICHT gerendert: unten links bleibt der Platz einfach frei,
   dort wird spaeter das Video/der Sprecher-Ausschnitt eingeblendet. */
/* ---------- Kopfzeile mobil/Insta ----------
   Ein Farbpunkt statt einer Nummer stellt die Verbindung zum Karten-Label her. Nummern
   lesen sich bei zwei Standorten wie ein Ranking, und die Farbflaeche hinter dem ganzen
   Namen war zu dominant gegenueber den Zahlen darunter. */
.cmpN .th-pill{display:inline-block;background:none;color:var(--ink);
  padding:0;font-size:10px;font-weight:800;line-height:1.3;
  letter-spacing:-.1px;text-align:center;word-break:break-word;hyphens:auto}
.cmpN .th-pill i{display:inline-block;width:.7em;height:.7em;border-radius:50%;
  background:var(--locc,var(--mint));margin-right:.45em;vertical-align:baseline}
body.dark .cmpN .th-pill{color:#fff}
/* Kennzahl-Bezeichnungen rechtsbuendig, die Standortspalten zentriert: Bezeichnung und
   erster Wert stossen so an derselben Kante zusammen, das Auge liest ohne Luecke weiter.
   Abschnittsueberschriften laufen ueber alle Spalten und bleiben links.
   Die Regeln fuehren body.compact mit, damit sie den Compact-Block weiter unten
   ueberstimmen (gleiche Klassenzahl waere sonst ein Gleichstand). */
body.compact.mode-tief .cmpN.pill tbody td:first-child{text-align:right;padding-right:10px}
body.compact.mode-tief .cmpN.pill tbody tr.sec td{text-align:left;padding-right:0}
body.compact.mode-tief .cmpN.pill th:not(:first-child),
body.compact.mode-tief .cmpN.pill td:not(:first-child){
  text-align:center;padding-left:6px;padding-right:6px}
body.compact.mode-tief .cmpN.pill td.num{text-align:center;padding-left:6px}
body.compact.mode-tief .cmpN.pill thead th .th-loc{justify-content:center}
/* Bricht ein Ortsname um, stuenden die Nummern sonst auf verschiedenen Hoehen */
body.compact.mode-tief .cmpN.pill thead th{vertical-align:top}
/* Einzugsgebiet im leeren Eck der Kopfzeile: gilt fuer jede Zeile darunter */
.cmpN .cmp-unit{display:inline-block;font-size:10px;font-weight:600;letter-spacing:.3px;
  text-transform:uppercase;color:var(--muted)}
body.compact.mode-tief .cmpN.pill thead th .th-sub{margin-left:0;margin-top:4px;text-align:center}

/* Aufklapp-Frage ueber der Praxis-Liste: der Pfeil zeigt zu, dass da noch etwas kommt.
   Zugeklappt gestartet, das Auffalten im Reel ist der eigentliche Reveal. */
.cmpN .rev-tog{display:inline-flex;align-items:center;gap:6px;background:none;border:0;
  padding:0;margin:0;font:inherit;color:var(--ink);text-transform:none;letter-spacing:-.1px;
  font-weight:800;cursor:pointer;text-align:left}
.cmpN .rev-tog svg{flex:none;width:1.05em;height:1.05em;fill:none;stroke:currentColor;
  stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;
  transition:transform .22s var(--ease)}
.cmpN .rev-tog.on svg{transform:rotate(90deg)}
.cmpN .bigrow.off{display:none}
/* Kennzahlen im Reel: erst unsichtbar, dann beim Hochzaehlen einblenden */
.cmpN td.num.pre .vv{opacity:0}
.cmpN td.num.pop .vv{animation:numpop .32s var(--ease) both}
@keyframes numpop{from{opacity:0;transform:scale(.86)}to{opacity:1;transform:none}}

/* Groesste Praxen: kompakter Anhang unter den Kennzahlen. Liegt bewusst im unteren
   Bereich, den Caption und Aktionsleiste teilweise verdecken duerfen. */
body.insta .cmpN .bigsec td{padding-top:14px}
body.insta .cmpN .bigsec .sec-h{color:var(--muted);font-size:10.5px;letter-spacing:.5px}
/* Stern in der Praxiszeile in Textfarbe statt Gold: das Gold zieht im Reel den Blick
   von den Kennzahlen weg. */
body.insta .cmpN .bigrow .star1 svg{fill:currentColor}
body.insta .cmpN .bigrow td{padding-top:5px;padding-bottom:5px}
/* Rang zurueckgenommen ueber Gewicht/Groesse, nicht ueber Graustufe */
body.insta .cmpN .bigrow td:first-child{color:var(--muted2);font-weight:400;font-size:12px}
/* Praxisnamen sind lang (Ketten, Ortszusatz) -> drei Zeilen und Worttrennung,
   damit nicht schon nach dem ersten Wort abgeschnitten wird. */
body.insta .cmpN .bigrow .cn2{font-size:11.5px;line-height:1.25;white-space:normal;
  word-break:break-word;hyphens:auto;text-align:center;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}
body.insta .cmpN .bigrow .cl2{font-size:10.5px;margin-top:2px}

/* Karte laesst sich im Reel schieben und zoomen (Mausrad/Ziehen), zeigt aber keine
   Infokarten oder Tooltips: die Klick-/Hover-Auswertung ist in app.js abgeschaltet. */
body.insta .maplibregl-canvas{cursor:grab}
body.insta .maplibregl-canvas:active{cursor:grabbing}
body.insta #pcard{display:none!important}
body.insta #modeSwitch{display:none}
body.insta .maplibregl-ctrl-group,body.insta .maplibregl-ctrl-scale{display:none!important}
/* Quellen-/OSM-Attribution lenkt im Reel ab -> ausblenden.
   WICHTIG: Quellenhinweis ("© OpenStreetMap contributors, © CARTO") dann in die Caption. */
body.insta .maplibregl-ctrl-attrib{display:none!important}
body.insta #deepPanel .p-controls{display:none}
body.insta .loc-rm{display:none}       /* keine Interaktion im Reel-Ausschnitt */
/* Rechts Schutzzone fuer die Aktionsleiste (Like, Kommentar, Teilen, Ton):
   160 von 1080 px = 14,8 % der Breite, deshalb 16 % mit 76px als Untergrenze.
   Unten Luft fuer die Caption; dass dieser Bereich teilweise verdeckt wird, ist gewollt. */
/* Links die schmale Schutzzone (40 von 1080 px). Das negative Margin des Bereichs
   (-14px) ist dabei schon eingerechnet. */
body.insta #deepBody{padding-right:max(76px,16%)!important;
  padding-left:max(14px,4.4%)!important;
  padding-bottom:calc(20vh + env(safe-area-inset-bottom))!important}
body.insta .covnote{display:none}

/* Kompakter 2-Standorte-Vergleich: Karte oben, unteres 50-vh-Sheet. Kein Modus-Umschalter,
   keine Karten-Bedienelemente, keine Radius-Chips. Ortsnamen bleiben stehen, nur der
   Kennzahlen-Bereich scrollt.
   Haengt an body.compact statt an einer Breiten-Abfrage: der Insta-Ausschnitt wird bei
   540x960 aufgenommen und braucht dieses Layout trotzdem (JS: syncCompact). */
body.compact{--deep-h:50vh}
body.compact #modeSwitch{display:none}
body.compact .maplibregl-ctrl-group{display:none!important}   /* Zoom-Knoepfe */
body.compact .maplibregl-ctrl-scale{display:none!important}   /* Massstab ("100 km") */
body.compact #deepPanel{width:100%;max-width:100%}
body.compact.mode-tief #deepPanel{display:flex;flex-direction:column;overflow:hidden;
  padding:10px 14px 0;border-radius:16px 16px 0 0}
body.compact.mode-tief #deepPanel .p-controls{position:static;margin:0;padding:0 0 9px;
  gap:8px 10px;border-bottom:1px solid var(--line);flex:none}
body.compact.mode-tief #deepPanel .selctl{display:none}       /* Schwerpunkt: Desktop-Feature */
body.compact.mode-tief #deepPanel .radius{display:none}       /* Einzugsgebiet: Desktop-Feature */
/* Suche eingeklappt hinter "+ Standort" */
body.compact .madd{display:inline-flex;align-items:center;border:1.5px dashed var(--muted2);
  background:none;color:var(--mint-dk);font-family:inherit;font-weight:700;font-size:13px;
  padding:8px 13px;border-radius:11px;cursor:pointer}
body.compact #deepPanel.search-open .madd{border-style:solid;border-color:var(--mint);
  background:var(--mint-soft)}
body.compact.mode-tief #deepPanel .ctl-row{display:none}
body.compact.mode-tief #deepPanel.search-open .ctl-row{display:flex;min-width:100%}
body.compact.mode-tief #deepPanel #deepSearchField{min-width:100%}
body.compact.mode-tief #deepBody{flex:1;min-height:0;overflow-y:auto;margin:0 -14px;
  padding:0 14px calc(12px + env(safe-area-inset-bottom))}
body.compact.mode-tief #deepBody .card{border:0;border-radius:0;padding:0}
body.compact.mode-tief #deepBody .blocktitle{display:none}
body.compact.mode-tief .cmp-scroll{overflow:visible;margin:0}
/* Dichte Zeilen; Ausrichtung setzen die .pill-Regeln oben (Label rechts, Spalten mittig) */
body.compact.mode-tief .cmpN th,body.compact.mode-tief .cmpN td{padding:5px 6px 5px 0;text-align:left}
body.compact.mode-tief .cmpN th:first-child,body.compact.mode-tief .cmpN td:first-child{width:34%}
body.compact.mode-tief .cmpN td.num{text-align:left;padding-left:28px}
body.compact.mode-tief .cmpN td.num .vv{font-size:15px}
body.compact.mode-tief .cmpN .sec td{padding-top:12px}
/* Ortsnamen bleiben beim Scrollen oben stehen; lieber umbrechen als abschneiden */
body.compact.mode-tief .cmpN thead th{position:sticky;top:0;background:var(--paper);z-index:2;padding-top:10px}
body.compact.mode-tief .cmpN thead th .th-name{white-space:normal;font-size:14px;line-height:1.2;
  overflow:hidden;text-overflow:clip;word-break:break-word;hyphens:auto}
body.compact.mode-tief .cmpN thead th .th-loc{align-items:flex-start}
body.compact.mode-tief .cmpN thead th .loc-tag.sm{margin-top:1px}
body.compact.mode-tief .cmpN thead th .th-sub{margin-left:28px}
body.compact #research{padding:0}
body.compact .rs-card{max-height:100vh;height:100%;border-radius:0;width:100%}

/* ---------- Insta: Groessen skalieren mit der Fensterbreite ----------
   Aufgenommen wird bei 540 CSS-px (Retina -> 1080 px Video), entworfen wurde bei 405.
   In festen px waere die Schrift im Video ein Drittel kleiner als im Entwurf. --u ist
   1/405 der Breite, alle Werte sind dadurch Vielfache davon und sehen bei jeder
   Aufnahmegroesse gleich aus. */
/* Etwas flacher als im normalen Mobil-Layout (50vh): der Gewinn geht an das Kartenfenster,
   damit ueber der Tabelle das Transkript-Band Platz hat. */
body.insta{--u:calc(100vw / 405);--deep-h:46vh}
body.insta.compact.mode-tief .cmpN th,
body.insta.compact.mode-tief .cmpN td{padding:calc(5*var(--u)) calc(6*var(--u)) calc(5*var(--u)) 0}
body.insta.compact.mode-tief .cmpN th:first-child,
body.insta.compact.mode-tief .cmpN td:first-child{font-size:calc(12.5*var(--u))}
body.insta.compact.mode-tief .cmpN.pill tbody td:first-child{padding-right:calc(10*var(--u))}
body.insta.compact.mode-tief .cmpN.pill td.num{padding-left:calc(6*var(--u));padding-right:calc(6*var(--u))}
body.insta.compact.mode-tief .cmpN td.num .vv{font-size:calc(15*var(--u))}
body.insta.compact.mode-tief .cmpN .sec td{font-size:calc(10*var(--u));padding-top:calc(12*var(--u))}
body.insta.compact.mode-tief .cmpN thead th .th-sub{font-size:calc(11*var(--u))}
body.insta.compact .cmpN .th-pill{font-size:calc(10*var(--u))}
body.insta.compact .cmpN .cmp-unit{font-size:calc(10*var(--u))}
body.insta.compact .cmpN .rev-tog{font-size:calc(11.5*var(--u))}
body.insta .cmpN .bigsec td{padding-top:calc(14*var(--u))}
body.insta .cmpN .bigsec .sec-h{font-size:calc(10.5*var(--u))}
body.insta .cmpN .bigrow td{padding-top:calc(5*var(--u));padding-bottom:calc(5*var(--u))}
body.insta .cmpN .bigrow td:first-child{font-size:calc(12*var(--u))}
body.insta .cmpN .bigrow .cn2{font-size:calc(11.5*var(--u))}
body.insta .cmpN .bigrow .cl2{font-size:calc(10.5*var(--u));margin-top:calc(2*var(--u))}
/* Karten-Label des Standorts gehoert zum selben Bild und skaliert mit.
   Kein bottom setzen: die Radar-Regel oben stellt es auf auto und positioniert ueber top;
   beides zusammen wuerde dem Label eine feste Hoehe von wenigen Pixeln geben. */
body.insta .mk-deep .mk-label{font-size:calc(11*var(--u));padding:calc(4*var(--u)) calc(8*var(--u))}
body.insta .mk-deep .mk-label::after{border-width:calc(4*var(--u))}
body.insta .mk-radar .mk-label{transform:translate(-50%,calc(-100% - 13*var(--u)))}

/* ---------- Praxis-Infokarte ---------- */
#pcard{position:absolute;z-index:18;width:288px;max-width:calc(100vw - 28px);
  background:var(--paper);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);
  padding:15px 16px 14px;font-size:13px;color:var(--ink-2)}
#pcard .pc-x{position:absolute;top:6px;right:6px;border:0;background:none;font-size:22px;line-height:1;
  color:var(--muted);cursor:pointer;padding:10px;min-width:44px;min-height:44px}
#pcard .pc-x:hover{color:var(--ink)}
#pcard .pc-name{font-size:16px;font-weight:800;letter-spacing:-.3px;line-height:1.25;color:var(--ink);
  padding-right:40px;margin-bottom:3px}
#pcard .pc-sub{font-size:12.5px;color:var(--muted);font-weight:600;margin-bottom:9px}
#pcard .pc-rate{display:flex;align-items:center;gap:6px;font-size:13.5px;font-weight:700;color:var(--ink);margin-bottom:9px}
#pcard .pc-rate small{color:var(--muted);font-weight:600;font-size:12px}
#pcard .pc-rate .none{color:var(--muted);font-weight:600;font-size:12.5px}
#pcard .pc-addr{display:flex;gap:7px;font-size:13px;line-height:1.4;color:var(--ink-2);margin-bottom:12px}
#pcard .pc-addr svg{flex:none;width:14px;height:14px;margin-top:2px;stroke:var(--muted);fill:none;stroke-width:2}
#pcard .pc-acts{display:flex;flex-wrap:wrap;gap:7px}
#pcard .pc-btn{display:inline-flex;align-items:center;gap:6px;text-decoration:none;font-size:13px;font-weight:700;
  padding:12px 14px;min-height:44px;border-radius:9px;border:1.5px solid var(--line);color:var(--ink);background:var(--paper);
  cursor:pointer;transition:all var(--dur)}
#pcard .pc-btn svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2}
#pcard .pc-btn:hover{border-color:var(--mint);color:var(--mint-dk)}
#pcard .pc-btn.primary{background:var(--mint-dk);border-color:var(--mint-dk);color:#fff}
#pcard .pc-btn.primary:hover{background:var(--mint-dk);border-color:var(--mint-dk);color:#fff}
#pcard .pc-grip{display:none}

/* Praxis-Infokarte mobil: Bottom-Sheet */
@media (max-width:560px){
  #pcard{left:0!important;right:0!important;top:auto!important;bottom:0!important;width:auto;max-width:none;
    border-radius:18px 18px 0 0;padding:8px 18px calc(18px + env(safe-area-inset-bottom)) 18px;
    box-shadow:0 -10px 34px rgba(4,30,24,.22);animation:sheetUp .26s var(--ease)}
  #pcard .pc-grip{display:block;width:38px;height:4px;border-radius:3px;background:var(--line);margin:2px auto 12px}
  #pcard .pc-acts{margin-top:2px}
  #pcard .pc-btn{flex:1 1 calc(50% - 4px);justify-content:center;padding:12px 10px;font-size:13px}
  #pcard .pc-btn.primary{flex-basis:100%}
}
@keyframes sheetUp{from{transform:translateY(100%)}to{transform:translateY(0)}}

@media (prefers-reduced-motion: reduce){
  .mk .ring,.spin{animation:none!important}
  .mk-radar .r-sweep,.mk-radar .r-pulse{animation:none!important;opacity:.3}
  #panel{animation:none!important;transform:none;opacity:1}
  #pcard{animation:none!important}
}
@media (max-width:520px){
  #panel{width:100%;max-width:100%;padding:14px 14px 0}
  .entry-card{padding:22px 18px 18px;width:100%}
  .entry-card h1{font-size:19px;margin-bottom:14px}
  .entry-card .brand img,.entry-card .brand svg{height:32px}
  #modeSwitch{top:12px}
  #modeSwitch button{padding:8px 13px;font-size:12.5px}
  .maplibregl-ctrl-group button{width:44px;height:44px}
  /* Standortanalyse mobil: Karte oben sichtbar lassen, Panel darunter scrollen.
     Nur wenn wirklich ein Standort gewaehlt ist (sonst Vollbild-Karte + Einstieg). */
  body.mode-standort.selected #map{bottom:auto;height:46vh}
  body.mode-standort.selected #panel{
    top:46vh;height:54vh;width:100%;max-width:100%;padding:10px 12px 0;gap:8px;
    border-radius:18px 18px 0 0;box-shadow:0 -12px 34px rgba(4,30,24,.16);
    animation:panelUp var(--dur) var(--ease) forwards;transform:none;opacity:1}
  /* Kopf des Panels so flach wie moeglich: das Panel hat nur die halbe Hoehe, und die
     Kennzahlen sollen den Platz bekommen. Logo klein, Kopfzeile kompakt. */
  .p-brand{padding:0 0 8px;margin:0}
  .p-brand img,.p-brand svg{width:112px;height:auto}
  .p-head{gap:8px}
  .back{width:40px;height:40px;font-size:18px}
  .head-addr{font-size:13.5px}
  /* Umkreis: eine Zeile, Knoepfe bleiben 44px hoch (Daumen), teilen sich die Breite.
     Das Label "Umkreis" entfaellt, der letzte Chip traegt die Einheit. */
  .radius{flex-direction:row;flex-wrap:nowrap;gap:0}
  .radius>span{display:none}
  .chips{flex:1;flex-wrap:nowrap;justify-content:space-between;gap:5px}
  .chips button{flex:1 1 0;min-width:0;padding:10px 0;font-size:13.5px}
  .chips button[data-km="25"]{flex-grow:1.6}
  /* Fusszeile: nur die Pflichtlinks in einer flachen Zeile. Der Hinweis zur Dichte
     steht mobil nicht hier, er kostet drei Zeilen vom ohnehin knappen Panel. */
  .p-foot{padding:0 0 calc(2px + env(safe-area-inset-bottom));font-size:11.5px}
  .p-foot p{display:none}
  .p-legal{margin-top:0;gap:0 16px}
  .p-legal a{min-height:36px}
  /* Bedienelemente der Maplibre-Karte in den sichtbaren Kartenausschnitt heben */
  body.mode-standort.selected .maplibregl-ctrl-bottom-right,
  body.mode-standort.selected .maplibregl-ctrl-bottom-left{bottom:54vh}
}
@keyframes panelUp{from{transform:translateY(16px);opacity:0}to{transform:none;opacity:1}}

/* ---- Top-Mitbewerber (Seitenleiste) ---- */
.comp-list{display:flex;flex-direction:column;gap:8px}
.comp-item{display:flex;align-items:center;gap:11px;width:100%;text-align:left;cursor:pointer;
  appearance:none;-webkit-appearance:none;margin:0;min-height:56px;
  border:1px solid var(--line);border-radius:11px;background:var(--paper-2);padding:12px 12px;
  font-family:inherit;color:var(--ink);transition:border-color .15s ease,background .15s ease}
.comp-item:hover{border-color:var(--mint)}
.comp-item.on{border-color:var(--mint);background:var(--paper)}
.comp-img{flex:none;width:54px;height:54px;border-radius:9px;object-fit:cover;background:#e3ece8}
.comp-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.comp-name{font-weight:700;font-size:13px;line-height:1.3;overflow:hidden;text-overflow:ellipsis;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.comp-meta{font-size:11.5px;color:var(--ink-2)}
.comp-meta.dim{color:var(--muted)}

/* Google-Sterne: graue Basisreihe, goldene Reihe darueber auf rating/5 der Breite beschnitten */
.stars{position:relative;display:inline-block;width:65px;height:13px;vertical-align:-2px}
.stars-row{position:absolute;top:0;left:0;height:13px;display:flex;overflow:hidden}
.stars-row svg{flex:none;width:13px;height:13px;display:block}
.stars-row.bg{width:100%}
.stars-row.bg svg{fill:#dadce0}
.stars-row.fg svg{fill:#fbbc04}
/* Einzelner Stern in der kompakten Praxiszeile: skaliert mit der Schriftgroesse */
.star1{display:inline-block;line-height:0}
.star1 svg{width:1em;height:1em;fill:#fbbc04;vertical-align:-.1em}
.comp-rank{flex:none;font-size:11px;font-weight:800;color:var(--muted2);align-self:flex-start;padding-top:1px}

/* ---- Digitale Angreifbarkeit / Schwerpunkt-Luecke ---- */
.muted{color:var(--muted)}
.covnote{font-size:12.5px;line-height:1.5;margin-top:8px;color:var(--ink-2)}
.focus-chips{display:flex;flex-wrap:wrap;gap:5px}
.focus-chips .fchip{border:1px solid var(--line);background:var(--paper);color:var(--muted);font-family:inherit;
  font-weight:600;font-size:12.5px;padding:7px 11px;border-radius:9px;cursor:pointer}
.focus-chips .fchip:hover{color:var(--ink);border-color:var(--mint)}
.focus-chips .fchip.on{background:var(--mint);border-color:var(--mint);color:#fff}
.dbadge{display:inline-block;font-size:10.5px;font-weight:700;color:var(--muted);background:var(--paper-2);
  border:1px solid var(--line);border-radius:6px;padding:0 5px;margin-left:5px;vertical-align:middle}
.dbadge.weak{color:var(--amber);background:var(--amber-soft);border-color:transparent}
.deep-focus{margin-bottom:12px}

/* ---- Kapazitaet: Regler fuer die geplante Praxisgroesse ----
   Bewusst dieselbe Kachel- und Rahmenoptik wie die uebrigen Kennzahlen: die Aussage
   steht im Text, nicht in einer Signalfarbe. */
.planrow{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:11px 0}
.planlab{font-size:12px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);font-weight:700}
.chips.plan{align-items:center;gap:8px}
.chips.plan button{min-width:44px;min-height:44px;font-size:20px;line-height:1;padding:8px 0;text-align:center}
.planval{font-size:16px;font-weight:800;color:var(--ink);min-width:34px;text-align:center}
.verdict{font-size:14px;line-height:1.55;color:var(--ink);margin:11px 0 0}

/* ---------- Dark Mode (?dark=1) ----------
   Laeuft ueber die Variablen von :root, deshalb ziehen Karten, Tabellen und Panels
   automatisch mit. Die Karte laedt hier Cartos Dark Matter (siehe app.js).

   Markenregel fuer dunkle Hintergruende: JEDER Text ist reines Weiss, kein Grau und
   keine Transparenz auf Text. Die Hierarchie entsteht ausschliesslich ueber
   Schriftgroesse und Schriftgewicht. Deshalb sind ink/muted hier alle #FFFFFF. */
body.dark{
  --ink:#ffffff; --ink-2:#ffffff; --muted:#ffffff; --muted2:#ffffff;
  --paper:#151d1b; --paper-2:#1c2725; --line:#2b3a37;
  --mint:#22d3aa; --mint-dk:#4fe0bd; --mint-soft:#12312a;
  --amber:#f0b45c; --amber-soft:#3a2a14;
  --map-bg:#0a1211;
  --shadow:0 18px 50px rgba(0,0,0,.62); --shadow-sm:0 6px 18px rgba(0,0,0,.42);
}
body.dark{color-scheme:dark}
/* Umrisskontur der Einstiegs-Headline: auf dunklem Grund dunkel statt weiss */
body.dark .entry-card{background:var(--paper);border-color:var(--line)}
body.dark .entry-card h1{text-shadow:none}
body.dark .p-brand .slogan,body.dark .brand .slogan{color:#fff}
body.dark .click-anim .cursor{fill:#d6efe8;stroke:#0a1211}
body.dark .spin{border-color:rgba(232,242,239,.16);border-top-color:var(--mint)}
body.dark .entry-card .seg button.active{background:var(--paper-2)}
body.dark .deck-tooltip{background:var(--paper)!important;border-color:var(--line)!important}
body.dark .comp-img{background:var(--paper-2)}
body.dark .stars-row.bg svg{fill:#3d4a47}
/* Text auf Mint-Flaechen: dunkel, weil das helle Mint sonst zu wenig Kontrast tragt */
body.dark .chips button.active,body.dark .btn,body.dark #modeSwitch button.active,
body.dark .focus-chips .fchip.on,body.dark .comp-research:hover{color:#06201a}
/* Maplibre-Bedienelemente und Skala an das dunkle Theme angleichen */
body.dark .maplibregl-ctrl-group{background:var(--paper);box-shadow:0 0 0 1px var(--line)}
body.dark .maplibregl-ctrl-group button+button{border-top-color:var(--line)}
body.dark .maplibregl-ctrl-group button .maplibregl-ctrl-icon{filter:invert(1) hue-rotate(180deg)}
body.dark .maplibregl-ctrl-scale{background-color:rgba(21,29,27,.8)!important;
  border-color:#6b8079!important;color:var(--ink)!important}
body.dark .maplibregl-ctrl-attrib{background-color:rgba(21,29,27,.7)!important}
body.dark .maplibregl-ctrl-attrib,body.dark .maplibregl-ctrl-attrib a{color:var(--ink-2)}
/* Standort-Pillen und Nummern-Badges: auf dunklem Grund die HELLE Standortfarbe mit
   dunklem Text (umgekehrt zum Tagmodus), das traegt den Kontrast deutlich besser. */
body.dark .mk-deep .mk-label{background:var(--locc,var(--mint));color:#06201a}
body.dark .mk-deep .mk-label::after{border-top-color:var(--locc,var(--mint))}
body.dark .loc-tag{color:#06201a}