:root{
  --ink:#08262b;
  --panel:#0f3b43;
  --panel-2:#134b55;
  --hair:rgba(255,255,255,.13);
  --text:#e8f1f2;
  --text-dim:#8fb0b6;
  --gold:#d9a441;
  --erd:#0f7f8f;
  --frei:#e07a2a;
  --bad:#e0574a;
  --ui: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{font-family:var(--ui);background:var(--ink);color:var(--text);overflow:hidden}
button,input,select,textarea{font:inherit;color:inherit}

.wordmark{display:flex;align-items:baseline;gap:9px;white-space:nowrap;min-width:0}
.wordmark em{
  font-style:normal;font-size:13px;font-weight:500;color:var(--text-dim);
  padding-right:9px;border-right:1px solid var(--hair);
  overflow:hidden;text-overflow:ellipsis;
}
.wordmark b{font-size:15px;font-weight:650;letter-spacing:.02em}
.wordmark span{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}

/* Im Anmeldefenster steht der Verein über dem Namen der Anwendung */
.gatebox .wordmark{flex-direction:column;align-items:flex-start;gap:2px;white-space:normal}
.gatebox .wordmark em{border-right:0;padding-right:0;color:var(--gold);font-size:12.5px}
.gatebox .wordmark b{font-size:20px}

/* ---------- Anmeldung ---------- */
.gate{position:fixed;inset:0;display:grid;place-items:center;padding:20px;z-index:1000;background:var(--ink)}
.gate[hidden]{display:none}
.gatebox{width:100%;max-width:340px;background:var(--panel);border:1px solid var(--hair);border-radius:13px;padding:22px}
.gatebox .wordmark{margin-bottom:14px}
.gateintro{margin:0 0 16px;font-size:13px;color:var(--text-dim)}
.gateerr{background:rgba(224,87,74,.14);border:1px solid rgba(224,87,74,.5);border-radius:7px;padding:8px 10px;font-size:12.5px;margin-bottom:10px}
.primary{background:var(--gold);color:#1a1200;border:0;border-radius:8px;padding:10px 14px;font-size:13.5px;font-weight:650;cursor:pointer}
.primary:disabled{opacity:.6;cursor:default}
.wide{width:100%}

/* ---------- Grundgerüst ---------- */
.app{display:flex;flex-direction:column;height:100dvh}
.app[hidden]{display:none}
header{display:flex;align-items:center;gap:12px;padding:0 14px;height:52px;flex:0 0 auto;
  background:var(--ink);border-bottom:1px solid var(--hair);z-index:800}
header .spacer{flex:1}
.saved{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.saved[hidden]{display:none}
.usermenu{background:var(--panel);border:1px solid var(--hair);border-radius:7px;padding:7px 11px;font-size:12px;cursor:pointer}
.usermenu:hover{background:var(--panel-2)}

.seg{display:flex;border:1px solid var(--hair);border-radius:7px;overflow:hidden}
.seg button{background:transparent;border:0;padding:7px 12px;cursor:pointer;font-size:12px;color:var(--text-dim)}
.seg button+button{border-left:1px solid var(--hair)}
.seg button[aria-pressed="true"]{background:var(--panel-2);color:var(--text)}

/* ---------- Arbeitsfläche ---------- */
.work{flex:1;display:flex;min-height:0;position:relative}
aside{width:312px;flex:0 0 auto;display:flex;flex-direction:column;min-height:0;
  background:var(--panel);border-right:1px solid var(--hair)}

.tools{padding:11px;border-bottom:1px solid var(--hair)}
.tools h2,.listhead h2,.detail h2{margin:0 0 9px;font-family:var(--mono);font-size:10px;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--text-dim)}
#count{color:var(--gold)}
.toolgrid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.tool{display:flex;align-items:center;gap:8px;text-align:left;background:var(--panel-2);
  border:1px solid transparent;border-radius:8px;padding:9px 10px;cursor:pointer;font-size:12.5px}
.tool:hover{border-color:var(--hair)}
.tool[aria-pressed="true"]{border-color:var(--gold);background:#17575f}
.tool .glyph{width:16px;height:16px;flex:0 0 auto;display:grid;place-items:center}
.tool.wide{grid-column:1/-1}

.drawhint{margin-top:9px;padding:9px 10px;border-radius:8px;font-size:12px;
  background:rgba(217,164,65,.12);border:1px solid rgba(217,164,65,.4)}
.drawhint button{margin-top:7px;margin-right:6px;background:var(--gold);color:#1a1200;border:0;
  border-radius:6px;padding:6px 11px;font-size:12px;font-weight:600;cursor:pointer}
.drawhint button.ghost{background:transparent;color:var(--text);border:1px solid var(--hair);font-weight:400}

.listhead{padding:11px 11px 8px}
.filterrow{display:flex;gap:6px;margin-bottom:8px}
.filterrow input{flex:1;background:var(--ink);border:1px solid var(--hair);border-radius:7px;padding:7px 9px;font-size:12.5px}
.chips{display:flex;flex-wrap:wrap;gap:5px}
.chip{border:1px solid var(--hair);background:transparent;border-radius:999px;padding:4px 9px;font-size:11px;cursor:pointer;color:var(--text-dim)}
.chip[aria-pressed="true"]{background:var(--panel-2);color:var(--text)}

.list{flex:1;overflow:auto;padding:0 11px 11px}
.row{display:flex;align-items:center;gap:9px;width:100%;text-align:left;background:transparent;
  border:0;border-bottom:1px solid var(--hair);padding:9px 2px;cursor:pointer}
.row:hover{background:rgba(255,255,255,.04)}
.row .glyph{width:16px;flex:0 0 auto;display:grid;place-items:center}
.row .rbody{flex:1;min-width:0}
.row .rname{font-family:var(--mono);font-size:12.5px;display:block}
.row .rmeta{font-size:11px;color:var(--text-dim);margin-top:2px;display:block}
.row .rnote{font-size:11px;color:var(--text-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.row .cam{font-size:11px;color:var(--gold);flex:0 0 auto}
.empty{padding:22px 4px;font-size:12.5px;color:var(--text-dim);line-height:1.5}

.exports{padding:11px;border-top:1px solid var(--hair);display:grid;grid-template-columns:1fr 1fr;gap:6px}
.exports button{background:transparent;border:1px solid var(--hair);border-radius:7px;padding:8px;font-size:12px;cursor:pointer}
.exports button:hover{background:var(--panel-2)}
.exports .full{grid-column:1/-1}

/* ---------- Karte ---------- */
.mapwrap{flex:1;position:relative;min-width:0}
#map{position:absolute;inset:0;background:#0b3138}
.leaflet-container{font-family:var(--ui)}
.mapbtns{position:absolute;right:12px;top:12px;z-index:600;display:flex;flex-direction:column;gap:6px;align-items:stretch}
.mapbtn{background:var(--panel);color:var(--text);border:1px solid var(--hair);border-radius:8px;
  padding:9px 11px;font-size:12px;cursor:pointer;box-shadow:0 2px 10px rgba(0,0,0,.3);white-space:nowrap}
.mapbtn:hover{background:var(--panel-2)}

.legend{position:absolute;left:12px;bottom:22px;z-index:600;background:rgba(8,38,43,.92);
  border:1px solid var(--hair);border-radius:9px;padding:10px 12px;font-size:11.5px;line-height:1.9;backdrop-filter:blur(4px)}
.legend b{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--text-dim);font-weight:500;margin-bottom:5px}
.legend div{display:flex;align-items:center;gap:8px}
.legend i{width:22px;height:0;display:inline-block;flex:0 0 auto}

/* Signalfluss */
.flow{stroke-dasharray:2 15;animation:flow 1.4s linear infinite}
@keyframes flow{to{stroke-dashoffset:-17}}
@media (prefers-reduced-motion: reduce){.flow{animation:none;opacity:.5}}
.arrow span{display:block;transform-origin:50% 50%}
.nodeicon{display:grid;place-items:center}
.nodelabel{position:absolute;left:50%;top:100%;transform:translateX(-50%);font-family:var(--mono);
  font-size:10px;color:#fff;white-space:nowrap;text-shadow:0 0 3px #000,0 0 3px #000,0 0 3px #000;margin-top:1px}

/* ---------- Detailfenster ---------- */
.detail{position:absolute;right:12px;bottom:12px;width:296px;z-index:700;background:var(--panel);
  border:1px solid var(--hair);border-radius:11px;padding:13px;box-shadow:0 10px 34px rgba(0,0,0,.45);
  max-height:calc(100% - 24px);overflow:auto}
.detail[hidden]{display:none}
.detail .close{position:absolute;right:9px;top:9px;background:transparent;border:0;cursor:pointer;color:var(--text-dim);font-size:17px;line-height:1}
.field{margin-bottom:9px}
.field label{display:block;font-size:11px;color:var(--text-dim);margin-bottom:3px}
.field input,.field textarea,.field select{width:100%;background:var(--ink);border:1px solid var(--hair);
  border-radius:7px;padding:7px 9px;font-size:12.5px}
.field textarea{resize:vertical;min-height:56px}
.field input:disabled,.field textarea:disabled{opacity:.65}
.facts{font-family:var(--mono);font-size:11.5px;color:var(--text-dim);line-height:1.7;margin-bottom:10px}
.thumbs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:9px}
.thumb{position:relative}
.thumb img{width:56px;height:56px;object-fit:cover;border-radius:6px;border:1px solid var(--hair);display:block;cursor:pointer}
.thumb button{position:absolute;top:-6px;right:-6px;width:19px;height:19px;border-radius:50%;
  background:var(--bad);color:#fff;border:0;font-size:12px;line-height:1;cursor:pointer}
.dactions{display:flex;gap:6px;flex-wrap:wrap}
.dactions button{background:var(--panel-2);border:1px solid var(--hair);border-radius:7px;padding:7px 10px;font-size:12px;cursor:pointer}
.dactions button:hover{background:#17575f}
.dactions .danger{color:var(--bad);border-color:rgba(224,87,74,.5)}
.filebtn{display:inline-block;background:var(--panel-2);border:1px solid var(--hair);border-radius:7px;padding:7px 10px;font-size:12px;cursor:pointer}
.filebtn input{display:none}

.toast{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);background:var(--gold);color:#1a1200;
  padding:9px 15px;border-radius:8px;font-size:12.5px;font-weight:600;z-index:900;box-shadow:0 6px 20px rgba(0,0,0,.4)}
.toast[hidden]{display:none}

/* ---------- Dialoge ---------- */
.modal{position:fixed;inset:0;background:rgba(3,16,19,.72);display:grid;place-items:center;z-index:1100;padding:16px}
.modal[hidden]{display:none}
.modalbox{background:var(--panel);border:1px solid var(--hair);border-radius:13px;padding:18px;
  width:100%;max-width:460px;max-height:86dvh;overflow:auto}
.modalbox h3{margin:0 0 4px;font-size:15px}
.modalbox .sub{margin:0 0 14px;font-size:12px;color:var(--text-dim)}
.utable{width:100%;border-collapse:collapse;font-size:12.5px;margin-bottom:14px}
.utable th{text-align:left;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-dim);font-weight:500;padding:0 6px 6px 0}
.utable td{padding:6px 6px 6px 0;border-top:1px solid var(--hair);vertical-align:middle}
.utable select{background:var(--ink);border:1px solid var(--hair);border-radius:6px;padding:4px 6px;font-size:12px}
.utable .mini{background:transparent;border:1px solid var(--hair);border-radius:6px;padding:4px 8px;font-size:11.5px;cursor:pointer}
.utable .mini.danger{color:var(--bad);border-color:rgba(224,87,74,.5)}
.modalrow{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.modalrow button{background:var(--panel-2);border:1px solid var(--hair);border-radius:7px;padding:8px 12px;font-size:12.5px;cursor:pointer}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.hint{font-size:11.5px;color:var(--text-dim);line-height:1.5}

/* ---------- Feldmodus ---------- */
body.field .tool{padding:13px 12px;font-size:14px}
body.field .row{padding:13px 2px}
body.field .mapbtn{padding:13px 15px;font-size:14px}

/* ---------- Mobil ---------- */
@media (max-width:760px){
  header{gap:9px;padding:0 10px}
  .wordmark span{display:none}
  header .wordmark em{display:none}
  .work{flex-direction:column-reverse}
  aside{width:100%;height:44dvh;border-right:0;border-top:1px solid var(--hair);border-radius:14px 14px 0 0}
  .mapwrap{flex:1}
  .detail{left:10px;right:10px;width:auto;bottom:10px}
  .legend{display:none}
}

/* ---------- Druck ---------- */
@media print{
  header,aside,.mapbtns,.detail,.toast,.modal{display:none !important}
  .work,.app{display:block;height:auto}
  .mapwrap{position:relative;height:150mm}
  .legend{position:fixed;left:8mm;bottom:8mm;background:#fff;color:#000;border-color:#999}
  .legend b{color:#555}
  body{background:#fff}
}

/* ---------- Griffe zum Bearbeiten der Kabel ----------
   Die Marker-Fläche ist bewusst größer als der sichtbare Punkt:
   klein in der Ansicht, aber bequem zu treffen.                */
.vertex{display:grid;place-items:center;cursor:grab}
.vertex i{
  display:block;width:8px;height:8px;border-radius:50%;
  background:#fff;border:2px solid var(--erd);
  box-shadow:0 1px 3px rgba(0,0,0,.55);
  transition:width .12s ease, height .12s ease, border-width .12s ease;
}
.vertex:hover i, .vertex:focus i{width:17px;height:17px;border-width:2.5px}
.vertex:active{cursor:grabbing}
.vertex:active i{width:17px;height:17px}

.vertex.mid i{
  width:7px;height:7px;background:rgba(255,255,255,.6);
  border:2px dashed var(--erd);box-shadow:none;
}
.vertex.mid{cursor:copy}
.vertex.mid:hover i{width:15px;height:15px}

/* Ohne Mauszeiger gibt es kein Überfahren – im Feldmodus daher gleich groß */
body.field .vertex i{width:15px;height:15px}
body.field .vertex.mid i{width:13px;height:13px}

/* ---------- Ring am Einrastpunkt ---------- */
.snapring{pointer-events:none}
.snapring i{
  display:block;width:48px;height:48px;border-radius:50%;
  border:3px solid var(--gold);
  box-shadow:0 0 0 3px rgba(217,164,65,.22), 0 0 12px rgba(217,164,65,.5);
  animation:snappuls 1.1s ease-in-out infinite;
}
@keyframes snappuls{
  0%,100%{transform:scale(1);opacity:1}
  50%{transform:scale(.88);opacity:.75}
}
@media (prefers-reduced-motion: reduce){.snapring i{animation:none}}

.vpop{display:flex;flex-direction:column;gap:7px;min-width:132px}
.vpop span{font-size:11.5px;color:#456}
.vpop button{background:#fff;border:1px solid #c9ccce;border-radius:6px;padding:6px 9px;
  font-size:12px;color:#b3392e;cursor:pointer}
.leaflet-popup-content-wrapper{border-radius:9px}

/* ---------- Merkmal-Schalter ---------- */
.check{display:flex;align-items:center;gap:8px;font-size:12.5px;margin-bottom:10px;cursor:pointer}
.check input{width:16px;height:16px;accent-color:var(--gold)}

/* ---------- Mehrfachauswahl ---------- */
.mapbtn[aria-pressed="true"]{background:var(--gold);color:#1a1200;border-color:var(--gold);font-weight:600}

.selbar{
  position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:750;
  display:flex;align-items:center;gap:9px;white-space:nowrap;
  background:var(--panel);border:1px solid var(--gold);border-radius:10px;
  padding:9px 12px;box-shadow:0 8px 26px rgba(0,0,0,.45);
}
.selbar[hidden]{display:none}
.selbar span{font-size:12.5px}
.selbar button{
  background:var(--panel-2);border:1px solid var(--hair);border-radius:7px;
  padding:7px 11px;font-size:12px;cursor:pointer;
}
.selbar button:hover{background:#17575f}
.selbar .danger{color:var(--bad);border-color:rgba(224,87,74,.5)}

.nodeicon.markiert::before{
  content:"";position:absolute;left:50%;top:50%;width:30px;height:30px;
  margin:-15px 0 0 -15px;border-radius:50%;
  border:2px dashed var(--gold);background:rgba(217,164,65,.16);
}
.auswahlrahmen{
  fill:rgba(217,164,65,.12);stroke:var(--gold);stroke-width:1.5;stroke-dasharray:6 4;
}
@media print{ .selbar{display:none !important} }

/* ---------- Adressfeld ---------- */
.adrrow{display:flex;gap:6px}
.adrrow input{flex:1;min-width:0}
.adrrow button{
  flex:0 0 auto;width:34px;background:var(--panel-2);border:1px solid var(--hair);
  border-radius:7px;font-size:15px;line-height:1;cursor:pointer;
}
.adrrow button:hover{background:#17575f}

/* ---------- Standortanzeige ---------- */
.ortpunkt i{
  display:block;width:16px;height:16px;border-radius:50%;
  background:var(--gold);border:2.5px solid #fff;
  box-shadow:0 0 0 1px rgba(0,0,0,.4), 0 0 10px rgba(217,164,65,.7);
}

/* ---------- Zeichenhinweis auf schmalen Geräten ----------
   Auf dem Handy sitzt die Seitenleiste unten und ist in der Höhe begrenzt.
   Der Hinweis samt "Kabel speichern" schwebt deshalb darüber über der Karte,
   damit der Knopf nie angeschnitten wird.                                  */
@media (max-width:760px){
  .drawhint{
    position:fixed;left:10px;right:10px;bottom:calc(44dvh + 10px);
    z-index:760;margin-top:0;
    background:var(--panel);border-color:var(--gold);
    box-shadow:0 8px 26px rgba(0,0,0,.5);
    font-size:13px;
  }
  .drawhint button{padding:11px 15px;font-size:13.5px;margin-top:9px}
  .selbar{bottom:calc(44dvh + 10px)}
}

/* ---------- Sortierung ---------- */
.sortrow{display:flex;align-items:center;gap:6px;margin-bottom:8px}
.sortrow label{font-size:11px;color:var(--text-dim);flex:0 0 auto}
.sortrow select{
  flex:1;min-width:0;background:var(--ink);border:1px solid var(--hair);
  border-radius:7px;padding:6px 8px;font-size:12px;
}
.sortrow button{
  flex:0 0 auto;width:30px;background:var(--ink);border:1px solid var(--hair);
  border-radius:7px;padding:6px 0;font-size:13px;cursor:pointer;
}
.sortrow button:hover{background:var(--panel-2)}