:root{
  --bg:#f5f4f1; --bg-dot:#e3e0d9; --ink:#1d2127; --ink2:#454b55; --muted:#767d88; --faint:#a9aeb6;
  --glass:rgba(255,255,255,.72); --glass-strong:rgba(255,255,255,.9); --stroke:rgba(24,30,40,.08); --stroke2:rgba(24,30,40,.14);
  --field:rgba(255,255,255,.95); --hover:rgba(24,30,40,.05); --seg:rgba(24,30,40,.06);
  --card-base:#ffffff; --pair:#a9b0b9; --band:rgba(255,255,255,.62); --band-stroke:rgba(24,30,40,.045);
  --offen-bg:rgba(255,255,255,.66); --offen-bd:#b6bcc5;
  --shadow-sm:0 1px 2px rgba(20,25,35,.05),0 1px 1px rgba(20,25,35,.03);
  --shadow-card:0 1px 2px rgba(20,25,35,.05),0 4px 10px -2px rgba(20,25,35,.06),0 12px 28px -12px rgba(20,25,35,.12);
  --shadow-lift:0 2px 4px rgba(20,25,35,.06),0 10px 20px -4px rgba(20,25,35,.10),0 22px 44px -16px rgba(20,25,35,.20);
  --shadow-pop:0 10px 40px -8px rgba(20,25,35,.18),0 2px 8px rgba(20,25,35,.06);
  --ease:cubic-bezier(.22,.8,.24,1); --radius:18px; --header:64px; --sel:#1d2127;
}
html.dark{
  --bg:#121418; --bg-dot:#1f2228; --ink:#eceef1; --ink2:#c3c8cf; --muted:#959ca7; --faint:#69707b;
  --glass:rgba(28,31,37,.66); --glass-strong:rgba(30,33,40,.92); --stroke:rgba(255,255,255,.07); --stroke2:rgba(255,255,255,.12);
  --field:rgba(255,255,255,.06); --hover:rgba(255,255,255,.06); --seg:rgba(255,255,255,.07);
  --card-base:#1b1e24; --pair:#5d646f; --band:rgba(255,255,255,.028); --band-stroke:rgba(255,255,255,.04);
  --offen-bg:rgba(255,255,255,.03); --offen-bd:#4f5661;
  --shadow-sm:0 1px 2px rgba(0,0,0,.3);
  --shadow-card:0 1px 2px rgba(0,0,0,.35),0 8px 24px -10px rgba(0,0,0,.55);
  --shadow-lift:0 2px 6px rgba(0,0,0,.4),0 18px 40px -14px rgba(0,0,0,.7);
  --shadow-pop:0 16px 50px -10px rgba(0,0,0,.65),0 2px 8px rgba(0,0,0,.35); --sel:#f2f3f5;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:var(--bg);color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Inter","Segoe UI Variable","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-feature-settings:"cv11","ss01";-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:transparent;
  transition:background-color .35s var(--ease),color .35s var(--ease)}
button{font:inherit;color:inherit}
.glass{background:var(--glass);-webkit-backdrop-filter:saturate(1.7) blur(18px);backdrop-filter:saturate(1.7) blur(18px);border:1px solid var(--stroke)}
/* ---------- Kopfzeile ---------- */
header{position:fixed;inset:0 0 auto 0;height:var(--header);display:flex;align-items:center;gap:14px;
  padding:0 18px;padding-top:env(safe-area-inset-top);z-index:30;border-width:0 0 1px 0}
