* {
 box-sizing: border-box;
}

html,
body {
 width: 100%;
 height: 100%;
 margin: 0;
}

body {
 font-family: Arial, Helvetica, sans-serif;
 color: #1e2933;
 background: #ffffff;
}

button,
input,
select {
 font: inherit;
}

/*
 * Hauptaufteilung:
 * Karte links, Eigenschaften rechts
 */
#app {
 display: grid;
 grid-template-columns: minmax(0, 1fr) 380px;
 width: 100%;
 height: 100%;
}

#map {
 width: 100%;
 height: 100%;
 min-width: 0;
}

#sidebar {
 overflow-y: auto;
 border-left: 1px solid #cbd2d9;
 background: #ffffff;
}

#sidebar-header {
 padding: 18px;
 border-bottom: 1px solid #dfe4e8;
 background: #f7f9fa;
}

#sidebar-header h1 {
 margin: 0 0 6px;
 font-size: 22px;
}

#sidebar-header p {
 margin: 0;
 color: #5f6b76;
 font-size: 14px;
}

#properties {
 padding: 18px;
}

#properties h2 {
 margin: 0 0 18px;
 font-size: 20px;
}

.field {
 display: block;
 margin-bottom: 18px;
}

.field > span {
 display: block;
 margin-bottom: 7px;
 font-weight: 600;
}

.field input,
.field select {
 width: 100%;
 padding: 10px 11px;
 border: 1px solid #b8c0c7;
 border-radius: 5px;
 background: #ffffff;
}

.field input:focus,
.field select:focus {
 border-color: #2878c8;
 outline: 2px solid rgb(40 120 200 / 15%);
}

.checkbox-field {
 display: flex;
 gap: 9px;
 align-items: flex-start;
 margin-bottom: 18px;
}

.checkbox-field input {
 margin-top: 3px;
}

.info-box,
.warning-box,
.success-box,
.coordinates,
.connection-list {
 margin: 14px 0;
 padding: 12px;
 border-radius: 6px;
}

.info-box {
 border: 1px solid #c9d7e5;
 background: #eef5fb;
}

.warning-box {
 border: 1px solid #e1bd58;
 background: #fff4cf;
}

.success-box {
 border: 1px solid #70aa79;
 background: #e9f6eb;
}

.coordinates {
 background: #f1f3f5;
 color: #4e5963;
 font-size: 13px;
}

.connection-list {
 display: grid;
 gap: 14px;
 background: #f1f3f5;
}

.connection-item {
 padding-bottom: 12px;
 border-bottom: 1px solid #d5dade;
}

.connection-item:last-child {
 padding-bottom: 0;
 border-bottom: 0;
}

.not-connected {
 color: #b42318;
 font-weight: 600;
}

.connected {
 color: #207532;
 font-weight: 600;
}

/*
 * Karten-Knoten
 */
.node-marker-wrapper {
 border: 0;
 background: transparent;
}

.node-marker {
 display: grid;
 place-items: center;
 width: 32px;
 height: 32px;
 border: 3px solid #ffffff;
 border-radius: 50%;
 color: #ffffff;
 font-size: 14px;
 font-weight: 700;
 box-shadow: 0 2px 7px rgb(0 0 0 / 45%);
}

/*
 * Ausgangskarten eines Knotens
 */
.exit-card {
 margin: 17px 0;
 padding: 13px;
 border: 1px solid #ccd3d9;
 border-radius: 7px;
 background: #fafbfc;
}

.exit-card-header {
 display: flex;
 justify-content: space-between;
 gap: 10px;
 align-items: center;
 margin-bottom: 10px;
}

.route-reference {
 margin-bottom: 13px;
 padding: 8px 10px;
 border-radius: 4px;
 background: #edf0f2;
 color: #4d5964;
 font-size: 14px;
}

.route-type-label {
 display: inline-block;
 margin-top: 5px;
 padding: 3px 7px;
 border-radius: 4px;
 background: #dfe5e9;
 color: #4b5660;
 font-size: 12px;
}

/*
 * Schaltflächen
 */
.small-button,
.primary-button {
 cursor: pointer;
 border: 0;
 border-radius: 5px;
}

.small-button {
 padding: 6px 9px;
 background: #e2e7eb;
 color: #26323c;
 font-size: 13px;
}

.small-button:hover {
 background: #d3dbe1;
}

.primary-button {
 width: 100%;
 padding: 11px 13px;
 background: #2878c8;
 color: #ffffff;
 font-weight: 600;
}

.primary-button:hover {
 background: #1e66ad;
}

/*
 * Mobil: Seitenleiste unter der Karte
 */
@media (max-width: 800px) {
 #app {
  grid-template-columns: 1fr;
  grid-template-rows: 60vh auto;
 }

 #sidebar {
  border-top: 1px solid #cbd2d9;
  border-left: 0;
 }
}
.node-snap-marker {
 width: 18px;
 height: 18px;
 border-radius: 50%;
 background: transparent;
 pointer-events: none;
}