.brand{display:flex;align-items:center;gap:11px;min-width:0}
.brand .logo{width:36px;height:36px;border-radius:11px;flex:none;display:grid;place-items:center;color:#fff;
  background:linear-gradient(140deg,#6f9be0 0%,#7fbf86 52%,#e38f9b 100%);box-shadow:0 4px 12px -3px rgba(80,110,160,.45),inset 0 1px 0 rgba(255,255,255,.35)}
.brand h1{font-size:16.5px;margin:0;font-weight:680;letter-spacing:-.015em;white-space:nowrap}
.brand small{display:block;font-size:12px;color:var(--muted);font-weight:450;margin-top:1px;white-space:nowrap}
.seg{position:relative;display:flex;padding:3px;border-radius:12px;background:var(--seg);flex:none;margin-left:10px}
.seg button{position:relative;z-index:1;border:0;background:none;height:32px;padding:0 14px;border-radius:9px;cursor:pointer;
  font-size:13.5px;font-weight:600;color:var(--muted);display:flex;align-items:center;gap:7px;white-space:nowrap;transition:color .25s}
.seg button.on{color:var(--ink)}
.seg button svg{width:15px;height:15px;opacity:.85}
.seg .thumb{position:absolute;top:3px;bottom:3px;left:3px;width:0;border-radius:9px;background:var(--card-base);
  box-shadow:0 1px 2px rgba(20,25,35,.08),0 3px 10px -2px rgba(20,25,35,.12);transition:left .38s var(--ease),width .38s var(--ease)}
html.dark .seg .thumb{background:#2a2e36}
.search{position:relative;flex:1;max-width:360px;margin-left:auto}
.search input{width:100%;height:38px;border-radius:12px;border:1px solid var(--stroke2);background:var(--field);color:var(--ink);
  padding:0 12px 0 36px;font-size:14.5px;outline:none;transition:border-color .2s,box-shadow .2s,background .2s}
.search input::placeholder{color:var(--faint)}
.search input:focus{border-color:#8fb0e6;box-shadow:0 0 0 4px rgba(91,143,214,.16)}
.search svg{position:absolute;left:12px;top:11px;width:16px;height:16px;color:var(--faint)}
.results{position:absolute;top:46px;left:0;right:0;border-radius:14px;box-shadow:var(--shadow-pop);background:var(--glass-strong);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border:1px solid var(--stroke);overflow:hidden;max-height:60vh;overflow-y:auto;
  opacity:0;transform:translateY(-6px) scale(.98);pointer-events:none;transition:opacity .2s var(--ease),transform .25s var(--ease);padding:4px}
.results.show{opacity:1;transform:none;pointer-events:auto}
.results button{display:flex;align-items:center;gap:10px;width:100%;border:0;background:none;padding:8px 10px;border-radius:10px;
  text-align:left;cursor:pointer;font-size:14px}
.results button:hover,.results button.act{background:var(--hover)}
.results .none{padding:14px 12px;color:var(--muted);font-size:13.5px;line-height:1.45}
.hbtn{height:38px;min-width:38px;padding:0 13px;border-radius:12px;border:1px solid var(--stroke2);background:var(--field);cursor:pointer;
  font-size:14px;display:flex;align-items:center;justify-content:center;gap:7px;white-space:nowrap;transition:background .2s,transform .15s}
.hbtn:hover{background:var(--hover)}
.hbtn:active{transform:scale(.96)}
.hbtn svg{width:17px;height:17px}
.hbtn.icon{padding:0}
html.light .ic-sun,html.dark .ic-moon{display:none}
.menuwrap{position:relative}
.menu{position:absolute;right:0;top:46px;border-radius:14px;box-shadow:var(--shadow-pop);padding:6px;min-width:240px;z-index:40;
  background:var(--glass-strong);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border:1px solid var(--stroke);
  opacity:0;transform:translateY(-6px) scale(.98);transform-origin:top right;pointer-events:none;transition:opacity .2s var(--ease),transform .25s var(--ease)}
.menu.show{opacity:1;transform:none;pointer-events:auto}
.menu button{display:flex;gap:10px;align-items:center;width:100%;text-align:left;border:0;background:none;padding:9px 10px;border-radius:9px;cursor:pointer;font-size:14px}
.menu button:hover{background:var(--hover)}
/* ---------- Zeichenfläche ---------- */
#viewport{position:fixed;inset:var(--header) 0 0 0;overflow:hidden;touch-action:none;cursor:grab;
  background-image:radial-gradient(var(--bg-dot) 1px,transparent 1.2px);background-size:24px 24px}
#viewport.drag{cursor:grabbing}
#world{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform}
#world.anim{transition:transform .6s var(--ease)}
#lines{position:absolute;left:0;top:0;overflow:visible;pointer-events:none}
#lines g.lg{transition:opacity .25s ease}
#lines g.lg.out{opacity:0}
#lines path{fill:none;stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round;transition:stroke-width .2s,opacity .25s}
#lines path.ln{stroke:var(--lc)}
html.dark #lines path.ln{stroke:var(--lcd)}
#lines path.paar{stroke:var(--pair)}
#lines path.dash{stroke-dasharray:2 7;stroke-width:2.6}
#lines path.halo{stroke:var(--bg);stroke-width:9;stroke-linecap:butt;transition:stroke .35s}
#lines path.hi{stroke-width:3.8}
#lines path.draw{stroke-dasharray:1;stroke-dashoffset:1;animation:draw .6s var(--ease) var(--d,0ms) forwards}
#lines path.fade{opacity:0;animation:fadein .45s ease var(--d,0ms) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes fadein{to{opacity:1}}
#lines .hlabel rect{fill:var(--card-base);stroke:var(--lc);stroke-width:1.3;stroke-dasharray:3 3}
html.dark #lines .hlabel rect{stroke:var(--lcd)}
#lines .hlabel text{font-size:11px;font-weight:650;fill:var(--lc);letter-spacing:.02em}
html.dark #lines .hlabel text{fill:var(--lcd)}
#lines g.fade{opacity:0;animation:fadein .45s ease var(--d,0ms) forwards}
#lines .band{fill:var(--band);stroke:var(--band-stroke);stroke-width:1;transition:fill .35s}
#lines .glabel{font-size:14.5px;fill:var(--faint);font-weight:650;letter-spacing:.01em}
#lines .glabel2{font-size:12px;fill:var(--faint);font-weight:500;opacity:.85}
.has-sel #lines path.ln:not(.hi),.has-sel #lines path.paar:not(.hi){opacity:.3}
/* ---------- Personenkarten ---------- */
.card{position:absolute;left:0;top:0;width:var(--cw);height:var(--ch);border-radius:var(--radius);
  --c-bg:var(--z-bg);--c-bd:var(--z-bd);--c-ac:var(--z-ac);
  background:linear-gradient(160deg,color-mix(in srgb,var(--c-bg) 35%,var(--card-base)) 0%,var(--c-bg) 100%);
  border:1px solid var(--c-bd);display:flex;align-items:center;gap:12px;padding:0 14px;cursor:pointer;box-shadow:var(--shadow-card),inset 0 1px 0 rgba(255,255,255,.6);
  user-select:none;-webkit-user-select:none;will-change:transform;
  transition:transform .6s var(--ease),opacity .45s ease,translate .25s var(--ease),box-shadow .25s ease,background .35s,border-color .35s}
html.dark .card{--c-bg:color-mix(in srgb,var(--z-ac) 14%,#1b1e24);--c-bd:color-mix(in srgb,var(--z-ac) 34%,#2a2e36);box-shadow:var(--shadow-card),inset 0 1px 0 rgba(255,255,255,.04)}
.card:hover{translate:0 -3px;box-shadow:var(--shadow-lift),inset 0 1px 0 rgba(255,255,255,.6)}
.card.noanim,.xchip.noanim{transition:none!important}
.card.gone{opacity:0!important;pointer-events:none;visibility:hidden;transition:opacity .22s ease,visibility 0s linear .22s}
.av{width:48px;height:48px;border-radius:50%;flex:none;color:#fff;display:grid;place-items:center;font-weight:680;font-size:16px;letter-spacing:.02em;
  background:linear-gradient(145deg,color-mix(in srgb,var(--c-ac) 55%,#fff) 0%,var(--c-ac) 58%,color-mix(in srgb,var(--c-ac) 78%,#000) 100%);
  background-size:cover;background-position:center;text-shadow:0 1px 2px rgba(0,0,0,.18);
  box-shadow:0 3px 8px -2px color-mix(in srgb,var(--c-ac) 55%,transparent),inset 0 1px 0 rgba(255,255,255,.35),0 0 0 3px color-mix(in srgb,var(--card-base) 70%,transparent)}
.txt{min-width:0;flex:1;line-height:1.24}
.vn{font-weight:680;font-size:15.5px;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nn{font-size:14px;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gb{font-size:12.5px;color:var(--muted);font-style:italic;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dt{font-size:11.5px;color:var(--faint);margin-top:3px;letter-spacing:.04em;font-variant-numeric:tabular-nums}
.card.tot{background:linear-gradient(160deg,color-mix(in srgb,var(--c-bg) 30%,var(--card-base)),color-mix(in srgb,var(--c-bg) 50%,#eceef0));border-color:color-mix(in srgb,var(--c-bd) 55%,#d0d3d8)}
html.dark .card.tot{background:linear-gradient(160deg,#1e2126,#23262c);border-color:#33373f}
.card.tot .av{filter:saturate(.4) brightness(1.04)}
.card.tot .vn,.card.tot .nn{color:var(--ink2)}
.kreuz{color:var(--muted);font-weight:700}
.card.offen{background:var(--offen-bg);border:1.6px dashed var(--offen-bd);box-shadow:none}
.card.offen .av{background:transparent;color:var(--faint);border:1.6px dashed var(--offen-bd);box-shadow:none;font-size:20px;text-shadow:none}
.card.offen .vn{white-space:normal;font-size:13.5px;font-weight:620;color:var(--muted);line-height:1.22}
.card.star{border:2px solid var(--c-ac);box-shadow:0 0 0 5px color-mix(in srgb,var(--c-ac) 16%,transparent),var(--shadow-card)}
.card.focus{border:2px solid var(--c-ac);box-shadow:0 0 0 6px color-mix(in srgb,var(--c-ac) 20%,transparent),0 0 0 1px var(--c-ac),var(--shadow-lift)}
.card .badge{position:absolute;top:-10px;right:12px;color:#fff;font-size:10.5px;font-weight:700;padding:3px 9px;border-radius:20px;letter-spacing:.04em;
  background:linear-gradient(135deg,color-mix(in srgb,var(--c-ac) 75%,#fff),var(--c-ac));box-shadow:0 3px 8px -2px color-mix(in srgb,var(--c-ac) 60%,transparent)}
.card.sel{box-shadow:0 0 0 3px var(--sel),var(--shadow-lift)}
.card.match{box-shadow:0 0 0 4px #f2c14e,var(--shadow-lift)}
.has-sel .card:not(.sel):not(.rel),.has-sel .bubble:not(.sel):not(.rel){opacity:.4}
.bubble{position:absolute;left:0;top:0;width:34px;height:34px;border-radius:50%;background:var(--card-base);border:2px dashed var(--offen-bd);
  color:var(--muted);font-weight:700;font-size:15px;display:grid;place-items:center;cursor:pointer;box-shadow:0 0 0 4px var(--bg)}
.xchip{position:absolute;left:0;top:0;height:24px;padding:0 9px 0 7px;border-radius:12px;display:flex;align-items:center;gap:5px;cursor:pointer;
  font-size:12px;font-weight:700;color:#fff;letter-spacing:.01em;white-space:nowrap;z-index:2;
  background:linear-gradient(135deg,color-mix(in srgb,var(--z-ac) 70%,#fff),var(--z-ac));box-shadow:0 0 0 3px var(--bg),0 4px 10px -3px color-mix(in srgb,var(--z-ac) 70%,transparent);
  transition:transform .6s var(--ease),opacity .35s ease,translate .2s var(--ease),filter .2s}
.xchip:hover{translate:0 -2px;filter:brightness(1.06)}
.xchip.minus{background:var(--card-base);color:var(--ink2);border:1px solid var(--stroke2);box-shadow:0 0 0 3px var(--bg),var(--shadow-sm)}
.xchip svg{width:13px;height:13px}
.xchip.gone{opacity:0!important;pointer-events:none;transition:opacity .14s ease!important}
/* ---------- schwebende Bedienelemente ---------- */
.floatcol{position:fixed;left:16px;top:calc(var(--header) + 16px);width:262px;display:flex;flex-direction:column;gap:10px;z-index:20}
details.box{border-radius:16px;box-shadow:var(--shadow-card);overflow:hidden}
details.box summary{list-style:none;cursor:pointer;padding:12px 14px;font-weight:650;font-size:13.5px;display:flex;align-items:center;gap:8px;letter-spacing:-.005em}
details.box summary::-webkit-details-marker{display:none}
details.box summary .chev{margin-left:auto;transition:transform .3s var(--ease);color:var(--faint);display:grid}
details.box[open] summary .chev{transform:rotate(180deg)}
details.box[open] .boxbody{animation:slidein .35s var(--ease)}
@keyframes slidein{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.pill{background:linear-gradient(135deg,#ffe7b8,#ffd98f);color:#8a560a;font-size:11.5px;border-radius:20px;padding:1px 8px;font-weight:700}
html.dark .pill{background:#4a3a1a;color:#f4c56a}
.boxbody{padding:0 14px 12px;font-size:13.5px}
.lg{display:flex;align-items:center;gap:10px;padding:4px 0;color:var(--ink2)}
.lg i{width:22px;height:16px;border-radius:5px;flex:none;border:1.5px solid;display:grid;place-items:center;font-style:normal}
.lg i.l,.lg i.ld{height:0;border-width:2px 0 0 0;border-radius:0;border-color:var(--faint)}
.lg i.ld{border-style:dashed}
.lg svg{width:26px;height:16px;flex:none}
.op{display:flex;gap:9px;align-items:flex-start;padding:7px 0;border-top:1px solid var(--stroke);cursor:pointer;color:var(--ink2);line-height:1.38}
.op:first-child{border-top:0}
.op:hover span{color:var(--ink)}
.op b{color:#d39a2a;font-size:15px;line-height:1.2}
.zoom{position:fixed;right:16px;bottom:46px;display:flex;flex-direction:column;gap:0;z-index:20;transition:right .4s var(--ease),bottom .4s var(--ease);
  border-radius:14px;box-shadow:var(--shadow-card);overflow:hidden}
.zoom button{width:44px;height:44px;border:0;background:none;font-size:20px;cursor:pointer;display:grid;place-items:center;color:var(--ink2);transition:background .2s}
.zoom button+button{border-top:1px solid var(--stroke)}
.zoom button:hover{background:var(--hover)}
footer{position:fixed;bottom:12px;left:50%;transform:translateX(-50%);font-size:11.5px;color:var(--muted);
  padding:4px 12px;border-radius:20px;z-index:10;pointer-events:none;white-space:nowrap}
/* Fokus-Leiste (Person im Mittelpunkt) */
#fokusbar{position:fixed;left:50%;bottom:44px;transform:translate(-50%,16px);z-index:21;display:flex;align-items:center;gap:6px;
  padding:5px;border-radius:16px;box-shadow:var(--shadow-pop);max-width:calc(100vw - 150px);opacity:0;pointer-events:none;
  transition:opacity .35s var(--ease),transform .45s var(--ease)}
body.v-fokus #fokusbar{opacity:1;transform:translate(-50%,0);pointer-events:auto}
#fokusbar .back{height:34px;padding:0 12px 0 9px;border-radius:11px;border:0;background:var(--seg);cursor:pointer;font-size:13px;font-weight:600;display:flex;align-items:center;gap:5px;white-space:nowrap}
#fokusbar .back:disabled{opacity:.4;cursor:default}
#fokusbar .back:not(:disabled):hover{background:var(--hover)}
.crumbs{display:flex;align-items:center;gap:2px;overflow:hidden;font-size:13px;min-width:0;padding-right:8px}
.crumbs button{border:0;background:none;cursor:pointer;padding:5px 7px;border-radius:9px;color:var(--muted);white-space:nowrap;display:flex;align-items:center;gap:6px}
.crumbs button:hover{background:var(--hover);color:var(--ink)}
.crumbs button.cur{color:var(--ink);font-weight:650;cursor:default;background:none}
.crumbs .sep{color:var(--faint);font-size:11px}
.crumbs .mini{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:9px;color:#fff;font-weight:700}
.tip{position:fixed;left:50%;bottom:98px;transform:translate(-50%,8px);z-index:21;font-size:12.5px;color:var(--ink2);padding:7px 13px;border-radius:12px;
  box-shadow:var(--shadow-card);opacity:0;pointer-events:none;transition:opacity .4s var(--ease),transform .4s var(--ease);white-space:nowrap}
.tip.show{opacity:1;transform:translate(-50%,0)}
/* ---------- Detail-Seitenleiste ---------- */
#panel{position:fixed;right:12px;top:calc(var(--header) + 12px);bottom:12px;width:372px;z-index:25;border-radius:22px;
  background:var(--glass-strong);-webkit-backdrop-filter:saturate(1.6) blur(22px);backdrop-filter:saturate(1.6) blur(22px);border:1px solid var(--stroke);
  box-shadow:var(--shadow-pop);transform:translateX(calc(100% + 24px));opacity:.6;
  transition:transform .45s var(--ease),opacity .35s ease;overflow-y:auto;-webkit-overflow-scrolling:touch}
#panel.open{transform:none;opacity:1}
#panel .pin > *{animation:slidein .45s var(--ease) both}
#panel .pin > *:nth-child(2){animation-delay:.04s}#panel .pin > *:nth-child(3){animation-delay:.08s}#panel .pin > *:nth-child(4){animation-delay:.12s}#panel .pin > *:nth-child(5){animation-delay:.16s}
body.panel-open .zoom{right:398px}
.pclose{position:absolute;right:14px;top:14px;width:32px;height:32px;border-radius:50%;border:0;background:var(--seg);cursor:pointer;font-size:15px;z-index:2;transition:background .2s}
.pclose:hover{background:var(--hover)}
.phead{padding:30px 24px 18px;display:flex;flex-direction:column;align-items:center;text-align:center;border-radius:22px 22px 0 0;
  --c-bg:var(--z-bg);--c-bd:var(--z-bd);--c-ac:var(--z-ac);
  background:radial-gradient(120% 90% at 50% 0%,color-mix(in srgb,var(--c-ac) 22%,transparent) 0%,transparent 70%)}
.phead .av{width:92px;height:92px;font-size:30px;box-shadow:0 0 0 5px var(--card-base),0 10px 26px -6px color-mix(in srgb,var(--c-ac) 60%,transparent)}
.phead .av.offen{background:transparent;color:var(--faint);border:2px dashed var(--offen-bd);box-shadow:none}
.phead h2{margin:14px 0 3px;font-size:22px;letter-spacing:-.02em;font-weight:720}
.phead .sub{color:var(--muted);font-size:14px}
.pacts{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap;justify-content:center}
.pbtn{height:34px;padding:0 13px;border-radius:11px;border:1px solid var(--stroke2);background:var(--field);cursor:pointer;font-size:13px;font-weight:600;display:flex;align-items:center;gap:6px;transition:background .2s,transform .15s}
.pbtn:hover{background:var(--hover)}.pbtn:active{transform:scale(.97)}
.pbtn.prim{background:linear-gradient(135deg,color-mix(in srgb,var(--z-ac) 72%,#fff),var(--z-ac));color:#fff;border-color:transparent;box-shadow:0 4px 12px -4px color-mix(in srgb,var(--z-ac) 70%,transparent)}
.pbtn svg{width:15px;height:15px}
.chip{display:inline-flex;align-items:center;gap:6px;margin-top:10px;font-size:12px;padding:3px 10px;border-radius:20px;
  background:color-mix(in srgb,var(--z-ac) 12%,transparent);border:1px solid color-mix(in srgb,var(--z-ac) 30%,transparent);color:var(--ink2);font-weight:550}
.chip i{width:8px;height:8px;border-radius:50%;background:var(--z-ac)}
.psec{padding:14px 24px;border-top:1px solid var(--stroke)}
.psec h3{font-size:11.5px;text-transform:uppercase;letter-spacing:.09em;color:var(--faint);margin:0 0 10px;font-weight:700}
.fields{display:grid;grid-template-columns:110px 1fr;gap:8px 10px;font-size:14px;margin:0}
.fields dt{color:var(--muted)}
.fields dd{margin:0}
.fields dd.leer{color:var(--faint)}
.fields dd small{display:block;font-size:12.5px;color:var(--muted);margin-top:2px;line-height:1.4}
u.ruf{text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px;text-decoration-color:color-mix(in srgb,currentColor 55%,transparent)}
.ehe{border:1px solid var(--stroke);border-radius:14px;padding:10px 12px 12px;margin-bottom:8px;background:color-mix(in srgb,var(--z-bg,#fff) 35%,transparent)}
.ehe-mit{display:flex;align-items:center;gap:8px;font-size:14px;margin-bottom:8px}.ehe-mit > span{color:var(--muted)}
.ehe .fields{grid-template-columns:110px 1fr}
.urk{font-size:12.5px;color:var(--faint);line-height:1.45}
.kp-hist{font-style:normal;color:var(--faint)}
.ahnenbtn{display:flex;align-items:center;gap:7px;padding:9px 13px;border-radius:14px;font:inherit;font-size:13px;font-weight:600;color:var(--ink2);cursor:pointer;text-align:left;width:max-content;max-width:100%}
.ahnenbtn[hidden]{display:none}
.ahnenbtn svg{width:15px;height:15px;flex:none;color:var(--muted)}
.ahnenbtn b{font-weight:700;color:var(--muted);font-size:12px}
.ahnenbtn.on{color:var(--ink)}
body.v-fokus .ahnenbtn,body.v-karte .ahnenbtn{display:none}
.fanrow{padding-top:0}
.pbtn.wide{width:100%;justify-content:flex-start}
.pbtn.wide small{margin-left:auto;color:var(--faint);font-weight:500}
.pbtn svg{flex:none}
#fanbox{position:fixed;inset:0;z-index:60;display:grid;place-items:center;background:rgba(20,24,32,.42);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:0;pointer-events:none;transition:opacity .25s var(--ease)}
#fanbox.show{opacity:1;pointer-events:auto}
.fanin{width:min(1100px,calc(100vw - 24px));max-height:calc(100vh - 24px);display:flex;flex-direction:column;background:var(--card-base);border:1px solid var(--stroke);border-radius:24px;box-shadow:var(--shadow-lg,0 20px 60px rgba(0,0,0,.25));padding:14px 16px 12px;transform:translateY(10px) scale(.985);transition:transform .3s var(--ease)}
#fanbox.show .fanin{transform:none}
.fanhead{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.fanhead .pclose{position:static;margin-left:auto;flex:none}
.fanhead [data-fanback][hidden]{display:none}
.fantitle{display:flex;flex-direction:column;min-width:0}.fantitle b{font-size:17px}.fantitle small{color:var(--muted);font-size:12.5px}
.fansvg{flex:1;min-height:0;display:flex;align-items:center;justify-content:center}
.fansvg svg{width:100%;height:auto;max-height:calc(100vh - 150px);overflow:visible}
.fanhint{font-size:12px;color:var(--faint);text-align:center;margin-top:4px}
.fan-leer{fill:none;stroke:var(--stroke);stroke-dasharray:3 4}
.fan-seg path{fill:var(--fbg);stroke:var(--fbd);stroke-width:1.2;transition:filter .15s}
.fan-seg{cursor:pointer}
.fan-seg:hover path{filter:brightness(.95) saturate(1.2);stroke:var(--fac)}
.fan-seg.offen path{fill:none;stroke-dasharray:4 3}
.fan-seg text{fill:#2a2f38;text-anchor:middle;font-family:inherit;pointer-events:none}
.fan-seg .fn{font-weight:700}.fan-seg .fy{fill:#6b7280;font-size:.88em}
.fan-mitte path{stroke:var(--fac);stroke-width:2}
html.dark .fan-seg path{fill:color-mix(in srgb,var(--fac) 26%,#1d2129);stroke:color-mix(in srgb,var(--fac) 55%,#1d2129)}
html.dark .fan-seg text{fill:#e7eaf0}html.dark .fan-seg .fy{fill:#a9b0bc}
@media (max-width:760px){.fanin{padding:10px 8px 8px;border-radius:18px}.fantitle b{font-size:15px}}
.relrow{display:grid;grid-template-columns:118px 1fr;gap:10px;font-size:14px;padding:5px 0;align-items:start}
.relrow > span{color:var(--muted);padding-top:5px}
.links{display:flex;flex-wrap:wrap;gap:6px}
.plink{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--stroke2);background:var(--field);border-radius:20px;
  padding:3px 10px 3px 4px;font-size:13.5px;cursor:pointer;transition:background .2s,transform .15s}
.plink:hover{background:var(--hover);transform:translateY(-1px)}
.plink .mini,.results .mini{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:10px;color:#fff;font-weight:700}
.plink.offen{border-style:dashed;color:var(--muted)}
.plink.offen .mini{background:transparent!important;color:var(--faint);border:1.5px dashed var(--offen-bd)}
.leer{color:var(--faint)}
.hint{font-size:13px;color:var(--muted);line-height:1.5}
.empty{display:flex;gap:10px;align-items:center;font-size:13px;color:var(--muted);padding:6px 0}
.empty .ico{width:30px;height:30px;border-radius:10px;display:grid;place-items:center;background:var(--seg);flex:none;font-size:15px}
.warn{background:color-mix(in srgb,#f5b942 13%,transparent);border:1px solid color-mix(in srgb,#f5b942 35%,transparent);border-radius:11px;padding:8px 11px;font-size:13.5px;margin-bottom:6px;color:var(--ink2)}

/* ---------- Bearbeiten ---------- */
.hbtn.on{background:linear-gradient(135deg,#7ea6e8,#4f84d1);color:#fff;border-color:transparent;box-shadow:0 4px 14px -4px rgba(79,132,209,.6)}
.dirty{display:none;align-items:center;gap:7px;height:30px;padding:0 11px;border-radius:20px;font-size:12.5px;font-weight:650;cursor:pointer;flex:none;
  border:1px solid color-mix(in srgb,#f0a92e 45%,transparent);background:color-mix(in srgb,#f5b942 16%,var(--field));color:#8a560a;white-space:nowrap;animation:slidein .35s var(--ease)}
html.dark .dirty{color:#f4c56a}
.dirty i{width:8px;height:8px;border-radius:50%;background:#f0a92e;box-shadow:0 0 0 3px color-mix(in srgb,#f0a92e 25%,transparent);animation:puls 2.2s ease-in-out infinite}
@keyframes puls{50%{box-shadow:0 0 0 6px color-mix(in srgb,#f0a92e 6%,transparent)}}
body.dirty-on .dirty{display:flex}
.dirty .kurz{display:none}
#edbar{position:fixed;top:calc(var(--header) + 12px);left:50%;transform:translate(-50%,-12px);opacity:0;pointer-events:none;z-index:22;display:flex;align-items:center;gap:3px;
  padding:5px;border-radius:16px;box-shadow:var(--shadow-pop);transition:opacity .3s var(--ease),transform .4s var(--ease),left .45s var(--ease)}
body.editing #edbar{opacity:1;transform:translate(-50%,0);pointer-events:auto}
#edbar .edlbl{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;color:#4f84d1;padding:0 8px 0 6px;letter-spacing:.01em}
#edbar .edlbl svg{width:15px;height:15px}
#edbar button{height:36px;min-width:36px;padding:0 9px;border:0;background:none;border-radius:11px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;
  font-size:13px;font-weight:620;color:var(--ink2);transition:background .2s,transform .15s,opacity .2s}
#edbar button:hover:not(:disabled){background:var(--hover)}
#edbar button:active:not(:disabled){transform:scale(.95)}
#edbar button:disabled{opacity:.32;cursor:default}
#edbar button svg{width:17px;height:17px}
#edbar button.prim{background:linear-gradient(135deg,#7ea6e8,#4f84d1);color:#fff;padding:0 12px;box-shadow:0 4px 12px -4px rgba(79,132,209,.6)}
#edbar .sep{width:1px;align-self:stretch;background:var(--stroke2);margin:7px 3px}
#edbar .help{font-weight:800;font-size:15px}
body.editing #viewport{box-shadow:inset 0 0 0 3px rgba(79,132,209,.28)}
.card.neu{animation:neu 1.6s var(--ease)}
@keyframes neu{0%{box-shadow:0 0 0 0 rgba(79,132,209,.75),var(--shadow-lift)}60%{box-shadow:0 0 0 14px rgba(79,132,209,0),var(--shadow-lift)}}
/* Formulare */
.ef{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ef label{display:flex;flex-direction:column;gap:5px;font-size:12px;color:var(--muted);font-weight:620;min-width:0}
.ef label.full,.ef .full{grid-column:1/-1}
.ef label small{font-weight:500;color:var(--faint)}
.ef input:not([type=checkbox]),.ef select,.ef textarea,.pick input{font:inherit;font-size:16px;height:42px;border-radius:12px;border:1px solid var(--stroke2);background:var(--field);
  color:var(--ink);padding:0 11px;outline:none;width:100%;min-width:0;transition:border-color .2s,box-shadow .2s;-webkit-appearance:none;appearance:none}
.ef select{background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 17px) 18px,calc(100% - 12px) 18px;background-size:5px 5px;background-repeat:no-repeat;padding-right:28px}
.ef textarea{height:auto;min-height:70px;padding:10px 11px;resize:vertical;line-height:1.42}
.ef input:focus,.ef select:focus,.ef textarea:focus,.pick input:focus{border-color:#8fb0e6;box-shadow:0 0 0 4px rgba(91,143,214,.16)}
.ef input.bad{border-color:#e0675d!important;box-shadow:0 0 0 4px rgba(224,103,93,.16)!important}
.ef label.chk{flex-direction:row;align-items:center;gap:10px;font-size:14.5px;color:var(--ink2);font-weight:560;min-height:38px;cursor:pointer}
.ef .chk input{width:21px;height:21px;accent-color:#4f84d1;flex:none;margin:0}
.ef.isoffen .np{display:none}
.err{display:none;color:#d0453a;font-size:13px;font-weight:600;line-height:1.4;background:color-mix(in srgb,#e0675d 10%,transparent);border-radius:10px;padding:8px 11px}
.err.show{display:block}
.addgrid{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
.addbtn{height:36px;padding:0 12px;border-radius:11px;border:1.3px dashed color-mix(in srgb,var(--z-ac) 60%,var(--stroke2));background:color-mix(in srgb,var(--z-ac) 8%,var(--field));
  font-size:13.5px;font-weight:640;cursor:pointer;color:var(--ink2);transition:background .2s,transform .15s}
.addbtn:hover:not(:disabled){background:color-mix(in srgb,var(--z-ac) 16%,var(--field))}
.addbtn:active:not(:disabled){transform:scale(.97)}
.addbtn:disabled{opacity:.38;cursor:not-allowed}
.plink .x{margin:0 -4px 0 3px;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;border:0;background:var(--seg);cursor:pointer;font-size:10px;color:var(--muted);padding:0;transition:background .2s,color .2s}
.plink .x:hover{background:#e0675d;color:#fff}
.danger{height:40px;width:100%;border-radius:12px;border:1px solid color-mix(in srgb,#e0675d 45%,transparent);background:color-mix(in srgb,#e0675d 7%,transparent);color:#c9483e;
  font-size:14px;font-weight:650;cursor:pointer;transition:background .2s}
.danger:hover{background:color-mix(in srgb,#e0675d 14%,transparent)}
html.dark .danger{color:#f08a80}
.edtag{display:inline-flex;align-items:center;gap:5px;margin-top:8px;font-size:11.5px;font-weight:700;color:#4f84d1;background:rgba(79,132,209,.12);padding:3px 10px;border-radius:20px}
button.av{border:0;cursor:pointer;position:relative;padding:0;font-family:inherit}
.av .cam{position:absolute;right:-2px;bottom:-2px;width:30px;height:30px;border-radius:50%;background:var(--card-base);color:var(--ink2);display:grid;place-items:center;
  box-shadow:var(--shadow-card);font-size:0;text-shadow:none}
.av .cam svg{width:16px;height:16px}
/* Dialog (Desktop: Mitte, Mobil: von unten) */
#sheetbg{position:fixed;inset:0;background:rgba(15,18,24,.34);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);z-index:50;opacity:0;pointer-events:none;transition:opacity .3s ease}
#sheetbg.show{opacity:1;pointer-events:auto}
#sheet{position:fixed;left:50%;top:50%;width:min(470px,calc(100vw - 32px));max-height:min(88vh,760px);overflow-y:auto;-webkit-overflow-scrolling:touch;z-index:51;border-radius:22px;
  background:var(--glass-strong);-webkit-backdrop-filter:saturate(1.6) blur(22px);backdrop-filter:saturate(1.6) blur(22px);border:1px solid var(--stroke);box-shadow:var(--shadow-pop);
  transform:translate(-50%,-46%) scale(.97);opacity:0;pointer-events:none;transition:transform .4s var(--ease),opacity .25s ease}
#sheet.show{transform:translate(-50%,-50%);opacity:1;pointer-events:auto}
.sh-in{padding:22px 22px 18px;display:flex;flex-direction:column;gap:14px}
.sh-in h2{margin:0;font-size:19px;letter-spacing:-.015em;font-weight:720;padding-right:36px}
.shsub{margin-top:-10px;color:var(--muted);font-size:13.5px}
.shtext{margin:0;color:var(--ink2);font-size:14.5px;line-height:1.5}
.sh-acts{display:flex;gap:8px;justify-content:flex-end;margin-top:2px}
.sh-acts .pbtn{height:42px;padding:0 18px;font-size:14.5px;justify-content:center}
.pbtn.danger{width:auto;background:#d9534a;color:#fff;border-color:transparent;box-shadow:0 4px 12px -4px rgba(217,83,74,.6)}
.tabs{display:flex;padding:3px;border-radius:12px;background:var(--seg)}
.tabs button{flex:1;height:36px;border:0;background:none;border-radius:9px;cursor:pointer;font-size:13.5px;font-weight:620;color:var(--muted);transition:background .25s,color .25s,box-shadow .25s}
.tabs button.on{background:var(--card-base);color:var(--ink);box-shadow:0 1px 2px rgba(20,25,35,.08),0 3px 10px -2px rgba(20,25,35,.12)}
.ex{display:flex;flex-direction:column;gap:10px}
.ex label{display:flex;flex-direction:column;gap:5px;font-size:12px;color:var(--muted);font-weight:620}
.ex label.chk{flex-direction:row;align-items:center;gap:10px;font-size:14px;color:var(--ink2);font-weight:560;cursor:pointer}
.ex select{font:inherit;font-size:16px;height:42px;border-radius:12px;border:1px solid var(--stroke2);background:var(--field);color:var(--ink);padding:0 11px}
.ex .chk input{width:21px;height:21px;accent-color:#4f84d1;margin:0}
.shinfo{background:var(--seg);border-radius:11px;padding:9px 12px}
.pick{display:flex;flex-direction:column;gap:8px}
.plist{display:flex;flex-direction:column;gap:2px;max-height:260px;overflow-y:auto;border:1px solid var(--stroke);border-radius:12px;padding:4px}
.plist button{display:flex;align-items:center;gap:10px;border:0;background:none;padding:8px 10px;border-radius:10px;text-align:left;cursor:pointer;font-size:14.5px;min-height:42px}
.plist button:hover{background:var(--hover)}
.plist button.on{background:rgba(79,132,209,.14);box-shadow:inset 0 0 0 1.5px #6f9be0}
.plist .mini{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:10.5px;color:#fff;font-weight:700;flex:none}
.plist small{color:var(--faint)}
.plist .none{padding:14px;color:var(--muted);font-size:13.5px}
.help h3{margin:6px 0 2px;font-size:14px}
.help p,.help li{margin:0;font-size:14px;line-height:1.5;color:var(--ink2)}
.help ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:4px}
.help kbd{font:inherit;font-size:12px;border:1px solid var(--stroke2);border-radius:6px;padding:0 5px;background:var(--field)}
@media (max-width:1380px){.dirty .lang{display:none}.dirty .kurz{display:inline}#exportBtn .lbl{display:none}}
@media (min-width:761px){
  #edbar{left:auto;right:16px;transform:translateY(-12px);transition:opacity .3s var(--ease),transform .4s var(--ease),right .45s var(--ease)}
  body.editing #edbar{transform:none}
  body.panel-open #edbar{right:396px}
}
@media (min-width:761px) and (max-width:1240px){#edbar .lbl2,#edbar .edlbl{display:none}}

/* ---------- Karte ---------- */
#viewport{transition:opacity .45s var(--ease)}
body.v-karte #viewport{opacity:0;pointer-events:none}
#karte{position:fixed;inset:var(--header) 0 0 0;z-index:2;opacity:0;pointer-events:none;transition:opacity .45s var(--ease);visibility:hidden}
body.v-karte #karte{opacity:1;pointer-events:auto;visibility:visible}
#kmap{position:absolute;inset:0;background-color:var(--bg);background-image:radial-gradient(var(--bg-dot) 1px,transparent 1.2px);background-size:24px 24px}
body.v-karte #legendeBox,body:not(.v-karte) #kartenBox{display:none}
body.v-karte footer{display:none}
.leaflet-container{font:inherit;-webkit-tap-highlight-color:transparent}
.leaflet-tile-pane{filter:saturate(.5) contrast(.96) brightness(1.04);transition:filter .35s}
html.dark .leaflet-tile-pane{filter:invert(1) hue-rotate(180deg) brightness(.82) contrast(.92) saturate(.4)}
.leaflet-control-attribution{background:var(--glass)!important;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:var(--muted)!important;border-radius:10px 0 0 0;font-size:10.5px!important;padding:2px 8px!important}
.leaflet-control-attribution a{color:var(--ink2)!important}
.km{position:relative;width:44px;height:52px;animation:kpop .5s var(--ease) both;animation-delay:var(--d,0ms);transform-origin:50% 100%;transition:transform .2s var(--ease),filter .2s}
.km.noanim{animation:none}
@keyframes kpop{from{opacity:0;transform:translateY(-14px) scale(.6)}to{opacity:1;transform:none}}
.leaflet-marker-icon:hover .km{transform:translateY(-3px) scale(1.06)}
.kpin{position:absolute;left:4px;top:2px;width:36px;height:36px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);
  background:linear-gradient(135deg,color-mix(in srgb,var(--ac) 60%,#fff),var(--ac));box-shadow:0 6px 14px -4px color-mix(in srgb,var(--ac) 70%,transparent),0 0 0 2px var(--card-base)}
.kav{position:absolute;left:8px;top:6px;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-size:10.5px;font-weight:750;color:#fff;
  background:color-mix(in srgb,var(--ac) 80%,#000) center/cover;box-shadow:inset 0 0 0 2px rgba(255,255,255,.75);letter-spacing:.02em;text-shadow:0 1px 1px rgba(0,0,0,.2)}
.km.geb{width:40px;height:40px;transform-origin:50% 50%}
.km.geb .kring{position:absolute;inset:2px;border-radius:50%;background:var(--card-base);box-shadow:0 0 0 3px var(--ac),0 6px 14px -4px color-mix(in srgb,var(--ac) 70%,transparent)}
.km.geb .kav{left:6px;top:6px;background-color:color-mix(in srgb,var(--ac) 22%,var(--card-base));color:color-mix(in srgb,var(--ac) 80%,#000);text-shadow:none;box-shadow:none}
html.dark .km.geb .kav{color:#fff;background-color:color-mix(in srgb,var(--ac) 45%,#1b1e24)}
.km .kbadge{position:absolute;right:-3px;top:-3px;width:17px;height:17px;border-radius:50%;background:var(--ac);color:#fff;display:grid;place-items:center;box-shadow:0 0 0 2px var(--card-base)}
.km .kbadge svg{width:10px;height:10px}
.km.wohn .kbadge{right:-1px;top:-1px}
.km.cl{width:50px;height:50px;transform-origin:50% 50%}
.km.cl .kring{position:absolute;inset:0;border-radius:50%;background:var(--ring);box-shadow:0 8px 18px -6px rgba(20,25,35,.45)}
.km.cl .kin{position:absolute;inset:5px;border-radius:50%;background:var(--card-base);display:grid;place-items:center;text-align:center;line-height:1}
.km.cl .kin b{font-size:16px;font-weight:780;color:var(--ink)}
.km.cl .kin small{display:block;font-size:8.5px;color:var(--muted);font-weight:650;letter-spacing:.04em;margin-top:1px}
.km.sel .kpin,.km.sel .kring{outline:3px solid var(--sel);outline-offset:3px}
.kweg{animation:kweg 1.1s var(--ease) both}
@keyframes kweg{from{opacity:0}to{opacity:.85}}
.leaflet-popup.kpop .leaflet-popup-content-wrapper{background:var(--glass-strong);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);color:var(--ink);
  border-radius:16px;box-shadow:var(--shadow-pop);border:1px solid var(--stroke)}
.leaflet-popup.kpop .leaflet-popup-tip{background:var(--glass-strong);box-shadow:none}
.leaflet-popup.kpop .leaflet-popup-content{margin:12px 14px;font-size:13.5px;line-height:1.4;min-width:220px}
.leaflet-popup.kpop a.leaflet-popup-close-button{color:var(--muted);top:6px;right:6px}
.kp-row{display:flex;align-items:center;gap:10px;padding:6px 0}
.kp-row+.kp-row{border-top:1px solid var(--stroke)}
.kp-row .mini{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:11px;font-weight:700;flex:none;background-size:cover;background-position:center}
.kp-name{font-weight:680;cursor:pointer;border:0;background:none;padding:0;text-align:left;font-size:14px}
.kp-name:hover{text-decoration:underline}
.kp-typ{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:4px}
.kp-typ svg{width:11px;height:11px}
.kp-acts{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}
.kp-acts button{height:30px;padding:0 10px;border-radius:9px;border:1px solid var(--stroke2);background:var(--field);cursor:pointer;font-size:12.5px;font-weight:620}
.kp-acts button.prim{background:linear-gradient(135deg,#7ea6e8,#4f84d1);color:#fff;border-color:transparent}
.kp-mini{display:flex;gap:4px;margin-left:auto}
.kp-mini button{width:28px;height:28px;border-radius:8px;border:1px solid var(--stroke2);background:var(--field);cursor:pointer;display:grid;place-items:center;padding:0}
.kp-mini svg{width:14px;height:14px}
.kp-head{font-size:12px;color:var(--muted);font-weight:650;margin-bottom:2px;text-transform:uppercase;letter-spacing:.06em}
.kp-scroll{max-height:240px;overflow-y:auto}
.kleer{position:absolute;left:50%;top:50%;transform:translate(-50%,-46%);width:min(400px,calc(100vw - 40px));border-radius:22px;padding:26px 24px 22px;text-align:center;
  box-shadow:var(--shadow-pop);z-index:500;opacity:0;pointer-events:none;transition:opacity .4s var(--ease),transform .5s var(--ease)}
.kleer.show{opacity:1;transform:translate(-50%,-50%);pointer-events:auto}
.kleer .kico{width:58px;height:58px;margin:0 auto 12px;border-radius:18px;display:grid;place-items:center;color:#fff;background:linear-gradient(140deg,#6f9be0 0%,#7fbf86 52%,#e38f9b 100%);box-shadow:0 8px 20px -6px rgba(80,110,160,.5)}
.kleer .kico svg{width:30px;height:30px}
.kleer h2{margin:0 0 8px;font-size:19px;letter-spacing:-.015em}
.kleer p{margin:0 0 16px;color:var(--ink2);font-size:14px;line-height:1.55}
.kleer .pbtn{margin:0 auto;height:40px;padding:0 18px;font-size:14px;--z-ac:#4f84d1}
.kmsg{position:absolute;left:50%;bottom:22px;transform:translate(-50%,10px);z-index:500;font-size:13px;color:var(--ink2);padding:8px 14px;border-radius:12px;box-shadow:var(--shadow-card);
  opacity:0;pointer-events:none;transition:opacity .35s var(--ease),transform .35s var(--ease);max-width:calc(100vw - 120px);text-align:center}
.kmsg.show{opacity:1;transform:translate(-50%,0)}
.koff{bottom:64px}
.kcount{margin-left:6px;font-size:11.5px;font-weight:650;color:var(--muted)}
.kf{display:flex;align-items:center;gap:9px;padding:6px 0;cursor:pointer;color:var(--ink2);font-size:13.5px}
.kf input{width:18px;height:18px;accent-color:#4f84d1;margin:0}
.kf b{margin-left:auto;font-size:12px;color:var(--faint);font-weight:650}
.kic{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;flex:none}
.kic svg{width:13px;height:13px}
.kic.geb{background:var(--card-base);color:#d4a017;box-shadow:inset 0 0 0 2px #9aa0a8}
.kic.wohn{background:#7a8aa5;color:#fff}
.kic.weg{color:var(--muted)}
.kic.weg svg{width:20px;height:20px}
.kzw{display:flex;flex-wrap:wrap;gap:4px 10px;margin-top:8px;padding-top:8px;border-top:1px solid var(--stroke);font-size:12px;color:var(--muted)}
.kzw span{display:flex;align-items:center;gap:5px}
.kzw i{width:9px;height:9px;border-radius:50%}
.khint{font-size:12px;color:var(--muted);margin-top:6px;line-height:1.4}
.khint:empty{display:none}
/* Ortsfeld mit Vorschlägen */
.pf{position:relative}
.pw{position:relative}
.pw input{padding-right:36px!important}
.pclr{position:absolute;right:7px;top:9px;width:24px;height:24px;border-radius:50%;border:0;background:var(--seg);cursor:pointer;font-size:10px;color:var(--muted)}
.psug{display:none;margin-top:6px;border:1px solid var(--stroke2);border-radius:12px;background:var(--glass-strong);box-shadow:var(--shadow-pop);padding:4px;max-height:260px;overflow-y:auto}
.psug.show{display:block;animation:slidein .25s var(--ease)}
.psug button{display:block;width:100%;text-align:left;border:0;background:none;padding:8px 10px;border-radius:9px;cursor:pointer;font-size:14px;line-height:1.3}
.psug button:hover,.psug button.act{background:var(--hover)}
.psug button small{display:block;color:var(--faint);font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.psug .pnone{padding:9px 10px;font-size:13px;color:var(--muted)}
.pstat{font-size:12px;color:var(--muted);margin-top:5px;display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.pstat:empty{display:none}
.plk{border:0;background:none;color:#4f84d1;cursor:pointer;font-size:12px;font-weight:650;padding:0}
.starttag{display:inline-flex;align-items:center;gap:5px;margin-top:6px;font-size:11.5px;font-weight:700;color:#b7860b;background:rgba(242,193,78,.18);padding:3px 10px;border-radius:20px}
.sh-acts.col{flex-direction:column;align-items:stretch}
.sh-acts.col .pbtn{justify-content:center}
.zrow{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.zrow select{font:inherit;font-size:15px;height:36px;border-radius:10px;border:1px solid var(--stroke2);background:var(--field);color:var(--ink);padding:0 8px}
/* ---------- Mobil ---------- */
@media (max-width:760px){
  :root{--header:108px}
  header{flex-wrap:wrap;height:var(--header);padding:8px 12px;gap:8px;align-content:center}
  .brand{flex:1 1 auto;order:1;min-width:0}
  .brand > div{min-width:0}.brand h1{overflow:hidden;text-overflow:ellipsis}
  .brand small{overflow:hidden;text-overflow:ellipsis}
  #themeBtn,.menuwrap{order:1}
  header::after{content:"";order:2;flex-basis:100%;height:0}
  .brand h1{font-size:15.5px}
  .brand .logo{width:32px;height:32px}
  .seg{order:3;margin-left:0}
  .seg button{padding:0 11px;font-size:13px}
  .seg .long{display:none}
  .search{order:4;flex:1 1 120px;max-width:none;margin:0;min-width:0}
  .hbtn .lbl{display:none}
  .floatcol{left:10px;top:calc(var(--header) + 10px);width:auto;max-width:calc(100vw - 20px);flex-direction:row;flex-wrap:wrap;align-items:flex-start}
  details.box{max-width:calc(100vw - 20px)}
  details.box[open]{width:calc(100vw - 20px)}
  .zoom{right:10px;bottom:40px}
  #panel{top:auto;left:0;right:0;bottom:0;width:auto;height:58vh;border-radius:24px 24px 0 0;transform:translateY(105%)}
  #panel.open{transform:none}
  #panel::before{content:"";position:sticky;top:0;display:block;margin:8px auto -13px;width:40px;height:5px;border-radius:3px;background:var(--stroke2);z-index:2}
  body.panel-open .zoom{right:10px;bottom:calc(58vh + 12px)}
  .phead{padding:22px 20px 14px}
  .phead .av{width:72px;height:72px;font-size:24px}
  #fokusbar{bottom:40px;max-width:calc(100vw - 80px);left:calc(50% - 24px)}
  .crumbs button:not(.cur){display:none}.crumbs .sep{display:none}

  .dirty{order:1;padding:0 9px;height:28px}
  .brand{flex:1 1 0}
  body.editing .floatcol{display:none}
  #editBtn{order:1}
  #edbar{top:calc(var(--header) + 10px);left:10px;right:auto;transform:translateY(-12px)}
  body.editing #edbar{transform:none}
  #edbar .edlbl,#edbar .lbl2{display:none}
  #edbar button{min-width:38px;height:38px;padding:0 8px}
  #sheet{left:0;right:0;top:auto;bottom:0;width:auto;max-height:90vh;border-radius:24px 24px 0 0;transform:translateY(105%);padding-bottom:env(safe-area-inset-bottom)}
  #sheet.show{transform:none}
  #sheet::before{content:"";display:block;margin:8px auto -6px;width:40px;height:5px;border-radius:3px;background:var(--stroke2)}
  .sh-acts .pbtn{flex:1}
  .ef{gap:9px}

  .seg button{padding:0 9px;gap:5px}
  .seg button svg{width:14px;height:14px}
  .kleer{padding:22px 18px 18px}
  .kmsg{bottom:16px;max-width:calc(100vw - 90px)}
  .koff{bottom:58px}
  body.v-karte .zoom{bottom:24px}
  .tip{bottom:92px;left:calc(50% - 30px);white-space:normal;width:max-content;max-width:calc(100vw - 100px);text-align:center}
}
@media (max-width:600px){            /* drei Ansichts-Knöpfe + Suche passen nicht in eine Zeile -> Suche in eigene Zeile */
  :root{--header:152px}
  .search{flex-basis:100%}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:0s!important;transition-delay:0s!important;animation-duration:0s!important;animation-delay:0s!important}
}
/* ---------- Druck / PDF ---------- */
@page{size:A4 landscape;margin:10mm}
.printhead{display:none}
@media print{
  html,body{overflow:visible;height:auto;background:#fff!important;color:#1d2127}
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  header,.floatcol,.zoom,#panel,.results,#fokusbar,.tip,.xchip,#edbar,#sheet,#sheetbg{display:none!important}
  body.editing #viewport{box-shadow:none}
  .printhead{display:block;font-size:18px;font-weight:650;margin:0 0 4px}
  #viewport{position:relative;inset:auto;width:1040px;height:650px;background:none;overflow:hidden}
  footer{position:static;transform:none;display:block;text-align:right;background:none;padding:4px 0 0;border:0}
  .card{box-shadow:none!important;translate:none!important}
  .card:not(.gone){opacity:1!important}
  #lines path{opacity:1!important;animation:none!important;stroke-dashoffset:0!important}
  #lines path.draw{stroke-dasharray:none!important}
  #world.anim,.card{transition:none!important}
}

/* ---------- Server-Version: Speicherstatus, Menü, Laden, App-Hinweis ---------- */
body.sync-on .dirty{display:flex}
#saveBtn2{display:none!important}
.dirty[data-s="ok"]{border-color:color-mix(in srgb,#4caf6a 45%,transparent);background:color-mix(in srgb,#4caf6a 13%,var(--field));color:#2e6b3c;cursor:default}
html.dark .dirty[data-s="ok"]{color:#8fd6a0}
.dirty[data-s="ok"] i{background:#4caf6a;animation:none;box-shadow:0 0 0 3px color-mix(in srgb,#4caf6a 22%,transparent)}
.dirty[data-s="saving"]{border-color:color-mix(in srgb,#5b8fd6 45%,transparent);background:color-mix(in srgb,#5b8fd6 13%,var(--field));color:#2f5a96}
html.dark .dirty[data-s="saving"]{color:#9cc0f0}
.dirty[data-s="saving"] i{background:#5b8fd6;box-shadow:none;animation:sbpuls .9s ease-in-out infinite}
@keyframes sbpuls{50%{transform:scale(.5);opacity:.55}}
.dirty[data-s="cache"]{border-color:var(--stroke2);background:var(--field);color:var(--ink2)}
.dirty[data-s="cache"] i{background:var(--faint);animation:none;box-shadow:none}
.dirty[data-s="error"],.dirty[data-s="login"]{border-color:color-mix(in srgb,#d9534a 45%,transparent);background:color-mix(in srgb,#d9534a 11%,var(--field));color:#9b2c25}
html.dark .dirty[data-s="error"],html.dark .dirty[data-s="login"]{color:#f0a19b}
.dirty[data-s="error"] i,.dirty[data-s="login"] i{background:#d9534a;animation:none;box-shadow:none}
body.nur-lesen #editBtn,body.nur-lesen #importBtn,body.nur-lesen #kleerBtn{display:none!important}
.menu [hidden]{display:none!important}
.menu .mesep{height:1px;background:var(--stroke2);margin:6px 6px}
.menu .meinfo{padding:8px 10px 6px;display:flex;flex-direction:column;gap:2px;font-size:14px}
.menu .meinfo small{color:var(--muted);font-size:12px}
.boot{position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;background:var(--bg);color:var(--muted);font-size:14px;transition:opacity .45s var(--ease)}
.boot.weg{opacity:0;pointer-events:none}
.boot .blogo{width:54px;height:54px;border-radius:16px;background:linear-gradient(140deg,#6f9be0 0%,#7fbf86 52%,#e38f9b 100%);box-shadow:0 8px 24px -6px rgba(80,110,160,.45);animation:bootp 1.4s ease-in-out infinite}
@keyframes bootp{50%{transform:scale(.92);opacity:.75}}
.boot .bfehler{max-width:320px;text-align:center;color:var(--ink2);line-height:1.5}
.boot button{margin-top:6px;border:0;border-radius:12px;padding:10px 18px;font-weight:650;background:var(--ink);color:var(--bg);cursor:pointer}
.a2hs{position:fixed;left:12px;right:12px;bottom:calc(14px + env(safe-area-inset-bottom));z-index:60;border-radius:18px;padding:14px 44px 14px 16px;box-shadow:var(--shadow-pop);
  background:var(--glass-strong);font-size:14px;transform:translateY(24px);opacity:0;transition:transform .45s var(--ease),opacity .45s var(--ease);max-width:460px;margin:0 auto}
.a2hs.show{transform:none;opacity:1}
.a2hs p{margin:6px 0 0;color:var(--ink2);line-height:1.45}
.a2hs .shr{white-space:nowrap}.a2hs .shr svg{width:16px;height:16px;vertical-align:-3px}
.a2hs .pclose{position:absolute;top:8px;right:8px;width:30px;height:30px;border-radius:50%;border:0;background:var(--hover);cursor:pointer}

/* (Kopfzeile auf schmalen Handys: jetzt direkt in template.html) */